feat: Add ACH payment flows #3673

suejung-sentry · 2025-01-21T19:59:44Z

Add flows to handle when using ACH with async microdeposits. Need to adjust for the below flows:

User is going from free to paid and has finished the intiial CheckoutSession selecting ACH microdeposits as their payment method. They need to wait 2 days for the microdeposits to hit their account. What should they see in the UI?
- shows a banner that it's awaiting verification
User decides they want to abandon that existing upgrade that is in progress and waiting for the ACH microdeposits. What actions can they perform and what should they be able to see in the UI?
- shows a modal to confirm what they are doing
User is on an existing plan and wants to update their payment method to ACH microdeposits. What does the UI look like until it's confirmed?
- View Payment Method page shows the old method and the same banner as in 1 above

This PR also handles some stripe error message rendering in the PaymentElement.

What "here" links to

codecov/engineering-team#2622

codecov · 2025-01-21T20:02:20Z

Bundle Report

Changes will increase total bundle size by 20 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
gazebo-production-system	6.05MB	10 bytes (0.0%) ⬆️
gazebo-production-esm	6.1MB	10 bytes (0.0%) ⬆️

codecov-notifications · 2025-01-21T20:03:05Z

❌ 13 Tests Failed:

Tests completed	Failed	Passed	Skipped
4820	13	4807	2

View the top 3 failed tests by shortest run time

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx > PaymentMethodForm > when there is an error in the form > renders the error

Stack Traces | 0.0344s run time

Error: [vitest] No "MissingNameError" export is defined on the "services/account/useUpdatePaymentMethod" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:

vi.mock(import("services/account/useUpdatePaymentMethod"), async (importOriginal) => {
  const actual = await importOriginal()
  return {
    ...actual,
    // your mocked methods
  }
})

 ❯ getErrorMessage .../BillingDetails/PaymentCard/PaymentMethodForm.tsx:162:14
 ❯ PaymentMethodForm .../BillingDetails/PaymentCard/PaymentMethodForm.tsx:98:14
 ❯ renderWithHooks .../react-dom/cjs/react-dom.development.js:15486:18
 ❯ mountIndeterminateComponent .../react-dom/cjs/react-dom.development.js:20103:13
 ❯ beginWork .../react-dom/cjs/react-dom.development.js:21626:16
 ❯ beginWork$1 .../react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork .../react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync .../react-dom/cjs/react-dom.development.js:26505:5

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx > PaymentCard > when there is an error in the form > renders the error

Stack Traces | 0.0592s run time

TypeError: Cannot read properties of undefined (reading 'match')
 ❯ Proxy.useParams .../react-router/modules/hooks.js:40:17
 ❯ Module.useNavLinks .../navigation/useNavLinks/useNavLinks.ts:53:7
 ❯ useLinkConfig .../shared/AppLink/AppLink.tsx:10:9
 ❯ .../shared/AppLink/AppLink.tsx:113:3
 ❯ renderWithHooks .../react-dom/cjs/react-dom.development.js:15486:18
 ❯ updateForwardRef .../react-dom/cjs/react-dom.development.js:19245:20
 ❯ beginWork .../react-dom/cjs/react-dom.development.js:21675:16
 ❯ beginWork$1 .../react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork .../react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync .../react-dom/cjs/react-dom.development.js:26505:5

src/pages/PlanPage/PlanPage.test.jsx > PlanPage > testing routes > on invoices id path > renders invoices details page

Stack Traces | 1s run time

TestingLibraryElementError: Unable to find an element with the text: /InvoiceDetailsPage/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>
 ❯ waitForWrapper node_modules/@.../dom/dist/wait-for.js:163:27
 ❯ node_modules/@.../dom/dist/query-helpers.js:86:33
 ❯ .../pages/PlanPage/PlanPage.test.jsx:199:24

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

codecov-public-qa · 2025-01-21T20:03:11Z

❌ 13 Tests Failed:

Tests completed	Failed	Passed	Skipped
4179	13	4166	0

View the top 3 failed tests by shortest run time

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx > PaymentMethodForm > when there is an error in the form > renders the error

Stack Traces | 0.0344s run time

Error: [vitest] No "MissingNameError" export is defined on the "services/account/useUpdatePaymentMethod" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:

vi.mock(import("services/account/useUpdatePaymentMethod"), async (importOriginal) => {
  const actual = await importOriginal()
  return {
    ...actual,
    // your mocked methods
  }
})

 ❯ getErrorMessage .../BillingDetails/PaymentCard/PaymentMethodForm.tsx:162:14
 ❯ PaymentMethodForm .../BillingDetails/PaymentCard/PaymentMethodForm.tsx:98:14
 ❯ renderWithHooks .../react-dom/cjs/react-dom.development.js:15486:18
 ❯ mountIndeterminateComponent .../react-dom/cjs/react-dom.development.js:20103:13
 ❯ beginWork .../react-dom/cjs/react-dom.development.js:21626:16
 ❯ beginWork$1 .../react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork .../react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync .../react-dom/cjs/react-dom.development.js:26505:5

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx > PaymentCard > when there is an error in the form > renders the error

Stack Traces | 0.0592s run time

TypeError: Cannot read properties of undefined (reading 'match')
 ❯ Proxy.useParams .../react-router/modules/hooks.js:40:17
 ❯ Module.useNavLinks .../navigation/useNavLinks/useNavLinks.ts:53:7
 ❯ useLinkConfig .../shared/AppLink/AppLink.tsx:10:9
 ❯ .../shared/AppLink/AppLink.tsx:113:3
 ❯ renderWithHooks .../react-dom/cjs/react-dom.development.js:15486:18
 ❯ updateForwardRef .../react-dom/cjs/react-dom.development.js:19245:20
 ❯ beginWork .../react-dom/cjs/react-dom.development.js:21675:16
 ❯ beginWork$1 .../react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork .../react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync .../react-dom/cjs/react-dom.development.js:26505:5

src/pages/PlanPage/PlanPage.test.jsx > PlanPage > testing routes > on invoices id path > renders invoices details page

Stack Traces | 1s run time

TestingLibraryElementError: Unable to find an element with the text: /InvoiceDetailsPage/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>
 ❯ waitForWrapper node_modules/@.../dom/dist/wait-for.js:163:27
 ❯ node_modules/@.../dom/dist/query-helpers.js:86:33
 ❯ .../pages/PlanPage/PlanPage.test.jsx:199:24

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

codecov-releaser · 2025-01-21T20:04:57Z

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit	Created	Cloud	Enterprise
`7f4797b`	Tue, 21 Jan 2025 20:04:57 GMT	Cloud	Enterprise

codecov-qa · 2025-01-24T20:50:01Z

❌ 13 Tests Failed:

Tests completed	Failed	Passed	Skipped
4177	13	4164	2

View the top 3 failed tests by shortest run time

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx > PaymentMethodForm > when there is an error in the form > renders the error

Stack Traces | 0.0344s run time

Error: [vitest] No "MissingNameError" export is defined on the "services/account/useUpdatePaymentMethod" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:

vi.mock(import("services/account/useUpdatePaymentMethod"), async (importOriginal) => {
  const actual = await importOriginal()
  return {
    ...actual,
    // your mocked methods
  }
})

 ❯ getErrorMessage .../BillingDetails/PaymentCard/PaymentMethodForm.tsx:162:14
 ❯ PaymentMethodForm .../BillingDetails/PaymentCard/PaymentMethodForm.tsx:98:14
 ❯ renderWithHooks .../react-dom/cjs/react-dom.development.js:15486:18
 ❯ mountIndeterminateComponent .../react-dom/cjs/react-dom.development.js:20103:13
 ❯ beginWork .../react-dom/cjs/react-dom.development.js:21626:16
 ❯ beginWork$1 .../react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork .../react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync .../react-dom/cjs/react-dom.development.js:26505:5

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx > PaymentCard > when there is an error in the form > renders the error

Stack Traces | 0.0592s run time

TypeError: Cannot read properties of undefined (reading 'match')
 ❯ Proxy.useParams .../react-router/modules/hooks.js:40:17
 ❯ Module.useNavLinks .../navigation/useNavLinks/useNavLinks.ts:53:7
 ❯ useLinkConfig .../shared/AppLink/AppLink.tsx:10:9
 ❯ .../shared/AppLink/AppLink.tsx:113:3
 ❯ renderWithHooks .../react-dom/cjs/react-dom.development.js:15486:18
 ❯ updateForwardRef .../react-dom/cjs/react-dom.development.js:19245:20
 ❯ beginWork .../react-dom/cjs/react-dom.development.js:21675:16
 ❯ beginWork$1 .../react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork .../react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync .../react-dom/cjs/react-dom.development.js:26505:5

src/pages/PlanPage/PlanPage.test.jsx > PlanPage > testing routes > on invoices id path > renders invoices details page

Stack Traces | 1s run time

TestingLibraryElementError: Unable to find an element with the text: /InvoiceDetailsPage/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>
 ❯ waitForWrapper node_modules/@.../dom/dist/wait-for.js:163:27
 ❯ node_modules/@.../dom/dist/query-helpers.js:86:33
 ❯ .../pages/PlanPage/PlanPage.test.jsx:199:24

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

codecov · 2025-01-24T20:50:07Z

❌ 9 Tests Failed:

Tests completed	Failed	Passed	Skipped
3614	9	3605	2

View the top 3 failed tests by shortest run time

src/pages/PlanPage/PlanPage.test.jsx > PlanPage > testing routes > on root route > renders current org plan page

Stack Traces | 1s run time

TestingLibraryElementError: Unable to find an element with the text: /CurrentOrgPlan/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>
 ❯ waitForWrapper node_modules/@.../dom/dist/wait-for.js:163:27
 ❯ node_modules/@.../dom/dist/query-helpers.js:86:33
 ❯ .../pages/PlanPage/PlanPage.test.jsx:169:46

src/pages/PlanPage/PlanPage.test.jsx > PlanPage > testing routes > on cancel path > renders cancel plan page

Stack Traces | 1s run time

TestingLibraryElementError: Unable to find an element with the text: /CancelPlanPage/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>
 ❯ waitForWrapper node_modules/@.../dom/dist/wait-for.js:163:27
 ❯ node_modules/@.../dom/dist/query-helpers.js:86:33
 ❯ .../pages/PlanPage/PlanPage.test.jsx:208:45

src/pages/PlanPage/PlanPage.test.jsx > PlanPage > when the owner is part of org > renders tabs component

Stack Traces | 1.01s run time

TestingLibraryElementError: Unable to find an element with the text: /Tabs/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div />
</body>
 ❯ waitForWrapper node_modules/@.../dom/dist/wait-for.js:163:27
 ❯ node_modules/@.../dom/dist/query-helpers.js:86:33
 ❯ .../pages/PlanPage/PlanPage.test.jsx:149:33

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

ajay-sentry · 2025-01-25T00:05:23Z

src/pages/PlanPage/PlanPage.tsx

+const UnverifiedPaymentMethodAlert = ({ url }: { url?: string }) => {
+  return (
+    <>
+      <Alert variant={'warning'}>


nit: don't need to wrap that in {}

ajay-sentry · 2025-01-25T00:05:40Z

src/pages/PlanPage/PlanPage.tsx

+          Your new payment method requires verification.{' '}
+          <A
+            href={url}
+            isExternal={true}


nit: can just put isExternal

feat: Add ACH payment flows

7f4797b

suejung-sentry added 3 commits January 23, 2025 15:02

wip

9c51adb

handle upgrade flow

6c42961

Merge remote-tracking branch 'origin/main' into sshin/stripe-3

b9ff2e2

suejung-sentry force-pushed the sshin/stripe-3 branch from a4cf665 to 6d8ff0c Compare January 24, 2025 22:01

cleanup

fb74dde

suejung-sentry force-pushed the sshin/stripe-3 branch from 6d8ff0c to fb74dde Compare January 24, 2025 22:05

suejung-sentry mentioned this pull request Jan 24, 2025

[Testing] Confirm the "manual bank account" flow codecov/engineering-team#3227

Closed

ajay-sentry reviewed Jan 25, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main' into sshin/stripe-3

23f48e8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add ACH payment flows #3673

feat: Add ACH payment flows #3673

suejung-sentry commented Jan 21, 2025 •

edited

Loading

codecov bot commented Jan 21, 2025 •

edited

Loading

codecov-notifications bot commented Jan 21, 2025 •

edited by codecov-staging bot

Loading

codecov-public-qa bot commented Jan 21, 2025 •

edited

Loading

codecov-releaser commented Jan 21, 2025

codecov-qa bot commented Jan 24, 2025 •

edited

Loading

codecov bot commented Jan 24, 2025 •

edited

Loading

ajay-sentry Jan 25, 2025

ajay-sentry Jan 25, 2025

feat: Add ACH payment flows #3673

Are you sure you want to change the base?

feat: Add ACH payment flows #3673

Conversation

suejung-sentry commented Jan 21, 2025 • edited Loading

codecov bot commented Jan 21, 2025 • edited Loading

Bundle Report

codecov-notifications bot commented Jan 21, 2025 • edited by codecov-staging bot Loading

❌ 13 Tests Failed:

codecov-public-qa bot commented Jan 21, 2025 • edited Loading

❌ 13 Tests Failed:

codecov-releaser commented Jan 21, 2025

✅ Deploy preview for gazebo ready!

codecov-qa bot commented Jan 24, 2025 • edited Loading

❌ 13 Tests Failed:

codecov bot commented Jan 24, 2025 • edited Loading

❌ 9 Tests Failed:

ajay-sentry Jan 25, 2025

Choose a reason for hiding this comment

ajay-sentry Jan 25, 2025

Choose a reason for hiding this comment

suejung-sentry commented Jan 21, 2025 •

edited

Loading

codecov bot commented Jan 21, 2025 •

edited

Loading

codecov-notifications bot commented Jan 21, 2025 •

edited by codecov-staging bot

Loading

codecov-public-qa bot commented Jan 21, 2025 •

edited

Loading

codecov-qa bot commented Jan 24, 2025 •

edited

Loading

codecov bot commented Jan 24, 2025 •

edited

Loading