Checkout: Display introductory offer intervals in the cart line items #50494

danielmx-dev · 2021-02-25T18:47:42Z

Changes proposed in this Pull Request

Display the introductory offer discount/free trial intervals (only yearly and monthly intervals contain specific language) as discount callouts in the line items.

Testing instructions

Follow the same steps described in the test plan of D58043-code to enable an introductory offer for your user.
When you arrive to the checkout, a discount callout should be displayed in the shopping cart line item like the one in the screenshot above.

matticbot · 2021-02-25T18:47:44Z

Test live: https://calypso.live/?branch=update/add-introductory-offers-support-to-cart

a8ci18n · 2021-02-25T18:55:22Z

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx

+		}
+		if ( intervalUnit === 'year' ) {
+			if ( intervalCount === 1 ) {
+				text = translate( 'Free for first year' );


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 23 times:
translate( 'First year free' ) ES Score: 6

matticbot · 2021-02-25T18:56:24Z

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

Sections (~198 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout       +903 B  (+0.1%)     +198 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 (~194 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal       +903 B  (+0.1%)     +194 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.

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx

danielmx-dev · 2021-03-16T18:47:16Z

client/my-sites/checkout/composite-checkout/lib/translate-cart.ts

+	if ( ! isRenewalItem && serverCartItem.months_per_bill_period === 1 ) {
+		return translate( 'Monthly subscription' );
+	}


Without this then all the components dependent on the existing of a sublabel won't be rendered (including the discount callouts). This also is helpful to highlight a monthly subscription since our usual billing intervals are annual.

danielmx-dev · 2021-03-16T18:47:43Z

client/my-sites/checkout/composite-checkout/lib/translate-cart.ts

+		return translate( 'Renewal' );
+	}
+
+	return '';


I thought it would be better to separate the default case.

sirbrillig

This looks good to me! I left one small suggestion but it's minor.

I didn't test with the backend patch but I hacked the front-end to add introductory_offer_terms to a product and saw the display as expected.

sirbrillig · 2021-03-16T19:50:12Z

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx

+	const intervalUnit = product.introductory_offer_terms.interval_unit;
+	const intervalCount = product.introductory_offer_terms.interval_count;
+
+	if ( product.cost === 0 ) {


It might not matter for the case of 0, but in general it might be safer to use product_cost_integer instead of cost, because it will be an integer in the currency's smallest unit rather than a float in a larger unit. For example, the cost might be 95.25 but the product_cost_integer would be 9525. (This is true of all the ..._integer prices in the cart; I'd like to deprecate the old properties that use floats.)

I used item_subtotal_integer instead of cost, I noticed it is used in other places as well to determine free line items. Thanks for the suggestion!

daledupreez

Overall the wording looks good to me.

daledupreez · 2021-03-17T15:15:22Z

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx

+	product: ResponseCartProduct;
+} ): JSX.Element | null {
+	const translate = useTranslate();
+	let text = String( translate( 'Discount for first period' ) );


Nit: we can define text after the exit condition on the next line. Same probably applies to setting translate.

I think I could move the variable but I'm not sure about the translate assignment. I think it's a good practice to always define the hooks at the top, unaffected by conditional statements.

daledupreez · 2021-03-17T15:18:32Z

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx

+
+	if ( product.item_subtotal_integer === 0 ) {
+		if ( intervalUnit === 'month' ) {
+			if ( intervalCount === 1 ) {


Shouldn't this use the three-argument form of translate()? The same applies to all the locations below.

Suggested change

if ( intervalCount === 1 ) {

text = translate(

'First month free',

'First %(numberOfMonths)s months free',

{

args: {

numberOfMonths: intervalCount,

},

count: intervalCount,

}

);

I did that at first but I got a warning telling me that I had to use the placeholders in both strings, that's why I ended up separating them using an if.

a8ci18n · 2021-03-17T18:16:37Z

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

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

a8ci18n · 2021-03-24T16:28:29Z

Translation for this Pull Request has now been finished.

a8ci18n reviewed Feb 25, 2021

View reviewed changes

danielmx-dev self-assigned this Feb 25, 2021

danielmx-dev added the [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. label Feb 25, 2021

danielmx-dev changed the title ~~[WIP] Display introductory offer intervals in the cart line items~~ [WIP] Checkout: Display introductory offer intervals in the cart line items Feb 25, 2021

danielmx-dev requested a review from a team February 26, 2021 21:29

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

danielmx-dev added [Status] In Progress and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Feb 26, 2021

sirbrillig reviewed Mar 16, 2021

View reviewed changes

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx Outdated Show resolved Hide resolved

danielmx-dev changed the title ~~[WIP] Checkout: Display introductory offer intervals in the cart line items~~ Checkout: Display introductory offer intervals in the cart line items Mar 16, 2021

danielmx-dev marked this pull request as ready for review March 16, 2021 17:33

danielmx-dev requested a review from a team as a code owner March 16, 2021 17:33

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

danielmx-dev added 3 commits March 16, 2021 11:35

Display introductory offer intervals in the cart line items

0dde7da

Keep the discount messages only for monthly and yearly intervals

ef1f883

Cast translate result to string and remove TranslateResult dependency

619587b

danielmx-dev force-pushed the update/add-introductory-offers-support-to-cart branch from a2aa5c6 to 619587b Compare March 16, 2021 17:35

sirbrillig reviewed Mar 16, 2021

View reviewed changes

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx Outdated Show resolved Hide resolved

Use String function to cast translate results instead of typescript

3dac817

danielmx-dev requested a review from a team March 16, 2021 18:35

Restore Monthly Subscription sublabel for titan mail cart items

9b6310e

danielmx-dev force-pushed the update/add-introductory-offers-support-to-cart branch from d303cc0 to 9b6310e Compare March 16, 2021 18:37

danielmx-dev commented Mar 16, 2021

View reviewed changes

sirbrillig approved these changes Mar 16, 2021

View reviewed changes

Use item_subtotal_integer instead of cost to determine the free trial

50f1409

danielmx-dev added [Status] Ready to Merge and removed [Status] In Progress [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 16, 2021

daledupreez approved these changes Mar 17, 2021

View reviewed changes

Move variable declaration after the early return

74aa616

danielmx-dev merged commit 4761004 into trunk Mar 17, 2021

danielmx-dev deleted the update/add-introductory-offers-support-to-cart branch March 17, 2021 17:10

matticbot removed the [Status] Ready to Merge label Mar 17, 2021

danielmx-dev mentioned this pull request Mar 18, 2021

Purchase Management: Display introductory offer information when relevant #51160

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: Display introductory offer intervals in the cart line items #50494

Checkout: Display introductory offer intervals in the cart line items #50494

danielmx-dev commented Feb 25, 2021 •

edited

matticbot commented Feb 25, 2021

a8ci18n Feb 25, 2021

matticbot commented Feb 25, 2021 •

edited

danielmx-dev Mar 16, 2021

danielmx-dev Mar 16, 2021

sirbrillig left a comment

sirbrillig Mar 16, 2021

danielmx-dev Mar 16, 2021

daledupreez left a comment

daledupreez Mar 17, 2021

danielmx-dev Mar 17, 2021

daledupreez Mar 17, 2021

danielmx-dev Mar 17, 2021 •

edited

a8ci18n commented Mar 17, 2021

a8ci18n commented Mar 24, 2021

-			if ( intervalCount === 1 ) {
+			text = translate(
+				'First month free',
+				'First %(numberOfMonths)s months free',
+				{
+					args: {
+						numberOfMonths: intervalCount,
+					},
+					count: intervalCount,
+				}
+			);

Checkout: Display introductory offer intervals in the cart line items #50494

Checkout: Display introductory offer intervals in the cart line items #50494

Conversation

danielmx-dev commented Feb 25, 2021 • edited

Changes proposed in this Pull Request

Testing instructions

matticbot commented Feb 25, 2021

Choose a reason for hiding this comment

matticbot commented Feb 25, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sirbrillig left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daledupreez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielmx-dev Mar 17, 2021 • edited

Choose a reason for hiding this comment

a8ci18n commented Mar 17, 2021

a8ci18n commented Mar 24, 2021

danielmx-dev commented Feb 25, 2021 •

edited

matticbot commented Feb 25, 2021 •

edited

danielmx-dev Mar 17, 2021 •

edited