Merge pull request #34677 from Expensify/georgia-formatExpiration

Fix card number previews and expiration date format on expensify card page
Expensify · Jan 19, 2024 · 991a4e2 · 991a4e2
2 parents e6b0761 + ed9fa1e
commit 991a4e2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
@@ -68,6 +68,22 @@ function getYearFromExpirationDateString(expirationDateString: string) {
     return cardYear.length === 2 ? `20${cardYear}` : cardYear;
 }
 
+/**
+ * @returns string with a month in MM/YYYY format
+ */
+function formatCardExpiration(expirationDateString: string) {
+    // already matches MM/YYYY format
+    const dateFormat = /^\d{2}\/\d{4}$/;
+    if (dateFormat.test(expirationDateString)) {
+        return expirationDateString;
+    }
+
+    const expirationMonth = getMonthFromExpirationDateString(expirationDateString);
+    const expirationYear = getYearFromExpirationDateString(expirationDateString);
+
+    return `${expirationMonth}/${expirationYear}`;
+}
+
 /**
  * @param cardList - collection of assigned cards
  * @returns collection of assigned cards grouped by domain
@@ -120,6 +136,7 @@ export {
     isExpensifyCard,
     isCorporateCard,
     getDomainCards,
+    formatCardExpiration,
     getMonthFromExpirationDateString,
     getYearFromExpirationDateString,
     maskCard,

diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -226,7 +226,7 @@ function ExpensifyCardPage({
                                         {details.pan ? (
                                             <CardDetails
                                                 pan={details.pan}
-                                                expiration={details.expiration}
+                                                expiration={CardUtils.formatCardExpiration(details.expiration)}
                                                 cvv={details.cvv}
                                                 privatePersonalDetails={{address: details.address}}
                                                 domain={domain}
@@ -235,7 +235,7 @@ function ExpensifyCardPage({
                                             <>
                                                 <MenuItemWithTopDescription
                                                     description={translate('cardPage.virtualCardNumber')}
-                                                    title={CardUtils.maskCard(virtualCard.lastFourPAN)}
+                                                    title={CardUtils.maskCard('')}
                                                     interactive={false}
                                                     titleStyle={styles.walletCardNumber}
                                                     shouldShowRightComponent
@@ -271,7 +271,7 @@ function ExpensifyCardPage({
                                             description={translate('cardPage.physicalCardNumber')}
                                             title={CardUtils.maskCard(physicalCard.lastFourPAN)}
                                             interactive={false}
-                                            titleStyle={styles.walletCardMenuItem}
+                                            titleStyle={styles.walletCardNumber}
                                         />
                                         <MenuItem
                                             title={translate('reportCardLostOrDamaged.report')}

diff --git a/tests/unit/CardUtilsTest.js b/tests/unit/CardUtilsTest.js
@@ -39,4 +39,14 @@ describe('CardUtils', () => {
         expect(cardUtils.getMonthFromExpirationDateString(shortDate)).toBe(expectedMonth);
         expect(cardUtils.getYearFromExpirationDateString(shortDate)).toBe(expectedYear);
     });
+
+    it('Test MM/YYYY format given MM/YY', () => {
+        expect(cardUtils.formatCardExpiration(shortDateSlashed)).toBe(longDateSlashed);
+        expect(cardUtils.formatCardExpiration(shortDateSlashed)).toBe(longDateSlashed);
+    });
+
+    it('Test MM/YYYY format given MMYY', () => {
+        expect(cardUtils.formatCardExpiration(shortDate)).toBe(longDateSlashed);
+        expect(cardUtils.formatCardExpiration(shortDate)).toBe(longDateSlashed);
+    });
 });