blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add email input

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-08 08:20:54 +01:00
parent d54ebc0cbe
commit 47162cb28a
13 changed files with 282 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -217,3 +217,10 @@ export const NumberIcon = (props: IconProps) => (
<line x1="16" y1="3" x2="14" y2="21"></line>
</Icon>
)
export const EmailIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<circle cx="12" cy="12" r="4"></circle>
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
</Icon>
)

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

@ -1,4 +1,10 @@
import { ChatIcon, FlagIcon, NumberIcon, TextIcon } from 'assets/icons'
import {
ChatIcon,
EmailIcon,
FlagIcon,
NumberIcon,
TextIcon,
} from 'assets/icons'
import { BubbleStepType, InputStepType, StepType } from 'models'
import React from 'react'
@ -15,6 +21,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
case InputStepType.NUMBER: {
return <NumberIcon />
}
case InputStepType.EMAIL: {
return <EmailIcon />
}
case 'start': {
return <FlagIcon />
}

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

@ -13,6 +13,9 @@ export const StepTypeLabel = ({ type }: Props) => {
case InputStepType.NUMBER: {
return <Text>Number</Text>
}
case InputStepType.EMAIL: {
return <Text>Email</Text>
}
default: {
return <></>
}

46
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/EmailInputSettingsBody.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 EmailInputSettingsBodyProps = {
options?: EmailInputOptions
onOptionsChange: (options: EmailInputOptions) => void
}
export const EmailInputSettingsBody = ({
options,
onOptionsChange,
}: EmailInputSettingsBodyProps) => {
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 ?? 'Type your email...'}
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>
)
}

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

@ -1,6 +1,7 @@
import { PopoverContent, PopoverArrow, PopoverBody } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { InputStepType, Step, TextInputOptions } from 'models'
import { EmailInputSettingsBody } from './EmailInputSettingsBody'
import { NumberInputSettingsBody } from './NumberInputSettingsBody'
import { TextInputSettingsBody } from './TextInputSettingsBody'
@ -42,6 +43,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
/>
)
}
case InputStepType.EMAIL: {
return (
<EmailInputSettingsBody
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
default: {
return <></>
}

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

@ -32,6 +32,13 @@ export const StepNodeLabel = (props: Step | StartStep) => {
</Text>
)
}
case InputStepType.EMAIL: {
return (
<Text color={'gray.500'}>
{props.options?.labels?.placeholder ?? 'Type your email...'}
</Text>
)
}
case 'start': {
return <Text>{props.label}</Text>
}

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

@ -13,7 +13,7 @@ describe('Text input', () => {
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody().findByPlaceholderText('Type your answer...').should('exist')
getIframeBody().findByRole('button', { name: 'Send' })
getIframeBody().findByRole('button', { name: 'Send' }).should('exist')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })
.clear()
@ -37,12 +37,12 @@ describe('Number 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()
getIframeBody().findByPlaceholderText('Type your answer...').should('exist')
getIframeBody().findByRole('button', { name: 'Send' })
getIframeBody().findByRole('button', { name: 'Send' }).should('exist')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })
.clear()
@ -64,6 +64,31 @@ describe('Number input', () => {
})
})
describe('Email input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.EMAIL })
cy.signOut()
})
it.only('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody().findByPlaceholderText('Type your email...').should('exist')
getIframeBody().findByRole('button', { name: 'Send' })
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })
.clear()
.type('Your email...')
cy.findByRole('textbox', { name: 'Button label:' }).clear().type('Go')
cy.findByTestId('step-step1').should('contain.text', 'Your email...')
cy.findByRole('button', { name: 'Restart' }).click()
getIframeBody().findByPlaceholderText('Your email...').should('exist')
getIframeBody().findByRole('button', { name: 'Go' })
})
})
const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
cy.task(
'createTypebot',

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

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

46
packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx Normal file
View File

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

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

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

1
packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/index.tsx Normal file
View File

@ -0,0 +1 @@
export { TextForm } from './TextForm'

67
packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextInput.tsx
View File

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

10
packages/models/src/typebot/steps.ts
View File

@ -2,7 +2,7 @@ export type Step = StartStep | BubbleStep | InputStep
export type BubbleStep = TextStep
export type InputStep = TextInputStep | NumberInputStep
export type InputStep = TextInputStep | NumberInputStep | EmailInputStep
export type StepType = 'start' | BubbleStepType | InputStepType
@ -13,6 +13,7 @@ export enum BubbleStepType {
export enum InputStepType {
TEXT = 'text input',
NUMBER = 'number input',
EMAIL = 'email input',
}
export type StepBase = { id: string; blockId: string; target?: Target }
@ -37,6 +38,13 @@ export type NumberInputStep = StepBase & {
options?: NumberInputOptions
}
export type EmailInputStep = StepBase & {
type: InputStepType.EMAIL
options?: EmailInputOptions
}
export type EmailInputOptions = InputOptionsBase
type InputOptionsBase = {
labels?: { placeholder?: string; button?: string }
}