blsmedia/bot
2
0
Fork 0
Code Activity

feat(engine): ✨ Add Rating input

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-06-07 19:09:08 +02:00
parent 301097623b
commit b1aecf843b
19 changed files with 455 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -457,3 +457,9 @@ export const PlayIcon = (props: IconProps) => (
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</Icon>
)
export const StarIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</Icon>
)

5
apps/builder/components/editor/StepsSideBar/StepIcon.tsx
View File

@ -18,6 +18,7 @@ import {
NumberIcon,
PhoneIcon,
SendEmailIcon,
StarIcon,
TextIcon,
WebhookIcon,
} from 'assets/icons'
@ -65,6 +66,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
return <CheckSquareIcon color="orange.500" {...props} />
case InputStepType.PAYMENT:
return <CreditCardIcon color="orange.500" {...props} />
case InputStepType.RATING:
return <StarIcon color="orange.500" {...props} />
case LogicStepType.SET_VARIABLE:
return <EditIcon color="purple.500" {...props} />
case LogicStepType.CONDITION:
@ -91,7 +94,5 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
return <SendEmailIcon {...props} />
case 'start':
return <FlagIcon {...props} />
default:
return <></>
}
}

8
apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx
View File

@ -10,8 +10,10 @@ import React from 'react'
type Props = { type: StepType }
export const StepTypeLabel = ({ type }: Props) => {
export const StepTypeLabel = ({ type }: Props): JSX.Element => {
switch (type) {
case 'start':
return <Text>Start</Text>
case BubbleStepType.TEXT:
case InputStepType.TEXT:
return <Text>Text</Text>
@ -39,6 +41,8 @@ export const StepTypeLabel = ({ type }: Props) => {
return <Text>Button</Text>
case InputStepType.PAYMENT:
return <Text>Payment</Text>
case InputStepType.RATING:
return <Text>Rating</Text>
case LogicStepType.SET_VARIABLE:
return <Text>Set variable</Text>
case LogicStepType.CONDITION:
@ -79,7 +83,5 @@ export const StepTypeLabel = ({ type }: Props) => {
return <Text>Pabbly</Text>
case IntegrationStepType.EMAIL:
return <Text>Email</Text>
default:
return <></>
}
}

20
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
View File

@ -15,7 +15,7 @@ import {
LogicStepType,
Step,
StepOptions,
TextBubbleStep,
StepWithOptions,
Webhook,
} from 'models'
import { useRef } from 'react'
@ -33,6 +33,7 @@ import { GoogleAnalyticsSettings } from './bodies/GoogleAnalyticsSettings'
import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
import { PaymentSettings } from './bodies/PaymentSettings'
import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
import { RatingInputSettings } from './bodies/RatingInputSettingsBody'
import { RedirectSettings } from './bodies/RedirectSettings'
import { SendEmailSettings } from './bodies/SendEmailSettings'
import { SetVariableSettings } from './bodies/SetVariableSettings'
@ -41,7 +42,7 @@ import { WebhookSettings } from './bodies/WebhookSettings'
import { ZapierSettings } from './bodies/ZapierSettings'
type Props = {
step: Exclude<Step, TextBubbleStep>
step: StepWithOptions | ConditionStep
webhook?: Webhook
onExpandClick: () => void
onStepChange: (updates: Partial<Step>) => void
@ -87,10 +88,10 @@ export const StepSettings = ({
step,
onStepChange,
}: {
step: Step
step: StepWithOptions | ConditionStep
webhook?: Webhook
onStepChange: (step: Partial<Step>) => void
}) => {
}): JSX.Element => {
const handleOptionsChange = (options: StepOptions) => {
onStepChange({ options } as Partial<Step>)
}
@ -164,6 +165,14 @@ export const StepSettings = ({
/>
)
}
case InputStepType.RATING: {
return (
<RatingInputSettings
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
case LogicStepType.SET_VARIABLE: {
return (
<SetVariableSettings
@ -258,8 +267,5 @@ export const StepSettings = ({
/>
)
}
default: {
return <></>
}
}
}

149
apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/RatingInputSettingsBody.tsx Normal file
View File

@ -0,0 +1,149 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DropdownList } from 'components/shared/DropdownList'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { Input } from 'components/shared/Textbox'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { RatingInputOptions, Variable } from 'models'
import React from 'react'
type RatingInputSettingsProps = {
options: RatingInputOptions
onOptionsChange: (options: RatingInputOptions) => void
}
export const RatingInputSettings = ({
options,
onOptionsChange,
}: RatingInputSettingsProps) => {
const handleLengthChange = (length: number) =>
onOptionsChange({ ...options, length })
const handleTypeChange = (buttonType: 'Icons' | 'Numbers') =>
onOptionsChange({ ...options, buttonType })
const handleCustomIconCheck = (isEnabled: boolean) =>
onOptionsChange({
...options,
customIcon: { ...options.customIcon, isEnabled },
})
const handleIconSvgChange = (svg: string) =>
onOptionsChange({ ...options, customIcon: { ...options.customIcon, svg } })
const handleLeftLabelChange = (left: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, left } })
const handleMiddleLabelChange = (middle: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, middle } })
const handleRightLabelChange = (right: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, right } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, button } })
const handleVariableChange = (variable?: Variable) =>
onOptionsChange({ ...options, variableId: variable?.id })
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="button">
Maximum:
</FormLabel>
<DropdownList
onItemSelect={handleLengthChange}
items={[3, 4, 5, 6, 7, 8, 9, 10]}
currentItem={options.length}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Type:
</FormLabel>
<DropdownList
onItemSelect={handleTypeChange}
items={['Icons', 'Numbers']}
currentItem={options.buttonType}
/>
</Stack>
{options.buttonType === 'Icons' && (
<SwitchWithLabel
id="switch"
label="Custom icon?"
initialValue={options.customIcon.isEnabled}
onCheckChange={handleCustomIconCheck}
/>
)}
{options.buttonType === 'Icons' && options.customIcon.isEnabled && (
<Stack>
<FormLabel mb="0" htmlFor="svg">
Icon SVG:
</FormLabel>
<Input
id="svg"
defaultValue={options.customIcon.svg}
onChange={handleIconSvgChange}
placeholder="<svg>...</svg>"
/>
</Stack>
)}
<Stack>
<FormLabel mb="0" htmlFor="button">
1 label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.left}
onChange={handleLeftLabelChange}
placeholder="Not likely at all"
/>
</Stack>
{options.length >= 4 && (
<Stack>
<FormLabel mb="0" htmlFor="button">
{Math.floor(options.length / 2)} label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.middle}
onChange={handleMiddleLabelChange}
placeholder="Neutral"
/>
</Stack>
)}
<Stack>
<FormLabel mb="0" htmlFor="button">
{options.length} label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.right}
onChange={handleRightLabelChange}
placeholder="Extremely likely"
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

25
apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
View File

@ -9,8 +9,10 @@ import React, { useEffect, useRef, useState } from 'react'
import {
BubbleStep,
BubbleStepContent,
ConditionStep,
DraggableStep,
Step,
StepWithOptions,
TextBubbleContent,
TextBubbleStep,
} from 'models'
@ -210,11 +212,16 @@ export const StepNode = ({
</Flex>
</PopoverTrigger>
{hasSettingsPopover(step) && (
<SettingsPopoverContent
step={step}
onExpandClick={handleExpandClick}
onStepChange={handleStepUpdate}
/>
<>
<SettingsPopoverContent
step={step}
onExpandClick={handleExpandClick}
onStepChange={handleStepUpdate}
/>
<SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
<StepSettings step={step} onStepChange={handleStepUpdate} />
</SettingsModal>
</>
)}
{isMediaBubbleStep(step) && (
<MediaBubblePopoverContent
@ -222,17 +229,15 @@ export const StepNode = ({
onContentChange={handleContentChange}
/>
)}
<SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
<StepSettings step={step} onStepChange={handleStepUpdate} />
</SettingsModal>
</Popover>
)}
</ContextMenu>
)
}
const hasSettingsPopover = (step: Step): step is Exclude<Step, BubbleStep> =>
!isBubbleStep(step)
const hasSettingsPopover = (
step: Step
): step is StepWithOptions | ConditionStep => !isBubbleStep(step)
const isMediaBubbleStep = (
step: Step

9
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
View File

@ -22,6 +22,7 @@ import { ConfigureContent } from './contents/ConfigureContent'
import { ImageBubbleContent } from './contents/ImageBubbleContent'
import { PaymentInputContent } from './contents/PaymentInputContent'
import { PlaceholderContent } from './contents/PlaceholderContent'
import { RatingInputContent } from './contents/RatingInputContent'
import { SendEmailContent } from './contents/SendEmailContent'
import { TypebotLinkContent } from './contents/TypebotLinkContent'
import { ProviderWebhookContent } from './contents/ZapierContent'
@ -30,7 +31,7 @@ type Props = {
step: Step | StartStep
indices: StepIndices
}
export const StepNodeContent = ({ step, indices }: Props) => {
export const StepNodeContent = ({ step, indices }: Props): JSX.Element => {
if (isInputStep(step) && !isChoiceInput(step) && step.options.variableId) {
return <WithVariableContent step={step} />
}
@ -72,6 +73,9 @@ export const StepNodeContent = ({ step, indices }: Props) => {
case InputStepType.PAYMENT: {
return <PaymentInputContent step={step} />
}
case InputStepType.RATING: {
return <RatingInputContent step={step} />
}
case LogicStepType.SET_VARIABLE: {
return <SetVariableContent step={step} />
}
@ -144,8 +148,5 @@ export const StepNodeContent = ({ step, indices }: Props) => {
case 'start': {
return <Text>Start</Text>
}
default: {
return <Text>No input</Text>
}
}
}

12
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/RatingInputContent.tsx Normal file
View File

@ -0,0 +1,12 @@
import { Text } from '@chakra-ui/react'
import { RatingInputStep } from 'models'
type Props = {
step: RatingInputStep
}
export const RatingInputContent = ({ step }: Props) => (
<Text noOfLines={0} pr="6">
Rate from 1 to {step.options.length}
</Text>
)

65
apps/builder/playwright/tests/inputs/rating.spec.ts Normal file
View File

@ -0,0 +1,65 @@
import test, { expect } from '@playwright/test'
import {
createTypebots,
parseDefaultBlockWithStep,
} from '../../services/database'
import { defaultRatingInputOptions, InputStepType } from 'models'
import { typebotViewer } from '../../services/selectorUtils'
import cuid from 'cuid'
const boxSvg = `<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>`
test('options should work', async ({ page }) => {
const typebotId = cuid()
await createTypebots([
{
id: typebotId,
...parseDefaultBlockWithStep({
type: InputStepType.RATING,
options: defaultRatingInputOptions,
}),
},
])
await page.goto(`/typebots/${typebotId}/edit`)
await page.click('text=Preview')
await expect(typebotViewer(page).locator(`text=Send`)).toBeHidden()
await typebotViewer(page).locator(`text=8`).click()
await typebotViewer(page).locator(`text=Send`).click()
await expect(typebotViewer(page).locator(`text=8`)).toBeVisible()
await page.click('text=Rate from 1 to 10')
await page.click('text=10')
await page.click('text=5')
await page.click('text=Numbers')
await page.click('text=Icons')
await page.click('text="Custom icon?"')
await page.fill('[placeholder="<svg>...</svg>"]', boxSvg)
await page.fill('[placeholder="Not likely at all"]', 'Not likely at all')
await page.fill('[placeholder="Neutral"]', 'Neutral')
await page.fill('[placeholder="Extremely likely"]', 'Extremely likely')
await page.click('text="Restart"')
await expect(typebotViewer(page).locator(`text=8`)).toBeHidden()
await expect(typebotViewer(page).locator(`text=4`)).toBeHidden()
await expect(
typebotViewer(page).locator(`text=Not likely at all`)
).toBeVisible()
await expect(typebotViewer(page).locator(`text=Neutral`)).toBeVisible()
await expect(
typebotViewer(page).locator(`text=Extremely likely`)
).toBeVisible()
await typebotViewer(page).locator(`svg >> nth=4`).click()
await typebotViewer(page).locator(`text=Send`).click()
await expect(typebotViewer(page).locator(`text=5`)).toBeVisible()
})

3
apps/builder/services/typebots/typebots.ts
View File

@ -38,6 +38,7 @@ import {
ChoiceInputStep,
ConditionStep,
defaultPaymentInputOptions,
defaultRatingInputOptions,
} from 'models'
import { Typebot } from 'models'
import useSWR from 'swr'
@ -326,6 +327,8 @@ const parseDefaultStepOptions = (type: StepWithOptionsType): StepOptions => {
return defaultChoiceInputOptions
case InputStepType.PAYMENT:
return defaultPaymentInputOptions
case InputStepType.RATING:
return defaultRatingInputOptions
case LogicStepType.SET_VARIABLE:
return defaultSetVariablesOptions
case LogicStepType.REDIRECT:

2
apps/docs/docs/editor/blocks/set-variable.md
View File

@ -23,7 +23,7 @@ It means you can apply operations on existing variables:
But also set the variable to the current date for example:
```js
new Date()
new Date().toISOString()
```
## Random ID