Plans (grid): Reflect storage add-on selection on intro offer price and billing desc #95428

chriskmnds · 2024-10-16T10:59:01Z

Fixes #95342

Proposed Changes

Enables storage selection in the plans grid to be reflected on the intro offer prices.

I'll skip a long description as I've run out of time. Read #95342 as this precisely addresses the issue

Why are these changes being made?

Fix #95342

Testing Instructions

Main:

Switch to INR currency (or other currency that gives first-year discount)
Go to /plans/:site and /start/plans (or /setup/onboarding/plans)
Confirm prices and billing descriptions are rendered correctly with the intro & cross-out pricing
Go to Business or Commerce plans in the grid and select a storage add-on upgrade
Confirm the pricing is updated to reflect the additional cost (as done for non discounted currencies)
Repeat with USD/EUR and confirm the same

Other:

These changes also affect intro-offers displayed elsewhere.

Confirm the upgrade-plan for the migration flow renders the intro pricing correctly cc @merkushin

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-aUh-p2)?

github-actions · 2024-10-16T10:59:13Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-122418&env=a8c-for-agencies

chriskmnds · 2024-10-17T14:57:57Z

packages/data-stores/src/plans/hooks/test/use-pricing-meta-for-grid-plans.ts

+					...SITE_PLANS[ PLAN_BUSINESS ],
+					pricing: {
+						...SITE_PLANS[ PLAN_BUSINESS ].pricing,
+						costOverrides: [ { overrideCode: COST_OVERRIDE_REASONS.RECENT_PLAN_PRORATION } ],


No idea why this test worked previously. This is needed for the condition to pass, but curious if I'm missing something. @aneeshd16 would you mind confirming?

This was previously defined in the mock here:

wp-calypso/packages/data-stores/src/plans/hooks/test/use-pricing-meta-for-grid-plans.ts

Line 81 in 8bab616

overrideCode: 'recent-plan-proration',

… prices

matticbot · 2024-10-17T16:01:54Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/plans-intro-pricing-with-storage-selection on your sandbox.

matticbot · 2024-10-17T16:05:31Z

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

Sections (~1292 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
hosting                       +713 B  (+0.0%)     +150 B  (+0.0%)
import-hosted-site-flow       +707 B  (+0.1%)     +102 B  (+0.0%)
theme                         +653 B  (+0.1%)     +138 B  (+0.1%)
stats                         +653 B  (+0.1%)     +123 B  (+0.0%)
site-purchases                +653 B  (+0.0%)     +113 B  (+0.0%)
purchases                     +653 B  (+0.0%)     +113 B  (+0.0%)
posts-custom                  +653 B  (+0.1%)     +155 B  (+0.1%)
posts                         +653 B  (+0.1%)     +155 B  (+0.1%)
migrate                       +653 B  (+0.2%)     +119 B  (+0.1%)
domains                       +653 B  (+0.0%)     +113 B  (+0.0%)
checkout                      +653 B  (+0.0%)     +140 B  (+0.0%)
update-design-flow            +611 B  (+0.1%)      +76 B  (+0.0%)
plugins                       +611 B  (+0.0%)      +67 B  (+0.0%)
plans                         +611 B  (+0.0%)      +68 B  (+0.0%)
link-in-bio-tld-flow          +611 B  (+0.0%)      +61 B  (+0.0%)
jetpack-app                   +611 B  (+0.1%)      +66 B  (+0.0%)
themes                        +231 B  (+0.0%)      +52 B  (+0.0%)
staging-site                  +231 B  (+0.0%)      +53 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 (~327 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-design-blocks                              +653 B  (+0.0%)     +153 B  (+0.0%)
async-load-signup-steps-plans-theme-preselected       +611 B  (+0.2%)      +66 B  (+0.1%)
async-load-signup-steps-plans                         +611 B  (+0.2%)      +66 B  (+0.1%)
async-load-signup-steps-theme-selection               +231 B  (+0.1%)      +52 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal            +231 B  (+0.0%)      +53 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal       +231 B  (+0.0%)      +55 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.

jeyip · 2024-10-21T18:28:22Z

jeyip · 2024-10-21T19:38:46Z

packages/data-stores/src/plans/hooks/test/use-pricing-meta-for-grid-plans.ts

+				introOffer: {
+					...introOffer,
+					rawPrice: {
+						monthly: 12.5 + STORAGE_ADD_ONS_MOCK[ 0 ].prices.monthlyPrice,


Non-blocking / Nitpick :

I believe that we can retrieve the rawPrice intro offer prices from the introOffer object https://github.com/Automattic/wp-calypso/pull/95428/files#diff-a46b47c6eea7443bc49db0374dd5b54d5a14a95c388dd9cca9481ce161ba6fcfR76-R77

jeyip · 2024-10-21T20:06:03Z

packages/plans-grid-next/src/hooks/data-store/use-plan-billing-description.tsx

@@ -224,7 +232,7 @@ export default function usePlanBillingDescription( {
 							'then %(rawPrice)s billed annually, excl. taxes',
 						{
 							args: {
-								introOfferFormattedPrice: introOffer.formattedPrice,
+								introOfferFormattedPrice: introOfferFullTermText,


Non-blocking / Nitpick:

I noticed that you marked the introOffer.formattedPrice field as deprecated.

I did a cursory search and didn't see other usages of introOffer.formattedPrice ( it was fast so not 100% certain ), so we might be able to remove the formattedPrice field entirely. Not important for this PR, but wondering what your thoughts are @chriskmnds

jeyip · 2024-10-21T20:17:04Z

packages/data-stores/src/plans/hooks/use-pricing-meta-for-grid-plans.ts

@@ -112,6 +113,7 @@ const usePricingMetaForGridPlans = ( {
 					originalPrice: Plans.PlanPricing[ 'originalPrice' ];
 					discountedPrice: Plans.PlanPricing[ 'discountedPrice' ];
 					currencyCode: Plans.PlanPricing[ 'currencyCode' ];
+					introOffer: Plans.PlanPricing[ 'introOffer' ];


Non-blocking / Nitpick:

It might be worth clearly differentiating between discountPrice and introOffer, whether it be an inline comment here or elsewhere. I'm assuming that intro offers are also discounted prices, but for new customers only?

Intro offers are a separate entity with it's own set of rules and configuration. Here's some more info :)
PCYsg-Wr4-p2

jeyip

The approach makes sense to me. For others following along, we:

Update pricing meta to account for storage add-ons in intro offer pricing
Update the header price component, which references the pricing meta
Update billing description hook, which references the pricing meta

Left non-blocking comments, but otherwise LGTM. @chriskmnds let me know if you'd like me to create any issues for the comments -- happy to take care of that. 🚢

jeyip · 2024-10-21T20:23:30Z

@merkushin you're mentioned in Christos's PR description.

Confirm the upgrade-plan for the migration flow renders the intro pricing correctly cc @merkushin

Would you mind confirming the above? Everything else looks good to go. 🙂

aneeshd16 · 2024-10-22T02:55:46Z

Fixed the price display on the import upgrade screen via c733a4d.

Before

After

chriskmnds self-assigned this Oct 16, 2024

chriskmnds commented Oct 17, 2024

View reviewed changes

chriskmnds marked this pull request as ready for review October 17, 2024 15:09

chriskmnds requested a review from a team as a code owner October 17, 2024 15:09

chriskmnds requested a review from southp October 17, 2024 15:09

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

chriskmnds requested review from michaeldcain and niranjan-uma-shankar October 17, 2024 15:09

chriskmnds added 5 commits October 17, 2024 18:12

Plans (grid/pricing): Include storage add-on selection in intro offer…

74f89dc

… prices

fix tests

81839a3

fix more tests

493010a

fixing/improving tests

eb3a6ff

cleanup

4db4997

chriskmnds force-pushed the update/plans-intro-pricing-with-storage-selection branch from feaacc5 to 4db4997 Compare October 17, 2024 15:12

chriskmnds changed the title ~~Plans (grid): Include storage add-on selection on introductory price~~ Plans (grid): Reflect storage add-on selection on intro offer price and billing desc Oct 17, 2024

cleanup mocks

ad9b683

chriskmnds requested a review from merkushin October 17, 2024 16:28

jeyip reviewed Oct 21, 2024

View reviewed changes

jeyip approved these changes Oct 21, 2024

View reviewed changes

jeyip added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Oct 21, 2024

Fixes price display on import upgrade screen

c733a4d

aneeshd16 approved these changes Oct 22, 2024

View reviewed changes

jeyip merged commit 18e9da9 into trunk Oct 22, 2024
11 checks passed

jeyip deleted the update/plans-intro-pricing-with-storage-selection branch October 22, 2024 17:05

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 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plans (grid): Reflect storage add-on selection on intro offer price and billing desc #95428

Plans (grid): Reflect storage add-on selection on intro offer price and billing desc #95428

chriskmnds commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024 •

edited by matticbot

Loading

chriskmnds Oct 17, 2024

aneeshd16 Oct 22, 2024

matticbot commented Oct 17, 2024

matticbot commented Oct 17, 2024 •

edited

Loading

jeyip commented Oct 21, 2024 •

edited

Loading

jeyip Oct 21, 2024 •

edited

Loading

jeyip Oct 21, 2024

jeyip Oct 21, 2024

aneeshd16 Oct 22, 2024

jeyip left a comment

jeyip commented Oct 21, 2024 •

edited

Loading

aneeshd16 commented Oct 22, 2024

Plans (grid): Reflect storage add-on selection on intro offer price and billing desc #95428

Plans (grid): Reflect storage add-on selection on intro offer price and billing desc #95428

Conversation

chriskmnds commented Oct 16, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 16, 2024 • edited by matticbot Loading

chriskmnds Oct 17, 2024

Choose a reason for hiding this comment

aneeshd16 Oct 22, 2024

Choose a reason for hiding this comment

matticbot commented Oct 17, 2024

matticbot commented Oct 17, 2024 • edited Loading

jeyip commented Oct 21, 2024 • edited Loading

Testing

Requirements

Browsers

Notes

jeyip Oct 21, 2024 • edited Loading

Choose a reason for hiding this comment

jeyip Oct 21, 2024

Choose a reason for hiding this comment

jeyip Oct 21, 2024

Choose a reason for hiding this comment

aneeshd16 Oct 22, 2024

Choose a reason for hiding this comment

jeyip left a comment

Choose a reason for hiding this comment

jeyip commented Oct 21, 2024 • edited Loading

aneeshd16 commented Oct 22, 2024

chriskmnds commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024 •

edited by matticbot

Loading

matticbot commented Oct 17, 2024 •

edited

Loading

jeyip commented Oct 21, 2024 •

edited

Loading

jeyip Oct 21, 2024 •

edited

Loading

jeyip commented Oct 21, 2024 •

edited

Loading