feat(dashboard): ✨ New create typebot menu

apps/builder/components/templates/CreateNewTypebotButtons.tsx

@@ -113,7 +113,11 @@ export const CreateNewTypebotButtons = () => {
           Import a file
         </ImportTypebotFromFileButton>
       </Stack>
-      <TemplatesModal isOpen={isOpen} onClose={onClose} />
+      <TemplatesModal
+        isOpen={isOpen}
+        onClose={onClose}
+        onTypebotChoose={handleCreateSubmit}
+      />
     </VStack>
   )
 }

apps/builder/components/templates/TemplatesModal.tsx

@@ -1,16 +1,18 @@
 import {
   Button,
+  chakra,
+  Divider,
   Heading,
   HStack,
   Modal,
   ModalBody,
   ModalContent,
-  ModalFooter,
-  ModalHeader,
   ModalOverlay,
   Stack,
+  Tooltip,
   useToast,
 } from '@chakra-ui/react'
+import { ExternalLinkIcon } from 'assets/icons'
 import { TypebotViewer } from 'bot-engine'
 import { Typebot } from 'models'
 import React, { useEffect, useState } from 'react'
@@ -18,10 +20,17 @@ import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 import { sendRequest } from 'utils'
 import { TemplateProps, templates } from './data'
 
-type Props = { isOpen: boolean; onClose: () => void }
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onTypebotChoose: (typebot: Typebot) => void
+}
 
-export const TemplatesModal = ({ isOpen, onClose }: Props) => {
+export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
   const [typebot, setTypebot] = useState<Typebot>()
+  const [selectedTemplate, setSelectedTemplate] = useState<TemplateProps>(
+    templates[0]
+  )
 
   const toast = useToast({
     position: 'top-right',
@@ -34,6 +43,7 @@ export const TemplatesModal = ({ isOpen, onClose }: Props) => {
   }, [])
 
   const fetchTemplate = async (template: TemplateProps) => {
+    setSelectedTemplate(template)
     const { data, error } = await sendRequest(`/templates/${template.fileName}`)
     if (error) return toast({ title: error.name, description: error.message })
     setTypebot(data as Typebot)
@@ -42,20 +52,83 @@ export const TemplatesModal = ({ isOpen, onClose }: Props) => {
   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>
+      <ModalContent h="85vh">
+        <ModalBody as={HStack} p="0">
+          <Stack w="full" h="full">
+            <Heading pl="10" pt="4" fontSize="2xl">
+              {selectedTemplate.emoji}{' '}
+              <chakra.span ml="2">{selectedTemplate.name}</chakra.span>
+            </Heading>
+            {typebot && (
+              <TypebotViewer
+                typebot={parseTypebotToPublicTypebot(typebot)}
+                key={typebot.id}
+              />
+            )}
+          </Stack>
+
+          <Stack
+            h="full"
+            py="6"
+            w="300px"
+            px="4"
+            borderLeftWidth={1}
+            justify="space-between"
+          >
+            <Stack spacing={4}>
+              <Button
+                colorScheme="blue"
+                onClick={() => typebot && onTypebotChoose(typebot)}
+              >
+                Use this template
+              </Button>
+              <Divider />
+              <Stack>
+                {templates.map((template) => (
+                  <Tooltip
+                    key={template.name}
+                    isDisabled={!template.isComingSoon}
+                    label="Coming soon!"
+                  >
+                    <span>
+                      <Button
+                        onClick={() => fetchTemplate(template)}
+                        w="full"
+                        variant={
+                          selectedTemplate.name === template.name
+                            ? 'solid'
+                            : 'ghost'
+                        }
+                        isDisabled={template.isComingSoon}
+                      >
+                        {template.emoji}{' '}
+                        <chakra.span minW="200px" textAlign="left" ml="3">
+                          {template.name}
+                        </chakra.span>
+                      </Button>
+                    </span>
+                  </Tooltip>
+                ))}
+              </Stack>
+            </Stack>
+
+            <Stack>
+              <Divider />
+              <Tooltip label="Coming soon!" placement="top">
+                <span>
+                  <Button
+                    w="full"
+                    variant="ghost"
+                    isDisabled
+                    leftIcon={<ExternalLinkIcon />}
+                  >
+                    Community templates
+                  </Button>
+                </span>
+              </Tooltip>
+            </Stack>
           </Stack>
         </ModalBody>
-
-        <ModalFooter />
       </ModalContent>
     </Modal>
   )

apps/builder/components/templates/data.ts

@@ -1,6 +1,41 @@
-export type TemplateProps = { name: string; emoji: string; fileName: string }
+export type TemplateProps = {
+  name: string
+  emoji: string
+  fileName: string
+  isComingSoon?: boolean
+}
 
 export const templates: TemplateProps[] = [
   { name: 'Lead Generation', emoji: '🤝', fileName: 'lead-gen.json' },
   { name: 'Customer Support', emoji: '😍', fileName: 'customer-support.json' },
+  {
+    name: 'Quiz',
+    emoji: '🕹️',
+    fileName: 'customer-support.json',
+    isComingSoon: true,
+  },
+  {
+    name: 'Lead Scoring',
+    emoji: '🏆',
+    fileName: 'customer-support.json',
+    isComingSoon: true,
+  },
+  {
+    name: 'FAQ',
+    emoji: '💬',
+    fileName: 'customer-support.json',
+    isComingSoon: true,
+  },
+  {
+    name: 'Conversational Resume',
+    emoji: '👨‍💼',
+    fileName: 'customer-support.json',
+    isComingSoon: true,
+  },
+  {
+    name: 'User Onboarding',
+    emoji: '🧑‍🚀',
+    fileName: 'customer-support.json',
+    isComingSoon: true,
+  },
 ]