diff --git a/packages/admin-ui/src/lib/catalog/src/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.html b/packages/admin-ui/src/lib/catalog/src/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.html index acde7e3c62..ca6337ee3c 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.html +++ b/packages/admin-ui/src/lib/catalog/src/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.html @@ -48,10 +48,10 @@ {{ row.name }} - {{ row.price / 100 | currency: currentChannel?.currencyCode }} + {{ row.price | localeCurrency: currentChannel?.currencyCode }} - {{ row.pricePreview / 100 | currency: selectedChannel?.currencyCode }} + {{ row.pricePreview | localeCurrency: selectedChannel?.currencyCode }} - diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html b/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html index c254442320..d877e86a7d 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html +++ b/packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html @@ -89,7 +89,7 @@ (ngModelChange)="onFormChanged(variantFormValues[variant.id])" > - {{ variantFormValues[variant.id].price / 100 | currency: currencyCode }} + {{ variantFormValues[variant.id].price | localeCurrency: currencyCode }} diff --git a/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.html b/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.html index cdbc5de5e2..8801468903 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.html +++ b/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.html @@ -5,6 +5,6 @@
{{ 'catalog.price-with-tax-in-default-zone' - | translate: { price: grossPrice$ | async | currency: currencyCode, rate: taxRate$ | async } + | translate: { price: grossPrice$ | async | localeCurrency: currencyCode, rate: taxRate$ | async } }}
diff --git a/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.ts index f8e559dc55..be311d360e 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.ts +++ b/packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.ts @@ -51,7 +51,7 @@ export class VariantPriceDetailComponent implements OnInit, OnChanges { this.grossPrice$ = combineLatest(this.taxRate$, this.priceChange$).pipe( map(([taxRate, price]) => { - return Math.round(price * ((100 + taxRate) / 100)) / 100; + return Math.round(price * ((100 + taxRate) / 100)); }), ); } diff --git a/packages/admin-ui/src/lib/core/src/public_api.ts b/packages/admin-ui/src/lib/core/src/public_api.ts index b93d7ca23e..10c6894d8d 100644 --- a/packages/admin-ui/src/lib/core/src/public_api.ts +++ b/packages/admin-ui/src/lib/core/src/public_api.ts @@ -176,7 +176,7 @@ export * from './shared/dynamic-form-inputs/select-form-input/select-form-input. export * from './shared/dynamic-form-inputs/text-form-input/text-form-input.component'; export * from './shared/pipes/asset-preview.pipe'; export * from './shared/pipes/channel-label.pipe'; -export * from './shared/pipes/currency-name.pipe'; +export * from './shared/pipes/locale-currency-name.pipe'; export * from './shared/pipes/custom-field-label.pipe'; export * from './shared/pipes/duration.pipe'; export * from './shared/pipes/file-size.pipe'; diff --git a/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.html b/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.html index 9d7d7183de..cf95421aa1 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.html +++ b/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.html @@ -1,4 +1,7 @@ - + { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [FormsModule], + providers: [{ provide: DataService, useClass: MockDataService }], declarations: [ TestControlValueAccessorComponent, TestSimpleComponent, CurrencyInputComponent, AffixedInputComponent, - CurrencyNamePipe, + LocaleCurrencyNamePipe, ], }).compileComponents(); })); @@ -66,11 +70,35 @@ describe('CurrencyInputComponent', () => { expect(fixture.componentInstance.price).toBe(157); })); + describe('currencyCode display', () => { + it('displays currency code in correct position (prefix)', fakeAsync(() => { + MockDataService.language = LanguageCode.en; + const fixture = createAndRunChangeDetection(TestSimpleComponent, 4299, 'GBP'); + const prefix = fixture.debugElement.query(By.css('.prefix')); + const suffix = fixture.debugElement.query(By.css('.suffix')); + expect(prefix.nativeElement.innerHTML).toBe('£'); + expect(suffix).toBeNull(); + })); + + it('displays currency code in correct position (suffix)', fakeAsync(() => { + MockDataService.language = LanguageCode.fr; + const fixture = createAndRunChangeDetection(TestSimpleComponent, 4299, 'GBP'); + const prefix = fixture.debugElement.query(By.css('.prefix')); + const suffix = fixture.debugElement.query(By.css('.suffix')); + expect(prefix).toBeNull(); + expect(suffix.nativeElement.innerHTML).toBe('£GB'); + })); + }); + function createAndRunChangeDetection( component: Type, priceValue = 123, + currencyCode: string = '', ): ComponentFixture { const fixture = TestBed.createComponent(component); + if (fixture.componentInstance instanceof TestSimpleComponent && currencyCode) { + fixture.componentInstance.currencyCode = currencyCode; + } fixture.componentInstance.price = priceValue; fixture.detectChanges(); tick(); @@ -96,9 +124,30 @@ class TestControlValueAccessorComponent { @Component({ selector: 'vdr-test-component', template: ` - + `, }) class TestSimpleComponent { + currencyCode = ''; price = 123; } + +@Injectable() +class MockDataService { + static language: LanguageCode = LanguageCode.en; + client = { + uiState() { + return { + mapStream(mapFn: any) { + return of( + mapFn({ + uiState: { + language: MockDataService.language, + }, + }), + ); + }, + }; + }, + }; +} diff --git a/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.ts index 4f18955eb5..b5b633e500 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.ts +++ b/packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.ts @@ -1,5 +1,18 @@ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { + ChangeDetectorRef, + Component, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; + +import { DataService } from '../../../data/providers/data.service'; /** * A form input control which displays currency in decimal format, whilst working @@ -17,16 +30,40 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; }, ], }) -export class CurrencyInputComponent implements ControlValueAccessor, OnChanges { +export class CurrencyInputComponent implements ControlValueAccessor, OnInit, OnChanges { @Input() disabled = false; @Input() readonly = false; @Input() value: number; @Input() currencyCode = ''; @Output() valueChange = new EventEmitter(); + prefix$: Observable; + suffix$: Observable; onChange: (val: any) => void; onTouch: () => void; _decimalValue: string; + constructor(private dataService: DataService, private changeDetectorRef: ChangeDetectorRef) {} + + ngOnInit() { + const languageCode$ = this.dataService.client.uiState().mapStream(data => data.uiState.language); + const shouldPrefix$ = languageCode$.pipe( + map(languageCode => { + if (!this.currencyCode) { + return ''; + } + const locale = languageCode.replace(/_/g, '-'); + const localised = new Intl.NumberFormat(locale, { + style: 'currency', + currency: this.currencyCode, + currencyDisplay: 'symbol', + }).format(undefined as any); + return localised.indexOf('NaN') > 0; + }), + ); + this.prefix$ = shouldPrefix$.pipe(map(shouldPrefix => (shouldPrefix ? this.currencyCode : ''))); + this.suffix$ = shouldPrefix$.pipe(map(shouldPrefix => (shouldPrefix ? '' : this.currencyCode))); + } + ngOnChanges(changes: SimpleChanges) { if ('value' in changes) { this.writeValue(changes['value'].currentValue); diff --git a/packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.ts b/packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.ts deleted file mode 100644 index 8ea44f0085..0000000000 --- a/packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -/** - * Displays a human-readable name for a given ISO 4217 currency code. - */ -@Pipe({ - name: 'currencyName', -}) -export class CurrencyNamePipe implements PipeTransform { - transform(value: any, display: 'full' | 'symbol' | 'name' = 'full'): any { - if (value == null || value === '') { - return ''; - } - if (typeof value !== 'string') { - return `Invalid currencyCode "${value as any}"`; - } - let name = ''; - let symbol = ''; - - if (display === 'full' || display === 'name') { - name = new Intl.NumberFormat('en', { - style: 'currency', - currency: value, - currencyDisplay: 'name', - }) - .format(undefined as any) - .replace(/\s*NaN\s*/, ''); - } - if (display === 'full' || display === 'symbol') { - symbol = new Intl.NumberFormat('en', { - style: 'currency', - currency: value, - currencyDisplay: 'symbol', - }) - .format(undefined as any) - .replace(/\s*NaN\s*/, ''); - } - return display === 'full' ? `${name} (${symbol})` : display === 'name' ? name : symbol; - } -} diff --git a/packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.spec.ts b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.spec.ts similarity index 78% rename from packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.spec.ts rename to packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.spec.ts index 8c6c864ac3..ab8be87658 100644 --- a/packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.spec.ts +++ b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.spec.ts @@ -1,7 +1,7 @@ -import { CurrencyNamePipe } from './currency-name.pipe'; +import { LocaleCurrencyNamePipe } from './locale-currency-name.pipe'; -describe('CurrencyNamePipe', () => { - const pipe = new CurrencyNamePipe(); +describe('LocaleCurrencyNamePipe', () => { + const pipe = new LocaleCurrencyNamePipe(); it('full output', () => { expect(pipe.transform('usd')).toBe('US dollars ($)'); expect(pipe.transform('gbp')).toBe('British pounds (£)'); @@ -20,6 +20,11 @@ describe('CurrencyNamePipe', () => { expect(pipe.transform('CNY', 'symbol')).toBe('CN¥'); }); + it('uses locale', () => { + expect(pipe.transform('usd', 'symbol', 'fr')).toBe('$US'); + expect(pipe.transform('usd', 'name', 'de')).toBe('US-Dollar'); + }); + it('returns code for unknown codes', () => { expect(pipe.transform('zzz')).toBe('ZZZ (ZZZ)'); }); diff --git a/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.ts b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.ts new file mode 100644 index 0000000000..7c7c37da47 --- /dev/null +++ b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.ts @@ -0,0 +1,69 @@ +import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core'; +import { Subscription } from 'rxjs'; + +import { DataService } from '../../data/providers/data.service'; + +/** + * Displays a human-readable name for a given ISO 4217 currency code. + */ +@Pipe({ + name: 'localeCurrencyName', + pure: false, +}) +export class LocaleCurrencyNamePipe implements PipeTransform, OnDestroy { + private locale: string; + private readonly subscription: Subscription; + + constructor( + @Optional() private dataService?: DataService, + @Optional() changeDetectorRef?: ChangeDetectorRef, + ) { + if (this.dataService && changeDetectorRef) { + this.subscription = this.dataService.client + .uiState() + .mapStream(data => data.uiState.language) + .subscribe(languageCode => { + this.locale = languageCode.replace(/_/g, '-'); + changeDetectorRef.markForCheck(); + }); + } + } + + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } + + transform(value: any, display: 'full' | 'symbol' | 'name' = 'full', locale?: unknown): any { + if (value == null || value === '') { + return ''; + } + if (typeof value !== 'string') { + return `Invalid currencyCode "${value as any}"`; + } + let name = ''; + let symbol = ''; + const activeLocale = typeof locale === 'string' ? locale : this.locale ?? 'en'; + + if (display === 'full' || display === 'name') { + name = new Intl.NumberFormat(activeLocale, { + style: 'currency', + currency: value, + currencyDisplay: 'name', + }) + .format(undefined as any) + .replace(/\s*NaN\s*/, ''); + } + if (display === 'full' || display === 'symbol') { + symbol = new Intl.NumberFormat(activeLocale, { + style: 'currency', + currency: value, + currencyDisplay: 'symbol', + }) + .format(undefined as any) + .replace(/\s*NaN\s*/, ''); + } + return display === 'full' ? `${name} (${symbol})` : display === 'name' ? name : symbol; + } +} diff --git a/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.spec.ts b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.spec.ts new file mode 100644 index 0000000000..6fc6f7613f --- /dev/null +++ b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.spec.ts @@ -0,0 +1,19 @@ +import { CurrencyCode, LanguageCode } from '../../common/generated-types'; + +import { LocaleCurrencyPipe } from './locale-currency.pipe'; + +describe('LocaleCurrencyPipe', () => { + it('GBP in English', () => { + const pipe = new LocaleCurrencyPipe(); + expect(pipe.transform(1, CurrencyCode.GBP, LanguageCode.en)).toBe('£0.01'); + expect(pipe.transform(123, CurrencyCode.GBP, LanguageCode.en)).toBe('£1.23'); + expect(pipe.transform(4200000, CurrencyCode.GBP, LanguageCode.en)).toBe('£42,000.00'); + }); + + it('EUR in German', () => { + const pipe = new LocaleCurrencyPipe(); + expect(pipe.transform(1, CurrencyCode.EUR, LanguageCode.de)).toBe('0,01 €'); + expect(pipe.transform(123, CurrencyCode.EUR, LanguageCode.de)).toBe('1,23 €'); + expect(pipe.transform(4200000, CurrencyCode.EUR, LanguageCode.de)).toBe('42.000,00 €'); + }); +}); diff --git a/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.ts b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.ts new file mode 100644 index 0000000000..9e8da66f6a --- /dev/null +++ b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency.pipe.ts @@ -0,0 +1,46 @@ +import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core'; +import { Subscription } from 'rxjs'; + +import { DataService } from '../../data/providers/data.service'; + +@Pipe({ + name: 'localeCurrency', + pure: false, +}) +export class LocaleCurrencyPipe implements PipeTransform, OnDestroy { + private locale: string; + private readonly subscription: Subscription; + + constructor( + @Optional() private dataService?: DataService, + @Optional() changeDetectorRef?: ChangeDetectorRef, + ) { + if (this.dataService && changeDetectorRef) { + this.subscription = this.dataService.client + .uiState() + .mapStream(data => data.uiState.language) + .subscribe(languageCode => { + this.locale = languageCode.replace(/_/g, '-'); + changeDetectorRef.markForCheck(); + }); + } + } + + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } + + transform(value: unknown, ...args: unknown[]): string | unknown { + const [currencyCode, locale] = args; + if (typeof value === 'number' && typeof currencyCode === 'string') { + const activeLocale = typeof locale === 'string' ? locale : this.locale; + const majorUnits = value / 100; + return new Intl.NumberFormat(activeLocale, { style: 'currency', currency: currencyCode }).format( + majorUnits, + ); + } + return value; + } +} diff --git a/packages/admin-ui/src/lib/core/src/shared/pipes/locale-date.pipe.ts b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-date.pipe.ts index ac48ae8d9f..65a1581347 100644 --- a/packages/admin-ui/src/lib/core/src/shared/pipes/locale-date.pipe.ts +++ b/packages/admin-ui/src/lib/core/src/shared/pipes/locale-date.pipe.ts @@ -1,8 +1,8 @@ import { ChangeDetectorRef, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core'; -import { DataService } from '@vendure/admin-ui/core'; import { Subscription } from 'rxjs'; import { LanguageCode } from '../../common/generated-types'; +import { DataService } from '../../data/providers/data.service'; /** * @description diff --git a/packages/admin-ui/src/lib/core/src/shared/shared.module.ts b/packages/admin-ui/src/lib/core/src/shared/shared.module.ts index 83b263b580..da017ac518 100644 --- a/packages/admin-ui/src/lib/core/src/shared/shared.module.ts +++ b/packages/admin-ui/src/lib/core/src/shared/shared.module.ts @@ -91,11 +91,12 @@ import { SelectFormInputComponent } from './dynamic-form-inputs/select-form-inpu import { TextFormInputComponent } from './dynamic-form-inputs/text-form-input/text-form-input.component'; import { AssetPreviewPipe } from './pipes/asset-preview.pipe'; import { ChannelLabelPipe } from './pipes/channel-label.pipe'; -import { CurrencyNamePipe } from './pipes/currency-name.pipe'; import { CustomFieldLabelPipe } from './pipes/custom-field-label.pipe'; import { DurationPipe } from './pipes/duration.pipe'; import { FileSizePipe } from './pipes/file-size.pipe'; import { HasPermissionPipe } from './pipes/has-permission.pipe'; +import { LocaleCurrencyNamePipe } from './pipes/locale-currency-name.pipe'; +import { LocaleCurrencyPipe } from './pipes/locale-currency.pipe'; import { LocaleDatePipe } from './pipes/locale-date.pipe'; import { SentenceCasePipe } from './pipes/sentence-case.pipe'; import { SortPipe } from './pipes/sort.pipe'; @@ -127,7 +128,7 @@ const DECLARATIONS = [ AffixedInputComponent, ChipComponent, CurrencyInputComponent, - CurrencyNamePipe, + LocaleCurrencyNamePipe, CustomerLabelComponent, CustomFieldControlComponent, DataTableComponent, @@ -195,6 +196,7 @@ const DECLARATIONS = [ CustomerGroupFormInputComponent, AddressFormComponent, LocaleDatePipe, + LocaleCurrencyPipe, ]; const DYNAMIC_FORM_INPUTS = [ diff --git a/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html b/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html index 35cf66c697..f7e72a28d2 100644 --- a/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html +++ b/packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html @@ -139,7 +139,7 @@

{{ 'customer.orders' | translate }}

{{ order.code }} {{ order.state }} - {{ order.total / 100 | currency: order.currencyCode }} + {{ order.total | localeCurrency: order.currencyCode }} {{ order.updatedAt | localeDate: 'medium' }} - {{ order.total / 100 | currency: order.currencyCode }} + {{ order.total | localeCurrency: order.currencyCode }} {{ order.orderPlacedAt | timeAgo }} diff --git a/packages/admin-ui/src/lib/order/src/components/cancel-order-dialog/cancel-order-dialog.component.html b/packages/admin-ui/src/lib/order/src/components/cancel-order-dialog/cancel-order-dialog.component.html index c008f22638..716fcd5fec 100644 --- a/packages/admin-ui/src/lib/order/src/components/cancel-order-dialog/cancel-order-dialog.component.html +++ b/packages/admin-ui/src/lib/order/src/components/cancel-order-dialog/cancel-order-dialog.component.html @@ -25,7 +25,7 @@ {{ line.productVariant.sku }} {{ line.quantity }} - {{ line.unitPriceWithTax / 100 | currency: order.currencyCode }} + {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
{{ 'order.shipping-method' | translate }}
{{ order.shippingLines[0]?.shippingMethod?.name }} - {{ order.shipping / 100 | currency: order.currencyCode }} + {{ order.shipping | localeCurrency: order.currencyCode }} {{ getSurcharge(surcharge.id)?.description }} - {{ getSurcharge(surcharge.id)?.priceWithTax / 100 | currency: order.currencyCode }} diff --git a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html index 6d54a2d8aa..0990da5860 100644 --- a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html +++ b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html @@ -22,7 +22,7 @@ (click)="addManualPayment(order)" > {{ 'order.add-payment-to-order' | translate }} - ({{ getOutstandingModificationAmount(order) / 100 | currency: order.currencyCode }}) + ({{ getOutstandingModificationAmount(order) | localeCurrency: order.currencyCode }})