@inspirer-dev/crm-dashboard 1.0.83 → 1.0.85

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

@@ -10,16 +10,20 @@ import {
   Tooltip,
   Card,
   CardContent,
+  SingleSelect,
+  SingleSelectOption,
 } from '@strapi/design-system';
-import { Plus, Trash, ArrowUp, ArrowDown, Link as LinkIcon } from '@strapi/icons';
+import { Plus, Trash, ArrowUp, ArrowDown, Link as LinkIcon, Layout } from '@strapi/icons';
 import { useTheme } from 'styled-components';
 import { generateId } from '../RulesBuilder/utils';
 
 type TelegramButton = {
   id: string;
   text: string;
-  url: string;
+  url?: string;
   row?: number;
+  type?: 'url' | 'screen';
+  screenSlug?: string;
 };
 
 interface ButtonsBuilderProps {
@@ -37,26 +41,25 @@ interface ButtonsBuilderProps {
   hint?: string;
 }
 
+const mapRawButton = (b: any): TelegramButton => ({
+  id: typeof b?.id === 'string' ? b.id : generateId(),
+  text: typeof b?.text === 'string' ? b.text : '',
+  url: typeof b?.url === 'string' ? b.url : '',
+  row: typeof b?.row === 'number' ? b.row : 0,
+  type: b?.type === 'screen' ? 'screen' : 'url',
+  screenSlug: typeof b?.screenSlug === 'string' ? b.screenSlug : '',
+});
+
 const parseButtons = (value: string | TelegramButton[] | null | undefined): TelegramButton[] => {
   if (!value) return [];
   if (Array.isArray(value)) {
-    return value.map((b) => ({
-      id: typeof b?.id === 'string' ? b.id : generateId(),
-      text: typeof b?.text === 'string' ? b.text : '',
-      url: typeof b?.url === 'string' ? b.url : '',
-      row: typeof b?.row === 'number' ? b.row : 0,
-    }));
+    return value.map(mapRawButton);
   }
   if (typeof value === 'string') {
     try {
       const parsed = JSON.parse(value);
       if (!Array.isArray(parsed)) return [];
-      return parsed.map((b) => ({
-        id: typeof b?.id === 'string' ? b.id : generateId(),
-        text: typeof b?.text === 'string' ? b.text : '',
-        url: typeof b?.url === 'string' ? b.url : '',
-        row: typeof b?.row === 'number' ? b.row : 0,
-      }));
+      return parsed.map(mapRawButton);
     } catch {
       return [];
     }
@@ -103,35 +106,39 @@ const useThemeColors = () => {
   }), [isDark]);
 };
 
-const TelegramButtonPreview: React.FC<{ text: string; url: string }> = ({ text, url }) => (
-  <a
-    href={url || '#'}
-    target="_blank"
-    rel="noopener noreferrer"
-    onClick={(e) => !url && e.preventDefault()}
-    style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: '6px',
-      padding: '8px 16px',
-      backgroundColor: '#3390ec',
-      color: '#ffffff',
-      borderRadius: '8px',
-      textDecoration: 'none',
-      fontSize: '14px',
-      fontWeight: 500,
-      cursor: url ? 'pointer' : 'default',
-      transition: 'background-color 0.15s ease',
-      minWidth: '80px',
-    }}
-    onMouseEnter={(e) => url && (e.currentTarget.style.backgroundColor = '#2b7ed8')}
-    onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#3390ec')}
-  >
-    <LinkIcon width={14} height={14} style={{ opacity: 0.9 }} />
-    <span>{text || '(empty)'}</span>
-  </a>
-);
+const TelegramButtonPreview: React.FC<{ text: string; btnType?: 'url' | 'screen' }> = ({ text, btnType }) => {
+  const isScreen = btnType === 'screen';
+  const bgColor = isScreen ? '#7c3aed' : '#3390ec';
+  const bgHover = isScreen ? '#6d28d9' : '#2b7ed8';
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '6px',
+        padding: '8px 16px',
+        backgroundColor: bgColor,
+        color: '#ffffff',
+        borderRadius: '8px',
+        textDecoration: 'none',
+        fontSize: '14px',
+        fontWeight: 500,
+        cursor: 'default',
+        transition: 'background-color 0.15s ease',
+        minWidth: '80px',
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = bgHover)}
+      onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = bgColor)}
+    >
+      {isScreen
+        ? <Layout width={14} height={14} style={{ opacity: 0.9 }} />
+        : <LinkIcon width={14} height={14} style={{ opacity: 0.9 }} />
+      }
+      <span>{text || '(empty)'}</span>
+    </span>
+  );
+};
 
 const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
@@ -150,7 +157,7 @@ const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
     const addButton = () => {
       update([
         ...buttons,
-        { id: generateId(), text: 'Button', url: 'https://cases.gg', row: 0 },
+        { id: generateId(), text: 'Button', url: 'https://cases.gg', row: 0, type: 'url', screenSlug: '' },
       ]);
     };
 
@@ -222,7 +229,8 @@ const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
           ) : (
             <Flex direction="column" gap={2}>
               {buttons.map((btn, idx) => {
-                const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
+                const isScreen = btn.type === 'screen';
+                const urlOk = isScreen || (btn.url ?? '').length === 0 || isValidUrl(btn.url ?? '');
                 return (
                   <Card
                     key={btn.id}
@@ -251,31 +259,59 @@ const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
                           </Typography>
                         </Box>
 
-                        <Box style={{ flex: 1, minWidth: 120 }}>
-                          <TextInput
-                            placeholder="Button text"
-                            value={btn.text}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                              updateButton(btn.id, { text: e.target.value })
+                        <Box style={{ width: 100, flexShrink: 0 }}>
+                          <SingleSelect
+                            value={btn.type || 'url'}
+                            onChange={(val: string) =>
+                              updateButton(btn.id, { type: val as 'url' | 'screen' })
                             }
                             disabled={disabled}
                             size="S"
-                          />
+                          >
+                            <SingleSelectOption value="url">URL</SingleSelectOption>
+                            <SingleSelectOption value="screen">Screen</SingleSelectOption>
+                          </SingleSelect>
                         </Box>
 
-                        <Box style={{ flex: 2, minWidth: 180 }}>
+                        <Box style={{ flex: 1, minWidth: 120 }}>
                           <TextInput
-                            placeholder="https://..."
-                            value={btn.url}
+                            placeholder="Button text"
+                            value={btn.text}
                             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                              updateButton(btn.id, { url: e.target.value })
+                              updateButton(btn.id, { text: e.target.value })
                             }
                             disabled={disabled}
                             size="S"
-                            hasError={!urlOk}
                           />
                         </Box>
 
+                        {isScreen ? (
+                          <Box style={{ flex: 2, minWidth: 180 }}>
+                            <TextInput
+                              placeholder="screen-slug"
+                              value={btn.screenSlug ?? ''}
+                              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                updateButton(btn.id, { screenSlug: e.target.value })
+                              }
+                              disabled={disabled}
+                              size="S"
+                            />
+                          </Box>
+                        ) : (
+                          <Box style={{ flex: 2, minWidth: 180 }}>
+                            <TextInput
+                              placeholder="https://..."
+                              value={btn.url ?? ''}
+                              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                updateButton(btn.id, { url: e.target.value })
+                              }
+                              disabled={disabled}
+                              size="S"
+                              hasError={!urlOk}
+                            />
+                          </Box>
+                        )}
+
                         <Box style={{ width: 60 }}>
                           <TextInput
                             type="number"
@@ -359,7 +395,7 @@ const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
                 {previewRows.map((row) => (
                   <Flex key={row.row} gap={2} wrap="wrap" justifyContent="center">
                     {row.items.map((b) => (
-                      <TelegramButtonPreview key={b.id} text={b.text} url={b.url} />
+                      <TelegramButtonPreview key={b.id} text={b.text} btnType={b.type} />
                     ))}
                   </Flex>
                 ))}

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useMemo, useRef, useState } from 'react';
 import {
   Box,
   Button,
@@ -17,7 +17,7 @@ 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>;
+type TriggerParamsValue = Record<string, number | null>;
 
 interface TriggerParamsFieldProps {
   name: string;
@@ -47,13 +47,11 @@ const parseValue = (value: string | TriggerParamsValue | null | undefined): Trig
 };
 
 const serialize = (params: TriggerParamsValue): string => {
-  const clean: Record<string, number> = {};
+  const out: Record<string, number> = {};
   for (const [key, val] of Object.entries(params)) {
-    if (val !== undefined && val !== null) {
-      clean[key] = val;
-    }
+    if (typeof val === 'number') out[key] = val;
   }
-  return JSON.stringify(clean);
+  return JSON.stringify(out);
 };
 
 interface StrapiTheme {
@@ -77,13 +75,10 @@ const useThemeColors = () => {
 
 const TriggerParamsField = forwardRef<HTMLDivElement, TriggerParamsFieldProps>(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
-    const [params, setParams] = useState<TriggerParamsValue>(() => parseValue(value));
+    const initialRef = useRef(value);
+    const [params, setParams] = useState<TriggerParamsValue>(() => parseValue(initialRef.current));
     const colors = useThemeColors();
 
-    useEffect(() => {
-      setParams(parseValue(value));
-    }, [value]);
-
     const update = (next: TriggerParamsValue) => {
       setParams(next);
       onChange({ target: { name, value: serialize(next) } });
@@ -96,7 +91,7 @@ const TriggerParamsField = forwardRef<HTMLDivElement, TriggerParamsFieldProps>(
     const addParam = (key: string) => {
       const def = TRIGGER_PARAMS.find((p) => p.key === key);
       if (!def) return;
-      update({ ...params, [key]: undefined });
+      update({ ...params, [key]: null });
     };
 
     const removeParam = (key: string) => {
@@ -106,7 +101,7 @@ const TriggerParamsField = forwardRef<HTMLDivElement, TriggerParamsFieldProps>(
     };
 
     const setParamValue = (key: string, val: number | undefined) => {
-      update({ ...params, [key]: val });
+      update({ ...params, [key]: val ?? null });
     };
 
     const getParamDef = (key: string): TriggerParamDef | undefined =>

package/admin/src/types/crm.ts

@@ -34,8 +34,10 @@ export type RulesConfig = RuleGroup;
 
 export interface TelegramButton {
   text: string;
-  url: string;
+  url?: string;
   row?: number;
+  type?: 'url' | 'screen';
+  screenSlug?: string;
 }
 
 export interface CrmTemplate {

package/dist/_chunks/{index-2rErXqfH.js → index-CqRPcaXV.js}

@@ -116,13 +116,11 @@ const parseValue = (value) => {
   return {};
 };
 const serialize = (params) => {
-  const clean = {};
+  const out = {};
   for (const [key, val] of Object.entries(params)) {
-    if (val !== void 0 && val !== null) {
-      clean[key] = val;
-    }
+    if (typeof val === "number") out[key] = val;
   }
-  return JSON.stringify(clean);
+  return JSON.stringify(out);
 };
 const useThemeColors = () => {
   const theme = styledComponents.useTheme();
@@ -139,11 +137,9 @@ const useThemeColors = () => {
 };
 const TriggerParamsField = React.forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
-    const [params, setParams] = React.useState(() => parseValue(value));
+    const initialRef = React.useRef(value);
+    const [params, setParams] = React.useState(() => parseValue(initialRef.current));
     const colors = useThemeColors();
-    React.useEffect(() => {
-      setParams(parseValue(value));
-    }, [value]);
     const update = (next) => {
       setParams(next);
       onChange({ target: { name, value: serialize(next) } });
@@ -153,7 +149,7 @@ const TriggerParamsField = React.forwardRef(
     const addParam = (key) => {
       const def = TRIGGER_PARAMS.find((p) => p.key === key);
       if (!def) return;
-      update({ ...params, [key]: void 0 });
+      update({ ...params, [key]: null });
     };
     const removeParam = (key) => {
       const next = { ...params };
@@ -161,7 +157,7 @@ const TriggerParamsField = React.forwardRef(
       update(next);
     };
     const setParamValue = (key, val) => {
-      update({ ...params, [key]: val });
+      update({ ...params, [key]: val ?? null });
     };
     const getParamDef = (key) => TRIGGER_PARAMS.find((p) => p.key === key);
     return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { name, error, required, hint, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [

package/dist/_chunks/{index-BKfFI_Jo.mjs → index-DRhcN7TG.mjs}

@@ -1,29 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useMemo } from "react";
-import { Field, Flex, Box, Typography, Button, Card, CardContent, TextInput, Tooltip, IconButton } from "@strapi/design-system";
-import { Plus, ArrowUp, ArrowDown, Trash, Link } from "@strapi/icons";
+import { Field, Flex, Box, Typography, Button, Card, CardContent, SingleSelect, SingleSelectOption, TextInput, Tooltip, IconButton } from "@strapi/design-system";
+import { Plus, ArrowUp, ArrowDown, Trash, Layout, Link } from "@strapi/icons";
 import { useTheme } from "styled-components";
 import { m as generateId } from "./utils-BHneBJ7U.mjs";
+const mapRawButton = (b) => ({
+  id: typeof b?.id === "string" ? b.id : generateId(),
+  text: typeof b?.text === "string" ? b.text : "",
+  url: typeof b?.url === "string" ? b.url : "",
+  row: typeof b?.row === "number" ? b.row : 0,
+  type: b?.type === "screen" ? "screen" : "url",
+  screenSlug: typeof b?.screenSlug === "string" ? b.screenSlug : ""
+});
 const parseButtons = (value) => {
   if (!value) return [];
   if (Array.isArray(value)) {
-    return value.map((b) => ({
-      id: typeof b?.id === "string" ? b.id : generateId(),
-      text: typeof b?.text === "string" ? b.text : "",
-      url: typeof b?.url === "string" ? b.url : "",
-      row: typeof b?.row === "number" ? b.row : 0
-    }));
+    return value.map(mapRawButton);
   }
   if (typeof value === "string") {
     try {
       const parsed = JSON.parse(value);
       if (!Array.isArray(parsed)) return [];
-      return parsed.map((b) => ({
-        id: typeof b?.id === "string" ? b.id : generateId(),
-        text: typeof b?.text === "string" ? b.text : "",
-        url: typeof b?.url === "string" ? b.url : "",
-        row: typeof b?.row === "number" ? b.row : 0
-      }));
+      return parsed.map(mapRawButton);
     } catch {
       return [];
     }
@@ -59,37 +57,38 @@ const useThemeColors = () => {
     }
   }), [isDark]);
 };
-const TelegramButtonPreview = ({ text, url }) => /* @__PURE__ */ jsxs(
-  "a",
-  {
-    href: url || "#",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    onClick: (e) => !url && e.preventDefault(),
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "6px",
-      padding: "8px 16px",
-      backgroundColor: "#3390ec",
-      color: "#ffffff",
-      borderRadius: "8px",
-      textDecoration: "none",
-      fontSize: "14px",
-      fontWeight: 500,
-      cursor: url ? "pointer" : "default",
-      transition: "background-color 0.15s ease",
-      minWidth: "80px"
-    },
-    onMouseEnter: (e) => url && (e.currentTarget.style.backgroundColor = "#2b7ed8"),
-    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#3390ec",
-    children: [
-      /* @__PURE__ */ jsx(Link, { width: 14, height: 14, style: { opacity: 0.9 } }),
-      /* @__PURE__ */ jsx("span", { children: text || "(empty)" })
-    ]
-  }
-);
+const TelegramButtonPreview = ({ text, btnType }) => {
+  const isScreen = btnType === "screen";
+  const bgColor = isScreen ? "#7c3aed" : "#3390ec";
+  const bgHover = isScreen ? "#6d28d9" : "#2b7ed8";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+        padding: "8px 16px",
+        backgroundColor: bgColor,
+        color: "#ffffff",
+        borderRadius: "8px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+        cursor: "default",
+        transition: "background-color 0.15s ease",
+        minWidth: "80px"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.backgroundColor = bgHover,
+      onMouseLeave: (e) => e.currentTarget.style.backgroundColor = bgColor,
+      children: [
+        isScreen ? /* @__PURE__ */ jsx(Layout, { width: 14, height: 14, style: { opacity: 0.9 } }) : /* @__PURE__ */ jsx(Link, { width: 14, height: 14, style: { opacity: 0.9 } }),
+        /* @__PURE__ */ jsx("span", { children: text || "(empty)" })
+      ]
+    }
+  );
+};
 const ButtonsBuilder = forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
     const [buttons, setButtons] = useState(() => parseButtons(value));
@@ -104,7 +103,7 @@ const ButtonsBuilder = forwardRef(
     const addButton = () => {
       update([
         ...buttons,
-        { id: generateId(), text: "Button", url: "https://cases.gg", row: 0 }
+        { id: generateId(), text: "Button", url: "https://cases.gg", row: 0, type: "url", screenSlug: "" }
       ]);
     };
     const updateButton = (id, patch) => {
@@ -162,7 +161,8 @@ const ButtonsBuilder = forwardRef(
           ]
         }
       ) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: buttons.map((btn, idx) => {
-        const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
+        const isScreen = btn.type === "screen";
+        const urlOk = isScreen || (btn.url ?? "").length === 0 || isValidUrl(btn.url ?? "");
         return /* @__PURE__ */ jsx(
           Card,
           {
@@ -189,6 +189,19 @@ const ButtonsBuilder = forwardRef(
                     children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "primary600", children: idx + 1 })
                   }
                 ),
+                /* @__PURE__ */ jsx(Box, { style: { width: 100, flexShrink: 0 }, children: /* @__PURE__ */ jsxs(
+                  SingleSelect,
+                  {
+                    value: btn.type || "url",
+                    onChange: (val) => updateButton(btn.id, { type: val }),
+                    disabled,
+                    size: "S",
+                    children: [
+                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "url", children: "URL" }),
+                      /* @__PURE__ */ jsx(SingleSelectOption, { value: "screen", children: "Screen" })
+                    ]
+                  }
+                ) }),
                 /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 120 }, children: /* @__PURE__ */ jsx(
                   TextInput,
                   {
@@ -199,11 +212,20 @@ const ButtonsBuilder = forwardRef(
                     size: "S"
                   }
                 ) }),
-                /* @__PURE__ */ jsx(Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsx(
+                isScreen ? /* @__PURE__ */ jsx(Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    placeholder: "screen-slug",
+                    value: btn.screenSlug ?? "",
+                    onChange: (e) => updateButton(btn.id, { screenSlug: e.target.value }),
+                    disabled,
+                    size: "S"
+                  }
+                ) }) : /* @__PURE__ */ jsx(Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsx(
                   TextInput,
                   {
                     placeholder: "https://...",
-                    value: btn.url,
+                    value: btn.url ?? "",
                     onChange: (e) => updateButton(btn.id, { url: e.target.value }),
                     disabled,
                     size: "S",
@@ -282,7 +304,7 @@ const ButtonsBuilder = forwardRef(
                 children: "PREVIEW"
               }
             ),
-            /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, alignItems: "center", children: previewRows.map((row) => /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", justifyContent: "center", children: row.items.map((b) => /* @__PURE__ */ jsx(TelegramButtonPreview, { text: b.text, url: b.url }, b.id)) }, row.row)) })
+            /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, alignItems: "center", children: previewRows.map((row) => /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", justifyContent: "center", children: row.items.map((b) => /* @__PURE__ */ jsx(TelegramButtonPreview, { text: b.text, btnType: b.type }, b.id)) }, row.row)) })
           ]
         }
       ),

package/dist/_chunks/{index-BMvCnlEy.mjs → index-DnyoVNLo.mjs}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useMemo } from "react";
+import { forwardRef, useRef, useState, useMemo } from "react";
 import { Field, Flex, Box, Typography, Card, CardContent, NumberInput, Tooltip, IconButton, SingleSelect, SingleSelectOption, Button } from "@strapi/design-system";
 import { Trash, Plus } from "@strapi/icons";
 import { useTheme } from "styled-components";
@@ -114,13 +114,11 @@ const parseValue = (value) => {
   return {};
 };
 const serialize = (params) => {
-  const clean = {};
+  const out = {};
   for (const [key, val] of Object.entries(params)) {
-    if (val !== void 0 && val !== null) {
-      clean[key] = val;
-    }
+    if (typeof val === "number") out[key] = val;
   }
-  return JSON.stringify(clean);
+  return JSON.stringify(out);
 };
 const useThemeColors = () => {
   const theme = useTheme();
@@ -137,11 +135,9 @@ const useThemeColors = () => {
 };
 const TriggerParamsField = forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
-    const [params, setParams] = useState(() => parseValue(value));
+    const initialRef = useRef(value);
+    const [params, setParams] = useState(() => parseValue(initialRef.current));
     const colors = useThemeColors();
-    useEffect(() => {
-      setParams(parseValue(value));
-    }, [value]);
     const update = (next) => {
       setParams(next);
       onChange({ target: { name, value: serialize(next) } });
@@ -151,7 +147,7 @@ const TriggerParamsField = forwardRef(
     const addParam = (key) => {
       const def = TRIGGER_PARAMS.find((p) => p.key === key);
       if (!def) return;
-      update({ ...params, [key]: void 0 });
+      update({ ...params, [key]: null });
     };
     const removeParam = (key) => {
       const next = { ...params };
@@ -159,7 +155,7 @@ const TriggerParamsField = forwardRef(
       update(next);
     };
     const setParamValue = (key, val) => {
-      update({ ...params, [key]: val });
+      update({ ...params, [key]: val ?? null });
     };
     const getParamDef = (key) => TRIGGER_PARAMS.find((p) => p.key === key);
     return /* @__PURE__ */ jsx(Field.Root, { name, error, required, hint, ref, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [

package/dist/_chunks/{index-Cg0G_bTE.js → index-u-jR-zfs.js}

@@ -6,26 +6,24 @@ const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
 const utils = require("./utils-CAs_GSGv.js");
+const mapRawButton = (b) => ({
+  id: typeof b?.id === "string" ? b.id : utils.generateId(),
+  text: typeof b?.text === "string" ? b.text : "",
+  url: typeof b?.url === "string" ? b.url : "",
+  row: typeof b?.row === "number" ? b.row : 0,
+  type: b?.type === "screen" ? "screen" : "url",
+  screenSlug: typeof b?.screenSlug === "string" ? b.screenSlug : ""
+});
 const parseButtons = (value) => {
   if (!value) return [];
   if (Array.isArray(value)) {
-    return value.map((b) => ({
-      id: typeof b?.id === "string" ? b.id : utils.generateId(),
-      text: typeof b?.text === "string" ? b.text : "",
-      url: typeof b?.url === "string" ? b.url : "",
-      row: typeof b?.row === "number" ? b.row : 0
-    }));
+    return value.map(mapRawButton);
   }
   if (typeof value === "string") {
     try {
       const parsed = JSON.parse(value);
       if (!Array.isArray(parsed)) return [];
-      return parsed.map((b) => ({
-        id: typeof b?.id === "string" ? b.id : utils.generateId(),
-        text: typeof b?.text === "string" ? b.text : "",
-        url: typeof b?.url === "string" ? b.url : "",
-        row: typeof b?.row === "number" ? b.row : 0
-      }));
+      return parsed.map(mapRawButton);
     } catch {
       return [];
     }
@@ -61,37 +59,38 @@ const useThemeColors = () => {
     }
   }), [isDark]);
 };
-const TelegramButtonPreview = ({ text, url }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "a",
-  {
-    href: url || "#",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    onClick: (e) => !url && e.preventDefault(),
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "6px",
-      padding: "8px 16px",
-      backgroundColor: "#3390ec",
-      color: "#ffffff",
-      borderRadius: "8px",
-      textDecoration: "none",
-      fontSize: "14px",
-      fontWeight: 500,
-      cursor: url ? "pointer" : "default",
-      transition: "background-color 0.15s ease",
-      minWidth: "80px"
-    },
-    onMouseEnter: (e) => url && (e.currentTarget.style.backgroundColor = "#2b7ed8"),
-    onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "#3390ec",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(icons.Link, { width: 14, height: 14, style: { opacity: 0.9 } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: text || "(empty)" })
-    ]
-  }
-);
+const TelegramButtonPreview = ({ text, btnType }) => {
+  const isScreen = btnType === "screen";
+  const bgColor = isScreen ? "#7c3aed" : "#3390ec";
+  const bgHover = isScreen ? "#6d28d9" : "#2b7ed8";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+        padding: "8px 16px",
+        backgroundColor: bgColor,
+        color: "#ffffff",
+        borderRadius: "8px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+        cursor: "default",
+        transition: "background-color 0.15s ease",
+        minWidth: "80px"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.backgroundColor = bgHover,
+      onMouseLeave: (e) => e.currentTarget.style.backgroundColor = bgColor,
+      children: [
+        isScreen ? /* @__PURE__ */ jsxRuntime.jsx(icons.Layout, { width: 14, height: 14, style: { opacity: 0.9 } }) : /* @__PURE__ */ jsxRuntime.jsx(icons.Link, { width: 14, height: 14, style: { opacity: 0.9 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: text || "(empty)" })
+      ]
+    }
+  );
+};
 const ButtonsBuilder = React.forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
     const [buttons, setButtons] = React.useState(() => parseButtons(value));
@@ -106,7 +105,7 @@ const ButtonsBuilder = React.forwardRef(
     const addButton = () => {
       update([
         ...buttons,
-        { id: utils.generateId(), text: "Button", url: "https://cases.gg", row: 0 }
+        { id: utils.generateId(), text: "Button", url: "https://cases.gg", row: 0, type: "url", screenSlug: "" }
       ]);
     };
     const updateButton = (id, patch) => {
@@ -164,7 +163,8 @@ const ButtonsBuilder = React.forwardRef(
           ]
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, children: buttons.map((btn, idx) => {
-        const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
+        const isScreen = btn.type === "screen";
+        const urlOk = isScreen || (btn.url ?? "").length === 0 || isValidUrl(btn.url ?? "");
         return /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Card,
           {
@@ -191,6 +191,19 @@ const ButtonsBuilder = React.forwardRef(
                     children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "primary600", children: idx + 1 })
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: 100, flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    value: btn.type || "url",
+                    onChange: (val) => updateButton(btn.id, { type: val }),
+                    disabled,
+                    size: "S",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "url", children: "URL" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "screen", children: "Screen" })
+                    ]
+                  }
+                ) }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1, minWidth: 120 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.TextInput,
                   {
@@ -201,11 +214,20 @@ const ButtonsBuilder = React.forwardRef(
                     size: "S"
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                isScreen ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    placeholder: "screen-slug",
+                    value: btn.screenSlug ?? "",
+                    onChange: (e) => updateButton(btn.id, { screenSlug: e.target.value }),
+                    disabled,
+                    size: "S"
+                  }
+                ) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 2, minWidth: 180 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.TextInput,
                   {
                     placeholder: "https://...",
-                    value: btn.url,
+                    value: btn.url ?? "",
                     onChange: (e) => updateButton(btn.id, { url: e.target.value }),
                     disabled,
                     size: "S",
@@ -284,7 +306,7 @@ const ButtonsBuilder = React.forwardRef(
                 children: "PREVIEW"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", children: previewRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", justifyContent: "center", children: row.items.map((b) => /* @__PURE__ */ jsxRuntime.jsx(TelegramButtonPreview, { text: b.text, url: b.url }, b.id)) }, row.row)) })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", children: previewRows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", justifyContent: "center", children: row.items.map((b) => /* @__PURE__ */ jsxRuntime.jsx(TelegramButtonPreview, { text: b.text, btnType: b.type }, b.id)) }, row.row)) })
           ]
         }
       ),

package/dist/admin/index.js

@@ -107,7 +107,7 @@ const index = {
       components: {
         Input: async () => Promise.resolve().then(() => require(
           /* webpackChunkName: "crm-telegram-buttons" */
-          "../_chunks/index-Cg0G_bTE.js"
+          "../_chunks/index-u-jR-zfs.js"
         ))
       },
       options: {
@@ -155,7 +155,7 @@ const index = {
       components: {
         Input: async () => Promise.resolve().then(() => require(
           /* webpackChunkName: "crm-trigger-params" */
-          "../_chunks/index-2rErXqfH.js"
+          "../_chunks/index-CqRPcaXV.js"
         ))
       },
       options: {

package/dist/admin/index.mjs

@@ -106,7 +106,7 @@ const index = {
       components: {
         Input: async () => import(
           /* webpackChunkName: "crm-telegram-buttons" */
-          "../_chunks/index-BKfFI_Jo.mjs"
+          "../_chunks/index-DRhcN7TG.mjs"
         )
       },
       options: {
@@ -154,7 +154,7 @@ const index = {
       components: {
         Input: async () => import(
           /* webpackChunkName: "crm-trigger-params" */
-          "../_chunks/index-BMvCnlEy.mjs"
+          "../_chunks/index-DnyoVNLo.mjs"
         )
       },
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inspirer-dev/crm-dashboard",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "description": "CRM Dashboard and Tools",
   "strapi": {
     "name": "crm-dashboard",