[$250] Add posted date to Expensify Card transactions

[JmillsExpensify]

Problem: Credit card transactions are unique because it's possible to buy something one day, but then the transaction isn't processed by the issuing bank until a couple of days later. Both dates are important, because the receipt will always have the transaction date, yet the accountant (and accounting system) need the posted date.

Solution: Let's add the posted date to all Expensify Card transactions. What this means in practice is that:

• The transaction date will continue to show.
• We'll add a "dot separator" pattern for Date label (just like Amount; see example below).
• This will take the form Date * Posted %postedDate%.

I've annotated the mockup below so that this is hopefully all clear.

Other notes for emphasis:

• The transaction date and the posted date only apply to Expensify Card transactions, so please make sure that's addressed in your proposal.
• If there is no posted date yet, then * Posted %postedDate% will not show.

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ikevin127 (External)

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-12 09:01:16 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add posted date to Expensify Card transactions

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

1. Create a variable for date description as we did for amountDescription here

let dateDescription = translate('common.date')

2. When the transaction is the card transaction, get the posted date from transaction data, if it exists add posted data to the dateDescription

if (postedDate) {
    dateDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.posted')} ${postedDate}`
}

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 235 in e3632a9

if (isCardTransaction) {

3. Update the description prop here to dateDescription variable

description={dateDescription} 

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 593 in e3632a9

description={translate('common.date')}

What alternative solutions did you explore? (Optional)

[mkzie2]

Updated proposal.

• Add code change

[ikevin127]

@mkzie2's proposal makes sense to me. The solution follows the Amount field's model for adding additional data which is what we're looking for based on the issue's emphasis notes. Other details can be worked on during the PR phase. The solution result would look like this:

Spoiler

🎀👀🎀 C+ reviewed

@mountiny Is the BE part for this NewFeature completed ? I wasn't able to find any variable like / related to postedDate in the FE transaction types - therefore we might have to wait for BE to return the variable before moving on with the FE implementation for this issue.

[melvin-bot]

Current assignee @mountiny is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[mountiny]

Thanks! no the be is not completed. I fell for the trap from @JmillsExpensify called External issue.

I will have to whip up a PR for this

[ikevin127]

Another thing I noticed when reviewing is that we have this check:

App/src/libs/TransactionUtils/index.ts

Lines 637 to 642 in 7256ad6

	/**
	* Determine whether a transaction is made with a card (Expensify or Company Card).
	*/
	function isCardTransaction(transaction: OnyxEntry<Transaction>): boolean {
	return !!transaction?.managedCard;
	}

based on which we will show the Posted YYYY-MM-DD label if postedDate exists (based on proposed solution):

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 235 to 242 in 7256ad6

	if (isCardTransaction) {
	if (formattedOriginalAmount) {
	amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.original')} ${formattedOriginalAmount}`;
	}
	if (isCancelled) {
	amountDescription += ` ${CONST.DOT_SEPARATOR} ${translate('iou.canceled')}`;
	}
	} else {

but because of the !!transaction?.managedCard check which determines isCardTransaction, if managedCard (boolean) is false or doesn't exist in the transaction object -> isCardTransaction will be false -> label won't show.

@mountiny Is managedCard always populated and true on card transactions ? I wanted to bring up with you to ensure that we're tight here from the BE side, otherwise we could have a potential regression post-merge.

[mkzie2]

@mountiny Please let me know once the backend PR is done and let me know what data in a transaction that I can use to get the postedDate

[mountiny]

@mkzie2 will let you know

[mountiny]

@ikevin127 I assume managedCard is for all card transactions give the logic you showed but I will check once I will work on the PR