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

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