Skip to content

Commit

Permalink
Minor
Browse files Browse the repository at this point in the history
  • Loading branch information
@bistaastha
bistaastha committed Jan 2, 2025
2 parents 97e5243 + fe8f02d commit 755e0e4
Show file tree
Hide file tree
Showing 11 changed files with 235 additions and 93 deletions.
4 changes: 4 additions & 0 deletions src/app/core/models/popover-cards-list.model.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface PopoverCardsList {
successfulCards: string[];
failedCards: string[];
}
4 changes: 2 additions & 2 deletions src/app/fyle/spender-onboarding/models/onboarding-step.enum.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export enum OnboardingStep {
CONNECT_CARD,
OPT_IN,
CONNECT_CARD = 'CONNECT_CARD',
OPT_IN = 'OPT_IN',
}
131 changes: 105 additions & 26 deletions .../spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
<div class="connect-card__body">
<div class="connect-card__body" *ngIf="cardsLoading === false && fg">
<div>
<div class="connect-card__heading">Connect corporate card</div>
<div class="connect-card__sub-heading">
This will help you bring your card transactions into Fyle as expenses instantly.
</div>

<form formGroup="fg" *ngIf="fg">
<div *ngIf="enrollableCards?.length > 0">
<form [formGroup]="fg">
<div *ngIf="enrollableCards.length > 0">
<div *ngFor="let card of enrollableCards; let i = index">
<div class="connect-card__input-label">
<span>Corporate card</span>
</div>

<div
class="connect-card__input-inner-container"
[ngClass]="{ 'connect-card__input-inner-container--error': false }"
[ngClass]="{
'connect-card__input-inner-container--error':
fg.controls['card_number_' + card.id].touched && fg.controls['card_number_' + card.id].invalid
}"
>
<input
class="smartlook-show connect-card__card-number-input pl-0"
inputmode="numeric"
placeholder="xxxx xxxx xxxx"
data-testid="card-number-input"
appAutofocus
[timeout]="500"
[formControlName]="'card_number_' + i"
required
(input)="onCardNumberUpdate(card, 'card_number_' + i)"
/>
<div class="connect-card__card-number-input-container">
<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 }}"
required
(input)="onCardNumberUpdate(card, 'card_number_' + card.id)"
/>

<div>
{{ card?.card_number || '' }}
<div class="connect-card__card-last-four">
{{ cardValuesMap[card.id].last_four || '' }}
</div>
</div>

<ion-icon
Expand Down Expand Up @@ -57,15 +60,15 @@
<div class="connect-card__input-error-space"></div>

<div
*ngIf="fg.controls['card_number_' + i]?.touched && fg.controls['card_number_' + i]?.invalid"
class="add-corporate-card__input-errors"
*ngIf="fg.controls['card_number_' + card.id]?.touched && fg.controls['card_number_' + card.id]?.invalid"
class="connect-card__input-errors"
data-testid="error-message"
>
<span *ngIf="fg.controls['card_number_' + i]?.errors.invalidCardNumber"
<span *ngIf="fg.controls['card_number_' + card.id]?.errors.invalidCardNumber"
>Please enter a valid card number.</span
>

<ng-container *ngIf="fg.controls['card_number_' + i]?.errors.invalidCardNetwork">
<ng-container *ngIf="fg.controls['card_number_' + card.id]?.errors.invalidCardNetwork">
<span *ngIf="isVisaRTFEnabled && isMastercardRTFEnabled; else visaOnlyOrg"
>Enter a valid Visa or Mastercard number. If you have other cards, please contact your admin.</span
>
Expand All @@ -74,7 +77,7 @@
<!-- Check if only visa is enabled -->
<span
*ngIf="
fg.controls['card_number_' + i]?.errors.invalidCardNetwork && isVisaRTFEnabled;
fg.controls['card_number_' + card.id]?.errors.invalidCardNetwork && isVisaRTFEnabled;
else mastercardOnlyOrg
"
>Enter a valid Visa number. If you have other cards, please contact your admin.</span
Expand All @@ -83,22 +86,98 @@

<ng-template #mastercardOnlyOrg>
<!-- Check if only mastercard is enabled -->
<span *ngIf="fg.controls['card_number_' + i]?.errors.invalidCardNetwork && isMastercardRTFEnabled"
<span *ngIf="fg.controls['card_number_' + card.id]?.errors.invalidCardNetwork && isMastercardRTFEnabled"
>Enter a valid Mastercard number. If you have other cards, please contact your admin.</span
>
</ng-template>
</ng-container>
</div>
</div>
</div>
<div *ngIf="enrollableCards.length === 0"></div>
<div *ngIf="enrollableCards.length === 0">
<div class="connect-card__input-label">
<span>Corporate card</span>
</div>

<div
class="connect-card__input-inner-container"
[ngClass]="{
'connect-card__input-inner-container--error':
fg.controls.card_number.touched && fg.controls.card_number.invalid
}"
>
<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()"
/>

<ion-icon
*ngIf="singleEnrollableCardDetails?.card_type === 'Others'"
src="../../../../assets/svg/card.svg"
class="connect-card__input-default-icon"
data-testid="default-icon"
></ion-icon>

<img
*ngIf="singleEnrollableCardDetails?.card_type === 'Visa'"
src="../../../../assets/images/visa-logo.png"
class="connect-card__input-visa-icon"
data-testid="visa-icon"
/>

<img
*ngIf="singleEnrollableCardDetails?.card_type === 'Mastercard'"
src="../../../../assets/images/mastercard-logo.png"
class="connect-card__input-mastercard-icon"
data-testid="mastercard-icon"
/>
</div>

<div class="connect-card__input-error-space"></div>

<div
*ngIf="fg.controls.card_number?.touched && fg.controls.card_number?.invalid"
class="connect-card__input-errors"
data-testid="error-message"
>
<span *ngIf="fg.controls.card_number.errors.invalidCardNumber">Please enter a valid card number.</span>

<ng-container *ngIf="fg.controls.card_number?.errors.invalidCardNetwork">
<span *ngIf="isVisaRTFEnabled && isMastercardRTFEnabled; else visaOnlyOrg"
>Enter a valid Visa or Mastercard number. If you have other cards, please contact your admin.</span
>

<ng-template #visaOnlyOrg>
<!-- Check if only visa is enabled -->
<span
*ngIf="fg.controls.card_number?.errors.invalidCardNetwork && isVisaRTFEnabled; else mastercardOnlyOrg"
>Enter a valid Visa number. If you have other cards, please contact your admin.</span
>
</ng-template>

<ng-template #mastercardOnlyOrg>
<!-- Check if only mastercard is enabled -->
<span *ngIf="fg.controls.card_number?.errors.invalidCardNetwork && isMastercardRTFEnabled"
>Enter a valid Mastercard number. If you have other cards, please contact your admin.</span
>
</ng-template>
</ng-container>
</div>
</div>
</form>
</div>
<div class="connect-card__primary-cta-container">
<ion-button
class="btn-primary connect-card__primary-cta"
fill="clear"
aria-label="Navigate back to sign in page"
[disabled]="fg.invalid"
role="button"
(click)="enrollCards()"
>
Expand Down
26 changes: 25 additions & 1 deletion .../spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,36 @@
}

&__card-number-input {
width: fit-content !important;
margin-right: 24px;
font-size: 18px;
font-weight: 500;
&::placeholder {
font-size: 14px;
font-weight: 400;
word-spacing: 24px;
}
}

&__card-number-input-singular {
border: 0;
font-size: 18px;
font-weight: 500;
&::placeholder {
font-size: 14px;
font-weight: 400;
}
}

&__card-number-input-container {
display: flex;
justify-content: space-between;
}

&__card-last-four {
font-size: 18px;
font-weight: 500;
}

&__heading {
color: $black;
font-size: 20px;
Expand Down Expand Up @@ -91,6 +114,7 @@
&__input-inner-container {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid $grey;
padding-bottom: 6px;
margin-bottom: 2px;
Expand Down
Loading

0 comments on commit 755e0e4

Please sign in to comment.