fix(editor): 🐛 Duplicate steps with items

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

@@ -6,13 +6,12 @@ import {
   Block,
   DraggableStep,
   DraggableStepType,
-  IntegrationStepType,
   StepIndices,
   Typebot,
 } from 'models'
 import { SetTypebot } from '../TypebotContext'
 import { cleanUpEdgeDraft } from './edges'
-import { createStepDraft } from './steps'
+import { createStepDraft, duplicateStepDraft } from './steps'
 
 export type BlocksActions = {
   createBlock: (
@@ -66,11 +65,7 @@ const blocksActions = (setTypebot: SetTypebot): BlocksActions => ({
           ...block,
           title: `${block.title} copy`,
           id,
-          steps: block.steps.map((s) =>
+          steps: block.steps.map(duplicateStepDraft(id)),
-            s.type === IntegrationStepType.WEBHOOK
-              ? { ...s, blockId: id, id: cuid(), webhookId: cuid() }
-              : { ...s, blockId: id, id: cuid() }
-          ),
           graphCoordinates: {
             x: block.graphCoordinates.x + 200,
             y: block.graphCoordinates.y + 100,

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

@@ -38,7 +38,7 @@ export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
             ).items.findIndex(byId(edge.from.itemId))
           : null
 
-        isDefined(itemIndex)
+        isDefined(itemIndex) && itemIndex !== -1
           ? addEdgeIdToItem(typebot, newEdge.id, {
               blockIndex,
               stepIndex,

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

@@ -86,4 +86,11 @@ const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
     ),
 })
 
-export { itemsAction }
+const duplicateItemDraft = (stepId: string) => (item: Item) => ({
+  ...item,
+  id: cuid(),
+  stepId,
+  outgoingEdgeId: undefined,
+})
+
+export { itemsAction, duplicateItemDraft }

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

@@ -4,7 +4,6 @@ import {
   DraggableStep,
   DraggableStepType,
   StepIndices,
-  IntegrationStepType,
 } from 'models'
 import { parseNewStep } from 'services/typebots/typebots'
 import { removeEmptyBlocks } from './blocks'
@@ -13,7 +12,8 @@ import { SetTypebot } from '../TypebotContext'
 import produce from 'immer'
 import { cleanUpEdgeDraft, deleteEdgeDraft } from './edges'
 import cuid from 'cuid'
-import { byId } from 'utils'
+import { byId, isWebhookStep, stepHasItems } from 'utils'
+import { duplicateItemDraft } from './items'
 
 export type StepsActions = {
   createStep: (
@@ -54,19 +54,8 @@ const stepsAction = (setTypebot: SetTypebot): StepsActions => ({
   duplicateStep: ({ blockIndex, stepIndex }: StepIndices) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
-        const step = typebot.blocks[blockIndex].steps[stepIndex]
+        const step = { ...typebot.blocks[blockIndex].steps[stepIndex] }
-        const id = cuid()
+        const newStep = duplicateStepDraft(step.blockId)(step)
-        const newStep: Step =
-          step.type === IntegrationStepType.WEBHOOK
-            ? {
-                ...step,
-                id,
-                webhookId: cuid(),
-              }
-            : {
-                ...step,
-                id,
-              }
         typebot.blocks[blockIndex].steps.splice(stepIndex + 1, 0, newStep)
       })
     ),
@@ -125,6 +114,13 @@ const moveStepToBlock = (
   { blockIndex, stepIndex }: StepIndices
 ) => {
   const newStep = { ...step, blockId }
+  const items = stepHasItems(step) ? step.items : []
+  items.forEach((item) => {
+    const edgeIndex = typebot.edges.findIndex(byId(item.outgoingEdgeId))
+    edgeIndex !== -1
+      ? (typebot.edges[edgeIndex].from.blockId = blockId)
+      : (newStep.outgoingEdgeId = undefined)
+  })
   if (step.outgoingEdgeId) {
     if (typebot.blocks[blockIndex].steps.length > stepIndex ?? 0) {
       deleteEdgeDraft(typebot, step.outgoingEdgeId)
@@ -139,4 +135,22 @@ const moveStepToBlock = (
   typebot.blocks[blockIndex].steps.splice(stepIndex ?? 0, 0, newStep)
 }
 
-export { stepsAction, createStepDraft }
+const duplicateStepDraft =
+  (blockId: string) =>
+  (step: Step): Step => {
+    const stepId = cuid()
+    return {
+      ...step,
+      blockId,
+      id: stepId,
+      items: stepHasItems(step)
+        ? step.items.map(duplicateItemDraft(stepId))
+        : undefined,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore
+      webhookId: isWebhookStep(step) ? cuid() : undefined,
+      outgoingEdgeId: undefined,
+    }
+  }
+
+export { stepsAction, createStepDraft, duplicateStepDraft }