Checkout: update initial view of review step (3)

[michaeldcain]

In #42678, the "Order Review" step was pulled out of the step flow for Checkout and made persistent. This PR introduces a default summary view of that step to make the already-completed information easier to scan.

Summary mode (default):

Edit mode:

As part of the PR, I needed to make the following changes to the composite checkout package:

• I attempted to decouple step flow control from the CheckoutStepBody wherever possible. CheckoutStep(s) act as a wrapper for CheckoutStepBody and handle mechanics of progressing through steps.
• I introduced an areStepsActive prop to CheckoutSteps to allow for the entire set of steps to be inactive when another element of Checkout is focused.

To Test:

• Add an item to your cart and visit Checkout with ?flags=composite-checkout-force
• Verify that the "Your Order" section renders in a summary mode, without a tax line item, remove buttons, or plan variations
• Click "Edit" on "Your Order"
• Verify that the section renders in an edit mode, with all items returned as before and an additional "save order" button.
• Verify that the other Checkout steps are rendered, collapsed and inactive.
• Verify that clicking "save order" returns the section to summary mode.
• Commence jerk testing the rest of Signup. Add and remove items, progress through steps, edit
  and complete steps, return to edit your order, make sure that Checkout progress is maintained… your journey awaits.

[matticbot]

Test live: https://calypso.live/?branch=update/checkout-review-step-summary

[matticbot]

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

Sections (~185 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +1079 B  (+0.1%)     +185 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.

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.

[sirbrillig]

One thing I noticed:

• Click "Edit" on the review order step.
• While that step is active, click "Edit" on the contact info step.
• Nothing appears to happen.

[fditrapani]

Looking good! I made some minor edits to the font sizes and spacing around the coupon. Not blocking for merging but I wanted to change the review order step title while you're in edit mode but couldn't figure out how to bring the isSummary state up to that level.

One last note, I can confirm the issue with the Edit that Payton mentioned.

[michaeldcain]

Thanks for catching the editing issue - it's much more apparent now that the contact details step might be marked as complete when the cart loads.

[sirbrillig]

Works for me!

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.