Add checkout included features list for new Stats products

[elliottprogrammer]

This PR adds the list of "Included features" displayed on the checkout page, for the new Stats products. (See screenshot):

Screenshots:

Stats paid products (Commercial and PWYW):

** Stats Free product ($0): **

Stats "Included features" items discussion: p1HpG7-ngN-p2#comment-64474
Asana task: 1201210512993648-as-1204939720795290/f

Proposed Changes

• Adds the new Jetpack Stats products constants to the calypso-products package.
• Add the "Included features" list for Jetpack Stats products on the Checkout page.
• Update unit tests.

Testing Instructions

• Checkout this PR & spin up Calypso blue (git fetch && git checkout add/checkout-stats-included-features && yarn start)
• Go to: http://calypso.localhost:3000/checkout/jetpack/jetpack_stats_monthly
• Verify the Stats (Commercial) product is in the cart and the "Included features" list items are displaying and look like the screenshots above.
• Remove the product from the cart (unless code-D115101 is already deployed, which prevents concurrent products in cart).
• Go to: http://calypso.localhost:3000/checkout/jetpack/jetpack_stats_pwyw_yearly:-q-12
• Verify the Stats (Paid) product is in the cart for $12 dollars and the "Included features" list items are displaying and look like the screenshots above.
• Remove the product from the cart (unless code-D115101 is already deployed, which prevents concurrent products in cart).
• Go to: http://calypso.localhost:3000/checkout/jetpack/jetpack_stats_free_yearly
• Verify the Stats (Free non-commercial license) product is in the cart and there are only 2 "Included features" list items and they look like the screenshots above.

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-ajp-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[kangzj]

Thanks for working on this @elliottprogrammer 👍

----1----

** Stats Free product ($0): **

The features shown for Free do NOT work as described or I'm missing something (Do I need sandbox public api?):

----2----

TS checking is failing for the PR which broke the type check in the unit tests:

error TS2739: Type '{ jetpack_ai_monthly: { product_name: ExistingReactNode; product_slug: "jetpack_ai_monthly"; type: "jetpack_ai_monthly"; term: "TERM_MONTHLY"; bill_period: 31; categories: never[]; getFeatures: () => never[]; getProductId: () => number; getStoreSlug: () => "jetpack_ai_monthly"; }; ... 36 more ...; jetpack_backup_add...' is missing the following properties from type 'Record<"jetpack_ai_monthly" | "jetpack_boost_yearly" | "jetpack_boost_monthly" | "jetpack_backup_t0_yearly" | "jetpack_backup_t0_monthly" | "jetpack_backup_t1_yearly" | "jetpack_backup_t1_bi_yearly" | ... 33 more ... | "jetpack_backup_realtime_monthly", Product>': jetpack_stats_monthly, jetpack_stats_pwyw_yearly, jetpack_stats_free_yearly

wp-calypso/packages/calypso-products/src/products-list.ts

Line 88 in 4ce2d21

export const JETPACK_SITE_PRODUCTS_WITH_FEATURES: Record<

----3----

I'm working on support check for the Stats products. The products checks are pretty straight forward, but I'm not very sure about the feature checks. I noticed the diffs on WPCOM added the Plans as features, for example D113814-code, so I'm checking plans on the features too. I'm wondering if you have any advice please? Thanks in advance.

[matticbot]

This PR modifies the release build for happy-blocks

To test your changes on WordPress.com, run install-plugin.sh happy-blocks add/checkout-stats-included-features on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-r7r-p2

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/checkout-stats-included-features on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[matticbot]

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

App Entrypoints (~111 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +137 B  (+0.0%)      +58 B  (+0.0%)
entry-main          +137 B  (+0.0%)      +52 B  (+0.0%)

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

Sections (~177 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
checkout                                +959 B  (+0.1%)     +177 B  (+0.0%)
site-purchases                          +555 B  (+0.0%)      +88 B  (+0.0%)
settings-jetpack                        +555 B  (+0.1%)      +88 B  (+0.1%)
scan                                    +555 B  (+0.1%)      +88 B  (+0.0%)
purchases                               +555 B  (+0.0%)      +88 B  (+0.0%)
purchase-product                        +555 B  (+0.3%)      +88 B  (+0.2%)
plans                                   +555 B  (+0.1%)      +88 B  (+0.0%)
jetpack-search                          +555 B  (+0.1%)      +88 B  (+0.1%)
jetpack-connect                         +555 B  (+0.0%)      +88 B  (+0.0%)
jetpack-cloud-settings                  +555 B  (+0.1%)      +88 B  (+0.1%)
jetpack-cloud-pricing                   +555 B  (+0.1%)      +88 B  (+0.0%)
jetpack-cloud-plugin-management         +555 B  (+0.1%)      +88 B  (+0.0%)
jetpack-cloud-partner-portal            +555 B  (+0.1%)      +88 B  (+0.0%)
jetpack-cloud-features-comparison       +555 B  (+0.1%)      +88 B  (+0.1%)
jetpack-cloud-agency-dashboard          +555 B  (+0.1%)      +88 B  (+0.0%)
email                                   +555 B  (+0.1%)      +88 B  (+0.0%)
domains                                 +555 B  (+0.0%)      +88 B  (+0.0%)
backup                                  +555 B  (+0.1%)      +88 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 (~177 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal            +959 B  (+0.1%)     +177 B  (+0.1%)
async-load-calypso-blocks-editor-checkout-modal       +959 B  (+0.1%)     +177 B  (+0.1%)

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.

[elliottprogrammer]

Thanks for working on this @elliottprogrammer 👍

----1----

** Stats Free product ($0): **

The features shown for Free do NOT work as described or I'm missing something (Do I need sandbox public api?):

Thanks for reviewing @kangzj!
My apologies, looks like I did not push my last commit that separates the "included features" of Stats Free and the other Stats paid products. It should be fixed now and should now work as described. 👍

----2----

TS checking is failing for the PR which broke the type check in the unit tests:

error TS2739: Type '{ jetpack_ai_monthly: { product_name: ExistingReactNode; product_slug: "jetpack_ai_monthly"; type: "jetpack_ai_monthly"; term: "TERM_MONTHLY"; bill_period: 31; categories: never[]; getFeatures: () => never[]; getProductId: () => number; getStoreSlug: () => "jetpack_ai_monthly"; }; ... 36 more ...; jetpack_backup_add...' is missing the following properties from type 'Record<"jetpack_ai_monthly" | "jetpack_boost_yearly" | "jetpack_boost_monthly" | "jetpack_backup_t0_yearly" | "jetpack_backup_t0_monthly" | "jetpack_backup_t1_yearly" | "jetpack_backup_t1_bi_yearly" | ... 33 more ... | "jetpack_backup_realtime_monthly", Product>': jetpack_stats_monthly, jetpack_stats_pwyw_yearly, jetpack_stats_free_yearly

wp-calypso/packages/calypso-products/src/products-list.ts

Line 88 in 4ce2d21

export const JETPACK_SITE_PRODUCTS_WITH_FEATURES: Record<

Ahh yes, thank you! Ok, adding the Stats products to products-list.ts fixes this and all tests should now be passing.

----3----

I'm working on support check for the Stats products. The products checks are pretty straight forward, but I'm not very sure about the feature checks. I noticed the diffs on WPCOM added the Plans as features, for example D113814-code, so I'm checking plans on the features too. I'm wondering if you have any advice please? Thanks in advance.

@kangzj , AFAIK, I don't think the Features in diff D113814-code have anything to do with the feature-checks in Calypso. If I'm not mistaken the Calypso feature-checks are just independent constants that you can add, although I haven't fully confirmed this, so don't quote me on that, but I believe from memory that this is the case. 😉

@kangzj, this should be ready for re-review again, if you don't mind and have time. Much appreciated. 🙂

[IanRamosC]

Tests well!

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/8144637

Thank you @elliottprogrammer for including a screenshot in the description! This is really helpful for our translators.