[HOLD for payment 2024-12-11] [$250] Workspace- Upgrade animation freezes when clicking on "View your subscription" and returning

[IuliiaHerets]

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.57-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Log in with a new Gmail account
2. Create a workspace
3. Navigate to Workspace settings - More features
4. Enable "Report fields"
5. Click on "Upgrade"
6. Click on "View your subscription"
7. Click on the browsers "back" button

Expected Result:

Upgrade animation should be playing or the RHP should disappear.

Actual Result:

Upgrade animation freezes when clicking on "View your subscription" and returning to the page.

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6654583_1730744475319.bandicam_2024-11-04_19-14-56-924.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854048484565910103
• Upwork Job ID: 1854048484565910103
• Last Price Increase: 2024-11-13
• Automatic offers:
• abzokhattab | Contributor | 104959985

Issue Owner

Current Issue Owner: @VictoriaExpensify

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

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-11-04 18:45:02 UTC.

Proposal

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

Upgrade animation freezes when clicking on "View your subscription" and returning

What is the root cause of that problem?

We are not dismissing the modal when user press on viewSubscription here

App/src/pages/workspace/upgrade/UpgradeConfirmation.tsx

Line 26 in cff2373

onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}

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

Let's also add Navigation.dismissModal(); before navigating.

App/src/pages/workspace/upgrade/UpgradeConfirmation.tsx

Line 26 in cff2373

onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}

    onPress={() => {
                            Navigation.dismissModal();
                            Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION);
                        }}

This will remove the upgrade modal from stack.

What alternative solutions did you explore? (Optional)

We can also use goBack here before navigating

App/src/pages/workspace/upgrade/UpgradeConfirmation.tsx

Line 26 in cff2373

onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}

Alternative 2
If we don't want to dismiss the modal. We can also pass CONST.NAVIGATION.TYPE.UP as 2nd param here

App/src/pages/workspace/upgrade/UpgradeConfirmation.tsx

Line 26 in cff2373

onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-11-04 18:52:57 UTC.

Proposal

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

Upgrade animation freezes when clicking on "View your subscription" and returning

What is the root cause of that problem?

the lottie animation freezes on navigating away from the upgrade workspace page... however when the lottie gains focus again it doesn't play the animation again here

App/src/components/Lottie/index.tsx

Lines 59 to 68 in c2ebaad

	useEffect(() => {
	if (!browser || !navigationContainerRef || !navigator) {
	return;
	}
	const unsubscribeNavigationFocus = navigator.addListener('focus', () => {
	setHasNavigatedAway(false);
	});
	return unsubscribeNavigationFocus;
	}, [browser, navigationContainerRef, navigator]);

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

we should modify the unsubscribeNavigationFocus inside the useEffect above to play the animation on focusing

        const unsubscribeNavigationFocus = navigator.addListener('focus', () => {
            setHasNavigatedAway(false);
            animationRef.current?.play();
        });

or we can add the play line here if the hasNavigatedAway is false:

    useEffect(() => {
        if (!animationRef.current) {
            return;
        }
        if (!hasNavigatedAway) {
            animationRef.current?.play();
        } 
            animationRef?.current?.pause();
        
    }, [hasNavigatedAway]);

What alternative solutions did you explore? (Optional)

also we can use animationRef.current?.resume instead of the play animationRef.current?.play so that the animation resumes from where it stopped before clicking on the view subscription button

[Nodebrute]

Proposal Updated
Only added the code

[melvin-bot]

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

[melvin-bot]

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

[Anastasiia-F]

Contributor details:
My Expensify account email: afesenk@gmail.com
Upwork Profile Link: upwork

Proposal:

In my opinion, the most efficient and easiest solution would be to clear the browser's navigation history (remove only the one last step) after closing the side panel. Alternatively, we could loop the animation so that it continuously plays as long as the component exists, rather than just once.