@inspirer-dev/crm-dashboard 1.0.85 → 1.0.86

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

@@ -263,7 +263,10 @@ const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
                           <SingleSelect
                             value={btn.type || 'url'}
                             onChange={(val: string) =>
-                              updateButton(btn.id, { type: val as 'url' | 'screen' })
+                              updateButton(btn.id, {
+                                type: val as 'url' | 'screen',
+                                ...(val === 'url' ? { screenSlug: '' } : { url: '' }),
+                              })
                             }
                             disabled={disabled}
                             size="S"

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

@@ -17,11 +17,12 @@ 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 | null>;
+type ParamGroup = Record<string, number | null>;
+type TriggerParamsGroups = ParamGroup[];
 
 interface TriggerParamsFieldProps {
   name: string;
-  value?: string | TriggerParamsValue | null;
+  value?: string | ParamGroup | TriggerParamsGroups | null;
   onChange: (event: { target: { name: string; value: string } }) => void;
   intlLabel: {
     id: string;
@@ -34,30 +35,42 @@ interface TriggerParamsFieldProps {
   hint?: string;
 }
 
-const parseValue = (value: string | TriggerParamsValue | null | undefined): TriggerParamsValue => {
-  if (!value) return {};
-  if (typeof value === 'object' && !Array.isArray(value)) return value as TriggerParamsValue;
+const parseValue = (
+  value: string | ParamGroup | TriggerParamsGroups | null | undefined
+): TriggerParamsGroups => {
+  if (!value) return [{}];
   if (typeof value === 'string') {
     try {
       const parsed = JSON.parse(value);
-      if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) return parsed;
+      if (Array.isArray(parsed)) return parsed.length > 0 ? parsed : [{}];
+      if (typeof parsed === 'object' && parsed !== null) return [parsed];
     } catch {}
+    return [{}];
   }
-  return {};
+  if (Array.isArray(value)) return value.length > 0 ? value : [{}];
+  if (typeof value === 'object') return [value as ParamGroup];
+  return [{}];
 };
 
-const serialize = (params: TriggerParamsValue): string => {
-  const out: Record<string, number> = {};
-  for (const [key, val] of Object.entries(params)) {
-    if (typeof val === 'number') out[key] = val;
-  }
-  return JSON.stringify(out);
+const serialize = (groups: TriggerParamsGroups): string => {
+  const cleaned = groups
+    .map((group) => {
+      const out: Record<string, number> = {};
+      for (const [key, val] of Object.entries(group)) {
+        if (typeof val === 'number') out[key] = val;
+      }
+      return out;
+    })
+    .filter((group) => Object.keys(group).length > 0);
+  return JSON.stringify(cleaned.length > 0 ? cleaned : []);
 };
 
 interface StrapiTheme {
   colors?: Record<string, string>;
 }
 
+const DEPTH_BORDERS = ['#7b79ff', '#ee5e52', '#0c75af', '#328048'];
+
 const useThemeColors = () => {
   const theme = useTheme() as unknown as StrapiTheme;
   const isDark = theme?.colors?.neutral0 === '#212134';
@@ -68,44 +81,302 @@ const useThemeColors = () => {
       emptyBorder: isDark ? '#32324d' : '#dcdce4',
       cardBorder: isDark ? '#32324d' : '#eaeaef',
       tagBg: isDark ? '#2d2d4a' : '#f0f0ff',
+      groupBg: isDark ? '#1a1a2e' : '#f6f6f9',
+      orDividerLine: isDark ? '#32324d' : '#dcdce4',
+      andLabelColor: isDark ? '#a5a5ba' : '#666687',
+      depthBorders: DEPTH_BORDERS,
     }),
     [isDark]
   );
 };
 
+const getParamDef = (key: string): TriggerParamDef | undefined =>
+  TRIGGER_PARAMS.find((p) => p.key === key);
+
+interface ParamCardProps {
+  paramKey: string;
+  value: number | null;
+  onValueChange: (val: number | undefined) => void;
+  onRemove: () => void;
+  disabled?: boolean;
+  colors: ReturnType<typeof useThemeColors>;
+}
+
+const ParamCard: React.FC<ParamCardProps> = ({
+  paramKey,
+  value,
+  onValueChange,
+  onRemove,
+  disabled,
+  colors,
+}) => {
+  const def = getParamDef(paramKey);
+  if (!def) return null;
+
+  return (
+    <Card 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={value ?? ''}
+              onValueChange={onValueChange}
+              disabled={disabled}
+              size="S"
+              step={paramKey === 'balanceThresholdMultiplier' ? 0.1 : 1}
+            />
+          </Box>
+
+          <Tooltip label="Удалить параметр">
+            <IconButton
+              onClick={onRemove}
+              label="Delete"
+              variant="ghost"
+              size="S"
+              disabled={disabled}
+              style={{ color: '#d02b20', flexShrink: 0 }}
+            >
+              <Trash width={16} height={16} />
+            </IconButton>
+          </Tooltip>
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+};
+
+interface AndLabelProps {
+  colors: ReturnType<typeof useThemeColors>;
+}
+
+const AndLabel: React.FC<AndLabelProps> = ({ colors }) => (
+  <Flex justifyContent="center" paddingTop={1} paddingBottom={1}>
+    <Typography
+      variant="sigma"
+      textColor="neutral600"
+      style={{
+        fontSize: '11px',
+        fontWeight: 700,
+        letterSpacing: '0.5px',
+        color: colors.andLabelColor,
+        textTransform: 'uppercase',
+      }}
+    >
+      И
+    </Typography>
+  </Flex>
+);
+
+interface OrDividerProps {
+  colors: ReturnType<typeof useThemeColors>;
+}
+
+const OrDivider: React.FC<OrDividerProps> = ({ colors }) => (
+  <Flex alignItems="center" gap={3} paddingTop={2} paddingBottom={2}>
+    <Box style={{ flex: 1, height: '1px', backgroundColor: colors.orDividerLine }} />
+    <Box
+      style={{
+        padding: '2px 12px',
+        borderRadius: '12px',
+        border: `1px solid ${colors.orDividerLine}`,
+        backgroundColor: colors.isDark ? '#212134' : '#ffffff',
+      }}
+    >
+      <Typography
+        variant="sigma"
+        style={{
+          fontSize: '11px',
+          fontWeight: 700,
+          letterSpacing: '0.5px',
+          color: colors.andLabelColor,
+          textTransform: 'uppercase',
+        }}
+      >
+        ИЛИ
+      </Typography>
+    </Box>
+    <Box style={{ flex: 1, height: '1px', backgroundColor: colors.orDividerLine }} />
+  </Flex>
+);
+
+interface ParamGroupCardProps {
+  group: ParamGroup;
+  groupIndex: number;
+  totalGroups: number;
+  onAddParam: (key: string) => void;
+  onRemoveParam: (key: string) => void;
+  onSetValue: (key: string, val: number | undefined) => void;
+  onRemoveGroup: () => void;
+  disabled?: boolean;
+  colors: ReturnType<typeof useThemeColors>;
+}
+
+const ParamGroupCard: React.FC<ParamGroupCardProps> = ({
+  group,
+  groupIndex,
+  totalGroups,
+  onAddParam,
+  onRemoveParam,
+  onSetValue,
+  onRemoveGroup,
+  disabled,
+  colors,
+}) => {
+  const activeKeys = Object.keys(group);
+  const availableParams = TRIGGER_PARAMS.filter((p) => !activeKeys.includes(p.key));
+  const borderColor = colors.depthBorders[groupIndex % colors.depthBorders.length];
+
+  return (
+    <Box
+      padding={4}
+      hasRadius
+      style={{
+        backgroundColor: colors.groupBg,
+        borderLeft: `3px solid ${borderColor}`,
+        border: `1px solid ${colors.cardBorder}`,
+        borderLeftWidth: '3px',
+        borderLeftColor: borderColor,
+      }}
+    >
+      <Flex direction="column" gap={2}>
+        <Flex justifyContent="space-between" alignItems="center">
+          <Typography
+            variant="sigma"
+            textColor="neutral700"
+            style={{ textTransform: 'uppercase', fontSize: '11px', letterSpacing: '0.5px' }}
+          >
+            Группа {groupIndex + 1}
+          </Typography>
+          {totalGroups > 1 && (
+            <Tooltip label="Удалить группу">
+              <IconButton
+                onClick={onRemoveGroup}
+                label="Удалить группу"
+                variant="ghost"
+                size="S"
+                disabled={disabled}
+                style={{ color: '#d02b20' }}
+              >
+                <Trash width={14} height={14} />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Flex>
+
+        {activeKeys.length === 0 ? (
+          <Box
+            padding={3}
+            hasRadius
+            style={{
+              border: `1px dashed ${colors.emptyBorder}`,
+              textAlign: 'center',
+            }}
+          >
+            <Typography variant="pi" textColor="neutral500">
+              Добавьте параметры в группу
+            </Typography>
+          </Box>
+        ) : (
+          activeKeys.map((key, i) => (
+            <React.Fragment key={key}>
+              {i > 0 && <AndLabel colors={colors} />}
+              <ParamCard
+                paramKey={key}
+                value={group[key]}
+                onValueChange={(val) => onSetValue(key, val)}
+                onRemove={() => onRemoveParam(key)}
+                disabled={disabled}
+                colors={colors}
+              />
+            </React.Fragment>
+          ))
+        )}
+
+        {availableParams.length > 0 && (
+          <Box paddingTop={1}>
+            <AddParamSelect available={availableParams} onAdd={onAddParam} disabled={disabled} />
+          </Box>
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
 const TriggerParamsField = forwardRef<HTMLDivElement, TriggerParamsFieldProps>(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
     const initialRef = useRef(value);
-    const [params, setParams] = useState<TriggerParamsValue>(() => parseValue(initialRef.current));
+    const [groups, setGroups] = useState<TriggerParamsGroups>(() => parseValue(initialRef.current));
     const colors = useThemeColors();
 
-    const update = (next: TriggerParamsValue) => {
-      setParams(next);
+    const update = (next: TriggerParamsGroups) => {
+      setGroups(next);
       onChange({ target: { name, value: serialize(next) } });
     };
 
-    const activeKeys = Object.keys(params);
+    const addGroup = () => {
+      update([...groups, {}]);
+    };
 
-    const availableParams = TRIGGER_PARAMS.filter((p) => !activeKeys.includes(p.key));
+    const removeGroup = (idx: number) => {
+      const next = groups.filter((_, i) => i !== idx);
+      update(next.length > 0 ? next : [{}]);
+    };
 
-    const addParam = (key: string) => {
-      const def = TRIGGER_PARAMS.find((p) => p.key === key);
-      if (!def) return;
-      update({ ...params, [key]: null });
+    const addParamToGroup = (idx: number, key: string) => {
+      const next = groups.map((g, i) => (i === idx ? { ...g, [key]: null } : g));
+      update(next);
     };
 
-    const removeParam = (key: string) => {
-      const next = { ...params };
-      delete next[key];
+    const removeParamFromGroup = (idx: number, key: string) => {
+      const next = groups.map((g, i) => {
+        if (i !== idx) return g;
+        const copy = { ...g };
+        delete copy[key];
+        return copy;
+      });
       update(next);
     };
 
-    const setParamValue = (key: string, val: number | undefined) => {
-      update({ ...params, [key]: val ?? null });
+    const setParamValue = (idx: number, key: string, val: number | undefined) => {
+      const next = groups.map((g, i) => (i === idx ? { ...g, [key]: val ?? null } : g));
+      update(next);
     };
 
-    const getParamDef = (key: string): TriggerParamDef | undefined =>
-      TRIGGER_PARAMS.find((p) => p.key === key);
+    const allEmpty = groups.every((g) => Object.keys(g).length === 0);
 
     return (
       <Field.Root name={name} error={error} required={required} hint={hint} ref={ref}>
@@ -119,7 +390,7 @@ const TriggerParamsField = forwardRef<HTMLDivElement, TriggerParamsFieldProps>(
             </Box>
           </Flex>
 
-          {activeKeys.length === 0 ? (
+          {groups.length === 1 && allEmpty ? (
             <Box
               padding={5}
               background="neutral100"
@@ -141,91 +412,42 @@ const TriggerParamsField = forwardRef<HTMLDivElement, TriggerParamsFieldProps>(
               </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 direction="column" gap={0}>
+              {groups.map((group, idx) => (
+                <React.Fragment key={idx}>
+                  {idx > 0 && <OrDivider colors={colors} />}
+                  <ParamGroupCard
+                    group={group}
+                    groupIndex={idx}
+                    totalGroups={groups.length}
+                    onAddParam={(key) => addParamToGroup(idx, key)}
+                    onRemoveParam={(key) => removeParamFromGroup(idx, key)}
+                    onSetValue={(key, val) => setParamValue(idx, key, val)}
+                    onRemoveGroup={() => removeGroup(idx)}
+                    disabled={disabled}
+                    colors={colors}
+                  />
+                </React.Fragment>
+              ))}
             </Flex>
           )}
 
-          {availableParams.length > 0 && (
+          {groups.length === 1 && allEmpty ? (
             <AddParamSelect
-              available={availableParams}
-              onAdd={addParam}
+              available={TRIGGER_PARAMS}
+              onAdd={(key) => addParamToGroup(0, key)}
               disabled={disabled}
             />
+          ) : (
+            <Button
+              startIcon={<Plus />}
+              onClick={addGroup}
+              disabled={disabled}
+              variant="tertiary"
+              size="S"
+            >
+              Добавить OR группу
+            </Button>
           )}
 
           {error && <Field.Error />}