[$250] Workspace - Selection for cancellation reason resets after page refresh

[izarutskaya]

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.17-4
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): bezawitgebremichael+s1@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Click on settings and navigate to workspace
3. Create a new workspace
4. Go back and navigate to subscription page
5. Click on "Request early cancellation"
6. Select one of the radio buttons
7. Refresh the page

Expected Result:

Selection is retained even after a refresh since this is the behavior in other places of the app

Actual Result:

Selection resets after page is refreshed

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6552954_1721931896995.4_5841379217341683133.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01284e186343122886
• Upwork Job ID: 1821489506725093881
• Last Price Increase: 2024-08-08

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[mkzie2]

Proposal

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

Selection resets after page is refreshed

What is the root cause of that problem?

The feedback survey component doesn't use FormProvider to save the draft value of the form.

The reason and note have the default state as empty then these values are reset every time this component is mounted
https://github.com/Expensify/App/blob/53eee53ac8bfbdfd4d8eeaf16940e3b165483373/src/components/FeedbackSurvey.tsx#L57-58

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

We should use FormProvider in FeedbackSurvey with shouldSaveDraft as true for each InputWrapper. Keep all Text components, only change the reason selector and the note input to InputWrapper.

• For the reason selector, we're using SingleOptionSelector, we can replace this with RadioButtons as we do here or we can config to accept SingleOptionSelector as a valid InputComponent of InputWrapper

App/src/components/FeedbackSurvey.tsx

Line 88 in 53eee53

<SingleOptionSelector

• For the note field, simply use InputWrapper with InputComponent as TextInput
  

  App/src/components/FeedbackSurvey.tsx

  Line 98 in 53eee53

  <TextInput

• This form has a footerText before the submit button so we can keep the component here and pass isSubmitButtonVisible as false to hide the default submit button of FormProvider
  

  App/src/components/FeedbackSurvey.tsx

  Lines 108 to 109 in 53eee53

  	<FixedFooter>
  	{!!footerText && footerText}

• Because FeedbackSurvey form is used in many places, we should accept a new prop formID in this component. Then for each page, we can pass a unique formID to store the draft value individually

App/src/pages/settings/Subscription/RequestEarlyCancellationPage/index.tsx

Line 100 in 53eee53

<FeedbackSurvey

App/src/pages/settings/Subscription/DisableAutoRenewSurveyPage/index.tsx

Line 33 in 53eee53

<FeedbackSurvey

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

📣 @mkzie2! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[VictoriaExpensify]

Agree this is a bug that should be fixed

[melvin-bot]

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

[melvin-bot]

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

[mkzie2]

I can create a branch for this issue with my proposal if we need the implementation details.