From ddce87ef0483f5c4c7ed985495f2df2893fcb7c8 Mon Sep 17 00:00:00 2001 From: aastha Date: Mon, 6 Jan 2025 09:47:39 +0530 Subject: [PATCH] Minor --- ...nboarding-connect-card-step.component.html | 2 +- ...nboarding-connect-card-step.component.scss | 8 +++++ ...arding-connect-card-step.component.spec.ts | 3 +- ...-onboarding-connect-card-step.component.ts | 8 ++--- ...nder-onboarding-opt-in-step.component.html | 17 ++++++++-- ...nder-onboarding-opt-in-step.component.scss | 32 +++++++++++++++++-- ...pender-onboarding-opt-in-step.component.ts | 17 +++++++++- .../spender-onboarding.page.html | 1 + .../spender-onboarding.page.ts | 5 +++ 9 files changed, 81 insertions(+), 12 deletions(-) diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.html b/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.html index 4d2dbe8078..c5a56c32ed 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.html +++ b/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.
-
+
Corporate card diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.scss b/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.scss index 4e23f9621a..bbfff459e6 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.scss +++ b/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; diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.spec.ts b/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.spec.ts index cfcc49cfcb..19fdb3046b 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.spec.ts +++ b/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), ]), ], diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.ts b/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.ts index 7d666c7d45..6450ad9060 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.ts +++ b/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.`; } } diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.html b/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.html index 1ac23d197c..0e9d22ac7f 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.html +++ b/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.html @@ -91,8 +91,21 @@
-
- +
+
+ + Go back +
+ Continue
diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.scss b/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.scss index dfead9074a..bd68a2b41d 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.scss +++ b/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; + } } diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.ts b/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.ts index 152b7f196e..966f168b45 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.ts +++ b/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 = new EventEmitter(); + @Output() goToConnectCard: EventEmitter = new EventEmitter(); + 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({ diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.html b/src/app/fyle/spender-onboarding/spender-onboarding.page.html index 1aced5d9cc..f5603f4aa5 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding.page.html +++ b/src/app/fyle/spender-onboarding/spender-onboarding.page.html @@ -37,6 +37,7 @@
diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.ts b/src/app/fyle/spender-onboarding/spender-onboarding.page.ts index bdf9e8b59e..94f0e181e5 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding.page.ts +++ b/src/app/fyle/spender-onboarding/spender-onboarding.page.ts @@ -80,6 +80,7 @@ export class SpenderOnboardingPage { } else { this.currentStep = OnboardingStep.CONNECT_CARD; } + this.currentStep = OnboardingStep.OPT_IN; } this.isLoading = false; }) @@ -87,6 +88,10 @@ export class SpenderOnboardingPage { .subscribe(); } + goBackToConnectCard(): void { + this.currentStep = OnboardingStep.CONNECT_CARD; + } + skipOnboardingStep(): void { if (this.currentStep === OnboardingStep.CONNECT_CARD) { this.spenderOnboardingService