Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
4.03k stars 3.03k forks source link

[Due for payment 2025-02-19] [$250] Copilot - No countdown and code requested message on magic code page when changing access level #55718

Open vincdargento opened 3 weeks ago

vincdargento commented 3 weeks ago

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.89-2 Reproducible in staging?: Yes Reproducible in production?: Yes If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): applausetester+100106kh@applause.expensifail.com Issue reported by: Applause Internal Team Device used: Mac 15.0 / Chrome App Component: User Settings

Action Performed:

  1. Go to staging.new.expensify.com
  2. Go to Account settings > Security.
  3. Click Add copilot.
  4. Select a user, select access level and proceed to confirmation page.
  5. Click Add copilot.
  6. On magic code page, there is a countdown and "Code requested. Please check your device." message.
  7. Enter correct magic code.
  8. Click on the same member under "These members can access your account".
  9. Click Change access level.
  10. Select a different access level.

Expected Result:

On magic code page when changing access level for existing copilot, it should display a countdown and "Code requested. Please check your device." message.

Actual Result:

On magic code page when changing access level for existing copilot, it does not display a countdown and "Code requested. Please check your device." message, which is not consistent with the magic code page in Step 6.

Workaround:

Unknown

Platforms:

Screenshots/Videos

https://github.com/user-attachments/assets/a29c7f9e-9f59-4d32-82df-f3a4526fb96c

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021884532777502086335
  • Upwork Job ID: 1884532777502086335
  • Last Price Increase: 2025-01-29
  • Automatic offers:
    • cretadn22 | Contributor | 105926705
Issue OwnerCurrent Issue Owner: @JmillsExpensify
melvin-bot[bot] commented 3 weeks ago

Triggered auto assignment to @JmillsExpensify (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.

etCoderDysto commented 3 weeks ago

🚨 Edited by proposal-police: This proposal was edited at 2025-01-24 13:48:38 UTC.

Proposal

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

Copilot - No countdown and code requested message on magic code page when changing access level

What is the root cause of that problem?

We have not implemented the timer feature in BaseValidateCodeForm.tsx as we are doing here

https://github.com/Expensify/App/blob/95cc6482377130f923bf9970d81a0dcf5f1e2774/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/ValidateCodeForm/BaseValidateCodeForm.tsx#L169-L172

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

  1. Create a state to store time and set it to 30 second https://github.com/Expensify/App/blob/95cc6482377130f923bf9970d81a0dcf5f1e2774/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx#L103
  2. Countdown the timer using setTimeOut https://github.com/Expensify/App/blob/95cc6482377130f923bf9970d81a0dcf5f1e2774/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx#L159-L168
  3. Show timer when time > 0 and user is not offline (shouldShowTimer) https://github.com/Expensify/App/blob/95cc6482377130f923bf9970d81a0dcf5f1e2774/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx#L224
  4. Show resend link when shouldShowTimer is false

https://github.com/Expensify/App/blob/95cc6482377130f923bf9970d81a0dcf5f1e2774/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx#L238-L240

  1. We should reset the timer when requesting a new magic code
    setTimeRemaining(CONST.REQUEST_CODE_DELAY);

    https://github.com/Expensify/App/blob/95cc6482377130f923bf9970d81a0dcf5f1e2774/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/ValidateCodeForm/BaseValidateCodeForm.tsx#L114-L118

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

    N/A as it is a UI change

    What alternative solutions did you explore? (Optional)

We can create hook that returns remainingTime and a function that resets the timer following the same logic as the existing timer implementation.

const {remainingTime, resetTimer} = useRequestTimeout(); 

And use remainingTime to decide if should display timer, and call resetTimer when requesting a new code to reset the time.

Tests

cretadn22 commented 3 weeks ago

🚨 Edited by proposal-police: This proposal was edited at 2025-01-24 17:25:44 UTC.

Proposal

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

There’s no countdown and "Code Requested" message displayed on the Magic Code page when changing the access level.

What is the root cause of that problem?

In UpdateDelegateMagicCodePage Component

https://github.com/Expensify/App/blob/264728f1b086117b9cabfd4728ff30b8afdfc520/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx#L22

We are using an independent ValidateCodeForm (src/pages/settings/Security/AddDelegate/UpdateDelegateRole/ValidateCodeForm/index.tsx), but the code to display the countdown timer has not been implemented

https://github.com/Expensify/App/blob/264728f1b086117b9cabfd4728ff30b8afdfc520/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage.tsx#L61

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

Note: In all other instances, we consistently use the ValidateCodeActionModal.

Therefore, I suggest that in the UpdateDelegateMagicCodePage component, we also use ValidateCodeActionModal, as we’ve done in other places like DelegateMagicCodeModal, etc.

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

I believe this section is unnecessary

What alternative solutions did you explore? (Optional)

No

github-actions[bot] commented 3 weeks ago

⚠️ @cretadn22 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).

melvin-bot[bot] commented 2 weeks ago

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

melvin-bot[bot] commented 2 weeks ago

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

JmillsExpensify commented 2 weeks ago

Opened up to the community.

melvin-bot[bot] commented 2 weeks ago

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

jayeshmangwani commented 2 weeks ago

Thank you for the proposals above. I agree with @cretadn22 's Proposal to use the ValidateCodeActionModal for consistency with other pages that use a timer for the magic code. Let's go with their proposal.

πŸŽ€ πŸ‘€ πŸŽ€ C+ reviewed

melvin-bot[bot] commented 2 weeks ago

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

melvin-bot[bot] commented 2 weeks ago

πŸ“£ @cretadn22 πŸŽ‰ An offer has been automatically sent to your Upwork account for the Contributor role πŸŽ‰ Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review πŸ§‘β€πŸ’» Keep in mind: Code of Conduct | Contributing πŸ“–

melvin-bot[bot] commented 1 week ago

@JmillsExpensify, @jayeshmangwani, @aldo-expensify, @cretadn22 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

jayeshmangwani commented 1 week ago

We're waiting on @cretadn22 to raise the PR.

cretadn22 commented 1 week ago

I'm currently working on this

cretadn22 commented 1 week ago

@jayeshmangwani Take a look at this video. When an incorrect magic code is entered, the optimistic value updates initially, but once the backend returns a failure, the old value is reverted, causing a flickering effect. Since updating the delegate role requires a correct code that can only be verified by the backend, we shouldn't use optimistic data for this action. Instead, we could consider displaying a loading spinner while waiting for the API response. This might be out of scope for now, but it would be a valuable improvement.

https://github.com/user-attachments/assets/ef685443-7b94-4702-8bf1-252cf65c7cc6

jayeshmangwani commented 1 week ago

Thanks for the input, @cretadn22 , I checked a few cases where we use the magic input, and it flickers in the current production version. So, I think we can include this change in this PR to improve the visual effect.

dylanexpensify commented 1 week ago

@cretadn22 @jayeshmangwani agree with adding that in scope if easy. @cretadn22 when can we expect PR for review?

cretadn22 commented 1 week ago

Almost done, @jayeshmangwani Please start reviewing. On the other way, I will update this additional point later today

cretadn22 commented 1 week ago

I get this error because of many API calls. It block me from completing this PR

Image
cretadn22 commented 1 week ago

@jayeshmangwani All code changes are complete. Please proceed with the review. I will run another test and upload videos once the API is working again.

jayeshmangwani commented 1 week ago

@cretadn22 Maybe you can try with a new account, or you could wait an hour before calling this API again.

jayeshmangwani commented 1 week ago

Please proceed with the review

Yes sure, I'll review PR

melvin-bot[bot] commented 4 days ago

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

melvin-bot[bot] commented 4 days ago

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

If no regressions arise, payment will be issued on 2025-02-19. :confetti_ball:

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

melvin-bot[bot] commented 4 days ago

@jayeshmangwani @JmillsExpensify @jayeshmangwani 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]

jayeshmangwani commented 19 hours ago

BugZero Checklist:

Bug classification Source of bug: - [x] 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: - [x] 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 - [x] 3d. QA - [ ] 3z. Other:

Regression Test Proposal

  1. Go to Account settings > Security.
  2. Click Add Copilot.
  3. Select a user, choose an access level, and proceed to the confirmation page.
  4. Click Add Copilot again.
  5. Enter the correct magic code.
  6. Click on the same member under "These members can access your account."
  7. Click Change access level.
  8. Select a different access level.
  9. Verify that, on the magic code page, when changing the access level for an existing Copilot, a countdown and the message Code requested. Please check your device should be displayed.

Do we agree πŸ‘ or πŸ‘Ž