Skip to content

Commit

Permalink
Minor
Browse files Browse the repository at this point in the history
  • Loading branch information
@bistaastha
bistaastha committed Dec 27, 2024
1 parent 00f118d commit 9b06b7c
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 132 deletions.
183 changes: 85 additions & 98 deletions ...r-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,98 @@
<div class="opt-in-step__body">
<div>
<div class="opt-in-step__heading">Opt in to send text receipts</div>
<div class="opt-in-step__sub-heading">This will help you send receipts via text message.</div>
</div>
<div>
<div class="opt-in-step__heading">Opt in to send text receipts</div>
<div class="opt-in-step__sub-heading">This will help you send receipts via text message.</div>
</div>

<ion-content class="opt-in-step--content no-keyboard-adjust">
<ng-container
*ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT || optInFlowState === OptInFlowState.OTP_VERIFICATION"
>
<div class="opt-in-step--container">
<ng-container *ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT">
<div class="opt-in-step--mobile-input-container">
<div class="opt-in-step--content no-keyboard-adjust">
<ng-container
*ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT || optInFlowState === OptInFlowState.OTP_VERIFICATION"
>
<div class="opt-in-step--container">
<ng-container *ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT">
<div class="opt-in-step--mobile-input-container">
<div class="opt-in-step--mobile-input-container__label">
<span> Mobile Number </span>
</div>
<input
#mobileInput
matInput
[(ngModel)]="mobileNumberInputValue"
class="opt-in-step--mobile-input-container__input"
[ngClass]="{ 'opt-in-step--mobile-input-container__input--error': mobileNumberError?.length }"
[placeholder]="'Enter mobile number with country code e.g +155512345..'"
type="tel"
[maxlength]="15"
[minlength]="7"
/>
<span *ngIf="mobileNumberError?.length" class="opt-in-step--mobile-input-container__error">{{
mobileNumberError
}}</span>
</div>
</ng-container>
<ng-container *ngIf="optInFlowState === OptInFlowState.OTP_VERIFICATION">
<div class="opt-in-step--mobile-input-container__label">
<span> Mobile Number </span>
<span class="opt-in-step--mobile-input-container__mandatory"> * </span>
</div>
<input
#mobileInput
matInput
[(ngModel)]="mobileNumberInputValue"
class="opt-in-step--mobile-input-container__input"
[ngClass]="{ 'opt-in-step--mobile-input-container__input--error': mobileNumberError?.length }"
[placeholder]="'Enter mobile number with country code e.g +155512345..'"
type="tel"
[maxlength]="15"
[minlength]="7"
/>
<span *ngIf="mobileNumberError?.length" class="opt-in-step--mobile-input-container__error">{{
mobileNumberError
}}</span>
</div>
</ng-container>
<ng-container *ngIf="optInFlowState === OptInFlowState.OTP_VERIFICATION">
<div class="opt-in-step--description">
Enter 6 digit code sent to your phone {{ mobileNumberInputValue }}
<span (click)="goBack()">
<ion-icon class="opt-in-step--edit-icon" src="../../../assets/svg/edit.svg"></ion-icon>
</span>
</div>
<div class="opt-in-step--otp-container">
<ng-otp-input (onInputChange)="onOtpChange($event)" [config]="otpConfig"></ng-otp-input>
</div>
<ng-container *ngIf="showOtpTimer; else resendOtpCta">
<span class="opt-in-step--otp-container__label__otp-timer">
Resend code in
<span class="opt-in-step--otp-container__label__otp-timer--timer">
0:{{ otpTimer | number : '2.0' }}
<div class="opt-in-step--description">
{{ mobileNumberInputValue }}
<span (click)="goBack()">
<ion-icon class="opt-in-step--edit-icon" src="../../../assets/svg/edit.svg"></ion-icon>
</span>
<span class="opt-in-step--otp-container__label__attempts"> ({{ otpAttemptsLeft }} attempts left) </span>
</span>
</ng-container>
<ng-template #resendOtpCta>
<ng-container *ngIf="!disableResendOtp">
<button
class="opt-in-step--otp-container__label__resend"
(click)="resendOtp('CLICK')"
appFormButtonValidation
buttonType="secondary"
[loading]="sendCodeLoading"
loadingText="Sending Code"
>
Resend Code
</button>
<span class="opt-in-step--otp-container__label__attempts">({{ otpAttemptsLeft }} attempts left)</span>
</ng-container>
<div *ngIf="disableResendOtp" class="opt-in-step--otp-container__label__resend--disabled-container">
<span class="opt-in-step--otp-container__label__resend--disabled"> Resend Code </span>
<span class="opt-in-step--otp-container__label__attempts">(0 attempts left)</span>
</div>
</ng-template>
</ng-container>
</div>
</ng-container>
<ng-container *ngIf="optInFlowState === OptInFlowState.SUCCESS">
<div class="opt-in-step--success">
<ion-icon
class="fy-icon opt-in-step--success__image-container"
src="/assets/svg/check-circle-fill.svg"
></ion-icon>
<div class="opt-in-step--success__header">You are all set</div>
<div class="opt-in-step--success__description">
We have sent you a confirmation message. You can now use text messages to create and submit your next expense!
<div class="opt-in-step--otp-container">
<ng-otp-input (onInputChange)="onOtpChange($event)" [config]="otpConfig"></ng-otp-input>
</div>
<ng-container *ngIf="showOtpTimer; else resendOtpCta">
<span class="opt-in-step--otp-container__label__otp-timer">
Resend code in
<span class="opt-in-step--otp-container__label__otp-timer--timer">
0:{{ otpTimer | number : '2.0' }}
</span>
<span class="opt-in-step--otp-container__label__attempts"> ({{ otpAttemptsLeft }} attempts left) </span>
</span>
</ng-container>
<ng-template #resendOtpCta>
<ng-container *ngIf="!disableResendOtp">
<button
class="opt-in-step--otp-container__label__resend"
(click)="resendOtp('CLICK')"
appFormButtonValidation
buttonType="secondary"
[loading]="sendCodeLoading"
loadingText="Sending Code"
>
Resend Code
</button>
<span class="opt-in-step--otp-container__label__attempts">({{ otpAttemptsLeft }} attempts left)</span>
</ng-container>
<div *ngIf="disableResendOtp" class="opt-in-step--otp-container__label__resend--disabled-container">
<span class="opt-in-step--otp-container__label__resend--disabled"> Resend Code </span>
<span class="opt-in-step--otp-container__label__attempts">(0 attempts left)</span>
</div>
</ng-template>
</ng-container>
</div>
</div>
</ng-container>
</ion-content>
</ng-container>
<ng-container *ngIf="optInFlowState === OptInFlowState.SUCCESS">
<div class="opt-in-step--success">
<ion-icon
class="fy-icon opt-in-step--success__image-container"
src="/assets/svg/check-circle-fill.svg"
></ion-icon>
<div class="opt-in-step--success__header">You are all set</div>
<div class="opt-in-step--success__description">
We have sent you a confirmation message. You can now use text messages to create and submit your next
expense!
</div>
</div>
</ng-container>
</div>
</div>

<div class="opt-in-step__primary-cta-container">
<ion-button
class="btn-primary opt-in-step__primary-cta"
fill="clear"
aria-label="Navigate back to sign in page"
role="button"
>
<ion-icon
class="pending-verification__arrow-icon"
[src]="'/assets/svg/arrow-left.svg'"
slot="icon-only"
></ion-icon>
Go back
</ion-button>
<ion-button
class="btn-primary opt-in-step__primary-cta"
fill="clear"
aria-label="Navigate back to sign in page"
role="button"
>
<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()">
Continue
</ion-button>
</div>
Expand Down
16 changes: 2 additions & 14 deletions ...r-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -232,11 +225,6 @@
height: 21px;
}

&--container {
margin-top: 10vh;
padding: 16px 16px 36px;
}

&--edit-icon {
color: $brand-primary;
margin-left: 4px;
Expand Down Expand Up @@ -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;
Expand Down
22 changes: 4 additions & 18 deletions ...der-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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: () => {
Expand Down
4 changes: 3 additions & 1 deletion src/app/fyle/spender-onboarding/spender-onboarding.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
})
Expand Down
2 changes: 1 addition & 1 deletion src/app/fyle/spender-onboarding/spender-onboarding.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</div>
<div class="spender-onboarding__component-container" *ngIf="true">
<app-spender-onboarding-opt-in-step
[orgSettings]="orgSettings"
[eou]="eou"
(isStepCompleted)="skipOnboardingStep()"
></app-spender-onboarding-opt-in-step>
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/app/fyle/spender-onboarding/spender-onboarding.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ export class SpenderOnboardingPage {

onboardingStep: typeof OnboardingStep = OnboardingStep;

eou: ExtendedOrgUser;

constructor(
private loaderService: LoaderService,
private orgUserService: OrgUserService,
Expand All @@ -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;
Expand Down

0 comments on commit 9b06b7c

Please sign in to comment.