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}>
+      <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)} />
+              <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>
-            <Button colorScheme="blue">Use this template</Button>
+                {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,
+  },
 ]

apps/builder/playwright/tests/editor.spec.ts

@@ -140,11 +140,13 @@ test.describe.parallel('Editor', () => {
     ])
 
     await page.goto(`/typebots/${typebotId}/edit`)
-    await page.click('text="My awesome typebot"')
-    await page.fill('input[value="My awesome typebot"]', 'My superb typebot')
+
     await page.click('[data-testid="editable-icon"]')
     await page.fill('input[placeholder="Search..."]', 'love')
     await page.click('text="😍"')
+    await page.click('text="My awesome typebot"')
+    await page.fill('input[value="My awesome typebot"]', 'My superb typebot')
+    await page.press('input[value="My superb typebot"]', 'Enter')
     await page.goto(`/typebots`)
     await expect(page.locator('text="😍"')).toBeVisible()
     await expect(page.locator('text="My superb typebot"')).toBeVisible()

apps/builder/playwright/tests/templates.spec.ts

@@ -11,7 +11,6 @@ test.describe.parallel('Templates page', () => {
 
   test('From file should import correctly', async ({ page }) => {
     await page.goto('/typebots/create')
-    await page.click('[data-testid="more-button"]')
     await page.setInputFiles(
       'input[type="file"]',
       path.join(__dirname, '../fixtures/typebots/singleChoiceTarget.json')
@@ -21,8 +20,11 @@ test.describe.parallel('Templates page', () => {
 
   test('Templates should be previewable and usable', async ({ page }) => {
     await page.goto('/typebots/create')
-    await page.click('[aria-label="Preview"] >> nth=0')
-    await expect(typebotViewer(page).locator('text=Hi!')).toBeVisible()
+    await page.click('text=Start from a template')
+    await page.click('text=Customer Support')
+    await expect(
+      typebotViewer(page).locator('text=How can I help you?')
+    ).toBeVisible()
     await page.click('text=Use this template')
     await expect(page).toHaveURL(new RegExp(`/edit`))
   })

apps/builder/public/templates/customer-support.json

@@ -2,7 +2,8 @@
   "id": "cl16la7p900990b1a72qjqbb3",
   "createdAt": "2022-03-25T15:39:33.885Z",
   "updatedAt": "2022-03-25T15:42:12.544Z",
-  "name": "My typebot",
+  "name": "Customer Support",
+  "icon": "😍",
   "ownerId": "cl13od3wt0000pl1aat7bdrxf",
   "publishedTypebotId": null,
   "folderId": null,

apps/builder/public/templates/lead-gen.json

@@ -2,7 +2,8 @@
   "id": "qgMiLSr4W1ftXocFncin1G",
   "createdAt": "2022-02-05T06:21:16.522Z",
   "updatedAt": "2022-02-05T06:21:16.522Z",
-  "name": "My typebot",
+  "name": "Lead Generation",
+  "icon": "🤝",
   "ownerId": "ckz6t9iep0006k31a22j05fwq",
   "publishedTypebotId": null,
   "folderId": null,