Minor

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

@@ -5,7 +5,7 @@
       This will help you bring your card transactions into Fyle as expenses instantly.
     </div>
     <form [formGroup]="fg">
-      <div *ngIf="enrollableCards.length > 0">
+      <div *ngIf="enrollableCards.length > 0" class="connect-card__multiple-cards">
         <div *ngFor="let card of enrollableCards; let i = index">
           <div class="connect-card__input-label">
             <span>Corporate card</span>

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

@@ -4,6 +4,14 @@
   position: relative;
   height: 100%;
 
+  &__multiple-cards {
+    max-height: 200px;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
   &__body {
     display: flex;
     flex-direction: column;

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

@@ -57,13 +57,14 @@ fdescribe('SpenderOnboardingConnectCardStepComponent', () => {
 
     fit('should enable Continue button when form is valid', () => {
       component.fg = fb.group({
-        // @ts-ignore
         card_number_bacc1234: [
           '',
           Validators.compose([
             Validators.required,
             Validators.maxLength(16),
+            // @ts-ignore
             component.cardNumberValidator.bind(this),
+            // @ts-ignore
             component.cardNetworkValidator.bind(this),
           ]),
         ],

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

@@ -138,13 +138,13 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
       return 'We ran into an issue while processing your request. You can cancel and retry connecting the failed card or proceed to the next step.';
     } else if (this.cardsList.failedCards.length > 0) {
       return `
-      We ran into an issue while processing your request for the card ${this.cardsList.failedCards[0]}.
+      We ran into an issue while processing your request for the cards  ${this.cardsList.failedCards
+        .slice(0, this.cardsList.failedCards.length - 1)
+        .join(', ')} and ${this.cardsList.failedCards.slice(-1)}.
       You can cancel and retry connecting the failed card or proceed to the next step.`;
     } else {
       return `
-      We ran into an issue while processing your request for the cards  ${this.cardsList.failedCards
-        .slice(this.cardsList.failedCards.length - 1)
-        .join(', ')} and ${this.cardsList.failedCards.slice(-1)}.
+      We ran into an issue while processing your request for the card ${this.cardsList.failedCards[0]}.
       You can cancel and retry connecting the failed card or proceed to the next step.`;
     }
   }

src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.html

@@ -91,8 +91,21 @@
     </div>
   </div>
 
-  <div class="opt-in-step__primary-cta-container" *ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT">
-    <ion-button class="btn-primary opt-in-step__primary-cta" fill="clear" role="button" (click)="saveMobileNumber()">
+  <div
+    class="opt-in-step__cta-container"
+    [ngClass]="{ 'opt-in-step__without-go-back': !showGoBackCta, 'opt-in-step__with-go-back': showGoBackCta }"
+  >
+    <div fill="clear" class="opt-in-step__cta-secondary" (click)="goBackToConnectCard()" *ngIf="showGoBackCta">
+      <ion-icon class="opt-in-step__arrow-icon" [src]="'/assets/svg/arrow-left.svg'" slot="icon-only"></ion-icon>
+      <span class="opt-in-step__cta-text">Go back</span>
+    </div>
+    <ion-button
+      *ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT"
+      class="btn-primary opt-in-step__primary-cta"
+      fill="clear"
+      role="button"
+      (click)="saveMobileNumber()"
+    >
       Continue
     </ion-button>
   </div>

src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.scss

@@ -11,9 +11,16 @@
     height: 100%;
   }
 
-  &__primary-cta-container {
+  &__cta-container {
     display: flex;
     flex-direction: row;
+  }
+
+  &__with-go-back {
+    justify-content: space-between;
+  }
+
+  &__without-go-back {
     justify-content: flex-end;
   }
 
@@ -264,9 +271,9 @@
 
   &__otp-container {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
-    margin-bottom: 32px;
+    margin-bottom: 16px;
 
     &__label {
       margin: 0 8px 0 0;
@@ -387,4 +394,23 @@
   &__footer {
     margin-bottom: calc(env(safe-area-inset-bottom));
   }
+
+  &__cta-text {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__arrow-icon {
+    margin-right: 6px;
+    height: 18px;
+    width: 18px;
+  }
+
+  &__cta-secondary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $blue-black;
+    flex-direction: row;
+  }
 }

src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.ts

@@ -26,6 +26,7 @@ import { LoaderService } from 'src/app/core/services/loader.service';
 import { MobileNumberVerificationService } from 'src/app/core/services/mobile-number-verification.service';
 import { OrgUserService } from 'src/app/core/services/org-user.service';
 import { SnackbarPropertiesService } from 'src/app/core/services/snackbar-properties.service';
+import { SpenderOnboardingService } from 'src/app/core/services/spender-onboarding.service';
 import { TrackingService } from 'src/app/core/services/tracking.service';
 import { UserEventService } from 'src/app/core/services/user-event.service';
 import { ToastMessageComponent } from 'src/app/shared/components/toast-message/toast-message.component';
@@ -44,6 +45,8 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
 
   @Output() isStepComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
 
+  @Output() goToConnectCard: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   cardForm: FormControl;
 
   isVisaRTFEnabled = false;
@@ -87,6 +90,8 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
 
   hardwareBackButtonAction: Subscription;
 
+  showGoBackCta = false;
+
   otpConfig: NgOtpInputConfig = {
     allowNumbersOnly: true,
     length: 6,
@@ -108,7 +113,8 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
     private loaderService: LoaderService,
     private matSnackBar: MatSnackBar,
     private userEventService: UserEventService,
-    private snackbarProperties: SnackbarPropertiesService
+    private snackbarProperties: SnackbarPropertiesService,
+    private spenderOnboardingService: SpenderOnboardingService
   ) {}
 
   get OptInFlowState(): typeof OptInFlowState {
@@ -128,6 +134,11 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
   ngOnInit(): void {
     this.fg = this.fb.group({});
     this.fg.addControl('mobile_number', this.fb.control('', [Validators.required, Validators.maxLength(10)]));
+    this.spenderOnboardingService.getOnboardingStatus().subscribe((onboardingStatus) => {
+      if (onboardingStatus.step_connect_cards_is_skipped === false) {
+        this.showGoBackCta = true;
+      }
+    });
   }
 
   goBack(): void {
@@ -183,6 +194,10 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
     }
   }
 
+  goBackToConnectCard(): void {
+    this.goToConnectCard.emit(true);
+  }
+
   resendOtp(action: 'CLICK' | 'INITIAL'): void {
     this.sendCodeLoading = true;
     this.mobileNumberVerificationService.sendOtp().subscribe({

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

@@ -37,6 +37,7 @@
         <app-spender-onboarding-opt-in-step
           [eou]="eou"
           (isStepComplete)="markStepAsComplete()"
+          (goToConnectCard)="goBackToConnectCard()"
         ></app-spender-onboarding-opt-in-step>
       </div>
     </div>

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

@@ -80,13 +80,18 @@ export class SpenderOnboardingPage {
             } else {
               this.currentStep = OnboardingStep.CONNECT_CARD;
             }
+            this.currentStep = OnboardingStep.OPT_IN;
           }
           this.isLoading = false;
         })
       )
       .subscribe();
   }
 
+  goBackToConnectCard(): void {
+    this.currentStep = OnboardingStep.CONNECT_CARD;
+  }
+
   skipOnboardingStep(): void {
     if (this.currentStep === OnboardingStep.CONNECT_CARD) {
       this.spenderOnboardingService