[HOLD for payment 2024-08-29] [$250] [Payment card / Subscription] add UI for SCA error banner and re-authentication flow #46064
Description
If you don't know what SCA is, it stands for strong customer authentication, and is an extra authentication step that we use for users who add billing cards with GBP as their payment currency. You don't need to know about SCA in depth in order to work on this issue.
#42432 added the most straightforward use case of adding a payment card via the SCA flow and having the authentication succeed, but we are stilling lacking an error banner when authentication doesn't succeed. We also need to give the user a way to authenticate again if authentication fails.
When a user goes through the SCA authentication in new dot right now and purposely fails the authentication this is what happens:
Screen.Recording.2024-07-23.at.11.49.39.AM.mov
This is wrong. The UI makes it seem like the payment card is ready to be used and is fine, when its actually not fine. We should be showing the following UI with the error banner and "Authenticate payment" button.
Clicking "Authenticate payment" should open up the right-docked add payment card pane with and also open up the iframe authentication model (src/pages/settings/Subscription/CardAuthenticationModal/index.tsx), restarting the authentication process.
The tricky thing about this issue is that its not possible for non-expensify engineers to test end to end, so you will be working closely with @blimpich to ensure this is working as intended.
The error banner should show when the onyx key nvp_private_stripeCustomerID has its status attribute equal to "authentication_required".
Relevant section of design doc. This doc also has the approved Spanish translations necessary to complete this. Please message @blimpich if you do not have access to this document and would like access, and make sure to include your email address.