[$250] Workspace - Submit button loads infinitely and is not deactivated while offline

[izarutskaya]

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.17-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
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" (http://new.expensify.com/settings/subscription/request-early-cancellation-survey)
6. Disconnect from the internet
7. Select on one of the radio buttons
8. Write something inside the input field with the placeholder "Your response"
9. Click on the submit button

Expected Result:

When going offline the submit button becomes deactivated as this is the normal behavior in other places of the app.

Actual Result:

After going offline the submit button does not get deactivated and is clickable, when clicked it loads infinitely.

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

Bug6552937_1721930175239.4_5841379217341683107.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c0ba7134ea0d5d07
• Upwork Job ID: 1821841069474712472
• Last Price Increase: 2024-08-16
• Automatic offers:
• situchan | Reviewer | 103622533
• Krishna2323 | Contributor | 103622534

Issue Owner

Current Issue Owner: @situchan

[melvin-bot]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2023-10-03T12:00:00Z.

Proposal

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

Workspace - Submit button loads infinitely and is not deactivated while offline

What is the root cause of that problem?

RequestEarlyCancellationPage uses FeedbackSurvey which enabled offline submission by default.

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

Lines 98 to 112 in d7c6bca

	const surveyContent = useMemo(
	() => (
	<FeedbackSurvey
	title={translate('subscription.subscriptionSettings.helpUsImprove')}
	description={translate('subscription.requestEarlyCancellation.subtitle')}
	onSubmit={handleSubmit}
	optionRowStyles={styles.flex1}
	footerText={<Text style={[styles.mb2, styles.mt4]}>{acknowledgementText}</Text>}
	isNoteRequired
	isLoading={isLoading}
	/>
	),
	[acknowledgementText, isLoading, styles.flex1, styles.mb2, styles.mt4, translate],
	);

App/src/components/FeedbackSurvey.tsx

Line 115 in d7c6bca

enabledWhenOffline

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

We should accept a new prop in FeedbackSurvey to disable the submission when offline in RequestEarlyCancellationPage.

• Add a new prop enableSubmissionWhenOffline in FeedbackSurvey, default value will be true.
• Modify the enabledWhenOffline prop to enabledWhenOffline={enableSubmissionWhenOffline}
• From RequestEarlyCancellationPage pass enableSubmissionWhenOffline={false} to FeedbackSurvey.

Note: We only need to disable offline submission for RequestEarlyCancellationPage because it does not handle offline change and FeedbackSurvey is also used in DisableAutoRenewSurveyPage which handles offline submission, so we can remove enabledWhenOffline prop from FeedbackSurvey.

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

• Added more details for the solution and note.

[melvin-bot]

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

[melvin-bot]

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

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-11 17:55:28 UTC.

Proposal

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

After going offline the submit button does not get deactivated and is clickable, when clicked it loads infinitely.

What is the root cause of that problem?

When we click on submit button, we call:

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

Line 30 in 93dc1c9

const handleSubmit = (cancellationReason: FeedbackSurveyOptionID, cancellationNote = '') => {

so the FormAlertWithSubmitButton is appeared with the loading state:

App/src/components/FeedbackSurvey.tsx

Line 117 in 93dc1c9

isLoading={isLoading}

So, as long as the API WRITE_COMMANDS.CANCEL_BILLING_SUBSCRIPTION:

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

Line 32 in 93dc1c9

Subscription.cancelBillingSubscription(cancellationReason, cancellationNote);

is not called successfully, the loading state is still appeared. These cases are:

1. When the API is in progress: If online, displaying a loading state is expected. If offline, displaying a loading state is not expected because it leads to the submit button loads infinitely (our current bug and I call it as bug 1).

2. When the API is called with the error: Currently, the submit button loads infinitely if the API returns the error instead of displaying the error and stop the loading state. We need to fix it as well and I call is as bug 2.

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

After this issue, we will use FormProvider in FeedbackSurvey and I assume that the formID is RequestEarlyCancellationForm.

We can remove the state:

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

Line 26 in 93dc1c9

const [isLoading, setIsLoading] = useState(false);

and

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

Line 107 in 93dc1c9

isLoading={isLoading}

because it is not used anymore when we use FormProvider. Instead, we should add the optimisticData, successData and failureData to:

App/src/libs/actions/Subscription.ts

Line 282 in 5dd0d8b

function cancelBillingSubscription(cancellationReason: FeedbackSurveyOptionID, cancellationNote: string) {

    const optimisticData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: "RequestEarlyCancellationForm",
            value: {isLoading: true},
        },
    ];

    const successData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: "RequestEarlyCancellationForm",
            value: {isLoading: false},
        },
    ];
    const failureData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: "RequestEarlyCancellationForm",
            value: {isLoading: false, errors: {error: 'Error message'}},
        },
    ];

And then in FormProvider component, use it as <FormProvider enabledWhenOffline={false} ... />

What alternative solutions did you explore? (Optional)

Additionally, if after this issue, we still keep using:

App/src/components/FeedbackSurvey.tsx

Lines 108 to 109 in 53eee53

	<FixedFooter>
	{!!footerText && footerText}

and use FormProvider as <FormProvider isSubmitButtonVisible={false}, we can remove:

App/src/components/FeedbackSurvey.tsx

Line 115 in 53eee53

enabledWhenOffline

when use FeedbackSurvey in RequestEarlyCancellationPage page

and the isLoading:

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

Line 107 in 93dc1c9

isLoading={isLoading}

is from RequestEarlyCancellationForm onyx data.

[daledah]

Proposal updated

[daledah]

Proposal updated

[melvin-bot]

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

[situchan]

reviewing

[situchan]

When going offline the submit button becomes deactivated

@miljakljajic can you please confirm the expected result is correct?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@miljakljajic, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Krishna2323]

@miljakljajic, can you please check this comment?

[melvin-bot]

@miljakljajic @situchan this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@miljakljajic, @situchan 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[miljakljajic]

Yes @Krishna2323 that is the expected pattern (see UX patterns here: https://stackoverflowteams.com/c/expensify/questions/12847)

[situchan]

Thanks for confirmation @miljakljajic, though contributors don't have access to SO)
@Krishna2323's proposal looks good to me.
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @situchan 🎉 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]

📣 @Krishna2323 🎉 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 📖

[daledah]

@situchan Can you help check my proposal? We need to fix the case API is failed as well

[daledah]

The selected solution does not work in that case:

Screen.Recording.2024-08-22.at.01.37.19.mov

[Krishna2323]

@situchan, PR ready for review ^

[situchan]

@daledah watching your video, I am not sure what that case is. Can you please share repro step?
Btw, please prioritize this PR

[daledah]

• Reproduce step:

1. Navigate to https://dev.new.expensify.com:8082/

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. Mock the data to simulate failing API call: You can remove this line:
   

   App/src/libs/actions/Subscription.ts

   Line 284 in 5dd0d8b

   cancellationReason,

7. Select on one of the radio buttons

8. Write something inside the input field with the placeholder "Your response"

9. Click on the submit button.

10. Verify the button loads infinitely even if the API is done (Bug)

• Video:

Screen.Recording.2024-08-22.at.17.06.58.mov

[situchan]

@daledah thanks for reporting. It's a separate bug.
What we're fixing here is wrong offline pattern, while what you reported is online case.

[daledah]

Ah got it, thanks @situchan

[Krishna2323]

I believe the automation failed here. The PR was deployed to staging 2 weeks ago, but there is no sign of deployment to production on the PR.

@situchan @aldo-expensify, could you please help confirm if the PR was deployed to production? 🙏🏻

[situchan]

⚠️ We got confirmation on Slack that the Deploy Checklist: New Expensify 2024-08-26 which includes the PR of this issue was only deployed to production on Aug 30 in Deploy Checklist: New Expensify 2024-08-28. More context on why this happened can be found in this Slack thread and this Slack comment.

Given the context above, this issue should be on [HOLD for Payment 2024-09-06] according to Aug 30's production deploy from Deploy Checklist: New Expensify 2024-08-28.

[aldo-expensify]

Sounds good, thanks for finding that @situchan. I understand that we are past the payment date then, correct?

[situchan]

I understand that we are past the payment date then, correct?

correct

[aldo-expensify]

I think this may explain the missing Deployed to production comment: https://expensify.slack.com/archives/C01GTK53T8Q/p1725066007454299

[miljakljajic]

I'll get this paid!

[miljakljajic]

Both contributors paid and contracts ended - closing out