Show blank status for cards not in a recognized state instead of defaulting to Active

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>

Author: MelvinBot

src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx

@@ -46,7 +46,8 @@ export default function WorkspaceExpensifyCardsTableRow({item, rowIndex, shouldU
     const narrowLayoutSubtitle = [item.lastFourPAN, item.name].filter(Boolean).join(` ${CONST.DOT_SEPARATOR} `);
     const cardType = item.isVirtual ? translate('workspace.expensifyCard.virtual') : translate('workspace.expensifyCard.physical');
     const limitTypeLabel = translate(getTranslationKeyForLimitType(item.limitType));
-    const statusLabel = translate(getTranslationKeyForCardStatus(item.card.state, item.isVirtual));
+    const statusTranslationKey = getTranslationKeyForCardStatus(item.card.state, item.isVirtual);
+    const statusLabel = statusTranslationKey ? translate(statusTranslationKey) : '';
     const formattedLimit = convertToShortDisplayString(item.limit, item.currency);
     const formattedFrozenDate = item.frozenDate ? DateUtils.formatWithUTCTimeZone(item.frozenDate, CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT) : '';
     let frozenByText: string | undefined;

src/components/Tables/WorkspaceExpensifyCardsTable/index.tsx

@@ -174,8 +174,10 @@ export default function WorkspaceExpensifyCardsTable({
         }
 
         if (activeSorting.columnKey === 'status') {
-            const status1 = translate(getTranslationKeyForCardStatus(item1.card.state, item1.isVirtual));
-            const status2 = translate(getTranslationKeyForCardStatus(item2.card.state, item2.isVirtual));
+            const status1TranslationKey = getTranslationKeyForCardStatus(item1.card.state, item1.isVirtual);
+            const status2TranslationKey = getTranslationKeyForCardStatus(item2.card.state, item2.isVirtual);
+            const status1 = status1TranslationKey ? translate(status1TranslationKey) : '';
+            const status2 = status2TranslationKey ? translate(status2TranslationKey) : '';
             return localeCompare(status1, status2) * orderMultiplier;
         }
 

src/libs/CardUtils.ts

@@ -473,20 +473,24 @@ function getTranslationKeyForLimitType(limitType: ValueOf<typeof CONST.EXPENSIFY
 
 /**
  * Maps an Expensify Card `state` to the translation key for its status label shown in the workspace Expensify Card table.
- * `Pending order` and `Shipped` are physical-only states, so a virtual card in one of those states reads as `Active`.
- * States `STATE_DEACTIVATED` (5) and `CLOSED` (6) never reach this table (they are dropped by `filterInactiveCardsForWorkspace`),
- * so the default safely resolves to `Active` (OPEN).
+ * `Pending order` and `Shipped` are physical-only states, so a virtual card in one of those states has no status to show.
+ * Only recognized states map to a label; any other state (bad data, or an unexpected state that slips through
+ * `filterInactiveCardsForWorkspace`) returns `undefined` so the status renders blank rather than defaulting to `Active`.
  */
-function getTranslationKeyForCardStatus(state: ValueOf<typeof CONST.EXPENSIFY_CARD.STATE> | undefined, isVirtual: boolean): TranslationPaths {
+function getTranslationKeyForCardStatus(state: ValueOf<typeof CONST.EXPENSIFY_CARD.STATE> | undefined, isVirtual: boolean): TranslationPaths | undefined {
     switch (state) {
+        // Pending order and Shipped are physical-only states, so a virtual card in one of them has no meaningful status to show.
         case CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED:
-            return isVirtual ? 'workspace.expensifyCard.statusActive' : 'workspace.expensifyCard.statusPendingOrder';
+            return isVirtual ? undefined : 'workspace.expensifyCard.statusPendingOrder';
         case CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED:
-            return isVirtual ? 'workspace.expensifyCard.statusActive' : 'workspace.expensifyCard.statusShipped';
+            return isVirtual ? undefined : 'workspace.expensifyCard.statusShipped';
+        case CONST.EXPENSIFY_CARD.STATE.OPEN:
+            return 'workspace.expensifyCard.statusActive';
         case CONST.EXPENSIFY_CARD.STATE.STATE_SUSPENDED:
             return 'workspace.expensifyCard.statusInactive';
+        // Any other state (e.g. bad data) has no status to show, so it's left blank rather than defaulting to Active.
         default:
-            return 'workspace.expensifyCard.statusActive';
+            return undefined;
     }
 }
 

tests/unit/CardUtilsTest.ts

@@ -2099,13 +2099,13 @@ describe('CardUtils', () => {
             expect(getTranslationKeyForCardStatus(CONST.EXPENSIFY_CARD.STATE.STATE_SUSPENDED, false)).toBe('workspace.expensifyCard.statusInactive');
         });
 
-        it('reports a virtual card in a physical-only state as active', () => {
-            expect(getTranslationKeyForCardStatus(CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED, true)).toBe('workspace.expensifyCard.statusActive');
-            expect(getTranslationKeyForCardStatus(CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED, true)).toBe('workspace.expensifyCard.statusActive');
+        it('reports no status for a virtual card in a physical-only state', () => {
+            expect(getTranslationKeyForCardStatus(CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED, true)).toBeUndefined();
+            expect(getTranslationKeyForCardStatus(CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED, true)).toBeUndefined();
         });
 
-        it('falls back to active for an undefined state', () => {
-            expect(getTranslationKeyForCardStatus(undefined, false)).toBe('workspace.expensifyCard.statusActive');
+        it('reports no status for an undefined or unrecognized state', () => {
+            expect(getTranslationKeyForCardStatus(undefined, false)).toBeUndefined();
         });
     });