fix(address-form): Update error message for address form (#3909)

Author: suejung-sentry

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx

@@ -380,12 +380,12 @@ describe('AddressCard', () => {
   })
 
   describe('when there is an error in the form', () => {
-    it('renders the error', async () => {
+    it('renders the error when the error is an instance of Error', async () => {
       const { user } = setup()
       const randomError = 'not a valid address'
       mocks.useUpdateBillingAddress.mockReturnValue({
         mutate: vi.fn(),
-        error: randomError,
+        error: new Error(randomError),
       })
       render(
         <AddressCard
@@ -398,7 +398,36 @@ describe('AddressCard', () => {
 
       await user.click(screen.getByTestId('edit-address'))
 
-      expect(screen.getByText(randomError)).toBeInTheDocument()
+      expect(
+        screen.getByText((content, _element) => content.includes(randomError))
+      ).toBeInTheDocument()
+    })
+
+    it('renders the error when the error is an instance of BillingApiError', async () => {
+      const { user } = setup()
+      const stripeError = 'Your card has expired'
+      mocks.useUpdateBillingAddress.mockReturnValue({
+        mutate: vi.fn(),
+        error: {
+          data: {
+            detail: stripeError,
+          },
+        },
+      })
+      render(
+        <AddressCard
+          subscriptionDetail={subscriptionDetail}
+          provider="gh"
+          owner="codecov"
+        />,
+        { wrapper }
+      )
+
+      await user.click(screen.getByTestId('edit-address'))
+
+      expect(
+        screen.getByText((content, _element) => content.includes(stripeError))
+      ).toBeInTheDocument()
     })
   })
 

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressForm.tsx

@@ -3,7 +3,10 @@ import cs from 'classnames'
 import { z } from 'zod'
 
 import { AddressSchema } from 'services/account/useAccountDetails'
-import { useUpdateBillingAddress } from 'services/account/useUpdateBillingAddress'
+import {
+  BillingApiError,
+  useUpdateBillingAddress,
+} from 'services/account/useUpdateBillingAddress'
 import { Theme, useThemeContext } from 'shared/ThemeContext'
 import Button from 'ui/Button'
 
@@ -50,7 +53,6 @@ function AddressForm({
     mutate: updateAddress,
     isLoading,
     error,
-    reset,
   } = useUpdateBillingAddress({
     provider,
     owner,
@@ -70,8 +72,6 @@ function AddressForm({
     }
   }
 
-  const showError = error && !reset
-
   return (
     <form onSubmit={submit} aria-label="form">
       <div className={cs('flex flex-col gap-3')}>
@@ -95,7 +95,9 @@ function AddressForm({
               },
             }}
           />
-          <p className="mt-1 text-ds-primary-red">{showError && error}</p>
+          <p className="mt-1 text-ds-primary-red">
+            {error && getErrorMessage(error)}
+          </p>
         </div>
         <div className="flex gap-1">
           <Button
@@ -123,4 +125,23 @@ function AddressForm({
   )
 }
 
+export const getErrorMessage = (
+  error: Error | BillingApiError
+): string | undefined => {
+  if (!error) return undefined
+
+  if (error instanceof Error) {
+    if (error.message) {
+      return `Could not save billing address: ${error.message}`
+    }
+    return 'Could not save billing address. Please contact support at [email protected] for assistance.'
+  }
+
+  if (error.data?.detail) {
+    return `Could not save billing address: ${error.data.detail}`
+  }
+
+  return 'Could not save billing address due to an unknown error. Please contact support at [email protected] for assistance.'
+}
+
 export default AddressForm

src/services/account/useUpdateBillingAddress.ts

@@ -9,7 +9,7 @@ interface useUpdateBillingAddressParams {
 
 interface useUpdateBillingAddressReturn {
   reset: () => void
-  error: null | Error
+  error: null | Error | BillingApiError
   isLoading: boolean
   mutate: (variables: any, data: any) => void
   data: undefined | unknown
@@ -29,6 +29,12 @@ interface AddressInfo {
   address: Address
 }
 
+export interface BillingApiError {
+  data: {
+    detail: string
+  }
+}
+
 export function useUpdateBillingAddress({
   provider,
   owner,