Add-ons: Storage as a tiered-volume product [WIP] #75294

gmovr · 2023-04-04T17:27:28Z

Related to #

Proposed Changes

Allows an add-on to have a quantity, both for the checkout URL with quantity meta, and for calculating display prices.
I will revisit this, and do some performance fixes where I can. I will also likely use the existing selectors for tiered-volume products, e.g. getPriceTierForUnits.
This is not the design. We will likely combine these together, and have a dropdown (so the add-on card will have state and re-render when the quantity of GB is selected. I also need to add the real icons. Mostly for testing and scoping out the needed work.

To do

Handle translations (when final copy is ready)
Icons
Design review
Performance, e.g. now the key for iteration over the add-ons list is the product slug, which now isn't unique.

Testing Instructions

Confirm that existing checkout links work
Confirm that the add-on links for 50 and 100 GB storage works.
To see the grid, you need to patch backend code: D103440-code, since these are not in prod.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
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)?
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)?

…r conditional rendering.

…to redux/global state

…additional parameters.

…n right now

… revisit these, and likely use more of the already existing selectors. But this works for now/testing

github-actions · 2023-04-04T17:27:42Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-04-04T17:33:48Z

This PR modifies the release build for happy-blocks

To test your changes on WordPress.com, run install-plugin.sh happy-blocks add/quantity-based-storage-addon on your sandbox.

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

matticbot · 2023-04-04T17:36:26Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/quantity-based-storage-addon on your sandbox.

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

matticbot · 2023-04-04T17:37:32Z

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

App Entrypoints (~295 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-stepper               -796 B  (-0.0%)     -214 B  (-0.0%)
entry-main                  -796 B  (-0.1%)     -232 B  (-0.1%)
entry-login                 -481 B  (-0.0%)     -161 B  (-0.0%)
entry-domains-landing       -481 B  (-0.1%)     -164 B  (-0.1%)
entry-browsehappy           -481 B  (-0.5%)     -164 B  (-0.5%)
entry-subscriptions         -431 B  (-0.0%)     -152 B  (-0.0%)

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

Sections (~910 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
add-ons                               +33164 B  (+7.8%)    +8780 B  (+6.3%)
settings                               -1169 B  (-0.1%)      -17 B  (-0.0%)
jetpack-cloud-plugin-management         +579 B  (+0.1%)     +172 B  (+0.1%)
jetpack-cloud-partner-portal            +579 B  (+0.1%)      +94 B  (+0.1%)
jetpack-cloud-features-comparison       +579 B  (+0.1%)      +94 B  (+0.0%)
jetpack-cloud-agency-dashboard          +579 B  (+0.1%)     +172 B  (+0.1%)
checkout                                +579 B  (+0.0%)      +94 B  (+0.0%)
jetpack-connect                         +486 B  (+0.0%)     -149 B  (-0.0%)
plans                                   +383 B  (+0.0%)     -230 B  (-0.1%)
jetpack-cloud-pricing                   +383 B  (+0.0%)     -222 B  (-0.1%)
site-purchases                          +319 B  (+0.0%)     +131 B  (+0.0%)
purchases                               +319 B  (+0.0%)     +135 B  (+0.0%)
settings-performance                    -234 B  (-0.0%)      +67 B  (+0.0%)
settings-security                       -232 B  (-0.0%)      +58 B  (+0.0%)
plugins                                 -232 B  (-0.0%)      +55 B  (+0.0%)
hosting                                 -232 B  (-0.0%)      +57 B  (+0.0%)
settings-reading                        +141 B  (+0.0%)     -284 B  (-0.2%)
email                                   -129 B  (-0.0%)      +66 B  (+0.0%)
earn                                    -129 B  (-0.0%)      +70 B  (+0.0%)
settings-discussion                     +128 B  (+0.0%)     -260 B  (-0.2%)
people                                  +105 B  (+0.0%)      +90 B  (+0.0%)
newsletter-flow                          +88 B  (+0.0%)      +70 B  (+0.0%)
write-flow                               +80 B  (+0.0%)      +16 B  (+0.0%)
videopress-flow                          +80 B  (+0.0%)      +16 B  (+0.0%)
update-design-flow                       +80 B  (+0.0%)      +16 B  (+0.0%)
signup                                   +80 B  (+0.0%)      +16 B  (+0.0%)
link-in-bio-tld-flow                     +80 B  (+0.0%)      +16 B  (+0.0%)
link-in-bio-flow                         +80 B  (+0.0%)      +16 B  (+0.0%)
home                                     +80 B  (+0.0%)      +16 B  (+0.0%)
free-flow                                +80 B  (+0.0%)      +16 B  (+0.0%)
build-flow                               +80 B  (+0.0%)      +16 B  (+0.0%)
accept-invite                            +80 B  (+0.0%)      +16 B  (+0.0%)
site-setup-flow                          -26 B  (-0.0%)      -25 B  (-0.0%)
site-blocks                              -26 B  (-0.0%)      +81 B  (+0.0%)
security                                 -26 B  (-0.0%)      +81 B  (+0.0%)
privacy                                  -26 B  (-0.0%)      +81 B  (+0.0%)
plugin-bundle-flow                       -26 B  (-0.0%)      -26 B  (-0.1%)
notification-settings                    -26 B  (-0.0%)      +81 B  (+0.0%)
media                                    -26 B  (-0.0%)      -98 B  (-0.0%)
me                                       -26 B  (-0.0%)      +81 B  (+0.0%)
help                                     -26 B  (-0.0%)      +81 B  (+0.0%)
happychat                                -26 B  (-0.0%)      +81 B  (+0.0%)
account-close                            -26 B  (-0.0%)      +81 B  (+0.0%)
account                                  -26 B  (-0.0%)      +81 B  (+0.0%)
devdocs                                  +23 B  (+0.0%)      +11 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 (~561 bytes removed 📉 [gzipped])

name                                                            parsed_size            gzip_size
async-load-signup-steps-add-ons                                    +33102 B  (+13.3%)    +8553 B  (+10.5%)
async-load-masterbar-cart-masterbar-cart-wrapper                     +579 B   (+0.6%)      +94 B   (+0.3%)
async-load-calypso-my-sites-checkout-modal                           +579 B   (+0.1%)      +94 B   (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                      +579 B   (+0.1%)      +94 B   (+0.0%)
async-load-design-blocks                                             -234 B   (-0.0%)      +67 B   (+0.0%)
async-load-signup-steps-woocommerce-install-step-business-info       -150 B   (-0.1%)     -479 B   (-0.5%)
async-load-calypso-blocks-inline-help-popover                         +50 B   (+0.0%)      +22 B   (+0.0%)
async-load-signup-steps-woocommerce-install-step-store-address        -26 B   (-0.0%)     -142 B   (-0.2%)
async-load-design-wordpress-components-gallery                        +18 B   (+0.0%)     +114 B   (+0.1%)

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.

sirbrillig

I know this is a WIP but I had a drive-by suggestion.

sirbrillig · 2023-04-04T17:37:13Z

client/my-sites/add-ons/hooks/use-add-on-checkout-link.ts

+	const selectedSite = useSelector( getSelectedSite );
+
+	return ( addOnSlug: string, quantity?: number ): string => {
+		const checkoutLinkFormat = `/checkout/${ selectedSite?.slug }/${ addOnSlug }`;


If selectedSite does not exist, this will create a URL like /checkout/undefined/product. Do you think we should do something different in that case? Maybe just /checkout/product (which should work well by showing a site picker first).

Thanks! I added a check for this now, and it will return the site picker if no selectedSite is provided.

…eless checkout link

…wn field to choose the wanted variation (e.g. a price tier, quantity, etc.)

gmovr added 8 commits April 4, 2023 13:15

Adding the storage addon config key in various environments

7627291

Basic selector for whether the storage addon flag is enabled. E.g. fo…

7a29a13

…r conditional rendering.

Moving this file out of the selectors directory, as it's not related …

7ac95cf

…to redux/global state

Moving checkout link generation to a hook, as we'll now want to pass …

f1ee049

…additional parameters.

Removing conditional for no-adverts, as we don't highlight this add-o…

3fd8e15

…n right now

Fixing this comment

79c1ee6

Fixing URL structure for checkout page

ffd1297

Adding basic handling of tiered-volume/quantity based pricing. I will…

e861dc6

… revisit these, and likely use more of the already existing selectors. But this works for now/testing

gmovr added the DO NOT MERGE label Apr 4, 2023

gmovr self-assigned this Apr 4, 2023

gmovr changed the base branch from trunk to add/config-flags-storage-update April 4, 2023 17:28

gmovr requested review from a team and worldomonation as code owners April 4, 2023 17:28

gmovr requested review from a team April 4, 2023 17:28

gmovr requested review from a team as code owners April 4, 2023 17:28

gmovr requested a review from a team April 4, 2023 17:28

gmovr requested a review from a team as a code owner April 4, 2023 17:28

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 4, 2023

gmovr changed the base branch from add/config-flags-storage-update to trunk April 4, 2023 17:29

gmovr removed request for a team April 4, 2023 17:29

gmovr removed request for a team and worldomonation April 4, 2023 17:29

sirbrillig reviewed Apr 4, 2023

View reviewed changes

gmovr added 3 commits April 5, 2023 15:06

Handling cases where selectedSite is undefined, and returning the sit…

3061a90

…eless checkout link

Testing to allow variations of add-ons, and rendering a select/dropdo…

e882d71

…wn field to choose the wanted variation (e.g. a price tier, quantity, etc.)

Changing the checkout line item to show amount of GB

b23670e

gmovr added the [Status] Needs Rebase label Apr 14, 2023

sharpirate self-assigned this May 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add-ons: Storage as a tiered-volume product [WIP] #75294

Add-ons: Storage as a tiered-volume product [WIP] #75294

gmovr commented Apr 4, 2023 •

edited

Loading

github-actions bot commented Apr 4, 2023 •

edited by matticbot

Loading

matticbot commented Apr 4, 2023

matticbot commented Apr 4, 2023

matticbot commented Apr 4, 2023 •

edited

Loading

sirbrillig left a comment

sirbrillig Apr 4, 2023

gmovr Apr 5, 2023

Add-ons: Storage as a tiered-volume product [WIP] #75294

Are you sure you want to change the base?

Add-ons: Storage as a tiered-volume product [WIP] #75294

Conversation

gmovr commented Apr 4, 2023 • edited Loading

Proposed Changes

To do

Testing Instructions

Pre-merge Checklist

github-actions bot commented Apr 4, 2023 • edited by matticbot Loading

matticbot commented Apr 4, 2023

matticbot commented Apr 4, 2023

matticbot commented Apr 4, 2023 • edited Loading

sirbrillig left a comment

Choose a reason for hiding this comment

sirbrillig Apr 4, 2023

Choose a reason for hiding this comment

gmovr Apr 5, 2023

Choose a reason for hiding this comment

gmovr commented Apr 4, 2023 •

edited

Loading

github-actions bot commented Apr 4, 2023 •

edited by matticbot

Loading

matticbot commented Apr 4, 2023 •

edited

Loading