@inspirer-dev/crm-dashboard 1.0.80 → 1.0.82

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

@@ -0,0 +1,292 @@
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  Field,
+  Flex,
+  IconButton,
+  NumberInput,
+  Typography,
+  SingleSelect,
+  SingleSelectOption,
+  Card,
+  CardContent,
+  Tooltip,
+} from '@strapi/design-system';
+import { Plus, Trash } from '@strapi/icons';
+import { useTheme } from 'styled-components';
+import { TRIGGER_PARAMS, STAGE_TYPE_LABELS, type TriggerParamDef } from './constants';
+
+type TriggerParamsValue = Record<string, number | undefined>;
+
+interface TriggerParamsFieldProps {
+  name: string;
+  value?: string | TriggerParamsValue | 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 parseValue = (value: string | TriggerParamsValue | null | undefined): TriggerParamsValue => {
+  if (!value) return {};
+  if (typeof value === 'object' && !Array.isArray(value)) return value as TriggerParamsValue;
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value);
+      if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) return parsed;
+    } catch {}
+  }
+  return {};
+};
+
+const serialize = (params: TriggerParamsValue): string => {
+  const clean: Record<string, number> = {};
+  for (const [key, val] of Object.entries(params)) {
+    if (val !== undefined && val !== null) {
+      clean[key] = val;
+    }
+  }
+  return JSON.stringify(clean);
+};
+
+interface StrapiTheme {
+  colors?: Record<string, string>;
+}
+
+const useThemeColors = () => {
+  const theme = useTheme() as unknown as StrapiTheme;
+  const isDark = theme?.colors?.neutral0 === '#212134';
+
+  return useMemo(
+    () => ({
+      isDark,
+      emptyBorder: isDark ? '#32324d' : '#dcdce4',
+      cardBorder: isDark ? '#32324d' : '#eaeaef',
+      tagBg: isDark ? '#2d2d4a' : '#f0f0ff',
+    }),
+    [isDark]
+  );
+};
+
+const TriggerParamsField = forwardRef<HTMLDivElement, TriggerParamsFieldProps>(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [params, setParams] = useState<TriggerParamsValue>(() => parseValue(value));
+    const colors = useThemeColors();
+
+    useEffect(() => {
+      setParams(parseValue(value));
+    }, [value]);
+
+    const update = (next: TriggerParamsValue) => {
+      setParams(next);
+      onChange({ target: { name, value: serialize(next) } });
+    };
+
+    const activeKeys = Object.keys(params).filter(
+      (k) => params[k] !== undefined && params[k] !== null
+    );
+
+    const availableParams = TRIGGER_PARAMS.filter((p) => !activeKeys.includes(p.key));
+
+    const addParam = (key: string) => {
+      const def = TRIGGER_PARAMS.find((p) => p.key === key);
+      if (!def) return;
+      update({ ...params, [key]: undefined });
+    };
+
+    const removeParam = (key: string) => {
+      const next = { ...params };
+      delete next[key];
+      update(next);
+    };
+
+    const setParamValue = (key: string, val: number | undefined) => {
+      update({ ...params, [key]: val });
+    };
+
+    const getParamDef = (key: string): TriggerParamDef | undefined =>
+      TRIGGER_PARAMS.find((p) => p.key === key);
+
+    return (
+      <Field.Root name={name} error={error} required={required} hint={hint} ref={ref}>
+        <Flex direction="column" gap={3}>
+          <Flex justifyContent="space-between" alignItems="center">
+            <Box>
+              <Field.Label>{intlLabel?.defaultMessage || 'Trigger Params'}</Field.Label>
+              <Typography variant="pi" textColor="neutral500">
+                Настройте параметры срабатывания для этого этапа
+              </Typography>
+            </Box>
+          </Flex>
+
+          {activeKeys.length === 0 ? (
+            <Box
+              padding={5}
+              background="neutral100"
+              hasRadius
+              style={{
+                border: `2px dashed ${colors.emptyBorder}`,
+                textAlign: 'center',
+              }}
+            >
+              <Typography variant="omega" textColor="neutral500">
+                Параметры не настроены
+              </Typography>
+              <Typography
+                variant="pi"
+                textColor="neutral400"
+                style={{ display: 'block', marginTop: 4 }}
+              >
+                Добавьте параметры триггера, чтобы управлять условиями показа этапа
+              </Typography>
+            </Box>
+          ) : (
+            <Flex direction="column" gap={2}>
+              {activeKeys.map((key) => {
+                const def = getParamDef(key);
+                if (!def) return null;
+
+                return (
+                  <Card
+                    key={key}
+                    background="neutral0"
+                    style={{
+                      border: `1px solid ${colors.cardBorder}`,
+                    }}
+                  >
+                    <CardContent>
+                      <Flex gap={3} alignItems="center" padding={3}>
+                        <Box style={{ flex: 1, minWidth: 0 }}>
+                          <Flex gap={2} alignItems="center" marginBottom={1}>
+                            <Typography variant="omega" fontWeight="semiBold">
+                              {def.label}
+                            </Typography>
+                            {def.unit && (
+                              <Typography variant="pi" textColor="neutral500">
+                                ({def.unit})
+                              </Typography>
+                            )}
+                          </Flex>
+                          <Typography variant="pi" textColor="neutral500">
+                            {def.description}
+                          </Typography>
+                          <Flex gap={1} marginTop={1} wrap="wrap">
+                            {def.stageTypes.map((st) => (
+                              <Box
+                                key={st}
+                                style={{
+                                  padding: '1px 6px',
+                                  borderRadius: '4px',
+                                  backgroundColor: colors.tagBg,
+                                  fontSize: '11px',
+                                }}
+                              >
+                                <Typography variant="pi" textColor="primary600">
+                                  {STAGE_TYPE_LABELS[st] || st}
+                                </Typography>
+                              </Box>
+                            ))}
+                          </Flex>
+                        </Box>
+
+                        <Box style={{ width: 120, flexShrink: 0 }}>
+                          <NumberInput
+                            placeholder={def.placeholder}
+                            value={params[key] ?? ''}
+                            onValueChange={(val: number | undefined) => setParamValue(key, val)}
+                            disabled={disabled}
+                            size="S"
+                            step={key === 'balanceThresholdMultiplier' ? 0.1 : 1}
+                          />
+                        </Box>
+
+                        <Tooltip label="Удалить параметр">
+                          <IconButton
+                            onClick={() => removeParam(key)}
+                            label="Delete"
+                            variant="ghost"
+                            size="S"
+                            disabled={disabled}
+                            style={{ color: '#d02b20', flexShrink: 0 }}
+                          >
+                            <Trash width={16} height={16} />
+                          </IconButton>
+                        </Tooltip>
+                      </Flex>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </Flex>
+          )}
+
+          {availableParams.length > 0 && (
+            <AddParamSelect
+              available={availableParams}
+              onAdd={addParam}
+              disabled={disabled}
+            />
+          )}
+
+          {error && <Field.Error />}
+          {hint && <Field.Hint />}
+        </Flex>
+      </Field.Root>
+    );
+  }
+);
+
+TriggerParamsField.displayName = 'TriggerParamsField';
+
+interface AddParamSelectProps {
+  available: TriggerParamDef[];
+  onAdd: (key: string) => void;
+  disabled?: boolean;
+}
+
+const AddParamSelect: React.FC<AddParamSelectProps> = ({ available, onAdd, disabled }) => {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  return (
+    <Flex gap={2} alignItems="flex-end">
+      <Box style={{ flex: 1 }}>
+        <SingleSelect
+          placeholder="Выберите параметр..."
+          value={selected}
+          onChange={(val: string) => setSelected(val)}
+          disabled={disabled}
+          size="S"
+        >
+          {available.map((p) => (
+            <SingleSelectOption key={p.key} value={p.key}>
+              {p.label} — {p.description}
+            </SingleSelectOption>
+          ))}
+        </SingleSelect>
+      </Box>
+      <Button
+        startIcon={<Plus />}
+        onClick={() => {
+          if (selected) {
+            onAdd(selected);
+            setSelected(null);
+          }
+        }}
+        disabled={disabled || !selected}
+        variant="secondary"
+        size="S"
+      >
+        Добавить
+      </Button>
+    </Flex>
+  );
+};
+
+export default TriggerParamsField;

package/admin/src/index.ts

@@ -1,4 +1,4 @@
-import { Message, Clock, Cross, Link, ArrowRight } from '@strapi/icons';
+import { Message, Clock, Cross, Link, ArrowRight, Filter } from '@strapi/icons';
 
 const PLUGIN_ID = 'crm-dashboard';
 
@@ -129,6 +129,31 @@ export default {
       },
     });
 
+    app.customFields.register({
+      name: 'trigger-params',
+      pluginId: PLUGIN_ID,
+      type: 'json',
+      intlLabel: {
+        id: `${PLUGIN_ID}.trigger-params.label`,
+        defaultMessage: 'Trigger Params',
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.trigger-params.description`,
+        defaultMessage: 'Configure trigger parameters for popup flow stages',
+      },
+      icon: Filter,
+      components: {
+        Input: async () =>
+          import(
+            /* webpackChunkName: "crm-trigger-params" */ './components/TriggerParamsField/index'
+          ),
+      },
+      options: {
+        base: [],
+        advanced: [],
+      },
+    });
+
     app.addMenuLink({
       to: `/plugins/${PLUGIN_ID}`,
       icon: Message,

package/admin/src/pages/HomePage/components/CampaignBuilder/index.tsx

@@ -331,6 +331,8 @@ const CampaignBuilder: React.FC = () => {
               <Field.Root>
                 <Flex gap={2} alignItems="center">
                   <Toggle
+                    onLabel=""
+                    offLabel=""
                     checked={editingCampaign.isActive}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       handleFieldChange('isActive', e.target.checked)
@@ -342,6 +344,8 @@ const CampaignBuilder: React.FC = () => {
               <Field.Root>
                 <Flex gap={2} alignItems="center">
                   <Toggle
+                    onLabel=""
+                    offLabel=""
                     checked={editingCampaign.ignoreQuietHours}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       handleFieldChange('ignoreQuietHours', e.target.checked)

package/admin/src/pages/HomePage/components/FlowBuilderTest.tsx

@@ -13,8 +13,8 @@ const SAMPLE_STEPS: FlowStep[] = [
     order: 0,
     channel: 'telegram',
     variants: [
-      { name: 'Variant A', template: { id: 1, name: 'Welcome Template' }, weight: 50 },
-      { name: 'Variant B', template: { id: 2, name: 'Welcome V2' }, weight: 50 },
+      { name: 'Variant A', template: { id: 1, documentId: '1', name: 'Welcome Template' }, weight: 50 },
+      { name: 'Variant B', template: { id: 2, documentId: '2', name: 'Welcome V2' }, weight: 50 },
     ],
     nextStep: 'step_wait',
   },
@@ -32,7 +32,7 @@ const SAMPLE_STEPS: FlowStep[] = [
     name: 'Check Activity',
     stepType: 'branch',
     order: 2,
-    branchSegment: { id: 1, name: 'Active Users' },
+    branchSegment: { id: 1, documentId: '1', name: 'Active Users' },
     yesNextStep: 'step_active',
     noNextStep: 'step_inactive',
   },

package/admin/src/pages/HomePage/components/SendTimeHeatMap.tsx

@@ -20,8 +20,8 @@ const SendTimeHeatMap: React.FC<SendTimeHeatMapProps> = ({ filters }) => {
   const { data, isLoading } = useSendTimeData(filters);
 
   const gridMap = useMemo(() => {
-    if (!data?.grid) return new Map<string, typeof data.grid[0]>();
-    const map = new Map<string, typeof data.grid[0]>();
+    if (!data?.grid) return new Map();
+    const map = new Map<string, (typeof data.grid)[0]>();
     for (const cell of data.grid) {
       map.set(`${cell.day}-${cell.hour}`, cell);
     }

package/admin/src/pages/HomePage/components/StatsView.tsx

@@ -17,7 +17,7 @@ import {
   ActiveFilterChips,
   FilterChip,
 } from '../../../components/Filters';
-import { useFilterOptions, useDashboardStats, StatsFilters, TimeGranularity } from '../../../hooks/api';
+import { useFilterOptions, useDashboardStats, StatsFilters, TimeGranularity, DashboardTotals } from '../../../hooks/api';
 import { SendChart, AntiSpamChart, ConversionFunnelChart, TopCampaignsChart } from './charts';
 import { exportStats, ExportFormat } from '../../../utils/exportStats';
 import TodayWidget from './TodayWidget';
@@ -422,7 +422,7 @@ const StatsView: React.FC = () => {
     return chips;
   }, [filters, campaigns, segments]);
 
-  const totals = stats?.totals || { sent: 0, clicks: 0, click_rate: 0, deposits_1h: 0, deposit_sum_1h: 0, deposit_rate: 0 };
+  const totals: DashboardTotals = stats?.totals || { sent: 0, clicks: 0, unique_clickers: 0, click_rate: 0, deposits_1h: 0, deposit_sum_1h: 0, deposit_rate: 0, unique_users_sent: 0 };
   const previousTotals = stats?.previous_totals;
   const funnel = stats?.funnel;
   const timeSeries = stats?.time_series || [];

package/admin/src/translations/en.json

@@ -119,5 +119,8 @@
   "crm-dashboard.template.title.description": "For email: subject line. For Telegram: optional internal title (not shown to user). For push: notification title.",
 
   "crm-dashboard.template.body.label": "Message Body",
-  "crm-dashboard.template.body.description": "The message text. Variables: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *bold*, _italic_"
+  "crm-dashboard.template.body.description": "The message text. Variables: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *bold*, _italic_",
+
+  "crm-dashboard.trigger-params.label": "Trigger Params",
+  "crm-dashboard.trigger-params.description": "Configure trigger parameters for popup flow stages. Add only the parameters relevant to this stage type."
 }

package/admin/src/translations/ru.json

@@ -119,5 +119,8 @@
   "crm-dashboard.template.title.description": "Для email: тема письма. Для Telegram: внутренний заголовок (не виден пользователю). Для push: заголовок уведомления.",
 
   "crm-dashboard.template.body.label": "Текст сообщения",
-  "crm-dashboard.template.body.description": "Текст сообщения. Переменные: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *жирный*, _курсив_"
+  "crm-dashboard.template.body.description": "Текст сообщения. Переменные: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *жирный*, _курсив_",
+
+  "crm-dashboard.trigger-params.label": "Параметры триггера",
+  "crm-dashboard.trigger-params.description": "Настройте параметры срабатывания для этапов popup-флоу. Добавляйте только параметры, релевантные для данного типа этапа."
 }

package/admin/tsconfig.json

@@ -1,6 +1,17 @@
 {
-  "extends": "../../../../tsconfig.json",
   "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "types": ["react", "react-dom"],
     "outDir": "dist",
     "rootDir": "src"
   },

package/admin/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"program":{"fileNames":[],"fileInfos":[],"root":[],"options":{"esModuleInterop":true,"module":1,"noEmitOnError":true,"noImplicitThis":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"strict":false,"target":6},"referencedMap":[],"exportedModulesMap":[]},"version":"5.4.4"}
+{"fileNames":[],"fileInfos":[],"root":[],"options":{"esModuleInterop":true,"module":1,"noEmitOnError":true,"noImplicitThis":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"strict":false,"target":6},"errors":true,"version":"5.8.3"}

package/dist/_chunks/{en-DEUgX5uV.mjs → en-B5BgIROW.mjs}

@@ -79,7 +79,9 @@ const en = {
   "crm-dashboard.template.title.label": "Title",
   "crm-dashboard.template.title.description": "For email: subject line. For Telegram: optional internal title (not shown to user). For push: notification title.",
   "crm-dashboard.template.body.label": "Message Body",
-  "crm-dashboard.template.body.description": "The message text. Variables: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *bold*, _italic_"
+  "crm-dashboard.template.body.description": "The message text. Variables: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *bold*, _italic_",
+  "crm-dashboard.trigger-params.label": "Trigger Params",
+  "crm-dashboard.trigger-params.description": "Configure trigger parameters for popup flow stages. Add only the parameters relevant to this stage type."
 };
 export {
   en as default

package/dist/_chunks/{en-D2kTkBns.js → en-GKZo4lia.js}

@@ -81,6 +81,8 @@ const en = {
   "crm-dashboard.template.title.label": "Title",
   "crm-dashboard.template.title.description": "For email: subject line. For Telegram: optional internal title (not shown to user). For push: notification title.",
   "crm-dashboard.template.body.label": "Message Body",
-  "crm-dashboard.template.body.description": "The message text. Variables: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *bold*, _italic_"
+  "crm-dashboard.template.body.description": "The message text. Variables: {{userName}}, {{balance}}, {{depositCount}}, {{depositTotal}}, {{amount}}. Markdown: *bold*, _italic_",
+  "crm-dashboard.trigger-params.label": "Trigger Params",
+  "crm-dashboard.trigger-params.description": "Configure trigger parameters for popup flow stages. Add only the parameters relevant to this stage type."
 };
 exports.default = en;