@inspirer-dev/crm-dashboard 1.0.11 → 1.0.12

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

@@ -0,0 +1,259 @@
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  Field,
+  Flex,
+  IconButton,
+  TextInput,
+  Typography,
+  Tooltip,
+} from '@strapi/design-system';
+import { Plus, Trash, ArrowUp, ArrowDown } from '@strapi/icons';
+import { generateId } from '../RulesBuilder/utils';
+
+type TelegramButton = {
+  id: string;
+  text: string;
+  url: string;
+  row?: number;
+};
+
+interface ButtonsBuilderProps {
+  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 parseButtons = (value: string | null | undefined): TelegramButton[] => {
+  if (!value) return [];
+  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,
+    }));
+  } catch {
+    return [];
+  }
+};
+
+const serializeButtons = (buttons: TelegramButton[]): string => JSON.stringify(buttons);
+
+const isValidUrl = (url: string): boolean => {
+  try {
+    const u = new URL(url);
+    return u.protocol === 'http:' || u.protocol === 'https:';
+  } catch {
+    return false;
+  }
+};
+
+const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [buttons, setButtons] = useState<TelegramButton[]>(() => parseButtons(value));
+
+    useEffect(() => {
+      setButtons(parseButtons(value));
+    }, [value]);
+
+    const update = (next: TelegramButton[]) => {
+      setButtons(next);
+      onChange({ target: { name, value: serializeButtons(next) } });
+    };
+
+    const addButton = () => {
+      update([
+        ...buttons,
+        { id: generateId(), text: 'Button', url: 'https://cases.gg', row: 0 },
+      ]);
+    };
+
+    const updateButton = (id: string, patch: Partial<TelegramButton>) => {
+      update(buttons.map((b) => (b.id === id ? { ...b, ...patch } : b)));
+    };
+
+    const deleteButton = (id: string) => {
+      update(buttons.filter((b) => b.id !== id));
+    };
+
+    const move = (from: number, to: number) => {
+      if (to < 0 || to >= buttons.length) return;
+      const copy = [...buttons];
+      const [item] = copy.splice(from, 1);
+      copy.splice(to, 0, item);
+      update(copy);
+    };
+
+    const previewRows = useMemo(() => {
+      const rows = new Map<number, TelegramButton[]>();
+      for (const b of buttons) {
+        const row = b.row ?? 0;
+        rows.set(row, [...(rows.get(row) || []), b]);
+      }
+      return Array.from(rows.entries())
+        .sort((a, b) => a[0] - b[0])
+        .map(([row, items]) => ({ row, items }));
+    }, [buttons]);
+
+    return (
+      <Field.Root name={name} error={error} required={required} hint={hint} ref={ref}>
+        <Flex direction="column" gap={3}>
+          <Field.Label>{intlLabel?.defaultMessage || 'Buttons'}</Field.Label>
+          <Typography variant="pi" textColor="neutral600">
+            Build Telegram inline keyboard buttons (text + URL). Stored as JSON.
+          </Typography>
+
+          <Flex direction="column" gap={2}>
+            {buttons.map((btn, idx) => {
+              const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
+              return (
+                <Flex
+                  key={btn.id}
+                  gap={2}
+                  alignItems="flex-start"
+                  padding={3}
+                  background="neutral0"
+                  hasRadius
+                  style={{ border: '1px solid #dcdce4' }}
+                >
+                  <Box style={{ flex: 2, minWidth: 180 }}>
+                    <Field.Root name={`${name}.${btn.id}.text`}>
+                      <Field.Label>Text</Field.Label>
+                      <TextInput
+                        value={btn.text}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          updateButton(btn.id, { text: e.target.value })
+                        }
+                        disabled={disabled}
+                      />
+                    </Field.Root>
+                  </Box>
+
+                  <Box style={{ flex: 3, minWidth: 220 }}>
+                    <Field.Root name={`${name}.${btn.id}.url`}>
+                      <Field.Label>URL</Field.Label>
+                      <TextInput
+                        value={btn.url}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          updateButton(btn.id, { url: e.target.value })
+                        }
+                        disabled={disabled}
+                      />
+                      {!urlOk && (
+                        <Typography variant="pi" textColor="danger600" style={{ marginTop: 4 }}>
+                          Please enter a valid http/https URL
+                        </Typography>
+                      )}
+                    </Field.Root>
+                  </Box>
+
+                  <Box style={{ width: 90 }}>
+                    <Field.Root name={`${name}.${btn.id}.row`}>
+                      <Field.Label>Row</Field.Label>
+                      <TextInput
+                        type="number"
+                        value={String(btn.row ?? 0)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          updateButton(btn.id, { row: parseInt(e.target.value, 10) || 0 })
+                        }
+                        disabled={disabled}
+                      />
+                    </Field.Root>
+                  </Box>
+
+                  <Flex direction="column" gap={1} paddingTop={6}>
+                    <Tooltip label="Move up">
+                      <IconButton
+                        onClick={() => move(idx, idx - 1)}
+                        label="Move up"
+                        variant="ghost"
+                        disabled={disabled || idx === 0}
+                      >
+                        <ArrowUp />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip label="Move down">
+                      <IconButton
+                        onClick={() => move(idx, idx + 1)}
+                        label="Move down"
+                        variant="ghost"
+                        disabled={disabled || idx === buttons.length - 1}
+                      >
+                        <ArrowDown />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip label="Delete button">
+                      <IconButton
+                        onClick={() => deleteButton(btn.id)}
+                        label="Delete button"
+                        variant="ghost"
+                        disabled={disabled}
+                      >
+                        <Trash />
+                      </IconButton>
+                    </Tooltip>
+                  </Flex>
+                </Flex>
+              );
+            })}
+
+            {buttons.length === 0 && (
+              <Box padding={4} background="neutral0" hasRadius style={{ border: '1px dashed #dcdce4' }}>
+                <Typography variant="omega" textColor="neutral600">
+                  No buttons. Add one to create an inline keyboard.
+                </Typography>
+              </Box>
+            )}
+          </Flex>
+
+          <Flex gap={2}>
+            <Button startIcon={<Plus />} onClick={addButton} disabled={disabled} variant="secondary">
+              Add button
+            </Button>
+          </Flex>
+
+          {buttons.length > 0 && (
+            <Box paddingTop={2}>
+              <Typography variant="pi" textColor="neutral600" style={{ marginBottom: 8, display: 'block' }}>
+                Preview
+              </Typography>
+              <Flex direction="column" gap={2}>
+                {previewRows.map((row) => (
+                  <Flex key={row.row} gap={1} wrap="wrap">
+                    {row.items.map((b) => (
+                      <Badge key={b.id} backgroundColor="primary100">
+                        {b.text || '(empty)'}
+                      </Badge>
+                    ))}
+                  </Flex>
+                ))}
+              </Flex>
+            </Box>
+          )}
+
+          {error && <Field.Error>{error}</Field.Error>}
+          {hint && <Field.Hint>{hint}</Field.Hint>}
+        </Flex>
+      </Field.Root>
+    );
+  }
+);
+
+ButtonsBuilder.displayName = 'ButtonsBuilder';
+
+export default ButtonsBuilder;
+

package/admin/src/index.ts

@@ -1,4 +1,4 @@
-import { Message, Clock, Cross } from '@strapi/icons';
+import { Message, Clock, Cross, Link } from '@strapi/icons';
 
 const PLUGIN_ID = 'crm-dashboard';
 
@@ -79,6 +79,31 @@ export default {
       },
     });
 
+    app.customFields.register({
+      name: 'telegram-buttons',
+      pluginId: PLUGIN_ID,
+      type: 'json',
+      intlLabel: {
+        id: `${PLUGIN_ID}.telegram-buttons.label`,
+        defaultMessage: 'Buttons',
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.telegram-buttons.description`,
+        defaultMessage: 'Build Telegram inline buttons (text + URL)',
+      },
+      icon: Link,
+      components: {
+        Input: async () =>
+          import(
+            /* webpackChunkName: "crm-telegram-buttons" */ './components/ButtonsBuilder/index'
+          ),
+      },
+      options: {
+        base: [],
+        advanced: [],
+      },
+    });
+
     app.addMenuLink({
       to: `/plugins/${PLUGIN_ID}`,
       icon: Message,