From 9b06b7c0f8c18fb01f0195781a9fc23cc0fdeaa7 Mon Sep 17 00:00:00 2001 From: aastha Date: Fri, 27 Dec 2024 08:44:58 +0530 Subject: [PATCH] Minor --- ...nder-onboarding-opt-in-step.component.html | 183 ++++++++---------- ...nder-onboarding-opt-in-step.component.scss | 16 +- ...pender-onboarding-opt-in-step.component.ts | 22 +-- .../spender-onboarding.module.ts | 4 +- .../spender-onboarding.page.html | 2 +- .../spender-onboarding.page.ts | 3 + 6 files changed, 98 insertions(+), 132 deletions(-) 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 6019980220..08d7bc29e3 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 @@ -1,111 +1,98 @@
-
Opt in to send text receipts
-
This will help you send receipts via text message.
-
+
+
Opt in to send text receipts
+
This will help you send receipts via text message.
+
- - -
- -
+
+ +
+ +
+
+ Mobile Number +
+ + {{ + mobileNumberError + }} +
+ +
Mobile Number - *
- - {{ - mobileNumberError - }} -
- - -
- Enter 6 digit code sent to your phone {{ mobileNumberInputValue }} - - - -
-
- -
- - - Resend code in - - 0:{{ otpTimer | number : '2.0' }} +
+ {{ mobileNumberInputValue }} + + - ({{ otpAttemptsLeft }} attempts left) - - - - - - ({{ otpAttemptsLeft }} attempts left) - -
- Resend Code - (0 attempts left)
- - -
- - -
- -
You are all set
-
- We have sent you a confirmation message. You can now use text messages to create and submit your next expense! +
+ +
+ + + Resend code in + + 0:{{ otpTimer | number : '2.0' }} + + ({{ otpAttemptsLeft }} attempts left) + + + + + + ({{ otpAttemptsLeft }} attempts left) + +
+ Resend Code + (0 attempts left) +
+ +
-
- - + + +
+ +
You are all set
+
+ We have sent you a confirmation message. You can now use text messages to create and submit your next + expense! +
+
+ +
+
-
- - - 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 6ea9893ca6..da0c93fd96 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 @@ -194,13 +194,6 @@ padding: 16px; } - &--header, - &--content, - &--footer { - --ion-background-color: #{$grey-9}; - background: #{$grey-9}; - } - &--toolbar { margin-top: calc(env(safe-area-inset-top)); border: 0; @@ -232,11 +225,6 @@ height: 21px; } - &--container { - margin-top: 10vh; - padding: 16px 16px 36px; - } - &--edit-icon { color: $brand-primary; margin-left: 4px; @@ -264,13 +252,13 @@ &__input { border: 0; border-radius: 0; - font-weight: 600; + font-weight: 500; line-height: 1.3; color: $blue-black; width: 100%; padding: 6px 0; border-bottom: 1px solid $grey-lighter; - font-size: 20px; + font-size: 18px; &__error { border-bottom: 1px solid $red; 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 d6c83447a5..28bd3e9aa1 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 @@ -10,39 +10,24 @@ import { SimpleChanges, ViewChild, } from '@angular/core'; -import { - AbstractControl, - FormArray, - FormBuilder, - FormControl, - FormGroup, - ValidationErrors, - Validators, -} from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { MatSnackBar } from '@angular/material/snack-bar'; -import { ModalController, PopoverController } from '@ionic/angular'; +import { ModalController } from '@ionic/angular'; import { NgOtpInputComponent, NgOtpInputConfig } from 'ng-otp-input'; -import { catchError, concatMap, finalize, from, map, noop, of, Subscription, switchMap, tap } from 'rxjs'; +import { finalize, from, Subscription, switchMap } from 'rxjs'; import { CardNetworkType } from 'src/app/core/enums/card-network-type'; import { OptInFlowState } from 'src/app/core/enums/opt-in-flow-state.enum'; import { ToastType } from 'src/app/core/enums/toast-type.enum'; -import { statementUploadedCard, visaRTFCard } from 'src/app/core/mock-data/platform-corporate-card.data'; import { ExtendedOrgUser } from 'src/app/core/models/extended-org-user.model'; -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'; import { PopoverCardsList } from 'src/app/core/models/popover-cards-list.model'; -import { SnackbarProperties } from 'src/app/core/models/snackbar-properties.model'; import { AuthService } from 'src/app/core/services/auth.service'; -import { CorporateCreditCardExpenseService } from 'src/app/core/services/corporate-credit-card-expense.service'; 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 { RealTimeFeedService } from 'src/app/core/services/real-time-feed.service'; import { SnackbarPropertiesService } from 'src/app/core/services/snackbar-properties.service'; import { TrackingService } from 'src/app/core/services/tracking.service'; import { UserEventService } from 'src/app/core/services/user-event.service'; -import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup-alert.component'; import { ToastMessageComponent } from 'src/app/shared/components/toast-message/toast-message.component'; @Component({ @@ -272,6 +257,7 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges { complete: () => { this.optInFlowState = OptInFlowState.SUCCESS; this.verifyingOtp = false; + this.isStepComplete.emit(true); this.userEventService.clearTaskCache(); }, error: () => { diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.module.ts b/src/app/fyle/spender-onboarding/spender-onboarding.module.ts index 82d2d02f35..f5a3827051 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding.module.ts +++ b/src/app/fyle/spender-onboarding/spender-onboarding.module.ts @@ -8,17 +8,19 @@ import { SpenderOnboardingRoutingModule } from './spender-onboarding-routing.mod import { MatButtonModule } from '@angular/material/button'; import { SpenderOnboardingConnectCardStepComponent } from './spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component'; import { SpenderOnboardingOptInStepComponent } from './spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component'; +import { NgOtpInputModule } from 'ng-otp-input'; @NgModule({ imports: [ - SharedModule, CommonModule, FormsModule, + SharedModule, IonicModule, MatButtonModule, SpenderOnboardingRoutingModule, FormsModule, ReactiveFormsModule, + NgOtpInputModule, ], declarations: [SpenderOnboardingPage, SpenderOnboardingConnectCardStepComponent, SpenderOnboardingOptInStepComponent], }) diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.html b/src/app/fyle/spender-onboarding/spender-onboarding.page.html index 6edfc287d3..a6a185a2c0 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding.page.html +++ b/src/app/fyle/spender-onboarding/spender-onboarding.page.html @@ -33,7 +33,7 @@
diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.ts b/src/app/fyle/spender-onboarding/spender-onboarding.page.ts index 236cd20f06..8ea45de5cd 100644 --- a/src/app/fyle/spender-onboarding/spender-onboarding.page.ts +++ b/src/app/fyle/spender-onboarding/spender-onboarding.page.ts @@ -23,6 +23,8 @@ export class SpenderOnboardingPage { onboardingStep: typeof OnboardingStep = OnboardingStep; + eou: ExtendedOrgUser; + constructor( private loaderService: LoaderService, private orgUserService: OrgUserService, @@ -45,6 +47,7 @@ export class SpenderOnboardingPage { ]) ), map(([eou, orgSettings, onboardingStatus, corporateCards]) => { + this.eou = eou; this.userFullName = eou.us.full_name; const isRtfEnabled = orgSettings.visa_enrollment_settings.enabled && orgSettings.mastercard_enrollment_settings.enabled;