Checkout: Show next renewal price for Jetpack introductory offers #71016

TheSteveK · 2022-12-09T18:43:39Z

Proposed Changes

There has been some user confusion with Jetpack Intro offers (such as first month of Social for $1) when the plan renews at full price
This PR clearly states at check out when the next renewal will be and what price per pdrWKz-El-p2#comment-891

Images for translators:

Desktop:

Mobile:

Testing Instructions

Use the Calypso live link below (or build this PR locally) and append /checkout/jetpack/jetpack_social_basic_yearly to the URL
You'll see the checkout page with Social yearly selected (Social is currently the only product with an intro)
Click the drop down to see the offerings for both yearly and monthly purchase of the plan.
Verify that the price shows the initial price, term and then renewal term and price as in the screenshot above

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

Related to #

github-actions · 2022-12-09T18:43:53Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-12-09T18:53:21Z

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

Sections (~444 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +2018 B  (+0.1%)     +444 B  (+0.1%)

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 (~844 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal           +2018 B  (+0.2%)     +419 B  (+0.1%)
async-load-calypso-blocks-editor-checkout-modal      +2018 B  (+0.2%)     +425 B  (+0.2%)

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.

monsieur-z · 2022-12-13T14:30:17Z

...ites/checkout/composite-checkout/components/item-variation-picker/variant-dropdown-price.tsx

+	const isJetpackIntroductoryOffer = isJetpackProduct( variant ) && introCount > 0;
+	const translate = useTranslate();
+	const translatedIntroOfferPrice = translate(
+		' for the first %(introTerm)s then %(formattedRegularPrice)s per %(planTerm)s',


The opening space is likely to be forgotten in translations. I'd trim the string and use CSS to handle the spacing.

It may be useful to add comments or an example for translators as well.

monsieur-z · 2022-12-13T14:34:06Z

client/my-sites/checkout/composite-checkout/hooks/product-variants.tsx

@@ -126,6 +126,9 @@ export function useGetProductVariants(
 					? variant.introductoryOfferPrice
 					: variant.priceFinal || variant.priceFull;

+			const regularPrice = variant.priceFull ? variant.priceFull : price;
+			const introIntervalCount = variant.product.introductory_offer?.interval_count ?? 0;
+			const introIntervalUnit = variant.product.introductory_offer?.interval_unit ?? 'month';


If the default month value is used as is in a string, it should be translatable.

monsieur-z · 2022-12-13T14:37:30Z

...ites/checkout/composite-checkout/components/item-variation-picker/variant-dropdown-price.tsx

@@ -95,6 +96,23 @@ export const ItemVariantDropDownPrice: FunctionComponent< {
 	const formattedCompareToPriceForVariantTerm = compareToPriceForVariantTerm
 		? formatCurrency( compareToPriceForVariantTerm, variant.currency, { stripZeros: true } )
 		: undefined;
+	// Jetpack introductory pricing displays the introductory price for the first term, then the regular price for the remaining term.
+	const planTerm = variant.termIntervalInDays > 31 ? 'year' : 'month';


Values should be translatable since they're used as is in a string.

Though it's not a concern for Jetpack products at the moment, I'm wondering if this could be more future proof. WPcom plans have monthly, annual, and biennial terms I believe. It'd be great if we could support different terms.

monsieur-z

I left several comments in the code.

The dropdown content looks really tight on mobile, and it might be worst in languages such as German. I'm wondering if the offering mention should be taken out of the dropdown.

sirbrillig · 2022-12-13T15:48:59Z

Thanks for working on this! I second the caution to make sure this looks good at mobile widths. Trying to fit more things into the variant picker options has been an oft-discussed and very complicated topic (you can read more about some of the attempts in pbOQVh-24K-p2 and its comments).

mattgawarecki · 2022-12-13T19:35:30Z

The dropdown content looks really tight on mobile, and it might be worst in languages such as German. I'm wondering if the offering mention should be taken out of the dropdown.

My secret tip for testing things like this is to switch my account to use Portuguese. As a language, it has some of the longest words 👍

michaeldcain · 2022-12-14T18:16:47Z

I'd like to continue the discussion about removing introductory offers from the variant picker (pdrWKz-El-p2#comment-858), but if you need to merge this in the meantime, can you add the concept of a <small> explanation on its own line for each option:

sirbrillig · 2022-12-14T19:26:14Z

can you add the concept of a explanation on its own line for each option:

I am not a designer but I like this idea. We could also hide that small subtext at narrow viewport widths.

monsieur-z · 2022-12-15T14:10:52Z

From an accessibility standpoint, we should probably make sure the first line (e.g. $120 $1) is not read by screen readers, since it duplicates the information of the second line. Adding aria-hidden="true" to the parent tag should do the trick.

TheSteveK · 2022-12-15T15:58:45Z

Ok, I took a crack at this... Since these are new strings I can't see what they'd actually look like in German or PT. I slightly shortened the message for desktops and went with displaying a very short message for mobile:

@sirbrillig @mattgawarecki and @michaeldcain Thoughts?

TheSteveK · 2022-12-15T16:05:03Z

also noting that I'll refactor this to eliminate some duplication once we settle on what it should say

monsieur-z · 2022-12-15T18:16:03Z

Don't feel like my comment should be blocking this PR, but I'm a bit concerned by the size of the text, especially on mobile. I think it'd be okay for $1 for the first month then $120 per year to wrap on a second line.

sirbrillig · 2022-12-15T18:24:20Z

client/my-sites/checkout/composite-checkout/components/item-variation-picker/types.ts

@@ -6,6 +6,10 @@ export type WPCOMProductVariant = {
 	price: number;
 	pricePerMonth: number;
 	pricePerYear: number;
+	regularPrice: number;


I think we should be more clear about what "regular" means here, either by providing a more clear name and/or adding a comment. There's so many versions of a price we could have. I'm guessing this is in comparison to the introductory offer price? So maybe priceAfterIntroductoryOffer?

sirbrillig · 2022-12-15T22:02:30Z

FYI #70452 changed where the variant data comes from (it's now provided as an integer from the server) and unfortunately will affect this PR. 😓 Let me know how I can help.

TheSteveK · 2022-12-16T11:33:39Z

Don't feel like my comment should be blocking this PR, but I'm a bit concerned by the size of the text, especially on mobile. I think it'd be okay for $1 for the first month then $120 per year to wrap on a second line.

Do you mean as in the font size, or the amount of text?

monsieur-z · 2022-12-16T13:44:32Z

Do you mean as in the font size, or the amount of text?

The font size.

sirbrillig · 2022-12-16T15:02:05Z

FYI #70452 changed where the variant data comes from (it's now provided as an integer from the server) and unfortunately will affect this PR. 😓 Let me know how I can help.

I'm working on providing more price points directly from the server shortly, so you should be able to find out things like the price of the variant after the introductory offer expires without having to do anything. I'll post an update here when that's ready.

sirbrillig · 2022-12-16T18:49:53Z

D95710-code should give you the data you need to continue working on this PR after a rebase.

TheSteveK · 2022-12-19T18:02:20Z

The commit I just pushed should address compatibility with @sirbrillig 's PR. Now on to working on the A11Y/display stuff that came up.

TheSteveK · 2022-12-19T18:13:35Z

From an accessibility standpoint, we should probably make sure the first line (e.g. $120 $1) is not read by screen readers, since it duplicates the information of the second line. Adding aria-hidden="true" to the parent tag should do the trick.

Ok, for clarification, are mentioning the price at the top of the cart (the one that shows the original price crossed out in the screenshot) Or, the price above the $1 first month part?

@monsieur-z

mattgawarecki · 2022-12-28T15:56:34Z

I think this breaks the dropdown layout when there is no Jetpack introductory offer:

@sirbrillig I see the price text is mis-aligned between the two rows -- is that what you're referring to, or is there something else I'm missing?

FWIW, I don't see the same behavior when I check out with Social Basic and Scan in my cart (using this PR's calypso.live link). I can't help but wonder if I'm missing something 🤔

sirbrillig · 2022-12-28T15:58:07Z

Yes, it was the line break I was referring to. Prior to this PR it looks like this:

sirbrillig · 2022-12-28T15:59:57Z

FWIW, I don't see the same behavior when I check out with Social Basic and Scan in my cart (using this PR's calypso.live link). I can't help but wonder if I'm missing something 🤔

The line break happens when you do not have a Jetpack introductory offer and you do have a discount (so you get the "Save X%" text). Maybe try a non-Jetpack site checkout to see it more easily.

mattgawarecki · 2022-12-28T16:06:00Z

@sirbrillig I see the issue now, and I think I can quickly fix it without interrupting the string freeze. Working on this now.

a8ci18n · 2022-12-28T16:18:30Z

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

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

mattgawarecki · 2022-12-28T16:27:28Z

I pushed up a very small change to re-align the text. Here's what the results look like in all three scenarios:

sirbrillig

Thanks, @mattgawarecki! That seems to have resolved the issue I saw.

mattgawarecki · 2022-12-28T19:14:41Z

Deploying without translations, per p1672247215519499/1672218240.237819-slack-C03V4PXKUGP

a8ci18n · 2022-12-28T19:30:05Z

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

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

sirbrillig · 2022-12-28T20:10:31Z

By the way, not related to this PR at all but in your screenshots above you can see an example of the help icon not being styled correctly for Jetpack checkout: #70607

a8ci18n · 2023-01-11T00:31:00Z

Translation for this Pull Request has now been finished.

TheSteveK changed the title ~~Not a real PR, will update if needed~~ Checkout: Show next renewal price for Jetpack introductory offers Dec 13, 2022

TheSteveK requested a review from a team December 13, 2022 11:45

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

TheSteveK self-assigned this Dec 13, 2022

TheSteveK added Jetpack Jetpack Cloud Anything related to the Jetpack Cloud (cloud.jetpack.com) labels Dec 13, 2022

TheSteveK marked this pull request as ready for review December 13, 2022 11:46

TheSteveK requested a review from a team as a code owner December 13, 2022 11:46

monsieur-z reviewed Dec 13, 2022

View reviewed changes

monsieur-z requested changes Dec 13, 2022

View reviewed changes

sirbrillig reviewed Dec 15, 2022

View reviewed changes

TheSteveK force-pushed the update/introductory-offer-pricing-display-2 branch from 4591674 to d2079e1 Compare December 19, 2022 13:26

TheSteveK and others added 11 commits December 28, 2022 10:23

rebase

f7cd619

Rebase

bc43fe2

rebasem

347b82e

reformat terms, short terms for mobile

a01ec1b

refactor to work with PR 70452

8d81224

update variables and types

7a08075

add conditional Aria hidden

1f2d8c9

refactored to allow more flexibility for more offers

656868b

css adjustments

1052311

Remove redundant styles

c819096

Re-align price text to account for first-term discounts

7ada6d6

mattgawarecki force-pushed the update/introductory-offer-pricing-display-2 branch from f53f31a to 7ada6d6 Compare December 28, 2022 16:23

sirbrillig approved these changes Dec 28, 2022

View reviewed changes

mattgawarecki merged commit cd5afda into trunk Dec 28, 2022

mattgawarecki deleted the update/introductory-offer-pricing-display-2 branch December 28, 2022 19:13

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

DavidRothstein mentioned this pull request Jan 3, 2023

[Bug]: Variant picker for products with an introductory offer is still confusing #71633

Open

DavidRothstein mentioned this pull request Feb 14, 2023

Checkout: Pricing for products with introductory offers is displayed in a confusing way #69456

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: Show next renewal price for Jetpack introductory offers #71016

Checkout: Show next renewal price for Jetpack introductory offers #71016

TheSteveK commented Dec 9, 2022 •

edited

Loading

github-actions bot commented Dec 9, 2022 •

edited by matticbot

Loading

matticbot commented Dec 9, 2022 •

edited

Loading

monsieur-z Dec 13, 2022

monsieur-z Dec 13, 2022

monsieur-z Dec 13, 2022

monsieur-z Dec 13, 2022

monsieur-z left a comment

sirbrillig commented Dec 13, 2022

mattgawarecki commented Dec 13, 2022

michaeldcain commented Dec 14, 2022

sirbrillig commented Dec 14, 2022 •

edited

Loading

monsieur-z commented Dec 15, 2022

TheSteveK commented Dec 15, 2022

TheSteveK commented Dec 15, 2022

monsieur-z commented Dec 15, 2022

sirbrillig Dec 15, 2022

sirbrillig commented Dec 15, 2022

TheSteveK commented Dec 16, 2022

monsieur-z commented Dec 16, 2022

sirbrillig commented Dec 16, 2022

sirbrillig commented Dec 16, 2022

TheSteveK commented Dec 19, 2022

TheSteveK commented Dec 19, 2022

mattgawarecki commented Dec 28, 2022

sirbrillig commented Dec 28, 2022

sirbrillig commented Dec 28, 2022

mattgawarecki commented Dec 28, 2022

a8ci18n commented Dec 28, 2022

mattgawarecki commented Dec 28, 2022

sirbrillig left a comment

mattgawarecki commented Dec 28, 2022

a8ci18n commented Dec 28, 2022 •

edited

Loading

sirbrillig commented Dec 28, 2022

a8ci18n commented Jan 11, 2023

Checkout: Show next renewal price for Jetpack introductory offers #71016

Checkout: Show next renewal price for Jetpack introductory offers #71016

Conversation

TheSteveK commented Dec 9, 2022 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Dec 9, 2022 • edited by matticbot Loading

matticbot commented Dec 9, 2022 • edited Loading

monsieur-z Dec 13, 2022

Choose a reason for hiding this comment

monsieur-z Dec 13, 2022

Choose a reason for hiding this comment

monsieur-z Dec 13, 2022

Choose a reason for hiding this comment

monsieur-z Dec 13, 2022

Choose a reason for hiding this comment

monsieur-z left a comment

Choose a reason for hiding this comment

sirbrillig commented Dec 13, 2022

mattgawarecki commented Dec 13, 2022

michaeldcain commented Dec 14, 2022

sirbrillig commented Dec 14, 2022 • edited Loading

monsieur-z commented Dec 15, 2022

TheSteveK commented Dec 15, 2022

TheSteveK commented Dec 15, 2022

monsieur-z commented Dec 15, 2022

sirbrillig Dec 15, 2022

Choose a reason for hiding this comment

sirbrillig commented Dec 15, 2022

TheSteveK commented Dec 16, 2022

monsieur-z commented Dec 16, 2022

sirbrillig commented Dec 16, 2022

sirbrillig commented Dec 16, 2022

TheSteveK commented Dec 19, 2022

TheSteveK commented Dec 19, 2022

mattgawarecki commented Dec 28, 2022

sirbrillig commented Dec 28, 2022

sirbrillig commented Dec 28, 2022

mattgawarecki commented Dec 28, 2022

a8ci18n commented Dec 28, 2022

mattgawarecki commented Dec 28, 2022

sirbrillig left a comment

Choose a reason for hiding this comment

mattgawarecki commented Dec 28, 2022

a8ci18n commented Dec 28, 2022 • edited Loading

sirbrillig commented Dec 28, 2022

a8ci18n commented Jan 11, 2023

TheSteveK commented Dec 9, 2022 •

edited

Loading

github-actions bot commented Dec 9, 2022 •

edited by matticbot

Loading

matticbot commented Dec 9, 2022 •

edited

Loading

sirbrillig commented Dec 14, 2022 •

edited

Loading

a8ci18n commented Dec 28, 2022 •

edited

Loading