Hosted Flow: Hide billing term dropdown for Wordcamp new hosted site flow checkout #94680

jeyip · 2024-09-18T17:52:54Z

Related to pau2Xa-6lo-p2#comment-16139

Proposed Changes

Hide billing term dropdown for WordPress business plan line item if user originates from the Wordcamp new hosted site flow
Adds a hideProductVariants property to ResponseCart extra metadata

Note:

I considered using query params to hide the term selector dropdown and the multi-year plan upsell. I opted not to because it would allow end users to modify their url to make the UI elements visible.

Why are these changes being made?

We only want to offer free annual business plans. No more, and no less.

Testing Instructions

Before

After

Go to /setup/new-hosted-site/plans?utm_source=wordcamp&utm_medium=automattic_referred
Confirm that only the Business plan is visible
Select the Business plan
Confirm that:
- At checkout, there is no longer a billing term dropdown under the business plan line item.
- At checkout, there is no longer a multi-year plan upsell in the checkout sidebar.
Revisit /setup/new-hosted-site/plans without the wordcamp utm source
Confirm that the Business plan and Commerce plan are visible
Select the Business plan
Confirm that:
- At checkout, there is a billing term dropdown under the business plan line item.
- At checkout, there is a multi-year plan upsell in the checkout sidebar.
Smoke test a /start signup flow to verify that the billing term dropdown is still shown in checkout

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-09-18T17:53:07Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-119873

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-119873&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-119873&env=a8c-for-agencies

matticbot · 2024-09-18T18:02:24Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~76 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
new-hosted-site-flow       +110 B  (+1.9%)      +54 B  (+2.7%)
checkout                    +69 B  (+0.0%)      +22 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~22 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal             +69 B  (+0.0%)      +22 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal        +69 B  (+0.0%)      +22 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

jeyip · 2024-09-18T21:36:25Z

client/my-sites/checkout/src/components/wp-order-review-line-items.tsx

@@ -310,6 +310,9 @@ function LineItemWrapper( {
 		if ( has100YearPlanProduct ) {
 			return false;
 		}
+		if ( isNewHostedSiteCreationFlow( signupFlowName ) && product.extra?.hideProductVariants ) {
+			return false;


Note:

Hides the plan term selector dropdown in checkout

jeyip · 2024-09-18T21:36:44Z

client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/index.tsx

@@ -116,6 +116,10 @@ export function CheckoutSidebarPlanUpsell() {
 		return null;
 	}

+	if ( plan.extra?.hideProductVariants ) {
+		return null;


Note:

Hides the plan variant upsell in the checkout sidebar

sirbrillig · 2024-09-18T21:38:45Z

packages/shopping-cart/src/types.ts

@@ -645,6 +645,7 @@ export interface ResponseCartProductExtra {
 	is_marketplace_product?: boolean;
 	product_slug?: string;
 	product_type?: 'marketplace_plugin' | 'marketplace_theme' | 'saas_plugin';
+	hideProductVariants?: boolean;


Its name is pretty self explanatory, but would you mind adding a short comment block above this property? I'm trying to eventually get a description for everything here in preparation for eventually validating them all.

Thanks for chiming in @sirbrillig! Happy to take care of this when I'm back from lunch.

Added some comments in cb92b12. I'm merging this PR early because of a hard deadline on the 20th and requests from marketing to test this live asap.

With that being said, I'm happy to make any updates if you have any feedback on the inline comment 🙂

jeyip · 2024-09-18T21:39:20Z

client/landing/stepper/declarative-flow/new-hosted-site-flow.ts

@@ -69,6 +72,11 @@ const hosting: Flow = {

 					setPlanCartItem( {
 						product_slug: productSlug,
+						extra: {
+							...( queryParams?.utm_source && {
+								hideProductVariants: queryParams.utm_source === 'wordcamp',


Note:

We'll probably to make this "wordcamp" utm_source a constant somewhere @aneeshd16. Unsure where yet. 🤔

Considering this is a temporary change, I think we should be okay with this. We can revert this change once the promo is over.

jeyip · 2024-09-18T23:35:36Z

Testing

Requirements

Go to /setup/new-hosted-site/plans?utm_source=wordcamp&utm_medium=automattic_referred
Confirm that only the Business plan is visible
Confirm that:
- At checkout, there is no longer a billing term dropdown under the business plan line item.
- At checkout, there is no longer a multi-year plan upsell in the checkout sidebar.
Revisit /setup/new-hosted-site/plans without the wordcamp utm source
Confirm that the Business plan and Commerce plan are visible
Confirm that:
- At checkout, there is a billing term dropdown under the business plan line item.
- At checkout, there is a multi-year plan upsell in the checkout sidebar.
Smoke test a /start signup flow to verify that the billing term dropdown is still shown in checkout

Browsers

Chrome

Hide billing term dropdown for new hosted site flow

c438717

jeyip requested a review from aneeshd16 September 18, 2024 17:52

jeyip self-assigned this Sep 18, 2024

jeyip requested a review from a team as a code owner September 18, 2024 17:52

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Sep 18, 2024

jeyip added 2 commits September 18, 2024 14:20

Add meta data to hide plan variants dropdown for wordcamp utm source

627c231

Hide product variant upsell

5a92ed9

jeyip commented Sep 18, 2024

View reviewed changes

sirbrillig reviewed Sep 18, 2024

View reviewed changes

jeyip commented Sep 18, 2024

View reviewed changes

jeyip added 2 commits September 18, 2024 16:27

Add inline comments

cb92b12

Remove onboarding flow check

513dcba

jeyip merged commit 072c66e into trunk Sep 18, 2024
10 of 12 checks passed

jeyip deleted the remove/billing-term-dropdown-for-wordcamp-new-hosted-site-flow-checkout branch September 18, 2024 23:39

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hosted Flow: Hide billing term dropdown for Wordcamp new hosted site flow checkout #94680

Hosted Flow: Hide billing term dropdown for Wordcamp new hosted site flow checkout #94680

jeyip commented Sep 18, 2024 •

edited

Loading

github-actions bot commented Sep 18, 2024 •

edited by matticbot

Loading

matticbot commented Sep 18, 2024 •

edited

Loading

jeyip Sep 18, 2024

jeyip Sep 18, 2024

sirbrillig Sep 18, 2024

jeyip Sep 18, 2024 •

edited

Loading

jeyip Sep 18, 2024

jeyip Sep 18, 2024 •

edited

Loading

aneeshd16 Sep 19, 2024

jeyip commented Sep 18, 2024

Hosted Flow: Hide billing term dropdown for Wordcamp new hosted site flow checkout #94680

Hosted Flow: Hide billing term dropdown for Wordcamp new hosted site flow checkout #94680

Conversation

jeyip commented Sep 18, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Before

After

Pre-merge Checklist

github-actions bot commented Sep 18, 2024 • edited by matticbot Loading

matticbot commented Sep 18, 2024 • edited Loading

jeyip Sep 18, 2024

Choose a reason for hiding this comment

jeyip Sep 18, 2024

Choose a reason for hiding this comment

sirbrillig Sep 18, 2024

Choose a reason for hiding this comment

jeyip Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

jeyip Sep 18, 2024

Choose a reason for hiding this comment

jeyip Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

aneeshd16 Sep 19, 2024

Choose a reason for hiding this comment

jeyip commented Sep 18, 2024

Testing

Requirements

Browsers

jeyip commented Sep 18, 2024 •

edited

Loading

github-actions bot commented Sep 18, 2024 •

edited by matticbot

Loading

matticbot commented Sep 18, 2024 •

edited

Loading

jeyip Sep 18, 2024 •

edited

Loading

jeyip Sep 18, 2024 •

edited

Loading