AAE-37713 Amount locale display (#11285)

* [AAE-37713] amount widget formats value based on locale

* [AAE-37713] added unit test with currency icon

* [AAE-37713] provided amount widget config as observable

* [AAE-37713] applied pr comments

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -12,7 +12,9 @@
     <div class="adf-amount-widget-container">
         <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
             @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
-            <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
+            @if(!enableDisplayBasedOnLocale) {
+                <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
+            }
             <input
                 matInput
                 [title]="field.tooltip"
@@ -21,12 +23,13 @@
                 [id]="field.id"
                 [required]="field.required && field.isVisible"
                 [placeholder]="placeholder"
-                [value]="field.value"
+                [value]="amountWidgetValue"
-                [(ngModel)]="field.value"
+                [(ngModel)]="amountWidgetValue"
-                (ngModelChange)="onFieldChanged(field)"
+                (ngModelChange)="onFieldChangedAmountWidget()"
                 [disabled]="field.readOnly"
-                (blur)="markAsTouched()"
+                (focus)="amountWidgetOnFocus()"
-            />
+                (blur)="amountWidgetOnBlur()"
+                />
         </mat-form-field>
         <div class="adf-error-messages-container">
             <error-widget [error]="field.validationSummary" />

lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts

@@ -23,6 +23,7 @@ import { FormModel } from '../core/form.model';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { UnitTestingUtils } from '../../../../testing/unit-testing-utils';
+import { of } from 'rxjs';
 
 describe('AmountWidgetComponent', () => {
     let loader: HarnessLoader;
@@ -76,6 +77,137 @@ describe('AmountWidgetComponent', () => {
         expect(widget.placeholder).toBe('1234');
     });
 
+    it('it should return locale based on browser', () => {
+        const returnedLanguages: string[] = ['en-GB', 'en-US', 'en', 'de-DE', 'pl'];
+        const mockLanguages = spyOnProperty(window, 'navigator').and.returnValue({
+            languages: returnedLanguages
+        } as any);
+        const locale = widget.getLocale();
+
+        expect(locale).toBe(returnedLanguages[0]);
+        expect(mockLanguages).toHaveBeenCalled();
+    });
+
+    it('it should return default locale if browser does not return valid value', () => {
+        const defaultLocale = 'en-US';
+        spyOnProperty(window, 'navigator').and.returnValue({
+            languages: undefined
+        } as any);
+        const locale = widget.getLocale();
+
+        expect(locale).toBe(defaultLocale);
+    });
+
+    it('should set initial values when enableDisplayBasedOnLocale is enabled', () => {
+        const returnedLanguages: string[] = ['en-GB'];
+        spyOnProperty(window, 'navigator').and.returnValue({
+            languages: returnedLanguages
+        } as any);
+        widget.field = new FormFieldModel(null, { id: 1, name: 'test', value: 25, currency: 'USD' });
+        widget.enableDisplayBasedOnLocale = true;
+        widget.currency = 'USD';
+        widget.setInitialValues();
+
+        expect(widget.amountWidgetValue).toBe('$25');
+        expect(widget.decimalProperty).toBe('1.0-0');
+        expect(widget.locale).toBe(returnedLanguages[0]);
+        expect(widget.valueAsNumber).toBe(25);
+    });
+
+    it('should set initial values with correct currency', () => {
+        const returnedLanguages: string[] = ['en-GB'];
+        spyOnProperty(window, 'navigator').and.returnValue({
+            languages: returnedLanguages
+        } as any);
+        widget.field = new FormFieldModel(null, { id: 2, name: 'test', value: 25, currency: 'GBP' });
+        widget.enableDisplayBasedOnLocale = true;
+        widget.currency = 'GBP';
+        widget.setInitialValues();
+
+        expect(widget.amountWidgetValue).toBe('£25');
+        expect(widget.decimalProperty).toBe('1.0-0');
+    });
+
+    it('should set initial values with correct currency icon', () => {
+        const returnedLanguages: string[] = ['en-GB'];
+        spyOnProperty(window, 'navigator').and.returnValue({
+            languages: returnedLanguages
+        } as any);
+        widget.field = new FormFieldModel(null, { id: 2, name: 'test', value: 25, currency: '¥' });
+        widget.enableDisplayBasedOnLocale = true;
+        widget.currency = '¥';
+        widget.setInitialValues();
+
+        expect(widget.amountWidgetValue).toBe('¥25');
+        expect(widget.decimalProperty).toBe('1.0-0');
+    });
+
+    it('should set initial values without currency', () => {
+        const returnedLanguages: string[] = ['en-GB'];
+        spyOnProperty(window, 'navigator').and.returnValue({
+            languages: returnedLanguages
+        } as any);
+        widget.field = new FormFieldModel(null, { id: 3, name: 'test', value: 25, currency: '' });
+        widget.enableDisplayBasedOnLocale = true;
+        widget.currency = '';
+        widget.currencyDisplay = '';
+        widget.setInitialValues();
+
+        expect(widget.amountWidgetValue).toBe('25');
+        expect(widget.decimalProperty).toBe('1.0-0');
+    });
+
+    it('should set initial values when enableDisplayBasedOnLocale is disabled', () => {
+        widget.field = new FormFieldModel(null, { id: 4, name: 'test', value: 25, enableFractions: false, className: '' });
+        widget.enableDisplayBasedOnLocale = false;
+        widget.setInitialValues();
+
+        expect(widget.amountWidgetValue.toString()).toBe('25');
+    });
+
+    it('should transform value from number to string', () => {
+        widget.enableDisplayBasedOnLocale = true;
+        widget.valueAsNumber = 123456;
+        widget.amountWidgetOnFocus();
+        expect(widget.amountWidgetValue).toBe('123456');
+
+        widget.valueAsNumber = 123456.11;
+        widget.amountWidgetOnFocus();
+        expect(widget.amountWidgetValue).toBe('123456.11');
+
+        widget.valueAsNumber = 0;
+        widget.amountWidgetOnFocus();
+        expect(widget.amountWidgetValue).toBe('0');
+
+        widget.valueAsNumber = undefined;
+        widget.amountWidgetOnFocus();
+        expect(widget.amountWidgetValue).toBe(null);
+    });
+
+    it('should update field.value on change', () => {
+        widget.field = new FormFieldModel(null, { id: 5, name: 'test', value: 25 });
+        const mockValue = '1234.12';
+        widget.amountWidgetValue = mockValue;
+        widget.onFieldChangedAmountWidget();
+
+        expect(widget.field.value).toBe(mockValue);
+    });
+
+    it('should transform values on blur', () => {
+        widget.enableDisplayBasedOnLocale = true;
+        widget.amountWidgetValue = '1234.56';
+        widget.amountWidgetOnBlur();
+
+        expect(widget.valueAsNumber).toBe(1234.56);
+        expect(widget.amountWidgetValue).toBe('$1,234.56');
+
+        widget.amountWidgetValue = '';
+        widget.amountWidgetOnBlur();
+
+        expect(widget.valueAsNumber).toBe(null);
+        expect(widget.amountWidgetValue).toBe(null);
+    });
+
     describe('when tooltip is set', () => {
         beforeEach(() => {
             widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
@@ -327,6 +459,189 @@ describe('AmountWidgetComponent - rendering', () => {
             expect(asterisk.textContent).toEqual('*');
         });
     });
+
+    describe('Test widget with different setting for enableDisplayBasedOnLocale', () => {
+        beforeEach(() => {
+            TestBed.resetTestingModule();
+        });
+
+        describe('set module for enableDisplayBasedOnLocale = true', () => {
+            const mockField = new FormFieldModel(new FormModel(), {
+                id: 'TestAmount1',
+                name: 'Test Amount',
+                type: 'amount',
+                currency: 'USD',
+                enableFractions: true,
+                value: '1234.55'
+            });
+            beforeEach(async () => {
+                TestBed.configureTestingModule({
+                    imports: [AmountWidgetComponent],
+                    providers: [{ provide: ADF_AMOUNT_SETTINGS, useValue: { enableDisplayBasedOnLocale: true } }]
+                });
+                fixture = TestBed.createComponent(AmountWidgetComponent);
+                widget = fixture.componentInstance;
+
+                fixture.componentRef.setInput('field', mockField);
+                loader = TestbedHarnessEnvironment.loader(fixture);
+                testingUtils = new UnitTestingUtils(fixture.debugElement, loader);
+                fixture.detectChanges();
+            });
+
+            it('should not display prefix with currency when enableDisplayBasedOnLocale = true', async () => {
+                const field = await testingUtils.getMatFormField();
+                expect(await field.getPrefixText()).toBe('');
+            });
+
+            it('should call method on focus and change input value', async () => {
+                const focusSpy = spyOn(widget, 'amountWidgetOnFocus').and.callThrough();
+                fixture.detectChanges();
+
+                const field = await testingUtils.getMatInput();
+                const fieldValueBeforeFocus = await field.getValue();
+                await field.focus();
+                const fieldValue = await field.getValue();
+
+                expect(field).toBeDefined();
+                expect(widget.field.value).toBe('1234.55');
+                expect(fieldValueBeforeFocus).toBe('$1,234.55');
+                expect(focusSpy).toHaveBeenCalled();
+                expect(fieldValue).toBe('1234.55');
+            });
+
+            it('should transform value on blur', async () => {
+                const newValue = '456789';
+                const blurSpy = spyOn(widget, 'amountWidgetOnBlur').and.callThrough();
+                fixture.detectChanges();
+
+                const field = await testingUtils.getMatInput();
+                const fieldValueBeforeBlur = await field.getValue();
+                await field.setValue(newValue);
+                await field.blur();
+                const fieldValue = await field.getValue();
+
+                expect(field).toBeDefined();
+                expect(widget.field.value).toBe(newValue);
+                expect(fieldValueBeforeBlur).toBe('$1,234.55');
+                expect(blurSpy).toHaveBeenCalled();
+                expect(widget.valueAsNumber).toBe(parseFloat(newValue));
+                expect(widget.amountWidgetValue).toBe('$456,789.00');
+                expect(fieldValue).toBe('$456,789.00');
+            });
+        });
+        describe('set module for enableDisplayBasedOnLocale = false', () => {
+            const mockField = new FormFieldModel(new FormModel(), {
+                id: 'TestAmount1',
+                name: 'Test Amount',
+                type: 'amount',
+                currency: 'USD',
+                enableFractions: true,
+                value: '1234.55'
+            });
+            beforeEach(async () => {
+                TestBed.configureTestingModule({
+                    imports: [AmountWidgetComponent],
+                    providers: [{ provide: ADF_AMOUNT_SETTINGS, useValue: { enableDisplayBasedOnLocale: false } }]
+                });
+                fixture = TestBed.createComponent(AmountWidgetComponent);
+                widget = fixture.componentInstance;
+
+                fixture.componentRef.setInput('field', mockField);
+                loader = TestbedHarnessEnvironment.loader(fixture);
+                testingUtils = new UnitTestingUtils(fixture.debugElement, loader);
+                fixture.detectChanges();
+            });
+
+            it('should display prefix with currency when enableDisplayBasedOnLocale = true', async () => {
+                const field = await testingUtils.getMatFormField();
+                expect(await field.getPrefixText()).toBe('USD');
+            });
+
+            it('should call method on focus and not change input value', async () => {
+                const focusSpy = spyOn(widget, 'amountWidgetOnFocus').and.callThrough();
+                fixture.detectChanges();
+
+                const field = await testingUtils.getMatInput();
+                const fieldValueBeforeFocus = await field.getValue();
+                await field.focus();
+                const fieldValue = await field.getValue();
+
+                expect(field).toBeDefined();
+                expect(widget.field.value).toBe('1234.55');
+                expect(widget.valueAsNumber).toBeUndefined();
+                expect(fieldValueBeforeFocus).toBe('1234.55');
+                expect(focusSpy).toHaveBeenCalled();
+                expect(fieldValue).toBe('1234.55');
+            });
+
+            it('should call method on blur and not change input value', async () => {
+                const newValue = '456789';
+                const blurSpy = spyOn(widget, 'amountWidgetOnBlur').and.callThrough();
+                fixture.detectChanges();
+
+                const field = await testingUtils.getMatInput();
+                const fieldValueBeforeBlur = await field.getValue();
+                await field.setValue(newValue);
+                await field.blur();
+                const fieldValue = await field.getValue();
+
+                expect(field).toBeDefined();
+                expect(widget.field.value).toBe(newValue);
+                expect(widget.valueAsNumber).toBeUndefined();
+                expect(fieldValueBeforeBlur).toBe('1234.55');
+                expect(blurSpy).toHaveBeenCalled();
+                expect(widget.valueAsNumber).toBeUndefined();
+                expect(widget.amountWidgetValue).toBe('456789');
+                expect(fieldValue).toBe('456789');
+            });
+        });
+    });
+
+    describe('Test widget with ADF_AMOUNT_SETTINGS as observable', () => {
+        beforeEach(() => {
+            TestBed.resetTestingModule();
+        });
+
+        describe('set module for enableDisplayBasedOnLocale = true', () => {
+            const mockField = new FormFieldModel(new FormModel(), {
+                id: 'TestAmount1',
+                name: 'Test Amount',
+                type: 'amount',
+                currency: 'USD',
+                enableFractions: true,
+                value: '1234.55'
+            });
+            beforeEach(async () => {
+                TestBed.configureTestingModule({
+                    imports: [AmountWidgetComponent],
+                    providers: [{ provide: ADF_AMOUNT_SETTINGS, useValue: of({ enableDisplayBasedOnLocale: true }) }]
+                });
+                fixture = TestBed.createComponent(AmountWidgetComponent);
+                widget = fixture.componentInstance;
+                const returnedLanguages: string[] = ['en-GB', 'en-US', 'en', 'de-DE', 'pl'];
+                spyOnProperty(window, 'navigator').and.returnValue({
+                    languages: returnedLanguages
+                } as any);
+                fixture.componentRef.setInput('field', mockField);
+                loader = TestbedHarnessEnvironment.loader(fixture);
+                testingUtils = new UnitTestingUtils(fixture.debugElement, loader);
+                fixture.detectChanges();
+            });
+
+            it('should set enableDisplayBasedOnLocale to true', () => {
+                expect(widget.enableDisplayBasedOnLocale).toBeTrue();
+                expect(widget.decimalProperty).toBe('1.2-2');
+                expect(widget.locale).toBe('en-GB');
+                expect(widget.valueAsNumber).toBe('1234.55');
+                expect(widget.amountWidgetValue).toBe('$1,234.55');
+            });
+
+            it('should not display prefix with currency when enableDisplayBasedOnLocale = true', async () => {
+                const field = await testingUtils.getMatFormField();
+                expect(await field.getPrefixText()).toBe('');
+            });
+        });
+    });
 });
 
 describe('AmountWidgetComponent settings', () => {

lib/core/src/lib/form/components/widgets/amount/amount.widget.ts

@@ -17,7 +17,7 @@
 
 /* eslint-disable @angular-eslint/component-selector */
 
-import { NgIf } from '@angular/common';
+import { CurrencyPipe, NgIf } from '@angular/common';
 import { Component, OnInit, ViewEncapsulation, InjectionToken, Inject, Optional } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -26,12 +26,15 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { ErrorWidgetComponent } from '../error/error.component';
 import { WidgetComponent } from '../widget.component';
+import { isObservable, Observable } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface AmountWidgetSettings {
     showReadonlyPlaceholder: boolean;
+    enableDisplayBasedOnLocale: boolean;
 }
 
-export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf-amount-settings');
+export const ADF_AMOUNT_SETTINGS = new InjectionToken<Observable<AmountWidgetSettings> | AmountWidgetSettings>('adf-amount-settings');
 
 @Component({
     selector: 'amount-widget',
@@ -49,13 +52,23 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
         '(select)': 'event($event)'
     },
     imports: [MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslatePipe, NgIf],
+    providers: [CurrencyPipe],
     encapsulation: ViewEncapsulation.None
 })
 export class AmountWidgetComponent extends WidgetComponent implements OnInit {
     static DEFAULT_CURRENCY: string = '$';
     private showPlaceholder = true;
 
+    amountWidgetValue: string;
     currency: string = AmountWidgetComponent.DEFAULT_CURRENCY;
+    currencyDisplay: string | boolean = 'symbol';
+    decimalProperty: string;
+    enableDisplayBasedOnLocale: boolean;
+    locale: string;
+    notShowDecimalDigits = '1.0-0';
+    showDecimalDigits = '1.2-2';
+    showReadonlyPlaceholder: boolean;
+    valueAsNumber: number;
 
     get placeholder(): string {
         return this.showPlaceholder ? this.field.placeholder : '';
@@ -63,22 +76,97 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
 
     constructor(
         public formService: FormService,
-        @Inject(ADF_AMOUNT_SETTINGS)
+        @Optional() @Inject(ADF_AMOUNT_SETTINGS) settings: Observable<AmountWidgetSettings> | AmountWidgetSettings,
-        @Optional()
+        private currencyPipe: CurrencyPipe
-        private settings: AmountWidgetSettings
     ) {
         super(formService);
+        if (isObservable(settings)) {
+            settings.pipe(takeUntilDestroyed()).subscribe((data: AmountWidgetSettings) => {
+                this.updateSettingsBasedProperties(data);
+            });
+        } else {
+            this.updateSettingsBasedProperties(settings);
+        }
     }
 
     ngOnInit() {
         if (this.field) {
             if (this.field.currency) {
                 this.currency = this.field.currency;
+            } else {
+                if (this.enableDisplayBasedOnLocale) {
+                    this.currency = '';
+                    this.currencyDisplay = '';
+                }
             }
 
             if (this.field.readOnly) {
-                this.showPlaceholder = this.settings?.showReadonlyPlaceholder;
+                this.showPlaceholder = this.showReadonlyPlaceholder;
             }
+            this.setInitialValues();
         }
     }
+
+    amountWidgetOnBlur(): void {
+        if (this.enableDisplayBasedOnLocale) {
+            if (this.amountWidgetValue) {
+                this.valueAsNumber = parseFloat(this.amountWidgetValue);
+                this.amountWidgetValue = this.currencyPipe.transform(
+                    this.amountWidgetValue,
+                    this.currency,
+                    this.currencyDisplay,
+                    this.decimalProperty
+                );
+            } else {
+                this.valueAsNumber = null;
+                this.amountWidgetValue = null;
+            }
+        }
+        this.markAsTouched();
+    }
+
+    amountWidgetOnFocus(): void {
+        if (this.enableDisplayBasedOnLocale) {
+            const hasValue = this.valueAsNumber === 0 || this.valueAsNumber;
+            this.amountWidgetValue = hasValue ? this.valueAsNumber.toString() : null;
+        }
+    }
+
+    getLocale(): string {
+        const defaultLocale = 'en-US';
+        if (typeof window?.navigator === 'undefined') {
+            return defaultLocale;
+        }
+        const wn = window.navigator as Navigator;
+        let lang = wn.languages ? wn.languages[0] : defaultLocale;
+        lang = lang || wn.language;
+        return lang;
+    }
+
+    onFieldChangedAmountWidget(): void {
+        this.field.value = this.amountWidgetValue;
+        super.onFieldChanged(this.field);
+    }
+
+    setInitialValues(): void {
+        if (this.enableDisplayBasedOnLocale) {
+            this.decimalProperty = this.field.enableFractions ? this.showDecimalDigits : this.notShowDecimalDigits;
+            this.locale = this.getLocale();
+            this.valueAsNumber = this.field.value;
+            this.amountWidgetValue = this.currencyPipe.transform(
+                this.field.value,
+                this.currency,
+                this.currencyDisplay,
+                this.decimalProperty,
+                this.locale
+            );
+        } else {
+            this.amountWidgetValue = this.field.value;
+        }
+    }
+
+    updateSettingsBasedProperties(data: AmountWidgetSettings): void {
+        this.enableDisplayBasedOnLocale = data?.enableDisplayBasedOnLocale ?? false;
+        this.showReadonlyPlaceholder = data?.showReadonlyPlaceholder;
+    }
 }