Minor

src/app/core/enums/card-status.enum.ts

@@ -0,0 +1,8 @@
+export enum CardStatus {
+  ACTIVE = 'ACTIVE',
+  PREACTIVE = 'PREACTIVE',
+  INACTIVE = 'INACTIVE',
+  USED = 'USED',
+  DELETED = 'DELETED',
+  EXPIRED = 'EXPIRED',
+}

src/app/core/enums/manage-cards-page-segment.enum.ts

@@ -0,0 +1,4 @@
+export enum ManageCardsPageSegment {
+  CORPORATE_CARDS,
+  VIRTUAL_CARDS,
+}

src/app/core/mock-data/org-settings.data.ts

@@ -402,6 +402,11 @@ export const orgSettingsRes: OrgSettings = {
     allowed: true,
     enabled: true,
   },
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };
 
 export const orgSettingsParams2: OrgSettings = {
@@ -804,6 +809,11 @@ export const orgSettingsParams2: OrgSettings = {
     allowed: true,
     enabled: true,
   },
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };
 
 export const orgSettingsParamWoCCC: OrgSettings = {
@@ -1184,6 +1194,11 @@ export const orgSettingsParamWoCCC: OrgSettings = {
     allowed: true,
     enabled: true,
   },
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };
 
 export const orgSettingsCCCDisabled: OrgSettings = {

src/app/core/mock-data/virtual-card-details-response.data.ts

@@ -0,0 +1,17 @@
+import { CardDetailsAmountResponse } from '../models/card-details-amount-response';
+import { CardDetailsResponse } from '../models/card-details-response.model';
+
+export const virtualCardDetailsResponse: { data: CardDetailsResponse } = {
+  data: {
+    full_card_number: '123412341234123',
+    cvv: '123',
+    // @ts-ignore
+    expiry_date: '2029-01-01T00:00:00+00:00',
+  },
+};
+
+export const virtualCardCurrentAmountResponse: { data: CardDetailsAmountResponse } = {
+  data: {
+    current_amount: 1000,
+  },
+};

src/app/core/models/org-settings.model.ts

@@ -236,6 +236,10 @@ export interface DataExtractionSettings extends CommonOrgSettings {
   web_app_pdf?: boolean;
 }
 
+export interface AmexFeedEnrollmentSettings extends CommonOrgSettings {
+  virtual_card_settings_enabled: boolean;
+}
+
 export interface SplitExpenseSettings {
   enabled?: boolean;
 }
@@ -444,6 +448,7 @@ export interface OrgSettingsResponse {
   xe_provider_settings?: XeProviderSettings;
   simplified_report_closure_settings?: CommonOrgSettings;
   mobile_app_my_expenses_beta_enabled?: boolean;
+  amex_feed_enrollment_settings: AmexFeedEnrollmentSettings;
 }
 
 export interface UiPolicySettings {
@@ -555,4 +560,5 @@ export interface OrgSettings {
   company_expenses_beta_settings?: CommonOrgSettings;
   simplified_report_closure_settings?: CommonOrgSettings;
   mobile_app_my_expenses_beta_enabled?: boolean;
+  amex_feed_enrollment_settings: AmexFeedEnrollmentSettings;
 }

src/app/core/models/platform/platform-corporate-card.model.ts

@@ -21,4 +21,6 @@ export interface PlatformCorporateCard {
   updated_at: string;
   user_id: string;
   verification_status: string;
+  virtual_card_id?: string;
+  virtual_card_state?: string;
 }

src/app/core/services/org-settings.service.ts

@@ -406,6 +406,11 @@ export class OrgSettingsService {
         enabled: incoming?.simplified_report_closure_settings?.enabled,
       },
       mobile_app_my_expenses_beta_enabled: incoming?.mobile_app_my_expenses_beta_enabled,
+      amex_feed_enrollment_settings: {
+        allowed: incoming?.amex_feed_enrollment_settings?.allowed,
+        enabled: incoming?.amex_feed_enrollment_settings?.enabled,
+        virtual_card_settings_enabled: incoming?.amex_feed_enrollment_settings?.virtual_card_settings_enabled,
+      },
     };
 
     Object.keys(orgSettings).forEach((settingsType) => {
@@ -554,6 +559,7 @@ export class OrgSettingsService {
       mastercard_enrollment_settings: outgoing.mastercard_enrollment_settings,
       simplified_report_closure_settings: outgoing?.simplified_report_closure_settings,
       mobile_app_my_expenses_beta_enabled: outgoing?.mobile_app_my_expenses_beta_enabled,
+      amex_feed_enrollment_settings: outgoing?.amex_feed_enrollment_settings,
     };
   }
 }

src/app/core/services/virtual-cards.service.spec.ts

@@ -2,6 +2,13 @@ import { TestBed } from '@angular/core/testing';
 
 import { VirtualCardsService } from './virtual-cards.service';
 import { SpenderPlatformV1ApiService } from './spender-platform-v1-api.service';
+import {
+  virtualCardCurrentAmountResponse,
+  virtualCardDetailsResponse,
+} from '../mock-data/virtual-card-details-response.data';
+import { of } from 'rxjs';
+import { VirtualCardsRequest } from '../models/virtual-cards-request.model';
+import { CardDetailsResponse } from '../models/card-details-response.model';
 
 describe('VirtualCardsService', () => {
   let virtualCardsService: VirtualCardsService;
@@ -27,4 +34,42 @@ describe('VirtualCardsService', () => {
   it('should be created', () => {
     expect(virtualCardsService).toBeTruthy();
   });
+
+  it('getCardDetailsById(): should get virtual card details', (done) => {
+    const params = {
+      data: {
+        id: 'vc1234',
+      },
+    };
+    const virtualCardsRequest: VirtualCardsRequest = {
+      id: 'vc1234',
+    };
+    const expectedResponse: { data: CardDetailsResponse } = virtualCardDetailsResponse;
+    expectedResponse.data.expiry_date = new Date(expectedResponse.data.expiry_date);
+    spenderPlatformV1ApiService.post.and.returnValue(of(virtualCardDetailsResponse));
+
+    virtualCardsService.getCardDetailsById(virtualCardsRequest).subscribe((res) => {
+      expect(res).toEqual(expectedResponse.data);
+      expect(spenderPlatformV1ApiService.post).toHaveBeenCalledOnceWith('/virtual_cards/show_card_details', params);
+      done();
+    });
+  });
+
+  it('getCurrentAmountById(): should get virtual card current Amount', (done) => {
+    const params = {
+      data: {
+        id: 'vc1234',
+      },
+    };
+    const virtualCardsRequest: VirtualCardsRequest = {
+      id: 'vc1234',
+    };
+    spenderPlatformV1ApiService.post.and.returnValue(of(virtualCardCurrentAmountResponse));
+
+    virtualCardsService.getCurrentAmountById(virtualCardsRequest).subscribe((res) => {
+      expect(res).toEqual(virtualCardCurrentAmountResponse.data);
+      expect(spenderPlatformV1ApiService.post).toHaveBeenCalledOnceWith('/virtual_cards/get_current_amount', params);
+      done();
+    });
+  });
 });

src/app/core/services/virtual-cards.service.ts

@@ -18,7 +18,13 @@ export class VirtualCardsService {
       }>('/virtual_cards/show_card_details', {
         data: virtualCardRequestPayload,
       })
-      .pipe(map((response) => response.data));
+      .pipe(
+        map((response) => {
+          const cardDetailsResponse = response.data;
+          cardDetailsResponse.expiry_date = new Date(cardDetailsResponse.expiry_date);
+          return cardDetailsResponse;
+        })
+      );
   }
 
   getCurrentAmountById(virtualCardRequestPayload: VirtualCardsRequest): Observable<CardDetailsAmountResponse> {

src/app/core/test-data/accounts.service.spec.data.ts

@@ -2134,6 +2134,11 @@ export const orgSettingsData: OrgSettings = {
     allowed: true,
     enabled: true,
   },
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };
 
 export const orgSettingsAdvDisabledData: OrgSettings = {
@@ -2525,6 +2530,11 @@ export const orgSettingsAdvDisabledData: OrgSettings = {
     allowed: true,
     enabled: true,
   },
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };
 
 export const paymentModesResData = [

src/app/core/test-data/org-settings.service.spec.data.ts

@@ -436,6 +436,11 @@ export const orgSettingsGetData: OrgSettings = {
     enabled: false,
   },
   mobile_app_my_expenses_beta_enabled: false,
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };
 
 export const orgSettingsPostData: OrgSettingsResponse = {
@@ -864,6 +869,11 @@ export const orgSettingsPostData: OrgSettingsResponse = {
     enabled: false,
   },
   mobile_app_my_expenses_beta_enabled: false,
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };
 
 export const outgoingTallyAccountObj: AccountingExportSettings = {
@@ -1405,4 +1415,9 @@ export const orgSettingsData: OrgSettings = {
     allowed: true,
     enabled: true,
   },
+  amex_feed_enrollment_settings: {
+    allowed: true,
+    enabled: true,
+    virtual_card_settings_enabled: true,
+  },
 };

src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.html

@@ -9,7 +9,14 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<div class="manage-corporate-cards__segment-container">
+  <ion-segment (ionChange)="segmentChanged($event)" [value]="segmentValue" class="manage-corporate-cards__segment">
+    <ion-segment-button [value]="Segment.CORPORATE_CARDS" class="text-capitalize">Corporate Cards</ion-segment-button>
+    <ion-segment-button [value]="Segment.VIRTUAL_CARDS" class="text-capitalize">Virtual Cards</ion-segment-button>
+  </ion-segment>
+</div>
+
+<ion-content *ngIf="segmentValue === Segment.CORPORATE_CARDS">
   <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
@@ -44,7 +51,7 @@
   </div>
 </ion-content>
 
-<ion-footer>
+<ion-footer *ngIf="segmentValue === Segment.CORPORATE_CARDS">
   <ion-toolbar mode="md">
     <div class="manage-corporate-cards__footer-toolbar">
       <ion-button

src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.scss

@@ -5,6 +5,18 @@
     box-shadow: 0 0 8px $black-shadow;
   }
 
+  &__segment-container {
+    padding: 20px 78px;
+    border-radius: 8px;
+  }
+
+  &__segment {
+    border-radius: 8px;
+    border: 2px solid $pure-white;
+    background: $pure-white;
+    box-shadow: 0px 2px 10px 0px $shadow-lg;
+  }
+
   &__toolbar-title {
     color: $black;
     font-size: 20px;

src/app/fyle/manage-corporate-cards/manage-corporate-cards.page.ts

@@ -12,9 +12,10 @@ import { OverlayResponse } from 'src/app/core/models/overlay-response.modal';
 import { CardAddedComponent } from './card-added/card-added.component';
 import { RealTimeFeedService } from 'src/app/core/services/real-time-feed.service';
 import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup-alert.component';
-import { RefresherCustomEvent } from '@ionic/core';
+import { RefresherCustomEvent, SegmentCustomEvent } from '@ionic/core';
 import { CardNetworkType } from 'src/app/core/enums/card-network-type';
 import { TrackingService } from 'src/app/core/services/tracking.service';
+import { ManageCardsPageSegment } from 'src/app/core/enums/manage-cards-page-segment.enum';
 
 @Component({
   selector: 'app-manage-corporate-cards',
@@ -32,6 +33,8 @@ export class ManageCorporateCardsPage {
 
   loadCorporateCards$ = new BehaviorSubject<void>(null);
 
+  segmentValue = ManageCardsPageSegment.CORPORATE_CARDS;
+
   constructor(
     private router: Router,
     private corporateCreditCardExpenseService: CorporateCreditCardExpenseService,
@@ -43,6 +46,16 @@ export class ManageCorporateCardsPage {
     private trackingService: TrackingService
   ) {}
 
+  get Segment(): typeof ManageCardsPageSegment {
+    return ManageCardsPageSegment;
+  }
+
+  segmentChanged(event: SegmentCustomEvent): void {
+    if (event?.detail?.value) {
+      this.segmentValue = parseInt(event.detail.value, 10);
+    }
+  }
+
   refresh(event: RefresherCustomEvent): void {
     this.corporateCreditCardExpenseService.clearCache().subscribe(() => {
       this.loadCorporateCards$.next();

src/app/shared/components/spent-cards/card-detail/card-detail.component.html

@@ -1,7 +1,6 @@
 <div class="stats--ccc-card-details">
   <app-corporate-card [card]="cardDetail.card" [hideOptionsMenu]="true"></app-corporate-card>
 </div>
-
 <div class="stats--ccc-stats">
   <div>
     <div (click)="goToExpensesPage('incompleteExpenses', cardDetail)">

src/app/shared/components/virtual-card/virtual-card.component.html

@@ -0,0 +1,55 @@
+<div class="virtual-card">
+  <div class="virtual-card__card-number">
+    <div class="virtual-card__card-number__nickname">
+      {{ cardNickname }}
+      <div class="virtual-card__status-pill">
+        <div class="virtual-card__status-pill__dot"></div>
+        <div>{{ cardStatus | titlecase }}</div>
+      </div>
+    </div>
+    <div class="virtual-card__card-number__card-number-container">
+      <div *ngIf="!showCardNumber" class="virtual-card__card-number__card-number-mask d-flex">
+        <div>****</div>
+        <div>******</div>
+      </div>
+      <div *ngIf="showCardNumber" class="virtual-card__card-number__card-number-unmasked d-flex">
+        <div>{{ cardNumber | slice : 0 : 4 }}</div>
+        <div>{{ cardNumber | slice : 4 : 10 }}</div>
+      </div>
+      <div class="virtual-card__card-number__unmasked-card-digits">
+        {{ cardNumber | slice : 10 : 15 }}
+      </div>
+      <ion-icon
+        src="../../../../../assets/svg/duplicate.svg"
+        (press)="toggleShowCardNumber()"
+        (pressup)="hideCardNumberAndCopy()"
+        (tap)="copyToClipboard(cardNumber)"
+      ></ion-icon>
+    </div>
+  </div>
+  <div class="virtual-card__card-fields">
+    <div class="virtual-card__card-fields__cvv-field">
+      <div class="virtual-card__card-fields__label-text">CVV</div>
+      <div class="d-flex">
+        <div *ngIf="!showCvv" class="virtual-card__card-fields__cvv-mask">****</div>
+        <div *ngIf="showCvv" class="virtual-card__card-fields__cvv-number">{{ cvv }}</div>
+        <ion-icon
+          class="virtual-card__card-fields__cvv-copy-icon"
+          src="../../../../../assets/svg/duplicate.svg"
+          (press)="toggleShowCvv()"
+          (pressup)="hideCvvAndCopy()"
+          (tap)="copyToClipboard(cvv)"
+        ></ion-icon>
+      </div>
+    </div>
+    <div>
+      <div class="virtual-card__card-fields__label-text">Expiry</div>
+      <div class="virtual-card__card-fields__value-text">{{ expiry | date : 'MM/yy' }}</div>
+    </div>
+    <div class="virtual-card__vertical-divider"></div>
+    <div>
+      <div class="virtual-card__card-fields__label-text">Available</div>
+      <div class="virtual-card__card-fields__value-text">{{ availableAmount | currency : 'USD' }}</div>
+    </div>
+  </div>
+</div>