Merge branch 'main' into users-developer-plan

package.json

@@ -41,8 +41,8 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@sentry/react": "^8.35.0",
-    "@stripe/react-stripe-js": "^2.7.1",
-    "@stripe/stripe-js": "^3.4.0",
+    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/stripe-js": "^5.6.0",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-queryV5": "npm:@tanstack/react-query@^5.59.15",
     "@tanstack/react-table": "^8.9.1",

src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx

@@ -5,6 +5,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
 import { z } from 'zod'
 
+import { Provider } from 'shared/api/helpers'
 import Banner from 'ui/Banner'
 import BannerContent from 'ui/Banner/BannerContent'
 import Button from 'ui/Button'
@@ -13,7 +14,7 @@ import Icon from 'ui/Icon'
 import TextInput from 'ui/TextInput'
 import Toggle from 'ui/Toggle'
 
-import { useUpdateOktaConfig } from '../hooks'
+import { useUpdateOktaConfig } from '../hooks/useUpdateOktaConfig'
 import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
 
 const FormSchema = z.object({
@@ -24,7 +25,7 @@ const FormSchema = z.object({
 
 type FormValues = z.infer<typeof FormSchema>
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 

src/pages/AccountSettings/tabs/OktaAccess/hooks/useUpdateOktaConfig.test.tsx

@@ -1,4 +1,3 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
   QueryClientProvider as QueryClientProviderV5,
   QueryClient as QueryClientV5,
@@ -19,9 +18,6 @@ import {
 vi.mock('services/toastNotification')
 const mockedToastNotification = useAddNotification as Mock
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
 const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
@@ -30,11 +26,9 @@ const wrapper =
   (initialEntries = '/gh/codecov'): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
     <QueryClientProviderV5 client={queryClientV5}>
-      <QueryClientProvider client={queryClient}>
-        <MemoryRouter initialEntries={[initialEntries]}>
-          <Route path="/:provider/:owner">{children}</Route>
-        </MemoryRouter>
-      </QueryClientProvider>
+      <MemoryRouter initialEntries={[initialEntries]}>
+        <Route path="/:provider/:owner">{children}</Route>
+      </MemoryRouter>
     </QueryClientProviderV5>
   )
 
@@ -57,7 +51,6 @@ beforeAll(() => {
 })
 
 afterEach(() => {
-  queryClient.clear()
   queryClientV5.clear()
   server.resetHandlers()
 })

src/pages/AccountSettings/tabs/OktaAccess/hooks/useUpdateOktaConfig.tsx

@@ -1,59 +1,53 @@
-import { useMutation } from '@tanstack/react-query'
-import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
+import {
+  useMutation as useMutationV5,
+  useQueryClient as useQueryClientV5,
+} from '@tanstack/react-queryV5'
 import z from 'zod'
 
 import { useAddNotification } from 'services/toastNotification'
 import Api from 'shared/api'
-import { NetworkErrorObject } from 'shared/api/helpers'
+import { Provider, rejectNetworkError } from 'shared/api/helpers'
 import A from 'ui/A'
 
 import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
 
 const TOAST_DURATION = 10000
 
 const query = `
-  mutation SaveOktaConfig($input: SaveOktaConfigInput!) {
-    saveOktaConfig(input: $input) {
-      error {
-        __typename
-        ... on UnauthorizedError {
-          message
-          __typename
-        }
-        ... on ValidationError {
-          message
-          __typename
-        }
-        ... on UnauthenticatedError {
-          __typename
-          message
-        }
+mutation SaveOktaConfig($input: SaveOktaConfigInput!) {
+  saveOktaConfig(input: $input) {
+    error {
+      __typename
+      ... on UnauthorizedError {
+        message
+      }
+      ... on ValidationError {
+        message
+      }
+      ... on UnauthenticatedError {
+        message
       }
     }
   }
-`
+}`
+
+const ErrorUnionSchema = z.discriminatedUnion('__typename', [
+  z.object({
+    __typename: z.literal('UnauthorizedError'),
+    message: z.string(),
+  }),
+  z.object({
+    __typename: z.literal('ValidationError'),
+    message: z.string(),
+  }),
+  z.object({
+    __typename: z.literal('UnauthenticatedError'),
+    message: z.string(),
+  }),
+])
 
 const ResponseSchema = z.object({
-  saveOktaConfig: z
-    .object({
-      error: z
-        .union([
-          z.object({
-            __typename: z.literal('UnauthorizedError'),
-            message: z.string(),
-          }),
-          z.object({
-            __typename: z.literal('ValidationError'),
-            message: z.string(),
-          }),
-          z.object({
-            __typename: z.literal('UnauthenticatedError'),
-            message: z.string(),
-          }),
-        ])
-        .nullable(),
-    })
-    .nullable(),
+  saveOktaConfig: z.object({ error: ErrorUnionSchema.nullable() }).nullable(),
 })
 
 export const SaveOktaConfigMessage = () => (
@@ -67,7 +61,7 @@ export const SaveOktaConfigMessage = () => (
 )
 
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 
@@ -83,7 +77,7 @@ export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
   const addToast = useAddNotification()
   const queryClientV5 = useQueryClientV5()
 
-  return useMutation({
+  return useMutationV5({
     mutationFn: ({
       clientId,
       clientSecret,
@@ -110,26 +104,21 @@ export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
     onSuccess: ({ data }) => {
       const parsedData = ResponseSchema.safeParse(data)
       if (!parsedData.success) {
-        return Promise.reject({
+        return rejectNetworkError({
           status: 404,
           data: {},
           dev: 'useUpdateOktaConfig - 404 failed to parse',
-        } satisfies NetworkErrorObject)
+          error: parsedData.error,
+        })
       }
 
       const error = parsedData.data.saveOktaConfig?.error
       if (error) {
-        if (
-          error.__typename === 'ValidationError' ||
-          error.__typename === 'UnauthorizedError' ||
-          error.__typename === 'UnauthenticatedError'
-        ) {
-          addToast({
-            type: 'error',
-            text: <SaveOktaConfigMessage />,
-            disappearAfter: TOAST_DURATION,
-          })
-        }
+        addToast({
+          type: 'error',
+          text: <SaveOktaConfigMessage />,
+          disappearAfter: TOAST_DURATION,
+        })
       } else {
         addToast({
           type: 'success',

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx

@@ -63,7 +63,7 @@ function PaymentCard({ accountDetails, provider, owner }) {
               variant="primary"
               onClick={() => setIsFormOpen(true)}
             >
-              Set card
+              Set payment method
             </Button>
           </div>
         </div>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
 
 import { ThemeContextProvider } from 'shared/ThemeContext'
 import { Plans } from 'shared/utils/billing'
@@ -57,6 +58,7 @@ const subscriptionDetail = {
 
 const accountDetails = {
   subscriptionDetail,
+  activatedUserCount: 1,
 }
 
 const usBankSubscriptionDetail = {
@@ -75,7 +77,9 @@ const usBankSubscriptionDetail = {
 
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
-    <ThemeContextProvider>{children}</ThemeContextProvider>
+    <MemoryRouter>
+      <ThemeContextProvider>{children}</ThemeContextProvider>
+    </MemoryRouter>
   </QueryClientProvider>
 )
 
@@ -383,7 +387,13 @@ describe('PaymentCard', () => {
 
       await user.click(screen.getByTestId('edit-payment-method'))
 
-      expect(screen.getByText(randomError)).toBeInTheDocument()
+      expect(
+        screen.getByText((content) =>
+          content.includes(
+            "There's been an error. Please try refreshing your browser"
+          )
+        )
+      ).toBeInTheDocument()
     })
   })
 

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()
     })
   })
 

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

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

@@ -356,7 +356,7 @@ describe('CurrentOrgPlan', () => {
       )
       expect(paymentFailed).toBeInTheDocument()
       const contactSupport = await screen.findByText(
-        'Please try a different card or contact support at [email protected].'
+        'Please try a different payment method or contact support at [email protected].'
       )
       expect(contactSupport).toBeInTheDocument()
     })

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

@@ -75,7 +75,9 @@ function CurrentOrgPlan() {
         />
       ) : null}
       <InfoMessageStripeCallback
-        hasUnverifiedPaymentMethods={hasUnverifiedPaymentMethods}
+        awaitingInitialPaymentMethodVerification={
+          awaitingInitialPaymentMethodVerification
+        }
       />
       {isDelinquent ? <DelinquentAlert /> : null}
       {data?.plan ? (
@@ -161,7 +163,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 [email protected].
+          Please try a different payment method or contact support at
+          [email protected].
         </Alert.Description>
       </Alert>
       <br />