feat(admin-ui): Currencies respect UI language setting

Relates to #568

packages/admin-ui/src/lib/catalog/src/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.html

@@ -48,10 +48,10 @@
         <tbody>
             <tr *ngFor="let row of variantsPreview$ | async">
                 <td>{{ row.name }}</td>
-                <td>{{ row.price / 100 | currency: currentChannel?.currencyCode }}</td>
+                <td>{{ row.price | localeCurrency: currentChannel?.currencyCode }}</td>
                 <td>
                     <ng-template [ngIf]="selectedChannel" [ngIfElse]="noChannelSelected">
-                        {{ row.pricePreview / 100 | currency: selectedChannel?.currencyCode }}
+                        {{ row.pricePreview | localeCurrency: selectedChannel?.currencyCode }}
                     </ng-template>
                     <ng-template #noChannelSelected> - </ng-template>
                 </td>

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])"
                     ></vdr-currency-input>
                 </clr-input-container>
-                <span *ngIf="variantFormValues[variant.id].existing">{{ variantFormValues[variant.id].price / 100 | currency: currencyCode }}</span>
+                <span *ngIf="variantFormValues[variant.id].existing">{{ variantFormValues[variant.id].price | localeCurrency: currencyCode }}</span>
             </td>
             <td>
                 <clr-input-container *ngIf="!variantFormValues[variant.id].existing">

packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.html

@@ -5,6 +5,6 @@
 <div *ngIf="!priceIncludesTax" class="value">
     {{
         '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 }
     }}
 </div>

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));
             }),
         );
     }

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';

packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.html

@@ -1,4 +1,7 @@
-<vdr-affixed-input [prefix]="currencyCode | currencyName: 'symbol'">
+<vdr-affixed-input
+    [prefix]="prefix$ | async | localeCurrencyName: 'symbol'"
+    [suffix]="suffix$ | async | localeCurrencyName: 'symbol'"
+>
     <input
         type="number"
         step="0.01"

packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.spec.ts

@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, Injectable } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { Type } from '@vendure/common/lib/shared-types';
+import { of } from 'rxjs';
 
-import { CurrencyNamePipe } from '../../pipes/currency-name.pipe';
+import { LanguageCode } from '../../../common/generated-types';
+import { DataService } from '../../../data/providers/data.service';
+import { LocaleCurrencyNamePipe } from '../../pipes/locale-currency-name.pipe';
 import { AffixedInputComponent } from '../affixed-input/affixed-input.component';
 
 import { CurrencyInputComponent } from './currency-input.component';
@@ -13,12 +16,13 @@ describe('CurrencyInputComponent', () => {
     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<T extends TestControlValueAccessorComponent | TestSimpleComponent>(
         component: Type<T>,
         priceValue = 123,
+        currencyCode: string = '',
     ): ComponentFixture<T> {
         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: `
-        <vdr-currency-input [value]="price"></vdr-currency-input>
+        <vdr-currency-input [value]="price" [currencyCode]="currencyCode"></vdr-currency-input>
     `,
 })
 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,
+                            },
+                        }),
+                    );
+                },
+            };
+        },
+    };
+}

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<string>;
+    suffix$: Observable<string>;
     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);

packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.ts

@@ -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;
-    }
-}

packages/admin-ui/src/lib/core/src/shared/pipes/currency-name.pipe.spec.ts → 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)');
     });

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;
+    }
+}

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 €');
+    });
+});

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;
+    }
+}

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

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 = [

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html

@@ -139,7 +139,7 @@
             <ng-template let-order="item">
                 <td class="left">{{ order.code }}</td>
                 <td class="left">{{ order.state }}</td>
-                <td class="left">{{ order.total / 100 | currency: order.currencyCode }}</td>
+                <td class="left">{{ order.total | localeCurrency: order.currencyCode }}</td>
                 <td class="left">{{ order.updatedAt | localeDate: 'medium' }}</td>
                 <td class="right">
                     <vdr-table-row-action

packages/admin-ui/src/lib/dashboard/src/widgets/latest-orders-widget/latest-orders-widget.component.html

@@ -7,7 +7,7 @@
         <td class="left align-middle">
             <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
         </td>
-        <td class="left align-middle">{{ order.total / 100 | currency: order.currencyCode }}</td>
+        <td class="left align-middle">{{ order.total | localeCurrency: order.currencyCode }}</td>
         <td class="left align-middle">{{ order.orderPlacedAt | timeAgo }}</td>
         <td class="right align-middle">
             <vdr-table-row-action

packages/admin-ui/src/lib/order/src/components/add-manual-payment-dialog/add-manual-payment-dialog.component.html

@@ -17,6 +17,6 @@
 <ng-template vdrDialogButtons>
     <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
     <button type="submit" (click)="submit()" class="btn btn-primary" [disabled]="form.invalid || form.pristine">
-        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount / 100 | currency: currencyCode }})
+        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})
     </button>
 </ng-template>

packages/admin-ui/src/lib/order/src/components/cancel-order-dialog/cancel-order-dialog.component.html

@@ -25,7 +25,7 @@
                 <td class="align-middle sku">{{ line.productVariant.sku }}</td>
                 <td class="align-middle quantity">{{ line.quantity }}</td>
                 <td class="align-middle quantity">
-                    {{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
+                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
                 </td>
                 <td class="align-middle fulfil">
                     <input

packages/admin-ui/src/lib/order/src/components/fulfill-order-dialog/fulfill-order-dialog.component.html

@@ -42,7 +42,7 @@
         <vdr-formatted-address [address]="order.shippingAddress"></vdr-formatted-address>
         <h6>{{ 'order.shipping-method' | translate }}</h6>
         {{ order.shippingLines[0]?.shippingMethod?.name }}
-        <strong>{{ order.shipping / 100 | currency: order.currencyCode }}</strong>
+        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>
         <vdr-configurable-input
             [operationDefinition]="fulfillmentHandlerDef"
             [operation]="fulfillmentHandler"

packages/admin-ui/src/lib/order/src/components/modification-detail/modification-detail.component.html

@@ -4,7 +4,7 @@
 }}</vdr-labeled-data>
 <vdr-labeled-data *ngFor="let surcharge of modification.surcharges" [label]="'order.surcharges' | translate">
     {{ getSurcharge(surcharge.id)?.description }}
-    {{ getSurcharge(surcharge.id)?.priceWithTax / 100 | currency: order.currencyCode }}</vdr-labeled-data
+    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data
 >
 <vdr-labeled-data *ngIf="getAddedItems().length" [label]="'order.added-items' | translate">
     <vdr-simple-item-list [items]="getAddedItems()"></vdr-simple-item-list>

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 }})
         </button>
         <button class="btn btn-primary" (click)="fulfillOrder()" [disabled]="!canAddFulfillment(order)">
             {{ 'order.fulfill-order' | translate }}
@@ -102,8 +102,8 @@
                     <tr *ngFor="let row of order.taxSummary">
                         <td>{{ row.description }}</td>
                         <td>{{ row.taxRate / 100 | percent }}</td>
-                        <td>{{ row.taxBase / 100 | currency: order.currencyCode }}</td>
-                        <td>{{ row.taxTotal / 100 | currency: order.currencyCode }}</td>
+                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>
+                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>
                     </tr>
                 </tbody>
             </table>

packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.html

@@ -44,9 +44,9 @@
                         <td class="align-middle name">{{ line.productVariant.name }}</td>
                         <td class="align-middle sku">{{ line.productVariant.sku }}</td>
                         <td class="align-middle unit-price">
-                            {{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
+                            {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
                             <div class="net-price" [title]="'order.net-price' | translate">
-                                {{ line.unitPrice / 100 | currency: order.currencyCode }}
+                                {{ line.unitPrice | localeCurrency: order.currencyCode }}
                             </div>
                         </td>
                         <td class="align-middle quantity">
@@ -73,9 +73,9 @@
                             </ng-container>
                         </td>
                         <td class="align-middle total">
-                            {{ line.linePriceWithTax / 100 | currency: order.currencyCode }}
+                            {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}
                             <div class="net-price" [title]="'order.net-price' | translate">
-                                {{ line.linePrice / 100 | currency: order.currencyCode }}
+                                {{ line.linePrice | localeCurrency: order.currencyCode }}
                             </div>
                         </td>
                     </tr>
@@ -92,9 +92,9 @@
                         <td class="align-middle name">{{ addedLine.productVariantName }}</td>
                         <td class="align-middle sku">{{ addedLine.sku }}</td>
                         <td class="align-middle unit-price">
-                            {{ addedLine.priceWithTax / 100 | currency: order.currencyCode }}
+                            {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}
                             <div class="net-price" [title]="'order.net-price' | translate">
-                                {{ addedLine.price / 100 | currency: order.currencyCode }}
+                                {{ addedLine.price | localeCurrency: order.currencyCode }}
                             </div>
                         </td>
                         <td class="align-middle quantity">
@@ -141,9 +141,9 @@
                         <td></td>
                         <td *ngIf="orderLineCustomFields.length"></td>
                         <td class="align-middle total">
-                            {{ surcharge.priceWithTax / 100 | currency: order.currencyCode }}
+                            {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}
                             <div class="net-price" [title]="'order.net-price' | translate">
-                                {{ surcharge.price / 100 | currency: order.currencyCode }}
+                                {{ surcharge.price | localeCurrency: order.currencyCode }}
                             </div>
                         </td>
                     </tr>
@@ -163,9 +163,9 @@
                         <td *ngIf="orderLineCustomFields.length"></td>
                         <td class="align-middle total">
                             <ng-container *ngIf="getSurchargePrices(surcharge) as surchargePrice">
-                                {{ surchargePrice.priceWithTax / 100 | currency: order.currencyCode }}
+                                {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}
                                 <div class="net-price" [title]="'order.net-price' | translate">
-                                    {{ surchargePrice.price / 100 | currency: order.currencyCode }}
+                                    {{ surchargePrice.price | localeCurrency: order.currencyCode }}
                                 </div>
                             </ng-container>
                         </td>
@@ -176,9 +176,9 @@
                         <td colspan="3"></td>
                         <td *ngIf="orderLineCustomFields.length"></td>
                         <td class="clr-align-middle">
-                            {{ order.shippingWithTax / 100 | currency: order.currencyCode }}
+                            {{ order.shippingWithTax | localeCurrency: order.currencyCode }}
                             <div class="net-price" [title]="'order.net-price' | translate">
-                                {{ order.shipping / 100 | currency: order.currencyCode }}
+                                {{ order.shipping | localeCurrency: order.currencyCode }}
                             </div>
                         </td>
                     </tr>
@@ -197,7 +197,7 @@
                             <div>
                                 <strong class="mr4">{{ addItemSelectedVariant.productVariantName }}</strong>
                                 <small>{{ addItemSelectedVariant.sku }}</small>
-                                <div>{{ getSelectedItemPrice(addItemSelectedVariant) / 100 | currency: order.currencyCode }}</div>
+                                <div>{{ getSelectedItemPrice(addItemSelectedVariant) | localeCurrency: order.currencyCode }}</div>
                             </div>
 
                         </div>

packages/admin-ui/src/lib/order/src/components/order-edits-preview-dialog/order-edits-preview-dialog.component.html

@@ -3,7 +3,7 @@
 
 <h4 class="h4">
     {{ 'order.modify-order-price-difference' | translate }}:
-    <strong>{{ priceDifference / 100 | currency: order.currencyCode }}</strong>
+    <strong>{{ priceDifference | localeCurrency: order.currencyCode }}</strong>
 </h4>
 <div *ngIf="priceDifference < 0">
 <clr-select-container>
@@ -14,7 +14,7 @@
             [ngValue]="payment"
         >
             #{{ payment.id }} {{ payment.method }}:
-            {{ payment.amount / 100 | currency: order.currencyCode }}
+            {{ payment.amount | localeCurrency: order.currencyCode }}
         </option>
     </select>
 </clr-select-container>

packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html

@@ -51,7 +51,7 @@
                 </div>
                 <ng-container *ngIf="getModification(entry.data.modificationId) as modification">
                     {{ 'order.modify-order-price-difference' | translate }}:
-                    <strong>{{ modification.priceChange / 100 | currency: order.currencyCode }}</strong>
+                    <strong>{{ modification.priceChange | localeCurrency: order.currencyCode }}</strong>
                     <vdr-chip colorType="success" *ngIf="modification.isSettled">{{
                         'order.modification-settled' | translate
                     }}</vdr-chip>

packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html

@@ -98,7 +98,7 @@
         <td class="left align-middle">
             <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
         </td>
-        <td class="left align-middle">{{ order.total / 100 | currency: order.currencyCode }}</td>
+        <td class="left align-middle">{{ order.total | localeCurrency: order.currencyCode }}</td>
         <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>
         <td class="left align-middle">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>
         <td class="left align-middle">{{ getShippingNames(order) }}</td>

packages/admin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.html

@@ -20,7 +20,7 @@
                 {{ refund.createdAt | localeDate: 'medium' }}
             </vdr-labeled-data>
             <vdr-labeled-data [label]="'order.refund-total' | translate">
-                {{ refund.total / 100 | currency: currencyCode }}
+                {{ refund.total | localeCurrency: currencyCode }}
             </vdr-labeled-data>
             <vdr-labeled-data [label]="'order.transaction-id' | translate" *ngIf="refund.transactionId">
                 {{ refund.transactionId }}

packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html

@@ -39,9 +39,9 @@
             <td class="align-middle name">{{ line.productVariant.name }}</td>
             <td class="align-middle sku">{{ line.productVariant.sku }}</td>
             <td class="align-middle unit-price">
-                {{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
+                {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
                 <div class="net-price" [title]="'order.net-price' | translate">
-                    {{ line.unitPrice / 100 | currency: order.currencyCode }}
+                    {{ line.unitPrice | localeCurrency: order.currencyCode }}
                 </div>
             </td>
             <td class="align-middle quantity">
@@ -76,9 +76,9 @@
                     <clr-icon shape="ellipsis-horizontal" class="custom-field-ellipsis"></clr-icon></td
             ></ng-container>
             <td class="align-middle total">
-                {{ line.linePriceWithTax / 100 | currency: order.currencyCode }}
+                {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}
                 <div class="net-price" [title]="'order.net-price' | translate">
-                    {{ line.linePrice / 100 | currency: order.currencyCode }}
+                    {{ line.linePrice | localeCurrency: order.currencyCode }}
                 </div>
 
                 <ng-container *ngIf="getLineDiscounts(line) as discounts">
@@ -92,7 +92,7 @@
                                     discount.description
                                 }}</a>
                                 <div class="promotion-amount">
-                                    {{ discount.amount / 100 | currency: order.currencyCode }}
+                                    {{ discount.amount | localeCurrency: order.currencyCode }}
                                 </div>
                             </div>
                         </vdr-dropdown-menu>
@@ -107,9 +107,9 @@
             <td [attr.colspan]="1 + visibleOrderLineCustomFields.length"></td>
             <ng-container *ngIf="showElided"><td></td></ng-container>
             <td class="align-middle total">
-                {{ surcharge.priceWithTax / 100 | currency: order.currencyCode }}
+                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}
                 <div class="net-price" [title]="'order.net-price' | translate">
-                    {{ surcharge.price / 100 | currency: order.currencyCode }}
+                    {{ surcharge.price | localeCurrency: order.currencyCode }}
                 </div>
             </td>
         </tr>
@@ -122,7 +122,7 @@
             </td>
             <ng-container *ngIf="showElided"><td></td></ng-container>
             <td class="clr-align-middle">
-                {{ discount.amount / 100 | currency: order.currencyCode }}
+                {{ discount.amount | localeCurrency: order.currencyCode }}
             </td>
         </tr>
         <tr class="sub-total">
@@ -131,9 +131,9 @@
             <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
             <ng-container *ngIf="showElided"><td></td></ng-container>
             <td class="clr-align-middle">
-                {{ order.subTotalWithTax / 100 | currency: order.currencyCode }}
+                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}
                 <div class="net-price" [title]="'order.net-price' | translate">
-                    {{ order.subTotal / 100 | currency: order.currencyCode }}
+                    {{ order.subTotal | localeCurrency: order.currencyCode }}
                 </div>
             </td>
         </tr>
@@ -143,9 +143,9 @@
             <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
             <ng-container *ngIf="showElided"><td></td></ng-container>
             <td class="clr-align-middle">
-                {{ order.shippingWithTax / 100 | currency: order.currencyCode }}
+                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}
                 <div class="net-price" [title]="'order.net-price' | translate">
-                    {{ order.shipping / 100 | currency: order.currencyCode }}
+                    {{ order.shipping | localeCurrency: order.currencyCode }}
                 </div>
             </td>
         </tr>
@@ -155,9 +155,9 @@
             <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
             <ng-container *ngIf="showElided"><td></td></ng-container>
             <td class="clr-align-middle">
-                {{ order.totalWithTax / 100 | currency: order.currencyCode }}
+                {{ order.totalWithTax | localeCurrency: order.currencyCode }}
                 <div class="net-price" [title]="'order.net-price' | translate">
-                    {{ order.total / 100 | currency: order.currencyCode }}
+                    {{ order.total | localeCurrency: order.currencyCode }}
                 </div>
             </td>
         </tr>

packages/admin-ui/src/lib/order/src/components/payment-detail/payment-detail.component.html

@@ -2,7 +2,7 @@
     {{ payment.method }}
 </vdr-labeled-data>
 <vdr-labeled-data [label]="'order.amount' | translate">
-    {{ payment.amount / 100 | currency: currencyCode }}
+    {{ payment.amount | localeCurrency: currencyCode }}
 </vdr-labeled-data>
 <vdr-labeled-data [label]="'order.transaction-id' | translate">
     {{ payment.transactionId }}

packages/admin-ui/src/lib/order/src/components/refund-order-dialog/refund-order-dialog.component.html

@@ -27,11 +27,11 @@
                     <vdr-line-refunds [line]="line"></vdr-line-refunds>
                 </td>
                 <td class="align-middle quantity">
-                    {{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
+                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
                 </td>
                 <td class="align-middle quantity">
                     <div class="prorated-wrapper">
-                        {{ line.proratedUnitPriceWithTax / 100 | currency: order.currencyCode }}
+                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}
                         <ng-container *ngIf="line.discounts as discounts">
                             <vdr-dropdown *ngIf="discounts.length">
                                 <div class="promotions-label" vdrDropdownTrigger>
@@ -109,7 +109,7 @@
                         [disabled]="payment.state !== 'Settled'"
                     >
                         #{{ payment.id }} {{ payment.method }}:
-                        {{ payment.amount / 100 | currency: order.currencyCode }}
+                        {{ payment.amount | localeCurrency: order.currencyCode }}
                     </option>
                 </select>
             </clr-select-container>
@@ -118,7 +118,7 @@
                 <input type="checkbox" clrCheckbox [(ngModel)]="refundShipping" [disabled]="!isRefunding()" />
                 <label>
                     {{ 'order.refund-shipping' | translate }} ({{
-                        order.shipping / 100 | currency: order.currencyCode
+                        order.shipping | localeCurrency: order.currencyCode
                     }})
                 </label>
             </clr-checkbox-wrapper>
@@ -134,11 +134,11 @@
             <div class="totals" [class.disabled]="!isRefunding()">
                 <div class="order-total">
                     {{ 'order.payment-amount' | translate }}:
-                    {{ selectedPayment.amount / 100 | currency: order.currencyCode }}
+                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}
                 </div>
                 <div class="refund-total">
                     {{ 'order.refund-total' | translate }}:
-                    {{ refundTotal / 100 | currency: order.currencyCode }}
+                    {{ refundTotal | localeCurrency: order.currencyCode }}
                 </div>
                 <div
                     class="refund-total-error"
@@ -149,7 +149,7 @@
                             | translate
                                 : {
                                       min: 0 | currency: order.currencyCode,
-                                      max: selectedPayment.amount / 100 | currency: order.currencyCode
+                                      max: selectedPayment.amount | localeCurrency: order.currencyCode
                                   }
                     }}
                 </div>
@@ -164,7 +164,7 @@
         <ng-container *ngIf="isRefunding(); else cancelling">
         {{
             'order.refund-with-amount'
-                | translate: { amount: refundTotal / 100 | currency: order.currencyCode }
+                | translate: { amount: refundTotal | localeCurrency: order.currencyCode }
         }}
         </ng-container>
         <ng-template #cancelling>

packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.html

@@ -40,7 +40,7 @@
             formControlName="currencyCode"
             [vdrDisabled]="!('SuperAdmin' | hasPermission)"
         >
-            <option *ngFor="let code of currencyCodes" [value]="code">{{ code | currencyName }}</option>
+            <option *ngFor="let code of currencyCodes" [value]="code">{{ code | localeCurrencyName }}</option>
         </select>
     </vdr-form-field>
     <vdr-form-field [label]="'common.default-language' | translate" for="defaultLanguage">

packages/admin-ui/src/lib/settings/src/components/shipping-eligibility-test-result/shipping-eligibility-test-result.component.html

@@ -9,10 +9,10 @@
             </vdr-labeled-data>
             <div class="price-row">
                 <vdr-labeled-data [label]="'common.price' | translate">
-                    {{ quote.price / 100 | currency: currencyCode }}
+                    {{ quote.price | localeCurrency: currencyCode }}
                 </vdr-labeled-data>
                 <vdr-labeled-data [label]="'common.price-with-tax' | translate">
-                    {{ quote.priceWithTax / 100 | currency: currencyCode }}
+                    {{ quote.priceWithTax | localeCurrency: currencyCode }}
                 </vdr-labeled-data>
             </div>
             <vdr-object-tree *ngIf="quote.metadata" [value]="quote.metadata"></vdr-object-tree>

packages/admin-ui/src/lib/settings/src/components/shipping-method-test-result/shipping-method-test-result.component.html

@@ -32,13 +32,13 @@
                     [label]="'common.price' | translate"
                     *ngIf="testResult?.quote?.price != null"
                 >
-                    {{ testResult.quote?.price / 100 | currency: currencyCode }}
+                    {{ testResult.quote?.price | localeCurrency: currencyCode }}
                 </vdr-labeled-data>
                 <vdr-labeled-data
                     [label]="'common.price-with-tax' | translate"
                     *ngIf="testResult?.quote?.priceWithTax != null"
                 >
-                    {{ testResult.quote?.priceWithTax / 100 | currency: currencyCode }}
+                    {{ testResult.quote?.priceWithTax | localeCurrency: currencyCode }}
                 </vdr-labeled-data>
             </div>
             <vdr-object-tree

packages/admin-ui/src/lib/settings/src/components/test-order-builder/test-order-builder.component.html

@@ -20,7 +20,7 @@
             <td class="align-middle name">{{ line.name }}</td>
             <td class="align-middle sku">{{ line.sku }}</td>
             <td class="align-middle unit-price">
-                {{ line.unitPriceWithTax / 100 | currency: currencyCode }}
+                {{ line.unitPriceWithTax | localeCurrency: currencyCode }}
             </td>
             <td class="align-middle quantity">
                 <input
@@ -35,7 +35,7 @@
                 </button>
             </td>
             <td class="align-middle total">
-                {{ (line.unitPriceWithTax * line.quantity) / 100 | currency: currencyCode }}
+                {{ (line.unitPriceWithTax * line.quantity) | localeCurrency: currencyCode }}
             </td>
         </tr>
         <tr class="sub-total">
@@ -44,7 +44,7 @@
             <td></td>
             <td></td>
             <td></td>
-            <td>{{ subTotal / 100 | currency: currencyCode }}</td>
+            <td>{{ subTotal | localeCurrency: currencyCode }}</td>
         </tr>
     </table>