From 521e54434e875333b54209d524a8a5bc24fbce51 Mon Sep 17 00:00:00 2001
From: ajay-sentry <159853603+ajay-sentry@users.noreply.github.com>
Date: Wed, 5 Feb 2025 08:33:27 -0800
Subject: [PATCH] chore: Remove unused credit card stuff (#3709)

---
 .../PaymentCard/CreditCardForm.tsx            | 100 -----------
 src/services/account/index.ts                 |   1 -
 src/services/account/useUpdateCard.test.tsx   | 157 ------------------
 src/services/account/useUpdateCard.ts         |  59 -------
 4 files changed, 317 deletions(-)
 delete mode 100644 src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CreditCardForm.tsx
 delete mode 100644 src/services/account/useUpdateCard.test.tsx
 delete mode 100644 src/services/account/useUpdateCard.ts

diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CreditCardForm.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CreditCardForm.tsx
deleted file mode 100644
index bfe18a3c7c..0000000000
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CreditCardForm.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { CardElement, useElements } from '@stripe/react-stripe-js'
-import cs from 'classnames'
-import { useState } from 'react'
-
-import { useUpdateCard } from 'services/account'
-import { Theme, useThemeContext } from 'shared/ThemeContext'
-import Button from 'ui/Button'
-
-interface CreditCardFormProps {
-  closeForm: () => void
-  provider: string
-  owner: string
-}
-
-function CreditCardForm({ closeForm, provider, owner }: CreditCardFormProps) {
-  const [errorState, setErrorState] = useState('')
-  const { theme } = useThemeContext()
-  const isDarkMode = theme === Theme.DARK
-
-  const elements = useElements()
-  const {
-    mutate: updateCard,
-    isLoading,
-    error,
-    reset,
-  } = useUpdateCard({
-    provider,
-    owner,
-  })
-
-  function submit(e: React.FormEvent) {
-    e.preventDefault()
-
-    if (!elements) {
-      return null
-    }
-
-    updateCard(elements.getElement(CardElement), {
-      onSuccess: closeForm,
-    })
-  }
-
-  const showError = (error && !reset) || errorState
-
-  return (
-    <form onSubmit={submit} aria-label="form">
-      <div className={cs('flex flex-col gap-3')}>
-        <div className="mt-2 flex flex-col gap-2">
-          <CardElement
-            onChange={(e) => setErrorState(e.error?.message || '')}
-            options={{
-              disableLink: true,
-              hidePostalCode: true,
-              classes: {
-                empty:
-                  'rounded border-ds-gray-tertiary border-2 bg-ds-container',
-                focus:
-                  'rounded !border-ds-blue-darker border-4 bg-ds-container',
-                base: 'px-4 py-3 bg-ds-container',
-                invalid:
-                  'rounded !border-ds-primary-red border-4 bg-ds-container',
-              },
-              style: {
-                base: {
-                  color: isDarkMode ? 'rgb(210,212,215)' : 'rgb(14,27,41)', // Same values as --color-app-text-primary.
-                },
-              },
-            }}
-          />
-          <p className="mt-1 text-ds-primary-red">
-            {showError && (error?.message || errorState)}
-          </p>
-        </div>
-        <div className="flex gap-1">
-          <Button
-            hook="update-payment"
-            type="submit"
-            variant="primary"
-            disabled={isLoading}
-            to={undefined}
-          >
-            Update
-          </Button>
-          <Button
-            type="button"
-            hook="cancel-payment"
-            variant="plain"
-            disabled={isLoading}
-            onClick={closeForm}
-            to={undefined}
-          >
-            Cancel
-          </Button>
-        </div>
-      </div>
-    </form>
-  )
-}
-
-export default CreditCardForm
diff --git a/src/services/account/index.ts b/src/services/account/index.ts
index 30e3552fb1..353707cbc8 100644
--- a/src/services/account/index.ts
+++ b/src/services/account/index.ts
@@ -12,6 +12,5 @@ export * from './usePlanData'
 export * from './useSentryToken'
 export * from './useUnverifiedPaymentMethods'
 export * from './useUpdateBillingEmail'
-export * from './useUpdateCard'
 export * from './useUpdatePaymentMethod'
 export * from './useUpgradePlan'
diff --git a/src/services/account/useUpdateCard.test.tsx b/src/services/account/useUpdateCard.test.tsx
deleted file mode 100644
index 74c27764b6..0000000000
--- a/src/services/account/useUpdateCard.test.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { renderHook, waitFor } from '@testing-library/react'
-import { http, HttpResponse } from 'msw'
-import { setupServer } from 'msw/node'
-import React from 'react'
-import { MemoryRouter, Route } from 'react-router-dom'
-import { type Mock } from 'vitest'
-
-import { Plans } from 'shared/utils/billing'
-
-import { useUpdateCard } from './useUpdateCard'
-
-const mocks = vi.hoisted(() => ({
-  useStripe: vi.fn(),
-}))
-
-vi.mock('@stripe/react-stripe-js', async () => {
-  const original = await vi.importActual('@stripe/react-stripe-js')
-  return {
-    ...original,
-    useStripe: mocks.useStripe,
-  }
-})
-
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
-const wrapper =
-  (initialEntries = '/gh'): React.FC<React.PropsWithChildren> =>
-  ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route path="/:provider">{children}</Route>
-      </MemoryRouter>
-    </QueryClientProvider>
-  )
-
-const provider = 'gh'
-const owner = 'codecov'
-
-const accountDetails = {
-  plan: {
-    marketingName: 'Pro Team',
-    baseUnitPrice: 12,
-    benefits: ['Configurable # of users', 'Unlimited repos'],
-    quantity: 5,
-    value: Plans.USERS_PR_INAPPM,
-  },
-  activatedUserCount: 2,
-  inactiveUserCount: 1,
-}
-
-const server = setupServer()
-
-beforeAll(() => {
-  server.listen()
-})
-
-afterEach(() => {
-  queryClient.clear()
-  server.resetHandlers()
-})
-
-afterAll(() => {
-  server.close()
-})
-
-describe('useUpdateCard', () => {
-  const card = {
-    last4: '1234',
-  }
-
-  function setupStripe({ createPaymentMethod }: { createPaymentMethod: Mock }) {
-    mocks.useStripe.mockReturnValue({
-      createPaymentMethod,
-    })
-  }
-
-  describe('when called', () => {
-    describe('when the mutation is successful', () => {
-      beforeEach(() => {
-        setupStripe({
-          createPaymentMethod: vi.fn(
-            () =>
-              new Promise((resolve) => {
-                resolve({ paymentMethod: { id: 1 } })
-              })
-          ),
-        })
-
-        server.use(
-          http.patch(
-            `/internal/${provider}/${owner}/account-details/update_payment`,
-            () => {
-              return HttpResponse.json(accountDetails)
-            }
-          )
-        )
-      })
-
-      it('returns the data from the server', async () => {
-        const { result } = renderHook(
-          () => useUpdateCard({ provider, owner }),
-          { wrapper: wrapper() }
-        )
-
-        // @ts-expect-error mutation mock
-        result.current.mutate(card)
-
-        await waitFor(() => expect(result.current.data).toEqual(accountDetails))
-      })
-    })
-
-    describe('when the mutation is not successful', () => {
-      beforeEach(() => {
-        vi.spyOn(console, 'error').mockImplementation(() => {})
-
-        setupStripe({
-          createPaymentMethod: vi.fn(
-            () =>
-              new Promise((resolve) => {
-                resolve({ error: { message: 'not good' } })
-              })
-          ),
-        })
-
-        server.use(
-          http.patch(
-            `/internal/${provider}/${owner}/account-details/update_payment`,
-            () => {
-              return HttpResponse.json(accountDetails)
-            }
-          )
-        )
-      })
-
-      afterAll(() => {
-        vi.restoreAllMocks()
-      })
-
-      it('does something', async () => {
-        const { result } = renderHook(
-          () => useUpdateCard({ provider, owner }),
-          { wrapper: wrapper() }
-        )
-
-        // @ts-expect-error mutation mock
-        result.current.mutate(card)
-
-        await waitFor(() => result.current.error)
-        await waitFor(() =>
-          expect(result.current.error).toEqual({ message: 'not good' })
-        )
-      })
-    })
-  })
-})
diff --git a/src/services/account/useUpdateCard.ts b/src/services/account/useUpdateCard.ts
deleted file mode 100644
index e28a7b1f30..0000000000
--- a/src/services/account/useUpdateCard.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useStripe } from '@stripe/react-stripe-js'
-import { StripeCardElement } from '@stripe/stripe-js'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-
-import Api from 'shared/api'
-
-interface useUpdateCardParams {
-  provider: string
-  owner: string
-}
-
-interface useUpdateCardReturn {
-  reset: () => void
-  error: null | Error
-  isLoading: boolean
-  mutate: (variables: any, data: any) => void
-  data: undefined | unknown
-}
-
-function getPathAccountDetails({ provider, owner }: useUpdateCardParams) {
-  return `/${provider}/${owner}/account-details/`
-}
-
-export function useUpdateCard({
-  provider,
-  owner,
-}: useUpdateCardParams): useUpdateCardReturn {
-  const stripe = useStripe()
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: (card: StripeCardElement) => {
-      return stripe!
-        .createPaymentMethod({
-          type: 'card',
-          card,
-        })
-        .then((result) => {
-          if (result.error) return Promise.reject(result.error)
-
-          const accountPath = getPathAccountDetails({ provider, owner })
-          const path = `${accountPath}update_payment`
-
-          return Api.patch({
-            provider,
-            path,
-            body: {
-              /* eslint-disable-next-line camelcase */
-              payment_method: result.paymentMethod.id,
-            },
-          })
-        })
-    },
-    onSuccess: (data) => {
-      // update the local cache of account details from what the server returns
-      queryClient.setQueryData(['accountDetails', provider, owner], data)
-    },
-  })
-}