Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Cut over to Stripe PaymentElement #3665

Merged
merged 5 commits into from
Jan 20, 2025
Merged

feat: Cut over to Stripe PaymentElement #3665

merged 5 commits into from
Jan 20, 2025

Conversation

suejung-sentry
Copy link
Contributor

@suejung-sentry suejung-sentry commented Jan 16, 2025

This PR adds ability to choose ACH as a payment method.

  1. Cuts over from the existing Stripe CardElement to their PaymentElement. Note that the PaymentElement requires a clientSecret from api which establishes a Stripe setupIntent (corresponding work in api here)
  2. Moves the Stripe Appearance to a shared location so settings are not repeated across the stripe AddressElement and PaymentElement
  3. Initializes the Stripe Elements provider in mode: setup, currency: usd as required per here, here if using the PaymentElement. Otherwise stripe console errors that mode or client secret missing

ACH won't actually be turned on until it is selected in the Stripe dashboard, but this PR gets things set up.

Closes codecov/engineering-team#3108

When ACH not yet turned on, the new PaymentElement for Card is shown below:
Screenshot 2025-01-20 at 11 13 24 AM

(old)
Screenshot 2025-01-20 at 11 32 27 AM

The view screen remains unchanged:
Screenshot 2025-01-20 at 11 13 13 AM

For ACH below are screenshots of the PaymentElement
Screenshot 2025-01-20 at 11 34 02 AM
Screenshot 2025-01-20 at 11 34 11 AM

@codecov-qa
Copy link

codecov-qa bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.71429% with 3 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (371a218) to head (30b8561).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% 3 Missing ⚠️
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14716    14784      +68     
  Branches     4165     4206      +41     
==========================================
+ Hits        14557    14608      +51     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...lan/BillingDetails/PaymentCard/CardInformation.jsx 100.00% <ø> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/propTypes.js 100.00% <ø> (ø)
src/services/account/useAccountDetails.ts 95.45% <100.00%> (+0.21%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
... and 1 more

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.43% <93.18%> (-0.20%) ⬇️
Services 99.28% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 371a218...30b8561. Read the comment docs.

@codecov-staging
Copy link

codecov-staging bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.71429% with 3 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% 3 Missing ⚠️
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14716    14784      +68     
  Branches     4173     4206      +33     
==========================================
+ Hits        14557    14608      +51     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...lan/BillingDetails/PaymentCard/CardInformation.jsx 100.00% <ø> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/propTypes.js 100.00% <ø> (ø)
src/services/account/useAccountDetails.ts 95.45% <100.00%> (+0.21%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
... and 1 more

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.43% <93.18%> (-0.20%) ⬇️
Services 99.28% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 371a218...30b8561. Read the comment docs.

Copy link

codecov-public-qa bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.71429% with 3 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (371a218) to head (30b8561).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% 3 Missing ⚠️
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14716    14784      +68     
  Branches     4165     4214      +49     
==========================================
+ Hits        14557    14608      +51     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...lan/BillingDetails/PaymentCard/CardInformation.jsx 100.00% <ø> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/propTypes.js 100.00% <ø> (ø)
src/services/account/useAccountDetails.ts 95.45% <100.00%> (+0.21%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
... and 1 more

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.43% <93.18%> (-0.20%) ⬇️
Services 99.28% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 371a218...30b8561. Read the comment docs.

@codecov-releaser
Copy link
Contributor

codecov-releaser commented Jan 16, 2025

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit Created Cloud Enterprise
969f83f Thu, 16 Jan 2025 22:55:02 GMT Expired Expired
5d262cd Fri, 17 Jan 2025 00:27:57 GMT Expired Expired
755744a Fri, 17 Jan 2025 01:35:09 GMT Expired Expired
91a732a Fri, 17 Jan 2025 02:35:46 GMT Expired Expired
ea0b00d Fri, 17 Jan 2025 02:54:17 GMT Expired Expired
31557fe Fri, 17 Jan 2025 03:04:21 GMT Expired Expired
0d33704 Fri, 17 Jan 2025 03:14:23 GMT Expired Expired
96caf94 Sat, 18 Jan 2025 00:33:00 GMT Expired Expired
0f3d8bb Mon, 20 Jan 2025 17:36:35 GMT Expired Expired
27c7e37 Mon, 20 Jan 2025 19:17:57 GMT Expired Expired
30b8561 Mon, 20 Jan 2025 19:31:49 GMT Cloud Enterprise

Copy link

codecov bot commented Jan 16, 2025

Bundle Report

Changes will increase total bundle size by 12.2MB (100.49%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name Size Change
gazebo-production-array-push* 6.14MB 6.14MB (100%) ⬆️⚠️
gazebo-production-system 6.05MB 4.54kB (0.08%) ⬆️
gazebo-production-system-esm* 6.06MB 6.06MB (100%) ⬆️⚠️
gazebo-production-esm 6.1MB 4.78kB (0.08%) ⬆️

ℹ️ *Bundle size includes cached data from a previous commit

Copy link

codecov bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.71429% with 3 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (371a218) to head (30b8561).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14716    14784      +68     
  Branches     4165     4206      +41     
==========================================
+ Hits        14557    14608      +51     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...lan/BillingDetails/PaymentCard/CardInformation.jsx 100.00% <ø> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/propTypes.js 100.00% <ø> (ø)
src/services/account/useAccountDetails.ts 95.45% <100.00%> (+0.21%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
... and 1 more

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.43% <93.18%> (-0.20%) ⬇️
Services 99.28% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 371a218...30b8561. Read the comment docs.

@suejung-sentry suejung-sentry changed the title Sshin/stripe 2 feat: Cut over to Stripe PaymentElement Jan 16, 2025
@suejung-sentry suejung-sentry force-pushed the sshin/stripe-2 branch 3 times, most recently from 455f129 to 91a732a Compare January 17, 2025 02:30
@suejung-sentry suejung-sentry marked this pull request as ready for review January 17, 2025 02:31
interface BankInformationProps {
subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
}
function BankInformation({ subscriptionDetail }: BankInformationProps) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can you get away with just passing bankAccount into this component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call - updated!

provider,
owner,
name:
subscriptionDetail?.defaultPaymentMethod?.billingDetails?.name ||
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Is it possible to pass just billingDetails to this component or set it to a const before this hook?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True - set the const as suggested!

@@ -213,3 +213,20 @@ export function useAccountDetails({
...opts,
})
}

export const stripeAddress = (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thoughts on keeping this next to where it's being used in PaymentMethodForm?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved it, I like that!

@@ -62,7 +67,9 @@ export function useUpdatePaymentMethod({
payment_method_data: {
// eslint-disable-next-line camelcase
billing_details: {
name: name,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think we can tidy this up to { name, email, address }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice - fixed!

Copy link
Contributor

@ajay-sentry ajay-sentry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

couple small comments but nothing blocking

@suejung-sentry suejung-sentry added this pull request to the merge queue Jan 20, 2025
Merged via the queue into main with commit 02d5b6b Jan 20, 2025
50 of 62 checks passed
@suejung-sentry suejung-sentry deleted the sshin/stripe-2 branch January 20, 2025 19:51
Copy link

sentry-io bot commented Jan 22, 2025

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

  • ‼️ TypeError: Importing a module script failed. /:provider/:owner/:repo/pull/:pullId View Issue
  • ‼️ SecurityError: The operation is insecure. /gh/Oztechan/CCC/commit/523d956d38daa4765a7f0df... View Issue
  • ‼️ TypeError: Importing a module script failed. /:provider/:owner/:repo View Issue
  • ‼️ TypeError: Importing a module script failed. /:provider/:owner/:repo View Issue
  • ‼️ TypeError: null is not an object (evaluating 'N[f]') /:provider/:owner/:repo/tree/:branch View Issue

Did you find this useful? React with a 👍 or 👎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Gazebo] Update the Billing / Plan Page to fit the new Figma Design
3 participants