@inspirer-dev/crm-dashboard 1.0.84 → 1.0.86

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,62 @@ 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',
+                                ...(val === 'url' ? { screenSlug: '' } : { url: '' }),
+                              })
                             }
                             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 +398,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>
                 ))}