feat(checkout-flow): handle credit card functionality

[nickoferrall]

Fix #7693

Demo: https://www.loom.com/share/66aedcba66f14d6ea1ce1dcd82217c0e

I had a look on the Stripe Dashboard to see if Igor & Georg have access, but I couldn't see any other users. I think that's because I have restricted permissions where I can't see or invite other users. So if you don't have Stripe access, please tag someone in Slack that can invite you.

I'll improve the UI after the user has upgraded in the following issue: #8006

A subscription will not be created for 3D Secure payment methods. This will be handled here: #7864

To test

• Add the checkout flow feature flag to an org on the Starter tier
• Enter dummy card details. Click "Upgrade" before you've entered all the details and see the error messages
• Enter dummy credit card details correctly, click Upgrade, and see the confetti animation
• Go to the Stripe dashboard, click "Test" mode, and see that the subscription was successfully created
• Refresh the page and see that the org has now been upgraded to the Team tier and the credit card panel no longer shows up

[nickoferrall]

SetupIntent is used for subscriptions whereas createPaymentIntent is used for one-off payments

[nickoferrall]

upgradeToTeamTier changed quite a bit now that we're using Stripe Elements and use the paymentMethodId rather than creating a stripe token using the credit card details the user gives us.

I felt that the simplest move was to rename upgradeToTeamTier to upgradeToTeamTierOld and create a new upgradeToTeamTier helper function. We can remove the old one when we rollout the new checkout flow.

[igorlesnenko]

If I'm trying to upgrade another org after one successful upgrade, I'm getting this error:

16:11:06 1|GraphQL Executor  | SEND TO SENTRY Error: payment_method
16:11:06 1|GraphQL Executor  |     at Object.resolve [as MutationupgradeToTeamTierResolver] (/Users/igor/www/parabol/dev/gqlExecutor.js:21603:29)
16:11:06 1|GraphQL Executor  |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {}

Works after some time.

Can you reproduce?

[nickoferrall]

Thanks @igorlesnenko - I could reproduce the payment_method console error. I fixed this by attaching the payment to the customer before updating the default payment method.

[Dschoordsch]

Just a side note, the "Plans" panel does not have any focus behaviour which makes it impossible to use with just the keyboard

[nickoferrall]

Yeah, that would be nice! I've created an issue to work on that: #8085

[Dschoordsch]

-1 What about if not? If I test with a declining card 4000000000000002 or with a 3D Secure card 4000002760003184 and decline, then there is no message at all

[nickoferrall]

Thanks, updated!

By the way, 3D Secure cards won't create subscriptions in this PR. It'll be handled in #7864

[Dschoordsch]

Before we forget, can you please also add new testing scenarios to the release test?
Could also be done a bit later, but should be logged in an issue so we don't forget.

[nickoferrall]

can you please also add new testing scenarios to the release test?

Sure thing! I've added an issue here: #8089