feat(dashboard): ✨ Add lead generation template

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

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}
+        />
+      )}
+    </>
+  )
+}