Billing: Add option to assign payment method to all subscriptions when adding card

[sirbrillig]

Changes proposed in this Pull Request

Currently the "Add payment method" forms at both the account and site-level display text in the sidebar that reads This card will be used for future renewals of existing purchases. and when the form is submitted, it assigns the newly added payment method to all existing subscriptions.

This PR adds a checkbox (defaulting to checked) to the form which allows the user to decide if they want to do that, or if they just want to add a card and assign it later. It moves the sidebar warning inline just underneath the submit button, and changes the warning's text if the checkbox is not checked.

NOTE Once #49897 is merged, this PR will include the site-level form as well. Since this PR removes the sidebar warning that the card will be used for all subscriptions, we should wait to merge this until that is complete so that we make sure that we replace it with the checkbox on all the active forms at once. (We cannot keep the sidebar warning because it is a React sibling of the PaymentMethodSelector where the checkbox lives and has no way to know the state of the checkbox.) That said, no changes will be needed to this PR to support that form, so this can be reviewed now.

Fixes #50047

Screenshots

Before:

After:

Close-up of checkbox checked (note text after button):

Close-up of checkbox unchecked (note text after button):

Testing instructions

• Use a site that has at least one subscription.
• Visit http://calypso.localhost:3000/me/purchases/add-payment-method and verify that you see the checkbox mentioned.
• Add a new card (if your API is sandboxed you can use a stripe test card with a unique last 4 digits so you can more easily tell the cards apart) using the form and leave the checkbox checked.
• Verify that the form submits correctly, and that your subscription has the new card assigned to it.
• Repeat the above steps with a new card, but uncheck the box.
• Verify that the form submits correctly, and that your subscription does not have the card assigned to it.
• Verify that the new card shows up in the list of payment methods on http://calypso.localhost:3000/me/purchases/payment-methods

[matticbot]

Test live: https://calypso.live/?branch=add/assign-all-subscriptions-checkbox

[matticbot]

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

Sections (~320 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
purchases           +1133 B  (+0.1%)     +320 B  (+0.1%)
site-purchases      +1064 B  (+0.1%)     +288 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.

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]

Thanks to @michaeldcain, I realized that if we try to display the form when stripe fails to load, you will just see a loading screen forever.

I added code to display stripe errors, although it will need to be migrated to other places using PaymentMethodSelector also if they have their own custom loading component.

UPDATE: added the same guard to site-level payments as part of #49897 and I believe that the change payment method forms don't need it.

[michaeldcain]

This works well for me and LGTM. I added a card with the checkbox selected and it properly assigned the payment method. I added another with it unselected and it properly added it to the account, unassigned. I was then able to assign the new method from different subscription setting pages.

I pushed a slight design change to group the warning and checkbox together. I think it's good enough to ship if we need to change it, we can do it in a future PR.

[sirbrillig]

Rebase now that #49897 is merged, just to be able to test site-level forms also.

[sirbrillig]

Seems to work well with the site-level form. I'll merge it tomorrow.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5531771

Thank you @sirbrillig for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.