@inspirer-dev/crm-dashboard 1.0.10 → 1.0.12

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

@@ -0,0 +1,333 @@
+import React, { forwardRef, useState, useEffect } from 'react';
+import {
+  Box,
+  Field,
+  Flex,
+  TextInput,
+  Typography,
+  SingleSelect,
+  SingleSelectOption,
+  Card,
+  CardContent,
+  Checkbox,
+} from '@strapi/design-system';
+
+interface TriggerConfig {
+  type: 'db_based' | 'event_based';
+  eventName?: string;
+  delayValue?: number;
+  delayUnit?: 'seconds' | 'minutes' | 'hours';
+  scheduleType?: 'daily' | 'weekly' | 'cron';
+  scheduleTime?: string;
+  scheduleDays?: number[];
+  scheduleCron?: string;
+}
+
+interface TriggerConfigFieldProps {
+  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 DEFAULT_CONFIG: TriggerConfig = {
+  type: 'event_based',
+  eventName: '',
+  delayValue: 10,
+  delayUnit: 'minutes',
+  scheduleType: 'daily',
+  scheduleTime: '12:00',
+  scheduleDays: [1, 2, 3, 4, 5],
+  scheduleCron: '0 12 * * *',
+};
+
+const WEEKDAYS = [
+  { value: 0, label: 'Sun' },
+  { value: 1, label: 'Mon' },
+  { value: 2, label: 'Tue' },
+  { value: 3, label: 'Wed' },
+  { value: 4, label: 'Thu' },
+  { value: 5, label: 'Fri' },
+  { value: 6, label: 'Sat' },
+];
+
+const parseConfig = (value: string | null | undefined): TriggerConfig => {
+  if (!value) return DEFAULT_CONFIG;
+  try {
+    const parsed = JSON.parse(value);
+    return {
+      type: parsed.type || 'event_based',
+      eventName: parsed.eventName || '',
+      delayValue: parsed.delayValue ?? 10,
+      delayUnit: parsed.delayUnit || 'minutes',
+      scheduleType: parsed.scheduleType || 'daily',
+      scheduleTime: parsed.scheduleTime || '12:00',
+      scheduleDays: parsed.scheduleDays || [1, 2, 3, 4, 5],
+      scheduleCron: parsed.scheduleCron || '0 12 * * *',
+    };
+  } catch {
+    return DEFAULT_CONFIG;
+  }
+};
+
+const serializeConfig = (config: TriggerConfig): string => {
+  return JSON.stringify(config);
+};
+
+const TriggerConfigField = forwardRef<HTMLDivElement, TriggerConfigFieldProps>(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [config, setConfig] = useState<TriggerConfig>(() => parseConfig(value));
+
+    useEffect(() => {
+      const parsed = parseConfig(value);
+      setConfig(parsed);
+    }, [value]);
+
+    const handleUpdate = (updates: Partial<TriggerConfig>) => {
+      const newConfig = { ...config, ...updates };
+      setConfig(newConfig);
+      onChange({
+        target: {
+          name,
+          value: serializeConfig(newConfig),
+        },
+      });
+    };
+
+    const toggleDay = (day: number) => {
+      const days = config.scheduleDays || [];
+      const newDays = days.includes(day)
+        ? days.filter((d) => d !== day)
+        : [...days, day].sort((a, b) => a - b);
+      handleUpdate({ scheduleDays: newDays });
+    };
+
+    const isEventBased = config.type === 'event_based';
+    const isDbBased = config.type === 'db_based';
+
+    return (
+      <Field.Root name={name} error={error} required={required} hint={hint} ref={ref}>
+        <Flex direction="column" gap={3}>
+          <Field.Label>{intlLabel?.defaultMessage || 'Trigger Configuration'}</Field.Label>
+          
+          <Box>
+            <Typography variant="pi" textColor="neutral600" style={{ marginBottom: '8px', display: 'block' }}>
+              Campaign Type
+            </Typography>
+            <Flex gap={2}>
+              <Box
+                padding={3}
+                background={isEventBased ? 'primary100' : 'neutral100'}
+                hasRadius
+                style={{ 
+                  cursor: disabled ? 'not-allowed' : 'pointer',
+                  border: `2px solid ${isEventBased ? '#4945ff' : '#dcdce4'}`,
+                  flex: 1,
+                  textAlign: 'center',
+                }}
+                onClick={() => !disabled && handleUpdate({ type: 'event_based' })}
+              >
+                <Typography 
+                  variant="omega" 
+                  fontWeight={isEventBased ? 'bold' : 'regular'}
+                  textColor={isEventBased ? 'primary600' : 'neutral600'}
+                >
+                  Event-Based
+                </Typography>
+                <Typography variant="pi" textColor="neutral500">
+                  Fires on user action
+                </Typography>
+              </Box>
+              <Box
+                padding={3}
+                background={isDbBased ? 'primary100' : 'neutral100'}
+                hasRadius
+                style={{ 
+                  cursor: disabled ? 'not-allowed' : 'pointer',
+                  border: `2px solid ${isDbBased ? '#4945ff' : '#dcdce4'}`,
+                  flex: 1,
+                  textAlign: 'center',
+                }}
+                onClick={() => !disabled && handleUpdate({ type: 'db_based' })}
+              >
+                <Typography 
+                  variant="omega" 
+                  fontWeight={isDbBased ? 'bold' : 'regular'}
+                  textColor={isDbBased ? 'primary600' : 'neutral600'}
+                >
+                  DB-Based (Scheduled)
+                </Typography>
+                <Typography variant="pi" textColor="neutral500">
+                  Runs on schedule
+                </Typography>
+              </Box>
+            </Flex>
+          </Box>
+
+          {isEventBased && (
+            <Card background="neutral100">
+              <CardContent>
+                <Flex direction="column" gap={4} padding={4}>
+                  <Typography variant="delta">Event Configuration</Typography>
+                  
+                  <Field.Root name={`${name}-eventName`}>
+                    <Field.Label>Event Name</Field.Label>
+                    <TextInput
+                      placeholder="e.g., gg-case-deposit"
+                      value={config.eventName || ''}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                        handleUpdate({ eventName: e.target.value })
+                      }
+                      disabled={disabled}
+                    />
+                    <Field.Hint>
+                      The event that triggers this campaign (e.g., gg-case-deposit, gg-deposit-suggestion-selected)
+                    </Field.Hint>
+                  </Field.Root>
+
+                  <Box>
+                    <Typography variant="pi" textColor="neutral800" style={{ marginBottom: '8px', display: 'block' }}>
+                      Delay Before Sending
+                    </Typography>
+                    <Flex gap={2} alignItems="flex-start">
+                      <Box style={{ width: '120px' }}>
+                        <TextInput
+                          type="number"
+                          value={String(config.delayValue || 0)}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                            handleUpdate({ delayValue: parseInt(e.target.value, 10) || 0 })
+                          }
+                          disabled={disabled}
+                          aria-label="Delay value"
+                        />
+                      </Box>
+                      <Box style={{ width: '150px' }}>
+                        <SingleSelect
+                          value={config.delayUnit || 'minutes'}
+                          onChange={(val: string) => 
+                            handleUpdate({ delayUnit: val as TriggerConfig['delayUnit'] })
+                          }
+                          disabled={disabled}
+                        >
+                          <SingleSelectOption value="seconds">seconds</SingleSelectOption>
+                          <SingleSelectOption value="minutes">minutes</SingleSelectOption>
+                          <SingleSelectOption value="hours">hours</SingleSelectOption>
+                        </SingleSelect>
+                      </Box>
+                    </Flex>
+                    <Typography variant="pi" textColor="neutral500" style={{ marginTop: '4px' }}>
+                      Wait this long after the event before checking segment rules and sending
+                    </Typography>
+                  </Box>
+                </Flex>
+              </CardContent>
+            </Card>
+          )}
+
+          {isDbBased && (
+            <Card background="neutral100">
+              <CardContent>
+                <Flex direction="column" gap={4} padding={4}>
+                  <Typography variant="delta">Schedule Configuration</Typography>
+
+                  <Field.Root name={`${name}-scheduleType`}>
+                    <Field.Label>Schedule Type</Field.Label>
+                    <SingleSelect
+                      value={config.scheduleType || 'daily'}
+                      onChange={(val: string) => 
+                        handleUpdate({ scheduleType: val as TriggerConfig['scheduleType'] })
+                      }
+                      disabled={disabled}
+                    >
+                      <SingleSelectOption value="daily">Daily</SingleSelectOption>
+                      <SingleSelectOption value="weekly">Weekly</SingleSelectOption>
+                      <SingleSelectOption value="cron">Custom (Cron)</SingleSelectOption>
+                    </SingleSelect>
+                  </Field.Root>
+
+                  {(config.scheduleType === 'daily' || config.scheduleType === 'weekly') && (
+                    <Field.Root name={`${name}-scheduleTime`}>
+                      <Field.Label>Time of Day (UTC)</Field.Label>
+                      <TextInput
+                        type="time"
+                        value={config.scheduleTime || '12:00'}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                          handleUpdate({ scheduleTime: e.target.value })
+                        }
+                        disabled={disabled}
+                      />
+                    </Field.Root>
+                  )}
+
+                  {config.scheduleType === 'weekly' && (
+                    <Box>
+                      <Typography variant="pi" textColor="neutral800" style={{ marginBottom: '8px', display: 'block' }}>
+                        Days of Week
+                      </Typography>
+                      <Flex gap={2} wrap="wrap">
+                        {WEEKDAYS.map((day) => (
+                          <Box
+                            key={day.value}
+                            padding={2}
+                            background={(config.scheduleDays || []).includes(day.value) ? 'primary100' : 'neutral100'}
+                            hasRadius
+                            style={{
+                              cursor: disabled ? 'not-allowed' : 'pointer',
+                              border: `1px solid ${(config.scheduleDays || []).includes(day.value) ? '#4945ff' : '#dcdce4'}`,
+                              minWidth: '50px',
+                              textAlign: 'center',
+                            }}
+                            onClick={() => !disabled && toggleDay(day.value)}
+                          >
+                            <Typography
+                              variant="omega"
+                              textColor={(config.scheduleDays || []).includes(day.value) ? 'primary600' : 'neutral600'}
+                            >
+                              {day.label}
+                            </Typography>
+                          </Box>
+                        ))}
+                      </Flex>
+                    </Box>
+                  )}
+
+                  {config.scheduleType === 'cron' && (
+                    <Field.Root name={`${name}-scheduleCron`}>
+                      <Field.Label>Cron Expression</Field.Label>
+                      <TextInput
+                        placeholder="0 12 * * *"
+                        value={config.scheduleCron || ''}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                          handleUpdate({ scheduleCron: e.target.value })
+                        }
+                        disabled={disabled}
+                      />
+                      <Field.Hint>
+                        Standard cron format: minute hour day month weekday (e.g., "0 12 * * *" = daily at 12:00 UTC)
+                      </Field.Hint>
+                    </Field.Root>
+                  )}
+                </Flex>
+              </CardContent>
+            </Card>
+          )}
+
+          {error && <Field.Error>{error}</Field.Error>}
+          {hint && <Field.Hint>{hint}</Field.Hint>}
+        </Flex>
+      </Field.Root>
+    );
+  }
+);
+
+TriggerConfigField.displayName = 'TriggerConfigField';
+
+export default TriggerConfigField;

package/admin/src/index.ts

@@ -1,4 +1,4 @@
-import { Message } from '@strapi/icons';
+import { Message, Clock, Cross, Link } from '@strapi/icons';
 
 const PLUGIN_ID = 'crm-dashboard';
 
@@ -7,7 +7,6 @@ export default {
     app.customFields.register({
       name: 'rules',
       pluginId: PLUGIN_ID,
-      plugin: PLUGIN_ID,
       type: 'json',
       intlLabel: {
         id: `${PLUGIN_ID}.rules.label`,
@@ -30,6 +29,81 @@ export default {
       },
     });
 
+    app.customFields.register({
+      name: 'trigger-config',
+      pluginId: PLUGIN_ID,
+      type: 'json',
+      intlLabel: {
+        id: `${PLUGIN_ID}.trigger-config.label`,
+        defaultMessage: 'Trigger Configuration',
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.trigger-config.description`,
+        defaultMessage: 'Configure segment type (scheduled or event-triggered) and trigger settings',
+      },
+      icon: Clock,
+      components: {
+        Input: async () =>
+          import(
+            /* webpackChunkName: "crm-trigger-config" */ './components/TriggerConfigField/index'
+          ),
+      },
+      options: {
+        base: [],
+        advanced: [],
+      },
+    });
+
+    app.customFields.register({
+      name: 'cancel-conditions',
+      pluginId: PLUGIN_ID,
+      type: 'json',
+      intlLabel: {
+        id: `${PLUGIN_ID}.cancel-conditions.label`,
+        defaultMessage: 'Cancel Conditions',
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.cancel-conditions.description`,
+        defaultMessage: 'Conditions that will cancel sending (checked right before send)',
+      },
+      icon: Cross,
+      components: {
+        Input: async () =>
+          import(
+            /* webpackChunkName: "crm-cancel-conditions" */ './components/CancelConditionsField/index'
+          ),
+      },
+      options: {
+        base: [],
+        advanced: [],
+      },
+    });
+
+    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,