[HOLD for payment 2024-08-07] [$250] Switch to Expensify Classic - Field required error is shown on a field that is populated

[lanitochka17]

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.4-6
Reproducible in staging?: Y
Reproducible in production?: Y
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): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to account settings > Switch to Expensify Classic
2. Select a reason > Next
3. Enter any reason, click Next
4. Click on 'Switch to Expensify Classic'. Notice a new tab is opened for OD
5. Return to the ND tab and click the back button to go to the page where we put the reason
6. Click 'Next'

Expected Result:

No error is shown and proceeds to the next page

Actual Result:

This field is required' error is shown on a field that is populated

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

Add any screenshot/video evidence

Bug6534140_1720191198095.ex_Switch_to_OD_issue.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014958041fe5db1abc
• Upwork Job ID: 1810162821707944573
• Last Price Increase: 2024-07-08
• Automatic offers:
• ishpaul777 | Reviewer | 103171384
• cretadn22 | Contributor | 103171385

Issue Owner

Current Issue Owner: @ishpaul777

[nyomanjyotisa]

Proposal

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

Switch to Expensify Classic - Field required error is shown on a field that is populated

What is the root cause of that problem?

We validate the form by checking the draftResponse

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 112 to 114 in 1f0a462

	if (!draftResponse?.trim()) {
	errors[INPUT_IDS.RESPONSE] = translate('common.error.fieldRequired');
	}

draftResponse will always null after click Switch to Expensify Classic button on ExitSurveyConfirmPage

App/src/libs/actions/ExitSurvey.ts

Lines 41 to 67 in 1f0a462

	const finallyData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.IS_SWITCHING_TO_OLD_DOT,
	value: false,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM_DRAFT,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM_DRAFT,
	value: null,
	},
	];

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

• Solution 1
  Change the finallyData to the following to not remove the form stored value

const finallyData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.SET,
            key: ONYXKEYS.IS_SWITCHING_TO_OLD_DOT,
            value: false,
        }
];

• Solution 2
  Add value={draftResponse} to InputWrapper on ExitSurveyResponsePage to clear the text input after click Switch to Expensify Classic button on ExitSurveyConfirmPage

<InputWrapper
      InputComponent={TextInput}
      inputID={INPUT_IDS.RESPONSE}
      label={translate(`exitSurvey.responsePlaceholder`)}
      accessibilityLabel={translate(`exitSurvey.responsePlaceholder`)}
      role={CONST.ROLE.PRESENTATION}
      autoGrowHeight
      maxAutoGrowHeight={responseInputMaxHeight}
      maxLength={CONST.MAX_COMMENT_LENGTH}
      ref={(el: AnimatedTextInputRef) => {
          if (!el) {
              return;
          }
          updateMultilineInputRange(el);
          inputCallbackRef(el);
      }}
      containerStyles={[baseResponseInputContainerStyle]}
      shouldSaveDraft
      value={draftResponse}
  />

What alternative solutions did you explore? (Optional)

[nyomanjyotisa]

Proposal updated

[melvin-bot]

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

[cretadn22]

Proposal

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

Switch to Expensify Classic - Field required error is shown on a field that is populated

What is the root cause of that problem?

We are utilizing draftResponse from Onyx to validate the form

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 112 to 114 in 1f0a462

	if (!draftResponse?.trim()) {
	errors[INPUT_IDS.RESPONSE] = translate('common.error.fieldRequired');
	}

but we reset EXIT_SURVEY_RESPONSE_FORM_DRAFT when the user clicks the "Switch to Expensify Classic" button

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

Since we clear all data when the user clicks the "Switch to Expensify Classic" button, I recommend dismissing the RHP modal after the user clicks this button.

App/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx

Line 88 in 80b0849

onPress={() => {

                     onPress={() => {
                        ExitSurvey.switchToOldDot().then(() => {
                            if (NativeModules.HybridAppModule) {
                                Navigation.resetToHome();
                                showSplashScreenOnNextStart();
                                NativeModules.HybridAppModule.closeReactNativeApp();
                            } else {
                                Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX);
                            }
                            Navigation.dismissModal()
                        });
                    }}

What alternative solutions did you explore? (Optional)

It's not advisable to utilize draftResponse from Onyx for form validation

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 110 to 114 in 80b0849

	validate={() => {
	const errors: Errors = {};
	if (!draftResponse?.trim()) {
	errors[INPUT_IDS.RESPONSE] = translate('common.error.fieldRequired');
	}

We should validate the form using its current value, similar to how we have implemented validation in other functions within our codebase

                 validate={({response}) => {
                    const errors: Errors = {};
                    if (!response.trim()) {
                        errors[INPUT_IDS.RESPONSE] = translate('common.error.fieldRequired');
                    }
                    return errors;
                }}

Then we can add value props to InputWrapper to reset the form value

Should update the same thing in ExitSurveyReasonPage Component.

[RachCHopkins]

Can confirm - I can replicate this.

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

This field is required' error is shown on a field that is populated

What is the root cause of that problem?

When we switch to OldDot, we clear the response form data

App/src/libs/actions/ExitSurvey.ts

Lines 57 to 67 in b0947e0

	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM_DRAFT,
	value: null,
	},
	];

And then the error appears when we go back and click on the next button again because the draftResponse is empty

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 112 to 114 in b0947e0

	if (!draftResponse?.trim()) {
	errors[INPUT_IDS.RESPONSE] = translate('common.error.fieldRequired');
	}

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

We can do the same way as we do in the reason page by creating a state to control the value of response input and use this current value to validate

1. Create a state to control the value of response input

const [response, setResponse] = useState<string>(draftResponse);
useEffect(() => {
    if (response || !draftResponse) {
        return;
    }
    setResponse(draftResponse);
}, [response, draftResponse]);

App/src/pages/settings/ExitSurvey/ExitSurveyReasonPage.tsx

Line 32 in b0947e0

const [reason, setReason] = useState<ExitReason | null>(draftReason);

2. Add value and OnValueChange prop to the InputWrapper

value={response}
onValueChange={setResponse}
valueType="string"

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 124 in b0947e0

<InputWrapper

3. Pass response state here when we submit the form here instead of draftResponse

const submitForm = useCallback(() => {
    ExitSurvey.saveResponse(response);
    Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_CONFIRM.getRoute(ROUTES.SETTINGS_EXIT_SURVEY_RESPONSE.route));
}, [response]);

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 65 in b0947e0

ExitSurvey.saveResponse(draftResponse);

What alternative solutions did you explore? (Optional)

When we validate or submit the form we can use values param that is provided by FormProvider

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 110 in b0947e0

validate={() => {

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 64 in b0947e0

const submitForm = useCallback(() => {

[ishpaul777]

personally @cretadn22's proposal to dismissModal after redirecting to olddot sounds good to me, but if we want to go with the expected behaviour in OP, Alternative solution from @cretadn22 looks like correct pattern 👍

i'll let assign engineer make the decision on expected behaviour, in any case @cretadn22 Proposal LGTM!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

@youssef-lr, @RachCHopkins, @ishpaul777 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[nkdengineer]

@youssef-lr Can you confirm the expected behavior here?

1. Close the RHP page after switching
2. Still stay at the exit survey page and fix the bug in OP.

[ishpaul777]

not overdue, pending final review

[ishpaul777]

gentle bump @youssef-lr

[youssef-lr]

I think we can just close the RHP. I don't see why it should remain open and then trigger another survey response (if we fix the bug)

[ishpaul777]

Thanks for clarifying @youssef-lr, Can you please assingn @cretadn22 as they proposed this in their solution #44926 (comment)

[melvin-bot]

📣 @ishpaul777 🎉 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

[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.0.14-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• dismiss modal after going to classic page #45701

If no regressions arise, payment will be issued on 2024-08-07. 🎊

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

• @ishpaul777 requires payment automatic offer (Reviewer)
• @cretadn22 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [@ishpaul777] 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:
• [@ishpaul777] A discussion in #expensify-bugs 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:
• [@ishpaul777] Determine if we should create a regression test for this bug.
• [@ishpaul777] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@RachCHopkins] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[cretadn22]

@youssef-lr @RachCHopkins Could someone assist with processing the payment?

[ishpaul777]

Not overdue, This is only pending payment and checklist (i'll fill out today)

[melvin-bot]

@youssef-lr, @RachCHopkins, @ishpaul777, @cretadn22 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ishpaul777]

This is ready for payment : ) @RachCHopkins

[melvin-bot]

@youssef-lr, @RachCHopkins, @ishpaul777, @cretadn22 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ishpaul777]

This is ready for payment

cc @youssef-lr @RachCHopkins

[RachCHopkins]

@ishpaul777 sorry for the delay - I'm just waiting on that checklist above.

[ishpaul777]

ahh I missed that.. I'll fill this out today

[ishpaul777]

[@ishpaul777] The PR that introduced the bug has been identified. Link to the PR: #34925
[@ishpaul777] 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/34925/files#r1727567322
[@ishpaul777] A discussion in #expensify-bugs 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: not required
[@ishpaul777] Determine if we should create a regression test for this bug. no
[@ishpaul777] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. Not required

[cretadn22]

@RachCHopkins This is ready for payment

[ishpaul777]

Not overdue, Awaiting payment

[RachCHopkins]

Payment Summary:

Contributor: @cretadn22 paid $250 via Upwork
Contributor+: @ishpaul777 paid $250 via Upwork
Upwork job here

[RachCHopkins]

Contributor has been paid, the contract has been completed, and the Upwork post has been closed.