feat: integrate APIs for format preferences (#4018)

* integrate APIs for format preferences

* failing tests

* unit tests

* tests

* minor

* minor

* minor

* minor

* fix tests

Author: harshal015

src/app/auth/switch-org/switch-org.page.spec.ts

@@ -41,6 +41,7 @@ import { PlatformOrgSettingsService } from 'src/app/core/services/platform/v1/sp
 import { orgSettingsCardsDisabled, orgSettingsData } from 'src/app/core/test-data/org-settings.service.spec.data';
 import { SpenderOnboardingService } from 'src/app/core/services/spender-onboarding.service';
 import { getTranslocoTestingModule } from 'src/app/core/testing/transloco-testing.utils';
+import { ConfigService } from 'src/app/core/services/config.service';
 
 const roles = ['OWNER', 'USER', 'FYLER'];
 const email = '[email protected]';
@@ -123,6 +124,7 @@ describe('SwitchOrgPage', () => {
     const deepLinkServiceSpy = jasmine.createSpyObj('DeepLinkService', ['getExpenseRoute']);
     const ldSpy = jasmine.createSpyObj('LaunchDarklyService', ['initializeUser']);
     const orgSettingsServiceSpy = jasmine.createSpyObj('PlatformOrgSettingsService', ['get']);
+    const configServiceSpy = jasmine.createSpyObj('ConfigService', ['loadConfigurationData', 'loadFormatPreferences']);
     const spenderOnboardingServiceSpy = jasmine.createSpyObj('SpenderOnboardingService', [
       'checkForRedirectionToOnboarding',
     ]);
@@ -159,6 +161,10 @@ describe('SwitchOrgPage', () => {
           provide: PlatformOrgSettingsService,
           useValue: orgSettingsServiceSpy,
         },
+        {
+          provide: ConfigService,
+          useValue: configServiceSpy,
+        },
         {
           provide: SpenderOnboardingService,
           useValue: spenderOnboardingServiceSpy,

src/app/auth/switch-org/switch-org.page.ts

@@ -2,7 +2,16 @@ import { AfterViewChecked, ChangeDetectorRef, Component, ElementRef, OnInit, Vie
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin, from, fromEvent, noop, Observable, of, catchError, throwError } from 'rxjs';
 import { distinctUntilChanged, filter, finalize, map, shareReplay, startWith, switchMap } from 'rxjs/operators';
-import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonToolbar, Platform, PopoverController } from '@ionic/angular/standalone';
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonToolbar,
+  Platform,
+  PopoverController,
+} from '@ionic/angular/standalone';
 import { Org } from 'src/app/core/models/org.model';
 import { LoaderService } from 'src/app/core/services/loader.service';
 import { UserService } from 'src/app/core/services/user.service';
@@ -32,6 +41,7 @@ import { DeepLinkService } from 'src/app/core/services/deep-link.service';
 import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expenses.service';
 import { LaunchDarklyService } from 'src/app/core/services/launch-darkly.service';
 import { SpenderOnboardingService } from 'src/app/core/services/spender-onboarding.service';
+import { ConfigService } from 'src/app/core/services/config.service';
 import { ActiveOrgCardComponent } from './active-org-card/active-org-card.component';
 import { NgClass, AsyncPipe } from '@angular/common';
 import { MatFormField, MatPrefix, MatInput, MatSuffix } from '@angular/material/input';
@@ -61,7 +71,7 @@ import { FyZeroStateComponent } from '../../shared/components/fy-zero-state/fy-z
     MatPrefix,
     MatSuffix,
     NgClass,
-    OrgCardComponent
+    OrgCardComponent,
   ],
 })
 export class SwitchOrgPage implements OnInit, AfterViewChecked {
@@ -115,6 +125,8 @@ export class SwitchOrgPage implements OnInit, AfterViewChecked {
 
   private spenderOnboardingService = inject(SpenderOnboardingService);
 
+  private configService = inject(ConfigService);
+
   // TODO: Skipped for migration because:
   //  Your application code writes to the query. This prevents migration.
   @ViewChild('search') searchRef: ElementRef<HTMLElement>;
@@ -458,6 +470,8 @@ export class SwitchOrgPage implements OnInit, AfterViewChecked {
   }
 
   async proceed(isFromInviteLink?: boolean): Promise<void> {
+    await this.configService.loadFormatPreferences();
+
     const pendingDetails$ = this.userService.isPendingDetails().pipe(shareReplay(1));
     const eou$ = from(this.authService.getEou());
     const roles$ = from(this.authService.getRoles().pipe(shareReplay(1)));

src/app/core/mock-data/org-settings.data.ts

@@ -415,6 +415,17 @@ export const orgSettingsRes: OrgSettings = deepFreeze({
     enabled: true,
     virtual_card_settings_enabled: true,
   },
+  regional_settings: {
+    allowed: true,
+    enabled: true,
+    time_format: 'h:mm a',
+    date_format: 'MMM dd, yyyy',
+    currency_format: {
+      decimal_separator: '.',
+      thousand_separator: ',',
+      symbol_position: 'before',
+    },
+  },
 });
 
 export const orgSettingsParams2: OrgSettings = deepFreeze({

src/app/core/models/org-settings.model.ts

@@ -356,6 +356,18 @@ export interface CurrencylayerProviderSettings extends CommonOrgSettings {
   name?: string;
 }
 
+export interface RegionalCurrencyFormat {
+  decimal_separator?: string;
+  symbol_position?: 'before' | 'after' | string;
+  thousand_separator?: string;
+}
+
+export interface RegionalSettings extends CommonOrgSettings {
+  currency_format?: RegionalCurrencyFormat;
+  date_format?: string;
+  time_format?: string;
+}
+
 export interface OrgSettingsResponse {
   id?: string;
   created_at?: string;
@@ -464,6 +476,7 @@ export interface OrgSettingsResponse {
   pending_cct_expense_restriction?: CommonOrgSettings;
   simplified_multi_stage_approvals?: CommonOrgSettings;
   is_new_critical_policy_violation_flow_enabled?: boolean;
+  regional_settings?: RegionalSettings;
 }
 
 export interface UiPolicySettings {
@@ -580,4 +593,5 @@ export interface OrgSettings {
   pending_cct_expense_restriction?: CommonOrgSettings;
   simplified_multi_stage_approvals?: CommonOrgSettings;
   is_new_critical_policy_violation_flow_enabled?: boolean;
+  regional_settings?: RegionalSettings;
 }

src/app/core/services/config.service.spec.ts

@@ -4,33 +4,49 @@ import { TokenService } from './token.service';
 import { StorageService } from './storage.service';
 import { SecureStorageService } from './secure-storage.service';
 import { RouterAuthService } from './router-auth.service';
+import { PlatformOrgSettingsService } from './platform/v1/spender/org-settings.service';
+import { of } from 'rxjs';
+import { getFormatPreferenceProviders } from '../testing/format-preference-providers.utils';
+import { FORMAT_PREFERENCES } from 'src/app/constants';
+import { FormatPreferences } from 'src/app/core/models/format-preferences.model';
+import { DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
+import { orgSettingsRes } from '../mock-data/org-settings.data';
 
 describe('ConfigService', () => {
   let configService: ConfigService;
   let tokenService: jasmine.SpyObj<TokenService>;
   let storageService: jasmine.SpyObj<StorageService>;
   let secureStorageService: jasmine.SpyObj<SecureStorageService>;
   let routerAuthService: jasmine.SpyObj<RouterAuthService>;
+  let orgSettingsService: jasmine.SpyObj<PlatformOrgSettingsService>;
+  let formatPreferences: FormatPreferences;
+  let datePipeOptions: { dateFormat: string };
 
   beforeEach(() => {
     const tokenServiceSpy = jasmine.createSpyObj('TokenService', ['getClusterDomain']);
     const storageServiceSpy = jasmine.createSpyObj('StorageService', ['clearAll']);
     const secureStorageServiceSpy = jasmine.createSpyObj('SecureStorageService', ['clearAll']);
     const routerAuthServiceSpy = jasmine.createSpyObj('RouterAuthService', ['setClusterDomain']);
+    const orgSettingsServiceSpy = jasmine.createSpyObj('PlatformOrgSettingsService', ['get']);
     TestBed.configureTestingModule({
       providers: [
         ConfigService,
         { provide: TokenService, useValue: tokenServiceSpy },
         { provide: StorageService, useValue: storageServiceSpy },
         { provide: SecureStorageService, useValue: secureStorageServiceSpy },
         { provide: RouterAuthService, useValue: routerAuthServiceSpy },
+        { provide: PlatformOrgSettingsService, useValue: orgSettingsServiceSpy },
+        ...getFormatPreferenceProviders(),
       ],
     });
     configService = TestBed.inject(ConfigService);
     tokenService = TestBed.inject(TokenService) as jasmine.SpyObj<TokenService>;
     storageService = TestBed.inject(StorageService) as jasmine.SpyObj<StorageService>;
     secureStorageService = TestBed.inject(SecureStorageService) as jasmine.SpyObj<SecureStorageService>;
     routerAuthService = TestBed.inject(RouterAuthService) as jasmine.SpyObj<RouterAuthService>;
+    orgSettingsService = TestBed.inject(PlatformOrgSettingsService) as jasmine.SpyObj<PlatformOrgSettingsService>;
+    formatPreferences = TestBed.inject(FORMAT_PREFERENCES) as FormatPreferences;
+    datePipeOptions = TestBed.inject(DATE_PIPE_DEFAULT_OPTIONS) as { dateFormat: string };
   });
 
   it('should be created', () => {
@@ -41,16 +57,48 @@ describe('ConfigService', () => {
     it('should call setClusterDomain if clusterDomain is present', async () => {
       const clusterDomain = 'https://staging.fyle.tech';
       tokenService.getClusterDomain.and.resolveTo(clusterDomain);
+
+      orgSettingsService.get.and.returnValue(of(orgSettingsRes));
       await configService.loadConfigurationData();
       expect(routerAuthService.setClusterDomain).toHaveBeenCalledOnceWith(clusterDomain);
       expect(tokenService.getClusterDomain).toHaveBeenCalledTimes(1);
     });
 
     it('should clear all stored data if clusterDomain is not present', async () => {
       tokenService.getClusterDomain.and.resolveTo(null);
+      orgSettingsService.get.and.returnValue(of(orgSettingsRes));
+
       await configService.loadConfigurationData();
       expect(storageService.clearAll).toHaveBeenCalledTimes(1);
       expect(secureStorageService.clearAll).toHaveBeenCalledTimes(1);
     });
+
+    it('should update format preferences and date options from regional settings', async () => {
+      const clusterDomain = 'https://staging.fyle.tech';
+      tokenService.getClusterDomain.and.resolveTo(clusterDomain);
+      const orgSettings = {
+        ...orgSettingsRes,
+        regional_settings: {
+          allowed: true,
+          enabled: true,
+          time_format: 'H:mm',
+          date_format: 'dd/MM/yyyy',
+          currency_format: {
+            decimal_separator: ',',
+            thousand_separator: '.',
+            symbol_position: 'after',
+          },
+        },
+      };
+      orgSettingsService.get.and.returnValue(of(orgSettings));
+
+      await configService.loadConfigurationData();
+
+      expect(formatPreferences.timeFormat).toBe('H:mm');
+      expect(formatPreferences.currencyFormat.placement).toBe('after');
+      expect(formatPreferences.currencyFormat.decimalSeparator).toBe(',');
+      expect(formatPreferences.currencyFormat.thousandSeparator).toBe('.');
+      expect(datePipeOptions.dateFormat).toBe('dd/MM/yyyy');
+    });
   });
 });

src/app/core/services/config.service.ts

@@ -1,8 +1,15 @@
 import { Injectable, inject } from '@angular/core';
+import { DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
+import { firstValueFrom, of } from 'rxjs';
+import { catchError, defaultIfEmpty } from 'rxjs/operators';
 import { RouterAuthService } from './router-auth.service';
 import { SecureStorageService } from './secure-storage.service';
 import { StorageService } from './storage.service';
 import { TokenService } from './token.service';
+import { PlatformOrgSettingsService } from './platform/v1/spender/org-settings.service';
+import { FORMAT_PREFERENCES } from 'src/app/constants';
+import { FormatPreferences } from 'src/app/core/models/format-preferences.model';
+import { OrgSettings, RegionalSettings } from 'src/app/core/models/org-settings.model';
 
 @Injectable()
 export class ConfigService {
@@ -14,6 +21,12 @@ export class ConfigService {
 
   private secureStorageService = inject(SecureStorageService);
 
+  private orgSettingsService = inject(PlatformOrgSettingsService);
+
+  private formatPreferences = inject<FormatPreferences>(FORMAT_PREFERENCES);
+
+  private datePipeOptions = inject(DATE_PIPE_DEFAULT_OPTIONS);
+
   async loadConfigurationData(): Promise<void> {
     const clusterDomain: string = await this.tokenService.getClusterDomain();
 
@@ -24,5 +37,32 @@ export class ConfigService {
       await this.secureStorageService.clearAll();
       await this.storageService.clearAll();
     }
+
+    await this.loadFormatPreferences();
+  }
+
+  async loadFormatPreferences(): Promise<void> {
+    const orgSettings = (await firstValueFrom(
+      this.orgSettingsService.get().pipe(
+        defaultIfEmpty(null),
+        catchError(() => of(null)),
+      ),
+    )) as OrgSettings | null;
+
+    const regional: RegionalSettings | undefined = orgSettings?.regional_settings;
+
+    if (regional) {
+      this.formatPreferences.timeFormat = regional?.time_format;
+
+      const currencyFormat = regional.currency_format;
+      this.formatPreferences.currencyFormat = {
+        placement: currencyFormat.symbol_position === 'after' ? 'after' : 'before',
+        thousandSeparator:
+          currencyFormat.thousand_separator ?? this.formatPreferences.currencyFormat?.thousandSeparator,
+        decimalSeparator: currencyFormat.decimal_separator ?? this.formatPreferences.currencyFormat?.decimalSeparator,
+      };
+
+      this.datePipeOptions.dateFormat = regional.date_format;
+    }
   }
 }

src/app/core/services/platform/v1/spender/org-settings.service.ts

@@ -412,6 +412,7 @@ export class PlatformOrgSettingsService {
         enabled: incoming.simplified_multi_stage_approvals?.enabled,
       },
       is_new_critical_policy_violation_flow_enabled: incoming?.is_new_critical_policy_violation_flow_enabled,
+      regional_settings: incoming.regional_settings,
     };
 
     Object.keys(orgSettings).forEach((settingsType) => {

src/app/core/test-data/org-settings.service.spec.data.ts

@@ -453,6 +453,17 @@ export const orgSettingsGetData: OrgSettings = deepFreeze({
   pending_cct_expense_restriction: { enabled: true, allowed: true },
   simplified_multi_stage_approvals: { enabled: true, allowed: true },
   is_new_critical_policy_violation_flow_enabled: false,
+  regional_settings: {
+    allowed: true,
+    enabled: true,
+    time_format: 'h:mm a',
+    date_format: 'MMM dd, yyyy',
+    currency_format: {
+      decimal_separator: '.',
+      thousand_separator: ',',
+      symbol_position: 'before',
+    },
+  },
 });
 
 export const orgSettingsPostData: OrgSettingsResponse = deepFreeze({
@@ -899,6 +910,17 @@ export const orgSettingsPostData: OrgSettingsResponse = deepFreeze({
     allowed: true,
   },
   is_new_critical_policy_violation_flow_enabled: false,
+  regional_settings: {
+    allowed: true,
+    enabled: true,
+    time_format: 'h:mm a',
+    date_format: 'MMM dd, yyyy',
+    currency_format: {
+      decimal_separator: '.',
+      thousand_separator: ',',
+      symbol_position: 'before',
+    },
+  },
 });
 
 export const orgSettingsAmexFeedDataRequest: OrgSettingsResponse = deepFreeze({