@flowuent-org/diagramming-core 1.0.7 → 1.1.0

package/dist/out-tsc/packages/diagrams/src/lib/components/automation/AutomationNoteNode.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { Box, Typography } from '@mui/material';
+import { getIconByName } from '../../utils/iconMapper';
+export const AutomationNoteNode = ({ data, selected }) => {
+    const nodeRef = useRef(null);
+    // Get the icon component based on the iconName, default to DescriptionIcon
+    const IconComponent = getIconByName(data.iconName || 'Description');
+    // Use consistent colors with other automation nodes
+    const colors = {
+        backgroundColor: '#181C25', // Default automation node background
+        textColor: '#ffffff',
+        borderColor: '#1e293b',
+        iconBg: '#3b82f6' // Default blue for icon background
+    };
+    // Debug logging for node dimensions
+    useEffect(() => {
+        if (nodeRef.current) {
+            const rect = nodeRef.current.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(nodeRef.current);
+            console.log('AutomationNoteNode Debug:', {
+                nodeId: data.label,
+                actualDimensions: {
+                    width: rect.width,
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top
+                },
+                computedStyle: {
+                    width: computedStyle.width,
+                    height: computedStyle.height,
+                    padding: computedStyle.padding,
+                    border: computedStyle.border,
+                    boxShadow: computedStyle.boxShadow,
+                    margin: computedStyle.margin
+                },
+                handlePositions: {
+                    left: '-8px',
+                    right: '-8px'
+                }
+            });
+        }
+    }, [data.label]);
+    return (_jsxs(Box, { ref: nodeRef, sx: {
+            width: '336px',
+            minHeight: '150px',
+            backgroundColor: colors.backgroundColor,
+            border: selected ? `2px solid ${colors.borderColor}` : `1px solid ${colors.borderColor}`,
+            borderRadius: '12px',
+            padding: '0',
+            color: colors.textColor,
+            position: 'relative',
+            boxShadow: selected ? `0 0 0 2px rgba(59, 130, 246, 0.5)` : '0 4px 8px rgba(0, 0, 0, 0.3)',
+            transition: 'all 0.2s ease',
+            cursor: 'pointer',
+            overflow: 'hidden',
+        }, children: [_jsx(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    p: 2,
+                    borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+                }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1.5 }, children: [_jsx(Box, { sx: {
+                                width: '32px',
+                                height: '32px',
+                                backgroundColor: colors.iconBg,
+                                borderRadius: '6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsx(IconComponent, { sx: { color: 'white', fontSize: '18px' } }) }), _jsx(Typography, { variant: "h6", sx: { fontWeight: 600, fontSize: '16px' }, children: data.label })] }) }), _jsx(Box, { sx: { p: 2 }, children: _jsx(Typography, { variant: "body2", sx: {
+                        color: colors.textColor,
+                        fontSize: '14px',
+                        lineHeight: 1.5,
+                        opacity: 0.9
+                    }, children: data.description }) }), _jsx(Box, { sx: {
+                    position: 'absolute',
+                    top: '8px',
+                    right: '8px',
+                    px: 1,
+                    py: 0.5,
+                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                    borderRadius: '4px',
+                    fontSize: '10px',
+                    fontWeight: 500,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.5px'
+                }, children: data.noteType || 'note' }), _jsx(Handle, { type: "target", position: Position.Left, id: "left", style: {
+                    background: colors.borderColor,
+                    width: '12px',
+                    height: '12px',
+                    border: '2px solid white',
+                    left: '-8px',
+                    opacity: 0, // Hidden but functional
+                } }), _jsx(Handle, { type: "source", position: Position.Right, id: "right", style: {
+                    background: colors.borderColor,
+                    width: '12px',
+                    height: '12px',
+                    border: '2px solid white',
+                    right: '-8px',
+                    opacity: 0, // Hidden but functional
+                } })] }));
+};
+//# sourceMappingURL=AutomationNoteNode.js.map

package/dist/out-tsc/packages/diagrams/src/lib/components/automation/AutomationNoteNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutomationNoteNode.js","sourceRoot":"","sources":["../../../../../../../../packages/diagrams/src/lib/components/automation/AutomationNoteNode.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/packages/diagrams/src/lib/components/automation/AutomationSheetsNode.js

@@ -0,0 +1,494 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box, Typography, Chip, IconButton, Card, CardContent, Button } from '@mui/material';
+import { TableChart as TableChartIcon, AccessTime as AccessTimeIcon, Send as SendIcon, Settings as SettingsIcon, TableRows as TableRowsIcon, Email as EmailIcon, Description as DescriptionIcon, Drafts as DraftsIcon, Add as AddIcon, CheckCircle as CheckCircleIcon, Settings as ConfigureIcon, Error as ErrorIcon, ArrowForwardIos as ArrowForwardIcon, WhatsApp as WhatsAppIcon, Phone as PhoneIcon } from '@mui/icons-material';
+import { RiCloseLine } from 'react-icons/ri';
+import ReactJson from 'react-json-view';
+import { getIconByName } from '../../utils/iconMapper';
+import { useTranslation } from 'react-i18next';
+import { useDiagram } from '../../contexts/DiagramProvider';
+export const AutomationSheetsNode = ({ data, selected }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { t } = useTranslation();
+    const [isJsonOpen, setIsJsonOpen] = useState(false);
+    const rootRef = useRef(null);
+    const portalRef = useRef(null);
+    const nodeRef = useRef(null);
+    const nodeId = useNodeId();
+    const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+    const enableJson = useDiagram((state) => { var _a; return (_a = state.enableNodeJsonPopover) !== null && _a !== void 0 ? _a : true; });
+    // Get the icon component based on the iconName
+    const IconComponent = getIconByName(data.iconName || 'TableChart');
+    // Resolve export options from formData or data
+    const exportOptions = (((_a = data.formData) === null || _a === void 0 ? void 0 : _a.exportOptions) || data.exportOptions) || {};
+    const showSheets = Boolean((exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.exportFormat) === 'sheets' || (exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.exportFormat) === 'both');
+    const showGmail = Boolean(exportOptions.emailSendEnabled &&
+        exportOptions.emailSender &&
+        (((_b = exportOptions.emailRecipients) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0 &&
+        exportOptions.emailSubject &&
+        exportOptions.emailMessage);
+    const showSlack = Boolean(((_c = exportOptions.slack) === null || _c === void 0 ? void 0 : _c.enabled) &&
+        ((_d = exportOptions.slack) === null || _d === void 0 ? void 0 : _d.webhookUrl) &&
+        ((_e = exportOptions.slack) === null || _e === void 0 ? void 0 : _e.channel));
+    const showWhatsApp = Boolean(((_f = exportOptions.whatsapp) === null || _f === void 0 ? void 0 : _f.enabled) &&
+        ((_g = exportOptions.whatsapp) === null || _g === void 0 ? void 0 : _g.phoneNumber));
+    // Determine Google Sheets status from provided data and execution result
+    const determineGoogleSheetsStatus = () => {
+        var _a, _b, _c;
+        // Prefer status provided by engine
+        if ((_a = data.outputStatuses) === null || _a === void 0 ? void 0 : _a.googleSheets)
+            return data.outputStatuses.googleSheets;
+        // Required config check (accepts either spreadsheetId or OAuth clientId that can create one)
+        const cfg = (((_b = data.formData) === null || _b === void 0 ? void 0 : _b.sheetsConfig) || data.sheetsConfig) || {};
+        const creds = cfg.credentials || {};
+        const hasRequired = Boolean((cfg.spreadsheetId || creds.clientId) && cfg.sheetName && creds.type);
+        if (!hasRequired)
+            return 'not-set';
+        // Running inferred from node status
+        if (data.status === 'Running')
+            return 'running';
+        // Execution result inference
+        const exec = ((_c = data.formData) === null || _c === void 0 ? void 0 : _c.executionResult) || data.executionResult;
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === true)
+            return 'connected';
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === false || data.status === 'Error')
+            return 'failed';
+        return 'configured';
+    };
+    // Determine Gmail status
+    const determineGmailStatus = () => {
+        var _a, _b, _c, _d;
+        // Prefer status provided by engine
+        if ((_a = data.outputStatuses) === null || _a === void 0 ? void 0 : _a.gmail)
+            return data.outputStatuses.gmail;
+        const ex = (((_b = data.formData) === null || _b === void 0 ? void 0 : _b.exportOptions) || data.exportOptions) || {};
+        const hasRequired = Boolean(ex.emailSendEnabled && ex.emailSender && (((_c = ex.emailRecipients) === null || _c === void 0 ? void 0 : _c.length) || 0) > 0 && ex.emailSubject && ex.emailMessage);
+        if (!hasRequired)
+            return 'not-set';
+        if (data.status === 'Running')
+            return 'running';
+        const exec = ((_d = data.formData) === null || _d === void 0 ? void 0 : _d.executionResult) || data.executionResult;
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === true)
+            return 'connected';
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === false || data.status === 'Error')
+            return 'failed';
+        return 'configured';
+    };
+    // Determine Slack status
+    const determineSlackStatus = () => {
+        var _a, _b, _c, _d, _e;
+        if ((_a = data.outputStatuses) === null || _a === void 0 ? void 0 : _a.slack)
+            return data.outputStatuses.slack;
+        const slack = (((_c = (_b = data.formData) === null || _b === void 0 ? void 0 : _b.exportOptions) === null || _c === void 0 ? void 0 : _c.slack) || ((_d = data.exportOptions) === null || _d === void 0 ? void 0 : _d.slack)) || {};
+        if (!slack.enabled || !slack.webhookUrl || !slack.channel)
+            return 'not-set';
+        if (data.status === 'Running')
+            return 'running';
+        const exec = ((_e = data.formData) === null || _e === void 0 ? void 0 : _e.executionResult) || data.executionResult;
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === true)
+            return 'connected';
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === false || data.status === 'Error')
+            return 'failed';
+        return 'configured';
+    };
+    // Determine WhatsApp status
+    const determineWhatsAppStatus = () => {
+        var _a, _b, _c, _d, _e, _f;
+        if ((_a = data.outputStatuses) === null || _a === void 0 ? void 0 : _a.whatsapp)
+            return data.outputStatuses.whatsapp;
+        const whatsapp = (((_c = (_b = data.formData) === null || _b === void 0 ? void 0 : _b.exportOptions) === null || _c === void 0 ? void 0 : _c.whatsapp) || ((_d = data.exportOptions) === null || _d === void 0 ? void 0 : _d.whatsapp)) || {};
+        // Check if Twilio is configured
+        if ((_e = whatsapp.twilio) === null || _e === void 0 ? void 0 : _e.enabled) {
+            const twilioConfig = whatsapp.twilio;
+            const hasRequiredTwilio = Boolean(twilioConfig.accountSid &&
+                twilioConfig.authToken &&
+                twilioConfig.fromNumber &&
+                whatsapp.phoneNumber);
+            if (!hasRequiredTwilio)
+                return 'not-set';
+        }
+        else {
+            // Fallback to basic WhatsApp Web check
+            if (!whatsapp.enabled || !whatsapp.phoneNumber)
+                return 'not-set';
+        }
+        if (data.status === 'Running')
+            return 'running';
+        const exec = ((_f = data.formData) === null || _f === void 0 ? void 0 : _f.executionResult) || data.executionResult;
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === true)
+            return 'connected';
+        if ((exec === null || exec === void 0 ? void 0 : exec.success) === false || data.status === 'Error')
+            return 'failed';
+        return 'configured';
+    };
+    const getNodeStatus = () => {
+        const gs = determineGoogleSheetsStatus();
+        const gm = determineGmailStatus();
+        const sl = determineSlackStatus();
+        const wa = determineWhatsAppStatus();
+        if (gs === 'failed' || gm === 'failed' || sl === 'failed' || wa === 'failed')
+            return 'Failed';
+        if (gs === 'running' || gm === 'running' || sl === 'running' || wa === 'running')
+            return 'Running';
+        if ((gs === 'connected' || gs === 'not-set') &&
+            (gm === 'connected' || gm === 'not-set') &&
+            (sl === 'connected' || sl === 'not-set') &&
+            (wa === 'connected' || wa === 'not-set'))
+            return 'Success';
+        if ((gs === 'configured' || gs === 'not-set') &&
+            (gm === 'configured' || gm === 'not-set') &&
+            (sl === 'configured' || sl === 'not-set') &&
+            (wa === 'configured' || wa === 'not-set'))
+            return 'Ready';
+        return 'Mixed Status';
+    };
+    // Status badge (shared)
+    const StatusBadge = ({ status }) => {
+        const cfg = (status === 'not-set' ? { icon: _jsx(ErrorIcon, { sx: { fontSize: '12px' } }), label: t('automation.sheetsNode.status.notSet'), bg: '#6b7280' } :
+            status === 'configured' ? { icon: _jsx(ConfigureIcon, { sx: { fontSize: '12px' } }), label: t('automation.sheetsNode.status.configured'), bg: '#3b82f6' } :
+                status === 'running' ? { icon: _jsx(SettingsIcon, { sx: { fontSize: '12px' } }), label: t('automation.sheetsNode.status.running'), bg: '#f59e0b' } :
+                    status === 'connected' ? { icon: _jsx(CheckCircleIcon, { sx: { fontSize: '12px' } }), label: t('automation.sheetsNode.status.connected'), bg: '#10b981' } :
+                        { icon: _jsx(ErrorIcon, { sx: { fontSize: '12px' } }), label: t('automation.sheetsNode.status.failed'), bg: '#ef4444' });
+        return (_jsx(Chip, { icon: cfg.icon, label: cfg.label, size: "small", sx: {
+                backgroundColor: cfg.bg,
+                color: 'white',
+                fontSize: '11px',
+                height: '20px',
+                '& .MuiChip-icon': { fontSize: '12px' },
+            } }));
+    };
+    // WhatsApp message sending function
+    const sendWhatsAppMessage = (phoneNumber, data) => {
+        const message = `
+Automation Result:
+------------------
+Name: ${data.name || 'Automation Workflow'}
+Score: ${data.score || 'N/A'}
+Status: ${data.status || 'Completed'}
+Timestamp: ${new Date().toLocaleString()}
+Data: ${JSON.stringify(data, null, 2)}
+        `;
+        const encodedMsg = encodeURIComponent(message);
+        const url = `https://wa.me/${phoneNumber}?text=${encodedMsg}`;
+        window.open(url, '_blank');
+    };
+    const handleJsonClick = () => {
+        if (nodeId)
+            setSelectedNode(nodeId);
+        if (!enableJson)
+            return;
+        setIsJsonOpen(!isJsonOpen);
+    };
+    const handleClose = () => {
+        setIsJsonOpen(false);
+        // Clean up portal
+        if (rootRef.current) {
+            rootRef.current.unmount();
+            rootRef.current = null;
+        }
+        if (portalRef.current) {
+            document.body.removeChild(portalRef.current);
+            portalRef.current = null;
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isJsonOpen && !event.target.closest('#automation-json-popover')) {
+                handleClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isJsonOpen]);
+    useEffect(() => {
+        var _a;
+        if (isJsonOpen) {
+            const portalRoot = document.createElement('div');
+            document.body.appendChild(portalRoot);
+            portalRef.current = portalRoot;
+            const root = createRoot(portalRoot);
+            rootRef.current = root;
+            root.render(_jsx(Card, { id: "automation-json-popover", sx: {
+                    position: 'fixed',
+                    top: 0,
+                    right: 0,
+                    zIndex: 9999,
+                    width: '400px',
+                    height: '100vh',
+                    overflow: 'auto',
+                    bgcolor: '#242424',
+                    color: '#fff',
+                    border: '1px solid #333',
+                    '&::-webkit-scrollbar': {
+                        width: '6px',
+                    },
+                    '&::-webkit-scrollbar-track': {
+                        background: 'transparent',
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                        background: '#444',
+                        borderRadius: '3px',
+                        '&:hover': {
+                            background: '#666',
+                        },
+                    },
+                }, children: _jsxs(CardContent, { sx: { bgcolor: '#242424', color: '#fff' }, children: [_jsx(IconButton, { "aria-label": "close", onClick: handleClose, sx: {
+                                color: '#999',
+                                '&:hover': {
+                                    color: '#fff',
+                                    bgcolor: 'rgba(255, 255, 255, 0.1)',
+                                },
+                            }, children: _jsx(RiCloseLine, {}) }), ((_a = data.formData) === null || _a === void 0 ? void 0 : _a.executionResult) && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Typography, { variant: "h6", sx: { color: '#fff', mb: 1 }, children: t('automation.common.executionResult') }), _jsxs(Box, { sx: {
+                                        bgcolor: data.formData.executionResult.success ? '#1e3a8a' : '#dc2626',
+                                        p: 1,
+                                        borderRadius: 1,
+                                        mb: 1
+                                    }, children: [_jsxs(Typography, { variant: "body2", sx: { color: '#fff' }, children: [t('automation.common.status'), ": ", data.formData.executionResult.success ? t('automation.common.success') : t('automation.common.failed')] }), _jsxs(Typography, { variant: "body2", sx: { color: '#fff' }, children: [t('automation.common.timestamp'), ": ", new Date(data.formData.executionResult.timestamp).toLocaleString()] }), data.formData.executionResult.error && (_jsxs(Typography, { variant: "body2", sx: { color: '#fff' }, children: [t('automation.common.error'), ": ", data.formData.executionResult.error] }))] }), _jsx(Typography, { variant: "h6", sx: { color: '#fff', mb: 1 }, children: "Sheets Data" }), _jsx(ReactJson, { theme: 'monokai', src: data.formData.executionResult.data, collapsed: false })] })), _jsx(Typography, { variant: "h6", sx: { color: '#fff', mb: 1 }, children: "Full Node Data" }), _jsx(ReactJson, { theme: 'monokai', src: data.formData || data, collapsed: false })] }) }));
+        }
+        else {
+            // Clean up when closing
+            if (rootRef.current) {
+                rootRef.current.unmount();
+                rootRef.current = null;
+            }
+            if (portalRef.current) {
+                document.body.removeChild(portalRef.current);
+                portalRef.current = null;
+            }
+        }
+    }, [isJsonOpen, data]);
+    // Output Method Component for Google Sheets
+    const GoogleSheetsOutputMethod = () => {
+        var _a, _b, _c;
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                py: 2,
+                px: 2,
+                borderBottom: '1px solid #334155',
+                '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                },
+                cursor: 'pointer',
+            }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                                width: '32px',
+                                height: '32px',
+                                backgroundColor: '#10b981',
+                                borderRadius: '6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsx(TableChartIcon, { sx: { color: 'white', fontSize: '18px' } }) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: {
+                                        color: '#ffffff',
+                                        fontSize: '14px',
+                                        fontWeight: 600,
+                                        mb: 0.5
+                                    }, children: t('automation.sheetsNode.googleSheets') }), _jsx(Typography, { variant: "body2", sx: {
+                                        color: '#94a3b8',
+                                        fontSize: '12px',
+                                        mb: 0.5
+                                    }, children: t('automation.sheetsNode.readWriteRows') }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(DescriptionIcon, { sx: { fontSize: '12px', color: '#94a3b8' } }), _jsxs(Typography, { variant: "body2", sx: {
+                                                color: '#94a3b8',
+                                                fontSize: '11px'
+                                            }, children: [t('automation.sheetsNode.sheet'), ": ", ((_a = data.sheetsConfig) === null || _a === void 0 ? void 0 : _a.sheetName) || ((_c = (_b = data.formData) === null || _b === void 0 ? void 0 : _b.sheetsConfig) === null || _c === void 0 ? void 0 : _c.sheetName) || 'Sheet'] })] })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(StatusBadge, { status: determineGoogleSheetsStatus() }), _jsx(ArrowForwardIcon, { sx: { fontSize: '14px', color: '#94a3b8' } })] })] }));
+    };
+    // Output Method Component for Gmail
+    const GmailOutputMethod = () => {
+        var _a, _b;
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                py: 2,
+                px: 2,
+                borderBottom: '1px solid #334155',
+                '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                },
+                cursor: 'pointer',
+            }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                                width: '32px',
+                                height: '32px',
+                                backgroundColor: '#dc2626',
+                                borderRadius: '6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsx(EmailIcon, { sx: { color: 'white', fontSize: '18px' } }) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: {
+                                        color: '#ffffff',
+                                        fontSize: '14px',
+                                        fontWeight: 600,
+                                        mb: 0.5
+                                    }, children: t('automation.sheetsNode.gmail') }), _jsx(Typography, { variant: "body2", sx: {
+                                        color: '#94a3b8',
+                                        fontSize: '12px',
+                                        mb: 0.5
+                                    }, children: t('automation.sheetsNode.sendEmail') }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(DraftsIcon, { sx: { fontSize: '12px', color: '#94a3b8' } }), _jsxs(Typography, { variant: "body2", sx: {
+                                                color: '#94a3b8',
+                                                fontSize: '11px'
+                                            }, children: [t('automation.sheetsNode.drafts'), ": ", ((_b = (_a = data.exportOptions) === null || _a === void 0 ? void 0 : _a.emailRecipients) === null || _b === void 0 ? void 0 : _b.length) || 0] })] })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(StatusBadge, { status: determineGmailStatus() }), _jsx(ArrowForwardIcon, { sx: { fontSize: '14px', color: '#94a3b8' } })] })] }));
+    };
+    // Output Method Component for Slack
+    const SlackOutputMethod = () => {
+        var _a, _b, _c;
+        const slack = (((_b = (_a = data.formData) === null || _a === void 0 ? void 0 : _a.exportOptions) === null || _b === void 0 ? void 0 : _b.slack) || ((_c = data.exportOptions) === null || _c === void 0 ? void 0 : _c.slack)) || {};
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                py: 2,
+                px: 2,
+                borderBottom: '1px solid #334155',
+                '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                },
+                cursor: 'pointer',
+            }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                                width: '32px',
+                                height: '32px',
+                                backgroundColor: '#4A154B',
+                                borderRadius: '6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsx(SendIcon, { sx: { color: 'white', fontSize: '18px' } }) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: {
+                                        color: '#ffffff',
+                                        fontSize: '14px',
+                                        fontWeight: 600,
+                                        mb: 0.5
+                                    }, children: t('automation.sheetsNode.slack') }), _jsx(Typography, { variant: "body2", sx: {
+                                        color: '#94a3b8',
+                                        fontSize: '12px',
+                                        mb: 0.5
+                                    }, children: t('automation.sheetsNode.sendMessage') }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(TableRowsIcon, { sx: { fontSize: '12px', color: '#94a3b8' } }), _jsxs(Typography, { variant: "body2", sx: {
+                                                color: '#94a3b8',
+                                                fontSize: '11px'
+                                            }, children: [t('automation.sheetsNode.channel'), ": ", slack.channel ? `#${slack.channel}` : t('automation.sheetsNode.notSet')] })] })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(StatusBadge, { status: determineSlackStatus() }), _jsx(ArrowForwardIcon, { sx: { fontSize: '14px', color: '#94a3b8' } })] })] }));
+    };
+    // Output Method Component for WhatsApp
+    const WhatsAppOutputMethod = () => {
+        var _a, _b, _c, _d, _e, _f;
+        const whatsapp = (((_b = (_a = data.formData) === null || _a === void 0 ? void 0 : _a.exportOptions) === null || _b === void 0 ? void 0 : _b.whatsapp) || ((_c = data.exportOptions) === null || _c === void 0 ? void 0 : _c.whatsapp)) || {};
+        const isTwilioEnabled = (_d = whatsapp.twilio) === null || _d === void 0 ? void 0 : _d.enabled;
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                py: 2,
+                px: 2,
+                borderBottom: '1px solid #334155',
+                '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                },
+                cursor: 'pointer',
+            }, onClick: () => {
+                var _a;
+                if (whatsapp.enabled && whatsapp.phoneNumber && !isTwilioEnabled) {
+                    const executionData = ((_a = data.formData) === null || _a === void 0 ? void 0 : _a.executionResult) || {};
+                    sendWhatsAppMessage(whatsapp.phoneNumber, executionData);
+                }
+            }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                                width: '32px',
+                                height: '32px',
+                                backgroundColor: '#25D366',
+                                borderRadius: '6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsx(WhatsAppIcon, { sx: { color: 'white', fontSize: '18px' } }) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: {
+                                        color: '#ffffff',
+                                        fontSize: '14px',
+                                        fontWeight: 600,
+                                        mb: 0.5
+                                    }, children: isTwilioEnabled ? t('automation.sheetsNode.whatsappTwilio') : t('automation.sheetsNode.whatsappWeb') }), _jsx(Typography, { variant: "body2", sx: {
+                                        color: '#94a3b8',
+                                        fontSize: '12px',
+                                        mb: 0.5
+                                    }, children: isTwilioEnabled ? t('automation.sheetsNode.apiSend') : t('automation.sheetsNode.sendMessage') }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(PhoneIcon, { sx: { fontSize: '12px', color: '#94a3b8' } }), _jsxs(Typography, { variant: "body2", sx: {
+                                                color: '#94a3b8',
+                                                fontSize: '11px'
+                                            }, children: [t('automation.sheetsNode.phone'), ": ", whatsapp.phoneNumber || t('automation.sheetsNode.notSet')] })] }), isTwilioEnabled && (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }, children: _jsx(Typography, { variant: "body2", sx: {
+                                            color: ((_e = whatsapp.twilio) === null || _e === void 0 ? void 0 : _e.isSandbox) ? '#f59e0b' : '#10b981',
+                                            fontSize: '10px',
+                                            fontWeight: 500
+                                        }, children: ((_f = whatsapp.twilio) === null || _f === void 0 ? void 0 : _f.isSandbox) ? t('automation.sheetsNode.sandboxMode') : t('automation.sheetsNode.productionMode') }) }))] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(StatusBadge, { status: determineWhatsAppStatus() }), _jsx(ArrowForwardIcon, { sx: { fontSize: '14px', color: '#94a3b8' } })] })] }));
+    };
+    return (_jsxs(Box, { ref: nodeRef, sx: {
+            width: '380px',
+            minHeight: '280px',
+            backgroundColor: '#181C25', // Darker background like in image
+            border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
+            borderRadius: '12px',
+            padding: '0',
+            color: '#ffffff',
+            position: 'relative',
+            boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
+            transition: 'all 0.2s ease',
+            cursor: 'pointer',
+            overflow: 'hidden',
+        }, onClick: handleJsonClick, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    p: 3,
+                    borderBottom: '1px solid #334155'
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1.5 }, children: [_jsx(Box, { sx: {
+                                    width: '32px',
+                                    height: '32px',
+                                    backgroundColor: '#3b82f6', // Blue color like in image
+                                    borderRadius: '6px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                }, children: _jsx(IconComponent, { sx: { color: 'white', fontSize: '18px' } }) }), _jsx(Typography, { variant: "h6", sx: { fontWeight: 600, fontSize: '16px' }, children: data.label })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "body2", sx: {
+                                    color: getNodeStatus() === 'Failed' ? '#ef4444' : getNodeStatus() === 'Running' ? '#f59e0b' : getNodeStatus() === 'Success' ? '#10b981' : '#f59e0b',
+                                    fontSize: '12px',
+                                    fontWeight: 500
+                                }, children: (() => {
+                                    const status = getNodeStatus();
+                                    if (status === 'Failed')
+                                        return t('automation.sheetsNode.status.failed');
+                                    if (status === 'Running')
+                                        return t('automation.sheetsNode.status.running');
+                                    if (status === 'Success')
+                                        return t('automation.sheetsNode.status.success');
+                                    if (status === 'Ready')
+                                        return t('automation.sheetsNode.status.ready');
+                                    if (status === 'Mixed Status')
+                                        return t('automation.sheetsNode.status.mixed');
+                                    return status;
+                                })() }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(AccessTimeIcon, { sx: { fontSize: '12px', color: '#94a3b8' } }), _jsxs(Typography, { variant: "body2", sx: { color: '#94a3b8', fontSize: '11px' }, children: [t('automation.common.lastRun'), ": ", data.lastRun || '2m ago'] })] })] })] }), _jsxs(Box, { children: [showSheets && _jsx(GoogleSheetsOutputMethod, {}), showGmail && _jsx(GmailOutputMethod, {}), showSlack && _jsx(SlackOutputMethod, {}), showWhatsApp && _jsx(WhatsAppOutputMethod, {}), !showGmail && !showSlack && !showWhatsApp && (_jsx(Typography, { variant: "body2", sx: { color: '#94a3b8', p: 2 }, children: t('automation.sheetsNode.noOutputMethodsConfigured') }))] }), _jsx(Box, { sx: {
+                    p: 2,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    borderTop: '1px solid #334155'
+                }, children: _jsx(Button, { startIcon: _jsx(AddIcon, { sx: { fontSize: '16px' } }), sx: {
+                        color: '#94a3b8',
+                        fontSize: '12px',
+                        textTransform: 'none',
+                        '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                            color: '#ffffff',
+                        },
+                    }, children: t('automation.sheetsNode.addConfiguration') }) }), _jsx(Handle, { type: "target", position: Position.Left, id: "left", style: {
+                    background: '#3b82f6',
+                    width: '12px',
+                    height: '12px',
+                    border: '2px solid white',
+                    left: '-8px',
+                    opacity: 0, // Hidden but functional
+                } }), _jsx(Handle, { type: "source", position: Position.Right, id: "right", style: {
+                    background: '#3b82f6',
+                    width: '12px',
+                    height: '12px',
+                    border: '2px solid white',
+                    right: '-8px',
+                    opacity: 0, // Hidden but functional
+                } })] }));
+};
+//# sourceMappingURL=AutomationSheetsNode.js.map