blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add Phone number input

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-10 10:43:27 +01:00
parent 8cba7ff37b
commit b20bcb1408
19 changed files with 218 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/builder/assets/icons.tsx
View File

@@ -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>
)

4
apps/builder/components/board/StepTypesList/StepIcon.tsx
View File

@@ -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 />
}

3
apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
View File

@@ -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 <></>
}

9
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
View File

@@ -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 <></>
}

46
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx Normal file
View File

@@ -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>
)
}

7
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeLabel.tsx
View File

@@ -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>
}

37
apps/builder/cypress/tests/inputs.ts
View File

@@ -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',

3
packages/bot-engine/package.json
View File

@@ -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",

2
packages/bot-engine/rollup.config.js
View File

@@ -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({

4
packages/bot-engine/src/assets/style.css
View File

@@ -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 */

1
packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx
View File

@@ -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} />

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

@@ -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
}

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

@@ -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...'
}
/>
)
}
}
}

9
packages/bot-engine/src/components/TypebotViewer.tsx
View File

@@ -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

1
packages/models/.gitignore vendored
View File

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

4
packages/models/package.json
View File

@@ -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"
}
}

7
packages/models/src/typebot/steps/inputs.ts
View File

@@ -6,6 +6,7 @@ export type InputStep =
| EmailInputStep
| UrlInputStep
| DateInputStep
| PhoneNumberInputStep
export enum InputStepType {
TEXT = 'text input',
@@ -13,6 +14,7 @@ export enum InputStepType {
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

2
packages/models/tsconfig.json
View File

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

49
yarn.lock
View File

@@ -1241,6 +1241,13 @@
magic-string "^0.25.7"
resolve "^1.17.0"
"@rollup/plugin-json@^4.1.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==
dependencies:
"@rollup/pluginutils" "^3.0.8"
"@rollup/plugin-node-resolve@^13.1.3":
version "13.1.3"
resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.1.3.tgz#2ed277fb3ad98745424c1d2ba152484508a92d79"
@@ -1261,7 +1268,7 @@
"@rollup/pluginutils" "^3.1.0"
resolve "^1.17.0"
"@rollup/pluginutils@^3.1.0":
"@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@@ -1483,6 +1490,13 @@
resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
"@types/react-phone-number-input@^3.0.13":
version "3.0.13"
resolved "https://registry.yarnpkg.com/@types/react-phone-number-input/-/react-phone-number-input-3.0.13.tgz#4eb7dcd278dcf9eb2a8d2ce2cb304657cbf1b4e5"
integrity sha512-27k7AvLbzCjpuRORFhehFdRHVan1q6RhSTV7dFiXwZ2ojnS/JMx77wd9OyAU464oN0GIlkfhc0njGzL97/xNcw==
dependencies:
"@types/react" "*"
"@types/react-scroll@^1.8.3":
version "1.8.3"
resolved "https://registry.yarnpkg.com/@types/react-scroll/-/react-scroll-1.8.3.tgz#80951ed1934ab49d4926aad95c26607b8b1a9713"
@@ -2454,6 +2468,11 @@ classnames@2.2.6:
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
classnames@^2.2.5:
version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
clean-stack@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2670,6 +2689,11 @@ cosmiconfig@^7.0.1:
path-type "^4.0.0"
yaml "^1.10.0"
country-flag-icons@^1.0.2:
version "1.4.19"
resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.4.19.tgz#410879a4a1b06ab28d4fc56261b391f221eba957"
integrity sha512-1hmXFJ4UURQt0Ex0990B7oOL4n9KLpT9NOSEmZoYh+/5DQ7/pikyqaptqCLUFFv/bYHyvYFeo0fqV82XxU6VOA==
create-ecdh@^4.0.0:
version "4.0.4"
resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -4295,6 +4319,13 @@ inline-style-prefixer@^6.0.0:
dependencies:
css-in-js-utils "^2.0.0"
input-format@^0.3.6:
version "0.3.6"
resolved "https://registry.yarnpkg.com/input-format/-/input-format-0.3.6.tgz#b9b167dbd16435eb3c0012347964b230ea0024c8"
integrity sha512-SbUu43CDVV5GlC8Xi6NYBUoiU+tLpN/IMYyQl0mzSXDiU1w0ql8wpcwjDOFpaCVLySLoreLUimhI82IA5y42Pw==
dependencies:
prop-types "^15.7.2"
internal-slot@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -4702,6 +4733,11 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"
libphonenumber-js@^1.9.43:
version "1.9.44"
resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.9.44.tgz#d036364fe4c1e27205d1d283c7bf8fc25625200b"
integrity sha512-zhw8nUMJuQf7jG1dZfEOKKOS6M3QYIv3HnvB/vGohNd0QfxIQcObH3a6Y6s350H+9xgBeOXClOJkS0hJ0yvS3g==
lilconfig@^2.0.3, lilconfig@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
@@ -6166,6 +6202,17 @@ react-is@^16.13.1, react-is@^16.7.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-phone-number-input@^3.1.44:
version "3.1.44"
resolved "https://registry.yarnpkg.com/react-phone-number-input/-/react-phone-number-input-3.1.44.tgz#c730abd5a42e9941b138cd8d0aca6c2cfa12b2fa"
integrity sha512-+Tk+iJzImAt3s6NN2Btn4o3DSL6d1gcfoG+Wdnh9m9VMysgPrT+AGimvDobojEjYOS6nPiFqJdhFNwGMIlppVA==
dependencies:
classnames "^2.2.5"
country-flag-icons "^1.0.2"
input-format "^0.3.6"
libphonenumber-js "^1.9.43"
prop-types "^15.7.2"
react-popper@2.2.5, react-popper@^2.2.4:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"