feat(inputs): ✨ Add email input

apps/builder/assets/icons.tsx

@@ -217,3 +217,10 @@ export const NumberIcon = (props: IconProps) => (
     <line x1="16" y1="3" x2="14" y2="21"></line>
   </Icon>
 )
+
+export const EmailIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <circle cx="12" cy="12" r="4"></circle>
+    <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
+  </Icon>
+)

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>
     }

apps/builder/cypress/tests/inputs.ts

@@ -13,7 +13,7 @@ describe('Text input', () => {
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody().findByPlaceholderText('Type your answer...').should('exist')
-    getIframeBody().findByRole('button', { name: 'Send' })
+    getIframeBody().findByRole('button', { name: 'Send' }).should('exist')
     cy.findByTestId('step-step1').click({ force: true })
     cy.findByRole('textbox', { name: 'Placeholder:' })
       .clear()
@@ -37,12 +37,12 @@ describe('Number input', () => {
     cy.signOut()
   })
 
-  it.only('options should work', () => {
+  it('options should work', () => {
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
     getIframeBody().findByPlaceholderText('Type your answer...').should('exist')
-    getIframeBody().findByRole('button', { name: 'Send' })
+    getIframeBody().findByRole('button', { name: 'Send' }).should('exist')
     cy.findByTestId('step-step1').click({ force: true })
     cy.findByRole('textbox', { name: 'Placeholder:' })
       .clear()
@@ -64,6 +64,31 @@ describe('Number input', () => {
   })
 })
 
+describe('Email input', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    createTypebotWithStep({ type: InputStepType.EMAIL })
+    cy.signOut()
+  })
+
+  it.only('options should work', () => {
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot3/edit')
+    cy.findByRole('button', { name: 'Preview' }).click()
+    getIframeBody().findByPlaceholderText('Type your email...').should('exist')
+    getIframeBody().findByRole('button', { name: 'Send' })
+    cy.findByTestId('step-step1').click({ force: true })
+    cy.findByRole('textbox', { name: 'Placeholder:' })
+      .clear()
+      .type('Your email...')
+    cy.findByRole('textbox', { name: 'Button label:' }).clear().type('Go')
+    cy.findByTestId('step-step1').should('contain.text', 'Your email...')
+    cy.findByRole('button', { name: 'Restart' }).click()
+    getIframeBody().findByPlaceholderText('Your email...').should('exist')
+    getIframeBody().findByRole('button', { name: 'Go' })
+  })
+})
+
 const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
   cy.task(
     'createTypebot',

packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx

@@ -4,9 +4,8 @@ import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
 import { InputStep, InputStepType, Step } from 'models'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { HostMessageBubble } from './bubbles/HostMessageBubble'
-import { TextInput } from './inputs/TextInput'
+import { TextForm } from './inputs/TextForm'
-import { isInputStep, isTextBubbleStep, isTextInputStep } from 'utils'
+import { isInputStep, isTextBubbleStep } from 'utils'
-import { NumberInput } from './inputs/NumberInput'
 
 export const ChatStep = ({
   step,
@@ -53,8 +52,8 @@ const InputChatStep = ({
   }
   switch (step.type) {
     case InputStepType.TEXT:
-      return <TextInput step={step} onSubmit={handleSubmit} />
     case InputStepType.NUMBER:
-      return <NumberInput step={step} onSubmit={handleSubmit} />
+    case InputStepType.EMAIL:
+      return <TextForm step={step} onSubmit={handleSubmit} />
   }
 }

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx

@@ -0,0 +1,46 @@
+import { EmailInputStep, NumberInputStep, TextInputStep } from 'models'
+import React, { FormEvent, useState } from 'react'
+import { SendIcon } from '../../../../../assets/icons'
+import { TextInput } from './TextInputContent'
+
+type TextFormProps = {
+  step: TextInputStep | EmailInputStep | NumberInputStep
+  onSubmit: (value: string) => void
+}
+
+export const TextForm = ({ step, onSubmit }: TextFormProps) => {
+  const [inputValue, setInputValue] = useState('')
+
+  const handleChange = (inputValue: string) => setInputValue(inputValue)
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (inputValue === '') return
+    onSubmit(inputValue)
+  }
+
+  return (
+    <div className="flex flex-col w-full lg:w-4/6">
+      <div className="flex items-center">
+        <form
+          className="flex items-end justify-between rounded-lg pr-2 typebot-input"
+          onSubmit={handleSubmit}
+        >
+          <TextInput step={step} onChange={handleChange} />
+          <button
+            type="submit"
+            className={
+              'my-2 ml-2 py-2 px-4 font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button active'
+            }
+            disabled={inputValue === ''}
+          >
+            <span className="hidden xs:flex">
+              {step.options?.labels?.button ?? 'Send'}
+            </span>
+            <SendIcon className="send-icon flex xs:hidden" />
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx

@@ -0,0 +1,112 @@
+import {
+  TextInputStep,
+  EmailInputStep,
+  NumberInputStep,
+  InputStepType,
+} from 'models'
+import React, {
+  ChangeEvent,
+  ChangeEventHandler,
+  RefObject,
+  useEffect,
+  useRef,
+} from 'react'
+
+type TextInputProps = {
+  step: TextInputStep | EmailInputStep | NumberInputStep
+  onChange: (value: string) => void
+}
+
+export const TextInput = ({ step, onChange }: TextInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (!inputRef.current) return
+    inputRef.current.focus()
+  }, [])
+
+  const handleInputChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => onChange(e.target.value)
+
+  switch (step.type) {
+    case InputStepType.TEXT: {
+      return step.options?.isLong ? (
+        <LongTextInput
+          ref={inputRef as unknown as RefObject<HTMLTextAreaElement>}
+          placeholder={
+            step.options?.labels?.placeholder ?? 'Type your answer...'
+          }
+          onChange={handleInputChange}
+        />
+      ) : (
+        <ShortTextInput
+          ref={inputRef}
+          placeholder={
+            step.options?.labels?.placeholder ?? 'Type your answer...'
+          }
+          onChange={handleInputChange}
+        />
+      )
+    }
+    case InputStepType.EMAIL: {
+      return (
+        <ShortTextInput
+          ref={inputRef}
+          placeholder={
+            step.options?.labels?.placeholder ?? 'Type your email...'
+          }
+          onChange={handleInputChange}
+          type="email"
+        />
+      )
+    }
+    case InputStepType.NUMBER: {
+      return (
+        <ShortTextInput
+          ref={inputRef}
+          placeholder={
+            step.options?.labels?.placeholder ?? 'Type your answer...'
+          }
+          onChange={handleInputChange}
+          type="number"
+          style={{ appearance: 'auto' }}
+          min={step.options?.min}
+          max={step.options?.max}
+          step={step.options?.step}
+        />
+      )
+    }
+  }
+}
+
+const ShortTextInput = React.forwardRef(
+  (
+    props: React.InputHTMLAttributes<HTMLInputElement>,
+    ref: React.ForwardedRef<HTMLInputElement>
+  ) => (
+    <input
+      ref={ref}
+      className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+      type="text"
+      required
+      {...props}
+    />
+  )
+)
+
+const LongTextInput = React.forwardRef(
+  (
+    props: { placeholder: string; onChange: ChangeEventHandler },
+    ref: React.ForwardedRef<HTMLTextAreaElement>
+  ) => (
+    <textarea
+      ref={ref}
+      className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+      rows={4}
+      data-testid="textarea"
+      required
+      {...props}
+    />
+  )
+)

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/index.tsx

@@ -0,0 +1 @@
+export { TextForm } from './TextForm'

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextInput.tsx

@@ -1,67 +0,0 @@
-import { TextInputStep } from 'models'
-import React, { FormEvent, useRef, useState } from 'react'
-import { SendIcon } from '../../../../assets/icons'
-
-type TextInputProps = {
-  step: TextInputStep
-  onSubmit: (value: string) => void
-}
-
-export const TextInput = ({ step, onSubmit }: TextInputProps) => {
-  const inputRef = useRef(null)
-  const [inputValue, setInputValue] = useState('')
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
-    if (inputValue === '') return
-    onSubmit(inputValue)
-  }
-
-  return (
-    <div className="flex flex-col w-full lg:w-4/6">
-      <div className="flex items-center">
-        <form
-          className="flex items-end justify-between rounded-lg pr-2 typebot-input"
-          onSubmit={handleSubmit}
-        >
-          {step.options?.isLong ? (
-            <textarea
-              ref={inputRef}
-              className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
-              placeholder={
-                step.options?.labels?.placeholder ?? 'Type your answer...'
-              }
-              onChange={(e) => setInputValue(e.target.value)}
-              rows={4}
-              data-testid="textarea"
-              required
-            />
-          ) : (
-            <input
-              ref={inputRef}
-              className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
-              type="text"
-              placeholder={
-                step.options?.labels?.placeholder ?? 'Type your answer...'
-              }
-              onChange={(e) => setInputValue(e.target.value)}
-              required
-            />
-          )}
-          <button
-            type="submit"
-            className={
-              'my-2 ml-2 py-2 px-4 font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button active'
-            }
-            disabled={inputValue === ''}
-          >
-            <span className="hidden xs:flex">
-              {step.options?.labels?.button ?? 'Send'}
-            </span>
-            <SendIcon className="send-icon flex xs:hidden" />
-          </button>
-        </form>
-      </div>
-    </div>
-  )
-}

packages/models/src/typebot/steps.ts

@@ -2,7 +2,7 @@ export type Step = StartStep | BubbleStep | InputStep
 
 export type BubbleStep = TextStep
 
-export type InputStep = TextInputStep | NumberInputStep
+export type InputStep = TextInputStep | NumberInputStep | EmailInputStep
 
 export type StepType = 'start' | BubbleStepType | InputStepType
 
@@ -13,6 +13,7 @@ export enum BubbleStepType {
 export enum InputStepType {
   TEXT = 'text input',
   NUMBER = 'number input',
+  EMAIL = 'email input',
 }
 
 export type StepBase = { id: string; blockId: string; target?: Target }
@@ -37,6 +38,13 @@ export type NumberInputStep = StepBase & {
   options?: NumberInputOptions
 }
 
+export type EmailInputStep = StepBase & {
+  type: InputStepType.EMAIL
+  options?: EmailInputOptions
+}
+
+export type EmailInputOptions = InputOptionsBase
+
 type InputOptionsBase = {
   labels?: { placeholder?: string; button?: string }
 }