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

❌ 21 Tests Failed:

Tests completed	Failed	Passed	Skipped
4165	21	4144	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.00335s 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 form is loading > has the error and save button disabled

Stack Traces | 0.00364s 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:386:31

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

Stack Traces | 0.00383s 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:338:33

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

❌ 21 Tests Failed:

Tests completed	Failed	Passed	Skipped
4163	21	4142	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.00335s 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 form is loading > has the error and save button disabled

Stack Traces | 0.00364s 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:386:31

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

Stack Traces | 0.00383s 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:338:33

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

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

❌ 21 Tests Failed:

Tests completed	Failed	Passed	Skipped
4806	21	4785	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.00335s 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 form is loading > has the error and save button disabled

Stack Traces | 0.00364s 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:386:31

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

Stack Traces | 0.00383s 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:338:33

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

❌ 21 Tests Failed:

Tests completed	Failed	Passed	Skipped
4165	21	4144	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.00335s 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 form is loading > has the error and save button disabled

Stack Traces | 0.00364s 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:386:31

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

Stack Traces | 0.00383s 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:338:33

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

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

747f183

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

wip

5e48a4e

suejung-sentry force-pushed the sshin/3108 branch from 2ccab2c to 5e48a4e Compare January 9, 2025 18:24

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

❌ 21 Tests Failed:

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

❌ 21 Tests Failed:

codecov bot commented Dec 31, 2024 • edited Loading

❌ 21 Tests Failed:

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

❌ 21 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