[Due for payment 2025-02-26] [$250] Company cards - Transaction start date reset when click on it

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.91-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/3809599
Email or phone of affected tester (no customers): applausetester+ccardfeed@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: MacOS Catalina 10.15.7
App Component: Other

Action Performed:

Precondition: workspace with enabled Company cards. Some company cards are added to workspace.

1. Go to WS > Company cards
2. Select card vendor from the dropdown list (e.g. Visa)
3. Click 'Assign card' > choose user
4. Choose a card from the list
5. Click 'Custom start date'
6. Choose date in the past > Save
7. On 'Let’s double check that everything looks right.' page click on 'Transaction start date'

Expected Result:

Displayed date is the date user set on step 5

Actual Result:

Displayed date is the current date

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6727455_1738158936068.card_date.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021885139273750727768
• Upwork Job ID: 1885139273750727768
• Last Price Increase: 2025-01-31

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[github-actions]

⚠️ @parasharrajat Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[parasharrajat]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-29 15:04:21 UTC.

Proposal

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

The Selected date reset to default today value when user go back to edit it from Confirmation page from Assign card flow.

What is the root cause of that problem?

We are not using the stored selected date on the load of this page TransactionStartDateStep step.

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

Line 30 in a06bdbd

const [startDate, setStartDate] = useState(() => format(new Date(), CONST.DATE.FNS_FORMAT_STRING));

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

1. We should start the state startDate with the same saved startdate from assignCard data(key ONYXKEYS.ASSIGN_CARD) if present.

    const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
    const data = assignCard?.data;

    const [startDate, setStartDate] = useState(() => data?.startDate ?? format(new Date(), CONST.DATE.FNS_FORMAT_STRING));

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

Line 30 in a06bdbd

const [startDate, setStartDate] = useState(() => format(new Date(), CONST.DATE.FNS_FORMAT_STRING));

If we want to preserve the same date when we toggle between from the beginning and custom start date

1. We can update handleSelectDateOption to pass the saved startdate as well.

   App/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

   Line 50 in a06bdbd

   setStartDate(format(new Date(), CONST.DATE.FNS_FORMAT_STRING));

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

UI changes but let me know if needed.

What alternative solutions did you explore? (Optional)

None

[github-actions]

⚠️ @parasharrajat Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[twilight2294]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-30 08:00:59 UTC.

Proposal

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

Transaction start date reset when click on it

What is the root cause of that problem?

We always intializing a new date everytime the select transaction start date is rendered. This causes the selected new date to not persist:

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

Line 30 in a06bdbd

const [startDate, setStartDate] = useState(() => format(new Date(), CONST.DATE.FNS_FORMAT_STRING));

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

1. In AssignCardFeedPage, pass assignCard.data to TransactionStartDateStep modal component:
   

   App/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx

   Line 23 in acd7a79

   const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);

   
   

   App/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx

   Lines 71 to 72 in acd7a79

   	case CONST.COMPANY_CARD.STEP.TRANSACTION_START_DATE:
   	return <TransactionStartDateStep />;

<TransactionStartDateStep cardData={assignCard?.data} />

We no not need to fetch the assignCard again in TransactionStartDateStep, we can pass it down as a prop this saves extra useOnyx call.

2. Then in TransactionStartDateStep access this data and assign the date there if it exists in the cardData:

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx

Line 30 in acd7a79

const [startDate, setStartDate] = useState(() => format(new Date(), CONST.DATE.FNS_FORMAT_STRING));

const [startDate, setStartDate] = useState(() => format(cardData?. startDate  ?? new Date(), CONST.DATE.FNS_FORMAT_STRING));

We can also clear the date in ASSIGN_CARD onyx key if the user changes the date type to FROM_BEGINNING

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

I think we can mock a UI test here, we can set the value of ASSIGN_CARD onyx key and then render the transaction date page to check if the value on screen matches the data in ASSIGN_CARD onyx key.

What alternative solutions did you explore? (Optional)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021885139273750727768

[melvin-bot]

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