Refactor Jetpack and WPCom plan types #52836

monsieur-z · 2021-05-13T18:44:21Z

Changes proposed in this Pull Request

This PR restructures the plan types defined in the calypso-products package, and updates the codebase accordingly.

Implementation notes

Refactored types in packages/calypso-products/src/types.ts. Mainly extracted the WPComPlan and JetpackPlan interface from the more generic Plan.
Made sure optional methods such as getAudience are called as such.
Removed deprecated argument in calls to getPlanCompareFeatures , getShortDescription, getDescription, getBlogSignupFeatures, getPortfolioSignupFeatures.
Renamed JetpackPurchasableItem to JetpackPurchasableItemSlug for clarity.
Renamed ProductTranslations to JetpackProduct for clarity.
Replaced JetpackPlanCardFeature deprecated type by the string type.
Added TYPES_LIST in packages/calypso-products/src/constants/types.ts
Added WPCOM_PRODUCTS and WPCOM_PLANS in packages/calypso-products/src/constants/wpcom.ts
Clean plans in packages/calypso-products/src/plans-list.js according to the aforementioned updates.

Testing instructions

Review code carefully, following the implementation notes along
Download the PR and run Calypso
Open the console
Visit the plans page with both a simple and a Jetpack site
Check that the page looks and behaves as in production
Verify that you can complete a purchase
Check that there's no relevant error in the console

github-actions · 2021-05-13T18:44:40Z

Test live: https://calypso.live/?branch=refactor/calypso-products-plan-types

matticbot · 2021-05-13T18:57:13Z

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

App Entrypoints (~103 bytes removed 📉 [gzipped])

name        parsed_size           gzip_size
entry-main      -1861 B  (-0.1%)     -103 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~6 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
plans                        -52 B  (-0.0%)       -6 B  (-0.0%)
site-purchases               -32 B  (-0.0%)       -8 B  (-0.0%)
settings-performance         -32 B  (-0.0%)       -8 B  (-0.0%)
purchases                    -32 B  (-0.0%)       -8 B  (-0.0%)
purchase-product             -32 B  (-0.0%)       -8 B  (-0.0%)
marketing                    -32 B  (-0.0%)       -8 B  (-0.0%)
jetpack-connect              -32 B  (-0.0%)       -8 B  (-0.0%)
jetpack-cloud-pricing        -32 B  (-0.0%)       -8 B  (-0.0%)
domains                      -32 B  (-0.0%)       -8 B  (-0.0%)
checkout                     -32 B  (-0.0%)       -8 B  (-0.0%)
activity                     -32 B  (-0.0%)       -8 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 (~120 bytes removed 📉 [gzipped])

name                                                                       parsed_size           gzip_size
async-load-calypso-blocks-inline-help-popover                                  -1861 B  (-0.5%)     -114 B  (-0.1%)
async-load-calypso-my-sites-plugins-marketplace-marketplace-domain-upsell        -32 B  (-0.0%)       -8 B  (-0.0%)
async-load-calypso-blocks-editor-checkout-modal                                  -32 B  (-0.0%)       -8 B  (-0.0%)
async-load-signup-steps-plans                                                    -20 B  (-0.0%)       +2 B  (+0.0%)
async-load-signup-steps-plans-atomic-store                                       -18 B  (-0.0%)       +1 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.

monsieur-z · 2021-05-13T18:59:04Z

client/my-sites/plans/jetpack-plans/utils.ts

@@ -470,7 +465,6 @@ export function itemToSelectorProduct(
 			// Using the same slug for any duration helps prevent unnecessary DOM updates
 			iconSlug: ( yearlyProductSlug || productSlug ) + iconAppend,
 			displayName: getForCurrentCROIteration( item.getTitle ),
-			buttonLabel: getForCurrentCROIteration( item.getButtonLabel ),


getButtonLabel is not used anywhere anymore.

monsieur-z · 2021-05-13T19:00:14Z

packages/calypso-products/src/constants/terms.ts

@@ -1,7 +1,8 @@
 export const TERM_MONTHLY = 'TERM_MONTHLY';
 export const TERM_ANNUALLY = 'TERM_ANNUALLY';
 export const TERM_BIENNIALLY = 'TERM_BIENNIALLY';
-export const TERMS_LIST = [ TERM_MONTHLY, TERM_ANNUALLY, TERM_BIENNIALLY ];
+
+export const TERMS_LIST = <const>[ TERM_MONTHLY, TERM_ANNUALLY, TERM_BIENNIALLY ];


This will allow us to have values as types, instead of string.

monsieur-z · 2021-05-13T19:03:40Z

packages/calypso-products/src/plans-list.js

@@ -192,13 +191,11 @@ const WPComGetBiennialBillingTimeframe = () => i18n.translate( '/month, billed e
 const getAnnualTimeframe = () => ( {
 	term: TERM_ANNUALLY,
 	getBillingTimeFrame: () => translate( 'per year' ),
-	getSignupBillingTimeFrame: () => translate( 'per year' ),


Not used anywhere.

monsieur-z · 2021-05-13T19:06:04Z

packages/calypso-products/src/plans-list.js

@@ -1113,32 +1099,27 @@ export const PLANS_LIST = {
 				'The features most needed by WordPress sites' +
 					' — perfectly packaged and optimized for everyone.'
 			),
-		getPlanCompareFeatures: () => [


getPlanCompareFeatures and getSignupFeatures are not used by Jetpack plans. We're moving the features defined in there to getHiddenFeatures.

monsieur-z · 2021-05-13T19:10:23Z

packages/calypso-products/src/plans-list.js

-			] ),
-		getPlanCardFeatures: () => [ FEATURE_BACKUP_DAILY_V2, FEATURE_SCAN_V2, FEATURE_ANTISPAM_V2 ],
-		getSignupFeatures: ( currentPlan ) => {
-			const showPersonalPlan =


Resolves to false for Jetpack plans.

elliottprogrammer

Everything seems to look and behave as in production for simple site and Jetpack site. No errors in console. Able to purchase products/plans without issues or errors. From what I could follow, code changes look good.
LGTM 👍

Refactor Jetpack and WPCom plan types

4d1f9fb

monsieur-z commented May 13, 2021

View reviewed changes

monsieur-z added [Size] M Medium sized issue Jetpack [Feature] Plans & Upgrades All of the plans on WordPress.com and flow for upgrading plans. labels May 13, 2021

Call getPlanCompareFeatures as optional

cdd9091

monsieur-z marked this pull request as ready for review May 13, 2021 19:27

monsieur-z requested a review from a team May 13, 2021 19:27

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 13, 2021

elliottprogrammer approved these changes May 14, 2021

View reviewed changes

monsieur-z merged commit 2ff717e into trunk May 17, 2021

monsieur-z deleted the refactor/calypso-products-plan-types branch May 17, 2021 14:28

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 May 17, 2021

tyxla mentioned this pull request Nov 2, 2021

Config: Remove unused Jetpack personal plan flag #57548

Merged

sirbrillig mentioned this pull request Jun 17, 2023

Stronger plan getter types #78350

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor Jetpack and WPCom plan types #52836

Refactor Jetpack and WPCom plan types #52836

monsieur-z commented May 13, 2021 •

edited

Loading

github-actions bot commented May 13, 2021

matticbot commented May 13, 2021 •

edited

Loading

monsieur-z May 13, 2021

monsieur-z May 13, 2021

monsieur-z May 13, 2021

monsieur-z May 13, 2021 •

edited

Loading

monsieur-z May 13, 2021

elliottprogrammer left a comment

Refactor Jetpack and WPCom plan types #52836

Refactor Jetpack and WPCom plan types #52836

Conversation

monsieur-z commented May 13, 2021 • edited Loading

Changes proposed in this Pull Request

Implementation notes

Testing instructions

github-actions bot commented May 13, 2021

matticbot commented May 13, 2021 • edited Loading

monsieur-z May 13, 2021

Choose a reason for hiding this comment

monsieur-z May 13, 2021

Choose a reason for hiding this comment

monsieur-z May 13, 2021

Choose a reason for hiding this comment

monsieur-z May 13, 2021 • edited Loading

Choose a reason for hiding this comment

monsieur-z May 13, 2021

Choose a reason for hiding this comment

elliottprogrammer left a comment

Choose a reason for hiding this comment

monsieur-z commented May 13, 2021 •

edited

Loading

matticbot commented May 13, 2021 •

edited

Loading

monsieur-z May 13, 2021 •

edited

Loading