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: @
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
Issue Owner
Current Issue Owner: @