@bygghammar/cms-platform 0.95.0 → 0.97.0

package/src/backoffice/BookingLandingSection.tsx

@@ -0,0 +1,672 @@
+/**
+ * Site settings → Booking → Pages hidden from the website while booking is
+ * hidden.
+ *
+ * The distinction the screen has to make clear: these pages leave the
+ * website's menus and page lists while booking is hidden, but they are not
+ * taken offline and not hidden from search engines — someone arriving from
+ * Google still gets the page, without its booking links and with the notice
+ * set here. Everything is checked again on the server; the screen only avoids
+ * offering what the server would refuse.
+ */
+import { useEffect, useId, useRef, useState, type ReactNode, type Ref } from "react";
+import { toast } from "sonner";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+
+import {
+  BUILT_IN_NOTICE,
+  NOTICE_LIMITS,
+  ctaHrefProblemMessage,
+  overriddenFields,
+  parseNoticeCtaHref,
+  type NoticeContent,
+  type PageNoticeOverride,
+} from "../cms/booking-landing";
+import type { LocalizedString } from "../i18n/types";
+
+export type BookingLandingData = {
+  default: { notice: NoticeContent | null; version: string | null };
+  pages: Array<{
+    pageId: string;
+    key: string | null;
+    name: string | null;
+    missing: boolean;
+    notice: PageNoticeOverride;
+    version: string | null;
+    conflict: boolean;
+  }>;
+  rowVersions?: Record<string, string | null>;
+};
+
+export type BookingLandingDeps = {
+  data: BookingLandingData;
+  bookingEnabled: boolean;
+  /** Every page; the add list leaves out the ones the server would refuse. */
+  pages: Array<{ id: string; key: string; name: string; protected?: boolean; listing?: string }> | undefined;
+  /** Page ids that keep their booking links: they cannot be added here. */
+  exceptionIds: ReadonlySet<string>;
+  pathFor: (key: string) => string;
+  locales: readonly string[];
+  setLanding: (input: {
+    pageId: string;
+    landing: boolean;
+    notice?: PageNoticeOverride | null;
+    expectedVersion: string | null;
+  }) => Promise<unknown>;
+  setLandingDefault: (input: { notice: NoticeContent; expectedVersion: string | null }) => Promise<unknown>;
+  refresh: () => void;
+};
+
+const LOCALE_NAMES: Record<string, string> = { sv: "Swedish", en: "English" };
+const localeName = (locale: string) => LOCALE_NAMES[locale] ?? locale.toUpperCase();
+
+const inputClass =
+  "block w-full min-w-0 border border-ink/15 bg-white px-3 py-2 text-sm text-ink aria-[invalid=true]:border-red-600";
+const labelClass = "mb-1 block text-xs uppercase tracking-wider text-ink/60";
+
+/** Form state: every text per locale as typed, plus the link. */
+type Draft = {
+  heading: Record<string, string>;
+  body: Record<string, string>;
+  ctaLabel: Record<string, string>;
+  ctaHref: string;
+  /** Page form only: use the default link, an own link, or none. */
+  ctaMode: "default" | "own" | "none";
+};
+
+const toRecord = (value: LocalizedString | undefined | null, locales: readonly string[]) =>
+  Object.fromEntries(locales.map((locale) => [locale, value?.[locale as keyof LocalizedString] ?? ""]));
+
+function draftFrom(
+  value: { heading?: LocalizedString; body?: LocalizedString; cta?: NoticeContent["cta"] | "none" } | null,
+  locales: readonly string[],
+  page: boolean,
+): Draft {
+  const cta = value?.cta && value.cta !== "none" ? value.cta : null;
+  return {
+    heading: toRecord(value?.heading, locales),
+    body: toRecord(value?.body, locales),
+    ctaLabel: toRecord(cta?.label, locales),
+    ctaHref: cta?.href ?? "",
+    ctaMode: !page ? (cta ? "own" : "none") : value?.cta === "none" ? "none" : cta ? "own" : "default",
+  };
+}
+
+const cleaned = (texts: Record<string, string>): LocalizedString | undefined => {
+  const out = Object.fromEntries(
+    Object.entries(texts)
+      .map(([locale, text]) => [locale, text.trim()] as const)
+      .filter(([, text]) => text !== ""),
+  );
+  return Object.keys(out).length > 0 ? (out as LocalizedString) : undefined;
+};
+
+type Problems = Partial<Record<string, string>>;
+
+/** The same rules the server applies, said next to the field. */
+function check(draft: Draft, locales: readonly string[], linkWanted: boolean): Problems {
+  const problems: Problems = {};
+  for (const locale of locales) {
+    if ((draft.heading[locale] ?? "").trim().length > NOTICE_LIMITS.heading) {
+      problems[`heading.${locale}`] = `At most ${NOTICE_LIMITS.heading} characters.`;
+    }
+    if ((draft.body[locale] ?? "").trim().length > NOTICE_LIMITS.body) {
+      problems[`body.${locale}`] = `At most ${NOTICE_LIMITS.body} characters.`;
+    }
+    if ((draft.ctaLabel[locale] ?? "").trim().length > NOTICE_LIMITS.ctaLabel) {
+      problems[`ctaLabel.${locale}`] = `At most ${NOTICE_LIMITS.ctaLabel} characters.`;
+    }
+  }
+  if (linkWanted) {
+    const href = parseNoticeCtaHref(draft.ctaHref);
+    if (!href.ok) problems["ctaHref"] = ctaHrefProblemMessage(href.reason);
+    if (!cleaned(draft.ctaLabel)) problems["ctaLabel"] = "Write the link's text in at least one language.";
+  }
+  return problems;
+}
+
+/** The fields of one notice: default or one page's own. */
+function NoticeFields({
+  draft,
+  setDraft,
+  problems,
+  locales,
+  page,
+  disabled,
+  firstFieldRef,
+}: {
+  draft: Draft;
+  setDraft: (next: Draft) => void;
+  problems: Problems;
+  locales: readonly string[];
+  page: boolean;
+  disabled: boolean;
+  firstFieldRef?: Ref<HTMLInputElement>;
+}): ReactNode {
+  const id = useId();
+  const field = (name: string) => `${id}-${name}`;
+  const error = (name: string) =>
+    problems[name] ? (
+      <span id={field(`${name}-error`)} className="mt-1 block text-xs text-red-700">
+        {problems[name]}
+      </span>
+    ) : null;
+  const a11y = (name: string) => ({
+    "aria-invalid": problems[name] ? true : undefined,
+    "aria-describedby": problems[name] ? field(`${name}-error`) : undefined,
+  });
+  const setText = (part: "heading" | "body" | "ctaLabel", locale: string, text: string) =>
+    setDraft({ ...draft, [part]: { ...draft[part], [locale]: text } });
+  const linkShown = draft.ctaMode === "own";
+
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-4 sm:grid-cols-2">
+        {locales.map((locale, i) => (
+          <div key={locale} className="min-w-0">
+            <label className="block" htmlFor={field(`heading-${locale}`)}>
+              <span className={labelClass}>Heading — {localeName(locale)}</span>
+            </label>
+            <input
+              id={field(`heading-${locale}`)}
+              ref={i === 0 ? firstFieldRef : undefined}
+              type="text"
+              lang={locale}
+              disabled={disabled}
+              maxLength={NOTICE_LIMITS.heading + 40}
+              value={draft.heading[locale] ?? ""}
+              placeholder={page ? "Use the default heading" : (BUILT_IN_NOTICE.heading[locale as "sv"] ?? "")}
+              onChange={(e) => setText("heading", locale, e.target.value)}
+              className={inputClass}
+              {...a11y(`heading.${locale}`)}
+            />
+            {error(`heading.${locale}`)}
+            <label className="mt-3 block" htmlFor={field(`body-${locale}`)}>
+              <span className={labelClass}>Message — {localeName(locale)}</span>
+            </label>
+            <textarea
+              id={field(`body-${locale}`)}
+              lang={locale}
+              rows={3}
+              disabled={disabled}
+              maxLength={NOTICE_LIMITS.body + 200}
+              value={draft.body[locale] ?? ""}
+              placeholder={page ? "Use the default message" : (BUILT_IN_NOTICE.body[locale as "sv"] ?? "")}
+              onChange={(e) => setText("body", locale, e.target.value)}
+              className={inputClass}
+              {...a11y(`body.${locale}`)}
+            />
+            {error(`body.${locale}`)}
+          </div>
+        ))}
+      </div>
+
+      <fieldset className="min-w-0 border border-ink/10 p-4">
+        <legend className="px-1 text-xs uppercase tracking-wider text-ink/60">Link (optional)</legend>
+        <p className="text-xs text-ink/60">
+          For example a contact page or an interest form — never booking.
+        </p>
+        <div className="mt-3 flex flex-wrap gap-x-5 gap-y-2 text-sm text-ink">
+          {(page ? (["default", "own", "none"] as const) : (["none", "own"] as const)).map((mode) => (
+            <label key={mode} className="inline-flex items-center gap-2">
+              <input
+                type="radio"
+                name={field("cta-mode")}
+                value={mode}
+                disabled={disabled}
+                checked={draft.ctaMode === mode}
+                onChange={() => setDraft({ ...draft, ctaMode: mode })}
+              />
+              {mode === "default" ? "Use the default link" : mode === "own" ? (page ? "Own link" : "Show a link") : "No link"}
+            </label>
+          ))}
+        </div>
+        {linkShown ? (
+          <div className="mt-4 grid gap-4 sm:grid-cols-2">
+            {locales.map((locale) => (
+              <div key={locale} className="min-w-0">
+                <label className="block" htmlFor={field(`cta-${locale}`)}>
+                  <span className={labelClass}>Link text — {localeName(locale)}</span>
+                </label>
+                <input
+                  id={field(`cta-${locale}`)}
+                  type="text"
+                  lang={locale}
+                  disabled={disabled}
+                  maxLength={NOTICE_LIMITS.ctaLabel + 20}
+                  value={draft.ctaLabel[locale] ?? ""}
+                  onChange={(e) => setText("ctaLabel", locale, e.target.value)}
+                  className={inputClass}
+                  {...a11y(`ctaLabel.${locale}`)}
+                />
+                {error(`ctaLabel.${locale}`)}
+              </div>
+            ))}
+            {problems["ctaLabel"] ? (
+              <p className="text-xs text-red-700 sm:col-span-2" id={field("ctaLabel-error")}>
+                {problems["ctaLabel"]}
+              </p>
+            ) : null}
+            <div className="min-w-0 sm:col-span-2">
+              <label className="block" htmlFor={field("cta-href")}>
+                <span className={labelClass}>Link address</span>
+              </label>
+              <input
+                id={field("cta-href")}
+                type="text"
+                inputMode="url"
+                autoComplete="off"
+                spellCheck={false}
+                disabled={disabled}
+                maxLength={NOTICE_LIMITS.href + 1}
+                value={draft.ctaHref}
+                placeholder="/kontakt or https://…"
+                onChange={(e) => setDraft({ ...draft, ctaHref: e.target.value })}
+                className={`${inputClass} font-mono`}
+                {...a11y("ctaHref")}
+              />
+              {error("ctaHref")}
+            </div>
+          </div>
+        ) : null}
+      </fieldset>
+    </div>
+  );
+}
+
+/** One notice form with its own save. */
+function NoticeForm({
+  initial,
+  locales,
+  page,
+  busy,
+  saveLabel,
+  onSave,
+  onCancel,
+  focusOnOpen,
+}: {
+  initial: Draft;
+  locales: readonly string[];
+  page: boolean;
+  busy: boolean;
+  saveLabel: string;
+  onSave: (draft: Draft) => Promise<boolean>;
+  onCancel?: () => void;
+  focusOnOpen?: boolean;
+}): ReactNode {
+  const [draft, setDraft] = useState(initial);
+  const [problems, setProblems] = useState<Problems>({});
+  const firstField = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (focusOnOpen) firstField.current?.focus();
+  }, [focusOnOpen]);
+  const count = Object.keys(problems).length;
+  return (
+    <form
+      noValidate
+      className="grid gap-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const found = check(draft, locales, draft.ctaMode === "own");
+        setProblems(found);
+        if (Object.keys(found).length > 0) return;
+        void onSave(draft);
+      }}
+    >
+      {count > 0 ? (
+        <p role="alert" className="text-sm text-red-700">
+          Nothing was saved: {count === 1 ? "one field needs" : `${count} fields need`} attention.
+        </p>
+      ) : null}
+      <NoticeFields
+        draft={draft}
+        setDraft={setDraft}
+        problems={problems}
+        locales={locales}
+        page={page}
+        disabled={busy}
+        firstFieldRef={firstField}
+      />
+      <div className="flex flex-wrap gap-3">
+        <button
+          type="submit"
+          disabled={busy}
+          className="inline-flex items-center gap-2 bg-ink px-4 py-2 text-xs uppercase tracking-[0.18em] text-paper hover:bg-ink/85 disabled:opacity-40"
+        >
+          {saveLabel}
+        </button>
+        {onCancel ? (
+          <button
+            type="button"
+            disabled={busy}
+            onClick={onCancel}
+            className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-xs uppercase tracking-[0.18em] hover:border-ink disabled:opacity-40"
+          >
+            Cancel
+          </button>
+        ) : null}
+      </div>
+    </form>
+  );
+}
+
+function behaviourOf(row: BookingLandingData["pages"][number]): string {
+  const own = overriddenFields(row.notice);
+  return own.length === 0 ? "Shows the default message" : `Own ${own.join(", ")}`;
+}
+
+export function BookingLandingSection({ deps }: { deps: BookingLandingDeps }): ReactNode {
+  const { data, pages, pathFor, locales } = deps;
+  const [busy, setBusy] = useState(false);
+  const [adding, setAdding] = useState("");
+  const [editing, setEditing] = useState<string | null>(null);
+  const [status, setStatus] = useState("");
+  /**
+   * The version a form was saving against when its save failed, by page id
+   * (and `"default"`). When the refresh then brings a different version,
+   * somebody else saved in between: the form is rebuilt from what is stored
+   * now (it is keyed by the version), so the old draft can never be sent
+   * against the new version unseen, and the editor is told why.
+   */
+  const [failedAt, setFailedAt] = useState<Record<string, string | null>>({});
+  const editButtons = useRef(new Map<string, HTMLButtonElement | null>());
+  const changedSince = (id: string, version: string | null) =>
+    id in failedAt && failedAt[id] !== version;
+  const remember = (id: string, version: string | null | undefined) =>
+    setFailedAt((all) => {
+      const next = { ...all };
+      if (version === undefined) delete next[id];
+      else next[id] = version;
+      return next;
+    });
+
+  const run = async (action: () => Promise<unknown>, done: string): Promise<boolean> => {
+    setBusy(true);
+    try {
+      await action();
+      toast.success(done);
+      setStatus(done);
+      return true;
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Failed to save";
+      toast.error(message);
+      setStatus(`Not saved: ${message}`);
+      return false;
+    } finally {
+      setBusy(false);
+      // Success or conflict alike: show what is stored now.
+      deps.refresh();
+    }
+  };
+
+  const closeEditor = (pageId: string) => {
+    setEditing(null);
+    remember(pageId, undefined);
+    // Give focus back to the button that opened the editor.
+    queueMicrotask(() => editButtons.current.get(pageId)?.focus());
+  };
+
+  const selected = new Set(data.pages.map((row) => row.pageId));
+  const candidates = (pages ?? [])
+    .filter((page) => {
+      const id = page.id.toLowerCase();
+      return !selected.has(id) && !deps.exceptionIds.has(id) && !page.protected;
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+  const conflicts = data.pages.filter((row) => row.conflict);
+
+  const pageNotice = (draft: Draft): PageNoticeOverride => {
+    const out: PageNoticeOverride = {};
+    const heading = cleaned(draft.heading);
+    const body = cleaned(draft.body);
+    if (heading) out.heading = heading;
+    if (body) out.body = body;
+    if (draft.ctaMode === "none") out.cta = "none";
+    else if (draft.ctaMode === "own") out.cta = { label: cleaned(draft.ctaLabel) ?? {}, href: draft.ctaHref.trim() };
+    return out;
+  };
+
+  return (
+    <div className="mt-8 border-t border-ink/10 pt-5" role="group" aria-labelledby="booking-landing-title">
+      <h3 id="booking-landing-title" className="text-xs uppercase tracking-wider text-ink/60">
+        Pages hidden from the website while booking is hidden
+      </h3>
+      <div className="mt-2 max-w-2xl space-y-2 text-sm text-ink/60">
+        <p>
+          While booking is hidden, these pages are removed from the website’s menus, footer, page
+          cards, buttons and popups. Their addresses stay live, indexable and in the sitemap, so
+          visitors arriving from a search result can still read them.
+        </p>
+        <p>
+          They remain eligible to appear in search results, but rankings are not guaranteed: removing
+          links to them from the website can affect how search engines value them.
+        </p>
+        <p>
+          On the page itself the booking links are removed and the message below is shown instead.
+          Links written into a page’s own text are left as they are. When booking is shown again,
+          everything returns and the message disappears.
+        </p>
+      </div>
+      <p className="mt-3 text-sm text-ink">
+        {deps.bookingEnabled
+          ? "Booking is shown right now, so these pages are listed as usual."
+          : "Booking is hidden right now, so these pages are hidden from the menus and show the message."}
+      </p>
+
+      {conflicts.length > 0 ? (
+        <div role="alert" className="mt-4 border border-amber-400 bg-amber-50 px-4 py-3 text-sm text-ink">
+          <p className="font-medium">Some pages are in both lists.</p>
+          <p className="mt-1">
+            {conflicts.map((row) => row.name ?? "A page").join(", ")}{" "}
+            {conflicts.length === 1 ? "is" : "are"} also set to keep booking links. Until removed from
+            one list, {conflicts.length === 1 ? "it keeps" : "they keep"} the booking links and{" "}
+            {conflicts.length === 1 ? "stays" : "stay"} in the menus, and no message is shown.
+          </p>
+        </div>
+      ) : null}
+
+      <ul className="mt-4 divide-y divide-ink/10 border border-ink/10">
+        {data.pages.length === 0 ? (
+          <li className="px-4 py-3 text-sm text-ink/50">No pages.</li>
+        ) : (
+          data.pages.map((row) => {
+            const label = row.name ?? "Page no longer exists";
+            const isEditing = editing === row.pageId;
+            const panelId = `booking-landing-edit-${row.pageId}`;
+            return (
+              <li key={row.pageId} className="px-4 py-3 text-sm">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <span className="min-w-0">
+                    <span className="text-ink">{label}</span>
+                    {row.key ? (
+                      <span className="ml-2 break-all font-mono text-xs text-ink/50">{pathFor(row.key)}</span>
+                    ) : null}
+                    <span className="mt-1 block text-xs text-ink/60">
+                      {row.conflict
+                        ? "Not hidden: it also keeps its booking links (see the warning above)."
+                        : behaviourOf(row)}
+                      {row.missing ? " · In the trash or deleted — has no effect." : ""}
+                    </span>
+                  </span>
+                  <span className="flex flex-wrap items-center gap-4">
+                    {!row.missing ? (
+                      <button
+                        type="button"
+                        ref={(node) => {
+                          editButtons.current.set(row.pageId, node);
+                        }}
+                        disabled={busy}
+                        aria-expanded={isEditing}
+                        aria-controls={panelId}
+                        onClick={() => (isEditing ? closeEditor(row.pageId) : setEditing(row.pageId))}
+                        className="inline-flex items-center gap-1 text-xs text-ink hover:underline disabled:opacity-40"
+                      >
+                        <Pencil className="size-3.5" aria-hidden="true" /> Edit message
+                        <span className="sr-only"> for {label}</span>
+                      </button>
+                    ) : null}
+                    <button
+                      type="button"
+                      disabled={busy}
+                      onClick={() =>
+                        void run(
+                          () =>
+                            deps.setLanding({
+                              pageId: row.pageId,
+                              landing: false,
+                              expectedVersion: row.version,
+                            }),
+                          `${row.name ?? "The page"} is no longer hidden while booking is hidden`,
+                        ).then((ok) => {
+                          if (ok && isEditing) setEditing(null);
+                        })
+                      }
+                      className="inline-flex items-center gap-1 text-xs text-red-700 hover:underline disabled:opacity-40"
+                    >
+                      <Trash2 className="size-3.5" aria-hidden="true" /> Remove
+                      <span className="sr-only"> {label} from the list</span>
+                    </button>
+                  </span>
+                </div>
+                {isEditing ? (
+                  <div
+                    id={panelId}
+                    role="region"
+                    aria-label={`Message for ${label}`}
+                    className="mt-4 border-t border-ink/10 pt-4"
+                  >
+                    {changedSince(row.pageId, row.version) ? (
+                      <p role="alert" className="mb-3 border border-amber-400 bg-amber-50 px-3 py-2 text-sm text-ink">
+                        This message was changed by someone else while you were editing. Your changes
+                        were not saved; their version is shown below. Review it and edit again if needed.
+                      </p>
+                    ) : null}
+                    <p className="mb-3 text-xs text-ink/60">
+                      Leave a field empty to use the default message for it.
+                    </p>
+                    <NoticeForm
+                      key={row.version ?? "none"}
+                      initial={draftFrom(row.notice, locales, true)}
+                      locales={locales}
+                      page
+                      busy={busy}
+                      focusOnOpen
+                      saveLabel="Save page message"
+                      onCancel={() => closeEditor(row.pageId)}
+                      onSave={async (draft) => {
+                        const ok = await run(
+                          () =>
+                            deps.setLanding({
+                              pageId: row.pageId,
+                              landing: true,
+                              notice: pageNotice(draft),
+                              expectedVersion: row.version,
+                            }),
+                          `Saved the message for ${label}`,
+                        );
+                        if (ok) closeEditor(row.pageId);
+                        else remember(row.pageId, row.version);
+                        return ok;
+                      }}
+                    />
+                  </div>
+                ) : null}
+              </li>
+            );
+          })
+        )}
+      </ul>
+
+      <div className="mt-4 flex flex-wrap items-end gap-3">
+        <label className="block min-w-0 flex-1 sm:max-w-sm">
+          <span className={labelClass}>Add a page</span>
+          <select
+            value={adding}
+            onChange={(e) => setAdding(e.target.value)}
+            disabled={busy || !pages}
+            className="w-full border border-ink/15 bg-white px-3 py-2 text-sm text-ink"
+          >
+            <option value="">Choose a page…</option>
+            {candidates.map((page) => (
+              <option key={page.id} value={page.id}>
+                {page.name} — {pathFor(page.key)}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button
+          type="button"
+          disabled={busy || !adding}
+          onClick={() => {
+            const page = candidates.find((p) => p.id === adding);
+            // A page removed earlier leaves its row behind; send its version.
+            const previous = data.rowVersions?.[adding.toLowerCase()] ?? null;
+            void run(
+              () => deps.setLanding({ pageId: adding, landing: true, expectedVersion: previous }),
+              `${page?.name ?? "The page"} is hidden from the website while booking is hidden`,
+            ).then((ok) => {
+              if (ok) setAdding("");
+            });
+          }}
+          className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-xs uppercase tracking-[0.18em] hover:border-ink disabled:opacity-40"
+        >
+          <Plus className="size-4" aria-hidden="true" /> Add
+        </button>
+      </div>
+      <p className="mt-2 max-w-2xl text-xs text-ink/50">
+        The start page and the contact page always stay in the menus, and a page that keeps its
+        booking links cannot be added, so they are not offered.
+      </p>
+
+      <div className="mt-6 border border-ink/10 p-4" role="group" aria-labelledby="booking-landing-default-title">
+        <h4 id="booking-landing-default-title" className="text-sm text-ink">
+          Default message
+        </h4>
+        <p className="mt-1 max-w-2xl text-xs text-ink/60">
+          Shown on every page in the list unless the page has its own. Empty fields use the built-in
+          text shown in grey. Plain text only.
+        </p>
+        {changedSince("default", data.default.version) ? (
+          <p role="alert" className="mt-3 border border-amber-400 bg-amber-50 px-3 py-2 text-sm text-ink">
+            The default message was changed by someone else while you were editing. Your changes were
+            not saved; their version is shown below. Review it and edit again if needed.
+          </p>
+        ) : null}
+        <div className="mt-4">
+          <NoticeForm
+            key={data.default.version ?? "none"}
+            initial={draftFrom(data.default.notice, locales, false)}
+            locales={locales}
+            page={false}
+            busy={busy}
+            focusOnOpen={changedSince("default", data.default.version)}
+            saveLabel="Save default message"
+            onSave={async (draft) => {
+              const ok = await run(
+                () =>
+                  deps.setLandingDefault({
+                    notice: {
+                      heading: cleaned(draft.heading) ?? {},
+                      body: cleaned(draft.body) ?? {},
+                      cta:
+                        draft.ctaMode === "own"
+                          ? { label: cleaned(draft.ctaLabel) ?? {}, href: draft.ctaHref.trim() }
+                          : null,
+                    },
+                    expectedVersion: data.default.version,
+                  }),
+                "Saved the default message",
+              );
+              remember("default", ok ? undefined : data.default.version);
+              return ok;
+            }}
+          />
+        </div>
+      </div>
+
+      <p role="status" className="sr-only">
+        {status}
+      </p>
+    </div>
+  );
+}