fix: showing last_synced_at for amex feed cards in dashboard (#2510)

src/app/core/enums/data-feed-source.enum.ts

@@ -1,6 +1,7 @@
 export enum DataFeedSource {
   STATEMENT_UPLOAD = 'STATEMENT_UPLOAD',
   YODLEE = 'YODLEE',
+  AMEX_FEED = 'AMEX_FEED',
   SPECTRE = 'SPECTRE',
   MASTERCARD_RTF = 'MASTERCARD_RTF',
   VISA_RTF = 'VISA_RTF',

src/app/core/mock-data/platform-corporate-card.data.ts

@@ -115,3 +115,26 @@ export const yodleeCard: PlatformCorporateCard = {
   user_id: 'usvKA4X8Ugcr',
   verification_status: 'NOT_VERIFIED',
 };
+
+export const amexFeedCard: PlatformCorporateCard = {
+  assignor_user_id: 'usvKA4X8Ugcr',
+  bank_name: 'AMEX_BANK',
+  card_number: '**********81000',
+  cardholder_name: null,
+  code: null,
+  created_at: '2023-03-03T07:16:46.376082+00:00',
+  data_feed_source: DataFeedSource.AMEX_FEED,
+  id: 'bacc15bbrRGWzf',
+  is_dummy: false,
+  is_mastercard_enrolled: false,
+  is_visa_enrolled: false,
+  last_assigned_at: '2023-03-03T07:16:46.376082+00:00',
+  last_ready_for_verification_at: null,
+  last_synced_at: '2023-03-03T07:16:46.376082+00:00',
+  last_verification_attempt_at: null,
+  last_verified_at: null,
+  org_id: 'orNVthTo2Zyo',
+  updated_at: '2023-03-03T07:16:46.376082+00:00',
+  user_id: 'usvKA4X8Ugcr',
+  verification_status: 'NOT_VERIFIED',
+};

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

@@ -1,13 +1,24 @@
 <div class="corporate-card">
   <ion-row class="ion-align-items-center">
     <ion-col class="p-0">
-      <div *ngIf="!isCardConnectedToRTF" class="corporate-card__logo--default">
-        <ion-icon
-          src="../../../../assets/svg/card.svg"
-          class="corporate-card__logo--default__icon"
-          data-testid="default-icon"
-        ></ion-icon>
-      </div>
+      <ng-container *ngIf="!isCardConnectedToRTF">
+        <div class="corporate-card__logo--default">
+          <ng-container *ngIf="card.data_feed_source === dataFeedSourceTypes.AMEX_FEED; else defaultCard">
+            <img
+              src="../../../../assets/images/amex-logo.png"
+              class="corporate-card__logo--amex__icon"
+              data-testid="amex-icon"
+            />
+          </ng-container>
+          <ng-template #defaultCard>
+            <ion-icon
+              src="../../../../assets/svg/card.svg"
+              class="corporate-card__logo--default__icon"
+              data-testid="default-icon"
+            ></ion-icon>
+          </ng-template>
+        </div>
+      </ng-container>
 
       <ng-container *ngIf="isCardConnectedToRTF">
         <img
@@ -50,10 +61,14 @@
       </div>
     </ng-container>
 
-    <ng-container *ngIf="card.data_feed_source === dataFeedSourceTypes.YODLEE">
+    <ng-container
+      *ngIf="
+        card.data_feed_source === dataFeedSourceTypes.YODLEE || card.data_feed_source === dataFeedSourceTypes.AMEX_FEED
+      "
+    >
       <span class="corporate-card__feed-label">Last Synced</span>
       <span class="corporate-card__feed-value" data-testid="feed-info">{{
-        card.last_synced_at | date: 'MMM dd, YYYY'
+        card.last_synced_at | date : 'MMM dd, YYYY'
       }}</span>
     </ng-container>
 

src/app/shared/components/corporate-card/corporate-card.component.scss

@@ -31,6 +31,13 @@
       }
     }
 
+    &--amex {
+      &__icon {
+        width: 22px;
+        height: 22px;
+      }
+    }
+
     &--visa,
     &--mastercard {
       &__icon {

src/app/shared/components/corporate-card/corporate-card.component.spec.ts

@@ -5,6 +5,7 @@ import { CorporateCardComponent } from './corporate-card.component';
 import { getElementBySelector } from 'src/app/core/dom-helpers';
 import { CorporateCreditCardExpenseService } from 'src/app/core/services/corporate-credit-card-expense.service';
 import {
+  amexFeedCard,
   bankFeedCard,
   mastercardRTFCard,
   statementUploadedCard,
@@ -92,7 +93,17 @@ describe('CorporateCardComponent', () => {
       expect(icon).toBeTruthy();
     });
 
-    it('should show the default card icon when the card is not connected to visa and mastercard RTF', () => {
+    it('should show amex icon when the card is connected to AMEX_FEED', () => {
+      component.card = amexFeedCard;
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const icon = getElementBySelector(fixture, '[data-testid="amex-icon"]');
+      expect(icon).toBeTruthy();
+    });
+
+    it('should show the default card icon when the card is not connected to visa,  mastercard RTF and AMEX_FEED', () => {
       component.card = statementUploadedCard;
 
       component.ngOnInit();
@@ -173,6 +184,16 @@ describe('CorporateCardComponent', () => {
       expect(optionsBtn).toBeFalsy();
     });
 
+    it('should not be visible for amex feed cards', () => {
+      component.card = amexFeedCard;
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const optionsBtn = getElementBySelector(fixture, '[data-testid="more-options-btn"]');
+      expect(optionsBtn).toBeFalsy();
+    });
+
     it('should not be visible for bank feed cards', () => {
       component.card = bankFeedCard;
 
@@ -213,6 +234,22 @@ describe('CorporateCardComponent', () => {
       expect(actualDateString).toEqual(expectedDateString);
     });
 
+    it('should show the last synced date when the card is connected to AMEX_FEED', () => {
+      component.card = amexFeedCard;
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const feedInfo = getElementBySelector(fixture, '[data-testid="feed-info"]');
+
+      expect(feedInfo).toBeTruthy();
+
+      const expectedDateString = new Date(amexFeedCard.last_synced_at).toDateString();
+      const actualDateString = new Date(feedInfo.textContent).toDateString();
+
+      expect(actualDateString).toEqual(expectedDateString);
+    });
+
     it('should show the data feed source when the card is connected to bank feed', () => {
       component.card = bankFeedCard;