feat(inputs): ✨ Add Set variable step

apps/builder/contexts/DndContext.tsx

@@ -4,6 +4,8 @@ import {
   ChoiceItem,
   InputStep,
   InputStepType,
+  LogicStepType,
+  LogicStep,
 } from 'models'
 import {
   createContext,
@@ -14,8 +16,8 @@ import {
   useState,
 } from 'react'
 
-export type DraggableStep = BubbleStep | InputStep
-export type DraggableStepType = BubbleStepType | InputStepType
+export type DraggableStep = BubbleStep | InputStep | LogicStep
+export type DraggableStepType = BubbleStepType | InputStepType | LogicStepType
 
 const dndContext = createContext<{
   draggedStepType?: DraggableStepType

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -1,5 +1,4 @@
 import { useToast } from '@chakra-ui/react'
-import { deepEqual } from 'fast-equals'
 import { PublicTypebot, Settings, Theme, Typebot } from 'models'
 import { useRouter } from 'next/router'
 import {
@@ -28,6 +27,7 @@ import { BlocksActions, blocksActions } from './actions/blocks'
 import { useImmer, Updater } from 'use-immer'
 import { stepsAction, StepsActions } from './actions/steps'
 import { choiceItemsAction, ChoiceItemsActions } from './actions/choiceItems'
+import { variablesAction, VariablesActions } from './actions/variables'
 
 type UpdateTypebotPayload = Partial<{
   theme: Theme
@@ -48,7 +48,8 @@ const typebotContext = createContext<
     publishTypebot: () => void
   } & BlocksActions &
     StepsActions &
-    ChoiceItemsActions
+    ChoiceItemsActions &
+    VariablesActions
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 >({})
@@ -86,9 +87,10 @@ export const TypebotContext = ({
     () =>
       isDefined(typebot) &&
       isDefined(localTypebot) &&
-      !deepEqual(localTypebot, typebot),
+      !checkIfTypebotsAreEqual(localTypebot, typebot),
     [typebot, localTypebot]
   )
+
   const isPublished = useMemo(
     () =>
       isDefined(typebot) &&
@@ -205,6 +207,7 @@ export const TypebotContext = ({
         ...blocksActions(setLocalTypebot as Updater<Typebot>),
         ...stepsAction(setLocalTypebot as Updater<Typebot>),
         ...choiceItemsAction(setLocalTypebot as Updater<Typebot>),
+        ...variablesAction(setLocalTypebot as Updater<Typebot>),
       }}
     >
       {children}

apps/builder/contexts/TypebotContext/actions/blocks.ts

@@ -1,13 +1,22 @@
 import { Coordinates } from 'contexts/GraphContext'
 import { WritableDraft } from 'immer/dist/internal'
-import { Block, BubbleStepType, InputStepType, Step, Typebot } from 'models'
+import {
+  Block,
+  BubbleStepType,
+  InputStepType,
+  LogicStepType,
+  Step,
+  Typebot,
+} from 'models'
 import { parseNewBlock } from 'services/typebots'
 import { Updater } from 'use-immer'
 import { createStepDraft, deleteStepDraft } from './steps'
 
 export type BlocksActions = {
   createBlock: (
-    props: Coordinates & { step: BubbleStepType | InputStepType | Step }
+    props: Coordinates & {
+      step: BubbleStepType | InputStepType | LogicStepType | Step
+    }
   ) => void
   updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id'>>) => void
   deleteBlock: (blockId: string) => void
@@ -18,7 +27,9 @@ export const blocksActions = (setTypebot: Updater<Typebot>): BlocksActions => ({
     x,
     y,
     step,
-  }: Coordinates & { step: BubbleStepType | InputStepType | Step }) => {
+  }: Coordinates & {
+    step: BubbleStepType | InputStepType | LogicStepType | Step
+  }) => {
     setTypebot((typebot) => {
       const newBlock = parseNewBlock({
         totalBlocks: typebot.blocks.allIds.length,

apps/builder/contexts/TypebotContext/actions/steps.ts

@@ -4,6 +4,7 @@ import {
   InputStepType,
   Step,
   Typebot,
+  LogicStepType,
 } from 'models'
 import { parseNewStep } from 'services/typebots'
 import { Updater } from 'use-immer'
@@ -15,7 +16,7 @@ import { isChoiceInput } from 'utils'
 export type StepsActions = {
   createStep: (
     blockId: string,
-    step: BubbleStepType | InputStepType | Step,
+    step: BubbleStepType | InputStepType | LogicStepType | Step,
     index?: number
   ) => void
   updateStep: (
@@ -29,7 +30,7 @@ export type StepsActions = {
 export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
   createStep: (
     blockId: string,
-    step: BubbleStepType | InputStepType | Step,
+    step: BubbleStepType | InputStepType | LogicStepType | Step,
     index?: number
   ) => {
     setTypebot((typebot) => {
@@ -75,7 +76,7 @@ export const deleteStepDraft = (
 
 export const createStepDraft = (
   typebot: WritableDraft<Typebot>,
-  step: BubbleStepType | InputStepType | Step,
+  step: BubbleStepType | InputStepType | LogicStepType | Step,
   blockId: string,
   index?: number
 ) => {

apps/builder/contexts/TypebotContext/actions/variables.ts

@@ -0,0 +1,60 @@
+import { Typebot, Variable } from 'models'
+import { Updater } from 'use-immer'
+import { WritableDraft } from 'immer/dist/types/types-external'
+import { generate } from 'short-uuid'
+
+export type VariablesActions = {
+  createVariable: (variable: Omit<Variable, 'id'> | Variable) => void
+  updateVariable: (
+    variableId: string,
+    updates: Partial<Omit<Variable, 'id'>>
+  ) => void
+  deleteVariable: (variableId: string) => void
+}
+
+export const variablesAction = (
+  setTypebot: Updater<Typebot>
+): VariablesActions => ({
+  createVariable: (variable: Omit<Variable, 'id'> | Variable) => {
+    setTypebot((typebot) => {
+      const id = createVariableDraft(typebot, variable)
+      return id
+    })
+  },
+  updateVariable: (
+    variableId: string,
+    updates: Partial<Omit<Variable, 'id'>>
+  ) =>
+    setTypebot((typebot) => {
+      typebot.variables.byId[variableId] = {
+        ...typebot.variables.byId[variableId],
+        ...updates,
+      }
+    }),
+  deleteVariable: (itemId: string) => {
+    setTypebot((typebot) => {
+      deleteVariableDraft(typebot, itemId)
+    })
+  },
+})
+
+export const deleteVariableDraft = (
+  typebot: WritableDraft<Typebot>,
+  variableId: string
+) => {
+  delete typebot.variables.byId[variableId]
+  const index = typebot.variables.allIds.indexOf(variableId)
+  if (index !== -1) typebot.variables.allIds.splice(index, 1)
+}
+
+export const createVariableDraft = (
+  typebot: WritableDraft<Typebot>,
+  variable: Omit<Variable, 'id'> | Variable
+) => {
+  const newVariable = {
+    ...variable,
+    id: 'id' in variable ? variable.id : generate(),
+  }
+  typebot.variables.byId[newVariable.id] = newVariable
+  typebot.variables.allIds.push(newVariable.id)
+}