Add Ons: Migrate use add on checkout link hook to data stores package #83489

jeyip · 2023-10-25T21:18:24Z

Related to https://github.com/Automattic/martech/issues/2023 and #83005 (comment)

This PR kicks off the migration of the add-ons data layer into an npm package. We're doing so to align with the 2023 plans pricing page refactor, which aims to migrate the plans-grid into a reusable package ( which will be shared in environments inside and outside Calypso )

Proposed Changes

Migrates the useAddOnCheckoutLink hook into the data-stores npm package

Testing Instructions

/add-ons

Create a site through /start
Navigate to /add-ons/{SITE_SLUG}
Click on the "Buy add-on" button for either the 50GB or 100GB storage add-on
Verify that the correct storage add-on is added to the checkout cart

/plans

Create a site through /start
Upgrade site to a business plan and navigate to /plans/{SITE_SLUG}
In the spotlight business plan card, select either the 50GB or 100GB storage add-on
Click on the "Upgrade" button
Verify that the correct storage add-on is added to the checkout cart

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

github-actions · 2023-10-25T21:18:39Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-10-25T22:59:29Z

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

Sections (~46 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
add-ons                     +17 B  (+0.0%)      +36 B  (+0.0%)
update-design-flow          -14 B  (-0.0%)      +10 B  (+0.0%)
plugins                     -14 B  (-0.0%)      +10 B  (+0.0%)
plans                       -14 B  (-0.0%)      +10 B  (+0.0%)
link-in-bio-tld-flow        -14 B  (-0.0%)      +10 B  (+0.0%)
jetpack-app                 -14 B  (-0.0%)      +10 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 (~19 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected        -14 B  (-0.0%)      +10 B  (+0.0%)
async-load-signup-steps-plans                          -14 B  (-0.0%)      +10 B  (+0.0%)
async-load-signup-steps-add-ons                        -14 B  (-0.0%)       +9 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.

chriskmnds

Tests out as outlined. Nice refactor. Left one comment, which might merit an update (but I think fine for later too)

chriskmnds · 2023-10-26T10:06:50Z

packages/data-stores/src/add-ons/use-add-on-checkout-link.ts

-const useAddOnCheckoutLink = (): ( ( addOnSlug: string, quantity?: number ) => string ) => {
-	const selectedSite = useSelector( getSelectedSite );
+export const useAddOnCheckoutLink = (): ( (
+	siteDetails: SiteDetails | null,


I wonder if requiring the entire SiteDetails structure might turn out to be restrictive in the end for enabling reuse e.g. if the site slug is fed here through a component or another hook that doesn't have the entire site details object? 🤔

Maybe (just thinking) this could be selectedSiteSlug: SiteDetails[ 'slug' ] | null?

Thanks for the quick review! Will mull this over shortly 🤔

Just getting back to this now 🙂

I wonder if requiring the entire SiteDetails structure might turn out to be restrictive in the end for enabling reuse

Yep! I prefer your suggestion, since it's more explicit about what's actually necessary for the useAddOnCheckoutLink hook and makes debugging a little clearer ( as well as what you've already mentioned about reuse )

Making the changes now. Thanks for the suggestion 🙏

Edit: Handled in 5853385

Add checkout functionality to spotlight plan Fix plans features main tests Fix type errors Refactor grid plans and default storage options

jeyip added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 25, 2023

jeyip self-assigned this Oct 25, 2023

jeyip changed the base branch from trunk to add/storage-add-on-upsells-to-plans-page October 25, 2023 21:18

jeyip mentioned this pull request Oct 25, 2023

Storage Add-ons: Expose add-on upsells to plans page #83005

Merged

7 tasks

jeyip force-pushed the update/use-add-on-checkout-link-hook branch 2 times, most recently from cc342ad to 5b9d560 Compare October 25, 2023 22:36

jeyip marked this pull request as ready for review October 25, 2023 22:48

jeyip requested review from a team and ddc22 October 25, 2023 22:48

jeyip added the Storage Addon label Oct 25, 2023

chriskmnds approved these changes Oct 26, 2023

View reviewed changes

jeyip force-pushed the add/storage-add-on-upsells-to-plans-page branch 3 times, most recently from 4773d1a to 8ff5ed5 Compare October 27, 2023 23:22

Base automatically changed from add/storage-add-on-upsells-to-plans-page to trunk October 27, 2023 23:45

jeyip added 6 commits October 30, 2023 16:39

Add selected storage add-on to checkout cart

33a4dd4

Expose add-on upsells to /plans pages

af30f2c

Add checkout functionality to spotlight plan Fix plans features main tests Fix type errors Refactor grid plans and default storage options

Add checkout link to storage add-ons data structure

af7fe66

Move useAddOnCheckoutLink hook into add-ons data store

11dc3c6

Add data-stores package and wordpress element dependencies

24c3009

Fix type error

6dc0701

jeyip force-pushed the update/use-add-on-checkout-link-hook branch from 162c291 to 6dc0701 Compare October 30, 2023 23:44

Update checkout link hook to use selectedSiteSlug param

5853385

jeyip merged commit 16dff10 into trunk Oct 31, 2023
3 checks passed

jeyip deleted the update/use-add-on-checkout-link-hook branch October 31, 2023 00:58

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 Oct 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Ons: Migrate use add on checkout link hook to data stores package #83489

Add Ons: Migrate use add on checkout link hook to data stores package #83489

jeyip commented Oct 25, 2023 •

edited

Loading

github-actions bot commented Oct 25, 2023 •

edited by matticbot

Loading

matticbot commented Oct 25, 2023 •

edited

Loading

chriskmnds left a comment

chriskmnds Oct 26, 2023

jeyip Oct 27, 2023

jeyip Oct 31, 2023 •

edited

Loading

Add Ons: Migrate use add on checkout link hook to data stores package #83489

Add Ons: Migrate use add on checkout link hook to data stores package #83489

Conversation

jeyip commented Oct 25, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 25, 2023 • edited by matticbot Loading

matticbot commented Oct 25, 2023 • edited Loading

chriskmnds left a comment

Choose a reason for hiding this comment

chriskmnds Oct 26, 2023

Choose a reason for hiding this comment

jeyip Oct 27, 2023

Choose a reason for hiding this comment

jeyip Oct 31, 2023 • edited Loading

Choose a reason for hiding this comment

jeyip commented Oct 25, 2023 •

edited

Loading

github-actions bot commented Oct 25, 2023 •

edited by matticbot

Loading

matticbot commented Oct 25, 2023 •

edited

Loading

jeyip Oct 31, 2023 •

edited

Loading