New Checkout: split purchase details into second column #41063

michaeldcain · 2020-04-13T22:34:30Z

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)
moves CheckoutStepBody component inside CheckoutSteps
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

matticbot · 2020-04-13T22:34:32Z

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

matticbot · 2020-04-14T03:26:56Z

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

Sections (~1199 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +5641 B  (+0.4%)    +1199 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.

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

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

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

packages/composite-checkout/src/lib/line-items.js

- 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

a8ci18n · 2020-04-21T19:12:47Z

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-21T19:12:48Z

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-21T19:12:48Z

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

sirbrillig

The code is looking good! Made some small suggestions. Tested both the demo and the calypso version and both look good to me!

packages/composite-checkout/README.md

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

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

packages/composite-checkout/src/lib/line-items.js

michaeldcain · 2020-04-21T21:45:33Z

@sirbrillig: thanks for the review. I believe I've addressed your feedback and this is ready for another go.

sirbrillig

Works as described! Thanks!

…)" This reverts commit 9ef61e7.

…)" (#41363) This reverts commit 9ef61e7.

manzoorwanijk · 2025-01-27T11:44:48Z

A false positive here. I linked a Jetpack issue to #98930 which as the same issue ID as this PR 😄

michaeldcain self-assigned this Apr 13, 2020

michaeldcain added the [Status] In Progress label Apr 13, 2020

lancewillett mentioned this pull request Apr 14, 2020

Domain picker: searching for FQDNs does not always return the TLD specified #41066

Closed

sirbrillig reviewed Apr 14, 2020

View reviewed changes

michaeldcain force-pushed the update/checkout-two-column-layout branch 5 times, most recently from 9b9e07f to 9754cf8 Compare April 20, 2020 19:08

michaeldcain added 19 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

michaeldcain force-pushed the update/checkout-two-column-layout branch from fb18e8a to 9c6479d Compare April 21, 2020 18:53

michaeldcain added 5 commits April 21, 2020 14:56

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

michaeldcain force-pushed the update/checkout-two-column-layout branch from 9c6479d to 80786e3 Compare April 21, 2020 18:56

a8ci18n reviewed Apr 21, 2020

View reviewed changes

Hide summary on mobile

2cf0b5a

sirbrillig reviewed Apr 21, 2020

View reviewed changes

michaeldcain added 5 commits April 21, 2020 17:18

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

sirbrillig approved these changes Apr 21, 2020

View reviewed changes

michaeldcain removed the [Status] In Progress label Apr 22, 2020

michaeldcain merged commit 9ef61e7 into master Apr 22, 2020

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

michaeldcain added a commit that referenced this pull request Apr 22, 2020

Revert "New Checkout: split purchase details into second column (#41063…

03e6221

…)" This reverts commit 9ef61e7.

michaeldcain mentioned this pull request Apr 22, 2020

Revert "New Checkout: split purchase details into second column" #41363

Merged

michaeldcain added a commit that referenced this pull request Apr 22, 2020

Revert "New Checkout: split purchase details into second column (#41063…

fdc0535

…)" (#41363) This reverts commit 9ef61e7.

michaeldcain restored the update/checkout-two-column-layout branch April 22, 2020 14:18

michaeldcain mentioned this pull request Apr 22, 2020

New Checkout: split layout (take 2) #41373

Merged

github-actions bot assigned manzoorwanijk Jan 27, 2025

github-actions bot added the [Status] In Progress label Jan 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Checkout: split purchase details into second column #41063

New Checkout: split purchase details into second column #41063

michaeldcain commented Apr 13, 2020 •

edited

Loading

matticbot commented Apr 13, 2020

matticbot commented Apr 14, 2020 •

edited

Loading

a8ci18n Apr 21, 2020

a8ci18n Apr 21, 2020

a8ci18n Apr 21, 2020

sirbrillig left a comment

michaeldcain commented Apr 21, 2020

sirbrillig left a comment

manzoorwanijk commented Jan 27, 2025

New Checkout: split purchase details into second column #41063

New Checkout: split purchase details into second column #41063

Conversation

michaeldcain commented Apr 13, 2020 • edited Loading

matticbot commented Apr 13, 2020

matticbot commented Apr 14, 2020 • edited Loading

a8ci18n Apr 21, 2020

Choose a reason for hiding this comment

a8ci18n Apr 21, 2020

Choose a reason for hiding this comment

a8ci18n Apr 21, 2020

Choose a reason for hiding this comment

sirbrillig left a comment

Choose a reason for hiding this comment

michaeldcain commented Apr 21, 2020

sirbrillig left a comment

Choose a reason for hiding this comment

manzoorwanijk commented Jan 27, 2025

michaeldcain commented Apr 13, 2020 •

edited

Loading

matticbot commented Apr 14, 2020 •

edited

Loading