[$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.

[ntdiary]

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

Don't worry, your proposal is clear, I can understand it and expect to complete the review by tomorrow morning (about 10-14 hours from now). 😄

[ntdiary]

I think @mkzie2's proposal is reasonable. We can use FormProvider to polish the RequestEarlyCancellationPage and DisableAutoRenewSurveyPage pages. :)

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[mkzie2]

Thanks for your kind feedback @ntdiary 🙇

[melvin-bot]

📣 @mkzie2 You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[mkzie2]

@stitesExpensify Can you approve workflows for #47223?

[stitesExpensify]

Done

[ntdiary]

PR was deployed to prod on Aug 20. :)

[mkzie2]

@VictoriaExpensify Can you handle payment for this?

[ntdiary]

@VictoriaExpensify Can you handle payment for this?

friendly bump, @VictoriaExpensify. 🙂

[melvin-bot]

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

[VictoriaExpensify]

Hi @mkzie2 - I'm having trouble finding your Upwork profile to send you a job offer. Could you please either apply to the job we've shared here or share your Upwork profile here?

[VictoriaExpensify]

Payment summary:
Contributor: @mkzie2 waiting for them to apply to the Upwork job
Contributor+: @ntdiary owed $250 via NewDot

[mkzie2]

@VictoriaExpensify My profile is https://www.upwork.com/freelancers/~019f73367b03c6d784

[JmillsExpensify]

$250 approved for @ntdiary

[VictoriaExpensify]

Thanks @mkzie2 . Please accept the offer so I can finalise your payment - https://www.upwork.com/nx/wm/offer/103908147

[mkzie2]

@VictoriaExpensify Done, thanks

[VictoriaExpensify]

Payment summary:
Contributor: @mkzie2 paid $250 via Upwork

Thanks for your work on this @mkzie2 and @ntdiary