feat(inputs): ✨ Add Date input

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
-            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>
+          <SendButton
+            label={step.options?.labels?.button ?? 'Send'}
+            isDisabled={inputValue === ''}
+          />
         </form>
       </div>
     </div>