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/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 />
-        <ModalCloseButton />
+        <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) => (
-  <Text color={'gray.500'}>{placeholder}</Text>
+export const PlaceholderContent = ({ placeholder, isLong }: Props) => (
+  <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) => (
-  <SearchContextManager
-    apiKey={process.env.NEXT_PUBLIC_GIPHY_API_KEY as string}
-  >
-    <GiphySearch onSubmit={onNewUrl} />
-  </SearchContextManager>
-)
+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}
+        />
+      )}
+    </>
+  )
+}