Add description for Most Popular products/bundles to calypso-products #67203

vikneshwar · 2022-08-31T10:42:23Z

This PR updates the pricing page featured section to show the correct description.

Proposed Changes

Adds the function in calypso-products to fetch featured text for Products
Adds the functions in calypso-products to fetch featured text for Bundles
Adds a new property featuredText to selector object
Uses the new property in FeaturedItemCard

Testing 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/featured-product-text
- Run yarn start-jetpack-cloud
- Goto http://jetpack.cloud.localhost:3000/pricing?flags=jetpack/pricing-page-rework-v1
Confirm that the text inside the cards in Most popular product matches the design
Switch to Bundles section and confirm the text inside the cards in Most popular bundle matches the design

Screenshots

BEFORE:

AFTER:

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

To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1202796695664105
- 0-as-1202796695664105
- 1202796695664022-as-1202796695664105/f

github-actions · 2022-08-31T10:42:35Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-08-31T10:48:36Z

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

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

name           parsed_size           gzip_size
entry-stepper      +1411 B  (+0.0%)     +327 B  (+0.0%)

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

Sections (~538 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
plans                                +1661 B  (+0.2%)     +398 B  (+0.2%)
jetpack-connect                      +1661 B  (+0.2%)     +398 B  (+0.2%)
jetpack-cloud-pricing                +1661 B  (+0.3%)     +398 B  (+0.3%)
site-purchases                       +1653 B  (+0.1%)     +395 B  (+0.1%)
scan                                 +1653 B  (+0.2%)     +393 B  (+0.2%)
purchases                            +1653 B  (+0.1%)     +395 B  (+0.1%)
jetpack-search                       +1653 B  (+0.4%)     +393 B  (+0.3%)
domains                              +1653 B  (+0.1%)     +399 B  (+0.1%)
backup                               +1653 B  (+0.2%)     +393 B  (+0.2%)
themes                               +1411 B  (+0.2%)     +326 B  (+0.2%)
theme                                +1411 B  (+0.3%)     +326 B  (+0.2%)
stats                                +1411 B  (+0.2%)     +326 B  (+0.2%)
signup                               +1411 B  (+0.4%)     +326 B  (+0.4%)
settings-writing                     +1411 B  (+0.2%)     +326 B  (+0.2%)
settings-security                    +1411 B  (+0.3%)     +326 B  (+0.3%)
settings-performance                 +1411 B  (+0.3%)     +326 B  (+0.2%)
settings                             +1411 B  (+0.2%)     +326 B  (+0.2%)
purchase-product                     +1411 B  (+0.8%)     +326 B  (+0.7%)
posts-custom                         +1411 B  (+0.2%)     +326 B  (+0.2%)
posts                                +1411 B  (+0.2%)     +326 B  (+0.2%)
plugins                              +1411 B  (+0.2%)     +326 B  (+0.1%)
people                               +1411 B  (+0.3%)     +326 B  (+0.2%)
migrate                              +1411 B  (+0.4%)     +326 B  (+0.3%)
media                                +1411 B  (+0.1%)     +326 B  (+0.1%)
marketplace                          +1411 B  (+0.2%)     +326 B  (+0.2%)
marketing                            +1411 B  (+0.2%)     +326 B  (+0.2%)
jetpack-cloud-settings               +1411 B  (+0.3%)     +326 B  (+0.3%)
jetpack-cloud-plugin-management      +1411 B  (+0.2%)     +326 B  (+0.1%)
jetpack-cloud-partner-portal         +1411 B  (+0.3%)     +326 B  (+0.2%)
jetpack-cloud-agency-dashboard       +1411 B  (+0.3%)     +326 B  (+0.2%)
hosting                              +1411 B  (+0.3%)     +326 B  (+0.2%)
home                                 +1411 B  (+0.2%)     +326 B  (+0.2%)
help                                 +1411 B  (+0.2%)     +326 B  (+0.2%)
email                                +1411 B  (+0.2%)     +326 B  (+0.2%)
earn                                 +1411 B  (+0.3%)     +326 B  (+0.2%)
checkout                             +1411 B  (+0.1%)     +326 B  (+0.1%)
activity                             +1411 B  (+0.2%)     +326 B  (+0.2%)
accept-invite                        +1411 B  (+0.3%)     +326 B  (+0.4%)

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

name                                                              parsed_size           gzip_size
async-load-masterbar-cart-masterbar-cart-wrapper                      +1411 B  (+0.9%)     +326 B  (+0.7%)
async-load-design-playground                                          +1411 B  (+0.1%)     +326 B  (+0.1%)
async-load-design-blocks                                              +1411 B  (+0.1%)     +326 B  (+0.1%)
async-load-design                                                     +1411 B  (+0.1%)     +326 B  (+0.1%)
async-load-calypso-reader-sidebar                                     +1411 B  (+1.0%)     +326 B  (+0.9%)
async-load-calypso-post-editor-editor-media-modal                     +1411 B  (+0.1%)     +326 B  (+0.1%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice      +1411 B  (+1.9%)     +326 B  (+1.7%)
async-load-calypso-my-sites-current-site-notice                       +1411 B  (+1.5%)     +326 B  (+1.2%)
async-load-calypso-components-web-preview-component                   +1411 B  (+0.3%)     +326 B  (+0.2%)
async-load-calypso-blocks-jitm-templates-sidebar-banner               +1411 B  (+1.7%)     +326 B  (+1.5%)
async-load-calypso-blocks-jitm-templates-notice                       +1411 B  (+1.7%)     +326 B  (+1.4%)
async-load-calypso-blocks-jitm-templates-default                      +1411 B  (+1.7%)     +326 B  (+1.5%)
async-load-calypso-blocks-inline-help-popover                         +1411 B  (+0.2%)     +326 B  (+0.2%)
async-load-calypso-blocks-editor-checkout-modal                       +1411 B  (+0.1%)     +326 B  (+0.1%)
async-load-automattic-help-center                                     +1411 B  (+0.2%)     +326 B  (+0.2%)

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.

manzoorwanijk

A better and simple approach would be to return description based on feature-flag.

For example, in packages/calypso-products/src/plans-list.tsx, you can do this inside getPlanJetpackCompleteDetails

getDescription: () =>
	isEnabled( 'jetpack/pricing-page-rework-v1' )
		? translate(
				'Get the full Jetpack suite with real-time security tools, improved site performance, and tools to grow your business.'
			)
		: translate(
				'Get the full power of Jetpack with all Security, Performance, Growth, and Design tools.'
			),

You won’t need to change it for Security

You can do the same for Backup and VideoPress in packages/calypso-products/src/translations.tsx

elliottprogrammer · 2022-08-31T16:02:31Z

A better and simple approach would be to return description based on feature-flag.

@manzoorwanijk , although the approach you describe would work for the Bundles, I don't believe it will work for the Products because we need to have access to both a "regular" description and a "featured" description at the same time because the featured products (currently Backup and VideoPress) are displayed in both sections on the page, (the Most popular section showing a "featured" description, and the All products section showing a "regular" description).

And I think it might be good to have a separate "featured" description and "regular" description for Bundles too because then other codebases that share the calypso-products package (such as the Jetpack plugin, Jetpack.com, WordPress.com mobile app?, etc) will also have access to the "featured" description for Bundles, should they want to utilize it in the future (possibly to match or sync up with the new product card designs).
For these reasons I think the approach @vikneshwar has taken here is reasonable. What do you think?

elliottprogrammer · 2022-08-31T16:13:21Z

packages/calypso-products/src/translations.tsx

+export const getJetpackProductsFeaturedText = (): Record< string, TranslateResult > => {
+	const backupDailyFeaturedText = translate(
+		'Protect your site or store. Save every change with real-time cloud backups, and restore in one click.'
+	);
+	const videoPressFeaturedText = translate(
+		'Own your content. High-quality, ad-free video build specifically for WordPress.'
+	);
+
+	return {
+		[ PRODUCT_JETPACK_BACKUP_DAILY ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_BACKUP_DAILY_MONTHLY ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_BACKUP_REALTIME ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_BACKUP_REALTIME_MONTHLY ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_BACKUP_T1_YEARLY ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_BACKUP_T1_MONTHLY ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_BACKUP_T2_YEARLY ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_BACKUP_T2_MONTHLY ]: backupDailyFeaturedText,
+		[ PRODUCT_JETPACK_VIDEOPRESS ]: videoPressFeaturedText,
+		[ PRODUCT_JETPACK_VIDEOPRESS_MONTHLY ]: videoPressFeaturedText,
+	};
+};


We should add in a "featured description" for All of the Jetpack products, that way in the future we could easily swap out/change which products are shown in the Most popular products section. Also, later we want to build in the feature where if one of the Most popular products is already owned/active, we will display one of the other products as a "featured" product in its place. This means we will need featured descriptions defined for all of the products.
Here are the "Featured descriptions" for all of the products: pbNhbs-3MZ-p2

@elliottprogrammer while I was working on it, even I thought it is good to have featuredDescription for all the products. Thanks much for initiating conversation with the marketing team and getting it ready. I will add description for other products too

vikneshwar · 2022-08-31T18:48:20Z

Products because we need to have access to both a "regular" description and a "featured" description at the same time

@elliottprogrammer, I guess @manzoorwanijk assumption is right since the new pricing page All product section isn't utilizing the description but shortDescription, in which case it may be fine to reuse the description field for featured description. However, for separation of concern, avoiding confusion and also for the reusability with other codebases which you stated, it is good to maintain featuredDescription as a separate key. I am also not sure what kind of description is actually used in lightboxes, if it is same as description then we definitely can't touch that and have to go with a separate key for featuredDescription

what do you guys think?

elliottprogrammer · 2022-08-31T21:42:46Z

Products because we need to have access to both a "regular" description and a "featured" description at the same time

@elliottprogrammer, I guess @manzoorwanijk assumption is right since the new pricing page All product section isn't utilizing the description but shortDescription, in which case it may be fine to reuse the description field for featured description. However, for separation of concern, avoiding confusion and also for the reusability with other codebases which you stated, it is good to maintain featuredDescription as a separate key. I am also not sure what kind of description is actually used in lightboxes, if it is same as description then we definitely can't touch that and have to go with a separate key for featuredDescription

what do you guys think?

Ahh yes, I see.. Thanks for explaining further @vikneshwar. Yes, I think I am still leaning toward your current approach for the same reasons you mentioned. What do think @manzoorwanijk, do you see any noteworthy disadvantages of keeping with the current approach?

manzoorwanijk · 2022-09-01T04:58:39Z

There are no disadvantages to the current approach. It's nice. I just wanted to keep the changes simple and minimal wherever possible.

manzoorwanijk

Good job 🚀

…o-product package * Adds description for products and bundles in featured section to calypso package * Makes use of newly added featuredText to render in the UI

…s in the product section Before this change products other than the one in featured section is shown in All products section, current changes shows all the products

The logic to render all items is handled already in the main component, so reverting it here

…ucts

matticbot · 2022-09-01T12:09:43Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/featured-product-text on your sandbox.

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

packages/calypso-products/src/translations.tsx

elliottprogrammer

Awesome, thanks @vikneshwar!
LGTM too! 🚀

a8ci18n · 2022-09-02T11:18:32Z

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

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

emilyaudela · 2022-09-02T13:02:51Z

Hi there! My translators called out a possible typo in the string:

Own your content. High-quality, ad-free video build specifically for WordPress.

Should build be built?

emilyaudela · 2022-09-02T13:36:25Z

One more here:

Stay ahead of security threats. Automattic scanning and one-click fixes give you and your customers peace of mind.

Automattic --> Automatic

vikneshwar · 2022-09-02T15:04:09Z

PR #67324 fixes the typo

…#67203) * Jetpack New Pricing page - add featured product/bundle text to calypso-product package * Adds description for products and bundles in featured section to calypso package * Makes use of newly added featuredText to render in the UI * Jetpack New pricing page - update the logic to render all the products in the product section Before this change products other than the one in featured section is shown in All products section, current changes shows all the products * Jetpack New pricign page - Revert back logic to render all items The logic to render all items is handled already in the main component, so reverting it here * Jetpack New pricing page - add featuredText for other standalone products * Jetpack New Pricing page - update featured text for Jetpack Daily

a8ci18n · 2022-09-21T12:30:54Z

Translation for this Pull Request has now been finished.

vikneshwar added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Aug 31, 2022

vikneshwar requested a review from a team August 31, 2022 10:42

vikneshwar added [Type] Enhancement Jetpack Cloud Anything related to the Jetpack Cloud (cloud.jetpack.com) labels Aug 31, 2022

manzoorwanijk removed the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Aug 31, 2022

manzoorwanijk assigned vikneshwar Aug 31, 2022

manzoorwanijk requested changes Aug 31, 2022

View reviewed changes

elliottprogrammer reviewed Aug 31, 2022

View reviewed changes

manzoorwanijk approved these changes Sep 1, 2022

View reviewed changes

vikneshwar added 4 commits September 1, 2022 17:32

Jetpack New Pricing page - add featured product/bundle text to calyps…

6435544

…o-product package * Adds description for products and bundles in featured section to calypso package * Makes use of newly added featuredText to render in the UI

Jetpack New pricing page - update the logic to render all the product…

684d122

…s in the product section Before this change products other than the one in featured section is shown in All products section, current changes shows all the products

Jetpack New pricign page - Revert back logic to render all items

4eea58c

The logic to render all items is handled already in the main component, so reverting it here

Jetpack New pricing page - add featuredText for other standalone prod…

5d0ec6e

…ucts

vikneshwar force-pushed the add/featured-product-text branch from 06dc068 to 5d0ec6e Compare September 1, 2022 12:03

elliottprogrammer reviewed Sep 1, 2022

View reviewed changes

packages/calypso-products/src/translations.tsx Show resolved Hide resolved

Jetpack New Pricing page - update featured text for Jetpack Daily

e208b6b

elliottprogrammer approved these changes Sep 1, 2022

View reviewed changes

elliottprogrammer added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Sep 1, 2022

vikneshwar merged commit 04a770f into trunk Sep 2, 2022

vikneshwar deleted the add/featured-product-text branch September 2, 2022 08:59

github-actions bot removed the [Status] Ready to Merge label Sep 2, 2022

vikneshwar mentioned this pull request Sep 2, 2022

Jetpack new pricing page - fix typo for featured text #67324

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add description for Most Popular products/bundles to calypso-products #67203

Add description for Most Popular products/bundles to calypso-products #67203

vikneshwar commented Aug 31, 2022 •

edited by manzoorwanijk

Loading

github-actions bot commented Aug 31, 2022 •

edited by matticbot

Loading

matticbot commented Aug 31, 2022 •

edited

Loading

manzoorwanijk left a comment

elliottprogrammer commented Aug 31, 2022 •

edited

Loading

elliottprogrammer Aug 31, 2022

vikneshwar Aug 31, 2022

vikneshwar commented Aug 31, 2022

elliottprogrammer commented Aug 31, 2022

manzoorwanijk commented Sep 1, 2022

manzoorwanijk left a comment

matticbot commented Sep 1, 2022

elliottprogrammer left a comment

a8ci18n commented Sep 2, 2022

emilyaudela commented Sep 2, 2022 •

edited

Loading

emilyaudela commented Sep 2, 2022

vikneshwar commented Sep 2, 2022

a8ci18n commented Sep 21, 2022

Add description for Most Popular products/bundles to calypso-products #67203

Add description for Most Popular products/bundles to calypso-products #67203

Conversation

vikneshwar commented Aug 31, 2022 • edited by manzoorwanijk Loading

Proposed Changes

Testing Instructions

Screenshots

Pre-merge Checklist

github-actions bot commented Aug 31, 2022 • edited by matticbot Loading

matticbot commented Aug 31, 2022 • edited Loading

manzoorwanijk left a comment

Choose a reason for hiding this comment

elliottprogrammer commented Aug 31, 2022 • edited Loading

elliottprogrammer Aug 31, 2022

Choose a reason for hiding this comment

vikneshwar Aug 31, 2022

Choose a reason for hiding this comment

vikneshwar commented Aug 31, 2022

elliottprogrammer commented Aug 31, 2022

manzoorwanijk commented Sep 1, 2022

manzoorwanijk left a comment

Choose a reason for hiding this comment

matticbot commented Sep 1, 2022

elliottprogrammer left a comment

Choose a reason for hiding this comment

a8ci18n commented Sep 2, 2022

emilyaudela commented Sep 2, 2022 • edited Loading

emilyaudela commented Sep 2, 2022

vikneshwar commented Sep 2, 2022

a8ci18n commented Sep 21, 2022

vikneshwar commented Aug 31, 2022 •

edited by manzoorwanijk

Loading

github-actions bot commented Aug 31, 2022 •

edited by matticbot

Loading

matticbot commented Aug 31, 2022 •

edited

Loading

elliottprogrammer commented Aug 31, 2022 •

edited

Loading

emilyaudela commented Sep 2, 2022 •

edited

Loading