Offer Reset: create Upsell page #44954

rcanepa · 2020-08-14T22:30:31Z

Changes proposed in this Pull Request

Create the Upsell page that nudge users into buying Jetpack Backup or Jetpack Scan depending on what product they previously selected.
Configurations allowed: from Jetpack Backup Daily to Jetpack Scan Daily, and from Jetpack Scan Daily to Jetpack Backup Daily. Real-time won't be supported at this time because there is no real Jetpack Scan Real-time yet.

Implementation notes

We don't have the real discounted price for upsells so for now we are showing the standard price of the product. It's expected that discounted prices of upsells will come from the API.
We don't have an official source for products and their allowed upsells. This PR hardcodes a matrix for that purpose but this data should come from an API.

Testing instructions

Run this PR.
Enable the Offer Reset AB experiment.

From Jetpack Backup Daily to Jetpack Scan Daily (monthly and yearly)

Visit http://calypso.localhost:3000/plans/:site/jetpack_backup_daily/annual/additions
Visit http://calypso.localhost:3000/plans/:site/jetpack_backup_daily_monthly/monthly/additions

From Jetpack Scan Daily to Jetpack Backup Daily (monthly and yearly)

Visit http://calypso.localhost:3000/plans/:site/jetpack_scan/annual/additions
Visit http://calypso.localhost:3000/plans/:site/jetpack_scan_monthly/monthly/additions

Fixes 1169247016322522-as-1189040767770459

Demo

Jetpack Scan + upsell Jetpack Backup Daily

Jetpack Backup Daily + upsell Jetpack Scan

matticbot · 2020-08-14T22:30:33Z

Test live: https://calypso.live/?branch=add/offer-reset-upsell-checkout-step

matticbot · 2020-08-14T22:30:53Z

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

Sections (~673 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
plans      +2585 B  (+0.5%)     +673 B  (+0.5%)

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

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.

ChaosExAnima

Feedback left. Note this will need a significant rebase when #44927 is merged, so may be worth waiting till afterwards to tackle my feedback 😄

ChaosExAnima · 2020-08-17T19:06:39Z

client/my-sites/plans-v2/upsell.tsx

+	const onPurchaseSingleProduct = useCallback( () => {
+		addItem( jetpackProductItem( productSlug ) );
+		goToCheckout();
+	}, [ goToCheckout, productSlug ] );


Curious why the code uses useCallback here? Does any of these need memoization?

Not memoization but on every render those functions are going to be recreated making children components re-render even if the rest of the props haven't changed. I'll say that I'm used to do it. On higher components in the components tree could be troublesome because by definition those will have many children.

On the other hand, I don't think having those could hurt. What do you think?

ChaosExAnima · 2020-08-17T19:07:43Z

client/my-sites/plans-v2/upsell.tsx

+								mainProduct: mainProductName,
+								upsellProduct: upsellProductName,
+							},
+							comment: '%s are abbreviated name of product such as Scan or Backup',


Let's be specific as to what %s the comment is referring to, in case this string ever has something else added.

Yeah, those are mistakes from a copy-paste.

ChaosExAnima · 2020-08-17T19:08:32Z

client/my-sites/plans-v2/upsell.tsx

+									mainProduct: mainProductName,
+									upsellProduct: upsellProductName,
+								},
+							}


Needs a comment. Also should the currency symbol be an arg?

Good catch!

ChaosExAnima · 2020-08-17T19:11:02Z

client/my-sites/plans-v2/upsell.tsx

-	if ( ! product ) {
+	// If the product is not valid or there is no upsell product for it,
+	// send the user to the selector page.
+	if ( ! mainProduct || ! upsellProduct ) {


Perhaps the code could instead send the user to the checkout page if there's no upsell product? The current structure of does not check if an upsell exists before sending the user to this page.

This a very good idea.

ChaosExAnima · 2020-08-17T19:13:13Z

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

@@ -209,6 +210,7 @@ export function itemToSelectorProduct(
 			productSlug: item.product_slug,
 			iconSlug: `${ item.product_slug }_v2`,
 			displayName: getJetpackProductDisplayName( item ),
+			shortName: getJetpackProductShortName( item ),


The type above adds shortName as required, but it is only implemented on products, not plans. This will cause TS errors and should be fixed, even with an empty string if no such data exists for plans.

Good catch.

ChaosExAnima

Whoops, meant to not approve!

ChaosExAnima

Looks okay! Some minor cleanup comments, but overall looks good. 👍

ChaosExAnima · 2020-08-18T15:08:00Z

client/my-sites/plans-v2/upsell.tsx

+			/>
+		</Main>
+	);
+};


Good for now, but let's re-use the ProductCardWrapper component soon.

Will do in follow up PR because I we need to update ProductCardWrapper to make it accept a onCancelClick and cancelLabel.

ChaosExAnima · 2020-08-18T15:08:37Z

client/my-sites/plans-v2/upsell.tsx

+				onButtonClick={ onPurchaseBothProducts }
+				cancelLabel={ translate( 'No, I do not want %s', {
+					args: [ upsellProductName ],
+				} ) }


The two strings here should have a comment.

Good catch!

a8ci18n · 2020-08-18T17:16:13Z

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

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

a8ci18n · 2020-08-27T17:28:26Z

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

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

a8ci18n · 2020-09-04T09:28:24Z

Translation for this Pull Request has now been finished.

rcanepa added [Feature] Plans & Upgrades All of the plans on WordPress.com and flow for upgrading plans. [Status] In Progress labels Aug 14, 2020

rcanepa force-pushed the add/offer-reset-upsell-checkout-step branch 2 times, most recently from 685d9d0 to c2ef599 Compare August 17, 2020 16:14

rcanepa added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Aug 17, 2020

rcanepa requested a review from a team August 17, 2020 16:22

ChaosExAnima approved these changes Aug 17, 2020

View reviewed changes

ChaosExAnima requested changes Aug 17, 2020

View reviewed changes

rcanepa added 8 commits August 17, 2020 18:20

Create initial version of the Upsell page

7411580

Use lowercase variables

81e9a48

Remove unnecessary field from check

0fed642

Refactor component into two sub components

9f9fd0d

Add items to cart and move user to checkout page

637104b

Allow adding multiple Jetpack products to the cart

fa2270f

Set '' if there is no short name for a item

2988f3b

Redirect to checkout if there is no upsell product

9a7fff7

rcanepa force-pushed the add/offer-reset-upsell-checkout-step branch from c2ef599 to 9a7fff7 Compare August 17, 2020 22:08

ChaosExAnima approved these changes Aug 18, 2020

View reviewed changes

Add comments to translations

d4753da

rcanepa merged commit 7d9ea1f into master Aug 18, 2020

rcanepa deleted the add/offer-reset-upsell-checkout-step branch August 18, 2020 16:03

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 18, 2020

rcanepa mentioned this pull request Aug 18, 2020

Offer Reset: allow multiple products only when in Offer Reset #45006

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Offer Reset: create Upsell page #44954

Offer Reset: create Upsell page #44954

rcanepa commented Aug 14, 2020 •

edited

matticbot commented Aug 14, 2020

matticbot commented Aug 14, 2020 •

edited

ChaosExAnima left a comment

ChaosExAnima Aug 17, 2020

rcanepa Aug 17, 2020

ChaosExAnima Aug 17, 2020

rcanepa Aug 17, 2020

ChaosExAnima Aug 17, 2020

rcanepa Aug 17, 2020

ChaosExAnima Aug 17, 2020

rcanepa Aug 17, 2020

ChaosExAnima Aug 17, 2020

rcanepa Aug 17, 2020

ChaosExAnima left a comment

ChaosExAnima left a comment

ChaosExAnima Aug 18, 2020

rcanepa Aug 18, 2020

ChaosExAnima Aug 18, 2020

rcanepa Aug 18, 2020

a8ci18n commented Aug 18, 2020

a8ci18n commented Aug 27, 2020 •

edited

a8ci18n commented Sep 4, 2020

Offer Reset: create Upsell page #44954

Offer Reset: create Upsell page #44954

Conversation

rcanepa commented Aug 14, 2020 • edited

Changes proposed in this Pull Request

Implementation notes

Testing instructions

Demo

Jetpack Scan + upsell Jetpack Backup Daily

Jetpack Backup Daily + upsell Jetpack Scan

matticbot commented Aug 14, 2020

matticbot commented Aug 14, 2020 • edited

ChaosExAnima left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChaosExAnima left a comment

Choose a reason for hiding this comment

ChaosExAnima left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a8ci18n commented Aug 18, 2020

a8ci18n commented Aug 27, 2020 • edited

a8ci18n commented Sep 4, 2020

rcanepa commented Aug 14, 2020 •

edited

matticbot commented Aug 14, 2020 •

edited

a8ci18n commented Aug 27, 2020 •

edited