feat: ♿️ Getting started editor modal

apps/builder/components/editor/GettingStartedModal.tsx

@@ -0,0 +1,79 @@
+import {
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  ModalBody,
+  Stack,
+  Heading,
+  List,
+  ListItem,
+  ListIcon,
+  Text,
+} from '@chakra-ui/react'
+import { CheckSquareIcon } from 'assets/icons'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+export const GettingStartedModal = () => {
+  const { query } = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  useEffect(() => {
+    if (query.isFirstBot) onOpen()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalBody as={Stack} spacing="8" py="10">
+          <Stack spacing={4}>
+            <Heading fontSize="xl">Editor basics</Heading>
+            <List spacing={4}>
+              <ListItem>
+                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
+                The left side bar contains blocks that you can drag and drop to
+                the canva
+              </ListItem>
+              <ListItem>
+                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
+                You can group blocks together by dragging them below or above
+                each other
+              </ListItem>
+              <ListItem>
+                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
+                Don't forget to connect blocks together
+              </ListItem>
+              <ListItem>
+                <ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
+                Preview your bot by clicking the preview button on the right
+              </ListItem>
+            </List>
+          </Stack>
+
+          <Text>
+            Feel free to use the bottom-right bubble to contact if you have any
+            question 😃
+          </Text>
+          <Stack spacing={4}>
+            <Heading fontSize="xl">See it in action ({`<`} 5 minutes)</Heading>
+            <iframe
+              width="100%"
+              height="315"
+              src="https://www.youtube.com/embed/jp3ggg_42-M"
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              style={{ borderRadius: '0.5rem' }}
+            />
+          </Stack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}

apps/builder/components/templates/CreateNewTypebotButtons.tsx

@@ -2,7 +2,6 @@ import {
   VStack,
   Heading,
   Stack,
-  Tooltip,
   Button,
   useDisclosure,
   useToast,
@@ -11,7 +10,7 @@ import { ToolIcon, TemplateIcon, DownloadIcon } from 'assets/icons'
 import { useUser } from 'contexts/UserContext'
 import { Typebot } from 'models'
 import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { importTypebot, createTypebot } from 'services/typebots'
 import { ImportTypebotFromFileButton } from './ImportTypebotFromFileButton'
 import { TemplatesModal } from './TemplatesModal'
@@ -20,8 +19,6 @@ export const CreateNewTypebotButtons = () => {
   const { user } = useUser()
   const router = useRouter()
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const [isFromScratchTooltipOpened, setIsFromScratchTooltipOpened] =
-    useState(false)
 
   const [isLoading, setIsLoading] = useState(false)
 
@@ -31,13 +28,6 @@ export const CreateNewTypebotButtons = () => {
     title: 'An error occured',
   })
 
-  useEffect(() => {
-    if (!router.isReady) return
-    const isFirstBot = router.query.isFirstBot as string | undefined
-    if (isFirstBot) setIsFromScratchTooltipOpened(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.isReady])
-
   const handleCreateSubmit = async (typebot?: Typebot) => {
     if (!user) return
     setIsLoading(true)
@@ -62,7 +52,11 @@ export const CreateNewTypebotButtons = () => {
           folderId,
         })
     if (error) toast({ description: error.message })
-    if (data) router.push(`/typebots/${data.id}/edit`)
+    if (data)
+      router.push({
+        pathname: `/typebots/${data.id}/edit`,
+        query: { isFirstBot: router.query.isFirstBot },
+      })
     setIsLoading(false)
   }
 
@@ -70,26 +64,17 @@ export const CreateNewTypebotButtons = () => {
     <VStack maxW="600px" w="full" flex="1" pt="20" spacing={10}>
       <Heading>Create a new typebot</Heading>
       <Stack w="full" spacing={6}>
-        <Tooltip
+        <Button
-          isOpen={isFromScratchTooltipOpened}
+          variant="outline"
-          label="Strongly suggested if you're new to Typebot."
+          w="full"
-          maxW="200px"
+          py="8"
-          hasArrow
+          fontSize="lg"
-          placement="right"
+          leftIcon={<ToolIcon color="blue.500" boxSize="25px" mr="2" />}
-          rounded="md"
+          onClick={() => handleCreateSubmit()}
+          isLoading={isLoading}
         >
-          <Button
+          Start from scratch
-            variant="outline"
+        </Button>
-            w="full"
-            py="8"
-            fontSize="lg"
-            leftIcon={<ToolIcon color="blue.500" boxSize="25px" mr="2" />}
-            onClick={() => handleCreateSubmit()}
-            isLoading={isLoading}
-          >
-            Start from scratch
-          </Button>
-        </Tooltip>
         <Button
           variant="outline"
           w="full"

apps/builder/components/templates/TemplateButton.tsx

@@ -1,92 +0,0 @@
-import {
-  Button,
-  useToast,
-  VStack,
-  Text,
-  IconButton,
-  Tooltip,
-  useDisclosure,
-} from '@chakra-ui/react'
-import { EyeIcon } from 'assets/icons'
-import { Typebot } from 'models'
-import React, { useEffect, useState } from 'react'
-import { sendRequest } from 'utils'
-import { TemplateProps } from './data'
-import { PreviewModal } from './PreviewModal'
-
-type Props = {
-  template: TemplateProps
-  onClick: (typebot: Typebot) => void
-}
-
-export const TemplateButton = ({ template, onClick }: Props) => {
-  const [typebot, setTypebot] = useState<Typebot>()
-  const { isOpen, onOpen, onClose } = useDisclosure()
-
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-  })
-
-  useEffect(() => {
-    fetchTemplate()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const fetchTemplate = async () => {
-    const { data, error } = await sendRequest(`/templates/${template.fileName}`)
-    if (error) return toast({ title: error.name, description: error.message })
-    setTypebot(data as Typebot)
-  }
-
-  const handleTemplateClick = async () => typebot && onClick(typebot)
-
-  const handlePreviewClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    onOpen()
-  }
-
-  return (
-    <>
-      <Button
-        as="div"
-        style={{ width: '225px', height: '270px' }}
-        paddingX={6}
-        whiteSpace={'normal'}
-        pos="relative"
-        cursor="pointer"
-        variant="outline"
-        colorScheme={'gray'}
-        borderWidth={'1px'}
-        justifyContent="center"
-        onClick={handleTemplateClick}
-      >
-        <Tooltip label="Preview">
-          <IconButton
-            icon={<EyeIcon />}
-            aria-label="Preview"
-            onClick={handlePreviewClick}
-            pos="absolute"
-            top="20px"
-            right="20px"
-            variant="outline"
-          />
-        </Tooltip>
-
-        <VStack spacing="4">
-          <Text fontSize={50}>{template.emoji}</Text>
-          <Text>{template.name}</Text>
-        </VStack>
-      </Button>
-      {typebot && (
-        <PreviewModal
-          template={template}
-          typebot={typebot}
-          isOpen={isOpen}
-          onCreateClick={handleTemplateClick}
-          onClose={onClose}
-        />
-      )}
-    </>
-  )
-}

apps/builder/layouts/editor/Board.tsx

@@ -1,36 +0,0 @@
-import { Flex } from '@chakra-ui/react'
-import React from 'react'
-import { GraphDndContext } from 'contexts/GraphDndContext'
-import { StepsSideBar } from '../../components/editor/StepsSideBar'
-import { PreviewDrawer } from '../../components/editor/preview/PreviewDrawer'
-import { RightPanel, useEditor } from 'contexts/EditorContext'
-import { GraphProvider } from 'contexts/GraphContext'
-import { BoardMenuButton } from '../../components/editor/BoardMenuButton'
-import { useTypebot } from 'contexts/TypebotContext'
-import { Graph } from 'components/shared/Graph'
-
-export const Board = () => {
-  const { typebot, isReadOnly } = useTypebot()
-  const { rightPanel } = useEditor()
-
-  return (
-    <Flex
-      flex="1"
-      pos="relative"
-      h="full"
-      background="#f4f5f8"
-      backgroundImage="radial-gradient(#c6d0e1 1px, transparent 0)"
-      backgroundSize="40px 40px"
-      backgroundPosition="-19px -19px"
-    >
-      <GraphDndContext>
-        <StepsSideBar />
-        <GraphProvider blocks={typebot?.blocks ?? []} isReadOnly={isReadOnly}>
-          {typebot && <Graph flex="1" typebot={typebot} />}
-          <BoardMenuButton pos="absolute" right="40px" top="20px" />
-          {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
-        </GraphProvider>
-      </GraphDndContext>
-    </Flex>
-  )
-}

apps/builder/pages/typebots/[typebotId]/edit.tsx

@@ -1,19 +1,53 @@
 import { Flex } from '@chakra-ui/layout'
-import { Board } from 'layouts/editor/Board'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
-import { EditorContext } from 'contexts/EditorContext'
+import { EditorContext, RightPanel, useEditor } from 'contexts/EditorContext'
 import React from 'react'
 import { KBar } from 'components/shared/KBar'
+import { BoardMenuButton } from 'components/editor/BoardMenuButton'
+import { PreviewDrawer } from 'components/editor/preview/PreviewDrawer'
+import { StepsSideBar } from 'components/editor/StepsSideBar'
+import { Graph } from 'components/shared/Graph'
+import { GraphProvider } from 'contexts/GraphContext'
+import { GraphDndContext } from 'contexts/GraphDndContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import { GettingStartedModal } from 'components/editor/GettingStartedModal'
+
+const TypebotEditPage = () => {
+  const { typebot, isReadOnly } = useTypebot()
+  const { rightPanel } = useEditor()
+
+  return (
+    <EditorContext>
+      <Seo title="Editor" />
+      <KBar />
+      <Flex overflow="clip" h="100vh" flexDir="column" id="editor-container">
+        <GettingStartedModal />
+        <TypebotHeader />
+        <Flex
+          flex="1"
+          pos="relative"
+          h="full"
+          background="#f4f5f8"
+          backgroundImage="radial-gradient(#c6d0e1 1px, transparent 0)"
+          backgroundSize="40px 40px"
+          backgroundPosition="-19px -19px"
+        >
+          <GraphDndContext>
+            <StepsSideBar />
+            <GraphProvider
+              blocks={typebot?.blocks ?? []}
+              isReadOnly={isReadOnly}
+            >
+              {typebot && <Graph flex="1" typebot={typebot} />}
+              <BoardMenuButton pos="absolute" right="40px" top="20px" />
+              {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
+            </GraphProvider>
+          </GraphDndContext>
+        </Flex>
+      </Flex>
+    </EditorContext>
+  )
+}
 
-const TypebotEditPage = () => (
-  <EditorContext>
-    <Seo title="Editor" />
-    <KBar />
-    <Flex overflow="clip" h="100vh" flexDir="column" id="editor-container">
-      <TypebotHeader />
-      <Board />
-    </Flex>
-  </EditorContext>
-)
 export default TypebotEditPage