feat: Add ACH payment method #3616

suejung-sentry · 2024-12-31T02:58:44Z

This PR adds a secondary payment method flow for ACH.

Updates the View state to show Primary and Secondary payment methods, and in columns instead of rows
Updates the Edit state to a new form with tabs and sections for the 2 payment methods
Cuts over from the existing Stripe CardElement to their PaymentElement. Note that the PaymentElement requires a clientSecret from api which establishes a Stripe setupIntent

Remaining TODO

fix dark mode
implement in api the setup intent flow
"Address same as the primary payment method" checkbox
Fix/ write tests
Handle to allow only admins to take certain actions

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

Closes codecov/engineering-team#3108

sentry-io · 2024-12-31T02:58:58Z

🔍 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 👎}

codecov-staging · 2024-12-31T03:01:49Z

❌ 16 Tests Failed:

Tests completed	Failed	Passed	Skipped
4102	16	4086	0

View the top 3 failed tests by shortest run time

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

Stack Traces | 0.00244s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:365:31

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user clicks on Edit > doesn't render the card anymore

Stack Traces | 0.00293s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:266:31

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user has an address > renders the card holder information

Stack Traces | 0.00295s run time

TestingLibraryElementError: Unable to find an element with the text: /Cardholder name/. 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>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:244:21

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

codecov-qa · 2024-12-31T03:01:51Z

❌ 16 Tests Failed:

Tests completed	Failed	Passed	Skipped
3461	16	3445	2

View the top 3 failed tests by shortest run time

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

Stack Traces | 0.0023s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:365:31

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user has an address > renders the card holder information

Stack Traces | 0.00309s run time

TestingLibraryElementError: Unable to find an element with the text: /Cardholder name/. 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>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:244:21

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user clicks on Edit > doesn't render the card anymore

Stack Traces | 0.0031s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:266:31

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

codecov · 2024-12-31T03:01:55Z

❌ 16 Tests Failed:

Tests completed	Failed	Passed	Skipped
3463	16	3447	0

View the top 3 failed tests by shortest run time

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

Stack Traces | 0.0023s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:365:31

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user has an address > renders the card holder information

Stack Traces | 0.00309s run time

TestingLibraryElementError: Unable to find an element with the text: /Cardholder name/. 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>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:244:21

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user clicks on Edit > doesn't render the card anymore

Stack Traces | 0.0031s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:266:31

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

codecov-public-qa · 2024-12-31T03:02:00Z

❌ 16 Tests Failed:

Tests completed	Failed	Passed	Skipped
3463	16	3447	0

View the top 3 failed tests by shortest run time

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

Stack Traces | 0.0023s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:365:31

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user has an address > renders the card holder information

Stack Traces | 0.00309s run time

TestingLibraryElementError: Unable to find an element with the text: /Cardholder name/. 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>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:244:21

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx > AddressCard > when the user clicks on Edit > doesn't render the card anymore

Stack Traces | 0.0031s run time

TestingLibraryElementError: Unable to find an element by: [data-testid="edit-address"]

Ignored nodes: comments, script, style
<body
  class="light"
>
  <div>
    <div
      class="flex gap-2"
    >
      <div>
        <h4
          class="mb-2 font-semibold"
        >
          Billing address
        </h4>
        <p>
          123 Sesame St. Apt A
        </p>
        <p>
          San Francisco, 
          CA 12345
        </p>
      </div>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@.../dom/dist/config.js:37:19
 ❯ node_modules/@.../dom/dist/query-helpers.js:76:38
 ❯ node_modules/@.../dom/dist/query-helpers.js:52:17
 ❯ node_modules/@.../dom/dist/query-helpers.js:95:19
 ❯ .../BillingDetails/Address/AddressCard.test.tsx:266:31

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

aj-codecov · 2025-01-02T18:22:24Z

@codecov-ai-reviewer review

feat: Add ACH payment method

34bfe3e

suejung-sentry added 2 commits December 31, 2024 18:11

wip

1a8560e

Merge remote-tracking branch 'origin/main' into sshin/3108

f428955

suejung-sentry force-pushed the sshin/3108 branch from 6142180 to 0340859 Compare January 2, 2025 04:57

add stripe payment element

0f6d1c3

suejung-sentry force-pushed the sshin/3108 branch from 0340859 to 0f6d1c3 Compare January 2, 2025 05:01

cleanup

0c413de

suejung-sentry added 2 commits January 6, 2025 12:35

Merge remote-tracking branch 'origin/main' into sshin/3108

747f183

wip

2ccab2c

suejung-sentry force-pushed the sshin/3108 branch from 8981eb7 to 2ccab2c Compare January 7, 2025 23:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add ACH payment method #3616

feat: Add ACH payment method #3616

suejung-sentry commented Dec 31, 2024 •

edited

Loading

sentry-io bot commented Dec 31, 2024

codecov-staging bot commented Dec 31, 2024 •

edited

Loading

codecov-qa bot commented Dec 31, 2024 •

edited

Loading

codecov bot commented Dec 31, 2024 •

edited

Loading

codecov-public-qa bot commented Dec 31, 2024 •

edited

Loading

aj-codecov commented Jan 2, 2025

feat: Add ACH payment method #3616

Are you sure you want to change the base?

feat: Add ACH payment method #3616

Conversation

suejung-sentry commented Dec 31, 2024 • edited Loading

sentry-io bot commented Dec 31, 2024

🔍 Existing Issues For Review

codecov-staging bot commented Dec 31, 2024 • edited Loading

❌ 16 Tests Failed:

codecov-qa bot commented Dec 31, 2024 • edited Loading

❌ 16 Tests Failed:

codecov bot commented Dec 31, 2024 • edited Loading

❌ 16 Tests Failed:

codecov-public-qa bot commented Dec 31, 2024 • edited Loading

❌ 16 Tests Failed:

aj-codecov commented Jan 2, 2025

suejung-sentry commented Dec 31, 2024 •

edited

Loading

codecov-staging bot commented Dec 31, 2024 •

edited

Loading

codecov-qa bot commented Dec 31, 2024 •

edited

Loading

codecov bot commented Dec 31, 2024 •

edited

Loading

codecov-public-qa bot commented Dec 31, 2024 •

edited

Loading