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