Payments: Move lib/stripe to calypso-stripe package

[sirbrillig]

Changes proposed in this Pull Request

This moves the lib/stripe directory (which is used to access Stripe Elements for our credit card form fields) to a new npm package in the monorepo called @automattic/calypso-stripe.

In the process of this move, I converted the functions in that file to TypeScript (it's easiest to review that change by looking at the commits in this PR one-by-one). While doing this, I tried not to modify the function signatures at all, but a few changes were necessary, which I will list below.

• StripeHookProvider now has fetchStripeConfiguration as a required prop. Previously this was optional, and the default was to use the bound wpcom.js functions. However, the authentication needed for that library is entangled deeply with calypso, making it much easier to inject it from the consumer components rather than try to import it wholesale. All implementations have been updated to have this prop.
• StripeHookProvider now has an optional locale prop. In Checkout: pass locale to Stripe (1) #43026, we added a mechanism to pass the user's locale to Stripe.js which it will use to localize any error messages it creates. However, that data comes from the calypso Redux store and is therefore tightly coupled to the calypso package. It is easier to inject the string from the consumer components rather than try to pull it directly within the new package. All implementations (other than tests, and unused components) have been updated to have this prop.

This also implements the changes from #46953 and #47002

Testing instructions

Because of the move itself, as well as the modifications to StripeHookProvider above, this touches quite a few places in calypso. They should not be affected, but it's worth testing all of them to be sure. For the most part, if you visit these pages and the credit card form loads without any errors (either in the UI or in the console), then this should be fine.

• Checkout (visit /plans, click to add a plan and you will be redirected to /checkout).
• Add an account-level card (visit /me/purchases/add-credit-card).
• Add a site-level card (visit /purchases/add-credit-card).
• Update a card (visit /purchases, click on a purchase that was not made with credits, and then click "Change payment method").
• Add a card to WooCommerce label services (see the testing instructions in Woo: Shipping Labels: Use Stripe Elements for Add Credit Card Dialog #35390).
• Checkout from the block editor (see the testing instructions in Update EditorCheckoutModal to use ShoppingCartProvider #46860).

(This also touches old checkout for the sake of completeness, but there's no need to test that because it is unused and that code will soon be removed.)

[matticbot]

Test live: https://calypso.live/?branch=update/move-lib-stripe-package

[matticbot]

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

Sections (~2113 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases      +1968 B  (+0.2%)     +593 B  (+0.3%)
purchases           +1937 B  (+0.2%)     +492 B  (+0.2%)
checkout            +1797 B  (+0.1%)     +577 B  (+0.1%)
woocommerce         +1758 B  (+0.1%)     +451 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.

Async-loaded Components (~1361 bytes removed 📉 [gzipped])

name                                             parsed_size           gzip_size
async-load-design-blocks                             -7494 B  (-0.2%)    -1753 B  (-0.2%)
async-load-calypso-blocks-editor-checkout-modal      +1766 B  (+0.2%)     +392 B  (+0.1%)

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.

[tjcafferkey]

Might be worth another reviewer double checking the instances outside of the editor checkout modal, but from my point of view this change LGTM.

I've also followed all of the testing steps and seems to work fine too 😄