feat(inputs): ✨ Add Set variable step

apps/builder/components/board/StepTypesList/StepCard.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
-import { BubbleStepType, InputStepType, StepType } from 'models'
+import { BubbleStepType, InputStepType, StepType, LogicStepType } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useEffect, useState } from 'react'
 import { StepIcon } from './StepIcon'
@@ -9,10 +9,10 @@ export const StepCard = ({
   type,
   onMouseDown,
 }: {
-  type: BubbleStepType | InputStepType
+  type: BubbleStepType | InputStepType | LogicStepType
   onMouseDown: (
     e: React.MouseEvent,
-    type: BubbleStepType | InputStepType
+    type: BubbleStepType | InputStepType | LogicStepType
   ) => void
 }) => {
   const { draggedStepType } = useDnd()

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -3,14 +3,15 @@ import {
   CalendarIcon,
   ChatIcon,
   CheckSquareIcon,
+  EditIcon,
   EmailIcon,
   FlagIcon,
   GlobeIcon,
   NumberIcon,
   PhoneIcon,
   TextIcon,
 } from 'assets/icons'
-import { BubbleStepType, InputStepType, StepType } from 'models'
+import { BubbleStepType, InputStepType, LogicStepType, StepType } from 'models'
 import React from 'react'
 
 type StepIconProps = { type: StepType } & IconProps
@@ -41,6 +42,9 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
     case InputStepType.CHOICE: {
       return <CheckSquareIcon {...props} />
     }
+    case LogicStepType.SET_VARIABLE: {
+      return <EditIcon {...props} />
+    }
     case 'start': {
       return <FlagIcon {...props} />
     }

apps/builder/components/board/StepTypesList/StepTypeLabel.tsx

@@ -1,5 +1,5 @@
 import { Text } from '@chakra-ui/react'
-import { BubbleStepType, InputStepType, StepType } from 'models'
+import { BubbleStepType, InputStepType, LogicStepType, StepType } from 'models'
 import React from 'react'
 
 type Props = { type: StepType }
@@ -28,6 +28,9 @@ export const StepTypeLabel = ({ type }: Props) => {
     case InputStepType.CHOICE: {
       return <Text>Button</Text>
     }
+    case LogicStepType.SET_VARIABLE: {
+      return <Text>Set variable</Text>
+    }
     default: {
       return <></>
     }

apps/builder/components/board/StepTypesList/StepTypesList.tsx

@@ -5,7 +5,7 @@ import {
   SimpleGrid,
   useEventListener,
 } from '@chakra-ui/react'
-import { BubbleStepType, InputStepType } from 'models'
+import { BubbleStepType, InputStepType, LogicStepType } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useState } from 'react'
 import { StepCard, StepCardOverlay } from './StepCard'
@@ -31,7 +31,7 @@ export const StepTypesList = () => {
 
   const handleMouseDown = (
     e: React.MouseEvent,
-    type: BubbleStepType | InputStepType
+    type: BubbleStepType | InputStepType | LogicStepType
   ) => {
     const element = e.currentTarget as HTMLDivElement
     const rect = element.getBoundingClientRect()
@@ -85,6 +85,15 @@ export const StepTypesList = () => {
           <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
         ))}
       </SimpleGrid>
+
+      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+        Logic
+      </Text>
+      <SimpleGrid columns={2} spacing="2">
+        {Object.values(LogicStepType).map((type) => (
+          <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+        ))}
+      </SimpleGrid>
       {draggedStepType && (
         <StepCardOverlay
           type={draggedStepType}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -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 <></>
     }

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

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

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

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

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

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

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

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

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

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

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/SetVariableSettingsBody.tsx

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