Purchases: Reduxify Stored Cards on Edit Card Details page

[stephanethomas]

This pull request is a follow-up of #6613, #6628, #6665, #6710 that updates the Edit Card Details page to use the global state tree to manage credit cards (stored during previous purchases or when a user added a new payment method to an existing purchase) instead of the former Flux store:

It also fixes the prefilling of the card holder name that was broken.

Testing instructions

1. Run git checkout update/reduxify-edit-card-details and start your server, or open a live branch
2. Sandbox the store
3. Purchase e.g. a plan or a site redirect with a fake credit card
4. Open the Purchases page
5. Click on the new purchase
6. Click on the Edit Payment Method action
7. Check that the Name on Card field contains the card holder name used in the checkout
8. Enter a new fake credit card (with a different name) and click the Save Card button
9. Check that you are redirected back to the Manage Purchase page with a success message
10. Check that you can see this new card on the Billing History page
11. Navigate back to the same Edit Card Details page
12. Check that the Name on Card field is prefilled in with the new name

You may want to check other payment methods, or type of purchases. You could also force a browser refresh on certain pages to make sure it doesn't make a difference.

Additional notes

I opted not to update the Redux selector to remap keys similarly to what the former assembler was doing because as you can see it here the only value we care is the card holder name. We use the keys provided by the API in any other places where we display credit cards. We can address that in a separate pull request though if most of us think it's worth it.

Reviews

• Code
• Product
• Tests

@Automattic/sdev-feed

[stephanethomas]

I'm not super fan of referring here to a prop that is in fact set in the EditCardDetails component but managing it in this data component proved to be awkward (or maybe that's just me :) ).

[drewblaisdell]

This looks good. I had one note about moving the logic to display the loading placeholder and query the stored cards into EditCardDetails itself, in order to remove EditCardDetailsData.

[stephanethomas]

Thank you very much for the review @drewblaisdell. I updated this pull request per your suggestion. It is now ready for another review.

[fabianapsimoes]

I'm unable to open Manage Purchase in this branch. I see this error in the console when I click any items in the list in /purchases:

TypeError: creditCard is undefined

Edit: Seems it doesn't happen to all purchases, but to some of them. I'm guessing the ones that do not have a payment method?

[stephanethomas]

Thanks for catching this error @fabianapsimoes. I've fixed the issue, this is ready for review again.

[fabianapsimoes]

Product 👍

[drewblaisdell]

Super minor, but fields should be a const now.

[stephanethomas]

Good catch!

[drewblaisdell]

I also tested this, and the code looks good to me. 👍 Not remapping keys seems like the right approach for this change, as well.