search

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
3.58k stars 2.92k forks source link

[HOLD for payment 2024-11-26] [$250] Company cards - Error appears after tapping the explanation link for the first time #52144

Closed lanitochka17 closed 3 days ago

lanitochka17 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.58-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team

Issue found when executing PR https://github.com/Expensify/App/pull/51575

Action Performed:

  1. Open New Expensify staging hybrid app.
  2. Create a workspace and enable Company cards feature.
  3. Go to Company cards page.
  4. Tap Add company cards button to start add feed flow.
  5. Select Amex provider (or Visa/Mastercard providers in Others). Tap Next 3 times.
  6. On the details screen, below input field tap the explanation link.

Expected Result:

After tapping the explanation link under the input field user is redirected to the relevant web page

Actual Result:

Error appears under the input field "This field is required" after tapping the explanation link for the first time. User is successfully redirected to the relevant page after tapping the link second time

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/22c6421c-d96b-425b-b40f-02158eedcf4e

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021856152080745182402
  • Upwork Job ID: 1856152080745182402
  • Last Price Increase: 2024-11-12
  • Automatic offers:
    • DylanDylann | Reviewer | 104860234
Issue OwnerCurrent Issue Owner: @
Issue OwnerCurrent Issue Owner: @trjExpensify
melvin-bot[bot] commented 3 weeks ago

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

bernhardoj commented 3 weeks ago

Edited by proposal-police: This proposal was edited at 2024-11-07 03:52:51 UTC.

Proposal

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

Validation error appears when pressing the link in company card step.

What is the root cause of that problem?

The validation shows every time the input is blurred. When we press the text link, the text input blurs. This doesn't happen in web because by default, we preventDefault it. https://github.com/Expensify/App/blob/afa7b33107747d0242acfd01d032d5339be390d9/src/components/TextLink.tsx#L35

In native, pressing a button normally doesn't blur the active input. But in our case, the page is wrapped with a ScrollView with no keyboardShouldPersistTaps. So, if we tap inside the scroll view, then it will close the keyboard. https://github.com/Expensify/App/blob/afa7b33107747d0242acfd01d032d5339be390d9/src/pages/workspace/companyCards/addNew/DetailsStep.tsx#L175-L208

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

We can add keyboardShouldPersistTaps='handled' to the ScrollView.

OR

We can just remove the ScrollView and move the Text inside FormProvider because FormProvider already uses a ScrollView which already has keyboardShouldPersistTaps="handled". https://github.com/Expensify/App/blob/afa7b33107747d0242acfd01d032d5339be390d9/src/pages/workspace/companyCards/addNew/DetailsStep.tsx#L175-L190 https://github.com/Expensify/App/blob/afa7b33107747d0242acfd01d032d5339be390d9/src/components/Form/FormWrapper.tsx#L163-L177

(we need to remove the padding from text because FormProvider already has the horizontal margin.)

OR

Don't use the ScrollView (remove it).

trjExpensify commented 2 weeks ago

Let's get eyes from @mountiny @allgandalf @DylanDylann on the approach here. What technical approach do we take on native for other links in forms, like a terms link in a RHP form?

mountiny commented 2 weeks ago

Nice one QA. @allgandalf @DylanDylann which one of you wants to take this one and review the proposals so its in line with how we handle it elsewhere in the app?

DylanDylann commented 2 weeks ago

I can help on this issue

trjExpensify commented 2 weeks ago

Assigned! Sending External then.

melvin-bot[bot] commented 2 weeks ago

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

melvin-bot[bot] commented 2 weeks ago

Current assignee @DylanDylann is eligible for the External assigner, not assigning anyone new.

DylanDylann commented 2 weeks ago

I can't reproduce this bug. @bernhardoj Could you reproduce this bug?

https://github.com/user-attachments/assets/f24297ab-d355-4550-94a6-152658c79d6e

allgandalf commented 2 weeks ago

I was able to reproduce this, should i take over @DylanDylann ?

DylanDylann commented 2 weeks ago

~Ahh I missed this step~

Select Amex provider (or Visa/Mastercard providers in Others). Tap Next 3 times.

We need enable the keyboard on simulator to reproduce this bug

DylanDylann commented 2 weeks ago

@bernhardoj's proposal looks good to me. I prefer the second solution

🎀 👀 🎀 C+ Reviewed

melvin-bot[bot] commented 2 weeks ago

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

melvin-bot[bot] commented 2 weeks ago

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

bernhardoj commented 2 weeks ago

PR is ready

cc: @DylanDylann

melvin-bot[bot] commented 1 week ago

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

melvin-bot[bot] commented 1 week ago

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.63-3 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 2024-11-26. :confetti_ball:

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

melvin-bot[bot] commented 1 week ago

@DylanDylann @trjExpensify @DylanDylann 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]

mountiny commented 1 week ago

$250 to @bernhardoj and $125 to @DylanDylann

For Dylan the payment is less as he is working on this as a project and we agreed for lower base price

trjExpensify commented 4 days ago

Cool, sounds good! Payment summary as follows:

@DylanDylann can we get the checklist, please? I believe regression tests will be added centrally for the project, but it would be good to identify where this error was missed to give the author(s) a heads up.

DylanDylann commented 4 days ago

BugZero Checklist:

Bug classification Source of bug: - [ ] 1a. Result of the original design (eg. a case wasn't considered) - [x] 1b. Mistake during implementation - [ ] 1c. Backend bug - [ ] 1z. Other: Where bug was reported: - [x] 2a. Reported on production - [ ] 2b. Reported on staging (deploy blocker) - [ ] 2c. Reported on both staging and production - [ ] 2d. Reported on a PR - [ ] 2z. Other: Who reported the bug: - [ ] 3a. Expensify user - [x] 3b. Expensify employee - [ ] 3c. Contributor - [ ] 3d. QA - [ ] 3z. Other:

Regression Test Proposal

Test:

  1. Open any workspace and enable Company cards feature
  2. Go to Company cards page
  3. Tap Add company cards button to start add feed flow
  4. Select Amex provider. Tap Next 3 times
  5. On the details screen, below the input field tap the explanation link
  6. Verify no error and you are redirected to help web page

Do we agree 👍 or 👎

bernhardoj commented 4 days ago

Requested in ND.

JmillsExpensify commented 3 days ago

$250 approved for @bernhardoj

trjExpensify commented 3 days ago

Great, thanks. Closing!