From 2902a3daebc2ed776884d4b33692727b9340d323 Mon Sep 17 00:00:00 2001
From: Suejung Shin <suejung.shin@sentry.io>
Date: Wed, 29 Jan 2025 18:51:12 -0800
Subject: [PATCH] cleanup

---
 .../PaymentCard/PaymentMethodForm.test.tsx    | 20 ++++++++---
 .../PaymentCard/PaymentMethodForm.tsx         | 33 +++++++++++++++++--
 .../CurrentOrgPlan/CurrentOrgPlan.test.tsx    |  2 +-
 .../CurrentOrgPlan/CurrentOrgPlan.tsx         |  3 +-
 .../account/useUpdatePaymentMethod.ts         |  5 +++
 5 files changed, 55 insertions(+), 8 deletions(-)

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 8d824d2282..0be02e77d5 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx
@@ -93,9 +93,15 @@ const mocks = {
   useUpdatePaymentMethod: vi.fn(),
 }
 
-vi.mock('services/account/useUpdatePaymentMethod', () => ({
-  useUpdatePaymentMethod: () => mocks.useUpdatePaymentMethod(),
-}))
+vi.mock('services/account/useUpdatePaymentMethod', async () => {
+  const original = await vi.importActual(
+    'services/account/useUpdatePaymentMethod'
+  )
+  return {
+    ...original,
+    useUpdatePaymentMethod: () => mocks.useUpdatePaymentMethod(),
+  }
+})
 
 afterEach(() => {
   vi.clearAllMocks()
@@ -214,7 +220,13 @@ describe('PaymentMethodForm', () => {
 
       await user.click(screen.getByTestId('save-payment-method'))
 
-      expect(screen.getByText(randomError)).toBeInTheDocument()
+      expect(
+        screen.getByText((content) =>
+          content.includes(
+            "There's been an error. Please try refreshing your browser"
+          )
+        )
+      ).toBeInTheDocument()
     })
   })
 
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
index 5804b9ad77..c69af50d96 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
@@ -4,8 +4,14 @@ import cs from 'classnames'
 import { z } from 'zod'
 
 import { AccountDetailsSchema, BillingDetailsSchema } from 'services/account'
-import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
+import {
+  MissingAddressError,
+  MissingEmailError,
+  MissingNameError,
+  useUpdatePaymentMethod,
+} from 'services/account/useUpdatePaymentMethod'
 import { Provider } from 'shared/api/helpers'
+import A from 'ui/A'
 import Button from 'ui/Button'
 
 interface PaymentMethodFormProps {
@@ -81,7 +87,7 @@ const PaymentMethodForm = ({
             }}
           />
           <p className="mt-1 text-ds-primary-red">
-            {showError && error?.message}
+            {showError ? getErrorMessage(error) : null}
           </p>
           <div className="mb-8 mt-4 flex gap-1">
             <Button
@@ -150,4 +156,27 @@ export const getName = (
   )
 }
 
+export const getErrorMessage = (error: Error): JSX.Element => {
+  switch (error.message) {
+    case MissingNameError:
+      return <span>Missing name, please edit Full Name</span>
+    case MissingEmailError:
+      return <span>Missing email, please edit Email</span>
+    case MissingAddressError:
+      return <span>Missing address, please edit Address</span>
+    default:
+      return (
+        <span>
+          There&apos;s been an error. Please try refreshing your browser, if
+          this error persists please{' '}
+          {/* @ts-expect-error ignore until we can convert A component to ts */}
+          <A to={{ pageName: 'support' }} variant="link">
+            contact support
+          </A>
+          .
+        </span>
+      )
+  }
+}
+
 export default PaymentMethodForm
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.test.tsx
index 5dd41c5c1a..52bf51f4ca 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.test.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.test.tsx
@@ -373,7 +373,7 @@ describe('CurrentOrgPlan', () => {
       )
       expect(paymentFailed).toBeInTheDocument()
       const contactSupport = await screen.findByText(
-        'Please try a different card or contact support at support@codecov.io.'
+        'Please try a different payment method or contact support at support@codecov.io.'
       )
       expect(contactSupport).toBeInTheDocument()
     })
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.tsx
index 34cb4fa93e..880996cacc 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentOrgPlan.tsx
@@ -147,7 +147,8 @@ const DelinquentAlert = () => {
       <Alert variant={'error'}>
         <Alert.Title>Your most recent payment failed</Alert.Title>
         <Alert.Description>
-          Please try a different card or contact support at support@codecov.io.
+          Please try a different payment method or contact support at
+          support@codecov.io.
         </Alert.Description>
       </Alert>
       <br />
diff --git a/src/services/account/useUpdatePaymentMethod.ts b/src/services/account/useUpdatePaymentMethod.ts
index 40c88afced..77e739c157 100644
--- a/src/services/account/useUpdatePaymentMethod.ts
+++ b/src/services/account/useUpdatePaymentMethod.ts
@@ -94,3 +94,8 @@ export function useUpdatePaymentMethod({
     },
   })
 }
+
+// Errors from Stripe api confirmSetup() - unfortunately seems to just be by text, no error codes
+export const MissingNameError = `You specified "never" for fields.billing_details.name when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.name when calling stripe.confirmSetup(). If you opt out of collecting data via the payment Element using the fields option, the data must be passed in when calling stripe.confirmSetup().`
+export const MissingEmailError = `You specified "never" for fields.billing_details.email when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.email when calling stripe.confirmSetup(). If you opt out of collecting data via the payment Element using the fields option, the data must be passed in when calling stripe.confirmSetup().`
+export const MissingAddressError = `You specified "never" for fields.billing_details.address when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.address when calling stripe.confirmSetup(). If you opt out of collecting data via the payment Element using the fields option, the data must be passed in when calling stripe.confirmSetup().`