[Hold for E/E #399936] Add plan changes to Subscriptions

[garrettmknight]

Part of the Workspace Downgrades project

Main issue: https://github.com/Expensify/Expensify/issues/399936 Project: Workspace Downgrades

Feature Description

1. Update the Your plan section of the Subscriptions page to show both plan types with the current, highest plan type the account is an admin of highlighted/selected.
2. If the user selects the other plan type, we'll check whether they're an admin on one or more workspaces:

• If they're only an admin of one workspace we can just upgrade or downgrade that workspace from here we'll:
  • If the user is on Collect and selects Control, we'll launch the Upgrade RHP
  • If the user is on Control and selects Collect, we'll launch the Downgrade RHP
• If they're an admin on multiple workspaces, they'll need to upgrade or downgrade their workspaces individually:
  • If the user is on Collect and selects Control, we'll launch an RHP directing the user to workspaces to upgrade
  • If the user is on Control and selects Collect, we'll launch an RHP directing the user to workspaces to downgrade

Copy for options above in this Figma here

Manual Test Steps

Single Workspace Upgrade

1. Create a new account
2. Create a workspace
3. Navigate to subscriptions
4. Click on 'Control'
5. Confirm Upgrade RHP opens
6. Click 'Upgrade'
7. Confirm your workspace has been upgraded

Single Workspace Downgrade (follow Single Workspace Upgrade steps first)

1. Navigate to subscriptions
2. Click on 'Collect'
3. Confirm Downgrade RHP opens
4. Click 'Downgrade'
5. Confirm your workspace has been downgraded

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

1. Create an additional workspace
2. Navigate to subscriptions
3. Click on 'Control'
4. Confirm Upgrade RHP opens for multi workspaces
5. Click 'Go to Workspaces'
6. Confirm you're sent to workspace page
7. Upgrade a workspace
8. Navigate back to Subscriptions and confirm 'Control' is selected

Multi Workspace Upgrade (follow Multi Workspace Upgrade steps first)

1. Navigate to subscriptions
2. Click on 'Collect'
3. Confirm Downgrade RHP opens for multi workspaces
4. Click 'Go to Workspaces'
5. Confirm you're sent to workspace page
6. Downgrade the Control workspace
7. Navigate back to Subscriptions and confirm 'Collect' is selected

Automated Tests

N/A

[melvin-bot[bot]]

Triggered auto assignment to @joekaufmanexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[JmillsExpensify]

Still very excited for this one.

[garrettmknight]

Hoping to prioritize this week while things are quiet.

[garrettmknight]

Sweet - got a minute to work through some copy options for when the user is an admin on multiple workspaces here.

[garrettmknight]

Alright - OP is updated, now we're just waiting for the main issue to complete to open this one up.

[garrettmknight]

Quick clarification about the HOLD here:

• We already have the upgrade command in ND
• We're working on the downgrade command in https://github.com/Expensify/Expensify/issues/399936
• Once we have the downgrade command, we should be able to open this up externally since it's more of a FE change that just calls our BE command.

[carlosmiceli]

@jayeshmangwani Hey Jayesh, here's another issue we need to work on to really complete the full upgrades/downgrades project. Seems like a natural progression for you to take over this issue too, let me know if there are any questions.

I do have one question for you: we need to implement a check for whether the admin manages multiple workspaces or not. Do we have a way to check for that in the FE? Probably not, but thought I'd ask. If not, what kind of changes would you need from the BE (as in, what command or response would you like to see changed and how)?

[jayeshmangwani]

Seems like a natural progression for you to take over this issue too, let me know if there are any questions.

Yes, that sounds good. I will start working on this issue once we merge PR for the downgrade workspace UI and new downgrade API.

@carlosmiceli @garrettmknight I will also need access to Figma, as I cannot find this section in the design doc.

[jayeshmangwani]

@carlosmiceli For the multiple workspaces admin front-end check, I think we already have a function that can be used here. The getOwnedPaidPolicies function takes all policies and a user ID, then returns all the collect and control workspaces (paid workspaces) where the user is an admin.

https://github.com/Expensify/App/blob/ec76adcc1627caf6bac62ce26182e979e55fe52f/src/libs/PolicyUtils.ts#L391-L393

[carlosmiceli]

Boom! Looks like we're good here @garrettmknight 💪 @jayeshmangwani great news, we're waiting for the final BE review and we're good to go, will report as soon as it's merged 👍

[jayeshmangwani]

will report as soon as it's merged 👍

Thanks 🙌

[carlosmiceli]

BE is merged 🙌

[carlosmiceli]

Small BE change requested by our contributors has both PRs in review, which should completely unblock @jayeshmangwani from completing the plan page work.

[carlosmiceli]

Both BE PRs have been merged.

[jayeshmangwani]

Not Overdue, we will handle it after this PR

[jayeshmangwani]

@garrettmknight Whenever you get a chance, please help in get access to the Figma design/ Screenshots here

[carlosmiceli]

Not overdue, it can now be worked on since the downgrade feature PR ahs been merged.

[jayeshmangwani]

Since we can now work on these changes, @carlosmiceli could you please provide the UI screenshots that need to be implemented?

[carlosmiceli]

To be honest I'm not sure where those are, let's wait for @garrettmknight to provide them.

[melvin-bot[bot]]

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

[carlosmiceli]

@jayeshmangwani

Single Upgrade:

Multi Upgrade:

Single Downgrade:

Multi Downgrade:

[garrettmknight]

@jayeshmangwani just a note that when the RHP is up, there should be a shadow on the rest of the screen.

[jayeshmangwani]

Thanks for the mockups, @carlosmiceli! I’ll start working on the PR today.

[jayeshmangwani]

@carlosmiceli , @garrettmknight ,New plan type design looks good on web (screenshot added below for comparison with other devices).

web: chrome

However, on native mobile devices and narrow web layouts, it doesn't look as polished. I've attached screenshots from iOS and Safari on mobile web for reference.

Should we update the layout to display the plan type in a column format for narrow layouts? Or would it be better to get input from the design team on this?

iOS

mweb: safari

I tried using the column layout for mobile devices, but that doesn’t look great either. Since the Plan type cards have some height, they end up taking over the whole screen. I've attached a screenshot below for reference.

iOS: column flex direction

[parasharrajat]

I can help review this as C+ @carlosmiceli @jayeshmangwani.

[carlosmiceli]

Oh, sorry, I think this should be @DylanDylann as the C+ reviewer.

[carlosmiceli]

But let's wait for @garrettmknight's input on the UI above.

[shawnborton]

cc @Expensify/design for a review of the UI above

I think the idea was that on mobile, these would be stacked (aka flex column). The web screenshots look good to me though.

[garrettmknight]

Just catching up from NY. I like the stacked option, let's go with that.

[dubielzyk-expensify]

Agree with the mobile stacking Shawn called out. Is it just me or does this look a bit cramped here? Is that our regular line-height? If so, maybe we should add just a tad more padding between the plan price paragraph and the name of the plan itself?