Pricing Grid: Fixes billing timeframe for 2Y & 3Y plans #77823

aneeshd16 · 2023-06-06T04:55:24Z

Fixes Automattic/martech#1811

Proposed Changes

Note: Once the PR is approved, I'll add the String Freeze label to send the new text for translations.

Fixes the billing timeframe for 2Y and 3Y plans. The billing timeframe refers to the text below the price in the pricing grid.
Screenshots:

2Y plans:

Before	After

3Y plans:

Before	After

Testing Instructions

The unit tests should cover all possible cases.
On a site with a 2Y plan, go to /plans and confirm that the text matches the screenshot.
On a site with a 3Y plan, go to /plans and confirm that the text matches the screenshot.

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

github-actions · 2023-06-06T04:55:37Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:commit-ad87eb005f5673814c4e52f6108b66f5addf7b8b

Jetpack Cloud live (direct link)

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

matticbot · 2023-06-06T05:04:03Z

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

Async-loaded Components (~40 bytes removed 📉 [gzipped])

name                                                 parsed_size           gzip_size
async-load-calypso-my-sites-plan-features-2023-grid       -503 B  (-0.5%)      -40 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.

jeyip

It looks like there's overlap between the changes here and the small PR that I created yesterday #77818.

I'm closing my PR in favor of these comprehensive updates

jeyip · 2023-06-06T22:10:21Z

client/my-sites/plan-features-2023-grid/components/billing-timeframe.tsx

+		}
+	} else if ( rawPrice ) {
+		if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
+			return translate( 'per month, %(rawPrice)s billed annually, Excl. Taxes', {


Non-blocking / Nit :

I'm noticing a distinct difference in language that we use to describe the time horizon of yearly plans

billed annually / billed every two years / billed every three years

vs.

for the first year / for the first two years / for the first three years

This seems fine to me, but I wanted to make sure that this variation is purposeful.

Good spot! It is purposeful as we want to make the distinction that the discounted price applies for the first year/term only, and then the full price of the plan would apply for subsequent terms.

jeyip · 2023-06-06T22:11:31Z

client/my-sites/plan-features-2023-grid/components/test/billing-timeframe.tsx

+		);
+	} );
+
+	test( 'should show full-term discounted price when plan is 3-yearly', () => {


Non-blocking / Nit:

Would you mind describing what full-term discounted means? I see it used throughout this part of the codebase and just assume it means a non-monthly discounted plan

Sure! "full-term discounted price" refers to the price for the complete duration of the plan with any applicable discounts. The discount could either be a currency-specific discount or a discount due to the application of pro-rated credits. For example:

"280" is the "per month discounted price", and 3360 is the "full-term discounted price".

jeyip · 2023-06-06T22:16:49Z

client/my-sites/plan-features-2023-grid/components/test/billing-timeframe.tsx

+			originalPrice: 200,
+		};
+
+		usePlanPricesDisplay.mockImplementation( jest.fn( () => planPrices ) );


Non-blocking / Nit:

Not necessary to do in this PR. I see we have a beforeEach, but how would we feel about an afterAll to to tear down mocks?

afterAll(() => { jest.clearAllMocks(); });

jeyip

Just wanted to say that I always appreciate updated specs in PRs 🎉 Code looks good to me. Testing now.

jeyip · 2023-06-06T22:24:39Z

client/my-sites/plan-features-2023-grid/components/billing-timeframe.tsx

@@ -74,82 +73,69 @@ function usePerMonthDescription( {
 				},
 			} );
 		}
+		return null;


Non-blocking / Nit:

Is it worth writing a spec for this null case?

jeyip · 2023-06-06T22:33:18Z

Testing

For the 3Y plan, I didn't know to to set up a triannual toggle. Instead, I manually rendered the text which looked reasonable.

Requirements

On a site with a 2Y plan, go to /plans and confirm that the text matches the screenshot.
On a site with a 3Y plan, go to /plans and confirm that the text matches the screenshot.

Browsers

Chrome

a8ci18n · 2023-06-07T09:20:46Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/8028803

Thank you @aneeshd16 for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2023-06-15T23:30:23Z

Translation for this Pull Request has now been finished.

Pricing Grid: Fixes billing timeframe for 2Y & 3Y plans

ad87eb0

aneeshd16 requested a review from a team as a code owner June 6, 2023 04:55

aneeshd16 requested a review from southp June 6, 2023 04:55

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

aneeshd16 self-assigned this Jun 6, 2023

jeyip reviewed Jun 6, 2023

View reviewed changes

jeyip approved these changes Jun 6, 2023

View reviewed changes

aneeshd16 added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jun 7, 2023

aneeshd16 merged commit 96c907b into trunk Jun 16, 2023
24 of 25 checks passed

aneeshd16 deleted the fix/billing-timeframe-2y-3y-plans branch June 16, 2023 03:33

github-actions bot removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 16, 2023

aneeshd16 added the 2023 Pricing Page ⚡ Changes for pricing page optimisation 2023 label Jul 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pricing Grid: Fixes billing timeframe for 2Y & 3Y plans #77823

Pricing Grid: Fixes billing timeframe for 2Y & 3Y plans #77823

aneeshd16 commented Jun 6, 2023

github-actions bot commented Jun 6, 2023

matticbot commented Jun 6, 2023

jeyip left a comment

jeyip Jun 6, 2023 •

edited

aneeshd16 Jun 7, 2023

jeyip Jun 6, 2023 •

edited

aneeshd16 Jun 7, 2023

jeyip Jun 6, 2023

jeyip left a comment •

edited

jeyip Jun 6, 2023

jeyip commented Jun 6, 2023

a8ci18n commented Jun 7, 2023

a8ci18n commented Jun 15, 2023

Pricing Grid: Fixes billing timeframe for 2Y & 3Y plans #77823

Pricing Grid: Fixes billing timeframe for 2Y & 3Y plans #77823

Conversation

aneeshd16 commented Jun 6, 2023

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jun 6, 2023

matticbot commented Jun 6, 2023

jeyip left a comment

Choose a reason for hiding this comment

jeyip Jun 6, 2023 • edited

Choose a reason for hiding this comment

aneeshd16 Jun 7, 2023

Choose a reason for hiding this comment

jeyip Jun 6, 2023 • edited

Choose a reason for hiding this comment

aneeshd16 Jun 7, 2023

Choose a reason for hiding this comment

jeyip Jun 6, 2023

Choose a reason for hiding this comment

jeyip left a comment • edited

Choose a reason for hiding this comment

jeyip Jun 6, 2023

Choose a reason for hiding this comment

jeyip commented Jun 6, 2023

Testing

Requirements

Browsers

a8ci18n commented Jun 7, 2023

a8ci18n commented Jun 15, 2023

jeyip Jun 6, 2023 •

edited

jeyip Jun 6, 2023 •

edited

jeyip left a comment •

edited