Plans in Site Creation: Investigate plans web view integration into site creation flow before site is created

[staskus]

Description

We need the ability to open plan selection before the site is created

Problem

At the moment, PlanSelectionViewController opens https://wordpress.com/plans/yearly with 3 parameters:

• Current site home url
• domainAndPlanPackage parameter set to `true
• jetpackAppPlans parameter set to true

which requires the site to be already created.

Scope

Provide technical details of enabling to select plans before the site is created, and finishing checkout after the site creation.

[staskus]

pc8eDl-15Y-p2

[staskus]

Problem

To display Plans after Site Assembly on the Jetpack app, we added additional jetpackAppPlans parameter to alter already existing /plans/* flow Automattic/wp-calypso#77029

To display Plans before Site Assembly we need a solution that satisfies these requirements:

1. Open /plans/ selection page without the site already existing
2. Open /plans/ selection page with domain selected natively on the app
3. Capture the selected plan after a plan was selected to add it to the cart once the Site Assembly step is complete

Solution 1

On Calypso, we have /start/ flow that is used for Domain Selection -> Plan Selection -> Site Assembly. This flow satisfies requirement 1, since start/plans can be opened without the site already existing. However, we would need to make changes to satisfy requirements 2 and 3:

• /start/plans cannot be opened directly, without first selecting a domain in start/domains. We need to preconfigure /start/ flow from the app to allow opening /start/plans directly
• After plan is selected in /start/plans, Site Assembly step happens on the web. However, we don't want that since this Site Assembly doesn't capture all the configuration already done on the Site Creation Wizard on the app. We need to configure /start/ flow to allow capturing the selected plan

Solution 2

Given Solution 1 requires making alternations to /start flow that is built with different intentions, we could consider building an app-specific plan flow that would satisfy our requirements without affecting unrelated flows.

Plans is react component so there is nothing preventing from using it outside of the Stepper flows. The primary component to use is at the moment, imported from calypso/my-sites/plans-features-main. e.g. here is how it is used in the classic signup flow (/start/plans and here is how it is used in the Stepper flow (setup/xxx/plans).

[staskus]

Continue on Automattic/wp-calypso#82135