gazebo icon indicating copy to clipboard operation
gazebo copied to clipboard

feat: Add ACH payment method

Open suejung-sentry opened this issue 10 months ago • 9 comments
trafficstars

This PR adds ability to choose ACH as a payment method. It also sets sockets for a secondary payment method (to be fully built out next quarter).

  1. Updates the View state to show Primary and Secondary payment methods, and in columns instead of rows (secondary will stay hidden until feature is finished next quarter)
  2. Updates the Edit state to a new form with tabs and sections for the 2 payment methods (secondary tab hidden)
  3. Cuts over from the existing Stripe CardElement to their PaymentElement. Note that the PaymentElement requires a clientSecret from api which establishes a Stripe setupIntent

Other notes:

  1. Moves the Stripe Appearance to a shared location so settings are not repeated across the stripe AddressElement and PaymentElement
  2. 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
  3. Updates hooks for the new ACH related tweaks to apis (done here)
  4. Updates the folder structure to accommodate the new designs.

from:

Billing Details
    BillingDetails.tsx
    |--EmailAddress
         |--EmailAddress.tsx
    |--Address
         |--AddressCard.tsx
         |--AddressForm.tsx
    |--PaymentCard
         |--CardInformation.tsx
         |--CreditCardForm.tsx
         |--PaymentCard.tsx

to:

Billing Details
   BillingDetails.tsx
   |--EmailAddress
         |--EmailAddress.tsx
   |--EditPaymentMethods
        EditPaymentMethods.tsx
        |--Address
             |--AddressForm.tsx
        |--PaymentMethod
             |--PaymentMethodForm.tsx
   |--ViewPaymentMethod
        ViewPaymentMethod.tsx
        |--Address
             |--AddressCard.tsx
        |--PaymentMethod
             |--PaymentMethod.tsx

Figma: https://www.figma.com/design/ftdTGGX43YyurDlxPCLTFy/GH-2621?node-id=1-2&p=f&t=lQMWI0ok827VpgVr-0

Closes https://github.com/codecov/engineering-team/issues/3108

suejung-sentry avatar Dec 31 '24 02:12 suejung-sentry

🔍 Existing Issues For Review

Your pull request is modifying functions with the following pre-existing issues:

📄 File: src/services/navigation/useNavLinks/useNavLinks.ts

Function Unhandled Issue
useNavLinks TypeError: Cannot read properties of undefined (reading 'match') /gh/docker/cli/commit/0f058041c4775b17b65fbb48...
Event Count: 3 Affected Users: 123

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

sentry[bot] avatar Dec 31 '24 02:12 sentry[bot]

Codecov Report

:x: Patch coverage is 85.97561% with 23 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
...gDetails/EditPaymentMethods/EditPaymentMethods.tsx 63.63% 8 Missing :warning:
...s/CurrentOrgPlan/BillingDetails/BillingDetails.tsx 64.28% 5 Missing :warning:
...PaymentMethods/PaymentMethod/PaymentMethodForm.tsx 78.94% 4 Missing :warning:
...ingDetails/ViewPaymentMethod/ViewPaymentMethod.tsx 66.66% 3 Missing :warning:
...llingDetails/ViewPaymentMethod/Address/Address.tsx 91.66% 2 Missing :warning:
src/services/account/useUpdatePaymentMethod.ts 95.00% 1 Missing :warning:
@@            Coverage Diff             @@
##             main    #3616      +/-   ##
==========================================
- Coverage   98.94%   98.80%   -0.14%     
==========================================
  Files         815      820       +5     
  Lines       14676    14752      +76     
  Branches     4156     4202      +46     
==========================================
+ Hits        14521    14576      +55     
- Misses        148      170      +22     
+ Partials        7        6       -1     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...Details/EditPaymentMethods/Address/AddressForm.tsx 91.66% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/BankInformation.tsx 100.00% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/CardInformation.tsx 100.00% <100.00%> (ø)
.../ViewPaymentMethod/PaymentMethod/PaymentMethod.tsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 95.23% <ø> (ø)
src/services/account/useCreateStripeSetupIntent.ts 100.00% <100.00%> (ø)
src/services/account/useUpdateBillingEmail.ts 100.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) :arrow_up:
src/shared/utils/billing.ts 100.00% <100.00%> (ø)
... and 8 more
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.41% <79.43%> (-0.24%) :arrow_down:
Services 99.31% <96.77%> (-0.03%) :arrow_down:
Shared 99.37% <100.00%> (+<0.01%) :arrow_up:
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 333b4e9...2dc8211. Read the comment docs.

codecov-staging[bot] avatar Dec 31 '24 03:12 codecov-staging[bot]

Codecov Report

Attention: Patch coverage is 85.97561% with 23 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (333b4e9) to head (2dc8211).

:white_check_mark: All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...gDetails/EditPaymentMethods/EditPaymentMethods.tsx 63.63% 8 Missing :warning:
...s/CurrentOrgPlan/BillingDetails/BillingDetails.tsx 64.28% 5 Missing :warning:
...PaymentMethods/PaymentMethod/PaymentMethodForm.tsx 78.94% 4 Missing :warning:
...ingDetails/ViewPaymentMethod/ViewPaymentMethod.tsx 66.66% 3 Missing :warning:
...llingDetails/ViewPaymentMethod/Address/Address.tsx 91.66% 2 Missing :warning:
src/services/account/useUpdatePaymentMethod.ts 95.00% 1 Missing :warning:
@@            Coverage Diff             @@
##             main    #3616      +/-   ##
==========================================
- Coverage   98.94%   98.80%   -0.14%     
==========================================
  Files         815      820       +5     
  Lines       14676    14752      +76     
  Branches     4164     4202      +38     
==========================================
+ Hits        14521    14576      +55     
- Misses        148      170      +22     
+ Partials        7        6       -1     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...Details/EditPaymentMethods/Address/AddressForm.tsx 91.66% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/BankInformation.tsx 100.00% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/CardInformation.tsx 100.00% <100.00%> (ø)
.../ViewPaymentMethod/PaymentMethod/PaymentMethod.tsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 95.23% <ø> (ø)
src/services/account/useCreateStripeSetupIntent.ts 100.00% <100.00%> (ø)
src/services/account/useUpdateBillingEmail.ts 100.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) :arrow_up:
src/shared/utils/billing.ts 100.00% <100.00%> (ø)
... and 8 more
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.41% <79.43%> (-0.24%) :arrow_down:
Services 99.31% <96.77%> (-0.03%) :arrow_down:
Shared 99.37% <100.00%> (+<0.01%) :arrow_up:
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 333b4e9...2dc8211. Read the comment docs.

codecov-qa[bot] avatar Dec 31 '24 03:12 codecov-qa[bot]

Codecov Report

Attention: Patch coverage is 85.97561% with 23 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (333b4e9) to head (2dc8211).

:white_check_mark: All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...gDetails/EditPaymentMethods/EditPaymentMethods.tsx 63.63% 8 Missing :warning:
...s/CurrentOrgPlan/BillingDetails/BillingDetails.tsx 64.28% 5 Missing :warning:
...PaymentMethods/PaymentMethod/PaymentMethodForm.tsx 78.94% 4 Missing :warning:
...ingDetails/ViewPaymentMethod/ViewPaymentMethod.tsx 66.66% 3 Missing :warning:
...llingDetails/ViewPaymentMethod/Address/Address.tsx 91.66% 2 Missing :warning:
src/services/account/useUpdatePaymentMethod.ts 95.00% 1 Missing :warning:
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3616      +/-   ##
==========================================
- Coverage   98.94%   98.80%   -0.14%     
==========================================
  Files         815      820       +5     
  Lines       14676    14752      +76     
  Branches     4164     4210      +46     
==========================================
+ Hits        14521    14576      +55     
- Misses        148      170      +22     
+ Partials        7        6       -1     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...Details/EditPaymentMethods/Address/AddressForm.tsx 91.66% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/BankInformation.tsx 100.00% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/CardInformation.tsx 100.00% <100.00%> (ø)
.../ViewPaymentMethod/PaymentMethod/PaymentMethod.tsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 95.23% <ø> (ø)
src/services/account/useCreateStripeSetupIntent.ts 100.00% <100.00%> (ø)
src/services/account/useUpdateBillingEmail.ts 100.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) :arrow_up:
src/shared/utils/billing.ts 100.00% <100.00%> (ø)
... and 8 more
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.41% <79.43%> (-0.24%) :arrow_down:
Services 99.31% <96.77%> (-0.03%) :arrow_down:
Shared 99.37% <100.00%> (+<0.01%) :arrow_up:
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 333b4e9...2dc8211. Read the comment docs.

codecov[bot] avatar Dec 31 '24 03:12 codecov[bot]

Codecov Report

Attention: Patch coverage is 85.97561% with 23 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (333b4e9) to head (4aacfb6).

:white_check_mark: All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...gDetails/EditPaymentMethods/EditPaymentMethods.tsx 63.63% 8 Missing :warning:
...s/CurrentOrgPlan/BillingDetails/BillingDetails.tsx 64.28% 5 Missing :warning:
...PaymentMethods/PaymentMethod/PaymentMethodForm.tsx 78.94% 4 Missing :warning:
...ingDetails/ViewPaymentMethod/ViewPaymentMethod.tsx 66.66% 3 Missing :warning:
...llingDetails/ViewPaymentMethod/Address/Address.tsx 91.66% 2 Missing :warning:
src/services/account/useUpdatePaymentMethod.ts 95.00% 1 Missing :warning:
@@            Coverage Diff             @@
##             main    #3616      +/-   ##
==========================================
- Coverage   98.94%   98.80%   -0.14%     
==========================================
  Files         815      820       +5     
  Lines       14676    14752      +76     
  Branches     4164     4202      +38     
==========================================
+ Hits        14521    14576      +55     
- Misses        148      170      +22     
+ Partials        7        6       -1     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...Details/EditPaymentMethods/Address/AddressForm.tsx 91.66% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/BankInformation.tsx 100.00% <100.00%> (ø)
...iewPaymentMethod/PaymentMethod/CardInformation.tsx 100.00% <100.00%> (ø)
.../ViewPaymentMethod/PaymentMethod/PaymentMethod.tsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 95.23% <ø> (ø)
src/services/account/useCreateStripeSetupIntent.ts 100.00% <100.00%> (ø)
src/services/account/useUpdateBillingEmail.ts 100.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) :arrow_up:
src/shared/utils/billing.ts 100.00% <100.00%> (ø)
... and 8 more
Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.41% <79.43%> (-0.24%) :arrow_down:
Services 99.31% <96.77%> (-0.03%) :arrow_down:
Shared 99.37% <100.00%> (+<0.01%) :arrow_up:
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 333b4e9...4aacfb6. Read the comment docs.

codecov-public-qa[bot] avatar Dec 31 '24 03:12 codecov-public-qa[bot]

@codecov-ai-reviewer review

aj-codecov avatar Jan 02 '25 18:01 aj-codecov

Bundle Report

Changes will increase total bundle size by 6.08MB (100.3%) :arrow_up::warning:, exceeding the configured threshold of 5%.

Bundle name Size Change
gazebo-staging-system 6.04MB 6.04MB (100%) :arrow_up::warning:
gazebo-staging-esm 6.09MB 6.09MB (100%) :arrow_up::warning:
gazebo-staging-system-esm (removed) 6.06MB (-100.0%) :arrow_down:

codecov-staging[bot] avatar Jan 14 '25 18:01 codecov-staging[bot]

Bundle Report

Changes will decrease total bundle size by 12.18MB (-50.1%) :arrow_down:. This is within the configured threshold :white_check_mark:

Detailed changes
Bundle name Size Change
gazebo-production-system 6.04MB 5.83kB (0.1%) :arrow_up:
gazebo-production-esm 6.09MB 6.51kB (0.11%) :arrow_up:
gazebo-production-array-push (removed) 6.14MB (-100.0%) :arrow_down:
gazebo-production-system-esm (removed) 6.06MB (-100.0%) :arrow_down:

codecov[bot] avatar Jan 14 '25 18:01 codecov[bot]

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit Created Cloud Enterprise
d64d4151d97bcbdefcf75bec4bc475589348781b Tue, 14 Jan 2025 18:59:28 GMT Expired Expired
2ade2fc648f8c93bf7a02aceb0ddc62dbc2995db Tue, 14 Jan 2025 19:57:35 GMT Expired Expired
2ade2fc648f8c93bf7a02aceb0ddc62dbc2995db Tue, 14 Jan 2025 19:59:23 GMT Expired Expired
eaaf86d005bdb6464cd9eb7a065ee7fd0e633b1c Tue, 14 Jan 2025 20:05:57 GMT Expired Expired
2dc8211fc70e59b9885452ace2dd7edf76e30b09 Tue, 14 Jan 2025 21:15:54 GMT Cloud Enterprise

codecov-releaser avatar Jan 14 '25 18:01 codecov-releaser