feat(integration): ✨ Add webhooks

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -29,6 +29,7 @@ import { stepsAction, StepsActions } from './actions/steps'
 import { choiceItemsAction, ChoiceItemsActions } from './actions/choiceItems'
 import { variablesAction, VariablesActions } from './actions/variables'
 import { edgesAction, EdgesActions } from './actions/edges'
+import { webhooksAction, WebhooksAction } from './actions/webhooks'
 
 type UpdateTypebotPayload = Partial<{
   theme: Theme
@@ -52,7 +53,8 @@ const typebotContext = createContext<
     StepsActions &
     ChoiceItemsActions &
     VariablesActions &
-    EdgesActions
+    EdgesActions &
+    WebhooksAction
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 >({})
@@ -78,9 +80,11 @@ export const TypebotContext = ({
         description: error.message,
       }),
   })
+
   const [localTypebot, setLocalTypebot] = useImmer<Typebot | undefined>(
     undefined
   )
+
   const [localPublishedTypebot, setLocalPublishedTypebot] =
     useState<PublicTypebot>()
   const [isSavingLoading, setIsSavingLoading] = useState(false)
@@ -214,6 +218,7 @@ export const TypebotContext = ({
         ...choiceItemsAction(setLocalTypebot as Updater<Typebot>),
         ...variablesAction(setLocalTypebot as Updater<Typebot>),
         ...edgesAction(setLocalTypebot as Updater<Typebot>),
+        ...webhooksAction(setLocalTypebot as Updater<Typebot>),
       }}
     >
       {children}

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

@@ -10,8 +10,9 @@ import { Updater } from 'use-immer'
 import { removeEmptyBlocks } from './blocks'
 import { WritableDraft } from 'immer/dist/types/types-external'
 import { createChoiceItemDraft, deleteChoiceItemDraft } from './choiceItems'
-import { isChoiceInput } from 'utils'
+import { isChoiceInput, isWebhookStep } from 'utils'
 import { deleteEdgeDraft } from './edges'
+import { deleteWebhookDraft } from './webhooks'
 
 export type StepsActions = {
   createStep: (
@@ -51,6 +52,8 @@ export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
     setTypebot((typebot) => {
       const step = typebot.steps.byId[stepId]
       if (isChoiceInput(step)) deleteChoiceItemsInsideStep(typebot, step)
+      if (isWebhookStep(step))
+        deleteWebhookDraft(step.options?.webhookId)(typebot)
       deleteAssociatedEdges(typebot, stepId)
       removeStepIdFromBlock(typebot, stepId)
       deleteStepDraft(typebot, stepId)

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

@@ -1,10 +1,9 @@
 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
+  createVariable: (variable: Variable) => void
   updateVariable: (
     variableId: string,
     updates: Partial<Omit<Variable, 'id'>>
@@ -15,10 +14,10 @@ export type VariablesActions = {
 export const variablesAction = (
   setTypebot: Updater<Typebot>
 ): VariablesActions => ({
-  createVariable: (variable: Omit<Variable, 'id'> | Variable) => {
+  createVariable: (newVariable: Variable) => {
     setTypebot((typebot) => {
-      const id = createVariableDraft(typebot, variable)
-      return id
+      typebot.variables.byId[newVariable.id] = newVariable
+      typebot.variables.allIds.push(newVariable.id)
     })
   },
   updateVariable: (
@@ -46,15 +45,3 @@ export const deleteVariableDraft = (
   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)
-}

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

@@ -0,0 +1,41 @@
+import { Typebot, Webhook } from 'models'
+import { Updater } from 'use-immer'
+import { WritableDraft } from 'immer/dist/internal'
+
+export type WebhooksAction = {
+  createWebhook: (webook: Webhook) => void
+  updateWebhook: (
+    webhookId: string,
+    updates: Partial<Omit<Webhook, 'id'>>
+  ) => void
+  deleteWebhook: (variableId: string) => void
+}
+
+export const webhooksAction = (
+  setTypebot: Updater<Typebot>
+): WebhooksAction => ({
+  createWebhook: (newWebhook: Webhook) => {
+    setTypebot((typebot) => {
+      typebot.webhooks.byId[newWebhook.id] = newWebhook
+      typebot.webhooks.allIds.push(newWebhook.id)
+    })
+  },
+  updateWebhook: (webhookId: string, updates: Partial<Omit<Webhook, 'id'>>) =>
+    setTypebot((typebot) => {
+      typebot.webhooks.byId[webhookId] = {
+        ...typebot.webhooks.byId[webhookId],
+        ...updates,
+      }
+    }),
+  deleteWebhook: (webhookId: string) => {
+    setTypebot(deleteWebhookDraft(webhookId))
+  },
+})
+
+export const deleteWebhookDraft =
+  (webhookId?: string) => (typebot: WritableDraft<Typebot>) => {
+    if (!webhookId) return
+    delete typebot.webhooks.byId[webhookId]
+    const index = typebot.webhooks.allIds.indexOf(webhookId)
+    if (index !== -1) typebot.webhooks.allIds.splice(index, 1)
+  }