feat(inputs): ✨ Add email input

2022-01-08 08:20:54 +01:00
parent d54ebc0cbe
commit 47162cb28a
13 changed files with 282 additions and 77 deletions
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx
+++ b/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 { isInputStep, isTextBubbleStep, isTextInputStep } from 'utils'
-import { NumberInput } from './inputs/NumberInput'
+import { TextForm } from './inputs/TextForm'
+import { isInputStep, isTextBubbleStep } from 'utils'

 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} />
  }
 }
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx
+++ b/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>
+  )
+}
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx
+++ b/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}
+    />
+  )
+)
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/index.tsx
+++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/index.tsx
@ -0,0 +1 @@
+export { TextForm } from './TextForm'
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextInput.tsx
+++ b/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>
-  )
-}