feat(inputs): ✨ Add Phone number input

apps/builder/assets/icons.tsx

@@ -224,3 +224,9 @@ export const EmailIcon = (props: IconProps) => (
     <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
   </Icon>
 )
+
+export const PhoneIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+  </Icon>
+)

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

@@ -5,6 +5,7 @@ import {
   FlagIcon,
   GlobeIcon,
   NumberIcon,
+  PhoneIcon,
   TextIcon,
 } from 'assets/icons'
 import { BubbleStepType, InputStepType, StepType } from 'models'
@@ -32,6 +33,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
     case InputStepType.DATE: {
       return <CalendarIcon />
     }
+    case InputStepType.PHONE: {
+      return <PhoneIcon />
+    }
     case 'start': {
       return <FlagIcon />
     }

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

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

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

@@ -8,6 +8,7 @@ import {
   UrlInputSettingsBody,
   DateInputSettingsBody,
 } from './bodies'
+import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
 
 type Props = {
   step: Step
@@ -71,6 +72,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
         />
       )
     }
+    case InputStepType.PHONE: {
+      return (
+        <PhoneNumberSettingsBody
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.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 PhoneNumberSettingsBodyProps = {
+  options?: EmailInputOptions
+  onOptionsChange: (options: EmailInputOptions) => void
+}
+
+export const PhoneNumberSettingsBody = ({
+  options,
+  onOptionsChange,
+}: PhoneNumberSettingsBodyProps) => {
+  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 ?? 'Your phone number...'}
+          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/StepNodeLabel.tsx

@@ -53,6 +53,13 @@ export const StepNodeLabel = (props: Step | StartStep) => {
         </Text>
       )
     }
+    case InputStepType.PHONE: {
+      return (
+        <Text color={'gray.500'}>
+          {props.options?.labels?.placeholder ?? 'Your phone number...'}
+        </Text>
+      )
+    }
     case 'start': {
       return <Text>{props.label}</Text>
     }

apps/builder/cypress/tests/inputs.ts

@@ -144,7 +144,7 @@ describe('Date 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()
@@ -172,6 +172,41 @@ describe('Date input', () => {
   })
 })
 
+describe('Phone number input', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.log(JSON.stringify({ type: InputStepType.PHONE }))
+    createTypebotWithStep({ type: InputStepType.PHONE })
+    cy.signOut()
+  })
+
+  it('options should work', () => {
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot3/edit')
+    cy.findByRole('button', { name: 'Preview' }).click()
+    getIframeBody()
+      .findByPlaceholderText('Your phone number...')
+      .should('have.attr', 'type')
+      .should('eq', 'tel')
+    getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
+    cy.findByTestId('step-step1').click({ force: true })
+    cy.findByRole('textbox', { name: 'Placeholder:' })
+      .clear()
+      .type('+33 XX XX XX XX')
+    cy.findByRole('textbox', { name: 'Button label:' }).clear().type('Go')
+    cy.findByRole('button', { name: 'Restart' }).click()
+    getIframeBody()
+      .findByPlaceholderText('+33 XX XX XX XX')
+      .type('+33 6 73 18 45 36')
+    getIframeBody()
+      .findByRole('img')
+      .should('have.attr', 'alt')
+      .should('eq', 'France')
+    getIframeBody().findByRole('button', { name: 'Go' }).click()
+    getIframeBody().findByText('+33673184536').should('exist')
+  })
+})
+
 const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
   cy.task(
     'createTypebot',

packages/bot-engine/package.json

@@ -10,15 +10,18 @@
     "fast-equals": "^2.0.4",
     "models": "*",
     "react-frame-component": "^5.2.1",
+    "react-phone-number-input": "^3.1.44",
     "react-scroll": "^1.8.4",
     "react-transition-group": "^4.4.2",
     "utils": "*"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
     "@types/react": "^17.0.38",
+    "@types/react-phone-number-input": "^3.0.13",
     "@types/react-scroll": "^1.8.3",
     "@types/react-transition-group": "^4.4.4",
     "autoprefixer": "^10.4.1",

packages/bot-engine/rollup.config.js

@@ -1,6 +1,7 @@
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import typescript from '@rollup/plugin-typescript'
+import json from '@rollup/plugin-json'
 import dts from 'rollup-plugin-dts'
 import postcss from 'rollup-plugin-postcss'
 import { terser } from 'rollup-plugin-terser'
@@ -28,6 +29,7 @@ export default [
     plugins: [
       peerDepsExternal(),
       resolve(),
+      json(),
       commonjs(),
       typescript({ tsconfig: './tsconfig.json' }),
       postcss({

packages/bot-engine/src/assets/style.css

@@ -38,6 +38,10 @@
   --typebot-header-border: none;
   --typebot-header-shadow: none;
   --typebot-header-max-width: 1000px;
+
+  /* Phone input */
+  --PhoneInputCountryFlag-borderColor: transparent;
+  --PhoneInput-color--focus: transparent;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */

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

packages/models/.gitignore

@@ -3,5 +3,4 @@ node_modules
 .env
 
 dist
-types
 yarn-error.log

packages/models/package.json

@@ -2,7 +2,7 @@
   "name": "models",
   "version": "1.0.0",
   "main": "dist/index.js",
-  "types": "types/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "devDependencies": {
@@ -14,6 +14,6 @@
   },
   "scripts": {
     "build": "tsc",
-    "dev": "tsc --watch"
+    "dev": "tsc --watch --preserveWatchOutput"
   }
 }

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

@@ -6,13 +6,15 @@ export type InputStep =
   | EmailInputStep
   | UrlInputStep
   | DateInputStep
+  | PhoneNumberInputStep
 
 export enum InputStepType {
   TEXT = 'text input',
   NUMBER = 'number input',
   EMAIL = 'email input',
   URL = 'url input',
   DATE = 'date input',
+  PHONE = 'phone number input',
 }
 
 export type TextInputStep = StepBase & {
@@ -40,6 +42,11 @@ export type DateInputStep = StepBase & {
   options?: DateInputOptions
 }
 
+export type PhoneNumberInputStep = StepBase & {
+  type: InputStepType.PHONE
+  options?: InputOptionsBase
+}
+
 export type DateInputOptions = {
   labels?: { button?: string; from?: string; to?: string }
   hasTime?: boolean

packages/models/tsconfig.json

@@ -7,7 +7,7 @@
     "strict": true,
     "skipLibCheck": true,
     "declaration": true,
-    "declarationDir": "./types",
+    "declarationDir": "./dist/types",
     "outDir": "./dist"
   }
 }