Checkout: add renewal gift route #69769

sirbrillig · 2022-11-03T22:43:20Z

Proposed Changes

This PR adds a new checkout route of the form /checkout/:productSlugs/gift/:purchaseIds to enable gifting subscription renewals to other WordPress.com users (see pbOQVh-2wh-p2 for more details). An example URL might be /checkout/business-bundle-monthly,dotblog_domain/gift/10000,100001 to gift two products.

The new route works similarly to the current route for adding a renewal to the cart, which is /checkout/:productSlugs/renew/:purchaseIds/:domain. Both routes will attempt to add renewal products to the cart, but the gift route will allow adding a renewal for a different user. The user purchasing the gift does not need to have a WordPress.com site but does need to have an account.

Fixes https://github.com/Automattic/payments-shilling/issues/1194

(Most of this work was already prepared in the POC #69639 by @dylanrevisited)

Testing Instructions

You'll need two accounts and make sure that the store is sandboxed.

With account A, purchase a personal plan (or use an account which already owns a plan).
With account B, go to the following URL: /checkout/personal-bundle/gift/<ACCOUNT_A_SUBSCRIPTION_ID>. You can use Store Admin to find the subscription ID of the account A's plan.
Verify that you see the gift subscription in account B's shopping cart.

This will clarify this this route differs from other siteless checkout flows.

github-actions · 2022-11-03T22:43:32Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-11-03T22:50:55Z

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

Sections (~168 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
checkout                              +628 B  (+0.0%)     +168 B  (+0.0%)
woocommerce-installation               +35 B  (+0.0%)      +13 B  (+0.0%)
woocommerce                            +35 B  (+0.0%)      +13 B  (+0.0%)
themes                                 +35 B  (+0.0%)      +13 B  (+0.0%)
theme                                  +35 B  (+0.0%)      +13 B  (+0.0%)
stats                                  +35 B  (+0.0%)      +13 B  (+0.0%)
site-purchases                         +35 B  (+0.0%)      +13 B  (+0.0%)
settings-writing                       +35 B  (+0.0%)      +13 B  (+0.0%)
settings-security                      +35 B  (+0.0%)      +13 B  (+0.0%)
settings-performance                   +35 B  (+0.0%)      +13 B  (+0.0%)
settings-jetpack                       +35 B  (+0.0%)      +13 B  (+0.0%)
settings-discussion                    +35 B  (+0.0%)      +13 B  (+0.0%)
settings                               +35 B  (+0.0%)      +13 B  (+0.0%)
scan                                   +35 B  (+0.0%)      +13 B  (+0.0%)
purchases                              +35 B  (+0.0%)      +13 B  (+0.0%)
promote-post                           +35 B  (+0.0%)      +13 B  (+0.0%)
preview                                +35 B  (+0.0%)      +13 B  (+0.0%)
posts-custom                           +35 B  (+0.0%)      +13 B  (+0.0%)
posts                                  +35 B  (+0.0%)      +13 B  (+0.0%)
plugins                                +35 B  (+0.0%)      +13 B  (+0.0%)
plans                                  +35 B  (+0.0%)      +13 B  (+0.0%)
people                                 +35 B  (+0.0%)      +13 B  (+0.0%)
pages                                  +35 B  (+0.0%)      +13 B  (+0.0%)
migrate                                +35 B  (+0.0%)      +13 B  (+0.0%)
media                                  +35 B  (+0.0%)      +13 B  (+0.0%)
marketplace                            +35 B  (+0.0%)      +13 B  (+0.0%)
marketing                              +35 B  (+0.0%)      +13 B  (+0.0%)
jetpack-social                         +35 B  (+0.0%)      +13 B  (+0.0%)
jetpack-search                         +35 B  (+0.0%)      +13 B  (+0.0%)
jetpack-connect                        +35 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-settings                 +35 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-pricing                  +35 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-plugin-management        +35 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud                          +35 B  (+0.0%)      +13 B  (+0.0%)
import                                 +35 B  (+0.0%)      +13 B  (+0.0%)
hosting                                +35 B  (+0.0%)      +13 B  (+0.0%)
home                                   +35 B  (+0.0%)      +13 B  (+0.0%)
gutenberg-editor                       +35 B  (+0.0%)      +13 B  (+0.0%)
google-my-business                     +35 B  (+0.0%)      +13 B  (+0.0%)
export                                 +35 B  (+0.0%)      +13 B  (+0.0%)
email                                  +35 B  (+0.0%)      +13 B  (+0.0%)
earn                                   +35 B  (+0.0%)      +13 B  (+0.0%)
domains                                +35 B  (+0.0%)      +13 B  (+0.0%)
customize                              +35 B  (+0.0%)      +13 B  (+0.0%)
concierge                              +35 B  (+0.0%)      +13 B  (+0.0%)
comments                               +35 B  (+0.0%)      +13 B  (+0.0%)
backup                                 +35 B  (+0.0%)      +13 B  (+0.0%)
add-ons                                +35 B  (+0.0%)      +13 B  (+0.0%)
activity                               +35 B  (+0.0%)      +13 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 (~41 bytes added 📈 [gzipped])

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

client/my-sites/controller.js

client/my-sites/checkout/controller.jsx

client/my-sites/checkout/utils.ts

client/my-sites/checkout/controller.jsx

pottedmeat

Code looks good, just have questions.

Testing:

Verified it asks me to log in if visiting when logged out
Did a full credit, partial credit with credit card, credit card, and PayPal purchase
Did a plan/domain combination purchase with credit card and PayPal
Plain/domain combination purchase did not complete the redirect for me

sirbrillig · 2022-11-07T18:53:48Z

client/my-sites/checkout/controller.jsx

-	const product = isJetpackCheckout
-		? context.params.productSlug
-		: getProductSlugFromContext( context );
+	const product = getProductSlugFromContext( context );


This PR modifies getProductSlugFromContext() to support determining isJetpackCheckout on its own, which allows us to simplify this call.

NOTE: this will affect redirectJetpackLegacyPlans() which also calls getProductSlugFromContext(), but I think that should be fine since it's only used on non-Jetpack-siteless-checkout routes.

sirbrillig · 2022-11-07T18:54:43Z

client/my-sites/checkout/index.js

 	page(
 		`/checkout/jetpack/:productSlug`,
 		setLocaleMiddleware(),
 		noSite,
-		checkoutSiteless,
+		checkoutJetpackSiteless,


This PR renames this controller from checkoutSiteless to checkoutJetpackSiteless to clarify the difference between this route and other siteless checkout flows.

sirbrillig · 2022-11-07T19:01:22Z

@pottedmeat could you give this another try just to make sure I didn't break anything?

Plain/domain combination purchase did not complete the redirect for me

When this happened, were there any errors in the console?

pottedmeat · 2022-11-07T20:48:15Z

When this happened, were there any errors in the console?

No errors.

sirbrillig · 2022-11-07T21:40:59Z

Plain/domain combination purchase did not complete the redirect for me

I've created #69833 to investigate this.

sirbrillig added 8 commits November 3, 2022 17:53

Rename checkoutSiteless controller to checkoutJetpackSiteless

aadf122

This will clarify this this route differs from other siteless checkout flows.

Add checkout gift purchase route

c232627

Make sure not to set selected site for gift checkout flow

54ed933

Add redirectLoggedOut to gift checkout route middleware

5faa2c8

Add docs to usePrepareProductsForCart/useAddProductsFromUrl

d8f7101

Add isGiftPurchase to renewals in usePrepareProductsForCart

3a1c2a6

Add isGiftPurchase to RequestCartProductExtra

932f6d3

Pass isGiftPurchase from route to usePrepareProductsForCart

0761ae7

sirbrillig self-assigned this Nov 3, 2022

sirbrillig added 7 commits November 3, 2022 19:06

Refactor getProductSlugFromContext to support jetpack checkout

b194427

Add tests for productSlug to getProductSlugFromContext

4140aa5

Add test for getting gift product slug

a33a6fa

Add support for gift slug to getProductSlugFromContext

aac18b2

Improve jetpack checkout test case for getProductSlugFromContext

d5c1fed

Improve getProductSlugFromContext for gifts

da1a067

Add test for product in gift url

11cb161

sirbrillig marked this pull request as ready for review November 3, 2022 23:52

sirbrillig requested a review from a team as a code owner November 3, 2022 23:52

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

pottedmeat self-requested a review November 7, 2022 15:07

pottedmeat reviewed Nov 7, 2022

View reviewed changes

client/my-sites/controller.js Outdated Show resolved Hide resolved

pottedmeat reviewed Nov 7, 2022

View reviewed changes

client/my-sites/checkout/controller.jsx Show resolved Hide resolved

pottedmeat reviewed Nov 7, 2022

View reviewed changes

client/my-sites/checkout/utils.ts Outdated Show resolved Hide resolved

pottedmeat reviewed Nov 7, 2022

View reviewed changes

client/my-sites/checkout/controller.jsx Show resolved Hide resolved

pottedmeat approved these changes Nov 7, 2022

View reviewed changes

sirbrillig added 3 commits November 7, 2022 13:07

Fix bug where noSite controller would nullify selected site

5629cd5

Add isContextJetpackSitelessCheckout

6b854c4

Update getProductSlugFromContext tests to create explicit context

10fbd01

sirbrillig added 4 commits November 7, 2022 13:47

Update getProductSlugFromContext to get jetpack checkout from context

86e303c

Use isContextJetpackSitelessCheckout in checkout controller

2ec968e

Remove unnecessary gift slug fallback in getProductSlugFromContext

2cc13d1

Remove no-longer-relevant test case for gift context

26bcd12

sirbrillig commented Nov 7, 2022

View reviewed changes

pottedmeat approved these changes Nov 7, 2022

View reviewed changes

sirbrillig merged commit 2c707ea into trunk Nov 7, 2022

sirbrillig deleted the add/checkout-gift-route branch November 7, 2022 20:51

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 7, 2022

danielmx-dev mentioned this pull request Nov 7, 2022

[WIP] Add support for gift purchases #69639

Closed

sirbrillig mentioned this pull request Nov 7, 2022

Post-checkout redirect sometimes gets stuck in site fetching loop #69833

Closed

sirbrillig mentioned this pull request Nov 8, 2022

Use the new gift thank you page #69845

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: add renewal gift route #69769

Checkout: add renewal gift route #69769

sirbrillig commented Nov 3, 2022 •

edited

Loading

github-actions bot commented Nov 3, 2022 •

edited by matticbot

Loading

matticbot commented Nov 3, 2022 •

edited

Loading

pottedmeat left a comment

sirbrillig Nov 7, 2022 •

edited

Loading

sirbrillig Nov 7, 2022

sirbrillig commented Nov 7, 2022 •

edited

Loading

pottedmeat commented Nov 7, 2022

sirbrillig commented Nov 7, 2022

Checkout: add renewal gift route #69769

Checkout: add renewal gift route #69769

Conversation

sirbrillig commented Nov 3, 2022 • edited Loading

Proposed Changes

Testing Instructions

github-actions bot commented Nov 3, 2022 • edited by matticbot Loading

matticbot commented Nov 3, 2022 • edited Loading

pottedmeat left a comment

Choose a reason for hiding this comment

sirbrillig Nov 7, 2022 • edited Loading

Choose a reason for hiding this comment

sirbrillig Nov 7, 2022

Choose a reason for hiding this comment

sirbrillig commented Nov 7, 2022 • edited Loading

pottedmeat commented Nov 7, 2022

sirbrillig commented Nov 7, 2022

sirbrillig commented Nov 3, 2022 •

edited

Loading

github-actions bot commented Nov 3, 2022 •

edited by matticbot

Loading

matticbot commented Nov 3, 2022 •

edited

Loading

sirbrillig Nov 7, 2022 •

edited

Loading

sirbrillig commented Nov 7, 2022 •

edited

Loading