[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 [email protected] 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): [email protected]
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)

[mallenexpensify]

@allroundexperts can you review @parasharrajat and @twilight2294 's proposals plz?

[allroundexperts]

Thanks for the proposals everyone.

@parasharrajat's proposal looks good to me. It has the correct RCA and the proposed solution works as well.

@twilight2294 I don't see much difference in your RCA and proposed solution from what @parasharrajat proposed earlier. You're just lifting the usage of useOnyx up a component which in my opinion isn't enough to make your proposal unique.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @marcochavezf, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[twilight2294]

You're just lifting the usage of useOnyx up a component which in my opinion isn't enough to make your proposal unique.

It's that i am passing it to a component instead of calling it in the page which is unique cause it saves the extra call to useOnyx, which would had been ignored if not suggested by my proposal!, but happy to hear what @marcochavezf thinks of both the proposals , thanks for reviewing @allroundexperts

[parasharrajat]

We already using useOnyx inside the component and this component does not seem very heavy so I don't think we need to pre-optimise this case. Also, we already moving away from lifting the state to parent component.

[twilight2294]

Also, we already moving away from lifting the state to parent component.

Oh is it? didn't know that, thanks for the info, any discussion link about this where i can follow up to understand better with this approach @parasharrajat ?

[parasharrajat]

This is not a rule. IMO, keeping state to the component is good. I think we did refactored a few components in the past so I stated.

[twilight2294]

This is not a rule. IMO, keeping state to the component is good. I think we did refactored a few components in the past so I stated.

hmm, okay, lets see what the internal engineer thinks

Cause if we pass down the value then we save that extra useOnyx call, so it does have a positive benefit in this case c.c. @marcochavezf

[marcochavezf]

I think both solutions solve the problem here and I agree we don't need to pre-optimise for this flow, said that I'm leaning towards @allroundexperts decision, assigning @parasharrajat 🚀

[twilight2294]

I think both solutions solve the problem here and I agree we don't need to pre-optimise for this flow, said that I'm leaning towards @allroundexperts decision, assigning @parasharrajat 🚀

Thanks for reviewing @marcochavezf I appreciate the opinion , thanks to @allroundexperts too 😄

[parasharrajat]

Expect the PR by EOD...

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.0-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Preserve start date when user go back to date edit from confirm page #56457

If no regressions arise, payment will be issued on 2025-02-26. 🎊

For reference, here are some details about the assignees on this issue:

• @parasharrajat requires payment through NewDot Manual Requests
• @allroundexperts requires payment through NewDot Manual Requests

[melvin-bot]

@parasharrajat / @allroundexperts @mallenexpensify @parasharrajat / @allroundexperts The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @parasharrajat owed $250 via NewDot
• Reviewer: @allroundexperts owed $250 via NewDot

BugZero Checklist (@mallenexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1885139273750727768/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[melvin-bot]

@mallenexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mallenexpensify]

@allroundexperts can you please complete the BZ checklist so I can get y'all paid? Thx

[allroundexperts]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/48278/files#r1977473705

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• Workspace should have enabled Company cards. Some company cards are added to workspace as well.

Test:

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'

Verify that the displayed date is the date user set on step 6

Do we agree 👍 or 👎

[melvin-bot]

@mallenexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[parasharrajat]

@mallenexpensify Could you please add the summary and close this issue? Thanks.

[mallenexpensify]

Contributor: @parasharrajat due $250 via NewDot
Contributor+: @allroundexperts due $250 via NewDot

Test case

• https://github.com/Expensify/Expensify/issues/477090

Thx!

[parasharrajat]

Payment requested as per #55960 (comment)

[JmillsExpensify]

$250 approved for @parasharrajat