From 1c6e82b1062b8cccadea14a878f566c0be3812f3 Mon Sep 17 00:00:00 2001 From: Aastha Bist Date: Mon, 11 Mar 2024 22:58:02 +0530 Subject: [PATCH] fix: Fix UI for Virtual Cards (#2782) --- .../card-stats/card-stats.component.html | 8 ++++++- .../card-stats/card-stats.component.scss | 21 +++++++++++++++++ .../manage-corporate-cards.page.html | 23 ++++++++++++++----- .../manage-corporate-cards.page.scss | 8 +++++++ .../manage-corporate-cards.page.spec.ts | 6 ++++- .../manage-corporate-cards.page.ts | 4 ++++ .../virtual-card/virtual-card.component.html | 2 ++ .../virtual-card/virtual-card.component.scss | 14 +++++++---- .../virtual-card.component.spec.ts | 12 ++++++---- .../virtual-card/virtual-card.component.ts | 15 ++++++++---- 10 files changed, 93 insertions(+), 20 deletions(-) diff --git a/src/app/fyle/dashboard/card-stats/card-stats.component.html b/src/app/fyle/dashboard/card-stats/card-stats.component.html index 744213ded7..8c210414f5 100644 --- a/src/app/fyle/dashboard/card-stats/card-stats.component.html +++ b/src/app/fyle/dashboard/card-stats/card-stats.component.html @@ -14,7 +14,7 @@ > - + + +
+ + +
+
CARD SPEND
diff --git a/src/app/fyle/dashboard/card-stats/card-stats.component.scss b/src/app/fyle/dashboard/card-stats/card-stats.component.scss index 2369cd476b..0ef860224a 100644 --- a/src/app/fyle/dashboard/card-stats/card-stats.component.scss +++ b/src/app/fyle/dashboard/card-stats/card-stats.component.scss @@ -15,4 +15,25 @@ padding-inline: 16px; padding-bottom: 8px; } + + &__shimmers { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + &__card { + height: 180px; + width: 280px; + border-radius: 16px; + margin-right: 24px; + margin-top: 20px; + } + &__card-lg { + height: 220px; + width: 80%; + border-radius: 16px; + margin-right: 24px; + bottom: 50px; + } + } } diff --git a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.html b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.html index 1cfe548c79..4b24ca383d 100644 --- a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.html +++ b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.html @@ -10,11 +10,18 @@
-
- - Corporate Cards - Virtual Cards - +
+
+ + Corporate Cards + Virtual Cards + +
@@ -80,7 +87,11 @@ - +
diff --git a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.scss b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.scss index 85ab4958c9..3eab8285f2 100644 --- a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.scss +++ b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.scss @@ -34,6 +34,8 @@ &__tab-available { padding-top: 0; + display: flex; + align-items: center; } &__cards-list { @@ -61,6 +63,12 @@ border-radius: 16px; } + &__virtual-card-shimmer { + height: 180px; + width: 280px; + border-radius: 16px; + } + &__zero-state-container { margin: auto; display: flex; diff --git a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.spec.ts b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.spec.ts index 0ee47973c4..627342af13 100644 --- a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.spec.ts +++ b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.spec.ts @@ -36,7 +36,6 @@ import { noop } from 'lodash'; import { TrackingService } from 'src/app/core/services/tracking.service'; import { cardUnenrolledProperties } from 'src/app/core/mock-data/corporate-card-trackers.data'; import { VirtualCardsService } from 'src/app/core/services/virtual-cards.service'; -import { Virtual } from 'swiper'; import { ManageCardsPageSegment } from 'src/app/core/enums/manage-cards-page-segment.enum'; import { virtualCardCombinedResponse } from 'src/app/core/mock-data/virtual-card-combined-response.data'; import { virtualCardDetailsCombined } from 'src/app/core/mock-data/platform-corporate-card-detail.data'; @@ -235,6 +234,11 @@ describe('ManageCorporateCardsPage', () => { }); }); + it('areVirtualCardsPresent(): check in corporateCards list if any of the cards is a virtual card', () => { + const response = component.areVirtualCardsPresent([virtualCard]); + expect(response).toEqual(true); + }); + describe('add card flow', () => { let addCardPopoverSpy: jasmine.SpyObj; let cardAddedPopoverSpy: jasmine.SpyObj; diff --git a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.ts b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.ts index 3c72736d2e..7bf95b2fd3 100644 --- a/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.ts +++ b/src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.ts @@ -63,6 +63,10 @@ export class ManageCorporateCardsPage { } } + areVirtualCardsPresent(corporateCards: PlatformCorporateCard[]) { + return corporateCards.filter((corporateCard) => corporateCard.virtual_card_id).length > 0; + } + refresh(event: RefresherCustomEvent): void { this.corporateCreditCardExpenseService.clearCache().subscribe(() => { this.loadCorporateCards$.next(); diff --git a/src/app/shared/components/virtual-card/virtual-card.component.html b/src/app/shared/components/virtual-card/virtual-card.component.html index 08d404031e..6a74217ffa 100644 --- a/src/app/shared/components/virtual-card/virtual-card.component.html +++ b/src/app/shared/components/virtual-card/virtual-card.component.html @@ -26,6 +26,7 @@ {{ cardNumber | slice : 10 : 15 }} ****
{{ cvv }}
{ }); }); - it('hideCvvAndCopy(): should hide cvv and call method to copy text to clipboard', () => { + it('hideCvvAndCopy(): should hide cvv and call method to copy text to clipboard', fakeAsync(() => { component.cvv = '1234'; component.showCvv = true; const copyToClipboardSpy = spyOn(component, 'copyToClipboard'); component.hideCvvAndCopy(); + tick(1000); + expect(component.showCvv).toBeFalse(); expect(copyToClipboardSpy).toHaveBeenCalledOnceWith(component.cvv); - }); + })); - it('hideCardNumberAndCopy(): should hide cvv and call method to copy text to clipboard', () => { + it('hideCardNumberAndCopy(): should hide cvv and call method to copy text to clipboard', fakeAsync(() => { component.cardNumber = '123451234512345'; component.showCardNumber = true; const copyToClipboardSpy = spyOn(component, 'copyToClipboard'); component.hideCardNumberAndCopy(); + tick(1000); + expect(component.showCardNumber).toBeFalse(); expect(copyToClipboardSpy).toHaveBeenCalledOnceWith(component.cardNumber); - }); + })); it('toggleShowCardNumber(): should show card number if card number is hidden', () => { component.showCardNumber = false; diff --git a/src/app/shared/components/virtual-card/virtual-card.component.ts b/src/app/shared/components/virtual-card/virtual-card.component.ts index f962806240..5925a8c52c 100644 --- a/src/app/shared/components/virtual-card/virtual-card.component.ts +++ b/src/app/shared/components/virtual-card/virtual-card.component.ts @@ -4,6 +4,7 @@ import { ClipboardService } from 'src/app/core/services/clipboard.service'; import { SnackbarPropertiesService } from 'src/app/core/services/snackbar-properties.service'; import { ToastMessageComponent } from '../toast-message/toast-message.component'; import { CardStatus } from 'src/app/core/enums/card-status.enum'; +import { CardAddedComponent } from 'src/app/fyle/manage-corporate-cards/card-added/card-added.component'; @Component({ selector: 'app-virtual-card', @@ -59,20 +60,26 @@ export class VirtualCardComponent implements OnInit { } hideCvvAndCopy() { - this.showCvv = false; + setTimeout(() => { + this.showCvv = false; + }, 1000); + this.copyToClipboard(this.cvv); } hideCardNumberAndCopy() { - this.showCardNumber = false; + setTimeout(() => { + this.showCardNumber = false; + }, 1000); + this.copyToClipboard(this.cardNumber); } toggleShowCardNumber() { - this.showCardNumber = !this.showCardNumber; + this.showCardNumber = true; } toggleShowCvv() { - this.showCvv = !this.showCvv; + this.showCvv = true; } }