[HOLD for Payment 2024-08-26] [$250] Subscription - Subscription page changes to not here page while signing out

[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.16-0
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
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Account has at least one workspace (so Subscription tab will show up)

1. Go to staging.new.expensify.com
2. Go to Account settings > Subscription
3. Sign out while on Subscription screen

Expected Result:

Subscription page will not change to not here page while signing out

Actual Result:

Subscription page changes to not here page while signing out

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

Bug6560189_1722602987569.20240802_204543.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010e94c4a46033756a
• Upwork Job ID: 1820555883332358994
• Last Price Increase: 2024-08-05
• Automatic offers:
• cretadn22 | Contributor | 103422107

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

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

[lanitochka17]

@garrettmknight FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[cretadn22]

Proposal

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

Subscription page changes to not here page while signing out

What is the root cause of that problem?

When signing out, the Onyx database is cleared.

App/src/libs/actions/SignInRedirect.ts

Line 31 in 459759d

return Onyx.clear(keysToPreserve).then(() => {

When Onyx is empty, two processes will be activated.

Process 1: The subscription page will be not found page because session and policy fields are empty

App/src/hooks/useSubscriptionPlan.ts

Lines 21 to 23 in 459759d

	if (isEmptyObject(ownerPolicies)) {
	return null;
	}

Process 2: The App will navigate to the login page because isAuthenticated is false

App/src/Expensify.tsx

Line 127 in 459759d

const isAuthenticated = useMemo(() => !!(session?.authToken ?? null), [session]);

The issue is that process 2 is triggered after process 1. This happens because process 2 uses withOnyx to get data from Onyx database, while process 1 uses useOnyx to get data

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

In Expensify.tsx, we need to use useOnyx instead of withOnyx to retrieve data from Onyx

What alternative solutions did you explore? (Optional)

[Tony-MK]

Proposal

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

Subscription - Subscription page changes to not here page while signing out

What is the root cause of that problem?

The root cause of the problem is that the session is deleted from the Onyx when signing out hence, the ownerPolicies becomes empty.

App/src/hooks/useSubscriptionPlan.ts

Lines 21 to 23 in 862d4aa

	if (isEmptyObject(ownerPolicies)) {
	return null;
	}

Therefore, the useSubscriptionPlan hook will be called again and a null subscriptionPlan to render the NotFoundPage.

App/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

Lines 30 to 32 in 862d4aa

	if (!subscriptionPlan) {
	return <NotFoundPage />;
	}

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

Let's give the subscriptionPlan a state so the SubscriptionSettingsPage will not render NotFoundPage on its second attempt when signing out.

const subscriptionPlan = useState(useSubscriptionPlan());

Screen.Recording.2024-08-04.at.18.37.25.mov

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[parasharrajat]

@cretadn22 Could you please clarify the solution on how it solves the issue?

[cretadn22]

@parasharrajat

Normally, the code in the Expensify component is executed first because it is the parent component. However, since Expensify Component uses withOnyx, it returns outdated values on the first rendering. In contrast, the subscription page uses useOnyx, which provides the correct value on the first render. This discrepancy causes the NotFoundPage to appear until withOnyx in Expensify returns the correct value during the second render.

Therefore, if we use useOnyx in the Expensify component, the correct value will be used on the first rendering, allowing the app to navigate directly to the LogIn page before reaching the subscription page.

[parasharrajat]

I see. Let's do it. Anyways, WithOnyx is deprecated so it makes sense to migrate, and if that solves the issue, that is a plus. Thanks for the explanation. Only thing that I see is that WithOnyxc will hold rendering the component until data is ready so we will have to make sure useOnyx is not causing any issues due to that.

@cretadn22's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

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

[cretadn22]

@garrettmknight This should be on [HOLD for Payment 2024-08-26] according to the production deploy from #46932 (comment)

[garrettmknight]

Payment Summary:

• Contributor: @cretadn22 $250 paid via Upwork
• Reviewer: @parasharrajat $250

[garrettmknight]

@parasharrajat please complete the checklist and submit for payment

[parasharrajat]

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:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: I could not find the PR that caused this issue. It should have started to show up when we added useOnyx Hook.
• [@parasharrajat] 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: NA
• [@parasharrajat] 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: NA
• [@parasharrajat] Determine if we should create a regression test for this bug. Yes
• [@parasharrajat] 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.

Regression Test Steps

1. Go to Account settings > Subscription
2. Sign out while on Subscription screen
3. Subscription page will not change to not here page while signing out

Do you agree 👍 or 👎 ?

[garrettmknight]

Closing - @parasharrajat request payment when you're ready.

[parasharrajat]

Payment requested as per #46735 (comment)

[JmillsExpensify]

$250 approved for @parasharrajat