@bygghammar/cms-platform 0.23.1 → 0.25.0

package/src/backoffice/TrackingView.tsx

@@ -0,0 +1,405 @@
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Plus, Save, Trash2, Copy } from "lucide-react";
+
+export type InjectionScope = "global" | "locale" | "domain";
+
+/** One injection profile row, structurally matching the host's own type. */
+export type InjectionProfileLike = {
+  id: string;
+  name: string;
+  scope_type: InjectionScope;
+  scope_value: string;
+  enabled: boolean;
+  head_html: string;
+  body_start_html: string;
+  body_end_html: string;
+  gtm_id: string;
+  ga4_id: string;
+  meta_pixel_id: string;
+  tiktok_pixel_id: string;
+  extra_meta: { name: string; content: string }[];
+  sort_order: number;
+};
+
+/** Host-provided data and actions for the code & tracking screen. */
+export type TrackingDeps = {
+  profiles: InjectionProfileLike[];
+  domains: { domain: string }[];
+  locales: readonly string[];
+  saveInjection: (input: { data: Omit<InjectionProfileLike, "id"> & { id?: string } }) => Promise<unknown>;
+  deleteInjection: (input: { data: { id: string } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+const blankProfile = (): InjectionProfileLike => ({
+  id: "",
+  name: "New profile",
+  scope_type: "global",
+  scope_value: "",
+  enabled: false,
+  head_html: "",
+  body_start_html: "",
+  body_end_html: "",
+  gtm_id: "",
+  ga4_id: "",
+  meta_pixel_id: "",
+  tiktok_pixel_id: "",
+  extra_meta: [],
+  sort_order: 100,
+});
+
+function Label({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60 mb-1">
+      {children}
+    </span>
+  );
+}
+
+function Input({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+    />
+  );
+}
+
+function Code({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      spellCheck={false}
+      className="w-full min-h-[140px] border border-ink/20 bg-white p-3 font-mono text-xs text-ink focus:outline-none focus:border-sea resize-y"
+    />
+  );
+}
+
+/**
+ * Host-agnostic "Code & tracking" screen: manage injection profiles scoped to
+ * all sites, one language or one domain.
+ */
+export function TrackingView({ deps }: { deps: TrackingDeps }) {
+  const { profiles, domains, locales, saveInjection: save, deleteInjection: remove, refresh } = deps;
+
+  const [drafts, setDrafts] = useState<InjectionProfileLike[]>([]);
+  const [busy, setBusy] = useState<string | null>(null);
+
+  useEffect(() => {
+    setDrafts(profiles);
+  }, [profiles]);
+
+  const patch = (i: number, next: Partial<InjectionProfileLike>) =>
+    setDrafts((d) => d.map((p, idx) => (idx === i ? { ...p, ...next } : p)));
+
+  const onSave = async (p: InjectionProfileLike) => {
+    setBusy(p.id || p.name);
+    try {
+      await save({
+        data: {
+          id: p.id || undefined,
+          name: p.name,
+          scope_type: p.scope_type,
+          scope_value: p.scope_value,
+          enabled: p.enabled,
+          head_html: p.head_html,
+          body_start_html: p.body_start_html,
+          body_end_html: p.body_end_html,
+          gtm_id: p.gtm_id,
+          ga4_id: p.ga4_id,
+          meta_pixel_id: p.meta_pixel_id,
+          tiktok_pixel_id: p.tiktok_pixel_id,
+          extra_meta: p.extra_meta,
+          sort_order: p.sort_order,
+        },
+      });
+      toast.success("Saved — live within 30 seconds");
+      void refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const onDelete = async (p: InjectionProfileLike, i: number) => {
+    if (!p.id) {
+      setDrafts((d) => d.filter((_, idx) => idx !== i));
+      return;
+    }
+    if (!confirm(`Delete "${p.name}"?`)) return;
+    try {
+      await remove({ data: { id: p.id } });
+      toast.success("Deleted");
+      void refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not delete");
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Admin</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Code &amp; tracking</h1>
+      <p className="mt-4 max-w-3xl text-sm text-ink/65">
+        Inject custom code into the public site and configure tracking pixels. Each profile can
+        target all sites, one language, or one domain — global first, then language, then domain.
+        Nothing is injected inside the backoffice.
+      </p>
+
+      <div className="mt-8 space-y-8">
+        {drafts.map((p, i) => (
+          <section key={p.id || `new-${i}`} className="border border-ink/10 bg-white">
+            <header className="flex flex-wrap items-center justify-between gap-3 border-b border-ink/10 px-5 py-4">
+              <div className="flex min-w-0 flex-wrap items-center gap-3">
+                <input
+                  value={p.name}
+                  onChange={(e) => patch(i, { name: e.target.value })}
+                  className="border border-transparent px-1 py-1 font-serif text-lg text-ink hover:border-ink/15 focus:border-sea focus:outline-none"
+                />
+                <label className="inline-flex items-center gap-2 text-sm text-ink">
+                  <input
+                    type="checkbox"
+                    checked={p.enabled}
+                    onChange={(e) => patch(i, { enabled: e.target.checked })}
+                  />
+                  Enabled
+                </label>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() =>
+                    setDrafts((d) => [
+                      ...d,
+                      { ...p, id: "", name: `${p.name} (copy)`, enabled: false },
+                    ])
+                  }
+                  className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
+                >
+                  <Copy className="size-3.5" /> Duplicate
+                </button>
+                <button
+                  onClick={() => onDelete(p, i)}
+                  className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-red-600 hover:border-red-400"
+                >
+                  <Trash2 className="size-3.5" /> Delete
+                </button>
+                <button
+                  onClick={() => onSave(p)}
+                  disabled={busy !== null}
+                  className="inline-flex items-center gap-2 bg-ink px-4 py-1.5 text-sm text-white disabled:opacity-40"
+                >
+                  <Save className="size-3.5" /> Save
+                </button>
+              </div>
+            </header>
+
+            <div className="grid gap-6 p-5 lg:grid-cols-2">
+              <div className="space-y-4">
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <label className="block">
+                    <Label>Applies to</Label>
+                    <select
+                      value={p.scope_type}
+                      onChange={(e) =>
+                        patch(i, {
+                          scope_type: e.target.value as InjectionScope,
+                          scope_value: "",
+                        })
+                      }
+                      className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                    >
+                      <option value="global">All sites</option>
+                      <option value="locale">One language</option>
+                      <option value="domain">One domain</option>
+                    </select>
+                  </label>
+                  {p.scope_type === "locale" ? (
+                    <label className="block">
+                      <Label>Language</Label>
+                      <select
+                        value={p.scope_value}
+                        onChange={(e) => patch(i, { scope_value: e.target.value })}
+                        className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                      >
+                        <option value="">Select…</option>
+                        {locales.map((l) => (
+                          <option key={l} value={l}>
+                            {l.toUpperCase()}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                  {p.scope_type === "domain" ? (
+                    <label className="block">
+                      <Label>Domain</Label>
+                      <input
+                        value={p.scope_value}
+                        onChange={(e) => patch(i, { scope_value: e.target.value })}
+                        list={`domains-${i}`}
+                        placeholder="dev.voyara.se"
+                        className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                      />
+                      <datalist id={`domains-${i}`}>
+                        {domains.map((d) => (
+                          <option key={d.domain} value={d.domain} />
+                        ))}
+                      </datalist>
+                    </label>
+                  ) : null}
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <label className="block">
+                    <Label>Google Tag Manager ID</Label>
+                    <Input
+                      value={p.gtm_id}
+                      onChange={(v) => patch(i, { gtm_id: v })}
+                      placeholder="GTM-XXXXXXX"
+                    />
+                  </label>
+                  <label className="block">
+                    <Label>Google Analytics 4 ID</Label>
+                    <Input
+                      value={p.ga4_id}
+                      onChange={(v) => patch(i, { ga4_id: v })}
+                      placeholder="G-XXXXXXXXXX"
+                    />
+                  </label>
+                  <label className="block">
+                    <Label>Meta (Facebook / Instagram) Pixel</Label>
+                    <Input
+                      value={p.meta_pixel_id}
+                      onChange={(v) => patch(i, { meta_pixel_id: v })}
+                      placeholder="1234567890"
+                    />
+                  </label>
+                  <label className="block">
+                    <Label>TikTok Pixel</Label>
+                    <Input
+                      value={p.tiktok_pixel_id}
+                      onChange={(v) => patch(i, { tiktok_pixel_id: v })}
+                      placeholder="CXXXXXXXXXXXXXXXX"
+                    />
+                  </label>
+                </div>
+
+                <div>
+                  <Label>Extra meta tags (verification codes)</Label>
+                  <div className="space-y-2">
+                    {p.extra_meta.map((m, mi) => (
+                      <div key={mi} className="flex gap-2">
+                        <input
+                          value={m.name}
+                          onChange={(e) =>
+                            patch(i, {
+                              extra_meta: p.extra_meta.map((x, xi) =>
+                                xi === mi ? { ...x, name: e.target.value } : x,
+                              ),
+                            })
+                          }
+                          placeholder="google-site-verification"
+                          className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
+                        />
+                        <input
+                          value={m.content}
+                          onChange={(e) =>
+                            patch(i, {
+                              extra_meta: p.extra_meta.map((x, xi) =>
+                                xi === mi ? { ...x, content: e.target.value } : x,
+                              ),
+                            })
+                          }
+                          placeholder="value"
+                          className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
+                        />
+                        <button
+                          onClick={() =>
+                            patch(i, {
+                              extra_meta: p.extra_meta.filter((_, xi) => xi !== mi),
+                            })
+                          }
+                          className="p-2 text-red-500 hover:text-red-700"
+                        >
+                          <Trash2 className="size-3.5" />
+                        </button>
+                      </div>
+                    ))}
+                    <button
+                      onClick={() =>
+                        patch(i, { extra_meta: [...p.extra_meta, { name: "", content: "" }] })
+                      }
+                      className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
+                    >
+                      <Plus className="size-4" /> Add meta tag
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <label className="block">
+                  <Label>Inside &lt;head&gt;</Label>
+                  <Code
+                    value={p.head_html}
+                    onChange={(v) => patch(i, { head_html: v })}
+                    placeholder="<!-- scripts, meta tags, verification -->"
+                  />
+                </label>
+                <label className="block">
+                  <Label>After &lt;body&gt; tag</Label>
+                  <Code
+                    value={p.body_start_html}
+                    onChange={(v) => patch(i, { body_start_html: v })}
+                    placeholder="<!-- noscript pixels, chat widgets -->"
+                  />
+                </label>
+                <label className="block">
+                  <Label>Before &lt;/body&gt; tag (footer)</Label>
+                  <Code
+                    value={p.body_end_html}
+                    onChange={(v) => patch(i, { body_end_html: v })}
+                    placeholder="<!-- deferred scripts -->"
+                  />
+                </label>
+                <p className="text-xs text-ink/50">
+                  Tracking IDs above generate their official snippets automatically — you only need
+                  raw code for anything not covered.
+                </p>
+              </div>
+            </div>
+          </section>
+        ))}
+      </div>
+
+      <button
+        onClick={() => setDrafts((d) => [...d, blankProfile()])}
+        className="mt-8 inline-flex items-center gap-2 border border-ink/20 px-5 py-2.5 text-sm text-ink hover:border-sea"
+      >
+        <Plus className="size-4" /> New profile
+      </button>
+    </div>
+  );
+}