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