Plans in Site Creation: Integrate Plan selection into Site Creation flow

[staskus]

Fixes #21661

Integrate Plan selection into Site Creation flow.

To test:

Free Domain + Free Plan

1. Enable Plans in Site Creation feature flag
2. Create a new site
3. In domain selection, search and select *.wordpress.com domain
4. In plan selection select a free domain
5. Confirm the site is created
6. No checkout view should open

Free Domain + Paid Plan

1. Enable Plans in Site Creation feature flag
2. Create a new site
3. In domain selection, search and select *.wordpress.com domain
4. In plan selection select paid plan
5. Confirm the site is created
6. Checkout should open with a selected plan

Paid Domain + Free Plan

1. Enable Plans in Site Creation feature flag
2. Create a new site
3. In domain selection, search and select a paid domain with "Free for the first year with an annual plan" label
4. In plan selection select a free plan
5. Confirm popup appears telling to either select a paid plan, or go with a free plan + free domain
6. Select free plan
7. Confirm the site is created
8. No checkout view should open

Paid Domain + Paid Plan

1. Enable Plans in Site Creation feature flag
2. Create a new site
3. In domain selection, search and select a paid domain with "Free for the first year with an annual plan" label
4. In plan selection select a paid plan
5. Confirm the site is created
6. Checkout view should open and show a selected plan and a free domain

Simulator.Screen.Recording.-.iPhone.15.-.2023-10-04.at.16.24.38.mp4

Paid Domain

Regression Notes

1. Potential unintended areas of impact

None, it's a new functionality

2. What I did to test those areas of impact (or what existing automated tests I relied on)

3. What automated tests I added (or what prevented me from doing so)

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• VoiceOver.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• iPhone and iPad.
• Multi-tasking: Split view and Slide over. (iPad)

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr21688-c373eca
	Version	23.4
	Bundle ID	org.wordpress.alpha
	Commit	c373eca
	App Center Build	WPiOS - One-Offs #7361

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr21688-c373eca
	Version	23.4
	Bundle ID	com.jetpack.alpha
	Commit	c373eca
	App Center Build	jetpack-installable-builds #6395

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[guarani]

Hey @staskus, I ran into one issue while testing and didn't review the code changes. I can re-review once this is ready again and look through the code changes.

Free Domain + Free Plan

⚠️The plans screen doesn't show the Free plan. https://container-great-robinson.calypso.live/jetpack-app-plans?redirect_to=jetpackappplans:// is the URL the app opens and I confirmed that when opened in a browser, the Free plan is hidden there as well. Adding a &paid_domain_name=abc.com query parameter makes the Free plan appear, but this doesn't seem right.

I used the Calypso live build from Automattic/wp-calypso#82404, but it seems to work if I use the live build from the original PR, Automattic/wp-calypso#82135. The only difference I see between them is a change to enabled logged out viewing of the plans page, Automattic/wp-calypso@01afb54. Could this be causing an issue?

Free Domain + Paid Plan

Works as expected: The checkout is shown with the selected plan.

Paid Domain + Free Plan

Works as expected: No checkout shown

Paid Domain + Paid Plan

Works as expected: The checkout is shown with the selected plan and domain.

[guarani]

I guess this change was added to allow the PR to be tested within the JP app (which doesn't know how to authenticate Calypso Live urls, so needs the page to be accessible publicly).

I'm not sure why that makes it not show the Free plan, but it seems related.

So the above comment isn't a real issue once your other Calypso PR is merged, it's just that it's not possible to test the Free plan + Free domain scenario.

[staskus]

@guarani

I used the Calypso live build from Automattic/wp-calypso#82404, but it seems to work if I use the live build from the original PR, Automattic/wp-calypso#82135. The only difference I see between them is a change to enabled logged out viewing of the plans page, Automattic/wp-calypso@01afb54. Could this be causing an issue?

Yes, I can only integrate the logged-out version for testing on the app due to authentication logic but that build is not showing free plans. Sorry for the confusion.

[guarani]

Thanks for clarifying, I see now the issue of the Free plan not showing up was already raised outside of this PR. Sorry for the confusion on my part.
The code changes look good, so I think this is ready to merge once the Calypso PR is merged and the URL used in this PR is updated.

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS