@inspirer-dev/crm-dashboard 1.0.10 → 1.0.12

package/admin/src/components/CancelConditionsField/index.tsx

@@ -0,0 +1,381 @@
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  Field,
+  Flex,
+  IconButton,
+  SingleSelect,
+  SingleSelectOption,
+  TextInput,
+  Typography,
+  Tooltip,
+  Switch,
+  Card,
+  CardContent,
+} from '@strapi/design-system';
+import { Plus, Trash } from '@strapi/icons';
+import { useTheme } from 'styled-components';
+
+import type { RuleOperator } from '../RulesBuilder/types';
+import { CANCEL_METRICS, CANCEL_TIME_UNITS, CancelMetricDefinition } from './constants';
+
+interface CancelRule {
+  id: string;
+  field: string;
+  operator: RuleOperator;
+  value: unknown;
+}
+
+interface CancelConfig {
+  logic: '$or' | '$and';
+  rules: CancelRule[];
+}
+
+interface CancelConditionsFieldProps {
+  name: string;
+  value?: string | null;
+  onChange: (event: { target: { name: string; value: string } }) => void;
+  intlLabel: {
+    id: string;
+    defaultMessage: string;
+  };
+  attribute?: unknown;
+  disabled?: boolean;
+  error?: string;
+  required?: boolean;
+  hint?: string;
+}
+
+const generateId = () => Math.random().toString(36).substring(2, 11);
+
+const DEFAULT_CONFIG: CancelConfig = {
+  logic: '$or',
+  rules: [],
+};
+
+const parseConfig = (value: string | null | undefined): CancelConfig => {
+  if (!value) return DEFAULT_CONFIG;
+  try {
+    const parsed = JSON.parse(value);
+    if (parsed.logic && Array.isArray(parsed.rules)) {
+      return parsed;
+    }
+    return DEFAULT_CONFIG;
+  } catch {
+    return DEFAULT_CONFIG;
+  }
+};
+
+const serializeConfig = (config: CancelConfig): string => {
+  return JSON.stringify(config);
+};
+
+const getMetric = (key: string): CancelMetricDefinition | undefined => {
+  return CANCEL_METRICS.find((m) => m.key === key);
+};
+
+const OPERATORS: { value: RuleOperator; label: string }[] = [
+  { value: '$eq', label: '=' },
+  { value: '$ne', label: '≠' },
+  { value: '$gt', label: '>' },
+  { value: '$lt', label: '<' },
+  { value: '$gte', label: '≥' },
+  { value: '$lte', label: '≤' },
+];
+
+interface ValueInputProps {
+  metric: CancelMetricDefinition;
+  value: unknown;
+  operator: RuleOperator;
+  onChange: (value: unknown) => void;
+  disabled?: boolean;
+}
+
+const ValueInput: React.FC<ValueInputProps> = ({ metric, value, operator, onChange, disabled }) => {
+  if (metric.valueType === 'boolean') {
+    const boolVal = value === true || value === 'true';
+    return (
+      <Flex gap={2} alignItems="center">
+        <Switch
+          label=""
+          checked={boolVal}
+          onChange={() => onChange(!boolVal)}
+          disabled={disabled}
+        />
+        <Typography variant="omega" textColor="neutral600">
+          {boolVal ? 'true' : 'false'}
+        </Typography>
+      </Flex>
+    );
+  }
+
+  if (metric.valueType === 'number') {
+    return (
+      <TextInput
+        type="number"
+        value={String(value ?? 0)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(parseInt(e.target.value, 10) || 0)}
+        disabled={disabled}
+        aria-label="Value"
+      />
+    );
+  }
+
+  if (metric.valueType === 'time_ago') {
+    const timeValue = (value as Record<string, number>) || { minutes_ago: 10 };
+    const unit = Object.keys(timeValue)[0] || 'minutes_ago';
+    const numValue = timeValue[unit] || 10;
+
+    return (
+      <Flex gap={2}>
+        <Box style={{ width: '80px' }}>
+          <TextInput
+            type="number"
+            value={String(numValue)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+              onChange({ [unit]: parseInt(e.target.value, 10) || 0 })
+            }
+            disabled={disabled}
+            aria-label="Time value"
+          />
+        </Box>
+        <Box style={{ width: '120px' }}>
+          <SingleSelect
+            value={unit}
+            onChange={(newUnit: string) => onChange({ [newUnit]: numValue })}
+            disabled={disabled}
+          >
+            {CANCEL_TIME_UNITS.map((u) => (
+              <SingleSelectOption key={u.value} value={u.value}>
+                {u.label}
+              </SingleSelectOption>
+            ))}
+          </SingleSelect>
+        </Box>
+      </Flex>
+    );
+  }
+
+  return null;
+};
+
+interface RuleRowProps {
+  rule: CancelRule;
+  onUpdate: (rule: CancelRule) => void;
+  onDelete: () => void;
+  disabled?: boolean;
+}
+
+const RuleRow: React.FC<RuleRowProps> = ({ rule, onUpdate, onDelete, disabled }) => {
+  const theme = useTheme();
+  const colors = (theme as Record<string, unknown>)?.colors as Record<string, string> | undefined;
+  const metric = getMetric(rule.field);
+  const availableOperators = metric?.operators || ['$eq'];
+
+  const handleFieldChange = (fieldKey: string) => {
+    const newMetric = getMetric(fieldKey);
+    let newValue: unknown = true;
+    if (newMetric?.valueType === 'number') {
+      newValue = 0;
+    } else if (newMetric?.valueType === 'time_ago') {
+      newValue = { minutes_ago: 10 };
+    }
+    const newOp = newMetric?.operators[0] || '$eq';
+    onUpdate({ ...rule, field: fieldKey, operator: newOp, value: newValue });
+  };
+
+  return (
+    <Flex
+      gap={2}
+      alignItems="center"
+      padding={2}
+      background="neutral0"
+      hasRadius
+      style={{ border: `1px solid ${colors?.neutral200 || '#dcdce4'}` }}
+    >
+      <Box style={{ flex: '1 1 200px', minWidth: '180px' }}>
+        <SingleSelect
+          value={rule.field}
+          onChange={(val: string) => handleFieldChange(val)}
+          disabled={disabled}
+          size="S"
+        >
+          {CANCEL_METRICS.map((m) => (
+            <SingleSelectOption key={m.key} value={m.key}>
+              {m.label}
+            </SingleSelectOption>
+          ))}
+        </SingleSelect>
+      </Box>
+
+      <Box style={{ width: '80px' }}>
+        <SingleSelect
+          value={rule.operator}
+          onChange={(val: string) => onUpdate({ ...rule, operator: val as RuleOperator })}
+          disabled={disabled}
+          size="S"
+        >
+          {OPERATORS.filter((op) => availableOperators.includes(op.value)).map((op) => (
+            <SingleSelectOption key={op.value} value={op.value}>
+              {op.label}
+            </SingleSelectOption>
+          ))}
+        </SingleSelect>
+      </Box>
+
+      <Box style={{ flex: '1 1 150px', minWidth: '120px' }}>
+        {metric && (
+          <ValueInput
+            metric={metric}
+            value={rule.value}
+            operator={rule.operator}
+            onChange={(val) => onUpdate({ ...rule, value: val })}
+            disabled={disabled}
+          />
+        )}
+      </Box>
+
+      <Tooltip label="Delete condition">
+        <IconButton onClick={onDelete} label="Delete condition" variant="ghost" disabled={disabled}>
+          <Trash />
+        </IconButton>
+      </Tooltip>
+    </Flex>
+  );
+};
+
+const CancelConditionsField = forwardRef<HTMLDivElement, CancelConditionsFieldProps>(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [config, setConfig] = useState<CancelConfig>(() => parseConfig(value));
+    const theme = useTheme();
+    const colors = (theme as Record<string, unknown>)?.colors as Record<string, string> | undefined;
+
+    React.useEffect(() => {
+      const parsed = parseConfig(value);
+      setConfig(parsed);
+    }, [value]);
+
+    const handleUpdate = useCallback((newConfig: CancelConfig) => {
+      setConfig(newConfig);
+      onChange({
+        target: {
+          name,
+          value: serializeConfig(newConfig),
+        },
+      });
+    }, [name, onChange]);
+
+    const handleAddRule = () => {
+      const newRule: CancelRule = {
+        id: generateId(),
+        field: 'has_deposit_since_trigger',
+        operator: '$eq',
+        value: true,
+      };
+      handleUpdate({
+        ...config,
+        rules: [...config.rules, newRule],
+      });
+    };
+
+    const handleUpdateRule = (ruleId: string, updatedRule: CancelRule) => {
+      handleUpdate({
+        ...config,
+        rules: config.rules.map((r) => (r.id === ruleId ? updatedRule : r)),
+      });
+    };
+
+    const handleDeleteRule = (ruleId: string) => {
+      handleUpdate({
+        ...config,
+        rules: config.rules.filter((r) => r.id !== ruleId),
+      });
+    };
+
+    const handleLogicToggle = () => {
+      handleUpdate({
+        ...config,
+        logic: config.logic === '$or' ? '$and' : '$or',
+      });
+    };
+
+    const hasRules = config.rules.length > 0;
+
+    return (
+      <Field.Root name={name} error={error} required={required} hint={hint} ref={ref}>
+        <Flex direction="column" gap={3}>
+          <Field.Label>{intlLabel?.defaultMessage || 'Cancel Conditions'}</Field.Label>
+          <Typography variant="pi" textColor="neutral600">
+            Skip sending if any of these conditions are true (checked right before send)
+          </Typography>
+
+          <Card background="neutral100">
+            <CardContent>
+              <Box padding={4}>
+                {hasRules && (
+                  <Flex justifyContent="space-between" alignItems="center" marginBottom={3}>
+                    <Flex gap={2} alignItems="center">
+                      <Button
+                        variant={config.logic === '$or' ? 'default' : 'secondary'}
+                        size="S"
+                        onClick={handleLogicToggle}
+                        disabled={disabled}
+                      >
+                        {config.logic === '$or' ? 'OR' : 'AND'}
+                      </Button>
+                      <Typography variant="omega" textColor="neutral600">
+                        {config.logic === '$or' 
+                          ? 'Cancel if ANY condition is true' 
+                          : 'Cancel if ALL conditions are true'}
+                      </Typography>
+                    </Flex>
+                  </Flex>
+                )}
+
+                <Flex direction="column" gap={2}>
+                  {config.rules.map((rule) => (
+                    <RuleRow
+                      key={rule.id}
+                      rule={rule}
+                      onUpdate={(updated) => handleUpdateRule(rule.id, updated)}
+                      onDelete={() => handleDeleteRule(rule.id)}
+                      disabled={disabled}
+                    />
+                  ))}
+
+                  {!hasRules && (
+                    <Box padding={4} background="neutral0" hasRadius style={{ textAlign: 'center' }}>
+                      <Typography variant="omega" textColor="neutral500">
+                        No cancel conditions defined. Message will be sent if segment rules match.
+                      </Typography>
+                    </Box>
+                  )}
+                </Flex>
+
+                <Box marginTop={3}>
+                  <Button
+                    variant="secondary"
+                    startIcon={<Plus />}
+                    onClick={handleAddRule}
+                    disabled={disabled}
+                    size="S"
+                  >
+                    Add Cancel Condition
+                  </Button>
+                </Box>
+              </Box>
+            </CardContent>
+          </Card>
+
+          {error && <Field.Error>{error}</Field.Error>}
+          {hint && <Field.Hint>{hint}</Field.Hint>}
+        </Flex>
+      </Field.Root>
+    );
+  }
+);
+
+CancelConditionsField.displayName = 'CancelConditionsField';
+
+export default CancelConditionsField;