Create a SubscriptionPlan.tsx file that will contain the component logic.
component with title property
(“Your plan”). It’s going to have two variants, depending on the plan variant (control/collect).
Fetch the data for subscription details section
The plan type is already stored in Onyx under the policy_ key.
The data can be accessed under ONYXKEYS.COLLECTION.POLICY key, in the type field (it can be free/personal/corporate/team).
Add the subscription details section
This section has to cover two variants (control/collect). The rendered variant depends on the type key of policy_ onyx key (team - collect, corporate - control)
Most of this content will be the same for all subscription variants, the only part that changes is this line
It depends on the variant and different scenarios as described in detail in Point 2b of UI Additions & Changes section of the doc. It’s going to depend on the ONYXKEYS.COLLECTION.POLICY onyx key.
The list of benefits will be a set of components with interactive={false} prop as they are read-only items.
The exact price ($5/active in the above case) is going to be dynamic based on currency/location.
We are going to follow this order to determine the currency (if not applicable, fall back to the next one):
Use payment card currency (if a payment card is present)
Geolocation currency (already in Onyx in ONYXKEYS.PERSONAL_DETAILS_LIST.[userAccountID].localCurrencyCode, which is used as the workspace currency upon workspace creation, and supplied by the backend from UserAPI::getLocalCurrency)
Use USD
For that purpose we are going to create a helper function named getPreferredCurrency so it can be reused.
There is also an alternative variant, for workspaces on Control plan
The layout is identical, the difference is in its content. We will use the same components to build it, just with different props.
Add the savings calculator section
This section does not depend on the Subscription variant, the only variable here is the platform, more specifically the “Learn more” Button that will redirect the user to https://use.expensify.com/savings-calculator on web and desktop, but it will NOT be rendered in the native apps.
This issue covers this section of the doc: https://docs.google.com/document/d/1jXV_vIsOGZuL0dMiuXDWRETAFRX64ODVAhWPtiuFXT8/edit#bookmark=id.moxmgpnufzzc
Issue Owner
Current Issue Owner: @twisterdotcom