diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx index d6ccb2f6d3..6173a5af87 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx @@ -35,6 +35,7 @@ vi.mock('services/account/useCreateStripeSetupIntent', async () => { }) afterEach(() => { + queryClient.clear() vi.clearAllMocks() }) @@ -54,6 +55,20 @@ const subscriptionDetail = { cancelAtPeriodEnd: false, } +const usBankSubscriptionDetail = { + defaultPaymentMethod: { + usBankAccount: { + bankName: 'STRIPE TEST BANK', + last4: '6789', + }, + }, + plan: { + value: Plans.USERS_PR_INAPPY, + }, + currentPeriodEnd: 1606851492, + cancelAtPeriodEnd: false, +} + const wrapper = ({ children }) => ( {children} @@ -200,6 +215,22 @@ describe('PaymentCard', () => { }) }) + describe('when the user has a US bank account', () => { + it('renders the bank account details', () => { + render( + , + { wrapper } + ) + + expect(screen.getByText(/STRIPE TEST BANK/)).toBeInTheDocument() + expect(screen.getByText(/•••• 6789/)).toBeInTheDocument() + }) + }) + describe('when the subscription is set to expire', () => { it(`doesn't render the next billing`, () => { render( diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx index 62c30b5901..20331e0f06 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx @@ -97,7 +97,7 @@ describe('PaymentMethodForm', () => { />, { wrapper } ) - await user.click(screen.getByTestId('update-payment-method')) + await user.click(screen.getByTestId('save-payment-method')) expect(screen.queryByText(/Visa/)).not.toBeInTheDocument() }) @@ -118,7 +118,7 @@ describe('PaymentMethodForm', () => { />, { wrapper } ) - await user.click(screen.getByTestId('update-payment-method')) + await user.click(screen.getByTestId('save-payment-method')) expect(screen.getByRole('button', { name: /Save/i })).toBeInTheDocument() }) @@ -140,7 +140,7 @@ describe('PaymentMethodForm', () => { />, { wrapper } ) - await user.click(screen.getByTestId('update-payment-method')) + await user.click(screen.getByTestId('save-payment-method')) expect(updatePaymentMethod).toHaveBeenCalled() }) }) @@ -163,7 +163,7 @@ describe('PaymentMethodForm', () => { { wrapper } ) - await user.click(screen.getByTestId('update-payment-method')) + await user.click(screen.getByTestId('save-payment-method')) await user.click(screen.getByRole('button', { name: /Cancel/ })) expect(closeForm).toHaveBeenCalled() @@ -189,7 +189,7 @@ describe('PaymentMethodForm', () => { { wrapper } ) - await user.click(screen.getByTestId('update-payment-method')) + await user.click(screen.getByTestId('save-payment-method')) expect(screen.getByText(randomError)).toBeInTheDocument() }) diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx index a9c36ad727..d222e1c337 100644 --- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx +++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx @@ -1,7 +1,6 @@ import { PaymentElement, useElements } from '@stripe/react-stripe-js' import { StripePaymentElement } from '@stripe/stripe-js' import cs from 'classnames' -import { useState } from 'react' import { z } from 'zod' import { stripeAddress, SubscriptionDetailSchema } from 'services/account' @@ -22,7 +21,6 @@ const PaymentMethodForm = ({ owner, subscriptionDetail, }: PaymentMethodFormProps) => { - const [errorState, setErrorState] = useState('') const elements = useElements() const { @@ -64,14 +62,13 @@ const PaymentMethodForm = ({ }) } - const showError = (error && !reset) || errorState + const showError = error && !reset return (
setErrorState(e?.value?.type || '')} options={{ layout: 'tabs', fields: { @@ -83,7 +80,7 @@ const PaymentMethodForm = ({ }} />

- {showError && (error?.message || errorState)} + {showError && error?.message}