New Checkout: split layout (take 2) #41373

michaeldcain · 2020-04-22T16:30:37Z

Originally attempted in #41063 and reverted in #41363

This does a few things with the ultimate goal of splitting out a summary into a separate column on desktop screens.

adds the floated CheckoutSummary component to composite-checkout (package, demo, documentation)
add CheckoutStepArea component to handle styling of CheckoutSteps + CheckoutStepBody
uses CheckoutSummary in WPcom's implementation of composite-checkout
moves the current site's address to the review step
adds a default set of purchase features to the summary (per-product features coming in a future PR)
hides CheckoutSummary on mobile screens (collapse mobile toggle coming in future PR)

Before	After

Fixes: #41088

To test:

it might help to step through the PR, commit by commit, but no promises that I didn't change my mind later on in the PR
run the composite-checkout demo with yarn run composite-checkout-demo
verify that minimal CheckoutSummary is displayed
verify that the demo otherwise works as expected
from dev or calypso.live, and a plan and/or domain to your cart and visit Checkout with ?flags=composite-checkout-testing
verify that on desktop (>960px), the checkout summary is displayed, floated to the right, with a list of default features, and the tax (once calculated) and total
verify that on screens smaller than desktop, the checkout summary is hidden
verify that Checkout otherwise works as expected

- Move CheckoutStepBody inside CheckoutSteps - Split real steps from not - Move `checkout-content` back to Checkout component - Update loading - Update demo

- Remove props from Checkout Summary so that component just renders children - Update demo and defaults - Fix summary height when split into columns

- adds the component and shifts the step wrapper styles to it - removes CheckoutSteps children splitting logic - moves CheckoutSteps (and CheckoutStep children) and CheckoutStepBody to new component in default Checkout

matticbot · 2020-04-22T16:30:40Z

Test live: https://calypso.live/?branch=update/checkout-two-column-layout

matticbot · 2020-04-22T16:41:03Z

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

Sections (~1135 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +5415 B  (+0.4%)    +1135 B  (+0.4%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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.

a8ci18n · 2020-04-22T16:58:23Z

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

+				<CheckoutSummaryFeaturesList>
+					<CheckoutSummaryFeaturesListItem>
+						<WPCheckoutCheckIcon />
+						{ translate( 'Live chat and email support' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 29 times:
translate( 'Email and live chat support' ) ES Score: 9
See 2 additional suggestions in the PR translation status page

a8ci18n · 2020-04-22T16:58:23Z

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

+					</CheckoutSummaryFeaturesListItem>
+					<CheckoutSummaryFeaturesListItem>
+						<WPCheckoutCheckIcon />
+						{ translate( 'Dozens of free themes' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Dozens of free themes.' ) ES Score: 15
See 2 additional suggestions in the PR translation status page

a8ci18n · 2020-04-22T16:58:25Z

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

+					</CheckoutSummaryFeaturesListItem>
+					<CheckoutSummaryFeaturesListItem>
+						<WPCheckoutCheckIcon />
+						{ translate( 'Money back guarantee' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 17 times:
translate( '30-day Money Back Guarantee' ) ES Score: 9

fditrapani · 2020-04-22T19:42:09Z

This is looking great! the immediate thing that pops out is that the benefits in the right column are static and not reflecting the products in the cart. This is what I get for a domain only:

and this is the business plan:

If we want to start with static, that's ok but we'll need to make sure the benefits are generic enough for all our products.

====

I don't know if this is a regression but I'm upgrading my plan and it's defaulting to the two year length without giving me the choice of switching back to the one year. You can see it in the screenshot above.

sirbrillig

LGTM! Tested and it appears to work correctly.

michaeldcain · 2020-04-22T21:42:41Z

If we want to start with static, that's ok but we'll need to make sure the benefits are generic enough for all our products.

@fditrapani: I did this to get it out the door. The most generic are the support and money back points.

I don't know if this is a regression but I'm upgrading my plan and it's defaulting to the two year length without giving me the choice of switching back to the one year. You can see it in the screenshot above.

We talked about this in Slack, but it's the current Checkout behavior to default to the variation that you currently have selected. I agree that it'd be great to show the other available variations too. I'll look into what'd be required for that.

a8ci18n · 2020-05-22T13:04:03Z

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

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

a8ci18n · 2020-05-26T10:29:11Z

Translation for this Pull Request has now been finished.

michaeldcain added 30 commits April 20, 2020 17:40

Move domain to review step pull purchase deats out of checkout wrapper

4d7ef8b

Add useTax

37b3788

Add tax and basic styling to order summary

7baa996

Adjust summary amount styles

084834e

Remove WPCheckoutOrderSummaryTitle for now.

a914142

Missing propType

9cc0a13

Switch useTax to useFirstLineItemOfType hook

b12be53

Remove unnecessary span

4ce26ea

Return all line items of a certain type.

946ce9e

Move MainContentUI to CheckoutSteps component

ee8104a

Restructure Checkout and CheckoutSteps to allow for CheckoutSummary

b2085e4

- Move CheckoutStepBody inside CheckoutSteps - Split real steps from not - Move `checkout-content` back to Checkout component - Update loading - Update demo

Add CheckoutSummary component skeleton with defaults and demo

a4150fe

Cleanup CheckoutSummary

8a554ad

- Remove props from Checkout Summary so that component just renders children - Update demo and defaults - Fix summary height when split into columns

Cleanup styles up to this point

b4555b6

Make CheckoutSummary default content unique from CheckoutSummaryStep

e9ed68b

Remove unused styled components from default summary

d1f734c

Use CheckoutSummary in WPcom Checkout

3dd40e4

Remove widths from MainContentUI to allow for optional CheckoutSummary

7fe28da

Update documentation to match current state

840da4a

Update tests to reflect order summary step > checkout summary change

5545282

Center checkout for single-column layout

8a3bc98

Tighten up order review line item styles to match design

c37dbb3

Export CheckIcon and allow it to be styled

1567c2c

Stub out CheckoutSummaryFeatures for initial styling

80786e3

Hide summary on mobile

2cf0b5a

Alphabetize

28059bb

Improve docs for useLineItemsOfType

ad0d7e9

Provide domainUrl as replacement string in translation

b1891e4

Remove default value on useLineItemsOfType hook

bb2074b

Update docs to reflect moving the form structure to CheckoutSteps

a53b033

Add CheckoutStepArea component

0ba584f

- adds the component and shifts the step wrapper styles to it - removes CheckoutSteps children splitting logic - moves CheckoutSteps (and CheckoutStep children) and CheckoutStepBody to new component in default Checkout

michaeldcain requested review from sirbrillig and fditrapani April 22, 2020 16:30

Update docs and demo

a7ac92c

a8ci18n reviewed Apr 22, 2020

View reviewed changes

Update package tests

e3cd44b

michaeldcain added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 22, 2020

sirbrillig approved these changes Apr 22, 2020

View reviewed changes

michaeldcain added 2 commits April 22, 2020 16:28

Update product features defaults

8c82195

Use translated string

7a4d9bb

michaeldcain merged commit 5bc3d40 into master Apr 22, 2020

michaeldcain deleted the update/checkout-two-column-layout branch April 22, 2020 21:16

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Checkout: split layout (take 2) #41373

New Checkout: split layout (take 2) #41373

michaeldcain commented Apr 22, 2020

matticbot commented Apr 22, 2020

matticbot commented Apr 22, 2020 •

edited

Loading

a8ci18n Apr 22, 2020

a8ci18n Apr 22, 2020

a8ci18n Apr 22, 2020

fditrapani commented Apr 22, 2020

sirbrillig left a comment

michaeldcain commented Apr 22, 2020

a8ci18n commented May 22, 2020

a8ci18n commented May 26, 2020

New Checkout: split layout (take 2) #41373

New Checkout: split layout (take 2) #41373

Conversation

michaeldcain commented Apr 22, 2020

matticbot commented Apr 22, 2020

matticbot commented Apr 22, 2020 • edited Loading

a8ci18n Apr 22, 2020

Choose a reason for hiding this comment

a8ci18n Apr 22, 2020

Choose a reason for hiding this comment

a8ci18n Apr 22, 2020

Choose a reason for hiding this comment

fditrapani commented Apr 22, 2020

sirbrillig left a comment

Choose a reason for hiding this comment

michaeldcain commented Apr 22, 2020

a8ci18n commented May 22, 2020

a8ci18n commented May 26, 2020

matticbot commented Apr 22, 2020 •

edited

Loading