[$250] [HOLD for payment 2024-06-13] [Payment card / Subscription] Implement “Subscription size” screen (UI)

[MitchExpensify]

Drafting cc @fabioh8010

From this section in the Design Doc:

Route for page - /settings/subscription/subscription-size
Before we can start building the actual screen content we have to create an empty SubscriptionsSizePage screen and add it to the navigation. The screen needs to be added to the SCREENS.RIGHT_MODAL.SETTINGS object and SettingsModalStackNavigator to be displayed in the correct way.

Implement the first step

To implement the header we are going to use . We will also use to handle form submitting and render the “Next” button. We will create a new form ID - SUBSCRIPTION_SIZE_FORM in ONYXKEYS.ts and pass it as a prop (formID) to the .

Subtitle

To implement this part we will use a basic component with some styles.

“Subscription size” input

To build this input field we are going to use component in a similar way to how it’s done in .

Info section

This is going to be a basic component.

“Next” button

This button is going to be rendered by , we will pass the text through the submitButtonText property. When this button is clicked, the user will be redirected to the second step.

Implement the second step (the default variant)

This is called “the default variant” because it describes the scenario where a user either increases the number of members or decreases it and is allowed to do that (replicating this logic). If a user tries to downgrade from an annual subscription, an alternative variant will be shown (described in next section).

Subtitle

This is going to be a simple component with the updated number of members (20 in this case).

Info section

This section is going to be built using disabled
components with proper subscription details (number of members, price, end date).

“Save” button

We are going to use the component wrapped in to place it on the bottom, similar to how it’s done in ContactMethodsPage.tsx.

Implement the second step (the alternative variant)

It will be shown if a user is not allowed to make a change to his subscription (workspace owner tries to downgrade from an annual subscription, either by switching to pay-per-use or lowering subscription size).

Subtitle

We are going to use a simple component to build this.

Info section

Once again, a simple component.

“Close” button

We are going to use the

component wrapped in to place it on the bottom, similar to how it’s done in ContactMethodsPage.tsx.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01501e6915435e5aa7
• Upwork Job ID: 1798871381768029421
• Last Price Increase: 2024-06-07

Issue Owner

Current Issue Owner: @

[fabioh8010]

Hi, I'm Fábio from Callstack - expert agency - and I would like to work on this issue.

[MrMuzyk]

I am Michał from Callstack - expert contributor group. I’d like to work on this job.

[melvin-bot]

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

[shawnborton]

When creating these placeholder GH issues, can you include more information @MitchExpensify like linking to the Design Doc, adding Figma mocks, etc? Thanks!

[amyevans]

PR merged

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[MitchExpensify]

When creating these placeholder GH issues, can you include more information @MitchExpensify like linking to the Design Doc, adding Figma mocks, etc? Thanks!

Sorry about that @shawnborton ; yes, I'll update them all.

@MrMuzyk I'm not 100% sure how much of the Subscription size section of the detailed portion is covered here. Please let me know what I should cut!

[MrMuzyk]

@MitchExpensify whole UI for the subscription size flow was completed here so I think description that was added covers it 👍

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• feat: Payment card subscription size screen UI #42683

If no regressions arise, payment will be issued on 2024-06-13. 🎊

For reference, here are some details about the assignees on this issue:

• @MrMuzyk does not require payment (Contractor)

[melvin-bot]

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

[amyevans]

@ikevin127 reviewed the PR as C+ so will be due payment

[melvin-bot]

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

[melvin-bot]

Current assignee @ikevin127 is eligible for the External assigner, not assigning anyone new.

[jliexpensify]

Payment Summary

• C+: @ikevin127 $250

UPWORKS JOB

Do we need a competed checklist as well?

[amyevans]

Nope no checklist needed

[jliexpensify]

Paid and job closed!