refactor: ♻️ Rename step to block

apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx

@@ -17,22 +17,22 @@ export const DrawingEdge = () => {
     connectingIds,
     sourceEndpoints,
     targetEndpoints,
-    blocksCoordinates,
+    groupsCoordinates,
   } = useGraph()
   const { createEdge } = useTypebot()
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
 
-  const sourceBlockCoordinates =
-    blocksCoordinates && blocksCoordinates[connectingIds?.source.blockId ?? '']
-  const targetBlockCoordinates =
-    blocksCoordinates && blocksCoordinates[connectingIds?.target?.blockId ?? '']
+  const sourceGroupCoordinates =
+    groupsCoordinates && groupsCoordinates[connectingIds?.source.groupId ?? '']
+  const targetGroupCoordinates =
+    groupsCoordinates && groupsCoordinates[connectingIds?.target?.groupId ?? '']
 
   const sourceTop = useMemo(() => {
     if (!connectingIds) return 0
     return getEndpointTopOffset({
       endpoints: sourceEndpoints,
       graphOffsetY: graphPosition.y,
-      endpointId: connectingIds.source.itemId ?? connectingIds.source.stepId,
+      endpointId: connectingIds.source.itemId ?? connectingIds.source.blockId,
       graphScale: graphPosition.scale,
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -43,32 +43,32 @@ export const DrawingEdge = () => {
     return getEndpointTopOffset({
       endpoints: targetEndpoints,
       graphOffsetY: graphPosition.y,
-      endpointId: connectingIds.target?.stepId,
+      endpointId: connectingIds.target?.blockId,
       graphScale: graphPosition.scale,
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectingIds, targetEndpoints])
 
   const path = useMemo(() => {
-    if (!sourceTop || !sourceBlockCoordinates) return ``
+    if (!sourceTop || !sourceGroupCoordinates) return ``
 
-    return targetBlockCoordinates
+    return targetGroupCoordinates
       ? computeConnectingEdgePath({
-          sourceBlockCoordinates,
-          targetBlockCoordinates,
+          sourceGroupCoordinates,
+          targetGroupCoordinates,
           sourceTop,
           targetTop,
           graphScale: graphPosition.scale,
         })
       : computeEdgePathToMouse({
-          sourceBlockCoordinates,
+          sourceGroupCoordinates,
           mousePosition,
           sourceTop,
         })
   }, [
     sourceTop,
-    sourceBlockCoordinates,
-    targetBlockCoordinates,
+    sourceGroupCoordinates,
+    targetGroupCoordinates,
     targetTop,
     mousePosition,
     graphPosition.scale,

apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx

@@ -13,37 +13,37 @@ import { isFreePlan } from 'services/workspace'
 import { byId, isDefined } from 'utils'
 
 type Props = {
-  blockId: string
+  groupId: string
   answersCounts: AnswersCount[]
   onUnlockProPlanClick?: () => void
 }
 
 export const DropOffEdge = ({
   answersCounts,
-  blockId,
+  groupId,
   onUnlockProPlanClick,
 }: Props) => {
   const { workspace } = useWorkspace()
-  const { sourceEndpoints, blocksCoordinates, graphPosition } = useGraph()
+  const { sourceEndpoints, groupsCoordinates, graphPosition } = useGraph()
   const { publishedTypebot } = useTypebot()
 
   const isUserOnFreePlan = isFreePlan(workspace)
 
   const totalAnswers = useMemo(
-    () => answersCounts.find((a) => a.blockId === blockId)?.totalAnswers,
-    [answersCounts, blockId]
+    () => answersCounts.find((a) => a.groupId === groupId)?.totalAnswers,
+    [answersCounts, groupId]
   )
 
   const { totalDroppedUser, dropOffRate } = useMemo(() => {
     if (!publishedTypebot || totalAnswers === undefined)
       return { previousTotal: undefined, dropOffRate: undefined }
-    const previousBlockIds = publishedTypebot.edges
+    const previousGroupIds = publishedTypebot.edges
       .map((edge) =>
-        edge.to.blockId === blockId ? edge.from.blockId : undefined
+        edge.to.groupId === groupId ? edge.from.groupId : undefined
       )
       .filter(isDefined)
     const previousTotal = answersCounts
-      .filter((a) => previousBlockIds.includes(a.blockId))
+      .filter((a) => previousGroupIds.includes(a.groupId))
       .reduce((prev, acc) => acc.totalAnswers + prev, 0)
     if (previousTotal === 0)
       return { previousTotal: undefined, dropOffRate: undefined }
@@ -53,25 +53,25 @@ export const DropOffEdge = ({
       totalDroppedUser,
       dropOffRate: Math.round((totalDroppedUser / previousTotal) * 100),
     }
-  }, [answersCounts, blockId, totalAnswers, publishedTypebot])
+  }, [answersCounts, groupId, totalAnswers, publishedTypebot])
 
-  const block = publishedTypebot?.blocks.find(byId(blockId))
+  const group = publishedTypebot?.groups.find(byId(groupId))
   const sourceTop = useMemo(
     () =>
       getEndpointTopOffset({
         endpoints: sourceEndpoints,
         graphOffsetY: graphPosition.y,
-        endpointId: block?.steps[block.steps.length - 1].id,
+        endpointId: group?.blocks[group.blocks.length - 1].id,
         graphScale: graphPosition.scale,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [block?.steps, sourceEndpoints, blocksCoordinates]
+    [group?.blocks, sourceEndpoints, groupsCoordinates]
   )
 
   const labelCoordinates = useMemo(() => {
-    if (!blocksCoordinates[blockId]) return
-    return computeSourceCoordinates(blocksCoordinates[blockId], sourceTop ?? 0)
-  }, [blocksCoordinates, blockId, sourceTop])
+    if (!groupsCoordinates[groupId]) return
+    return computeSourceCoordinates(groupsCoordinates[groupId], sourceTop ?? 0)
+  }, [groupsCoordinates, groupId, sourceTop])
 
   if (!labelCoordinates) return <></>
   return (

apps/builder/components/shared/Graph/Edges/Edge.tsx

@@ -25,7 +25,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
     previewingEdge,
     sourceEndpoints,
     targetEndpoints,
-    blocksCoordinates,
+    groupsCoordinates,
     graphPosition,
     isReadOnly,
     setPreviewingEdge,
@@ -37,10 +37,10 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
 
   const isPreviewing = isMouseOver || previewingEdge?.id === edge.id
 
-  const sourceBlockCoordinates =
-    blocksCoordinates && blocksCoordinates[edge.from.blockId]
-  const targetBlockCoordinates =
-    blocksCoordinates && blocksCoordinates[edge.to.blockId]
+  const sourceGroupCoordinates =
+    groupsCoordinates && groupsCoordinates[edge.from.groupId]
+  const targetGroupCoordinates =
+    groupsCoordinates && groupsCoordinates[edge.to.groupId]
 
   const sourceTop = useMemo(
     () =>
@@ -51,7 +51,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
         graphScale: graphPosition.scale,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [sourceBlockCoordinates?.y, edge, sourceEndpoints, refreshEdge]
+    [sourceGroupCoordinates?.y, edge, sourceEndpoints, refreshEdge]
   )
 
   useEffect(() => {
@@ -62,7 +62,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
     getEndpointTopOffset({
       endpoints: targetEndpoints,
       graphOffsetY: graphPosition.y,
-      endpointId: edge?.to.stepId,
+      endpointId: edge?.to.blockId,
       graphScale: graphPosition.scale,
     })
   )
@@ -71,24 +71,24 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
       getEndpointTopOffset({
         endpoints: targetEndpoints,
         graphOffsetY: graphPosition.y,
-        endpointId: edge?.to.stepId,
+        endpointId: edge?.to.blockId,
         graphScale: graphPosition.scale,
       })
     )
   }, [
-    targetBlockCoordinates?.y,
+    targetGroupCoordinates?.y,
     targetEndpoints,
     graphPosition.y,
-    edge?.to.stepId,
+    edge?.to.blockId,
     graphPosition.scale,
   ])
 
   const path = useMemo(() => {
-    if (!sourceBlockCoordinates || !targetBlockCoordinates || !sourceTop)
+    if (!sourceGroupCoordinates || !targetGroupCoordinates || !sourceTop)
       return ``
     const anchorsPosition = getAnchorsPosition({
-      sourceBlockCoordinates,
-      targetBlockCoordinates,
+      sourceGroupCoordinates,
+      targetGroupCoordinates,
       sourceTop,
       targetTop,
       graphScale: graphPosition.scale,
@@ -96,10 +96,10 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
     return computeEdgePath(anchorsPosition)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    sourceBlockCoordinates?.x,
-    sourceBlockCoordinates?.y,
-    targetBlockCoordinates?.x,
-    targetBlockCoordinates?.y,
+    sourceGroupCoordinates?.x,
+    sourceGroupCoordinates?.y,
+    targetGroupCoordinates?.x,
+    targetGroupCoordinates?.y,
     sourceTop,
   ])
 

apps/builder/components/shared/Graph/Edges/Edges.tsx

@@ -34,9 +34,9 @@ export const Edges = ({
       ))}
       {answersCounts?.slice(1)?.map((answerCount) => (
         <DropOffEdge
-          key={answerCount.blockId}
+          key={answerCount.groupId}
           answersCounts={answersCounts}
-          blockId={answerCount.blockId}
+          groupId={answerCount.groupId}
           onUnlockProPlanClick={onUnlockProPlanClick}
         />
       ))}