From 6ef816820adca222e46617d628410acd75ab0e2d Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Sun, 27 Oct 2024 15:27:25 +0500
Subject: [PATCH] fix(onboarding-flow): implement onboarding functionality

---
 src/components/App/index.tsx                  |  29 ++-
 .../OnboardingFlow/GraphDetailsStep/index.tsx | 169 ++++++++++++++++++
 .../ModalsContainer/OnboardingFlow/index.tsx  |  80 +++++++++
 src/components/ModalsContainer/index.tsx      |  40 +++--
 src/stores/useModalStore/index.ts             |   2 +
 5 files changed, 300 insertions(+), 20 deletions(-)
 create mode 100644 src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
 create mode 100644 src/components/ModalsContainer/OnboardingFlow/index.tsx

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index bf355b12b..7254af6eb 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -15,6 +15,7 @@ import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useUpdateSelectedNode } from '~/stores/useGraphStore'
+import { useModal } from '~/stores/useModalStore'
 import { useTeachStore } from '~/stores/useTeachStore'
 import { useUserStore } from '~/stores/useUserStore'
 import {
@@ -53,12 +54,17 @@ 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')
-  const { setBudget, setNodeCount } = useUserStore((s) => s)
+  const { setBudget, setNodeCount, isAdmin } = useUserStore((s) => s)
   const queueRef = useRef<FetchDataResponse | null>(null)
   const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const { open, visible } = useModal('onboardingFlow')
 
   const {
     setSidebarOpen,
@@ -68,6 +74,7 @@ export const App = () => {
     setTranscriptOpen,
     universeQuestionIsOpen,
     setUniverseQuestionIsOpen,
+    appMetaData,
   } = useAppStore((s) => s)
 
   const setTeachMeAnswer = useTeachStore((s) => s.setTeachMeAnswer)
@@ -322,10 +329,16 @@ export const App = () => {
   }, [runningProjectId, setRunningProjectMessages])
 
   useEffect(() => {
-    if (!splashDataLoading) {
+    if (isAdmin && !appMetaData?.title && !visible) {
+      open()
+    }
+  }, [isAdmin, appMetaData?.title, open, visible])
+
+  useEffect(() => {
+    if (!splashDataLoading && !visible) {
       setUniverseQuestionIsOpen()
     }
-  }, [setUniverseQuestionIsOpen, splashDataLoading])
+  }, [setUniverseQuestionIsOpen, splashDataLoading, visible])
 
   return (
     <>
@@ -336,7 +349,13 @@ export const App = () => {
       <Leva hidden={!isDevelopment || true} isRoot />
 
       <Suspense fallback={<div>Loading...</div>}>
-        {!splashDataLoading ? (
+        {visible && (
+          <Suspense fallback={<div>Loading Onboarding...</div>}>
+            <LazyOnboardingModal onSuccess={setUniverseQuestionIsOpen} />
+          </Suspense>
+        )}
+
+        {!visible && !splashDataLoading && (
           <Wrapper direction="row">
             <FormProvider {...form}>
               <LazyMainToolbar />
@@ -351,7 +370,7 @@ export const App = () => {
             <ModalsContainer />
             <Toasts />
           </Wrapper>
-        ) : null}
+        )}
       </Suspense>
     </>
   )
diff --git a/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx b/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
new file mode 100644
index 000000000..52f16baff
--- /dev/null
+++ b/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
@@ -0,0 +1,169 @@
+import { Button } from '@mui/material'
+import { FC, useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { MdError } from 'react-icons/md'
+import styled from 'styled-components'
+import { noSpacePattern } from '~/components/AddItemModal/SourceTypeStep/constants'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { TextInput } from '~/components/common/TextInput'
+import { requiredRule } from '~/constants'
+import { colors } from '~/utils'
+
+type Props = {
+  onSubmit: () => void
+  error?: string
+}
+
+export const GraphDetailsStep: FC<Props> = ({ onSubmit, error }) => {
+  const {
+    formState: { isSubmitting },
+    watch,
+  } = useFormContext()
+
+  const title = watch('title')
+  const description = watch('description')
+
+  const isFormValid = !!title?.trim() && !!description?.trim()
+
+  useEffect(() => {
+    const titleInput = document.getElementById('graph-title') as HTMLInputElement
+
+    if (titleInput) {
+      titleInput.focus()
+    }
+  }, [])
+
+  return (
+    <Flex>
+      {/* <Flex align="center" direction="column" justify="center">
+        <StyledText>Welcome to SecondBrain</StyledText>
+        <StyledSubText>Set a name and short description for your graph.</StyledSubText>
+      </Flex> */}
+
+      <Flex direction="column" justify="space-between">
+        <StyledText>Welcome to SecondBrain</StyledText>
+        <StyledSubText>Set a name and short description for your graph.</StyledSubText>
+      </Flex>
+
+      <StyledWrapper>
+        <Flex className="input__wrapper">
+          <TextInput
+            id="graph-title"
+            label="Title"
+            maxLength={50}
+            name="title"
+            placeholder="Type graph title here..."
+            rules={{
+              ...requiredRule,
+              pattern: {
+                message: 'No leading whitespace allowed',
+                value: noSpacePattern,
+              },
+            }}
+          />
+          <TextInput
+            id="graph-description"
+            label="Description"
+            maxLength={100}
+            name="description"
+            placeholder="Type graph description here..."
+            rules={{
+              ...requiredRule,
+              pattern: {
+                message: 'No leading whitespace allowed',
+                value: noSpacePattern,
+              },
+            }}
+          />
+        </Flex>
+      </StyledWrapper>
+
+      <Flex mt={10}>
+        <Button
+          color="secondary"
+          disabled={isSubmitting || !!error || !isFormValid}
+          onClick={onSubmit}
+          size="large"
+          variant="contained"
+        >
+          Confirm
+        </Button>
+      </Flex>
+      {error ? (
+        <StyledError>
+          <StyledErrorText>
+            <MdError className="errorIcon" />
+            <span>{error}</span>
+          </StyledErrorText>
+        </StyledError>
+      ) : null}
+    </Flex>
+  )
+}
+
+const StyledText = styled(Text)`
+  font-size: 22px;
+  font-weight: 600;
+  font-family: 'Barlow';
+  margin-bottom: 10px;
+`
+
+const StyledSubText = styled(Text)`
+  font-size: 14px;
+  font-family: 'Barlow';
+  margin-bottom: 20px;
+`
+
+const StyledWrapper = styled(Flex)`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin: 0 0 15px 0;
+
+  .input__wrapper {
+    display: flex;
+    gap: 23px;
+    max-height: 225px;
+    overflow-y: auto;
+    padding-right: 20px;
+    width: calc(100% + 20px);
+  }
+`
+
+const StyledErrorText = styled(Flex)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+
+  .errorIcon {
+    display: block;
+    font-size: 13px;
+    min-height: 13px;
+    min-width: 13px;
+  }
+
+  span {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: normal;
+    letter-spacing: 0.2px;
+    padding-left: 4px;
+    font-size: 13px;
+    font-family: Barlow;
+    line-height: 18px;
+  }
+`
+
+const StyledError = styled(Flex)`
+  display: flex;
+  align-items: center;
+  color: ${colors.primaryRed};
+  position: relative;
+  margin-top: 20px;
+`
diff --git a/src/components/ModalsContainer/OnboardingFlow/index.tsx b/src/components/ModalsContainer/OnboardingFlow/index.tsx
new file mode 100644
index 000000000..e8502862f
--- /dev/null
+++ b/src/components/ModalsContainer/OnboardingFlow/index.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { SuccessNotify } from '~/components/common/SuccessToast'
+import { BaseModal } from '~/components/Modal'
+import { NODE_ADD_ERROR } from '~/constants'
+import { postAboutData, TAboutParams } from '~/network/fetchSourcesData'
+import { useModal } from '~/stores/useModalStore'
+import { GraphDetailsStep } from './GraphDetailsStep'
+
+export type FormData = {
+  title: string
+  description: string
+}
+
+type OnboardingModalProps = {
+  onSuccess: () => void
+}
+
+export const OnboardingModal = ({ onSuccess }: OnboardingModalProps) => {
+  const { close, visible } = useModal('onboardingFlow')
+  const form = useForm<FormData>({ mode: 'onChange' })
+  const { reset } = form
+  const [error, setError] = useState<string>('')
+
+  useEffect(() => {
+    if (!visible) {
+      reset()
+      setError('')
+    }
+  }, [visible, reset])
+
+  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')
+        successCallback()
+      }
+      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      let errorMessage = NODE_ADD_ERROR
+
+      if (err?.status === 400) {
+        const errorRes = await err.json()
+
+        errorMessage = errorRes.errorCode || errorRes?.status || NODE_ADD_ERROR
+      } else if (err instanceof Error) {
+        errorMessage = err.message
+      }
+
+      onError(String(errorMessage))
+    }
+  }
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    await submitGraphDetails(
+      data,
+      () => {
+        close()
+        onSuccess()
+      },
+      setError,
+    )
+  })
+
+  return (
+    <BaseModal id="onboardingFlow" kind="small" onClose={close} preventOutsideClose>
+      <FormProvider {...form}>
+        <form id="onboardingFlow-form" onSubmit={onSubmit}>
+          <GraphDetailsStep error={error} onSubmit={onSubmit} />
+        </form>
+      </FormProvider>
+    </BaseModal>
+  )
+}
diff --git a/src/components/ModalsContainer/index.tsx b/src/components/ModalsContainer/index.tsx
index 664489b77..cf00851d3 100644
--- a/src/components/ModalsContainer/index.tsx
+++ b/src/components/ModalsContainer/index.tsx
@@ -1,4 +1,5 @@
 import { lazy } from 'react'
+import { useAppStore } from '~/stores/useAppStore'
 
 const LazySettingsModal = lazy(() =>
   import('../SettingsModal').then(({ SettingsModal }) => ({ default: SettingsModal })),
@@ -46,19 +47,28 @@ const LazyCreateBountyModal = lazy(() =>
   import('./CreateBountyModal').then(({ CreateBountyModal }) => ({ default: CreateBountyModal })),
 )
 
-export const ModalsContainer = () => (
-  <>
-    <LazyAddItemModal />
-    <LazyAddContentModal />
-    <LazySettingsModal />
-    <LazyEditNodeNameModal />
-    <LazyRemoveNodeModal />
-    <LazySourcesTableModal />
-    <LazyAddNodeEdgeModal />
-    <LazyChangeNodeTypeModal />
-    <LazyBlueprintModal />
-    <LazyMergeNodeModal />
-    <LazyUserFeedBackModal />
-    <LazyCreateBountyModal />
-  </>
+const LazyOnboardingModal = lazy(() =>
+  import('./OnboardingFlow').then(({ OnboardingModal }) => ({ default: OnboardingModal })),
 )
+
+export const ModalsContainer = () => {
+  const { setUniverseQuestionIsOpen } = useAppStore((s) => s)
+
+  return (
+    <>
+      <LazyAddItemModal />
+      <LazyAddContentModal />
+      <LazySettingsModal />
+      <LazyEditNodeNameModal />
+      <LazyRemoveNodeModal />
+      <LazySourcesTableModal />
+      <LazyAddNodeEdgeModal />
+      <LazyChangeNodeTypeModal />
+      <LazyBlueprintModal />
+      <LazyMergeNodeModal />
+      <LazyUserFeedBackModal />
+      <LazyCreateBountyModal />
+      <LazyOnboardingModal onSuccess={setUniverseQuestionIsOpen} />
+    </>
+  )
+}
diff --git a/src/stores/useModalStore/index.ts b/src/stores/useModalStore/index.ts
index 5dbf17182..b9efb3681 100644
--- a/src/stores/useModalStore/index.ts
+++ b/src/stores/useModalStore/index.ts
@@ -21,6 +21,7 @@ export type AvailableModals =
   | 'changeNodeType'
   | 'feedback'
   | 'createBounty'
+  | 'onboardingFlow'
 
 type ModalStore = {
   currentModals: Record<AvailableModals, boolean>
@@ -51,6 +52,7 @@ const defaultData = {
     changeNodeType: false,
     feedback: false,
     createBounty: false,
+    onboardingFlow: false,
   },
 }