refactor(lp): ♻️ Simplify header

apps/builder/assets/icons.tsx

@@ -394,3 +394,12 @@ export const CopyIcon = (props: IconProps) => (
     <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
   </Icon>
 )
+
+export const TemplateIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <rect x="3" y="3" width="7" height="7"></rect>
+    <rect x="14" y="3" width="7" height="7"></rect>
+    <rect x="14" y="14" width="7" height="7"></rect>
+    <rect x="3" y="14" width="7" height="7"></rect>
+  </Icon>
+)

apps/builder/components/templates/CreateNewTypebotButtons.tsx

@@ -0,0 +1,119 @@
+import {
+  VStack,
+  Heading,
+  Stack,
+  Tooltip,
+  Button,
+  useDisclosure,
+  useToast,
+} from '@chakra-ui/react'
+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 { importTypebot, createTypebot } from 'services/typebots'
+import { ImportTypebotFromFileButton } from './ImportTypebotFromFileButton'
+import { TemplatesModal } from './TemplatesModal'
+
+export const CreateNewTypebotButtons = () => {
+  const { user } = useUser()
+  const router = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [isFromScratchTooltipOpened, setIsFromScratchTooltipOpened] =
+    useState(false)
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+    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)
+    const folderId = router.query.folderId?.toString() ?? null
+    const { error, data } = typebot
+      ? await importTypebot(
+          {
+            ...typebot,
+            ownerId: user.id,
+            folderId,
+            theme: {
+              ...typebot.theme,
+              chat: {
+                ...typebot.theme.chat,
+                hostAvatar: { isEnabled: true, url: user.image ?? undefined },
+              },
+            },
+          },
+          user
+        )
+      : await createTypebot({
+          folderId,
+        })
+    if (error) toast({ description: error.message })
+    if (data) router.push(`/typebots/${data.id}/edit`)
+    setIsLoading(false)
+  }
+
+  return (
+    <VStack maxW="600px" w="full" flex="1" pt="20" spacing={10}>
+      <Heading>Create a new typebot</Heading>
+      <Stack w="full" spacing={6}>
+        <Tooltip
+          isOpen={isFromScratchTooltipOpened}
+          label="Strongly suggested if you're new to Typebot."
+          maxW="200px"
+          hasArrow
+          placement="right"
+          rounded="md"
+        >
+          <Button
+            variant="outline"
+            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"
+          py="8"
+          fontSize="lg"
+          leftIcon={<TemplateIcon color="orange.500" boxSize="25px" mr="2" />}
+          onClick={onOpen}
+          isLoading={isLoading}
+        >
+          Start from a template
+        </Button>
+        <ImportTypebotFromFileButton
+          variant="outline"
+          w="full"
+          py="8"
+          fontSize="lg"
+          leftIcon={<DownloadIcon color="purple.500" boxSize="25px" mr="2" />}
+          isLoading={isLoading}
+          onNewTypebot={handleCreateSubmit}
+        >
+          Import a file
+        </ImportTypebotFromFileButton>
+      </Stack>
+      <TemplatesModal isOpen={isOpen} onClose={onClose} />
+    </VStack>
+  )
+}

apps/builder/components/templates/ImportFileMenuItem.tsx → apps/builder/components/templates/ImportTypebotFromFileButton.tsx

@@ -1,15 +1,16 @@
-import { chakra, MenuItem, MenuItemProps, useToast } from '@chakra-ui/react'
-import { FileIcon } from 'assets/icons'
-import { MoreButton } from 'components/dashboard/FolderContent/MoreButton'
+import { Button, ButtonProps, chakra, useToast } from '@chakra-ui/react'
 import { Typebot } from 'models'
 import React, { ChangeEvent } from 'react'
 import { readFile } from 'services/utils'
 
 type Props = {
   onNewTypebot: (typebot: Typebot) => void
-} & MenuItemProps
+} & ButtonProps
 
-export const CreateTypebotMoreButton = ({ onNewTypebot }: Props) => {
+export const ImportTypebotFromFileButton = ({
+  onNewTypebot,
+  ...props
+}: Props) => {
   const toast = useToast({
     position: 'top-right',
     status: 'error',
@@ -36,16 +37,9 @@ export const CreateTypebotMoreButton = ({ onNewTypebot }: Props) => {
         onChange={handleInputChange}
         accept=".json"
       />
-      <MoreButton>
-        <MenuItem
-          as="label"
-          cursor="pointer"
-          icon={<FileIcon />}
-          htmlFor="file-input"
-        >
-          Import from file
-        </MenuItem>
-      </MoreButton>
+      <Button as="label" htmlFor="file-input" cursor="pointer" {...props}>
+        {props.children}
+      </Button>
     </>
   )
 }

apps/builder/components/templates/PreviewModal.tsx

@@ -9,10 +9,10 @@ import {
   Button,
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
-import { TemplateProps } from 'layouts/dashboard/TemplatesContent'
 import { Typebot } from 'models'
 import React from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
+import { TemplateProps } from './data'
 
 type Props = {
   template: TemplateProps

apps/builder/components/templates/TemplateButton.tsx

@@ -8,10 +8,10 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import { EyeIcon } from 'assets/icons'
-import { TemplateProps } from 'layouts/dashboard/TemplatesContent'
 import { Typebot } from 'models'
 import React, { useEffect, useState } from 'react'
 import { sendRequest } from 'utils'
+import { TemplateProps } from './data'
 import { PreviewModal } from './PreviewModal'
 
 type Props = {

apps/builder/components/templates/TemplatesModal.tsx

@@ -0,0 +1,62 @@
+import {
+  Button,
+  Heading,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  useToast,
+} from '@chakra-ui/react'
+import { TypebotViewer } from 'bot-engine'
+import { Typebot } from 'models'
+import React, { useEffect, useState } from 'react'
+import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
+import { sendRequest } from 'utils'
+import { TemplateProps, templates } from './data'
+
+type Props = { isOpen: boolean; onClose: () => void }
+
+export const TemplatesModal = ({ isOpen, onClose }: Props) => {
+  const [typebot, setTypebot] = useState<Typebot>()
+
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+
+  useEffect(() => {
+    fetchTemplate(templates[0])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const fetchTemplate = async (template: TemplateProps) => {
+    const { data, error } = await sendRequest(`/templates/${template.fileName}`)
+    if (error) return toast({ title: error.name, description: error.message })
+    setTypebot(data as Typebot)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="6xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader as={HStack} justifyContent="space-between" w="full">
+          <Heading fontSize="xl">Lead generation</Heading>
+        </ModalHeader>
+        <ModalBody as={HStack}>
+          {typebot && (
+            <TypebotViewer typebot={parseTypebotToPublicTypebot(typebot)} />
+          )}
+          <Stack>
+            <Button colorScheme="blue">Use this template</Button>
+          </Stack>
+        </ModalBody>
+
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}

apps/builder/components/templates/data.ts

@@ -0,0 +1,6 @@
+export type TemplateProps = { name: string; emoji: string; fileName: string }
+
+export const templates: TemplateProps[] = [
+  { name: 'Lead Generation', emoji: '🤝', fileName: 'lead-gen.json' },
+  { name: 'Customer Support', emoji: '😍', fileName: 'customer-support.json' },
+]