Payments: scaffold the checkout pending page, the 2nd attempt.

[southp]

Summary

This PR renovates #23670 so that the pending checkout page routes according to the new state tree defined in #23822.

Test Plan

1. Access the pending checkout page URL, e.g. http://calypso.localhost:3000/checkout/thank-you/southptestcall.wordpress.com/pending/12345. Note that 12345 here is considered as the order ID, and the site slug should be the one belonging to the account that you have logged in. You should see this:
   
2. For the payment succeeded scenario, In the browser console. run: dispatch( { type: 'ORDER_TRANSACTION_SET', orderId: 12345, transaction: { processingStatus: 'ORDER_TRANSACTION_STATUS_SUCCESS' } } ); and you should see:
   
3. For the payment error scenario, go back to the pending checkout page, and run dispatch( { type: 'ORDER_TRANSACTION_SET', orderId: 12345, transaction: { processingStatus: 'ORDER_TRANSACTION_STATUS_ERROR' } } );. You should be redirected to the checkout page like this:
   
4. For the case that API responded with HTTP error, run dispatch( { type: 'ORDER_TRANSACTION_FETCH_ERROR', orderId: 12345, error: {} } ); and you should see the same page like above.
5. For the case that a user has cancelled a payment, run dispatch( { type: 'ORDER_TRANSACTION_SET', orderId: 12345, transaction: { processingStatus: 'ORDER_TRANSACTION_STATUS_FAILURE' } } ); and you should be redirected back to homepage.
6. For the case that API responded with an unknown status string, run dispatch( { type: 'ORDER_TRANSACTION_SET', orderId: 12345, transaction: { processingStatus: 'ORDER_TRANSACTION_STATUS_UKNOWN' } } ); and you should be redirected back to homepage with an error notice like this:
   

[matticbot]

Test live: https://calypso.live/?branch=add/scaffold-the-checkout-pending-page-2nd

[a8ci18n]

Hi! I've found a possible matching string that has already been translated 19 times:
translate( 'We've encountered a problem. Please try again later.' ) ES Score: 12

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

[a8ci18n]

Hi! I've found a possible matching string that has already been translated 19 times:
translate( 'We've encountered a problem. Please try again later.' ) ES Score: 12

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

[benhuberman]

Hi @southp -- going through the various screens, here are a couple of quick notes re: the copy:

1. The congrats message looks fine! It would be even nicer if it were a little more specific, e.g. "Congratulations on your new plan!", "Congratulations on your new domain!" etc. but it's not a huge deal if this isn't possible.
2. The error message in bullet point Menus: Alignment issue with undo link in is-info notice after deleting menu #3 sounds slightly off. I'd tweak to:

Sorry, we couldn't process your payment. Please try again later.

3. The error message in bullet point Site Picker: Always show search if user has hidden site #4 is also a bit weird -- specifically, the "unknown problem" bit, which leaves the user entirely unsure what's happened. I don't know that any alternative would make a user significantly more confident, but even changing "unknown" to "unexpected" could soften the effect here. This is a moment in which a slightly "warmer" message might be worth considering, e.g.:

Oops! Something went wrong. Please try again later.

[southp]

@benhuberman Thanks for the feedback! I've updated the two screens as:

and

Does it look good to you?

[yoavf]

I'm having second doubts about this - maybe the plans page is better?

[southp]

After playing a bit more, I agree with you. Since the whole flow is initiated from the plan page, redirecting back there is much less confusing. I've updated it in 9fc71cf. The case of unknown status has been updated as well, which I think the same reasoning applied :)

[benhuberman]

Looks good to me, @southp!