fix bold font, fix expiration date format on card page

Expensify · Jan 17, 2024 · f341508 · f341508
1 parent 818567a
commit f341508
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 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/YY format
+ */
+function formatCardExpiration(expirationDateString: string) {
+    // already matches MM/YY 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}
@@ -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);
+    });
 });