blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add URL input

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-09 07:36:29 +01:00
parent 8391bcce5e
commit ce1b23a0e7
10 changed files with 146 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import {
ChatIcon,
EmailIcon,
FlagIcon,
GlobeIcon,
NumberIcon,
TextIcon,
} from 'assets/icons'
@ -24,6 +25,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
case InputStepType.EMAIL: {
return <EmailIcon />
}
case InputStepType.URL: {
return <GlobeIcon />
}
case 'start': {
return <FlagIcon />
}

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

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

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

@ -4,6 +4,7 @@ import { InputStepType, Step, TextInputOptions } from 'models'
import { EmailInputSettingsBody } from './EmailInputSettingsBody'
import { NumberInputSettingsBody } from './NumberInputSettingsBody'
import { TextInputSettingsBody } from './TextInputSettingsBody'
import { UrlInputSettingsBody } from './UrlInputSettingsBody'
type Props = {
step: Step
@ -51,6 +52,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
/>
)
}
case InputStepType.URL: {
return (
<UrlInputSettingsBody
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
default: {
return <></>
}

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

@ -0,0 +1,46 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { UrlInputOptions } from 'models'
import React from 'react'
type UrlInputSettingsBodyProps = {
options?: UrlInputOptions
onOptionsChange: (options: UrlInputOptions) => void
}
export const UrlInputSettingsBody = ({
options,
onOptionsChange,
}: UrlInputSettingsBodyProps) => {
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 URL...'}
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

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

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

@ -21,8 +21,11 @@ describe('Text input', () => {
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' }).should('exist')
getIframeBody()
.findByPlaceholderText('Type your answer...')
.should('have.attr', 'type')
.should('equal', 'text')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })
.clear()
@ -50,8 +53,11 @@ describe('Number input', () => {
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' }).should('exist')
getIframeBody()
.findByPlaceholderText('Type your answer...')
.should('have.attr', 'type')
.should('equal', 'number')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })
.clear()
@ -84,8 +90,13 @@ describe('Email input', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody().findByPlaceholderText('Type your email...').should('exist')
getIframeBody()
.findByPlaceholderText('Type your email...')
.should('have.attr', 'type')
.should('equal', 'email')
getIframeBody().findByRole('button', { name: 'Send' })
getIframeBody().findByPlaceholderText('Type your email...').should('exist')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })
.clear()
@ -98,6 +109,34 @@ describe('Email input', () => {
})
})
describe('URL input', () => {
beforeEach(() => {
cy.task('seed')
createTypebotWithStep({ type: InputStepType.URL })
cy.signOut()
})
it('options should work', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot3/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody()
.findByPlaceholderText('Type your URL...')
.should('have.attr', 'type')
.should('eq', 'url')
getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
cy.findByTestId('step-step1').click({ force: true })
cy.findByRole('textbox', { name: 'Placeholder:' })
.clear()
.type('Your URL...')
cy.findByRole('textbox', { name: 'Button label:' }).clear().type('Go')
cy.findByTestId('step-step1').should('contain.text', 'Your URL...')
cy.findByRole('button', { name: 'Restart' }).click()
getIframeBody().findByPlaceholderText('Your URL...').should('exist')
getIframeBody().findByRole('button', { name: 'Go' })
})
})
const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
cy.task(
'createTypebot',

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

@ -54,6 +54,7 @@ const InputChatStep = ({
case InputStepType.TEXT:
case InputStepType.NUMBER:
case InputStepType.EMAIL:
case InputStepType.URL:
return <TextForm step={step} onSubmit={handleSubmit} />
}
}

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

@ -1,10 +1,15 @@
import { EmailInputStep, NumberInputStep, TextInputStep } from 'models'
import {
EmailInputStep,
NumberInputStep,
TextInputStep,
UrlInputStep,
} from 'models'
import React, { FormEvent, useState } from 'react'
import { SendIcon } from '../../../../../assets/icons'
import { TextInput } from './TextInputContent'
type TextFormProps = {
step: TextInputStep | EmailInputStep | NumberInputStep
step: TextInputStep | EmailInputStep | NumberInputStep | UrlInputStep
onSubmit: (value: string) => void
}

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

@ -3,6 +3,7 @@ import {
EmailInputStep,
NumberInputStep,
InputStepType,
UrlInputStep,
} from 'models'
import React, {
ChangeEvent,
@ -13,7 +14,7 @@ import React, {
} from 'react'
type TextInputProps = {
step: TextInputStep | EmailInputStep | NumberInputStep
step: TextInputStep | EmailInputStep | NumberInputStep | UrlInputStep
onChange: (value: string) => void
}
@ -77,6 +78,16 @@ export const TextInput = ({ step, onChange }: TextInputProps) => {
/>
)
}
case InputStepType.URL: {
return (
<ShortTextInput
ref={inputRef}
placeholder={step.options?.labels?.placeholder ?? 'Type your URL...'}
onChange={handleInputChange}
type="url"
/>
)
}
}
}

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

@ -2,7 +2,11 @@ export type Step = StartStep | BubbleStep | InputStep
export type BubbleStep = TextStep
export type InputStep = TextInputStep | NumberInputStep | EmailInputStep
export type InputStep =
| TextInputStep
| NumberInputStep
| EmailInputStep
| UrlInputStep
export type StepType = 'start' | BubbleStepType | InputStepType
@ -14,6 +18,7 @@ export enum InputStepType {
TEXT = 'text input',
NUMBER = 'number input',
EMAIL = 'email input',
URL = 'url input',
}
export type StepBase = { id: string; blockId: string; target?: Target }
@ -43,8 +48,15 @@ export type EmailInputStep = StepBase & {
options?: EmailInputOptions
}
export type UrlInputStep = StepBase & {
type: InputStepType.URL
options?: UrlInputOptions
}
export type EmailInputOptions = InputOptionsBase
export type UrlInputOptions = InputOptionsBase
type InputOptionsBase = {
labels?: { placeholder?: string; button?: string }
}