Billing: Replace PaymentMethodForm in add card form

[sirbrillig]

Changes proposed in this Pull Request

This replaces PaymentMethodForm with PaymentMethodSelector (the updated payment method selector that's already being used by ChangePaymentMethod) in AddPaymentMethod and both site-level and account-level AddNewPaymentMethod components.

See: #48966

Some of these changes are not directly related to the "add card" forms so this could be broken up into multiple PRs.

To do

• We need to display a different notice when adding a new payment method as opposed to changing a payment method.
• When the PaymentMethodSelector finishes, it displays its own notice. This notice is not as accurate as the notices already displayed by the functions in client/me/purchases/components/payment-method-form/helpers.js, and since you cannot display more than one notice at once, the new notice overwrites the old one. It would be better if the notice was displayed only by the component which adds or updates the payment method rather than the function that does the update. Changing this will require modifying the existing functions. Which leads us to...
• The existing functions to add and update cards are inside client/me/purchases/components/payment-method-form which is the directory for the PaymentMethodForm component that is being deprecated by this PR. We should copy those functions elsewhere so that the existing ones can eventually be removed. (There are similar functions in client/state/stored-cards/actions.js but those are for Redux only.)
• Currently this code works for the account-level AddNewPaymentMethod but we need it to work for the site-level one as well.
• This code changes AddPaymentMethod but I haven't tested it because I can't remember how to get that form to be displayed. Do we really need a separate one?
• Just as the old forms do, when using PaymentMethodSelector to add a new payment method, it updates all existing purchases to use that payment method; this is terrible UX and we'll need to handle that somehow (this is a known issue but we must not forget about it in this PR even if we plan to change the behavior elsewhere).
• This does not address the use of PaymentMethodForm in the Woo shipping labels section. That's probably fine but we have to make sure we don't break that accidentally by these changes.
• This also touches code related to changing payment methods and, more critically, checkout, and we have to be sure not to break those as well.

Testing instructions

WIP

[matticbot]

Test live: https://calypso.live/?branch=update/use-composite-checkout-for-add-card

[matticbot]

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

App Entrypoints (~84 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                   -38 B  (-0.0%)      -19 B  (-0.0%)
entry-login                  -38 B  (-0.0%)      -20 B  (-0.0%)
entry-gutenboarding          -38 B  (-0.0%)      -23 B  (-0.0%)
entry-domains-landing        -38 B  (-0.0%)      -22 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1390 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
purchases           +2543 B  (+0.2%)     +648 B  (+0.2%)
site-purchases      +2107 B  (+0.2%)     +703 B  (+0.2%)
woocommerce          -726 B  (-0.0%)      -75 B  (-0.0%)
checkout             +418 B  (+0.0%)     +124 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 (~126 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal       +418 B  (+0.0%)     +126 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.

[sirbrillig]

I split up most of this PR into smaller pieces:

#49057

• Make useCreateExistingCards memoize only if ids change

#49058

• Create PaymentMethodSelector
• Remove unused params to undocumented.updateCreditCard
• Fix creditCardHasAlreadyExpired to prevent fatal
• Update ChangePaymentMethod to use PaymentMethodSelector
• Update useCreateAssignablePaymentMethods to support changing stored cards

#49059

• Update account-level AddNewPaymentMethod to use PaymentMethodSelector

Some pieces are not included in the above, specifically the updates to AddPaymentMethod, but those can come in a later PR. At that point, I'll close this PR as unnecesary.

[sirbrillig]

Closing as redundant to the other PRs.