blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add Set variable step

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-14 07:49:24 +01:00
parent 13f72f5ff7
commit 4ccb7bca49
55 changed files with 1024 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,9 @@ import {
ChoiceInputOptions,
InputStep,
InputStepType,
LogicStepType,
SetVariableOptions,
Step,
TextInputOptions,
} from 'models'
import {
@ -15,10 +18,12 @@ import {
} from './bodies'
import { ChoiceInputSettingsBody } from './bodies/ChoiceInputSettingsBody'
import { PhoneNumberSettingsBody } from './bodies/PhoneNumberSettingsBody'
import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
type Props = {
step: InputStep
step: Step
}
export const SettingsPopoverContent = ({ step }: Props) => {
const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
@ -35,7 +40,7 @@ export const SettingsPopoverContent = ({ step }: Props) => {
const SettingsPopoverBodyContent = ({ step }: Props) => {
const { updateStep } = useTypebot()
const handleOptionsChange = (
options: TextInputOptions | ChoiceInputOptions
options: TextInputOptions | ChoiceInputOptions | SetVariableOptions
) => updateStep(step.id, { options } as Partial<InputStep>)
switch (step.type) {
@ -95,6 +100,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
/>
)
}
case LogicStepType.SET_VARIABLE: {
return (
<SetVariableSettingsBody
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
default: {
return <></>
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
View File

@ -1,7 +1,8 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { ChoiceInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { ChoiceInputOptions, Variable } from 'models'
import React from 'react'
type ChoiceInputSettingsBodyProps = {
@ -17,6 +18,8 @@ export const ChoiceInputSettingsBody = ({
options && onOptionsChange({ ...options, isMultipleChoice })
const handleButtonLabelChange = (buttonLabel: string) =>
options && onOptionsChange({ ...options, buttonLabel })
const handleVariableChange = (variable: Variable) =>
options && onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -39,6 +42,15 @@ export const ChoiceInputSettingsBody = ({
/>
</Stack>
)}
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
View File

@ -1,7 +1,8 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { DateInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { DateInputOptions, Variable } from 'models'
import React from 'react'
type DateInputSettingsBodyProps = {
@ -23,6 +24,8 @@ export const DateInputSettingsBody = ({
onOptionsChange({ ...options, isRange })
const handleHasTimeChange = (hasTime: boolean) =>
onOptionsChange({ ...options, hasTime })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -75,6 +78,15 @@ export const DateInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

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

@ -1,6 +1,7 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { EmailInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { EmailInputOptions, Variable } from 'models'
import React from 'react'
type EmailInputSettingsBodyProps = {
@ -16,6 +17,8 @@ export const EmailInputSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -41,6 +44,15 @@ export const EmailInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

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

@ -1,7 +1,8 @@
import { FormLabel, HStack, Stack } from '@chakra-ui/react'
import { SmartNumberInput } from 'components/settings/SmartNumberInput'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { NumberInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { NumberInputOptions, Variable } from 'models'
import React from 'react'
import { removeUndefinedFields } from 'services/utils'
@ -24,6 +25,8 @@ export const NumberInputSettingsBody = ({
onOptionsChange(removeUndefinedFields({ ...options, max }))
const handleStepChange = (step?: number) =>
onOptionsChange(removeUndefinedFields({ ...options, step }))
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -79,6 +82,15 @@ export const NumberInputSettingsBody = ({
onValueChange={handleStepChange}
/>
</HStack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

14
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/PhoneNumberSettingsBody.tsx
View File

@ -1,6 +1,7 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { EmailInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { EmailInputOptions, Variable } from 'models'
import React from 'react'
type PhoneNumberSettingsBodyProps = {
@ -16,6 +17,8 @@ export const PhoneNumberSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -41,6 +44,15 @@ export const PhoneNumberSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

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

@ -0,0 +1,46 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedTextarea } from 'components/shared/DebouncedTextarea'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { SetVariableOptions, Variable } from 'models'
import React from 'react'
type Props = {
options?: SetVariableOptions
onOptionsChange: (options: SetVariableOptions) => void
}
export const SetVariableSettingsBody = ({
options,
onOptionsChange,
}: Props) => {
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
const handleExpressionChange = (expressionToEvaluate: string) =>
onOptionsChange({ ...options, expressionToEvaluate })
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="variable-search">
Search or create variable:
</FormLabel>
<VariableSearchInput
onSelectVariable={handleVariableChange}
initialVariableId={options?.variableId}
id="variable-search"
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="expression">
Value / Expression:
</FormLabel>
<DebouncedTextarea
id="expression"
initialValue={options?.expressionToEvaluate ?? ''}
delay={100}
onChange={handleExpressionChange}
/>
</Stack>
</Stack>
)
}

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

@ -1,7 +1,8 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { TextInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { TextInputOptions, Variable } from 'models'
import React from 'react'
type TextInputSettingsBodyProps = {
@ -19,6 +20,8 @@ export const TextInputSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleLongChange = (isLong: boolean) =>
onOptionsChange({ ...options, isLong })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -50,6 +53,15 @@ export const TextInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}

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

@ -1,6 +1,7 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { UrlInputOptions } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { UrlInputOptions, Variable } from 'models'
import React from 'react'
type UrlInputSettingsBodyProps = {
@ -16,6 +17,8 @@ export const UrlInputSettingsBody = ({
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleVariableChange = (variable: Variable) =>
onOptionsChange({ ...options, variableId: variable.id })
return (
<Stack spacing={4}>
@ -41,6 +44,15 @@ export const UrlInputSettingsBody = ({
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:
</FormLabel>
<VariableSearchInput
initialVariableId={options?.variableId}
onSelectVariable={handleVariableChange}
/>
</Stack>
</Stack>
)
}