fix(onboarding-flow): impletement cypress test

stakwork · Oct 27, 2024 · dd87a9f · dd87a9f
1 parent f20f976
commit dd87a9f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -30,7 +30,6 @@ import { colors } from '~/utils/colors'
 import { updateBudget } from '~/utils/setBudget'
 import version from '~/utils/versionHelper'
 import { ModalsContainer } from '../ModalsContainer'
-import { OnboardingModal } from '../ModalsContainer/OnboardingFlow'
 import { ActionsToolbar } from './ActionsToolbar'
 import { AppBar } from './AppBar'
 import { DeviceCompatibilityNotice } from './DeviceCompatibilityNotification'
@@ -55,6 +54,10 @@ const LazyMainToolbar = lazy(() => import('./MainToolbar').then(({ MainToolbar }
 const LazyUniverse = lazy(() => import('~/components/Universe').then(({ Universe }) => ({ default: Universe })))
 const LazySideBar = lazy(() => import('./SideBar').then(({ SideBar }) => ({ default: SideBar })))
 
+const LazyOnboardingModal = lazy(() =>
+  import('../ModalsContainer/OnboardingFlow').then(({ OnboardingModal }) => ({ default: OnboardingModal })),
+)
+
 export const App = () => {
   const [searchParams] = useSearchParams()
   const query = searchParams.get('q')
@@ -327,13 +330,13 @@ export const App = () => {
 
   useEffect(() => {
     if (isAdmin && !appMetaData?.title && !visible) {
-      open() // Open the onboarding modal if conditions are met
+      open()
     }
   }, [isAdmin, appMetaData?.title, open, visible])
 
   useEffect(() => {
     if (!splashDataLoading && !visible) {
-      setUniverseQuestionIsOpen() // Set universe question open only if onboarding is not visible
+      setUniverseQuestionIsOpen()
     }
   }, [setUniverseQuestionIsOpen, splashDataLoading, visible])
 
@@ -348,7 +351,9 @@ export const App = () => {
       <Suspense fallback={<div>Loading...</div>}>
         {!splashDataLoading &&
           (visible ? (
-            <OnboardingModal /> // Show OnboardingModal if visible
+            <Suspense fallback={<div>Loading Onboarding...</div>}>
+              <LazyOnboardingModal onSuccess={setUniverseQuestionIsOpen} />
+            </Suspense>
           ) : (
             <Wrapper direction="row">
               <FormProvider {...form}>

diff --git a/src/components/ModalsContainer/OnboardingFlow/index.tsx b/src/components/ModalsContainer/OnboardingFlow/index.tsx
@@ -12,7 +12,11 @@ export type FormData = {
   description: string
 }
 
-export const OnboardingModal = () => {
+type OnboardingModalProps = {
+  onSuccess: () => void
+}
+
+export const OnboardingModal = ({ onSuccess }: OnboardingModalProps) => {
   const { close, visible } = useModal('onboardingFlow')
   const form = useForm<FormData>({ mode: 'onChange' })
   const { reset } = form
@@ -25,13 +29,17 @@ export const OnboardingModal = () => {
     }
   }, [visible, reset])
 
-  const submitGraphDetails = async (data: TAboutParams, onSuccess: () => void, onError: (error: string) => void) => {
+  const submitGraphDetails = async (
+    data: TAboutParams,
+    successCallback: () => void,
+    onError: (error: string) => void,
+  ) => {
     try {
       const res = (await postAboutData(data)) as Awaited<{ status: string }>
 
       if (res.status === 'success') {
         SuccessNotify('Graph details saved')
-        onSuccess()
+        successCallback()
       }
       // eslint-disable-next-line  @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -54,6 +62,7 @@ export const OnboardingModal = () => {
       data,
       () => {
         close()
+        onSuccess()
       },
       setError,
     )