Checkout: Update G Suite nudge to replace CartData with withShoppingCart #48438

sirbrillig · 2020-12-17T01:15:34Z

Changes proposed in this Pull Request

This updates the GSuiteNudge component to replace CartData with useShoppingCart. This should help us eventually remove CartData (see #24019).

Testing instructions

~~I'm not sure how to trigger this upsell naturally. Pinging @stephanethomas for assistance please!~~ Turns out this is disabled.

You can force it though by visiting /checkout/:site/with-gsuite/:domain/:receiptId? (eg: http://calypso.localhost:3000/checkout/example.com/with-gsuite/example.com)

Visit the G Suite upsell page (see above).
Click "Skip for now" and verify that you are redirected to a thank-you page.
Fill out the form and click "Purchase G Suite" and verify that you are redirected to checkout with the G Suite product in the cart.

matticbot · 2020-12-17T01:15:35Z

Test live: https://calypso.live/?branch=update/gsuite-nudge-to-shopping-cart-provider

matticbot · 2020-12-17T18:11:14Z

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

Sections (~155 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +1328 B  (+0.1%)     +155 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 (~11 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal       +526 B  (+0.0%)      +11 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.

stephanethomas · 2020-12-18T10:30:11Z

I'm not sure how to trigger this upsell naturally. Pinging @stephanethomas for assistance please!

You will be presented with an upsell whenever you purchase a new domain at:

https://wordpress.com/domains/add/:domain/google-apps/:site

That would be the GSuiteUpsellCard component though. This pull request updates GSuiteNudge which is accessible from:

https://wordpress.com/checkout/:site/with-gsuite/:domain/:receipt_id

Note I'm mentioning this mostly for me, I was trying to make sure I got everything right 😅. Now to answer your question. this nudge was disabled in #39744 so I guess the only way to test it is to force its url as you suggested.

pottedmeat

Code looks good

pottedmeat · 2020-12-18T16:42:15Z

client/my-sites/checkout/gsuite-nudge/index.jsx

+		const getThankYouPageUrlArguments = {
+			siteSlug: this.props.siteSlug,
+			receiptId: this.props.receiptId,
+			cart: this.props.cart,
+		};
+		const url = getThankYouPageUrl( getThankYouPageUrlArguments );
+		page.redirect( url );


Is this a pretty safe assumption for the redirect? I was looking through the previous handler and it seemed pretty complicated.

getThankYouPageUrl was created by meticulously going through the redirect portion of handleCheckoutCompleteRedirect and replicating it, so it's at least as accurate as checkout. (And after this PR, we'll be able to remove handleCheckoutCompleteRedirect entirely!)

nbloomf · 2020-12-18T16:47:13Z

I tried the testing instructions and everything worked with no errors, but there was one minor difference.

I started on a site with just a free plan (no purchases). I added a personal plan and a domain to the cart and followed the directions. But at the last step, in checkout, my cart had the gsuite product and the domain, but the plan was removed. This is the opposite of what I thought should be expected, although it makes more sense since you can't have gsuite without a domain.

At any rate there were no errors, and I'm pretty sure that's the main thing to be concerned about with this change.

nbloomf · 2020-12-18T16:52:05Z

client/my-sites/checkout/gsuite-nudge/index.jsx

 	};

-	removePlanFromCart() {
+	removePlanFromCart = () => {


Upon further inspection maybe the plain is supposed to be removed. :)

Yes, I think it is. But I think I actually translated this logic backwards.

But if you still saw the plan removed, that implies that it was happening on the server, so this code may in fact be unnecessary. I'll verify.

You know, I think it is unused because you're not likely to get to this upsell unless the cart is empty (as you've just made a purchase).

…art (#48438) * Switch GSuiteNudge to use withShoppingCart * Wrap GSuiteNudge in CalypsoShoppingCartProvider * Replace handleCheckoutCompleteRedirect in GSuiteNudge * Add isMounted to GSuiteNudge * Fix CalypsoShoppingCartProvider import * Fix isMounted check * Remove removePlanFromCart as the cart will be empty when you arrive

sirbrillig added 3 commits December 16, 2020 20:12

Switch GSuiteNudge to use withShoppingCart

8ebe8ad

Wrap GSuiteNudge in CalypsoShoppingCartProvider

0dd7591

Replace handleCheckoutCompleteRedirect in GSuiteNudge

c36e790

sirbrillig requested a review from a team as a code owner December 17, 2020 01:15

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

sirbrillig self-assigned this Dec 17, 2020

sirbrillig requested review from a team and stephanethomas December 17, 2020 01:15

sirbrillig added [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. Post Checkout and removed [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. labels Dec 17, 2020

Add isMounted to GSuiteNudge

55fb669

sirbrillig added the [Estimate] 1 label Dec 17, 2020

sirbrillig added 2 commits December 17, 2020 12:53

Fix CalypsoShoppingCartProvider import

c1bdf79

Fix isMounted check

c981672

pottedmeat approved these changes Dec 18, 2020

View reviewed changes

pottedmeat reviewed Dec 18, 2020

View reviewed changes

nbloomf reviewed Dec 18, 2020

View reviewed changes

nbloomf approved these changes Dec 18, 2020

View reviewed changes

nbloomf 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 Dec 18, 2020

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

Remove removePlanFromCart as the cart will be empty when you arrive

c8ab957

sirbrillig merged commit e0e9829 into trunk Dec 18, 2020

sirbrillig deleted the update/gsuite-nudge-to-shopping-cart-provider branch December 18, 2020 18:27

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

matticbot removed the [Status] Ready to Merge label Dec 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: Update G Suite nudge to replace CartData with withShoppingCart #48438

Checkout: Update G Suite nudge to replace CartData with withShoppingCart #48438

sirbrillig commented Dec 17, 2020 •

edited

Loading

matticbot commented Dec 17, 2020

matticbot commented Dec 17, 2020 •

edited

Loading

stephanethomas commented Dec 18, 2020

pottedmeat left a comment

pottedmeat Dec 18, 2020

sirbrillig Dec 18, 2020

nbloomf commented Dec 18, 2020

nbloomf Dec 18, 2020

sirbrillig Dec 18, 2020

sirbrillig Dec 18, 2020

sirbrillig Dec 18, 2020

Checkout: Update G Suite nudge to replace CartData with withShoppingCart #48438

Checkout: Update G Suite nudge to replace CartData with withShoppingCart #48438

Conversation

sirbrillig commented Dec 17, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Dec 17, 2020

matticbot commented Dec 17, 2020 • edited Loading

stephanethomas commented Dec 18, 2020

pottedmeat left a comment

Choose a reason for hiding this comment

pottedmeat Dec 18, 2020

Choose a reason for hiding this comment

sirbrillig Dec 18, 2020

Choose a reason for hiding this comment

nbloomf commented Dec 18, 2020

nbloomf Dec 18, 2020

Choose a reason for hiding this comment

sirbrillig Dec 18, 2020

Choose a reason for hiding this comment

sirbrillig Dec 18, 2020

Choose a reason for hiding this comment

sirbrillig Dec 18, 2020

Choose a reason for hiding this comment

sirbrillig commented Dec 17, 2020 •

edited

Loading

matticbot commented Dec 17, 2020 •

edited

Loading