feat(inputs): ✨ Add Phone number input

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

@@ -56,6 +56,7 @@ const InputChatStep = ({
     case InputStepType.NUMBER:
     case InputStepType.EMAIL:
     case InputStepType.URL:
+    case InputStepType.PHONE:
       return <TextForm step={step} onSubmit={handleSubmit} />
     case InputStepType.DATE:
       return <DateForm options={step.options} onSubmit={handleSubmit} />

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

@@ -1,6 +1,7 @@
 import {
   EmailInputStep,
   NumberInputStep,
+  PhoneNumberInputStep,
   TextInputStep,
   UrlInputStep,
 } from 'models'
@@ -9,7 +10,12 @@ import { SendButton } from '../SendButton'
 import { TextInput } from './TextInputContent'
 
 type TextFormProps = {
-  step: TextInputStep | EmailInputStep | NumberInputStep | UrlInputStep
+  step:
+    | TextInputStep
+    | EmailInputStep
+    | NumberInputStep
+    | UrlInputStep
+    | PhoneNumberInputStep
   onSubmit: (value: string) => void
 }
 

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

@@ -4,6 +4,7 @@ import {
   NumberInputStep,
   InputStepType,
   UrlInputStep,
+  PhoneNumberInputStep,
 } from 'models'
 import React, {
   ChangeEvent,
@@ -12,14 +13,20 @@ import React, {
   useEffect,
   useRef,
 } from 'react'
+import PhoneInput, { Value } from 'react-phone-number-input'
 
 type TextInputProps = {
-  step: TextInputStep | EmailInputStep | NumberInputStep | UrlInputStep
+  step:
+    | TextInputStep
+    | EmailInputStep
+    | NumberInputStep
+    | UrlInputStep
+    | PhoneNumberInputStep
   onChange: (value: string) => void
 }
 
 export const TextInput = ({ step, onChange }: TextInputProps) => {
-  const inputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<any>(null)
 
   useEffect(() => {
     if (!inputRef.current) return
@@ -30,6 +37,10 @@ export const TextInput = ({ step, onChange }: TextInputProps) => {
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => onChange(e.target.value)
 
+  const handlePhoneNumberChange = (value?: Value | undefined) => {
+    onChange(value as string)
+  }
+
   switch (step.type) {
     case InputStepType.TEXT: {
       return step.options?.isLong ? (
@@ -88,6 +99,17 @@ export const TextInput = ({ step, onChange }: TextInputProps) => {
         />
       )
     }
+    case InputStepType.PHONE: {
+      return (
+        <PhoneInput
+          ref={inputRef}
+          onChange={handlePhoneNumberChange}
+          placeholder={
+            step.options?.labels?.placeholder ?? 'Your phone number...'
+          }
+        />
+      )
+    }
   }
 }
 

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -3,6 +3,8 @@ import { TypebotContext } from '../contexts/TypebotContext'
 import Frame from 'react-frame-component'
 //@ts-ignore
 import style from '../assets/style.css'
+//@ts-ignore
+import phoneNumberInputStyle from 'react-phone-number-input/style.css'
 import { ConversationContainer } from './ConversationContainer'
 import { AnswersContext } from '../contexts/AnswersContext'
 import { Answer, BackgroundType, PublicTypebot } from 'models'
@@ -39,7 +41,12 @@ export const TypebotViewer = ({
   return (
     <Frame
       id="typebot-iframe"
-      head={<style>{style}</style>}
+      head={
+        <style>
+          {phoneNumberInputStyle}
+          {style}
+        </style>
+      }
       style={{ width: '100%', height: '100%', border: 'none' }}
     >
       <style