feat(inputs): ✨ Add Date input

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

@@ -1,4 +1,5 @@
 import {
+  CalendarIcon,
   ChatIcon,
   EmailIcon,
   FlagIcon,
@@ -28,6 +29,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
     case InputStepType.URL: {
       return <GlobeIcon />
     }
+    case InputStepType.DATE: {
+      return <CalendarIcon />
+    }
     case 'start': {
       return <FlagIcon />
     }

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

@@ -19,6 +19,9 @@ export const StepTypeLabel = ({ type }: Props) => {
     case InputStepType.URL: {
       return <Text>Website</Text>
     }
+    case InputStepType.DATE: {
+      return <Text>Date</Text>
+    }
     default: {
       return <></>
     }

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

@@ -1,10 +1,13 @@
 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 {
-import { NumberInputSettingsBody } from './NumberInputSettingsBody'
+  TextInputSettingsBody,
-import { TextInputSettingsBody } from './TextInputSettingsBody'
+  NumberInputSettingsBody,
-import { UrlInputSettingsBody } from './UrlInputSettingsBody'
+  EmailInputSettingsBody,
+  UrlInputSettingsBody,
+  DateInputSettingsBody,
+} from './bodies'
 
 type Props = {
   step: Step
@@ -60,6 +63,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
         />
       )
     }
+    case InputStepType.DATE: {
+      return (
+        <DateInputSettingsBody
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     default: {
       return <></>
     }

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

@@ -0,0 +1,80 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { DateInputOptions } from 'models'
+import React from 'react'
+
+type DateInputSettingsBodyProps = {
+  options?: DateInputOptions
+  onOptionsChange: (options: DateInputOptions) => void
+}
+
+export const DateInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: DateInputSettingsBodyProps) => {
+  const handleFromChange = (from: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, from } })
+  const handleToChange = (to: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, to } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+  const handleIsRangeChange = (isRange: boolean) =>
+    onOptionsChange({ ...options, isRange })
+  const handleHasTimeChange = (hasTime: boolean) =>
+    onOptionsChange({ ...options, hasTime })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        id="is-range"
+        label={'Is range?'}
+        initialValue={options?.isRange ?? false}
+        onCheckChange={handleIsRangeChange}
+      />
+      <SwitchWithLabel
+        id="with-time"
+        label={'With time?'}
+        initialValue={options?.isRange ?? false}
+        onCheckChange={handleHasTimeChange}
+      />
+      {options?.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="from">
+            From label:
+          </FormLabel>
+          <DebouncedInput
+            id="from"
+            initialValue={options?.labels?.from ?? 'From:'}
+            delay={100}
+            onChange={handleFromChange}
+          />
+        </Stack>
+      )}
+      {options?.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="to">
+            To label:
+          </FormLabel>
+          <DebouncedInput
+            id="to"
+            initialValue={options?.labels?.to ?? 'To:'}
+            delay={100}
+            onChange={handleToChange}
+          />
+        </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/bodies/index.ts

@@ -0,0 +1,5 @@
+export * from './DateInputSettingsBody'
+export * from './EmailInputSettingsBody'
+export * from './NumberInputSettingsBody'
+export * from './TextInputSettingsBody'
+export * from './UrlInputSettingsBody'

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

@@ -46,6 +46,13 @@ export const StepNodeLabel = (props: Step | StartStep) => {
         </Text>
       )
     }
+    case InputStepType.DATE: {
+      return (
+        <Text color={'gray.500'}>
+          {props.options?.labels?.from ?? 'Pick a date...'}
+        </Text>
+      )
+    }
     case 'start': {
       return <Text>{props.label}</Text>
     }

apps/builder/components/shared/SwitchWithLabel.tsx

@@ -2,12 +2,14 @@ import { FormLabel, HStack, Switch, SwitchProps } from '@chakra-ui/react'
 import React, { useState } from 'react'
 
 type SwitchWithLabelProps = {
+  id: string
   label: string
   initialValue: boolean
   onCheckChange: (isChecked: boolean) => void
 } & SwitchProps
 
 export const SwitchWithLabel = ({
+  id,
   label,
   initialValue,
   onCheckChange,
@@ -21,10 +23,15 @@ export const SwitchWithLabel = ({
   }
   return (
     <HStack justifyContent="space-between">
-      <FormLabel htmlFor={props.id} mb="0">
+      <FormLabel htmlFor={id} mb="0">
         {label}
       </FormLabel>
-      <Switch isChecked={isChecked} onChange={handleChange} {...props} />
+      <Switch
+        isChecked={isChecked}
+        onChange={handleChange}
+        id={id}
+        {...props}
+      />
     </HStack>
   )
 }

apps/builder/cypress/tests/inputs.ts

@@ -137,6 +137,41 @@ describe('URL input', () => {
   })
 })
 
+describe('Date input', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    createTypebotWithStep({ type: InputStepType.DATE })
+    cy.signOut()
+  })
+
+  it.only('options should work', () => {
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot3/edit')
+    cy.findByRole('button', { name: 'Preview' }).click()
+    getIframeBody()
+      .findByTestId('from-date')
+      .should('have.attr', 'type')
+      .should('eq', 'date')
+    getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
+    cy.findByTestId('step-step1').click({ force: true })
+    cy.findByRole('checkbox', { name: 'Is range?' }).check({ force: true })
+    cy.findByRole('textbox', { name: 'From label:' }).clear().type('Previous:')
+    cy.findByRole('textbox', { name: 'To label:' }).clear().type('After:')
+    cy.findByRole('checkbox', { name: 'With time?' }).check({ force: true })
+    cy.findByRole('textbox', { name: 'Button label:' }).clear().type('Go')
+    cy.findByRole('button', { name: 'Restart' }).click()
+    getIframeBody()
+      .findByTestId('from-date')
+      .should('have.attr', 'type')
+      .should('eq', 'datetime-local')
+    getIframeBody()
+      .findByTestId('to-date')
+      .should('have.attr', 'type')
+      .should('eq', 'datetime-local')
+    getIframeBody().findByRole('button', { name: 'Go' })
+  })
+})
+
 const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
   cy.task(
     'createTypebot',

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

@@ -6,6 +6,7 @@ import { GuestBubble } from './bubbles/GuestBubble'
 import { HostMessageBubble } from './bubbles/HostMessageBubble'
 import { TextForm } from './inputs/TextForm'
 import { isInputStep, isTextBubbleStep } from 'utils'
+import { DateForm } from './inputs/DateForm'
 
 export const ChatStep = ({
   step,
@@ -56,5 +57,7 @@ const InputChatStep = ({
     case InputStepType.EMAIL:
     case InputStepType.URL:
       return <TextForm step={step} onSubmit={handleSubmit} />
+    case InputStepType.DATE:
+      return <DateForm options={step.options} onSubmit={handleSubmit} />
   }
 }

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

@@ -0,0 +1,70 @@
+import { DateInputOptions } from 'models'
+import React, { useState } from 'react'
+import { SendButton } from './SendButton'
+
+type DateInputProps = {
+  onSubmit: (inputValue: `${string} to ${string}` | string) => void
+  options?: DateInputOptions
+}
+
+export const DateForm = ({
+  onSubmit,
+  options,
+}: DateInputProps): JSX.Element => {
+  const { hasTime, isRange, labels } = options ?? {}
+  const [inputValues, setInputValues] = useState({ from: '', to: '' })
+  return (
+    <div className="flex flex-col w-full lg:w-4/6">
+      <div className="flex items-center">
+        <form
+          className={
+            'flex justify-between rounded-lg typebot-input pr-2 items-end'
+          }
+          onSubmit={(e) => {
+            if (inputValues.from === '' && inputValues.to === '') return
+            e.preventDefault()
+            onSubmit(
+              `${inputValues.from}${isRange ? ` to ${inputValues.to}` : ''}`
+            )
+          }}
+        >
+          <div className="flex flex-col">
+            <div className={'flex items-center p-4 ' + (isRange ? 'pb-0' : '')}>
+              {isRange && (
+                <p className="font-semibold mr-2">{labels?.from ?? 'From:'}</p>
+              )}
+              <input
+                className="focus:outline-none bg-transparent flex-1 w-full comp-input"
+                type={hasTime ? 'datetime-local' : 'date'}
+                onChange={(e) =>
+                  setInputValues({ ...inputValues, from: e.target.value })
+                }
+                data-testid="from-date"
+              />
+            </div>
+            {isRange && (
+              <div className="flex items-center p-4">
+                {isRange && (
+                  <p className="font-semibold">{labels?.to ?? 'To:'}</p>
+                )}
+                <input
+                  className="focus:outline-none bg-transparent flex-1 w-full comp-input ml-2"
+                  type={hasTime ? 'datetime-local' : 'date'}
+                  onChange={(e) =>
+                    setInputValues({ ...inputValues, to: e.target.value })
+                  }
+                  data-testid="to-date"
+                />
+              </div>
+            )}
+          </div>
+
+          <SendButton
+            label={labels?.button ?? 'Send'}
+            isDisabled={inputValues.to === '' && inputValues.from === ''}
+          />
+        </form>
+      </div>
+    </div>
+  )
+}

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

@@ -1,57 +0,0 @@
-import { NumberInputStep, TextInputStep } from 'models'
-import React, { FormEvent, useRef, useState } from 'react'
-import { SendIcon } from '../../../../assets/icons'
-
-type NumberInputProps = {
-  step: NumberInputStep
-  onSubmit: (value: string) => void
-}
-
-export const NumberInput = ({ step, onSubmit }: NumberInputProps) => {
-  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}
-        >
-          <input
-            ref={inputRef}
-            className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
-            type="number"
-            placeholder={
-              step.options?.labels?.placeholder ?? 'Type your answer...'
-            }
-            onChange={(e) => setInputValue(e.target.value)}
-            style={{ appearance: 'auto' }}
-            min={step.options?.min}
-            max={step.options?.max}
-            step={step.options?.step}
-            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/bot-engine/src/components/ChatBlock/ChatStep/inputs/SendButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { SendIcon } from '../../../../assets/icons'
+
+type SendButtonProps = {
+  label: string
+  isDisabled: boolean
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+export const SendButton = ({
+  label,
+  isDisabled,
+  ...props
+}: SendButtonProps) => {
+  return (
+    <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={isDisabled}
+      {...props}
+    >
+      <span className="hidden xs:flex">{label}</span>
+      <SendIcon className="send-icon flex xs:hidden" />
+    </button>
+  )
+}

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

@@ -5,7 +5,7 @@ import {
   UrlInputStep,
 } from 'models'
 import React, { FormEvent, useState } from 'react'
-import { SendIcon } from '../../../../../assets/icons'
+import { SendButton } from '../SendButton'
 import { TextInput } from './TextInputContent'
 
 type TextFormProps = {
@@ -32,18 +32,10 @@ export const TextForm = ({ step, onSubmit }: TextFormProps) => {
           onSubmit={handleSubmit}
         >
           <TextInput step={step} onChange={handleChange} />
-          <button
+          <SendButton
-            type="submit"
+            label={step.options?.labels?.button ?? 'Send'}
-            className={
+            isDisabled={inputValue === ''}
-              '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/index.ts

@@ -0,0 +1,2 @@
+export * from './steps'
+export * from './inputs'

packages/models/src/typebot/steps/inputs.ts

@@ -1,36 +1,18 @@
-export type Step = StartStep | BubbleStep | InputStep
+import { StepBase } from './steps'
-
-export type BubbleStep = TextStep
 
 export type InputStep =
   | TextInputStep
   | NumberInputStep
   | EmailInputStep
   | UrlInputStep
-
+  | DateInputStep
-export type StepType = 'start' | BubbleStepType | InputStepType
-
-export enum BubbleStepType {
-  TEXT = 'text',
-}
 
 export enum InputStepType {
   TEXT = 'text input',
   NUMBER = 'number input',
   EMAIL = 'email input',
   URL = 'url input',
-}
+  DATE = 'date input',
-
-export type StepBase = { id: string; blockId: string; target?: Target }
-
-export type StartStep = StepBase & {
-  type: 'start'
-  label: string
-}
-
-export type TextStep = StepBase & {
-  type: BubbleStepType.TEXT
-  content: { html: string; richText: unknown[]; plainText: string }
 }
 
 export type TextInputStep = StepBase & {
@@ -53,6 +35,17 @@ export type UrlInputStep = StepBase & {
   options?: UrlInputOptions
 }
 
+export type DateInputStep = StepBase & {
+  type: InputStepType.DATE
+  options?: DateInputOptions
+}
+
+export type DateInputOptions = {
+  labels?: { button?: string; from?: string; to?: string }
+  hasTime?: boolean
+  isRange?: boolean
+}
+
 export type EmailInputOptions = InputOptionsBase
 
 export type UrlInputOptions = InputOptionsBase
@@ -70,5 +63,3 @@ export type NumberInputOptions = InputOptionsBase & {
   max?: number
   step?: number
 }
-
-export type Target = { blockId: string; stepId?: string }

packages/models/src/typebot/steps/steps.ts

@@ -0,0 +1,25 @@
+import { InputStep, InputStepType } from './inputs'
+
+export type Step = StartStep | BubbleStep | InputStep
+
+export type BubbleStep = TextStep
+
+export type StepType = 'start' | BubbleStepType | InputStepType
+
+export enum BubbleStepType {
+  TEXT = 'text',
+}
+
+export type StepBase = { id: string; blockId: string; target?: Target }
+
+export type StartStep = StepBase & {
+  type: 'start'
+  label: string
+}
+
+export type TextStep = StepBase & {
+  type: BubbleStepType.TEXT
+  content: { html: string; richText: unknown[]; plainText: string }
+}
+
+export type Target = { blockId: string; stepId?: string }

packages/models/src/typebot/typebot.ts

@@ -1,7 +1,7 @@
 import { Typebot as TypebotFromPrisma } from 'db'
 import { Table } from '../utils'
 import { Settings } from './settings'
-import { Step } from './steps'
+import { Step } from './steps/steps'
 import { Theme } from './theme'
 
 export type Typebot = Omit<