Minor

src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.html

@@ -22,6 +22,7 @@
               <input
                 class="smartlook-show connect-card__card-number-input pl-0"
                 inputmode="numeric"
+                mask="0000 0000 0000 0000"
                 placeholder="xxxx xxxx xxxx"
                 data-testid="card-number-input"
                 formControlName="card_number_{{ card.id }}"
@@ -107,12 +108,14 @@
         >
           <input
             class="smartlook-show connect-card__card-number-input-singular pl-0"
+            inputmode="numeric"
+            mask="0000 0000 0000 0000"
             placeholder="Enter corporate card number"
             data-testid="card-number-input"
             appAutofocus
             formControlName="card_number"
             required
-            (input)="onCardNumberUpdate(card, 'card_number')"
+            (input)="onCardNumberUpdate()"
           />
 
           <ion-icon

src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.ts

@@ -18,21 +18,8 @@ import {
   Validators,
 } from '@angular/forms';
 import { PopoverController } from '@ionic/angular';
-import {
-  BehaviorSubject,
-  catchError,
-  concatMap,
-  finalize,
-  from,
-  map,
-  noop,
-  Observable,
-  of,
-  switchMap,
-  tap,
-} from 'rxjs';
+import { catchError, concatMap, from, map, noop, of, switchMap, tap } from 'rxjs';
 import { CardNetworkType } from 'src/app/core/enums/card-network-type';
-import { statementUploadedCard, visaRTFCard } from 'src/app/core/mock-data/platform-corporate-card.data';
 import { OrgSettings } from 'src/app/core/models/org-settings.model';
 import { OverlayResponse } from 'src/app/core/models/overlay-response.modal';
 import { PlatformCorporateCard } from 'src/app/core/models/platform/platform-corporate-card.model';
@@ -85,8 +72,7 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
     private corporateCreditCardExpensesService: CorporateCreditCardExpenseService,
     private realTimeFeedService: RealTimeFeedService,
     private fb: FormBuilder,
-    private popoverController: PopoverController,
-    private cdRef: ChangeDetectorRef
+    private popoverController: PopoverController
   ) {}
 
   enrollCards(): void {
@@ -222,9 +208,7 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
     this.setupForm();
   }
 
-  onCardNumberUpdate(card: PlatformCorporateCard, inputControlName: string): void {
-    this.cdRef.detectChanges();
-    this.formatCardNumber(this.fg.controls[inputControlName]);
+  onCardNumberUpdate(card?: PlatformCorporateCard): void {
     if (this.enrollableCards.length > 0) {
       this.cardValuesMap[card.id].card_type = this.realTimeFeedService.getCardTypeFromNumber(
         this.fg.controls[`card_number_${card.id}`].value as string
@@ -236,23 +220,12 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
     }
   }
 
-  formatCardNumber(input: AbstractControl): void {
-    // Remove all non-numeric characters
-    let value = (input.value as string).replace(/\D/g, '');
-
-    // Format the value in groups of 4
-    value = value.replace(/(\d{4})(?=\d)/g, '$1 ');
-
-    // Set the formatted value back to the input
-    input.setValue(value);
-  }
-
   private cardNumberValidator(control: AbstractControl): ValidationErrors {
     // Reactive forms are not strongly typed in Angular 13, so we need to cast the value to string
     // TODO (Angular 14 >): Remove the type casting and directly use string type for the form control
     const cardNumber = control.value as string;
 
-    const isValid = this.realTimeFeedService.isCardNumberValid(cardNumber);
+    const isValid = this.realTimeFeedService.isCardNumberValid(cardNumber.replace(/ /g, ''));
     const cardType = this.realTimeFeedService.getCardTypeFromNumber(cardNumber);
 
     if (cardType === CardNetworkType.VISA || cardType === CardNetworkType.MASTERCARD) {

src/app/fyle/spender-onboarding/spender-onboarding.module.ts

@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
 import { SpenderOnboardingRoutingModule } from './spender-onboarding-routing.module';
 import { MatButtonModule } from '@angular/material/button';
 import { SpenderOnboardingConnectCardStepComponent } from './spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component';
+import { NgxMaskModule } from 'ngx-mask';
 
 @NgModule({
   imports: [
@@ -18,6 +19,9 @@ import { SpenderOnboardingConnectCardStepComponent } from './spender-onboarding-
     SpenderOnboardingRoutingModule,
     FormsModule,
     ReactiveFormsModule,
+    NgxMaskModule.forRoot({
+      validation: false,
+    }),
   ],
   declarations: [SpenderOnboardingPage, SpenderOnboardingConnectCardStepComponent],
 })

src/app/fyle/spender-onboarding/spender-onboarding.page.ts

@@ -8,6 +8,7 @@ import { SpenderOnboardingService } from 'src/app/core/services/spender-onboardi
 import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
 import { Router } from '@angular/router';
 import { CorporateCreditCardExpenseService } from 'src/app/core/services/corporate-credit-card-expense.service';
+import { OrgSettings } from 'src/app/core/models/org-settings.model';
 
 @Component({
   selector: 'app-spender-onboarding',
@@ -25,6 +26,8 @@ export class SpenderOnboardingPage {
 
   onboardingStep: typeof OnboardingStep = OnboardingStep;
 
+  orgSettings: OrgSettings;
+
   constructor(
     private loaderService: LoaderService,
     private orgUserService: OrgUserService,
@@ -48,6 +51,7 @@ export class SpenderOnboardingPage {
         ),
         map(([eou, orgSettings, onboardingStatus, corporateCards]) => {
           this.userFullName = eou.us.full_name;
+          this.orgSettings = orgSettings;
           const isRtfEnabled =
             orgSettings.visa_enrollment_settings.enabled && orgSettings.mastercard_enrollment_settings.enabled;
           const isAmexFeedEnabled = orgSettings.amex_feed_enrollment_settings.enabled;