@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/ScriptTagEditor.tsx

@@ -1,79 +1,77 @@
-'use client';
+'use client'
 
-import { useState, useEffect } from 'react';
-import { ArrowLeft, Loader2, AlertTriangle, Trash2, X, Plus } from 'lucide-react';
-import { toast } from 'sonner';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
+import { useState, useEffect } from 'react'
+import { ArrowLeft, Loader2, AlertTriangle, Trash2, X, Plus } from 'lucide-react'
+import { toast } from 'sonner'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
 
 export interface ScriptTagEditorProps {
-  tagId?: string;
-  onNavigate?: (path: string) => void;
+  tagId?: string
+  onNavigate?: (path: string) => void
 }
 
 export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
-  const isNew = !tagId;
-  const { data, loading, error } = useApiData<any>(
-    tagId ? `/script-tags` : null,
-  );
+  const isNew = !tagId
+  const { data, loading, error } = useApiData<any>(tagId ? `/script-tags` : null)
 
-  const [name, setName] = useState('');
-  const [code, setCode] = useState('');
-  const [placement, setPlacement] = useState('head');
-  const [scope, setScope] = useState('site');
-  const [targetPaths, setTargetPaths] = useState<string[]>([]);
-  const [pathInput, setPathInput] = useState('');
-  const [priority, setPriority] = useState(100);
-  const [enabled, setEnabled] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [deleting, setDeleting] = useState(false);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [name, setName] = useState('')
+  const [code, setCode] = useState('')
+  const [placement, setPlacement] = useState('head')
+  const [scope, setScope] = useState('site')
+  const [targetPaths, setTargetPaths] = useState<string[]>([])
+  const [pathInput, setPathInput] = useState('')
+  const [priority, setPriority] = useState(100)
+  const [enabled, setEnabled] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
   useEffect(() => {
     if (data && tagId) {
-      const tags = Array.isArray(data) ? data : [];
-      const tag = tags.find((t: any) => t.id === tagId);
+      const tags = Array.isArray(data) ? data : []
+      const tag = tags.find((t: any) => t.id === tagId)
       if (tag) {
-        setName(tag.name ?? '');
-        setCode(tag.code ?? '');
-        setPlacement(tag.placement ?? 'head');
-        setScope(tag.scope ?? 'site');
-        setTargetPaths(tag.targetPaths ?? []);
-        setPriority(tag.priority ?? 100);
-        setEnabled(tag.enabled ?? true);
+        setName(tag.name ?? '')
+        setCode(tag.code ?? '')
+        setPlacement(tag.placement ?? 'head')
+        setScope(tag.scope ?? 'site')
+        setTargetPaths(tag.targetPaths ?? [])
+        setPriority(tag.priority ?? 100)
+        setEnabled(tag.enabled ?? true)
       }
     }
-  }, [data, tagId]);
+  }, [data, tagId])
 
   const addPath = () => {
-    const trimmed = pathInput.trim();
-    if (!trimmed) return;
-    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    const trimmed = pathInput.trim()
+    if (!trimmed) return
+    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`
     if (!targetPaths.includes(normalized)) {
-      setTargetPaths([...targetPaths, normalized]);
+      setTargetPaths([...targetPaths, normalized])
     }
-    setPathInput('');
-  };
+    setPathInput('')
+  }
 
   const removePath = (path: string) => {
-    setTargetPaths(targetPaths.filter((p) => p !== path));
-  };
+    setTargetPaths(targetPaths.filter((p) => p !== path))
+  }
 
   const handleSave = async () => {
     if (!name.trim()) {
-      toast.error('Name is required');
-      return;
+      toast.error('Name is required')
+      return
     }
     if (!code.trim()) {
-      toast.error('Code snippet is required');
-      return;
+      toast.error('Code snippet is required')
+      return
     }
     if (scope !== 'site' && targetPaths.length === 0) {
-      toast.error('At least one target path is required for this scope');
-      return;
+      toast.error('At least one target path is required for this scope')
+      return
     }
 
-    setSaving(true);
+    setSaving(true)
     const payload = {
       name: name.trim(),
       code,
@@ -82,40 +80,40 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
       targetPaths: scope === 'site' ? [] : targetPaths,
       priority,
       enabled,
-    };
+    }
 
     const res = isNew
       ? await cmsApi('/script-tags', { method: 'POST', body: JSON.stringify(payload) })
-      : await cmsApi(`/script-tags/${tagId}`, { method: 'PUT', body: JSON.stringify(payload) });
+      : await cmsApi(`/script-tags/${tagId}`, { method: 'PUT', body: JSON.stringify(payload) })
 
-    setSaving(false);
+    setSaving(false)
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success(isNew ? 'Tag created' : 'Tag updated');
-      onNavigate?.('/script-tags');
+      toast.success(isNew ? 'Tag created' : 'Tag updated')
+      onNavigate?.('/script-tags')
     }
-  };
+  }
 
   const handleDelete = async () => {
-    if (!tagId) return;
-    setDeleting(true);
-    const res = await cmsApi(`/script-tags/${tagId}`, { method: 'DELETE' });
-    setDeleting(false);
+    if (!tagId) return
+    setDeleting(true)
+    const res = await cmsApi(`/script-tags/${tagId}`, { method: 'DELETE' })
+    setDeleting(false)
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Tag deleted');
-      onNavigate?.('/script-tags');
+      toast.success('Tag deleted')
+      onNavigate?.('/script-tags')
     }
-  };
+  }
 
   if (loading && !isNew) {
     return (
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -145,7 +143,8 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
         <div className="flex items-start gap-2">
           <AlertTriangle className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
           <p className="text-sm text-amber-800">
-            This code will run on public pages matching the scope below. Only add trusted code from verified sources (e.g. Google Analytics, Meta Pixel).
+            This code will run on public pages matching the scope below. Only add trusted code from
+            verified sources (e.g. Google Analytics, Meta Pixel).
           </p>
         </div>
       </div>
@@ -196,7 +195,8 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
             <p className="mt-1 text-xs text-gray-500">
               {placement === 'head' && 'Best for analytics scripts, meta tags, and custom CSS.'}
               {placement === 'body_open' && 'Best for GTM noscript tags and early-loading scripts.'}
-              {placement === 'body_close' && 'Best for chat widgets, deferred scripts, and tracking pixels.'}
+              {placement === 'body_close' &&
+                'Best for chat widgets, deferred scripts, and tracking pixels.'}
             </p>
           </div>
 
@@ -225,8 +225,8 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                   onChange={(e) => setPathInput(e.target.value)}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter') {
-                      e.preventDefault();
-                      addPath();
+                      e.preventDefault()
+                      addPath()
                     }
                   }}
                   placeholder="/services"
@@ -357,5 +357,5 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/views/ScriptTags.tsx

@@ -1,81 +1,81 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
-import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react';
-import { toast } from 'sonner';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
+import { useState } from 'react'
+import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
+import { toast } from 'sonner'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
 
 interface ScriptTag {
-  id: string;
-  name: string;
-  code: string;
-  placement: string;
-  scope: string;
-  targetPaths: string[];
-  priority: number;
-  enabled: boolean;
-  createdAt: string;
-  updatedAt: string;
+  id: string
+  name: string
+  code: string
+  placement: string
+  scope: string
+  targetPaths: string[]
+  priority: number
+  enabled: boolean
+  createdAt: string
+  updatedAt: string
 }
 
 export interface ScriptTagsProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 const PLACEMENT_LABELS: Record<string, string> = {
   head: 'Head',
   body_open: 'Body Open',
   body_close: 'Body Close',
-};
+}
 
 const PLACEMENT_COLORS: Record<string, string> = {
   head: 'bg-purple-100 text-purple-700',
   body_open: 'bg-blue-100 text-blue-700',
   body_close: 'bg-green-100 text-green-700',
-};
+}
 
 function scopeLabel(tag: ScriptTag): string {
-  const scope = String(tag.scope ?? '');
-  const targetPaths = Array.isArray(tag.targetPaths) ? tag.targetPaths : [];
-  if (scope === 'site') return 'Entire Site';
+  const scope = String(tag.scope ?? '')
+  const targetPaths = Array.isArray(tag.targetPaths) ? tag.targetPaths : []
+  if (scope === 'site') return 'Entire Site'
   if (scope === 'parents') {
-    const count = targetPaths.length;
-    return `${count} parent path${count !== 1 ? 's' : ''} + children`;
+    const count = targetPaths.length
+    return `${count} parent path${count !== 1 ? 's' : ''} + children`
   }
   if (scope === 'urls') {
-    const count = targetPaths.length;
-    return `${count} URL${count !== 1 ? 's' : ''}`;
+    const count = targetPaths.length
+    return `${count} URL${count !== 1 ? 's' : ''}`
   }
-  return scope || 'Custom';
+  return scope || 'Custom'
 }
 
 export function ScriptTags({ onNavigate }: ScriptTagsProps) {
-  const { data, loading, error, refetch } = useApiData<ScriptTag[]>('/script-tags');
-  const [togglingId, setTogglingId] = useState<string | null>(null);
+  const { data, loading, error, refetch } = useApiData<ScriptTag[]>('/script-tags')
+  const [togglingId, setTogglingId] = useState<string | null>(null)
 
-  const tags = data ?? [];
+  const tags = data ?? []
 
   const toggleEnabled = async (tag: ScriptTag) => {
-    setTogglingId(tag.id);
+    setTogglingId(tag.id)
     const res = await cmsApi(`/script-tags/${tag.id}`, {
       method: 'PUT',
       body: JSON.stringify({ enabled: !tag.enabled }),
-    });
-    setTogglingId(null);
+    })
+    setTogglingId(null)
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      refetch();
+      refetch()
     }
-  };
+  }
 
   if (loading) {
     return (
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -84,14 +84,21 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
       <div className="mb-4 flex items-center justify-between">
         <div>
           <h1 className="mb-1 text-2xl font-semibold text-gray-900">Script Tags</h1>
-          <p className="text-sm text-gray-600">Manage tracking codes, analytics, and custom scripts injected into your site</p>
+          <p className="text-sm text-gray-600">
+            Manage tracking codes, analytics, and custom scripts injected into your site
+          </p>
         </div>
         <button
           type="button"
@@ -133,7 +140,10 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
             </thead>
             <tbody>
               {tags.map((tag) => (
-                <tr key={tag.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors">
+                <tr
+                  key={tag.id}
+                  className="border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors"
+                >
                   <td className="px-4 py-3">
                     <button
                       type="button"
@@ -144,7 +154,9 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
                     </button>
                   </td>
                   <td className="px-4 py-3">
-                    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-gray-100 text-gray-700'}`}>
+                    <span
+                      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-gray-100 text-gray-700'}`}
+                    >
                       {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
                     </span>
                   </td>
@@ -172,5 +184,5 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
         </div>
       )}
     </div>
-  );
+  )
 }