efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react"
|
|
import {
|
|
ReactFlow,
|
|
ReactFlowProvider,
|
|
Background,
|
|
useReactFlow,
|
|
useNodesState,
|
|
useEdgesState,
|
|
} from "@xyflow/react"
|
|
import "@xyflow/react/dist/style.css"
|
|
import { workflowNodeTypes } from "@/components/gmail/settings/automation/workflow-nodes"
|
|
import {
|
|
workflowEdgesToFlow,
|
|
workflowNodesToFlow,
|
|
} from "@/lib/mail-automation/workflow-flow"
|
|
import { createUltimailProductDemoRuleState } from "@/components/landing/product/product-demos/ultimail-demo-workflow"
|
|
|
|
function WorkflowFlowPreviewCanvas() {
|
|
const { fitView } = useReactFlow()
|
|
const demoState = useMemo(() => createUltimailProductDemoRuleState(), [])
|
|
const initialNodes = useMemo(
|
|
() => workflowNodesToFlow(demoState.workflow.nodes),
|
|
[demoState]
|
|
)
|
|
const initialEdges = useMemo(
|
|
() => workflowEdgesToFlow(demoState.workflow.edges),
|
|
[demoState]
|
|
)
|
|
const [nodes] = useNodesState(initialNodes)
|
|
const [edges] = useEdgesState(initialEdges)
|
|
|
|
useEffect(() => {
|
|
fitView({ padding: 0.18, duration: 0 })
|
|
}, [fitView])
|
|
|
|
return (
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
nodeTypes={workflowNodeTypes}
|
|
fitView
|
|
nodesDraggable={false}
|
|
nodesConnectable={false}
|
|
elementsSelectable={false}
|
|
panOnDrag={false}
|
|
zoomOnScroll={false}
|
|
preventScrolling={false}
|
|
proOptions={{ hideAttribution: true }}
|
|
>
|
|
<Background gap={16} />
|
|
</ReactFlow>
|
|
)
|
|
}
|
|
|
|
/** Canvas ReactFlow seul — aperçu no-code sans panneaux latéraux. */
|
|
export function WorkflowFlowPreview() {
|
|
return (
|
|
<ReactFlowProvider>
|
|
<div className="h-full w-full">
|
|
<WorkflowFlowPreviewCanvas />
|
|
</div>
|
|
</ReactFlowProvider>
|
|
)
|
|
}
|