feat(inputs): ✨ Add email input

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -1,4 +1,10 @@
-import { ChatIcon, FlagIcon, NumberIcon, TextIcon } from 'assets/icons'
+import {
+  ChatIcon,
+  EmailIcon,
+  FlagIcon,
+  NumberIcon,
+  TextIcon,
+} from 'assets/icons'
 import { BubbleStepType, InputStepType, StepType } from 'models'
 import React from 'react'
 
@@ -15,6 +21,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
     case InputStepType.NUMBER: {
       return <NumberIcon />
     }
+    case InputStepType.EMAIL: {
+      return <EmailIcon />
+    }
     case 'start': {
       return <FlagIcon />
     }

apps/builder/components/board/StepTypesList/StepTypeLabel.tsx

@@ -13,6 +13,9 @@ export const StepTypeLabel = ({ type }: Props) => {
     case InputStepType.NUMBER: {
       return <Text>Number</Text>
     }
+    case InputStepType.EMAIL: {
+      return <Text>Email</Text>
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/EmailInputSettingsBody.tsx

@@ -0,0 +1,46 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { EmailInputOptions } from 'models'
+import React from 'react'
+
+type EmailInputSettingsBodyProps = {
+  options?: EmailInputOptions
+  onOptionsChange: (options: EmailInputOptions) => void
+}
+
+export const EmailInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: EmailInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options?.labels?.placeholder ?? 'Type your email...'}
+          delay={100}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options?.labels?.button ?? 'Send'}
+          delay={100}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -1,6 +1,7 @@
 import { PopoverContent, PopoverArrow, PopoverBody } from '@chakra-ui/react'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { InputStepType, Step, TextInputOptions } from 'models'
+import { EmailInputSettingsBody } from './EmailInputSettingsBody'
 import { NumberInputSettingsBody } from './NumberInputSettingsBody'
 import { TextInputSettingsBody } from './TextInputSettingsBody'
 
@@ -42,6 +43,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
         />
       )
     }
+    case InputStepType.EMAIL: {
+      return (
+        <EmailInputSettingsBody
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeLabel.tsx

@@ -32,6 +32,13 @@ export const StepNodeLabel = (props: Step | StartStep) => {
         </Text>
       )
     }
+    case InputStepType.EMAIL: {
+      return (
+        <Text color={'gray.500'}>
+          {props.options?.labels?.placeholder ?? 'Type your email...'}
+        </Text>
+      )
+    }
     case 'start': {
       return <Text>{props.label}</Text>
     }