-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add money back mention in checkout page #54169
Conversation
Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-11464 |
This PR modifies the release build for editing-toolkit To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-mMA-p2 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. 👍
I think the compile errors you're seeing are because the |
submitButtonFooter={ | ||
<SubmitButtonFooter> | ||
<img src={ badge14Src } alt="" /> | ||
<span>{ translate( '14 day money back guarantee' ) }</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ 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
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: Sections (~854 bytes added 📈 [gzipped])
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])
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. Generated by performance advisor bot at iscalypsofastyet.com. |
Moving the footer to |
submitButtonFooter={ | ||
<SubmitButtonFooter> | ||
<img src={ badge14Src } alt="" /> | ||
<span>{ translate( '14 day money back guarantee' ) }</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll clarify if that's for a subset of products only.
@@ -472,11 +473,13 @@ export function CheckoutStepArea( { | |||
children, | |||
className, | |||
submitButtonHeader, | |||
submitButtonFooter, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a great addition; could you add it to the README?
- `submitButtonHeader: React.ReactNode`. Displays with the Checkout submit button. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
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. |
hasYearlyJetpackProductInCart && ( | ||
<SubmitButtonFooter> | ||
<img src={ badge14Src } alt="" /> | ||
<span>{ translate( '14 day money back guarantee' ) }</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ 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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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):
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
|
I've updated the behaviour and instructions according to the latest specs. |
1b934d8
to
72da402
Compare
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. |
Worth noting (although I realize it's older, and not exactly the same thing): p8Eqe3-G9-p2 |
setSubmitWrapperHeight( submitWrapperRef.current.offsetHeight ); | ||
} | ||
setInitialVw( window.innerWidth ); | ||
}, [ setSubmitWrapperHeight, submitWrapperRef, setInitialVw ] ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).
This PR modifies the release build for notifications To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-elI-p2 |
This PR modifies the release build for wpcom-block-editor To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-l4k-p2 |
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? |
You're right @sirbrillig, especially since the code changes are pretty straightforward.
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. |
This PR modifies the release build for o2-blocks To test your changes on WordPress.com, run To deploy your changes after merging, see the documentation: PCYsg-r7r-p2 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lovely. Thank you for the additions!
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. |
Translation for this Pull Request has now been finished. |
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
Instructions
Screenshots
Money back mention
Before
![Screen Shot 2021-06-30 at 9 08 16 AM](https://user-images.githubusercontent.com/1620183/123979327-a0208000-d98e-11eb-9df6-1ca4c331eb55.png)
After (yearly products)
![Screen Shot 2021-06-30 at 10 01 24 AM](https://user-images.githubusercontent.com/1620183/123979355-a57dca80-d98e-11eb-8c99-480eeb664e96.png)
After (monthly products)
![Screen Shot 2021-07-07 at 10 37 33 AM](https://user-images.githubusercontent.com/1620183/124779718-0158ce00-df10-11eb-81cb-4c8487917e8d.png)
After (both yearly and monthly products)
![Screen Shot 2021-07-07 at 10 37 55 AM](https://user-images.githubusercontent.com/1620183/124779742-0584eb80-df10-11eb-9e2b-da9d7e57def1.png)
Submit button
Before
![Screen Shot 2021-06-30 at 10 05 19 AM](https://user-images.githubusercontent.com/1620183/123979380-aadb1500-d98e-11eb-8321-8ecf2e661385.png)
After
![Screen Shot 2021-06-30 at 10 05 06 AM](https://user-images.githubusercontent.com/1620183/123979398-ae6e9c00-d98e-11eb-89aa-0f237317e07a.png)