@inspirer-dev/crm-dashboard 1.0.44 → 1.0.45

package/admin/src/components/StepFlowBuilder/flow-canvas/FlowCanvas.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import ReactFlow, {
   Background,
-  MiniMap,
   useNodesState,
   useEdgesState,
   useReactFlow,
@@ -74,12 +73,12 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
     onValidationChange?.(validation);
   }, [validation, onValidationChange]);
 
-  const fitViewWithTopPadding = useCallback(
-    (topOffset = 40) => {
-      fitView({ padding: 0.2, duration: 200 });
+  const fitViewWithOffset = useCallback(
+    ({ topOffset = 40, rightOffset = 150, targetZoom = 0.8 } = {}) => {
+      fitView({ padding: 0.3, duration: 200, maxZoom: targetZoom, minZoom: targetZoom });
       setTimeout(() => {
-        const { x, y, zoom } = getViewport();
-        setViewport({ x, y: y - topOffset, zoom }, { duration: 200 });
+        const { x, y } = getViewport();
+        setViewport({ x: x + rightOffset, y: y - topOffset, zoom: targetZoom }, { duration: 200 });
       }, 210);
     },
     [fitView, getViewport, setViewport]
@@ -292,11 +291,11 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
       setEdges(e);
 
       setTimeout(() => {
-        fitViewWithTopPadding();
+        fitViewWithOffset();
       }, 50);
     }
     isInitialMount.current = false;
-  }, [steps, setNodes, setEdges, fitViewWithTopPadding]);
+  }, [steps, setNodes, setEdges, fitViewWithOffset]);
 
   const syncToParent = useCallback(() => {
     if (isInitialMount.current) return;
@@ -403,9 +402,9 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
     const layoutedNodes = applyAutoLayout(nodes, edges);
     setNodes(layoutedNodes);
     setTimeout(() => {
-      fitViewWithTopPadding();
+      fitViewWithOffset();
     }, 50);
-  }, [nodes, edges, setNodes, fitViewWithTopPadding]);
+  }, [nodes, edges, setNodes, fitViewWithOffset]);
 
   const handleNodeUpdate = useCallback(
     (nodeId: string, data: Partial<FlowNodeData>) => {
@@ -528,26 +527,6 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
           }}
         >
           <Background color="#f0f0f0" gap={20} />
-          <MiniMap
-            nodeColor={(node) => {
-              switch (node.data?.stepType) {
-                case 'entry':
-                  return '#5cb176';
-                case 'message':
-                  return '#0077cc';
-                case 'wait':
-                  return '#e9b200';
-                case 'branch':
-                  return '#7b61ff';
-                case 'exit':
-                  return '#dc2626';
-                default:
-                  return '#999';
-              }
-            }}
-            maskColor="rgba(0, 0, 0, 0.1)"
-            style={{ background: '#f7f7f7' }}
-          />
           <FlowToolbar
             onAddNode={handleAddNode}
             onAutoLayout={handleAutoLayout}

package/admin/src/components/StepFlowBuilder/panels/BranchConfig.tsx

@@ -38,8 +38,9 @@ const BranchConfig: React.FC<BranchConfigProps> = ({ data, onUpdate, disabled })
         });
         const results = response.data?.results || [];
         setSegments(
-          results.map((s: { id: number; name: string }) => ({
+          results.map((s: { id: number; documentId: string; name: string }) => ({
             id: s.id,
+            documentId: s.documentId,
             name: s.name,
           }))
         );
@@ -58,7 +59,9 @@ const BranchConfig: React.FC<BranchConfigProps> = ({ data, onUpdate, disabled })
     onUpdate({
       config: {
         ...data.config,
-        branchSegment: segment ? { id: segment.id, name: segment.name } : null,
+        branchSegment: segment
+          ? { id: segment.id, documentId: segment.documentId, name: segment.name }
+          : null,
       },
     });
   };

package/admin/src/components/StepFlowBuilder/panels/MessageConfig.tsx

@@ -49,8 +49,9 @@ const MessageConfig: React.FC<MessageConfigProps> = ({ data, onUpdate, disabled
         );
         const results = response.data?.results || [];
         setTemplates(
-          results.map((t: { id: number; name: string; channel?: string }) => ({
+          results.map((t: { id: number; documentId: string; name: string; channel?: string }) => ({
             id: t.id,
+            documentId: t.documentId,
             name: t.name,
             channel: t.channel,
           }))
@@ -116,7 +117,12 @@ const MessageConfig: React.FC<MessageConfigProps> = ({ data, onUpdate, disabled
     const template = templates.find((t) => t.id.toString() === templateId);
     const updated = variants.map((v, i) =>
       i === index
-        ? { ...v, template: template ? { id: template.id, name: template.name } : null }
+        ? {
+            ...v,
+            template: template
+              ? { id: template.id, documentId: template.documentId, name: template.name }
+              : null,
+          }
         : v
     );
     setVariants(updated);

package/admin/src/components/StepFlowBuilder/types.ts

@@ -8,7 +8,7 @@ export type DurationUnit = 'minutes' | 'hours' | 'days';
 export interface CampaignVariant {
   id?: number;
   name: string;
-  template?: { id: number; name?: string } | null;
+  template?: { id: number; documentId: string; name?: string } | null;
   weight: number;
 }
 
@@ -21,7 +21,7 @@ export interface FlowStep {
   variants?: CampaignVariant[];
   duration?: number;
   durationUnit?: DurationUnit;
-  branchSegment?: { id: number; name?: string } | null;
+  branchSegment?: { id: number; documentId: string; name?: string } | null;
   branchSegmentId?: number;
   nextStep?: string;
   yesNextStep?: string;
@@ -36,7 +36,7 @@ export interface FlowNodeData {
     variants?: CampaignVariant[];
     duration?: number;
     durationUnit?: DurationUnit;
-    branchSegment?: { id: number; name?: string } | null;
+    branchSegment?: { id: number; documentId: string; name?: string } | null;
   };
 }
 
@@ -70,11 +70,13 @@ export interface FlowToolbarProps {
 
 export interface SegmentOption {
   id: number;
+  documentId: string;
   name: string;
 }
 
 export interface TemplateOption {
   id: number;
+  documentId: string;
   name: string;
   channel?: ChannelType;
 }

package/dist/_chunks/{FlowCanvas-C7Ea3Xdf.mjs → FlowCanvas-DYo3sZ0Q.mjs}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useContext, memo, useState, useEffect, useCallback, useRef, useMemo } from "react";
-import ReactFlow, { Handle, Position, getSimpleBezierPath, BaseEdge, EdgeLabelRenderer, useNodesState, useEdgesState, useReactFlow, useStoreApi, addEdge, Background, MiniMap } from "reactflow";
+import ReactFlow, { Handle, Position, getSimpleBezierPath, BaseEdge, EdgeLabelRenderer, useNodesState, useEdgesState, useReactFlow, useStoreApi, addEdge, Background } from "reactflow";
 import "reactflow/dist/style.css";
 import { Flex, Box, Typography, SingleSelect, SingleSelectOption, TextInput, NumberInput, Loader, Tooltip } from "@strapi/design-system";
 import { Plus, Trash, Cross, Layout } from "@strapi/icons";
@@ -1222,6 +1222,7 @@ const MessageConfig = ({ data, onUpdate, disabled }) => {
         setTemplates(
           results.map((t) => ({
             id: t.id,
+            documentId: t.documentId,
             name: t.name,
             channel: t.channel
           }))
@@ -1281,7 +1282,10 @@ const MessageConfig = ({ data, onUpdate, disabled }) => {
   const handleTemplateChange = (index, templateId) => {
     const template = templates.find((t) => t.id.toString() === templateId);
     const updated = variants.map(
-      (v, i) => i === index ? { ...v, template: template ? { id: template.id, name: template.name } : null } : v
+      (v, i) => i === index ? {
+        ...v,
+        template: template ? { id: template.id, documentId: template.documentId, name: template.name } : null
+      } : v
     );
     setVariants(updated);
     onUpdate({
@@ -1678,6 +1682,7 @@ const BranchConfig = ({ data, onUpdate, disabled }) => {
         setSegments(
           results.map((s) => ({
             id: s.id,
+            documentId: s.documentId,
             name: s.name
           }))
         );
@@ -1695,7 +1700,7 @@ const BranchConfig = ({ data, onUpdate, disabled }) => {
     onUpdate({
       config: {
         ...data.config,
-        branchSegment: segment ? { id: segment.id, name: segment.name } : null
+        branchSegment: segment ? { id: segment.id, documentId: segment.documentId, name: segment.name } : null
       }
     });
   };
@@ -3215,12 +3220,12 @@ const FlowCanvas = ({
   useEffect(() => {
     onValidationChange?.(validation);
   }, [validation, onValidationChange]);
-  const fitViewWithTopPadding = useCallback(
-    (topOffset = 40) => {
-      fitView({ padding: 0.2, duration: 200 });
+  const fitViewWithOffset = useCallback(
+    ({ topOffset = 40, rightOffset = 150, targetZoom = 0.8 } = {}) => {
+      fitView({ padding: 0.3, duration: 200, maxZoom: targetZoom, minZoom: targetZoom });
       setTimeout(() => {
-        const { x, y, zoom } = getViewport();
-        setViewport({ x, y: y - topOffset, zoom }, { duration: 200 });
+        const { x, y } = getViewport();
+        setViewport({ x: x + rightOffset, y: y - topOffset, zoom: targetZoom }, { duration: 200 });
       }, 210);
     },
     [fitView, getViewport, setViewport]
@@ -3395,11 +3400,11 @@ const FlowCanvas = ({
       setNodes(layoutedNodes);
       setEdges(e);
       setTimeout(() => {
-        fitViewWithTopPadding();
+        fitViewWithOffset();
       }, 50);
     }
     isInitialMount.current = false;
-  }, [steps, setNodes, setEdges, fitViewWithTopPadding]);
+  }, [steps, setNodes, setEdges, fitViewWithOffset]);
   const syncToParent = useCallback(() => {
     if (isInitialMount.current) return;
     if (syncTimeoutRef.current) {
@@ -3486,9 +3491,9 @@ const FlowCanvas = ({
     const layoutedNodes = applyAutoLayout(nodes, edges);
     setNodes(layoutedNodes);
     setTimeout(() => {
-      fitViewWithTopPadding();
+      fitViewWithOffset();
     }, 50);
-  }, [nodes, edges, setNodes, fitViewWithTopPadding]);
+  }, [nodes, edges, setNodes, fitViewWithOffset]);
   const handleNodeUpdate = useCallback(
     (nodeId, data) => {
       setNodes(
@@ -3604,29 +3609,6 @@ const FlowCanvas = ({
             },
             children: [
               /* @__PURE__ */ jsx(Background, { color: "#f0f0f0", gap: 20 }),
-              /* @__PURE__ */ jsx(
-                MiniMap,
-                {
-                  nodeColor: (node) => {
-                    switch (node.data?.stepType) {
-                      case "entry":
-                        return "#5cb176";
-                      case "message":
-                        return "#0077cc";
-                      case "wait":
-                        return "#e9b200";
-                      case "branch":
-                        return "#7b61ff";
-                      case "exit":
-                        return "#dc2626";
-                      default:
-                        return "#999";
-                    }
-                  },
-                  maskColor: "rgba(0, 0, 0, 0.1)",
-                  style: { background: "#f7f7f7" }
-                }
-              ),
               /* @__PURE__ */ jsx(
                 FlowToolbar,
                 {

package/dist/_chunks/{FlowCanvas-xt_QOMvb.js → FlowCanvas-GXRzXKtK.js}

@@ -1226,6 +1226,7 @@ const MessageConfig = ({ data, onUpdate, disabled }) => {
         setTemplates(
           results.map((t) => ({
             id: t.id,
+            documentId: t.documentId,
             name: t.name,
             channel: t.channel
           }))
@@ -1285,7 +1286,10 @@ const MessageConfig = ({ data, onUpdate, disabled }) => {
   const handleTemplateChange = (index, templateId) => {
     const template = templates.find((t) => t.id.toString() === templateId);
     const updated = variants.map(
-      (v, i) => i === index ? { ...v, template: template ? { id: template.id, name: template.name } : null } : v
+      (v, i) => i === index ? {
+        ...v,
+        template: template ? { id: template.id, documentId: template.documentId, name: template.name } : null
+      } : v
     );
     setVariants(updated);
     onUpdate({
@@ -1682,6 +1686,7 @@ const BranchConfig = ({ data, onUpdate, disabled }) => {
         setSegments(
           results.map((s) => ({
             id: s.id,
+            documentId: s.documentId,
             name: s.name
           }))
         );
@@ -1699,7 +1704,7 @@ const BranchConfig = ({ data, onUpdate, disabled }) => {
     onUpdate({
       config: {
         ...data.config,
-        branchSegment: segment ? { id: segment.id, name: segment.name } : null
+        branchSegment: segment ? { id: segment.id, documentId: segment.documentId, name: segment.name } : null
       }
     });
   };
@@ -3219,12 +3224,12 @@ const FlowCanvas = ({
   React.useEffect(() => {
     onValidationChange?.(validation);
   }, [validation, onValidationChange]);
-  const fitViewWithTopPadding = React.useCallback(
-    (topOffset = 40) => {
-      fitView({ padding: 0.2, duration: 200 });
+  const fitViewWithOffset = React.useCallback(
+    ({ topOffset = 40, rightOffset = 150, targetZoom = 0.8 } = {}) => {
+      fitView({ padding: 0.3, duration: 200, maxZoom: targetZoom, minZoom: targetZoom });
       setTimeout(() => {
-        const { x, y, zoom } = getViewport();
-        setViewport({ x, y: y - topOffset, zoom }, { duration: 200 });
+        const { x, y } = getViewport();
+        setViewport({ x: x + rightOffset, y: y - topOffset, zoom: targetZoom }, { duration: 200 });
       }, 210);
     },
     [fitView, getViewport, setViewport]
@@ -3399,11 +3404,11 @@ const FlowCanvas = ({
       setNodes(layoutedNodes);
       setEdges(e);
       setTimeout(() => {
-        fitViewWithTopPadding();
+        fitViewWithOffset();
       }, 50);
     }
     isInitialMount.current = false;
-  }, [steps, setNodes, setEdges, fitViewWithTopPadding]);
+  }, [steps, setNodes, setEdges, fitViewWithOffset]);
   const syncToParent = React.useCallback(() => {
     if (isInitialMount.current) return;
     if (syncTimeoutRef.current) {
@@ -3490,9 +3495,9 @@ const FlowCanvas = ({
     const layoutedNodes = applyAutoLayout(nodes, edges);
     setNodes(layoutedNodes);
     setTimeout(() => {
-      fitViewWithTopPadding();
+      fitViewWithOffset();
     }, 50);
-  }, [nodes, edges, setNodes, fitViewWithTopPadding]);
+  }, [nodes, edges, setNodes, fitViewWithOffset]);
   const handleNodeUpdate = React.useCallback(
     (nodeId, data) => {
       setNodes(
@@ -3608,29 +3613,6 @@ const FlowCanvas = ({
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Background, { color: "#f0f0f0", gap: 20 }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ReactFlow.MiniMap,
-                {
-                  nodeColor: (node) => {
-                    switch (node.data?.stepType) {
-                      case "entry":
-                        return "#5cb176";
-                      case "message":
-                        return "#0077cc";
-                      case "wait":
-                        return "#e9b200";
-                      case "branch":
-                        return "#7b61ff";
-                      case "exit":
-                        return "#dc2626";
-                      default:
-                        return "#999";
-                    }
-                  },
-                  maskColor: "rgba(0, 0, 0, 0.1)",
-                  style: { background: "#f7f7f7" }
-                }
-              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 FlowToolbar,
                 {

package/dist/_chunks/{index-CthLsTpm.mjs → index-DIiJiAQq.mjs}

@@ -4,7 +4,7 @@ import { ReactFlowProvider } from "reactflow";
 import "reactflow/dist/style.css";
 import { Field, Flex, Badge, Box } from "@strapi/design-system";
 import { useForm, useFetchClient, unstable_useContentManagerContext } from "@strapi/strapi/admin";
-import { p as parseValue, F as FlowCanvas } from "./FlowCanvas-C7Ea3Xdf.mjs";
+import { p as parseValue, F as FlowCanvas } from "./FlowCanvas-DYo3sZ0Q.mjs";
 const StepFlowBuilderInner = forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error: externalError, required, hint }, ref) => {
     const [steps, setSteps] = useState([]);

package/dist/_chunks/{index-DDY39e5N.js → index-DJHpK8cv.js}

@@ -6,7 +6,7 @@ const ReactFlow = require("reactflow");
 require("reactflow/dist/style.css");
 const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
-const FlowCanvas = require("./FlowCanvas-xt_QOMvb.js");
+const FlowCanvas = require("./FlowCanvas-GXRzXKtK.js");
 const StepFlowBuilderInner = React.forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error: externalError, required, hint }, ref) => {
     const [steps, setSteps] = React.useState([]);