Plan changes to subscriptions by jayeshmangwani · Pull Request #54771 · Expensify/App

jayeshmangwani · 2025-01-02T21:46:46Z

Explanation of Change

Fixed Issues

$ #52588
PROPOSAL:

Tests

Single Workspace Upgrade

Create a new account
Create a workspace
Navigate to subscriptions
Click on 'Control'
Confirm Upgrade RHP opens
Click 'Upgrade'
Confirm your workspace has been upgraded

Single Workspace Downgrade (follow Single Workspace Upgrade steps first)

Navigate to subscriptions
Click on 'Collect'
Confirm Downgrade RHP opens
Click 'Downgrade'
Confirm your workspace has been downgraded

Multi Workspace Upgrade (follow Single Workspace Upgrade + Downgrade steps first)

Create an additional workspace
Navigate to subscriptions
Click on 'Control'
Confirm Upgrade RHP opens for multi workspaces
Click 'Go to Workspaces'
Confirm you're sent to workspace page
Upgrade a workspace
Navigate back to Subscriptions and confirm 'Control' is selected

Multi Workspace Upgrade (follow Multi Workspace Upgrade steps first)

Navigate to subscriptions
Click on 'Collect'
Confirm Downgrade RHP opens for multi workspaces
Click 'Go to Workspaces'
Confirm you're sent to workspace page
Downgrade the Control workspace
Navigate back to Subscriptions and confirm 'Collect' is selected

Verify that no errors appear in the JS console

Offline tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."

Same as Tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android.mov

Android: mWeb Chrome

mweb-chrome.mov

iOS: Native

iOS.mov

iOS: mWeb Safari

mweb-safari.mov

MacOS: Chrome / Safari

web.mov

MacOS: Desktop

desktop.mov

… the downgrade and upgrade pages

…eb desktop flex row layout

…ute links.

jayeshmangwani · 2025-01-02T21:59:45Z

-            getUrlWithBackToParam(`settings/workspaces/${policyID}/upgrade/${encodeURIComponent(featureName ?? '')}` as const, backTo),
+        route: 'settings/workspaces/:policyID?/upgrade/:featureName?',
+        getRoute: (policyID?: string, featureName?: string, backTo?: string) =>
+            policyID ? getUrlWithBackToParam(`settings/workspaces/${policyID}/upgrade/${encodeURIComponent(featureName ?? '')}` as const, backTo) : (`settings/workspaces/upgrade` as const),


@DylanDylann, I have made the policyID optional for the WORKSPACE_UPGRADE and WORKSPACE_DOWNGRADE routes.
The reasoning behind this is that when navigating to Subscriptions -> and if the user has multiple workspaces as an owner and then presses the 'Upgrade'/'Downgrade' plan type, we navigate them to the Upgrade/Downgrade page and On this page, instead of the 'Upgrade'/'Downgrade' CTA, we show a 'Go to Workspaces' button at the bottom so we are not navigating them to any specific ws page.

If the user navigates to the upgrade/downgrade pages while owning multiple workspaces, the new route URLs will be settings/workspaces/upgrade and settings/workspaces/downgrade.
On both of these pages, I have updated the condition to display the 'Not Found' page, if the route params don't include a policyID, then checks whether the user has more than one workspace as an owner. If so, it shows the page with the 'Go to Workspaces' button; otherwise, it shows the 'Not Found' page.

Please let me know what you think about the outlined plan. Feel free to share any suggestions."

@jayeshmangwani It looks good to me

jayeshmangwani · 2025-01-06T11:17:30Z

@DylanDylann When we navigate to "Workspaces" from the "Upgrade" page and upgrade the workspace(s) to the Control Plan, then if we go back twice, we can still see the Upgrade page, even though the workspace(s) are already upgraded. How do you think should we handle this navigation?

we can add an isFocused check on both the Upgrade and Downgrade pages? If the plan type doesn’t match the expected type, then we call goBack(), Or do you suggest some other way to handle this navigation?

navigation-bug.mov

jayeshmangwani · 2025-01-07T11:43:50Z

@DylanDylann could you take a look at this comment? Thanks!

DylanDylann · 2025-01-07T11:44:31Z

Sure, I will do it now

DylanDylann · 2025-01-07T11:50:44Z

@jayeshmangwani

Option 1:

If the navigation stack is:

Subscription Page --> Upgrade/Downgrade Page

Then If we click on "Go to workspace" we should update the navigation stack

Subscription Page --> Workspace Page

Then if the user clicks the back button, they will be navigated to the subscription page

Option 2: Your suggestion here

Option 3:

Subscription Page --> Upgrade/Downgrade Page --> Workspace List --> Workspace Profile --> Select Plan Type

Then If we click on a new type we should update the navigation stack

Subscription Page --> ~~Upgrade/Downgrade Page -->~~ Workspace List --> Workspace Profile --> Select Plan Type --> Upgrade/Downgrade Page

DylanDylann · 2025-01-07T11:51:01Z

I think we should ask the internal team to make the final decision. We have 3 options #54771 (comment) and I prefer the third one

DylanDylann · 2025-01-07T11:53:58Z

@jayeshmangwani Updated to add new option

…ubscriptions page

melvin-bot · 2025-01-08T07:11:25Z

@hungvu193 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

jayeshmangwani · 2025-01-08T07:13:15Z

@hungvu193, please ignore the auto-assignment for this; @DylanDylann will review this PR

DylanDylann · 2025-01-08T08:10:19Z

+    const theme = useTheme();
+
+    return (
+        <View style={[styles.borderedContentCard, styles.flex1, styles.mt5, styles.p5, index === 0 && styles.mr3]}>


Suggested change

<View style={[styles.borderedContentCard, styles.flex1, styles.mt5, styles.p5, index === 0 && styles.mr3]}>

<View style={[styles.borderedContentCard, styles.flex1, styles.mt5, styles.p5, index === 0 && styles.mr3, plan.isSelected && styles.borderColorFocus]}>

Let's add green border on the selected option

DylanDylann · 2025-01-08T08:26:39Z

                <Text style={[styles.textNormal, styles.textSupporting, styles.mt4]}>
-                    {translate('workspace.upgrade.commonFeatures.benefits.note')}{' '}
+                    {translate('workspace.upgrade.commonFeatures.benefits.startsAt')}
+                    <Text style={[styles.textSupporting, styles.textBold]}>{formattedPrice}</Text>


Please add a space before Learn more link

DylanDylann · 2025-01-08T08:28:44Z

+    // In this case, check if the user is an admin on more than one policy.
+    // If the user is not an admin on multiple policies, they cannot perform the action,
+    // so display the NotFoundPage.
+    const canPerformUpgrade = (!!policy && PolicyUtils.isPolicyAdmin(policy)) || (!policyID && ownerPolicies.length > 1);


I think we should move this to an util function

DylanDylann · 2025-01-08T08:29:07Z

                }}
            />
-            {isUpgraded && (
+            {!!policyID && !!policy && isUpgraded && (


Let's remove one of them

DylanDylann · 2025-01-08T08:33:48Z

@jayeshmangwani Just want to confirm that, we are using option 1 for this problem

jayeshmangwani · 2025-01-08T09:28:10Z

Just want to confirm that, we are using option 1 for this problem

Yes, I added the Option 1 approach for that problem, and it makes sense too. However, I was using the goBack and navigation methods. I'll push the changes you suggested. Also, this approach still needs to be confirmed with Carlos.
Thanks for the review!

…wngrade pages

jayeshmangwani · 2025-01-08T10:36:00Z

Hi @carlosmiceli, We need your consensus on one navigation expectation.

Precondition: The user has more than one workspace as an admin.

When navigating to Subscription -> Upgrade/Downgrade Plan screen, we see the "Go to Workspaces" button instead of the "Upgrade/Downgrade Workspace" button.
Pressing the "Go to Workspaces" button navigates the user to the Workspaces screen. However, before this navigation, we replace the current screen with the previous one.
As a result, when going back from the Workspaces screen, the user lands on the Subscription page instead of the "Downgrade"/"Upgrade" screen.

Reasoning: This behavior is based on the following comments: #54771 (comment) and #54771 (comment)

Please let us know if we need to open a discussion regarding this behavior or if we can proceed with the current navigation flow, where pressing back from the Workspaces screen redirects the user to the Subscription page.

DylanDylann · 2025-01-08T10:45:33Z

The rest looks fine to me

DylanDylann · 2025-01-08T10:46:32Z

There is only one problem that needs to be confirmed here. It is so minor so I think it should not be blocked this PR, then we can handle it in a follow-up PR

jayeshmangwani · 2025-01-08T10:48:13Z

then we can handle it in a follow-up PR

agree

DylanDylann · 2025-01-10T08:20:29Z

@carlosmiceli Kindly bump for the final reviewing. It seems this is the last PR on the Downgrade feature, do we have any other tasks

carlosmiceli · 2025-01-10T16:22:20Z

Sorry, been OOO for the past 7 days, now getting back into everything! 🙏 Looking into it now.

carlosmiceli · 2025-01-10T16:32:09Z

Ok, we can merge this PR, but let's make sure to address this in a Slack thread, can you get that conversation started so we can decide what flow we'd prefer? I'll leave a note about this in the main issue so we don't forget about it, but great work on everything so far!

OSBotify · 2025-01-10T17:34:24Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

garrettmknight · 2025-01-10T17:49:15Z

When navigating to Subscription -> Upgrade/Downgrade Plan screen, we see the "Go to Workspaces" button instead of the "Upgrade/Downgrade Workspace" button.

Pressing the "Go to Workspaces" button navigates the user to the Workspaces screen. However, before this navigation, we replace the current screen with the previous one.

As a result, when going back from the Workspaces screen, the user lands on the Subscription page instead of the "Downgrade"/"Upgrade" screen.

I think this flow is fine. The user will have had to select Collect before to trigger the downgrade flow so going back to the Subscriptions page without launching the downgrade flow automatically will work well.

carlosmiceli · 2025-01-10T21:38:01Z

@jayeshmangwani ☝️

github-actions · 2025-01-11T03:37:21Z

🚀 Deployed to staging by https://github.com/carlosmiceli in version: 9.0.84-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

jayeshmangwani · 2025-01-11T11:44:03Z

@carlosmiceli existing flow does the same thing, so we are good here and don't need to make any additional changes.

github-actions · 2025-01-14T13:36:05Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.0.84-7 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	success ✅

github-actions · 2025-01-14T13:58:01Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.0.84-7 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	success ✅

jjcoffee · 2025-03-13T08:11:41Z

-        route: 'settings/workspaces/:policyID/downgrade/',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/downgrade/` as const,
+        route: 'settings/workspaces/:policyID?/downgrade/',
+        getRoute: (policyID?: string) => (policyID ? (`settings/workspaces/${policyID}/downgrade/` as const) : `settings/workspaces/downgrade`),


Coming from #57276. We missed adding a backTo param here which resulted in the background switching to the chat page if the user refreshed whilst the downgrade (or upgrade) modal is open.

Ollyws · 2025-03-17T22:09:48Z

+                <Button
+                    text={translate('workspace.common.goToWorkspaces')}
+                    success
+                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES, CONST.NAVIGATION.TYPE.UP)}


After navigating from here the back button wasn't taking us back to the correct page, we fixed this in #57237

jayeshmangwani added 9 commits January 1, 2025 12:22

updated subscriptions page cards to have both plan types displayed

ee81197

Merge branch 'main' into plan_changes_to_subscriptions

1552c05

added new translations for Go to workspaces

aeb7ad5

Made the policyID optional and adjusted the route URL accordingly for…

b78d020

… the downgrade and upgrade pages

handled the Plan Press on Subscriptions page

85dbe0d

merged main and fixed conflicts

774798d

if narrow layout then column view for plan types on subscription on w…

5597008

…eb desktop flex row layout

Merge branch 'main' into plan_changes_to_subscriptions

20c501b

handled direct access to the downgrade and upgrade workspace using ro…

ac8c164

…ute links.

jayeshmangwani commented Jan 2, 2025

View reviewed changes

jayeshmangwani added 2 commits January 5, 2025 20:12

Merge branch 'main' into plan_changes_to_subscriptions

c9fc194

updated formattedPrice for Generic Upgrade features

81f5ad6

added key for subscription cards

0ac8143

jayeshmangwani added 3 commits January 8, 2025 09:26

Merge branch 'main' into plan_changes_to_subscriptions

d4eab09

added bottom margin to plan title

488f2f2

close the upgrade/downgrade plan type page before navigating to the s…

004fb5e

…ubscriptions page

jayeshmangwani marked this pull request as ready for review January 8, 2025 07:11

jayeshmangwani requested a review from a team as a code owner January 8, 2025 07:11

melvin-bot Bot requested a review from hungvu193 January 8, 2025 07:11

melvin-bot Bot removed the request for review from a team January 8, 2025 07:11

DylanDylann reviewed Jan 8, 2025

View reviewed changes

added spacing before learn more

bd29feb

jayeshmangwani added 3 commits January 8, 2025 15:11

created a common utils funciton for canModifyPlan

007f753

added navigation type when subscription navigation call on upgrade/do…

50a9909

…wngrade pages

removed redundant policyID check

c4138a6

DylanDylann approved these changes Jan 8, 2025

View reviewed changes

melvin-bot Bot requested a review from carlosmiceli January 8, 2025 10:45

carlosmiceli approved these changes Jan 10, 2025

View reviewed changes

carlosmiceli merged commit d0a2d5e into Expensify:main Jan 10, 2025

github-actions Bot mentioned this pull request Jan 11, 2025

Deploy Checklist: New Expensify 2025-01-11 #55109

Closed

39 tasks

IuliiaHerets mentioned this pull request Jan 11, 2025

[HOLD for payment 2025-01-22] [HOLD for payment 2025-01-21] Track expense - "Go to workspaces" button appears in upgrade modal when there is no workspace #55110

Closed

8 tasks

melvin-bot Bot mentioned this pull request Jan 14, 2025

[Due for payment 2025-02-13] [HOLD for payment 2025-02-06] [HOLD for payment 2025-01-21] Add plan changes to Subscriptions #52588

Closed

jjcoffee reviewed Mar 13, 2025

View reviewed changes

Ollyws reviewed Mar 17, 2025

View reviewed changes

	<View style={[styles.borderedContentCard, styles.flex1, styles.mt5, styles.p5, index === 0 && styles.mr3]}>
	<View style={[styles.borderedContentCard, styles.flex1, styles.mt5, styles.p5, index === 0 && styles.mr3, plan.isSelected && styles.borderColorFocus]}>

Uh oh!

Conversation

jayeshmangwani commented Jan 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jayeshmangwani commented Jan 6, 2025

Uh oh!

jayeshmangwani commented Jan 7, 2025

Uh oh!

DylanDylann commented Jan 7, 2025

Uh oh!

DylanDylann commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DylanDylann commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DylanDylann commented Jan 7, 2025

Uh oh!

melvin-bot Bot commented Jan 8, 2025

Uh oh!

jayeshmangwani commented Jan 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DylanDylann commented Jan 8, 2025

Uh oh!

jayeshmangwani commented Jan 8, 2025

Uh oh!

jayeshmangwani commented Jan 8, 2025

Uh oh!

DylanDylann commented Jan 8, 2025

Uh oh!

DylanDylann commented Jan 8, 2025

Uh oh!

jayeshmangwani commented Jan 8, 2025

Uh oh!

DylanDylann commented Jan 10, 2025

Uh oh!

carlosmiceli commented Jan 10, 2025

Uh oh!

carlosmiceli commented Jan 10, 2025

Uh oh!

OSBotify commented Jan 10, 2025

Uh oh!

garrettmknight commented Jan 10, 2025

Uh oh!

carlosmiceli commented Jan 10, 2025

Uh oh!

github-actions Bot commented Jan 11, 2025

Uh oh!

jayeshmangwani commented Jan 11, 2025

Uh oh!

github-actions Bot commented Jan 14, 2025

Uh oh!

github-actions Bot commented Jan 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

jayeshmangwani commented Jan 2, 2025 •

edited

Loading

DylanDylann commented Jan 7, 2025 •

edited

Loading

DylanDylann commented Jan 7, 2025 •

edited

Loading