use the graphql endpoint, fix some tests

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

@@ -9,6 +9,9 @@ import EditPaymentMethods from './EditPaymentMethods'
 import EmailAddress from './EmailAddress'
 import { ViewPaymentMethod } from './ViewPaymentMethod'
 
+// Remove this when we build Secondary Payment Method feature
+export const SECONDARY_PAYMENT_FEATURE_ENABLED = false
+
 interface URLParams {
   provider: string
   owner: string
@@ -22,7 +25,8 @@ function BillingDetails() {
   })
   const subscriptionDetail = accountDetails?.subscriptionDetail
   const [isEditMode, setEditMode] = useState(false)
-  const secondaryPaymentFeatureEnabled = false
+
+  const secondaryPaymentFeatureEnabled = SECONDARY_PAYMENT_FEATURE_ENABLED
 
   if (!subscriptionDetail) {
     return null
@@ -75,7 +79,6 @@ function BillingDetails() {
           <ViewPaymentMethod
             heading="Primary Payment Method"
             isPrimaryPaymentMethod={true}
-            isEditMode={isEditMode}
             setEditMode={setEditMode}
             subscriptionDetail={subscriptionDetail}
             provider={provider}
@@ -85,7 +88,6 @@ function BillingDetails() {
             <ViewPaymentMethod
               heading="Secondary Payment Method"
               isPrimaryPaymentMethod={false}
-              isEditMode={isEditMode}
               setEditMode={setEditMode}
               subscriptionDetail={subscriptionDetail}
               provider={provider}

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

@@ -8,7 +8,7 @@ import Button from 'ui/Button'
 
 interface AddressFormProps {
   address?: z.infer<typeof AddressSchema>
-  name?: string
+  name?: string | null | undefined
   closeForm: () => void
   provider: string
   owner: string

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethods/EditPaymentMethods.tsx

@@ -6,6 +6,8 @@ import { SubscriptionDetailSchema } from 'services/account/useAccountDetails'
 import AddressForm from './Address/AddressForm'
 import PaymentMethodForm from './PaymentMethod/PaymentMethodForm'
 
+import { SECONDARY_PAYMENT_FEATURE_ENABLED } from '../BillingDetails'
+
 interface EditPaymentMethodProps {
   setEditMode: (isEditMode: boolean) => void
   provider: string
@@ -20,7 +22,8 @@ const EditPaymentMethod = ({
   existingSubscriptionDetail,
 }: EditPaymentMethodProps) => {
   const [activeTab, setActiveTab] = useState<'primary' | 'secondary'>('primary')
-  const isSecondaryPaymentMethodFeatureEnabled = false
+
+  const secondaryPaymentMethodFeatureEnabled = SECONDARY_PAYMENT_FEATURE_ENABLED
 
   return (
     <div className="flex flex-col gap-4 p-4">
@@ -30,7 +33,7 @@ const EditPaymentMethod = ({
         <div className="ml-2 flex border-b border-ds-gray-tertiary">
           {[
             'primary',
-            ...(isSecondaryPaymentMethodFeatureEnabled ? ['secondary'] : []),
+            ...(secondaryPaymentMethodFeatureEnabled ? ['secondary'] : []),
           ].map((tab) => (
             <button
               key={tab}
@@ -71,22 +74,21 @@ const EditPaymentMethod = ({
               />
             </div>
           )}
-          {activeTab === 'secondary' &&
-            isSecondaryPaymentMethodFeatureEnabled && (
-              <div>
-                <PaymentMethodForm
-                  closeForm={() => setEditMode(false)}
-                  provider={provider}
-                  owner={owner}
-                  existingSubscriptionDetail={existingSubscriptionDetail}
-                />
-                <AddressForm
-                  closeForm={() => setEditMode(false)}
-                  provider={provider}
-                  owner={owner}
-                />
-              </div>
-            )}
+          {activeTab === 'secondary' && (
+            <div>
+              <PaymentMethodForm
+                closeForm={() => setEditMode(false)}
+                provider={provider}
+                owner={owner}
+                existingSubscriptionDetail={existingSubscriptionDetail}
+              />
+              <AddressForm
+                closeForm={() => setEditMode(false)}
+                provider={provider}
+                owner={owner}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethods/PaymentMethod/PaymentMethodForm.tsx

@@ -4,7 +4,7 @@
 import { z } from 'zod'
 
 import { SubscriptionDetailSchema } from 'services/account'
-import { useStripeSetupIntent } from 'services/account/useStripeSetupIntent'
+import { useCreateStripeSetupIntent } from 'services/account/useCreateStripeSetupIntent'
 import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
 import Button from 'ui/Button'
 
@@ -22,10 +22,11 @@
   existingSubscriptionDetail,
 }: PaymentMethodFormProps) => {
   const [errorState, _] = useState('')
-  const { data: setupIntent } = useStripeSetupIntent({ owner, provider })
+  const { data: setupIntent } = useCreateStripeSetupIntent({ owner, provider })
   const elements = useElements()
 
   elements?.update({
+    // @ts-expect-error clientSecret works actually
     clientSecret: setupIntent?.clientSecret,
   })
 
@@ -37,7 +38,7 @@
   } = useUpdatePaymentMethod({
     provider,
     owner,
     email:
       existingSubscriptionDetail?.defaultPaymentMethod?.billingDetails?.email,
   })
 
@@ -51,7 +52,9 @@
     const paymentElement = elements.getElement(PaymentElement)
 
     updatePaymentMethod(paymentElement, {
-      onSuccess: closeForm,
+      onSuccess: async () => {
+        closeForm()
+      },
     })
   }
 

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

@@ -85,13 +85,18 @@
     // BillingDetails.tsx if there is no subscriptionDetail
     it('renders the set card message', () => {
       render(
-        <AddressCard subscriptionDetail={null} provider="gh" owner="codecov" />,
+        <AddressCard
+          subscriptionDetail={null}
+          provider="gh"
+          owner="codecov"
+          setEditMode={() => {}}
+        />,
         { wrapper }
       )
 
       expect(
         screen.getByText(
-          /No address has been set. Please contact support if you think it’s an error or set it yourself./
+          /No address has been set. Please contact support if you think it's an error or set it yourself./
         )
       ).toBeInTheDocument()
     })
@@ -108,13 +113,14 @@
           }}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )
 
       expect(
         screen.getByText(
-          /No address has been set. Please contact support if you think it’s an error or set it yourself./
+          /No address has been set. Please contact support if you think it's an error or set it yourself./
         )
       ).toBeInTheDocument()
     })
@@ -131,6 +137,7 @@
             }}
             provider="gh"
             owner="codecov"
+            setEditMode={() => {}}
           />,
           { wrapper }
         )
@@ -157,6 +164,7 @@
             }}
             provider="gh"
             owner="codecov"
+            setEditMode={() => {}}
           />,
           { wrapper }
         )
@@ -168,7 +176,7 @@
         await user.click(screen.getByTestId('open-modal'))
 
         expect(
           screen.getByRole('button', { name: /update/i })
         ).toBeInTheDocument()
       })
     })
@@ -181,6 +189,7 @@
           subscriptionDetail={subscriptionDetail}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )
@@ -220,11 +229,12 @@
           }}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )
 
       expect(screen.getByText('Cardholder name')).toBeInTheDocument()
       expect(screen.getByText('N/A')).toBeInTheDocument()
       expect(screen.getByText('Billing address')).toBeInTheDocument()
       expect(screen.queryByText(/null/)).not.toBeInTheDocument()
@@ -237,11 +247,12 @@
           subscriptionDetail={subscriptionDetail}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )
 
       expect(screen.getByText(/Cardholder name/)).toBeInTheDocument()
       expect(screen.getByText(/Bob Smith/)).toBeInTheDocument()
     })
   })
@@ -260,10 +271,11 @@
           subscriptionDetail={subscriptionDetail}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )
       await user.click(screen.getByTestId('edit-address'))
 
       expect(screen.queryByText(/Cardholder name/)).not.toBeInTheDocument()
       expect(screen.queryByText(/Bob Smith/)).not.toBeInTheDocument()
@@ -286,10 +298,11 @@
           subscriptionDetail={subscriptionDetail}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )
       await user.click(screen.getByTestId('edit-address'))
 
       expect(
         screen.getByRole('button', { name: /update/i })
@@ -309,10 +322,11 @@
             subscriptionDetail={subscriptionDetail}
             provider="gh"
             owner="codecov"
+            setEditMode={() => {}}
           />,
           { wrapper }
         )
         await user.click(screen.getByTestId('edit-address'))
         await user.click(screen.queryByRole('button', { name: /update/i })!)
 
         expect(updateAddress).toHaveBeenCalled()
@@ -331,6 +345,7 @@
             subscriptionDetail={subscriptionDetail}
             provider="gh"
             owner="codecov"
+            setEditMode={() => {}}
           />,
           { wrapper }
         )
@@ -358,6 +373,7 @@
           subscriptionDetail={subscriptionDetail}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )
@@ -380,6 +396,7 @@
           subscriptionDetail={subscriptionDetail}
           provider="gh"
           owner="codecov"
+          setEditMode={() => {}}
         />,
         { wrapper }
       )

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

@@ -7,8 +7,9 @@ import {
 import { cn } from 'shared/utils/cn'
 import Button from 'ui/Button'
 
+import { SECONDARY_PAYMENT_FEATURE_ENABLED } from '../../BillingDetails'
+
 interface AddressCardProps {
-  isEditMode: boolean
   setEditMode: (isEditMode: boolean) => void
   subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
   provider: string
@@ -24,7 +25,10 @@ function AddressCard({
   const billingDetails =
     subscriptionDetail?.defaultPaymentMethod?.billingDetails
 
-  const isAddressSameAsPrimary = false // TODO
+  // TODO: Implement this when we have secondary payment method feature
+  const isAddressSameAsPrimary = SECONDARY_PAYMENT_FEATURE_ENABLED
+    ? true
+    : undefined
 
   return (
     <div className={cn('flex gap-2', className)}>
@@ -40,7 +44,7 @@ function AddressCard({
 interface BillingInnerProps {
   billingDetails?: z.infer<typeof BillingDetailsSchema>
   setEditMode: (val: boolean) => void
-  isAddressSameAsPrimary: boolean
+  isAddressSameAsPrimary?: boolean
 }
 
 function BillingInner({

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/ViewPaymentMethod/ViewPaymentMethod.tsx

@@ -10,21 +10,19 @@ import PaymentMethod from './PaymentMethod/PaymentMethod'
 function ViewPaymentMethod({
   heading,
   isPrimaryPaymentMethod,
-  isEditMode,
   setEditMode,
   subscriptionDetail,
   provider,
   owner,
 }: {
   heading: string
   isPrimaryPaymentMethod?: boolean
-  isEditMode: boolean
   setEditMode: (isEditMode: boolean) => void
   subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
   provider: string
   owner: string
 }) {
-  const isCreditCard = subscriptionDetail?.defaultPaymentMethod?.card // TODO
+  const isCreditCard = subscriptionDetail?.defaultPaymentMethod?.card
 
   return (
     <div>
@@ -47,7 +45,6 @@ function ViewPaymentMethod({
               {/* Payment method summary */}
               <PaymentMethod
                 className="w-2/5 flex-1"
-                isEditMode={isEditMode}
                 setEditMode={setEditMode}
                 subscriptionDetail={subscriptionDetail}
                 provider={provider}
@@ -68,7 +65,6 @@ function ViewPaymentMethod({
               {/* Address */}
               <AddressCard
                 className="flex-1"
-                isEditMode={isEditMode}
                 setEditMode={setEditMode}
                 subscriptionDetail={subscriptionDetail}
                 provider={provider}

src/services/account/useAccountDetails.ts

@@ -77,11 +77,8 @@ export const PaymentMethodSchema = z
       .nullish(),
     usBankAccount: z
       .object({
-        accountHolderType: z.string(),
-        accountType: z.string(),
         bankName: z.string(),
         last4: z.string(),
-        routingNumber: z.string(),
       })
       .nullish(),
     billingDetails: BillingDetailsSchema.nullable(),