feat(dashboard): ✨ Add lead generation template

While creating the template I also made sure to fix and improve everything I stumble upon

apps/builder/assets/icons.tsx

@@ -325,3 +325,17 @@ export const RedoIcon = (props: IconProps) => (
     <path d="M3 17a9 9 0 019-9 9 9 0 016 2.3l3 2.7"></path>
   </Icon>
 )
+
+export const FileIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
+    <polyline points="13 2 13 9 20 9"></polyline>
+  </Icon>
+)
+
+export const EyeIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+    <circle cx="12" cy="12" r="3"></circle>
+  </Icon>
+)

apps/builder/components/dashboard/FolderContent.tsx

@@ -144,7 +144,7 @@ export const FolderContent = ({ folder }: Props) => {
   useEventListener('mousemove', handleMouseMove)
 
   return (
-    <Flex w="full" flex="1" justify="center" pt={4}>
+    <Flex w="full" flex="1" justify="center">
       <Stack w="1000px" spacing={6}>
         <Skeleton isLoaded={folder?.name !== undefined}>
           <Heading as="h1">{folder?.name}</Heading>

apps/builder/components/dashboard/FolderContent/MoreButton.tsx

@@ -12,8 +12,9 @@ type Props = { children: ReactNode } & ButtonProps
 
 export const MoreButton = ({ children, ...props }: Props) => {
   return (
-    <Menu>
+    <Menu isLazy>
       <MenuButton
+        data-testid="more-button"
         as={IconButton}
         icon={<MoreVerticalIcon />}
         onClick={(e) => e.stopPropagation()}

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsModal.tsx

@@ -24,8 +24,9 @@ export const SettingsModal = ({
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader />
+        <ModalHeader mb="2">
           <ModalCloseButton />
+        </ModalHeader>
         <ModalBody {...props}>{props.children}</ModalBody>
         <ModalFooter />
       </ModalContent>

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -59,7 +59,8 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
       <PopoverContent onMouseDown={handleMouseDown} pos="relative">
         <PopoverArrow />
         <PopoverBody
-          py="6"
+          pt="10"
+          pb="6"
           overflowY="scroll"
           maxH="400px"
           ref={ref}

apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx

@@ -16,7 +16,7 @@ import {
 } from 'models'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/editor/StepsSideBar/StepIcon'
-import { isBubbleStep, isTextBubbleStep, stepHasItems } from 'utils'
+import { isBubbleStep, isTextBubbleStep } from 'utils'
 import { StepNodeContent } from './StepNodeContent/StepNodeContent'
 import { useTypebot } from 'contexts/TypebotContext'
 import { ContextMenu } from 'components/shared/ContextMenu'
@@ -53,6 +53,9 @@ export const StepNode = ({
   const [isPopoverOpened, setIsPopoverOpened] = useState(
     openedStepId === step.id
   )
+  const [isEditing, setIsEditing] = useState<boolean>(
+    isTextBubbleStep(step) && step.content.plainText === ''
+  )
   const stepRef = useRef<HTMLDivElement | null>(null)
 
   const onDrag = (position: NodePosition) => {
@@ -65,9 +68,6 @@ export const StepNode = ({
     isDisabled: !onMouseDown || step.type === 'start',
   })
 
-  const [isEditing, setIsEditing] = useState<boolean>(
-    isTextBubbleStep(step) && step.content.plainText === ''
-  )
   const {
     isOpen: isModalOpen,
     onOpen: onModalOpen,

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx

@@ -39,7 +39,14 @@ export const StepNodeContent = ({ step, indices }: Props) => {
     case BubbleStepType.VIDEO: {
       return <VideoBubbleContent step={step} />
     }
-    case InputStepType.TEXT:
+    case InputStepType.TEXT: {
+      return (
+        <PlaceholderContent
+          placeholder={step.options.labels.placeholder}
+          isLong={step.options.isLong}
+        />
+      )
+    }
     case InputStepType.NUMBER:
     case InputStepType.EMAIL:
     case InputStepType.URL:

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/PlaceholderContent.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 
-type Props = { placeholder: string }
+type Props = { placeholder: string; isLong?: boolean }
 
-export const PlaceholderContent = ({ placeholder }: Props) => (
+export const PlaceholderContent = ({ placeholder, isLong }: Props) => (
-  <Text color={'gray.500'}>{placeholder}</Text>
+  <Text color={'gray.500'} h={isLong ? '100px' : 'auto'}>
+    {placeholder}
+  </Text>
 )

apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx

@@ -108,6 +108,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
       onMouseDown={handleMouseDown}
       pos="relative"
       spacing={0}
+      cursor="text"
     >
       <ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
       <Plate

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, useEffect, useState } from 'react'
-import { Button, Flex, HStack, Input, Stack } from '@chakra-ui/react'
+import { Button, Flex, HStack, Input, Stack, Text } from '@chakra-ui/react'
 import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
@@ -39,7 +39,7 @@ export const ImageUploadContent = ({
         >
           Embed link
         </Button>
-        {process.env.NEXT_PUBLIC_GIPHY_API_KEY && isGiphyEnabled && (
+        {isGiphyEnabled && (
           <Button
             variant={currentTab === 'giphy' ? 'solid' : 'ghost'}
             onClick={() => setCurrentTab('giphy')}
@@ -117,10 +117,14 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
   )
 }
 
-const GiphyContent = ({ onNewUrl }: ContentProps) => (
+const GiphyContent = ({ onNewUrl }: ContentProps) => {
+  if (!process.env.NEXT_PUBLIC_GIPHY_API_KEY)
+    return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
+  return (
     <SearchContextManager
       apiKey={process.env.NEXT_PUBLIC_GIPHY_API_KEY as string}
     >
       <GiphySearch onSubmit={onNewUrl} />
     </SearchContextManager>
   )
+}

apps/builder/components/templates/ImportFileMenuItem.tsx

@@ -0,0 +1,51 @@
+import { chakra, MenuItem, MenuItemProps, useToast } from '@chakra-ui/react'
+import { FileIcon } from 'assets/icons'
+import { Typebot } from 'models'
+import React, { ChangeEvent, useState } from 'react'
+import { readFile } from 'services/utils'
+
+type Props = {
+  onNewTypebot: (typebot: Typebot) => void
+} & MenuItemProps
+
+export const ImportFromFileMenuItem = ({ onNewTypebot, ...props }: Props) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+
+  const handleInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target?.files) return
+    setIsLoading(true)
+    const file = e.target.files[0]
+    const fileContent = await readFile(file)
+    try {
+      onNewTypebot(JSON.parse(fileContent))
+    } catch (err) {
+      console.error(err)
+      toast({ description: 'Failed to parse the file' })
+    }
+    setIsLoading(false)
+  }
+
+  return (
+    <>
+      <chakra.input
+        type="file"
+        id="file-input"
+        display="none"
+        onChange={handleInputChange}
+        accept=".json"
+      />
+      <MenuItem
+        icon={<FileIcon />}
+        id="file-input"
+        isLoading={isLoading}
+        {...props}
+      >
+        {props.children}
+      </MenuItem>
+    </>
+  )
+}

apps/builder/components/templates/PreviewModal.tsx

@@ -0,0 +1,64 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  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'
+
+type Props = {
+  template: TemplateProps
+  typebot: Typebot
+  isOpen: boolean
+  onCreateClick: () => void
+  onClose: () => void
+}
+
+export const PreviewModal = ({
+  template,
+  typebot,
+  isOpen,
+  onClose,
+  onCreateClick,
+}: Props) => {
+  const handleCreateClick = () => {
+    onCreateClick()
+    onClose()
+  }
+  return (
+    <Modal
+      size="3xl"
+      isOpen={isOpen}
+      onClose={onClose}
+      blockScrollOnMount={false}
+    >
+      <ModalOverlay />
+      <ModalContent h="85vh">
+        <ModalHeader>
+          {(template.emoji ?? '') + ' ' + template.name}
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <TypebotViewer typebot={parseTypebotToPublicTypebot(typebot)} />
+        </ModalBody>
+
+        <ModalFooter>
+          <Button mr={3} onClick={handleCreateClick}>
+            Use this template
+          </Button>
+          <Button variant="ghost" colorScheme="gray" onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

apps/builder/components/templates/TemplateButton.tsx

@@ -0,0 +1,92 @@
+import {
+  Button,
+  useToast,
+  VStack,
+  Text,
+  IconButton,
+  Tooltip,
+  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 { 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/dashboard/TemplatesContent.tsx

@@ -1,9 +1,26 @@
-import { Button, useToast } from '@chakra-ui/react'
+import {
+  Button,
+  Divider,
+  Flex,
+  SimpleGrid,
+  Text,
+  Stack,
+  useToast,
+} from '@chakra-ui/react'
+import { MoreButton } from 'components/dashboard/FolderContent/MoreButton'
+import { ImportFromFileMenuItem } from 'components/templates/ImportFileMenuItem'
+import { TemplateButton } from 'components/templates/TemplateButton'
 import { useUser } from 'contexts/UserContext'
+import { Typebot } from 'models'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
-import { createTypebot } from 'services/typebots'
+import { createTypebot, importTypebot } from 'services/typebots'
+import { generate } from 'short-uuid'
 
+export type TemplateProps = { name: string; emoji: string; fileName: string }
+const templates: TemplateProps[] = [
+  { name: 'Lead Generation', emoji: '🤝', fileName: 'lead-gen.json' },
+]
 export const TemplatesContent = () => {
   const { user } = useUser()
   const router = useRouter()
@@ -16,11 +33,19 @@ export const TemplatesContent = () => {
     title: 'An error occured',
   })
 
-  const handleCreateSubmit = async () => {
+  const handleCreateSubmit = async (typebot?: Typebot) => {
     if (!user) return
     setIsLoading(true)
-    const { error, data } = await createTypebot({
+    const folderId = router.query.folderId?.toString() ?? null
-      folderId: router.query.folderId?.toString() ?? null,
+    const { error, data } = typebot
+      ? await importTypebot({
+          ...typebot,
+          id: generate(),
+          ownerId: user.id,
+          folderId,
+        })
+      : await createTypebot({
+          folderId,
         })
     if (error) toast({ description: error.message })
     if (data) router.push(`/typebots/${data.id}/edit`)
@@ -28,8 +53,34 @@ export const TemplatesContent = () => {
   }
 
   return (
-    <Button ml={4} onClick={handleCreateSubmit} isLoading={isLoading}>
+    <Flex w="full" justifyContent="center">
+      <Stack maxW="1000px" flex="1" pt="6" spacing={4}>
+        <Flex justifyContent="space-between">
+          <Button
+            onClick={() => handleCreateSubmit()}
+            isLoading={isLoading}
+            colorScheme="blue"
+          >
             Start from scratch
           </Button>
+          <MoreButton>
+            <ImportFromFileMenuItem onNewTypebot={handleCreateSubmit}>
+              Import from file
+            </ImportFromFileMenuItem>
+          </MoreButton>
+        </Flex>
+        <Divider />
+        <Text>Or start from a template</Text>
+        <SimpleGrid columns={2} spacing={4}>
+          {templates.map((template) => (
+            <TemplateButton
+              key={template.name}
+              onClick={handleCreateSubmit}
+              template={template}
+            />
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </Flex>
   )
 }

apps/builder/pages/api/typebots.ts

@@ -26,10 +26,13 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     if (req.method === 'POST') {
       const data = JSON.parse(req.body)
       const typebot = await prisma.typebot.create({
-        data: parseNewTypebot({
+        data:
+          'blocks' in data
+            ? data
+            : (parseNewTypebot({
                 ownerId: user.id,
                 ...data,
-        }) as Prisma.TypebotUncheckedCreateInput,
+              }) as Prisma.TypebotUncheckedCreateInput),
       })
       return res.send(typebot)
     }

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

@@ -0,0 +1,29 @@
+import test, { expect } from '@playwright/test'
+import path from 'path'
+import { typebotViewer } from '../services/selectorUtils'
+
+test.describe.parallel('Templates page', () => {
+  test('From scratch should create a blank typebot', async ({ page }) => {
+    await page.goto('/typebots/create')
+    await page.click('text=Start from scratch')
+    await expect(page).toHaveURL(new RegExp(`/edit`))
+  })
+
+  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')
+    )
+    await expect(page).toHaveURL(new RegExp(`/edit`))
+  })
+
+  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=Use this template')
+    await expect(page).toHaveURL(new RegExp(`/edit`))
+  })
+})

apps/builder/services/typebots.ts

@@ -84,6 +84,13 @@ export const createTypebot = async ({
   })
 }
 
+export const importTypebot = async (typebot: Typebot) =>
+  sendRequest<Typebot>({
+    url: `/api/typebots`,
+    method: 'POST',
+    body: typebot,
+  })
+
 export const duplicateTypebot = async ({
   folderId,
   ownerId,

apps/builder/services/utils/utils.ts

@@ -117,3 +117,14 @@ export const setMultipleRefs =
   (refs: React.MutableRefObject<HTMLDivElement | null>[]) =>
   (elem: HTMLDivElement) =>
     refs.forEach((ref) => (ref.current = elem))
+
+export const readFile = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader()
+    fr.onload = () => {
+      fr.result && resolve(fr.result.toString())
+    }
+    fr.onerror = reject
+    fr.readAsText(file)
+  })
+}

packages/utils/src/utils.ts

@@ -16,22 +16,28 @@ import {
   StepType,
   StepWithOptionsType,
   PublicStep,
+  ImageBubbleStep,
+  VideoBubbleStep,
 } from 'models'
 
-export const sendRequest = async <ResponseData>({
+export const sendRequest = async <ResponseData>(
-  url,
+  params:
-  method,
+    | {
-  body,
-}: {
         url: string
         method: string
         body?: Record<string, unknown>
-}): Promise<{ data?: ResponseData; error?: Error }> => {
+      }
+    | string
+): Promise<{ data?: ResponseData; error?: Error }> => {
   try {
+    const url = typeof params === 'string' ? params : params.url
     const response = await fetch(url, {
-      method,
+      method: typeof params === 'string' ? 'GET' : params.method,
       mode: 'cors',
-      body: body ? JSON.stringify(body) : undefined,
+      body:
+        typeof params !== 'string' && isDefined(params.body)
+          ? JSON.stringify(params.body)
+          : undefined,
     })
     if (!response.ok) throw new Error(response.statusText)
     const data = await response.json()
@@ -63,6 +69,11 @@ export const isTextBubbleStep = (
   step: Step | PublicStep
 ): step is TextBubbleStep => step.type === BubbleStepType.TEXT
 
+export const isMediaBubbleStep = (
+  step: Step
+): step is ImageBubbleStep | VideoBubbleStep =>
+  step.type === BubbleStepType.IMAGE || step.type === BubbleStepType.VIDEO
+
 export const isTextInputStep = (
   step: Step | PublicStep
 ): step is TextInputStep => step.type === InputStepType.TEXT