@inspirer-dev/crm-dashboard 1.0.21 → 1.0.22

package/admin/src/components/StepFlowBuilder/nodes/MessageNode.tsx

@@ -0,0 +1,78 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from 'reactflow';
+import { Flex, Typography, Badge } from '@strapi/design-system';
+import { Message } from '@strapi/icons';
+import type { FlowNodeData } from '../types';
+import { NODE_COLORS, NODE_DIMENSIONS, CHANNEL_OPTIONS } from '../constants';
+
+const MessageNode: React.FC<NodeProps<FlowNodeData>> = ({ data, selected }) => {
+  const colors = NODE_COLORS.message;
+  const channel = data.config.channel || 'telegram';
+  const variantCount = data.config.variants?.length || 0;
+  const channelLabel = CHANNEL_OPTIONS.find((c) => c.value === channel)?.label || channel;
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+        }}
+      />
+      <Flex
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        gap={1}
+        padding={3}
+        background="neutral0"
+        hasRadius
+        style={{
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : 'none',
+        }}
+      >
+        <Flex alignItems="center" gap={2}>
+          <Message style={{ color: colors.text, width: 18, height: 18 }} />
+          <Typography
+            variant="omega"
+            fontWeight="semiBold"
+            style={{ color: colors.text }}
+            ellipsis
+          >
+            {data.name}
+          </Typography>
+        </Flex>
+        <Flex gap={1}>
+          <Badge size="S" backgroundColor="neutral100" textColor="neutral700">
+            {channelLabel}
+          </Badge>
+          {variantCount > 0 && (
+            <Badge size="S" backgroundColor="primary100" textColor="primary700">
+              {variantCount} variant{variantCount !== 1 ? 's' : ''}
+            </Badge>
+          )}
+        </Flex>
+      </Flex>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+        }}
+      />
+    </>
+  );
+};
+
+export default memo(MessageNode);

package/admin/src/components/StepFlowBuilder/nodes/WaitNode.tsx

@@ -0,0 +1,71 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from 'reactflow';
+import { Flex, Typography, Badge } from '@strapi/design-system';
+import { Clock } from '@strapi/icons';
+import type { FlowNodeData } from '../types';
+import { NODE_COLORS, NODE_DIMENSIONS, DURATION_UNIT_OPTIONS } from '../constants';
+
+const WaitNode: React.FC<NodeProps<FlowNodeData>> = ({ data, selected }) => {
+  const colors = NODE_COLORS.wait;
+  const duration = data.config.duration || 1;
+  const unit = data.config.durationUnit || 'hours';
+  const unitLabel = DURATION_UNIT_OPTIONS.find((u) => u.value === unit)?.label.toLowerCase() || unit;
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+        }}
+      />
+      <Flex
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        gap={1}
+        padding={3}
+        background="neutral0"
+        hasRadius
+        style={{
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : 'none',
+        }}
+      >
+        <Flex alignItems="center" gap={2}>
+          <Clock style={{ color: colors.text, width: 18, height: 18 }} />
+          <Typography
+            variant="omega"
+            fontWeight="semiBold"
+            style={{ color: colors.text }}
+            ellipsis
+          >
+            {data.name}
+          </Typography>
+        </Flex>
+        <Badge size="S" backgroundColor="warning100" textColor="warning700">
+          {duration} {unitLabel}
+        </Badge>
+      </Flex>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: '2px solid white',
+        }}
+      />
+    </>
+  );
+};
+
+export default memo(WaitNode);

package/admin/src/components/StepFlowBuilder/nodes/index.ts

@@ -0,0 +1,16 @@
+import type { NodeTypes } from 'reactflow';
+import EntryNode from './EntryNode';
+import MessageNode from './MessageNode';
+import WaitNode from './WaitNode';
+import BranchNode from './BranchNode';
+import ExitNode from './ExitNode';
+
+export { EntryNode, MessageNode, WaitNode, BranchNode, ExitNode };
+
+export const nodeTypes: NodeTypes = {
+  entry: EntryNode,
+  message: MessageNode,
+  wait: WaitNode,
+  branch: BranchNode,
+  exit: ExitNode,
+};

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

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Flex,
+  Typography,
+  SingleSelect,
+  SingleSelectOption,
+  Loader,
+} from '@strapi/design-system';
+import { useFetchClient } from '@strapi/strapi/admin';
+import type { FlowNodeData, SegmentOption } from '../types';
+
+interface BranchConfigProps {
+  data: FlowNodeData;
+  onUpdate: (data: Partial<FlowNodeData>) => void;
+  disabled?: boolean;
+}
+
+const BranchConfig: React.FC<BranchConfigProps> = ({ data, onUpdate, disabled }) => {
+  const { get } = useFetchClient();
+  const [segments, setSegments] = useState<SegmentOption[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const selectedSegmentId = data.config.branchSegment?.id?.toString() || '';
+
+  useEffect(() => {
+    const fetchSegments = async () => {
+      try {
+        const response = await get('/content-manager/collection-types/api::crm-segment.crm-segment', {
+          params: {
+            pageSize: 100,
+            sort: 'name:asc',
+          },
+        });
+        const results = response.data?.results || [];
+        setSegments(
+          results.map((s: { id: number; name: string }) => ({
+            id: s.id,
+            name: s.name,
+          }))
+        );
+      } catch (error) {
+        console.error('Failed to fetch segments:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchSegments();
+  }, [get]);
+
+  const handleSegmentChange = (value: string) => {
+    const segment = segments.find((s) => s.id.toString() === value);
+    onUpdate({
+      config: {
+        ...data.config,
+        branchSegment: segment ? { id: segment.id, name: segment.name } : null,
+      },
+    });
+  };
+
+  if (loading) {
+    return (
+      <Flex justifyContent="center" padding={4}>
+        <Loader small>Loading segments...</Loader>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap={4}>
+      <Box>
+        <Typography variant="sigma" textColor="neutral600">
+          Condition Segment
+        </Typography>
+        <Box paddingTop={1}>
+          <SingleSelect
+            value={selectedSegmentId}
+            onChange={handleSegmentChange}
+            disabled={disabled}
+            placeholder="Select a segment..."
+          >
+            {segments.map((segment) => (
+              <SingleSelectOption key={segment.id} value={segment.id.toString()}>
+                {segment.name}
+              </SingleSelectOption>
+            ))}
+          </SingleSelect>
+        </Box>
+      </Box>
+
+      <Box
+        padding={3}
+        background="secondary100"
+        hasRadius
+      >
+        <Flex direction="column" gap={2}>
+          <Typography variant="pi" textColor="secondary700" fontWeight="semiBold">
+            How it works:
+          </Typography>
+          <Typography variant="pi" textColor="secondary600">
+            • Users matching the segment → <strong>Yes</strong> path
+          </Typography>
+          <Typography variant="pi" textColor="secondary600">
+            • Users not matching → <strong>No</strong> path
+          </Typography>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+};
+
+export default BranchConfig;

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

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Flex,
+  Typography,
+  TextInput,
+  SingleSelect,
+  SingleSelectOption,
+  Button,
+  IconButton,
+  NumberInput,
+} from '@strapi/design-system';
+import { Plus, Trash } from '@strapi/icons';
+import type { FlowNodeData, CampaignVariant, ChannelType } from '../types';
+import { CHANNEL_OPTIONS } from '../constants';
+
+interface MessageConfigProps {
+  data: FlowNodeData;
+  onUpdate: (data: Partial<FlowNodeData>) => void;
+  disabled?: boolean;
+}
+
+const MessageConfig: React.FC<MessageConfigProps> = ({ data, onUpdate, disabled }) => {
+  const [variants, setVariants] = useState<CampaignVariant[]>(data.config.variants || []);
+  const channel = data.config.channel || 'telegram';
+
+  useEffect(() => {
+    setVariants(data.config.variants || []);
+  }, [data.config.variants]);
+
+  const handleChannelChange = (value: string) => {
+    onUpdate({
+      config: {
+        ...data.config,
+        channel: value as ChannelType,
+      },
+    });
+  };
+
+  const handleAddVariant = () => {
+    const newVariant: CampaignVariant = {
+      name: `Variant ${variants.length + 1}`,
+      template: null,
+      weight: 100,
+    };
+    const updated = [...variants, newVariant];
+    setVariants(updated);
+    onUpdate({
+      config: {
+        ...data.config,
+        variants: updated,
+      },
+    });
+  };
+
+  const handleRemoveVariant = (index: number) => {
+    const updated = variants.filter((_, i) => i !== index);
+    setVariants(updated);
+    onUpdate({
+      config: {
+        ...data.config,
+        variants: updated,
+      },
+    });
+  };
+
+  const handleVariantChange = (index: number, field: keyof CampaignVariant, value: unknown) => {
+    const updated = variants.map((v, i) =>
+      i === index ? { ...v, [field]: value } : v
+    );
+    setVariants(updated);
+    onUpdate({
+      config: {
+        ...data.config,
+        variants: updated,
+      },
+    });
+  };
+
+  return (
+    <Flex direction="column" gap={4}>
+      <Box>
+        <Typography variant="sigma" textColor="neutral600">
+          Channel
+        </Typography>
+        <Box paddingTop={1}>
+          <SingleSelect
+            value={channel}
+            onChange={handleChannelChange}
+            disabled={disabled}
+          >
+            {CHANNEL_OPTIONS.map((opt) => (
+              <SingleSelectOption key={opt.value} value={opt.value}>
+                {opt.label}
+              </SingleSelectOption>
+            ))}
+          </SingleSelect>
+        </Box>
+      </Box>
+
+      <Box>
+        <Flex justifyContent="space-between" alignItems="center">
+          <Typography variant="sigma" textColor="neutral600">
+            Variants (A/B Testing)
+          </Typography>
+          <Button
+            variant="tertiary"
+            size="S"
+            startIcon={<Plus />}
+            onClick={handleAddVariant}
+            disabled={disabled}
+          >
+            Add Variant
+          </Button>
+        </Flex>
+
+        <Flex direction="column" gap={2} paddingTop={2}>
+          {variants.length === 0 ? (
+            <Box
+              padding={4}
+              background="neutral100"
+              hasRadius
+              style={{ textAlign: 'center' }}
+            >
+              <Typography variant="pi" textColor="neutral500">
+                No variants yet. Add a variant to enable A/B testing.
+              </Typography>
+            </Box>
+          ) : (
+            variants.map((variant, index) => (
+              <Box
+                key={index}
+                padding={3}
+                background="neutral100"
+                hasRadius
+                style={{ border: '1px solid #dcdce4' }}
+              >
+                <Flex gap={2} alignItems="flex-end">
+                  <Box style={{ flex: 1 }}>
+                    <Typography variant="pi" textColor="neutral600">
+                      Name
+                    </Typography>
+                    <TextInput
+                      value={variant.name}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleVariantChange(index, 'name', e.target.value)
+                      }
+                      disabled={disabled}
+                      size="S"
+                    />
+                  </Box>
+                  <Box style={{ width: 80 }}>
+                    <Typography variant="pi" textColor="neutral600">
+                      Weight
+                    </Typography>
+                    <NumberInput
+                      value={variant.weight}
+                      onValueChange={(value: number | undefined) =>
+                        handleVariantChange(index, 'weight', value || 0)
+                      }
+                      disabled={disabled}
+                      size="S"
+                    />
+                  </Box>
+                  <IconButton
+                    onClick={() => handleRemoveVariant(index)}
+                    label="Remove variant"
+                    variant="ghost"
+                    disabled={disabled}
+                  >
+                    <Trash />
+                  </IconButton>
+                </Flex>
+                <Box paddingTop={2}>
+                  <Typography variant="pi" textColor="neutral500">
+                    Template: {variant.template?.name || 'Not selected'}
+                  </Typography>
+                </Box>
+              </Box>
+            ))
+          )}
+        </Flex>
+      </Box>
+    </Flex>
+  );
+};
+
+export default MessageConfig;

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  Box,
+  Flex,
+  Typography,
+  TextInput,
+  Button,
+  Divider,
+  IconButton,
+} from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
+import type { NodeEditPanelProps, FlowNodeData } from '../types';
+import { NODE_COLORS, STEP_TYPE_LABELS } from '../constants';
+import MessageConfig from './MessageConfig';
+import WaitConfig from './WaitConfig';
+import BranchConfig from './BranchConfig';
+
+const NodeEditPanel: React.FC<NodeEditPanelProps> = ({
+  node,
+  onClose,
+  onUpdate,
+  disabled,
+}) => {
+  if (!node) return null;
+
+  const { stepType, name } = node.data;
+  const colors = NODE_COLORS[stepType];
+  const typeLabel = STEP_TYPE_LABELS[stepType];
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onUpdate(node.id, { name: e.target.value });
+  };
+
+  const handleConfigUpdate = (updates: Partial<FlowNodeData>) => {
+    onUpdate(node.id, updates);
+  };
+
+  const renderConfig = () => {
+    switch (stepType) {
+      case 'message':
+        return (
+          <MessageConfig
+            data={node.data}
+            onUpdate={handleConfigUpdate}
+            disabled={disabled}
+          />
+        );
+      case 'wait':
+        return (
+          <WaitConfig
+            data={node.data}
+            onUpdate={handleConfigUpdate}
+            disabled={disabled}
+          />
+        );
+      case 'branch':
+        return (
+          <BranchConfig
+            data={node.data}
+            onUpdate={handleConfigUpdate}
+            disabled={disabled}
+          />
+        );
+      case 'entry':
+      case 'exit':
+      default:
+        return (
+          <Box
+            padding={3}
+            background="neutral100"
+            hasRadius
+            style={{ textAlign: 'center' }}
+          >
+            <Typography variant="pi" textColor="neutral500">
+              No additional configuration needed for this step type.
+            </Typography>
+          </Box>
+        );
+    }
+  };
+
+  return (
+    <Box
+      background="neutral0"
+      shadow="filterShadow"
+      hasRadius
+      style={{
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: 350,
+        height: '100%',
+        zIndex: 10,
+        borderLeft: '1px solid #dcdce4',
+        overflow: 'auto',
+      }}
+    >
+      <Box
+        padding={4}
+        style={{
+          borderBottom: `3px solid ${colors.border}`,
+          backgroundColor: colors.background,
+        }}
+      >
+        <Flex justifyContent="space-between" alignItems="center">
+          <Flex alignItems="center" gap={2}>
+            <Typography variant="beta" style={{ color: colors.text }}>
+              {typeLabel}
+            </Typography>
+          </Flex>
+          <IconButton onClick={onClose} label="Close panel" variant="ghost">
+            <Cross />
+          </IconButton>
+        </Flex>
+      </Box>
+
+      <Box padding={4}>
+        <Flex direction="column" gap={4}>
+          {stepType !== 'entry' && (
+            <Box>
+              <Typography variant="sigma" textColor="neutral600">
+                Step Name
+              </Typography>
+              <Box paddingTop={1}>
+                <TextInput
+                  value={name}
+                  onChange={handleNameChange}
+                  disabled={disabled || stepType === 'entry'}
+                  placeholder="Enter step name..."
+                />
+              </Box>
+            </Box>
+          )}
+
+          {stepType !== 'entry' && stepType !== 'exit' && (
+            <>
+              <Divider />
+              {renderConfig()}
+            </>
+          )}
+
+          {stepType !== 'entry' && (
+            <>
+              <Divider />
+              <Box>
+                <Typography variant="pi" textColor="neutral500">
+                  Step ID: {node.id}
+                </Typography>
+              </Box>
+            </>
+          )}
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default NodeEditPanel;