Merge pull request #53058 from mkzie2/mkzie2-issue/52358

Add posted date to Expensify card transaction
Expensify · Nov 28, 2024 · 089e8f3 · 089e8f3
2 parents aba4d32 + 4b86262
commit 089e8f3
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 1 deletion.
diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -124,6 +124,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
         tag: transactionTag,
         originalAmount: transactionOriginalAmount,
         originalCurrency: transactionOriginalCurrency,
+        postedDate: transactionPostedDate,
     } = useMemo<Partial<TransactionDetails>>(() => ReportUtils.getTransactionDetails(transaction) ?? {}, [transaction]);
     const isEmptyMerchant = transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
     const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
@@ -199,6 +200,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
     );
 
     let amountDescription = `${translate('iou.amount')}`;
+    let dateDescription = `${translate('common.date')}`;
 
     const hasRoute = TransactionUtils.hasRoute(transactionBackup ?? transaction, isDistanceRequest);
     const {unit, rate} = DistanceRequestUtils.getRate({transaction, policy});
@@ -234,6 +236,9 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
     );
 
     if (isCardTransaction) {
+        if (transactionPostedDate) {
+            dateDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.posted')} ${transactionPostedDate}`;
+        }
         if (formattedOriginalAmount) {
             amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.original')} ${formattedOriginalAmount}`;
         }
@@ -591,7 +596,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
                 )}
                 <OfflineWithFeedback pendingAction={getPendingFieldAction('created')}>
                     <MenuItemWithTopDescription
-                        description={translate('common.date')}
+                        description={dateDescription}
                         title={transactionDate}
                         interactive={canEditDate}
                         shouldShowRightIcon={canEditDate}

diff --git a/src/libs/DebugUtils.ts b/src/libs/DebugUtils.ts
@@ -923,6 +923,7 @@ function validateTransactionDraftProperty(key: keyof Transaction, value: string)
             return validateString(value);
         case 'created':
         case 'modifiedCreated':
+        case 'posted':
             return validateDate(value);
         case 'isLoading':
         case 'billable':
@@ -1046,6 +1047,7 @@ function validateTransactionDraftProperty(key: keyof Transaction, value: string)
                     cardName: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                     cardNumber: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                     managedCard: CONST.RED_BRICK_ROAD_PENDING_ACTION,
+                    posted: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                 },
                 'string',
             );

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
@@ -436,6 +436,7 @@ type TransactionDetails = {
     cardID: number;
     originalAmount: number;
     originalCurrency: string;
+    postedDate: string;
 };
 
 type OptimisticIOUReport = Pick<
@@ -3114,6 +3115,7 @@ function getTransactionDetails(transaction: OnyxInputOrEntry<Transaction>, creat
         cardID: TransactionUtils.getCardID(transaction),
         originalAmount: TransactionUtils.getOriginalAmount(transaction),
         originalCurrency: TransactionUtils.getOriginalCurrency(transaction),
+        postedDate: TransactionUtils.getFormattedPostedDate(transaction),
     };
 }
 

diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
@@ -1,3 +1,4 @@
+import {parse} from 'date-fns';
 import lodashDeepClone from 'lodash/cloneDeep';
 import lodashHas from 'lodash/has';
 import lodashIsEqual from 'lodash/isEqual';
@@ -469,6 +470,22 @@ function getTaxCode(transaction: OnyxInputOrEntry<Transaction>): string {
     return transaction?.taxCode ?? '';
 }
 
+/**
+ * Return the posted date from the transaction.
+ */
+function getPostedDate(transaction: OnyxInputOrEntry<Transaction>): string {
+    return transaction?.posted ?? '';
+}
+
+/**
+ * Return the formated posted date from the transaction.
+ */
+function getFormattedPostedDate(transaction: OnyxInputOrEntry<Transaction>, dateFormat: string = CONST.DATE.FNS_FORMAT_STRING): string {
+    const postedDate = getPostedDate(transaction);
+    const parsedDate = parse(postedDate, 'yyyyMMdd', new Date());
+    return DateUtils.formatWithUTCTimeZone(parsedDate.toDateString(), dateFormat);
+}
+
 /**
  * Return the currency field from the transaction, return the modifiedCurrency if present.
  */
@@ -1309,6 +1326,7 @@ export {
     getCardName,
     hasReceiptSource,
     shouldShowAttendees,
+    getFormattedPostedDate,
 };
 
 export type {TransactionChanges};
diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts
@@ -458,6 +458,9 @@ type Transaction = OnyxCommon.OnyxValueWithOfflineFeedback<
 
         /** Whether the transaction is linked to a managed card */
         managedCard?: boolean;
+
+        /** The card transaction's posted date */
+        posted?: string;
     },
     keyof Comment | keyof TransactionCustomUnit | 'attendees'
 >;

diff --git a/tests/unit/TransactionUtilsTest.ts b/tests/unit/TransactionUtilsTest.ts
@@ -63,4 +63,33 @@ describe('TransactionUtils', () => {
             });
         });
     });
+    describe('getPostedDate', () => {
+        describe('when posted date is undefined', () => {
+            const transaction = generateTransaction({
+                posted: undefined,
+            });
+
+            it('returns an empty string', () => {
+                const expectedResult = '';
+
+                const result = TransactionUtils.getFormattedPostedDate(transaction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
+        describe('when posted date has value with format YYYYMMdd', () => {
+            const transaction = generateTransaction({
+                posted: '20241125',
+            });
+
+            it('returns the posted date with the correct format YYYY-MM-dd', () => {
+                const expectedResult = '2024-11-25';
+
+                const result = TransactionUtils.getFormattedPostedDate(transaction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+    });
 });