@inspirer-dev/crm-dashboard 1.0.11 → 1.0.13

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

@@ -0,0 +1,270 @@
+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 | TelegramButton[] | 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 | 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,
+    }));
+  }
+  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,
+      }));
+    } catch {
+      return [];
+    }
+  }
+  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/components/CancelConditionsField/index.tsx

@@ -34,7 +34,7 @@ interface CancelConfig {
 
 interface CancelConditionsFieldProps {
   name: string;
-  value?: string | null;
+  value?: string | CancelConfig | null;
   onChange: (event: { target: { name: string; value: string } }) => void;
   intlLabel: {
     id: string;
@@ -54,17 +54,35 @@ const DEFAULT_CONFIG: CancelConfig = {
   rules: [],
 };
 
-const parseConfig = (value: string | null | undefined): CancelConfig => {
+const parseConfig = (value: string | CancelConfig | null | undefined): CancelConfig => {
   if (!value) return DEFAULT_CONFIG;
-  try {
-    const parsed = JSON.parse(value);
-    if (parsed.logic && Array.isArray(parsed.rules)) {
-      return parsed;
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed.logic && Array.isArray(parsed.rules)) {
+        return {
+          ...parsed,
+          rules: parsed.rules.map((rule: CancelRule) => ({
+            ...rule,
+            id: rule.id || generateId(),
+          })),
+        };
+      }
+      return DEFAULT_CONFIG;
+    } catch {
+      return DEFAULT_CONFIG;
     }
-    return DEFAULT_CONFIG;
-  } catch {
-    return DEFAULT_CONFIG;
   }
+  if (value.logic && Array.isArray(value.rules)) {
+    return {
+      ...value,
+      rules: value.rules.map((rule) => ({
+        ...rule,
+        id: rule.id || generateId(),
+      })),
+    };
+  }
+  return DEFAULT_CONFIG;
 };
 
 const serializeConfig = (config: CancelConfig): string => {

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Box,
   Button,
@@ -448,6 +448,10 @@ const RulesBuilder = forwardRef<HTMLDivElement, RulesBuilderProps>(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
     const [config, setConfig] = useState<RulesConfig>(() => deserializeConfig(value));
 
+    useEffect(() => {
+      setConfig(deserializeConfig(value));
+    }, [value]);
+
     const displayLabel = useMemo(() => {
       if (intlLabel?.defaultMessage && !intlLabel.defaultMessage.includes('.')) {
         return intlLabel.defaultMessage;

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,

package/dist/_chunks/index-B_mxTw3i.js

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