Add money back mention in checkout page #54169

monsieur-z · 2021-06-30T14:35:27Z

Changes proposed in this Pull Request

This PR adds a money back guarantee mention in the footer of the checkout page (for Jetpack products). It also centers the submit button on mobile.

Fixes 1196108640073826-as-1200480578254960

Testing instructions

Prerequisittes

Make sure you have a simple site and a Jetpack site available
Download the PR and run Calypso

Instructions

Visit the plans page with your simple site selected
Add a product to your cart
Check that you don't see the money back mention at the bottom of the page
Visit the plans page with your Jetpack site selected
Add a yearly plan to the cart
Check that the submit button of the checkout page is centered on mobile
Notice the 14 day money back mention at the bottom of the page
Check that on mobile (viewport width < 700px) the sticky footer doesn't hide the content of the page
Go back to the plans page and add a monthly product
Check that you see both the 14 day and 7 day mentions
Remove the yearly plan from the cart
Check that you see the 7 day money back mention

Screenshots

Money back mention

Before

After (yearly products)

After (monthly products)

After (both yearly and monthly products)

Submit button

Before

After

matticbot · 2021-06-30T14:37:09Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-11464
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-11464&env=jetpack

matticbot · 2021-06-30T14:40:23Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit improve/checkout-money-back-mention on your sandbox.

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

mattgawarecki

GitHub seems to be a little unhappy for some reason, but the errors it lists seem incorrect. I tested on calypso.live and everything looked exactly as described, and the code changes look reasonable to me. 👍

packages/composite-checkout/src/components/checkout-steps.tsx

sirbrillig · 2021-06-30T15:11:07Z

I think the compile errors you're seeing are because the composite-checkout npm package isn't set up to build with image imports (at least for TypeScript), so the build of that package is failing, which causes calypso (that requires that package) to fail as well.

a8ci18n · 2021-06-30T19:07:14Z

client/my-sites/checkout/composite-checkout/components/wp-checkout.tsx

+				submitButtonFooter={
+					<SubmitButtonFooter>
+						<img src={ badge14Src } alt="" />
+						<span>{ translate( '14 day money back guarantee' ) }</span>


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 23 times:
translate( '7 day money back guarantee' ) ES Score: 8
See 2 additional suggestions in the PR translation status page

matticbot · 2021-06-30T19:13:41Z

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

Sections (~854 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
checkout                   +2777 B  (+0.2%)     +837 B  (+0.2%)
site-purchases              +791 B  (+0.1%)     +265 B  (+0.1%)
purchases                   +791 B  (+0.1%)     +265 B  (+0.1%)
plans                       +191 B  (+0.0%)      +17 B  (+0.0%)
jetpack-connect             +191 B  (+0.0%)      +17 B  (+0.0%)
jetpack-cloud-pricing       +191 B  (+0.1%)      +17 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 (~837 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal      +2777 B  (+0.3%)     +837 B  (+0.3%)

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 · 2021-06-30T19:18:10Z

I think the compile errors you're seeing are because the composite-checkout npm package isn't set up to build with image imports (at least for TypeScript), so the build of that package is failing, which causes calypso (that requires that package) to fail as well.

Moving the footer to client seemed to fix it.

monsieur-z · 2021-06-30T19:19:32Z

client/my-sites/checkout/composite-checkout/components/wp-checkout.tsx

+				submitButtonFooter={
+					<SubmitButtonFooter>
+						<img src={ badge14Src } alt="" />
+						<span>{ translate( '14 day money back guarantee' ) }</span>


I'll clarify if that's for a subset of products only.

sirbrillig · 2021-06-30T20:25:31Z

packages/composite-checkout/src/components/checkout-steps.tsx

@@ -472,11 +473,13 @@ export function CheckoutStepArea( {
 	children,
 	className,
 	submitButtonHeader,
+	submitButtonFooter,


This is a great addition; could you add it to the README?

wp-calypso/packages/composite-checkout/README.md

Line 222 in cae8708

- `submitButtonHeader: React.ReactNode`. Displays with the Checkout submit button.

keoshi

This looks great to me!

The first thing that came to mind when I was testing it is that this badge is visible to all customers purchasing through Calypso independently of the platform/product they use.

I thought this wouldn't apply to dotcom for instance, but it seems like my assumption was wrong, so this gets the green light from my side but also pinging dotcom to give them the opportunity to weigh in.

monsieur-z · 2021-07-05T18:14:57Z

The first thing that came to mind when I was testing it is that this badge is visible to all customers purchasing through Calypso independently of the platform/product they use.

Thanks @keoshi. We've limited the display of that mention to carts that only contain Jetpack products. We'll update the PR to make it 7 days for monthly products.

a8ci18n · 2021-07-05T18:22:41Z

client/my-sites/checkout/composite-checkout/components/wp-checkout.tsx

+					hasYearlyJetpackProductInCart && (
+						<SubmitButtonFooter>
+							<img src={ badge14Src } alt="" />
+							<span>{ translate( '14 day money back guarantee' ) }</span>


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 23 times:
translate( '7 day money back guarantee' ) ES Score: 8
See 2 additional suggestions in the PR translation status page

sirbrillig

Looks good to me now! I tested with a Jetpack site (where I see the icon) and on a non-Jetpack site (where I don't see the icon).

I updated the PR description slightly to clarify that this only changes the behavior for Jetpack products.

Worth noting that there is already a 14-day mention in the sidebar of checkout.

Newly added Jetpack product messaging:

Existing messaging for both Jetpack and non-Jetpack products (in sidebar):

sirbrillig · 2021-07-05T19:53:14Z

If it's useful, here's the code for the existing money-back guarantee text, which is slightly differently constructed (it looks like it can sometimes be 4 days?):

wp-calypso/client/my-sites/checkout/composite-checkout/components/wp-checkout-order-summary.js

Lines 144 to 161 in 8de92f4

    
           let refundDays = 0; 
        
           if ( hasDomainsInCart && ! hasPlanInCart ) { 
        
           	refundDays = 4; 
        
           } else if ( hasPlanInCart && ! hasDomainsInCart ) { 
        
           	refundDays = hasMonthlyPlan ? 7 : 14; 
        
           } 
        
           if ( refundDays !== 0 ) { 
        
           	// Using plural translation because some languages have multiple plural forms and no plural-agnostic. 
        
           	refundText = translate( 
        
           		'%(days)d-day money back guarantee', 
        
           		'%(days)d-day money back guarantee', 
        
           		{ 
        
           			count: refundDays, 
        
           			args: { days: refundDays }, 
        
           		} 
        
           	); 
        
           }

monsieur-z · 2021-07-07T16:52:47Z

I've updated the behaviour and instructions according to the latest specs.

monsieur-z · 2021-07-26T19:55:47Z

Nice catch, @sirbrillig, thanks! I updated the code and instructions. When the footer is sticky, the bottom margin of its container matches its height so that there's enough room to display it without hiding the rest of the page. I also rebased the PR along the way.

DavidRothstein · 2021-07-26T21:01:26Z

Worth noting (although I realize it's older, and not exactly the same thing): p8Eqe3-G9-p2

sirbrillig · 2021-07-26T21:59:02Z

packages/composite-checkout/src/components/checkout-steps.tsx

+			setSubmitWrapperHeight( submitWrapperRef.current.offsetHeight );
+		}
+		setInitialVw( window.innerWidth );
+	}, [ setSubmitWrapperHeight, submitWrapperRef, setInitialVw ] );


I'm pretty sure that submitWrapperRef should not be in the dependencies here since it's a Ref and it will never change. Otherwise it implies that the block will re-run when the Ref's value changes.

Based on my understanding of the code, I think that's fine since it looks like this useEffect may only be meant to trigger once, but if you think it needs to trigger when submitWrapperRef.current (or submitWrapperRef.current.offsetHeight) changes, you can make that a dependency instead (although due to the nature of TypeScript you'll need to assign it to a temporary variable first, like maybe const submitWrapperHeight = submitWrapper.current?.offsetHeight and then make submitWrapperHeight the dependency).

matticbot · 2021-07-27T13:27:14Z

This PR modifies the release build for notifications

To test your changes on WordPress.com, run install-plugin.sh notifications improve/checkout-money-back-mention on your sandbox.

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

matticbot · 2021-07-27T13:27:31Z

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor improve/checkout-money-back-mention on your sandbox.

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

sirbrillig · 2021-07-27T14:39:46Z

Thanks for adding that code! A very clever solution. When I load checkout now using a small viewport, the Total is visible!

The only downside I can see, and this is much less important, is that the solution is not responsive. If I resize my window to be smaller, then the amount of spacing for the footer remains constant. Here's what it looks like if I resize a larger viewport to a smaller one.

In practice I'm sure this doesn't happen often at all, so we could probably ignore it, but it does bother me especially since the functionality that manages that spacing is outside of calypso in a soon-to-be published npm package. 🤔 What if we registered a resize event handler and used it to recalculate the viewport size? If you think that would be a lot more code, I don't want to unnecessarily bloat this PR so it could be a separate change if you like.

Another thing I noticed, that might also be low priority, is that the help button now overlaps the refund text at small widths.

I think I remember some effort that had gone into making it not overlap text previously on mobile, leading to its current position, but it's tricky to manage floating elements like that. What do you think?

monsieur-z · 2021-07-28T13:15:27Z

it does bother me especially since the functionality that manages that spacing is outside of calypso in a soon-to-be published npm package.

You're right @sirbrillig, especially since the code changes are pretty straightforward.

Another thing I noticed, that might also be low priority, is that the help button now overlaps the refund text at small widths.

Good catch! I added some padding that should prevent that for the moment. I believe this whole addition will go through another round of design at some point.

matticbot · 2021-07-28T13:17:21Z

This PR modifies the release build for o2-blocks

To test your changes on WordPress.com, run install-plugin.sh o2-blocks improve/checkout-money-back-mention on your sandbox.

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

sirbrillig

Lovely. Thank you for the additions!

a8ci18n · 2021-07-29T16:16:39Z

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

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

a8ci18n · 2021-08-05T15:28:36Z

Translation for this Pull Request has now been finished.

monsieur-z added [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. [Size] XS Tiny sized issue labels Jun 30, 2021

monsieur-z requested review from a team June 30, 2021 14:35

monsieur-z requested a review from a team as a code owner June 30, 2021 14:35

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

monsieur-z added the DO NOT MERGE label Jun 30, 2021

mattgawarecki approved these changes Jun 30, 2021

View reviewed changes

sirbrillig requested changes Jun 30, 2021

View reviewed changes

packages/composite-checkout/src/components/checkout-steps.tsx Outdated Show resolved Hide resolved

a8ci18n reviewed Jun 30, 2021

View reviewed changes

monsieur-z requested a review from sirbrillig June 30, 2021 19:15

monsieur-z commented Jun 30, 2021

View reviewed changes

sirbrillig reviewed Jun 30, 2021

View reviewed changes

keoshi approved these changes Jul 1, 2021

View reviewed changes

keoshi requested a review from a team July 1, 2021 13:54

keoshi added the [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR label Jul 1, 2021

github-actions bot added the [Status] Design Input Requested Label automatically added to PRs where design feedback is requested label Jul 1, 2021

a8ci18n reviewed Jul 5, 2021

View reviewed changes

sirbrillig approved these changes Jul 5, 2021

View reviewed changes

monsieur-z added [Size] S Small sized issue and removed [Size] XS Tiny sized issue labels Jul 7, 2021

monsieur-z requested a review from a team July 7, 2021 16:52

monsieur-z added 7 commits July 26, 2021 15:07

Move checkout footer to wpcom codebase

2b91f42

Show money back mention only for yearly Jetpack products

b68b7a5

Update composite checkout README

3485aef

Add 7 day money back guarantee mention

4a73de2

Handle case both monthly and yearly products in cart

216c3b9

Fix checkout page hidden by footer

393a2d0

Fix TS errors

72da402

monsieur-z force-pushed the improve/checkout-money-back-mention branch from 1b934d8 to 72da402 Compare July 26, 2021 19:46

monsieur-z requested review from sirbrillig and mattgawarecki July 26, 2021 19:55

sirbrillig reviewed Jul 26, 2021

View reviewed changes

monsieur-z removed the DO NOT MERGE label Jul 27, 2021

Remove unnecessary deps from React effects

4f1185b

Update checkout page margin bottom on resize

10cbc84

sirbrillig approved these changes Jul 28, 2021

View reviewed changes

monsieur-z merged commit 099686e into trunk Jul 29, 2021

monsieur-z deleted the improve/checkout-money-back-mention branch July 29, 2021 15:28

sirbrillig mentioned this pull request Mar 22, 2022

Composite Checkout: Simplify API by adding CheckoutStepGroup, CheckoutFormSubmit, and PaymentMethodStep #62114

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add money back mention in checkout page #54169

Add money back mention in checkout page #54169

monsieur-z commented Jun 30, 2021 •

edited

Loading

matticbot commented Jun 30, 2021 •

edited

Loading

matticbot commented Jun 30, 2021

mattgawarecki left a comment

sirbrillig commented Jun 30, 2021 •

edited

Loading

a8ci18n Jun 30, 2021

matticbot commented Jun 30, 2021 •

edited

Loading

monsieur-z commented Jun 30, 2021

monsieur-z Jun 30, 2021

sirbrillig Jun 30, 2021

keoshi left a comment

monsieur-z commented Jul 5, 2021

a8ci18n Jul 5, 2021

sirbrillig left a comment •

edited

Loading

sirbrillig commented Jul 5, 2021 •

edited

Loading

monsieur-z commented Jul 7, 2021

monsieur-z commented Jul 26, 2021

DavidRothstein commented Jul 26, 2021

sirbrillig Jul 26, 2021

matticbot commented Jul 27, 2021

matticbot commented Jul 27, 2021

sirbrillig commented Jul 27, 2021

monsieur-z commented Jul 28, 2021

matticbot commented Jul 28, 2021

sirbrillig left a comment

a8ci18n commented Jul 29, 2021

a8ci18n commented Aug 5, 2021

Add money back mention in checkout page #54169

Add money back mention in checkout page #54169

Conversation

monsieur-z commented Jun 30, 2021 • edited Loading

Changes proposed in this Pull Request

Testing instructions

Prerequisittes

Instructions

Screenshots

Money back mention

Submit button

matticbot commented Jun 30, 2021 • edited Loading

matticbot commented Jun 30, 2021

mattgawarecki left a comment

Choose a reason for hiding this comment

sirbrillig commented Jun 30, 2021 • edited Loading

a8ci18n Jun 30, 2021

Choose a reason for hiding this comment

matticbot commented Jun 30, 2021 • edited Loading

monsieur-z commented Jun 30, 2021

monsieur-z Jun 30, 2021

Choose a reason for hiding this comment

sirbrillig Jun 30, 2021

Choose a reason for hiding this comment

keoshi left a comment

Choose a reason for hiding this comment

monsieur-z commented Jul 5, 2021

a8ci18n Jul 5, 2021

Choose a reason for hiding this comment

sirbrillig left a comment • edited Loading

Choose a reason for hiding this comment

sirbrillig commented Jul 5, 2021 • edited Loading

monsieur-z commented Jul 7, 2021

monsieur-z commented Jul 26, 2021

DavidRothstein commented Jul 26, 2021

sirbrillig Jul 26, 2021

Choose a reason for hiding this comment

matticbot commented Jul 27, 2021

matticbot commented Jul 27, 2021

sirbrillig commented Jul 27, 2021

monsieur-z commented Jul 28, 2021

matticbot commented Jul 28, 2021

sirbrillig left a comment

Choose a reason for hiding this comment

a8ci18n commented Jul 29, 2021

a8ci18n commented Aug 5, 2021

monsieur-z commented Jun 30, 2021 •

edited

Loading

matticbot commented Jun 30, 2021 •

edited

Loading

sirbrillig commented Jun 30, 2021 •

edited

Loading

matticbot commented Jun 30, 2021 •

edited

Loading

sirbrillig left a comment •

edited

Loading

sirbrillig commented Jul 5, 2021 •

edited

Loading