blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add Date input

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-10 08:05:03 +01:00
parent ce1b23a0e7
commit 8cba7ff37b
21 changed files with 305 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import {
CalendarIcon,
ChatIcon,
EmailIcon,
FlagIcon,
@ -28,6 +29,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
case InputStepType.URL: {
return <GlobeIcon />
}
case InputStepType.DATE: {
return <CalendarIcon />
}
case 'start': {
return <FlagIcon />
}

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

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

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

@ -1,10 +1,13 @@
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'
import { UrlInputSettingsBody } from './UrlInputSettingsBody'
import {
TextInputSettingsBody,
NumberInputSettingsBody,
EmailInputSettingsBody,
UrlInputSettingsBody,
DateInputSettingsBody,
} from './bodies'
type Props = {
step: Step
@ -60,6 +63,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
/>
)
}
case InputStepType.DATE: {
return (
<DateInputSettingsBody
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
default: {
return <></>
}

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

@ -0,0 +1,80 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { DateInputOptions } from 'models'
import React from 'react'
type DateInputSettingsBodyProps = {
options?: DateInputOptions
onOptionsChange: (options: DateInputOptions) => void
}
export const DateInputSettingsBody = ({
options,
onOptionsChange,
}: DateInputSettingsBodyProps) => {
const handleFromChange = (from: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, from } })
const handleToChange = (to: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, to } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleIsRangeChange = (isRange: boolean) =>
onOptionsChange({ ...options, isRange })
const handleHasTimeChange = (hasTime: boolean) =>
onOptionsChange({ ...options, hasTime })
return (
<Stack spacing={4}>
<SwitchWithLabel
id="is-range"
label={'Is range?'}
initialValue={options?.isRange ?? false}
onCheckChange={handleIsRangeChange}
/>
<SwitchWithLabel
id="with-time"
label={'With time?'}
initialValue={options?.isRange ?? false}
onCheckChange={handleHasTimeChange}
/>
{options?.isRange && (
<Stack>
<FormLabel mb="0" htmlFor="from">
From label:
</FormLabel>
<DebouncedInput
id="from"
initialValue={options?.labels?.from ?? 'From:'}
delay={100}
onChange={handleFromChange}
/>
</Stack>
)}
{options?.isRange && (
<Stack>
<FormLabel mb="0" htmlFor="to">
To label:
</FormLabel>
<DebouncedInput
id="to"
initialValue={options?.labels?.to ?? 'To:'}
delay={100}
onChange={handleToChange}
/>
</Stack>
)}
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
id="button"
initialValue={options?.labels?.button ?? 'Send'}
delay={100}
onChange={handleButtonLabelChange}
/>
</Stack>
</Stack>
)
}

0
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/EmailInputSettingsBody.tsx → apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
View File

0
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/NumberInputSettingsBody.tsx → apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/NumberInputSettingsBody.tsx
View File

0
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/TextInputSettingsBody.tsx → apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/TextInputSettingsBody.tsx
View File

0
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/UrlInputSettingsBody.tsx → apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/UrlInputSettingsBody.tsx
View File

5
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/index.ts Normal file
View File

@ -0,0 +1,5 @@
export * from './DateInputSettingsBody'
export * from './EmailInputSettingsBody'
export * from './NumberInputSettingsBody'
export * from './TextInputSettingsBody'
export * from './UrlInputSettingsBody'

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

@ -46,6 +46,13 @@ export const StepNodeLabel = (props: Step | StartStep) => {
</Text>
)
}
case InputStepType.DATE: {
return (
<Text color={'gray.500'}>
{props.options?.labels?.from ?? 'Pick a date...'}
</Text>
)
}
case 'start': {
return <Text>{props.label}</Text>
}

11
apps/builder/components/shared/SwitchWithLabel.tsx
View File

@ -2,12 +2,14 @@ import { FormLabel, HStack, Switch, SwitchProps } from '@chakra-ui/react'
import React, { useState } from 'react'
type SwitchWithLabelProps = {
id: string
label: string
initialValue: boolean
onCheckChange: (isChecked: boolean) => void
} & SwitchProps
export const SwitchWithLabel = ({
id,
label,
initialValue,
onCheckChange,
@ -21,10 +23,15 @@ export const SwitchWithLabel = ({
}
return (
<HStack justifyContent="space-between">
<FormLabel htmlFor={props.id} mb="0">
<FormLabel htmlFor={id} mb="0">
{label}
</FormLabel>
<Switch isChecked={isChecked} onChange={handleChange} {...props} />
<Switch
isChecked={isChecked}
onChange={handleChange}
id={id}
{...props}
/>
</HStack>
)
}

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

@ -137,6 +137,41 @@ describe('URL input', () => {
})
})
describe('Date input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.DATE })
cy.signOut()
})
it.only('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByTestId('from-date')
.should('have.attr', 'type')
.should('eq', 'date')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('checkbox', { name: 'Is range?' }).check({ force: true })
cy.findByRole('textbox', { name: 'From label:' }).clear().type('Previous:')
cy.findByRole('textbox', { name: 'To label:' }).clear().type('After:')
cy.findByRole('checkbox', { name: 'With time?' }).check({ force: true })
cy.findByRole('textbox', { name: 'Button label:' }).clear().type('Go')
cy.findByRole('button', { name: 'Restart' }).click()
getIframeBody()
.findByTestId('from-date')
.should('have.attr', 'type')
.should('eq', 'datetime-local')
getIframeBody()
.findByTestId('to-date')
.should('have.attr', 'type')
.should('eq', 'datetime-local')
getIframeBody().findByRole('button', { name: 'Go' })
})
})
const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
cy.task(
'createTypebot',

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

@ -6,6 +6,7 @@ import { GuestBubble } from './bubbles/GuestBubble'
import { HostMessageBubble } from './bubbles/HostMessageBubble'
import { TextForm } from './inputs/TextForm'
import { isInputStep, isTextBubbleStep } from 'utils'
import { DateForm } from './inputs/DateForm'
export const ChatStep = ({
step,
@ -56,5 +57,7 @@ const InputChatStep = ({
case InputStepType.EMAIL:
case InputStepType.URL:
return <TextForm step={step} onSubmit={handleSubmit} />
case InputStepType.DATE:
return <DateForm options={step.options} onSubmit={handleSubmit} />
}
}

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

@ -0,0 +1,70 @@
import { DateInputOptions } from 'models'
import React, { useState } from 'react'
import { SendButton } from './SendButton'
type DateInputProps = {
onSubmit: (inputValue: `${string} to ${string}` | string) => void
options?: DateInputOptions
}
export const DateForm = ({
onSubmit,
options,
}: DateInputProps): JSX.Element => {
const { hasTime, isRange, labels } = options ?? {}
const [inputValues, setInputValues] = useState({ from: '', to: '' })
return (
<div className="flex flex-col w-full lg:w-4/6">
<div className="flex items-center">
<form
className={
'flex justify-between rounded-lg typebot-input pr-2 items-end'
}
onSubmit={(e) => {
if (inputValues.from === '' && inputValues.to === '') return
e.preventDefault()
onSubmit(
`${inputValues.from}${isRange ? ` to ${inputValues.to}` : ''}`
)
}}
>
<div className="flex flex-col">
<div className={'flex items-center p-4 ' + (isRange ? 'pb-0' : '')}>
{isRange && (
<p className="font-semibold mr-2">{labels?.from ?? 'From:'}</p>
)}
<input
className="focus:outline-none bg-transparent flex-1 w-full comp-input"
type={hasTime ? 'datetime-local' : 'date'}
onChange={(e) =>
setInputValues({ ...inputValues, from: e.target.value })
}
data-testid="from-date"
/>
</div>
{isRange && (
<div className="flex items-center p-4">
{isRange && (
<p className="font-semibold">{labels?.to ?? 'To:'}</p>
)}
<input
className="focus:outline-none bg-transparent flex-1 w-full comp-input ml-2"
type={hasTime ? 'datetime-local' : 'date'}
onChange={(e) =>
setInputValues({ ...inputValues, to: e.target.value })
}
data-testid="to-date"
/>
</div>
)}
</div>
<SendButton
label={labels?.button ?? 'Send'}
isDisabled={inputValues.to === '' && inputValues.from === ''}
/>
</form>
</div>
</div>
)
}

57
packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/NumberInput.tsx
View File

@ -1,57 +0,0 @@
import { NumberInputStep, TextInputStep } from 'models'
import React, { FormEvent, useRef, useState } from 'react'
import { SendIcon } from '../../../../assets/icons'
type NumberInputProps = {
step: NumberInputStep
onSubmit: (value: string) => void
}
export const NumberInput = ({ step, onSubmit }: NumberInputProps) => {
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}
>
<input
ref={inputRef}
className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
type="number"
placeholder={
step.options?.labels?.placeholder ?? 'Type your answer...'
}
onChange={(e) => setInputValue(e.target.value)}
style={{ appearance: 'auto' }}
min={step.options?.min}
max={step.options?.max}
step={step.options?.step}
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>
)
}

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

@ -0,0 +1,27 @@
import React from 'react'
import { SendIcon } from '../../../../assets/icons'
type SendButtonProps = {
label: string
isDisabled: boolean
} & React.ButtonHTMLAttributes<HTMLButtonElement>
export const SendButton = ({
label,
isDisabled,
...props
}: SendButtonProps) => {
return (
<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={isDisabled}
{...props}
>
<span className="hidden xs:flex">{label}</span>
<SendIcon className="send-icon flex xs:hidden" />
</button>
)
}

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

@ -5,7 +5,7 @@ import {
UrlInputStep,
} from 'models'
import React, { FormEvent, useState } from 'react'
import { SendIcon } from '../../../../../assets/icons'
import { SendButton } from '../SendButton'
import { TextInput } from './TextInputContent'
type TextFormProps = {
@ -32,18 +32,10 @@ export const TextForm = ({ step, onSubmit }: TextFormProps) => {
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>
<SendButton
label={step.options?.labels?.button ?? 'Send'}
isDisabled={inputValue === ''}
/>
</form>
</div>
</div>

2
packages/models/src/typebot/steps/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './steps'
export * from './inputs'

37
packages/models/src/typebot/steps.ts → packages/models/src/typebot/steps/inputs.ts
View File

@ -1,36 +1,18 @@
export type Step = StartStep | BubbleStep | InputStep
export type BubbleStep = TextStep
import { StepBase } from './steps'
export type InputStep =
| TextInputStep
| NumberInputStep
| EmailInputStep
| UrlInputStep
export type StepType = 'start' | BubbleStepType | InputStepType
export enum BubbleStepType {
TEXT = 'text',
}
| DateInputStep
export enum InputStepType {
TEXT = 'text input',
NUMBER = 'number input',
EMAIL = 'email input',
URL = 'url input',
}
export type StepBase = { id: string; blockId: string; target?: Target }
export type StartStep = StepBase & {
type: 'start'
label: string
}
export type TextStep = StepBase & {
type: BubbleStepType.TEXT
content: { html: string; richText: unknown[]; plainText: string }
DATE = 'date input',
}
export type TextInputStep = StepBase & {
@ -53,6 +35,17 @@ export type UrlInputStep = StepBase & {
options?: UrlInputOptions
}
export type DateInputStep = StepBase & {
type: InputStepType.DATE
options?: DateInputOptions
}
export type DateInputOptions = {
labels?: { button?: string; from?: string; to?: string }
hasTime?: boolean
isRange?: boolean
}
export type EmailInputOptions = InputOptionsBase
export type UrlInputOptions = InputOptionsBase
@ -70,5 +63,3 @@ export type NumberInputOptions = InputOptionsBase & {
max?: number
step?: number
}
export type Target = { blockId: string; stepId?: string }

25
packages/models/src/typebot/steps/steps.ts Normal file
View File

@ -0,0 +1,25 @@
import { InputStep, InputStepType } from './inputs'
export type Step = StartStep | BubbleStep | InputStep
export type BubbleStep = TextStep
export type StepType = 'start' | BubbleStepType | InputStepType
export enum BubbleStepType {
TEXT = 'text',
}
export type StepBase = { id: string; blockId: string; target?: Target }
export type StartStep = StepBase & {
type: 'start'
label: string
}
export type TextStep = StepBase & {
type: BubbleStepType.TEXT
content: { html: string; richText: unknown[]; plainText: string }
}
export type Target = { blockId: string; stepId?: string }

2
packages/models/src/typebot/typebot.ts
View File

@ -1,7 +1,7 @@
import { Typebot as TypebotFromPrisma } from 'db'
import { Table } from '../utils'
import { Settings } from './settings'
import { Step } from './steps'
import { Step } from './steps/steps'
import { Theme } from './theme'
export type Typebot = Omit<