@actuate-media/cms-admin 0.66.0 → 0.68.0

package/src/views/ScriptTagEditor.tsx

@@ -1,353 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { ArrowLeft, Loader2, AlertTriangle, Trash2, X, Plus } from 'lucide-react'
-import { toast } from 'sonner'
-import { EnabledSwitch } from '../components/EnabledSwitch.js'
-import { useApiData } from '../lib/useApiData.js'
-import { cmsApi } from '../lib/api.js'
-
-export interface ScriptTagEditorProps {
-  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 [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)
-      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)
-      }
-    }
-  }, [data, tagId])
-
-  const addPath = () => {
-    const trimmed = pathInput.trim()
-    if (!trimmed) return
-    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`
-    if (!targetPaths.includes(normalized)) {
-      setTargetPaths([...targetPaths, normalized])
-    }
-    setPathInput('')
-  }
-
-  const removePath = (path: string) => {
-    setTargetPaths(targetPaths.filter((p) => p !== path))
-  }
-
-  const handleSave = async () => {
-    if (!name.trim()) {
-      toast.error('Name is required')
-      return
-    }
-    if (!code.trim()) {
-      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
-    }
-
-    setSaving(true)
-    const payload = {
-      name: name.trim(),
-      code,
-      placement,
-      scope,
-      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) })
-
-    setSaving(false)
-    if (res.error) {
-      toast.error(res.error)
-    } else {
-      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 (res.error) {
-      toast.error(res.error)
-    } else {
-      toast.success('Tag deleted')
-      onNavigate?.('/script-tags')
-    }
-  }
-
-  if (loading && !isNew) {
-    return (
-      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="text-primary h-6 w-6 animate-spin" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="max-w-3xl p-3 pr-6 sm:p-4 sm:pr-8">
-      {error && (
-        <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3">
-          <AlertTriangle className="text-destructive h-5 w-5 shrink-0" />
-          <span className="text-destructive flex-1 text-sm">{error}</span>
-        </div>
-      )}
-
-      <div className="mb-6">
-        <button
-          type="button"
-          onClick={() => onNavigate?.('/script-tags')}
-          className="text-muted-foreground hover:text-foreground mb-3 flex items-center gap-1.5 text-sm transition-colors"
-        >
-          <ArrowLeft className="h-4 w-4" />
-          Back to Script Tags
-        </button>
-        <h1 className="text-foreground">{isNew ? 'New Script Tag' : 'Edit Script Tag'}</h1>
-      </div>
-
-      <div className="border-warning/30 bg-warning/10 mb-6 rounded-lg border p-3">
-        <div className="flex items-start gap-2">
-          <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
-          <p className="text-warning text-sm">
-            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>
-
-      <div className="space-y-6">
-        <div className="border-border bg-card space-y-4 rounded-lg border p-4">
-          <div>
-            <label className="text-foreground mb-1 block text-sm font-medium">Name</label>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="e.g. Google Tag Manager, Facebook Pixel"
-              className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-            />
-          </div>
-
-          <div>
-            <label className="text-foreground mb-1 block text-sm font-medium">Code</label>
-            <textarea
-              value={code}
-              onChange={(e) => setCode(e.target.value)}
-              placeholder="Paste your HTML/JavaScript snippet here..."
-              rows={10}
-              className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 font-mono text-sm focus:ring-2 focus:outline-none"
-              spellCheck={false}
-            />
-            <p className="text-muted-foreground mt-1 text-xs">
-              Paste the full code snippet including {'<script>'} tags.
-            </p>
-          </div>
-        </div>
-
-        <div className="border-border bg-card space-y-4 rounded-lg border p-4">
-          <h3 className="text-foreground text-sm font-medium">Placement & Scope</h3>
-
-          <div>
-            <label className="text-foreground mb-1 block text-sm font-medium">Placement</label>
-            <select
-              value={placement}
-              onChange={(e) => setPlacement(e.target.value)}
-              className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-            >
-              <option value="head">Head — inside {'<head>'}</option>
-              <option value="body_open">Body Open — right after {'<body>'}</option>
-              <option value="body_close">Body Close — before {'</body>'}</option>
-            </select>
-            <p className="text-muted-foreground mt-1 text-xs">
-              {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.'}
-            </p>
-          </div>
-
-          <div>
-            <label className="text-foreground mb-1 block text-sm font-medium">Scope</label>
-            <select
-              value={scope}
-              onChange={(e) => setScope(e.target.value)}
-              className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-            >
-              <option value="site">Entire Website</option>
-              <option value="parents">Specific Parent Pages (includes child pages)</option>
-              <option value="urls">Specific URLs (exact match)</option>
-            </select>
-          </div>
-
-          {scope !== 'site' && (
-            <div>
-              <label className="text-foreground mb-1 block text-sm font-medium">
-                {scope === 'parents' ? 'Parent Paths' : 'URL Paths'}
-              </label>
-              <div className="flex gap-2">
-                <input
-                  type="text"
-                  value={pathInput}
-                  onChange={(e) => setPathInput(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault()
-                      addPath()
-                    }
-                  }}
-                  placeholder="/services"
-                  className="border-input focus:ring-ring flex-1 rounded-lg border px-3 py-2 font-mono text-sm focus:ring-2 focus:outline-none"
-                />
-                <button
-                  type="button"
-                  onClick={addPath}
-                  className="border-input hover:bg-muted rounded-lg border px-3 py-2 text-sm transition-colors"
-                >
-                  <Plus className="h-4 w-4" />
-                </button>
-              </div>
-              {scope === 'parents' && (
-                <p className="text-muted-foreground mt-1 text-xs">
-                  This tag will also apply to all child pages under each path.
-                </p>
-              )}
-              {targetPaths.length > 0 && (
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {targetPaths.map((p) => (
-                    <span
-                      key={p}
-                      className="bg-muted text-foreground inline-flex items-center gap-1 rounded-full px-3 py-1 font-mono text-xs"
-                    >
-                      {p}
-                      <button
-                        type="button"
-                        onClick={() => removePath(p)}
-                        className="text-muted-foreground hover:text-muted-foreground ml-0.5"
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="text-foreground mb-1 block text-sm font-medium">Priority</label>
-              <input
-                type="number"
-                value={priority}
-                onChange={(e) => setPriority(parseInt(e.target.value, 10) || 0)}
-                min={0}
-                className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-              />
-              <p className="text-muted-foreground mt-1 text-xs">
-                Lower numbers load first (e.g. 1 = first, 100 = default)
-              </p>
-            </div>
-            <div>
-              <label className="text-foreground mb-1 block text-sm font-medium">Enabled</label>
-              <div className="pt-2">
-                <EnabledSwitch
-                  checked={enabled}
-                  onCheckedChange={setEnabled}
-                  aria-label={enabled ? 'Disable script tag' : 'Enable script tag'}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between">
-          <div>
-            {!isNew && (
-              <>
-                {showDeleteConfirm ? (
-                  <div className="flex items-center gap-2">
-                    <span className="text-destructive text-sm">Delete this tag?</span>
-                    <button
-                      type="button"
-                      onClick={handleDelete}
-                      disabled={deleting}
-                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg px-3 py-1.5 text-sm disabled:opacity-50"
-                    >
-                      {deleting ? 'Deleting...' : 'Confirm'}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setShowDeleteConfirm(false)}
-                      className="border-input hover:bg-muted rounded-lg border px-3 py-1.5 text-sm"
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={() => setShowDeleteConfirm(true)}
-                    className="text-destructive hover:text-destructive flex items-center gap-1.5 text-sm transition-colors"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                    Delete
-                  </button>
-                )}
-              </>
-            )}
-          </div>
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={() => onNavigate?.('/script-tags')}
-              className="border-input text-foreground hover:bg-muted rounded-lg border px-4 py-2 text-sm transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              onClick={handleSave}
-              disabled={saving}
-              className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-6 py-2 text-sm transition-colors disabled:opacity-50"
-            >
-              {saving ? 'Saving...' : isNew ? 'Create Tag' : 'Save Changes'}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}