Checkout: Convert useCreateExistingCards to TypeScript

[sirbrillig]

Changes proposed in this Pull Request

Eventually it would be nice to convert all of useCreatePaymentMethods to TypeScript, but it's a lot of code. This takes the first step by moving the hook to its own directory and then converting one of its sub-functions, useCreateExistingCards. That function also happens to be used independently by the payment management pages.

Testing instructions

Two areas are affected by this change: checkout (for saved cards) and the "change payment method" pages (both site-level and account-level, although they use the same component so only one needs to be tested).

To test checkout:

• Using an account with at least one saved card, add a product to your cart and visit checkout.
• Verify that you see the saved card shown as an option in the last step.

To test payment method changes:

• Visit either site-level or account-level payment management, click on a subscription that already has a payment method assigned, and click "Change payment method".
• Verify that you see the saved cards listed in the form.

[matticbot]

Test live: https://calypso.live/?branch=update/use-create-existing-cards-typescript

[matticbot]

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

Sections (~13 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases        +44 B  (+0.0%)      +12 B  (+0.0%)
purchases             +44 B  (+0.0%)      +12 B  (+0.0%)
checkout              +24 B  (+0.0%)       -6 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 (~6 bytes removed 📉 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal        +24 B  (+0.0%)       -6 B  (-0.0%)

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.

[nbloomf]

This seems general purpose enough to warrant being put in a less specific place, but I'm not sure where that would be.

[sirbrillig]

Yeah, same. There's a few things in this directory and lib that fall into a general utility category but I figure we can always move them later.

[nbloomf]

Looks good and works as expected.

[sirbrillig]

The only relevant failing e2e test seems to be that the G Suite upgrade card (see #48516) is redirecting back to the domains page when clicking "Skip for now". This could be an actual bug, but I don't think it's related to this PR so I'm going to research it separately. I'm adding a notice to that redirect in #50738 to help track it down.