@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/TrackingView.tsx

@@ -2,6 +2,13 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Plus, Save, Trash2, Copy } from "lucide-react";
 
+import {
+  markSaved,
+  mergeServerProfiles,
+  newRow,
+  type DraftRow,
+} from "./tracking-drafts";
+
 export type InjectionScope = "global" | "locale" | "domain";
 
 /** One injection profile row, structurally matching the host's own type. */
@@ -27,7 +34,17 @@ export type TrackingDeps = {
   profiles: InjectionProfileLike[];
   domains: { domain: string }[];
   locales: readonly string[];
-  saveInjection: (input: { data: Omit<InjectionProfileLike, "id"> & { id?: string } }) => Promise<unknown>;
+  /**
+   * Persist one profile and return the row's server id.
+   *
+   * The id is the contract, not a convenience: a profile created here has none
+   * until the server assigns one, and a save that comes back without it leaves
+   * the row unable to say which profile it is. Saving again would then insert a
+   * second copy rather than update the first.
+   */
+  saveInjection: (
+    input: { data: Omit<InjectionProfileLike, "id"> & { id?: string } },
+  ) => Promise<{ id: string }>;
   deleteInjection: (input: { data: { id: string } }) => Promise<unknown>;
   refresh: () => Promise<unknown> | void;
 };
@@ -103,20 +120,26 @@ function Code({
 export function TrackingView({ deps }: { deps: TrackingDeps }) {
   const { profiles, domains, locales, saveInjection: save, deleteInjection: remove, refresh } = deps;
 
-  const [drafts, setDrafts] = useState<InjectionProfileLike[]>([]);
+  const [rows, setRows] = useState<DraftRow<InjectionProfileLike>[]>([]);
   const [busy, setBusy] = useState<string | null>(null);
 
+  // Fold the server list into the rows being edited rather than replacing
+  // them. Replacing is what discarded unsaved work every time an unrelated
+  // save, refetch or parent render produced a new list.
   useEffect(() => {
-    setDrafts(profiles);
+    setRows((current) => mergeServerProfiles(current, profiles));
   }, [profiles]);
 
   const patch = (i: number, next: Partial<InjectionProfileLike>) =>
-    setDrafts((d) => d.map((p, idx) => (idx === i ? { ...p, ...next } : p)));
+    setRows((d) =>
+      d.map((row, idx) => (idx === i ? { ...row, value: { ...row.value, ...next } } : row)),
+    );
 
-  const onSave = async (p: InjectionProfileLike) => {
-    setBusy(p.id || p.name);
+  const onSave = async (row: DraftRow<InjectionProfileLike>) => {
+    const p = row.value;
+    setBusy(row.key);
     try {
-      await save({
+      const result = await save({
         data: {
           id: p.id || undefined,
           name: p.name,
@@ -134,6 +157,17 @@ export function TrackingView({ deps }: { deps: TrackingDeps }) {
           sort_order: p.sort_order,
         },
       });
+      // Adopt the id a newly created profile was just given, so the reload
+      // recognises this row instead of listing the same profile twice.
+      const savedId = result?.id;
+      if (!p.id && !savedId) {
+        // Without an id this row cannot be updated, only inserted again. It
+        // stays dirty and unsaved so the next attempt is a retry rather than a
+        // duplicate profile nobody asked for.
+        toast.error("Saved without an id — reload and try again");
+        return;
+      }
+      setRows((d) => markSaved(d, row.key, p, savedId));
       toast.success("Saved — live within 30 seconds");
       void refresh();
     } catch (e) {
@@ -143,14 +177,16 @@ export function TrackingView({ deps }: { deps: TrackingDeps }) {
     }
   };
 
-  const onDelete = async (p: InjectionProfileLike, i: number) => {
+  const onDelete = async (row: DraftRow<InjectionProfileLike>) => {
+    const p = row.value;
     if (!p.id) {
-      setDrafts((d) => d.filter((_, idx) => idx !== i));
+      setRows((d) => d.filter((x) => x.key !== row.key));
       return;
     }
     if (!confirm(`Delete "${p.name}"?`)) return;
     try {
       await remove({ data: { id: p.id } });
+      setRows((d) => d.filter((x) => x.key !== row.key));
       toast.success("Deleted");
       void refresh();
     } catch (e) {
@@ -169,233 +205,236 @@ export function TrackingView({ deps }: { deps: TrackingDeps }) {
       </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">
+        {rows.map((row, i) => {
+          const p = row.value;
+          return (
+            <section key={row.key} 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
-                    type="checkbox"
-                    checked={p.enabled}
-                    onChange={(e) => patch(i, { enabled: e.target.checked })}
+                    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"
                   />
-                  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 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>
-                  {p.scope_type === "locale" ? (
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() =>
+                      setRows((d) => [
+                        ...d,
+                        newRow({ ...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(row)}
+                    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(row)}
+                    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>Language</Label>
+                      <Label>Applies to</Label>
                       <select
-                        value={p.scope_value}
-                        onChange={(e) => patch(i, { scope_value: e.target.value })}
+                        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="">Select…</option>
-                        {locales.map((l) => (
-                          <option key={l} value={l}>
-                            {l.toUpperCase()}
-                          </option>
-                        ))}
+                        <option value="global">All sites</option>
+                        <option value="locale">One language</option>
+                        <option value="domain">One domain</option>
                       </select>
                     </label>
-                  ) : null}
-                  {p.scope_type === "domain" ? (
+                    {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>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"
+                      <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"
                       />
-                      <datalist id={`domains-${i}`}>
-                        {domains.map((d) => (
-                          <option key={d.domain} value={d.domain} />
-                        ))}
-                      </datalist>
                     </label>
-                  ) : null}
+                  </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="grid gap-3 sm:grid-cols-2">
+                <div className="space-y-4">
                   <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>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>Google Analytics 4 ID</Label>
-                    <Input
-                      value={p.ga4_id}
-                      onChange={(v) => patch(i, { ga4_id: v })}
-                      placeholder="G-XXXXXXXXXX"
+                    <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>Meta (Facebook / Instagram) Pixel</Label>
-                    <Input
-                      value={p.meta_pixel_id}
-                      onChange={(v) => patch(i, { meta_pixel_id: v })}
-                      placeholder="1234567890"
+                    <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>
-                  <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>
+                  <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>
-
-              <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>
-        ))}
+            </section>
+          );
+        })}
       </div>
 
       <button
-        onClick={() => setDrafts((d) => [...d, blankProfile()])}
+        onClick={() => setRows((d) => [...d, newRow(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