Checkout: Convert PurchaseModal to use composite checkout

[sirbrillig]

Changes proposed in this Pull Request

The one-click upsell code is the only remaining place using the TransactionFlow object which is the way that old checkout submits its payments for processing.

This PR modifies PurchaseModal to use the existing card payment processor that is part of composite checkout as follows:

1. Replace the CheckoutContainer wrapper around UpsellNudge with CalypsoShoppingCartProvider and some additional redux selectors.
2. Wrap PurchaseModal in CheckoutProvider to get access to the transaction status manager.
3. Replace TransactionFlow.submit with useProcessPayment.
4. Replace handleCheckoutCompleteRedirect with useCreatePaymentCompleteCallback.

Fixes #48132

Testing instructions

1. With a free site, add a personal plan to your cart and visit checkout.
2. Complete the purchase with a new or existing credit card but not a 3DS card and verify that you are redirected to an upsell page.
3. On the upsell, click to purchase and click to confirm the purchase in the modal that appears.
4. Verify that you are redirected to the thank-you page successfully and that the purchase completed successfully.
5. Repeat the above steps, but click to decline the upsell and verify that you are redirected to the thank-you page.

[matticbot]

Test live: https://calypso.live/?branch=update/convert-upsell-to-composite-checkout

[matticbot]

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

Sections (~840 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
checkout         +4827 B  (+0.3%)     +923 B  (+0.3%)
woocommerce       -716 B  (-0.0%)      -83 B  (-0.0%)
signup            -203 B  (-0.1%)      -15 B  (-0.0%)
plans             -203 B  (-0.0%)      -15 B  (-0.0%)
export            -203 B  (-0.1%)      -15 B  (-0.0%)
email             -203 B  (-0.1%)      -15 B  (-0.0%)
domains           -203 B  (-0.0%)      -15 B  (-0.0%)
customize         -203 B  (-0.1%)      -15 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 (~467 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal      +3079 B  (+0.3%)     +467 B  (+0.2%)

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.

[sirbrillig]

Ok, this seems to work now! Just need to clean up the PR.

[sirbrillig]

This is now ready to be tested, although it will need to be rebased when #48069 and #48283 are merged, as they are included in here. Until that time, it may be hard to review the code changes. To that end, I've made a cleaned-up version of this PR with the dependencies removed in #48284. You can test the behavior here and read the code changes there.

[sirbrillig]

Rebased after the dependencies were merged. This is ready for final review.

[nbloomf]

Edit: this comment is describing expected behavior; never mind :)

Just noting that I needed to manually put myself in the noOffer variant of the conciergeUpsellDial AB test and manually reload local calypso after going through gutenboarding to get a free site in order to get into the right state to test this.

After completing checkout with a personal plan, I end up at what looks like a generic thank you page with no upsell: http://calypso.localhost:3000/checkout/thank-you/nbloomftestingpurchasemodal02.wordpress.com/:receiptId

[nbloomf]

The following case works as expected:

• In the offer variant of conciergeUpsellDial
• Upgrading from free to personal
• Using a 3DS card
• Opting for the concierge upsell

I am redirected to the correct thank you page (scheduling a session).

[sirbrillig]

The upsell page is not shown if the card used is a 3DS card due to the fact that 3DS cards may display a pending page before displaying the thank-you page. I updated the testing instructions to specify not using a 3DS card.

One interesting thing to note (and this is existing behavior) is that the upsell defaults to the most recently added card and not necessarily the card used for the purchase that triggered the upsell.

[niranjan-uma-shankar]

LGTM 🚢

I rebased the PR since one my changes caused a merge conflict.

I tested the following scenarios:

• Purchased a Business plan -> saw the Quick Start offer -> one-click purchase completed successfully
• Purchase a Premium plan -> saw the Business bump offer -> one-click purchase completed successfully
• Assigned myself to the Premium bump A/B test treatment group -> Purchased a Personal plan -> saw the Premium bump offer -> one-click purchase completed successfully
• Tried purchase via Calypso /plans -> after one-click purchase, got redirected to the appropriate Thank You page.
• Tried paying for a plan with PayPal -> one click upsell did not show and that's the correct behaviour
• Clicking No on the offer took to Home page