Add additional product data(lightbox) to calypso package #67687

vikneshwar · 2022-09-12T17:31:45Z

This PR adds data to be shown in lightbox to calypso-product package

Proposed Changes

Adds functions in calypso-products to fetch Includes, Benefits, Recommended For for Products
Adds the functions in calypso-products to fetch Includes, Benefits, Recommended For for Bundles
Adds new properties to selector object

Testing Instructions

Note: This is an internal change to add data to calypso-package, no testing in UI can be done until the components are ready. However, make sure everything works as before by following the below instructions

click on Jetpack Cloud live link below
- Goto /pricing?flags=jetpack/pricing-page-rework-v1
or boot up this PR
- Run git fetch && git checkout add/lightbox-info-to-calypso-package
- Run yarn start-jetpack-cloud
- Goto http://jetpack.cloud.localhost:3000/pricing?flags=jetpack/pricing-page-rework-v1
Perform a sanity testing and confirm that everything works as before

Pre-merge Checklist

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

Related To:
-1202796695664022-as-1202796695664084/f

To see the specific tasks where the Asana app for GitHub is being used, see below:
- 0-as-1202796695664084

…kage * Adds lightbox additional data - Includes, Recommended for, Benefits to calypso-products package * Use the data from calypso package to generate item slug

github-actions · 2022-09-12T17:32:03Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-09-12T17:34:50Z

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

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

name           parsed_size           gzip_size
entry-stepper      +7977 B  (+0.2%)    +1849 B  (+0.2%)

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

Sections (~2147 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
site-purchases                       +8355 B  (+0.6%)    +1950 B  (+0.5%)
scan                                 +8355 B  (+1.2%)    +1950 B  (+1.0%)
purchases                            +8355 B  (+0.5%)    +1950 B  (+0.5%)
plans                                +8355 B  (+0.9%)    +1950 B  (+0.8%)
jetpack-search                       +8355 B  (+2.0%)    +1950 B  (+1.6%)
jetpack-connect                      +8355 B  (+0.8%)    +1950 B  (+0.7%)
jetpack-cloud-pricing                +8355 B  (+1.5%)    +1950 B  (+1.2%)
domains                              +8355 B  (+0.5%)    +1959 B  (+0.5%)
backup                               +8355 B  (+1.0%)    +1950 B  (+0.8%)
themes                               +7977 B  (+1.1%)    +1856 B  (+0.9%)
theme                                +7977 B  (+1.7%)    +1856 B  (+1.3%)
stats                                +7977 B  (+1.1%)    +1856 B  (+0.9%)
signup                               +7977 B  (+2.0%)    +1856 B  (+2.2%)
settings-writing                     +7977 B  (+1.2%)    +1856 B  (+1.0%)
settings-security                    +7977 B  (+1.8%)    +1856 B  (+1.4%)
settings-performance                 +7977 B  (+1.4%)    +1856 B  (+1.1%)
settings                             +7977 B  (+1.2%)    +1856 B  (+1.0%)
purchase-product                     +7977 B  (+4.8%)    +1856 B  (+4.2%)
posts-custom                         +7977 B  (+1.3%)    +1856 B  (+1.1%)
posts                                +7977 B  (+1.3%)    +1856 B  (+1.1%)
plugins                              +7977 B  (+0.9%)    +1856 B  (+0.7%)
people                               +7977 B  (+1.4%)    +1856 B  (+1.1%)
migrate                              +7977 B  (+2.1%)    +1856 B  (+1.6%)
media                                +7977 B  (+0.4%)    +1856 B  (+0.4%)
marketplace                          +7977 B  (+1.2%)    +1856 B  (+0.9%)
marketing                            +7977 B  (+1.2%)    +1856 B  (+1.0%)
jetpack-cloud-settings               +7977 B  (+1.9%)    +1856 B  (+1.5%)
jetpack-cloud-plugin-management      +7977 B  (+1.0%)    +1856 B  (+0.8%)
jetpack-cloud-partner-portal         +7977 B  (+1.9%)    +1856 B  (+1.5%)
jetpack-cloud-agency-dashboard       +7977 B  (+1.7%)    +1856 B  (+1.4%)
hosting                              +7977 B  (+1.5%)    +1856 B  (+1.2%)
home                                 +7977 B  (+1.0%)    +1856 B  (+0.9%)
help                                 +7977 B  (+1.2%)    +1856 B  (+1.0%)
email                                +7977 B  (+1.3%)    +1856 B  (+1.0%)
earn                                 +7977 B  (+1.5%)    +1856 B  (+1.2%)
checkout                             +7977 B  (+0.5%)    +1856 B  (+0.4%)
activity                             +7977 B  (+1.1%)    +1856 B  (+0.9%)
accept-invite                        +7977 B  (+1.7%)    +1856 B  (+1.9%)

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 (~1856 bytes added 📈 [gzipped])

name                                                              parsed_size            gzip_size
async-load-masterbar-cart-masterbar-cart-wrapper                      +7977 B   (+4.9%)    +1856 B  (+3.8%)
async-load-design-playground                                          +7977 B   (+0.4%)    +1856 B  (+0.4%)
async-load-design-blocks                                              +7977 B   (+0.3%)    +1856 B  (+0.3%)
async-load-design                                                     +7977 B   (+0.4%)    +1856 B  (+0.4%)
async-load-calypso-reader-sidebar                                     +7977 B   (+5.6%)    +1856 B  (+4.9%)
async-load-calypso-post-editor-editor-media-modal                     +7977 B   (+0.5%)    +1856 B  (+0.4%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice      +7977 B  (+10.4%)    +1856 B  (+9.3%)
async-load-calypso-my-sites-current-site-notice                       +7977 B   (+8.0%)    +1856 B  (+6.9%)
async-load-calypso-components-web-preview-component                   +7977 B   (+1.5%)    +1856 B  (+1.2%)
async-load-calypso-blocks-jitm-templates-sidebar-banner               +7977 B   (+9.2%)    +1856 B  (+8.0%)
async-load-calypso-blocks-jitm-templates-notice                       +7977 B   (+9.2%)    +1856 B  (+8.0%)
async-load-calypso-blocks-jitm-templates-default                      +7977 B   (+9.2%)    +1856 B  (+8.0%)
async-load-calypso-blocks-inline-help-popover                         +7977 B   (+1.3%)    +1856 B  (+1.1%)
async-load-calypso-blocks-editor-checkout-modal                       +7977 B   (+0.8%)    +1856 B  (+0.7%)
async-load-automattic-help-center                                     +7977 B   (+1.4%)    +1856 B  (+1.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.

packages/calypso-products/src/get-jetpack-product-benefits.ts

packages/calypso-products/src/get-jetpack-product-includes-info.ts

packages/calypso-products/src/get-jetpack-product-recommended-for.ts

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

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

packages/calypso-products/src/types.ts

* Remove constant that stored the translated text, instead call translate inline * Remove redundant type cast and return types

matticbot · 2022-09-13T07:38:03Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/lightbox-info-to-calypso-package on your sandbox.

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

packages/calypso-products/src/get-jetpack-product-includes-info.ts

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

packages/calypso-products/src/translations.tsx

* Remove extra whitespace in translation texts * Rename selector function

manzoorwanijk

This looks great now. Thank you for making the changes.

a8ci18n · 2022-09-13T11:18:19Z

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

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

elliottprogrammer · 2022-09-13T19:01:13Z

packages/calypso-products/src/translations.tsx

+	const backupIncludesInfoMonthlyLog = translate( '30-day activity log archive' );
+	const backupIncludesInfoYearlyLog = translate( '1 year activity log archive' );


@vikneshwar, we have some incorrect data here:

The way is is defined right now is: (which is incorrect)

Backup T1 (monthly) has: '30-day activity log archive'

Backup T1 (yearly) has: '1 year activity log archive'

Backup T2 (monthly) has: '30-day activity log archive'

Backup T2 (yearly) has: '1 year activity log archive'

The way it should be:

Backup T1 (yearly & monthly) should have '30-day activity log archive'.

Backup T2 (yearly & monthly) should have '1 year activity log archive'.

Could you create a new PR with the above corrections ^^?

elliottprogrammer · 2022-09-13T19:15:37Z

packages/calypso-products/src/translations.tsx

+
+	const socialBenefits = [
+		translate( 'Save time by sharing your posts automatically' ),
+		translate( 'Unlock your growth potential by building a following on social' ),


Are we missing the word "media" at the end?

I think it should be:

"... building a following on social media"

elliottprogrammer · 2022-09-13T20:54:50Z

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

+			translate( '1TB (1,000GB) of cloud storage' ),
+			translate( '1-year activity log archive' ),
+			translate( 'Unlimited one-click restores from the last 1 year' ),


In these "What's included" items for SECURITY_T2 and also BACKUP_T2 products, there are some parts of it that should be bold type. For example:

1TB (1,000GB) of cloud storage

1-year activity log archive

Unlimited one-click restores from the last 1 year

As shown on the Figma design here: m0y1jHTuDpvMPkFsOJBoNP-fi-3557%3A123824

vikneshwar · 2022-09-14T08:31:26Z

@elliottprogrammer Thanks for checking on this. I have created a new PR #67789

a8ci18n · 2022-09-21T12:31:15Z

Translation for this Pull Request has now been finished.

Jetpack New Pricing Page - Add additional product data to calypso pac…

49913f4

…kage * Adds lightbox additional data - Includes, Recommended for, Benefits to calypso-products package * Use the data from calypso package to generate item slug

vikneshwar requested a review from a team September 12, 2022 17:31

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

vikneshwar added the Jetpack Cloud Anything related to the Jetpack Cloud (cloud.jetpack.com) label Sep 12, 2022

vikneshwar changed the title ~~Jetpack New Pricing Page - Add additional product data to calypso pac…~~ Add additional product data(lightbox) to calypso package Sep 12, 2022