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

package/src/backoffice/PageBuilderView.tsx

@@ -10,7 +10,17 @@
 import { useEffect, useState, type ReactNode } from "react";
 
 import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import {
+  isPubliclyVisible,
+  type PublicationState,
+  type PublicationTransitionKind,
+} from "../cms/page-publication";
+import { normalizePageStatus, statusChangeConfirmation } from "../cms/page-status";
+import { usePublicationBoundaryRefresh } from "../cms/use-publication-boundary";
+import { zoneAbbreviation, zonedLocalExists, zonedLocalToInstant } from "../cms/timezone";
+import { siteTimezone } from "../config/site-config";
 import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
+import { PageStatusBadge, PublicationBadge } from "./StatusBadge";
 import {
   ArrowLeft,
   Save,
@@ -25,7 +35,29 @@ import {
 } from "lucide-react";
 
 /** A page row as the builder needs it. */
-export type BuilderPage = { id: string; key: string; name: string; status: string };
+export type BuilderPage = {
+  id: string;
+  key: string;
+  name: string;
+  /** The editorial status an editor last set — not public visibility. */
+  status: string;
+  /**
+   * What a visitor gets right now, from `getPageForEditCore`. The header shows
+   * this rather than `status`, because the two disagree exactly when it
+   * matters: a scheduled draft is public, an expired published page is not.
+   */
+  publication: PublicationState;
+  /** When `publication` next changes, ISO-8601, or null when nothing is due. */
+  publication_at?: string | null;
+  /**
+   * What happens at `publication_at`. A replacement is neither a publish nor a
+   * hide, and a header that calls it either misleads about the one thing this
+   * screen exists to tell an editor.
+   */
+  publication_transition?: PublicationTransitionKind | null;
+  /** The version showing after that, for a publish or a replacement. */
+  publication_next_version_id?: string | null;
+};
 
 /** One saved version, with its computed change summary. */
 export type BuilderVersion = {
@@ -42,6 +74,8 @@ export type BuilderVersion = {
 /** One scheduled publication row. */
 export type BuilderPublication = {
   id: string;
+  /** Which version this row publishes; marks the one taking over next. */
+  version_id?: string | null;
   publish_at: string;
   unpublish_at?: string | null;
   note?: string | null;
@@ -64,9 +98,23 @@ export type PageBuilderDeps<TBlock> = {
   locales: readonly string[];
   localeLabels: Record<string, string>;
   defaultLocale: string;
-  /** Public path for this page in the given locale. */
+  /**
+   * Site-relative path for this page in the given locale.
+   *
+   * A path on its own is not a public address. It only becomes one when
+   * `publicHost` supplies the hostname it belongs to.
+   */
   publicPath: (locale: string) => string;
-  /** Host name to build the absolute URL with, for the given locale. */
+  /**
+   * The public hostname for this locale, or `""` when there is none.
+   *
+   * Since m7.10 a deployment's locale-to-domain table is explicit: a locale
+   * that is not in it has no public site. `""` is that answer — NO PUBLIC URL
+   * EXISTS — and it must never be read as "use a relative URL" or "fall back
+   * to the current host". Doing so hands the browser a path it resolves
+   * against whatever hostname the backoffice happens to be served from,
+   * inventing a public address for a locale the deployment does not publish.
+   */
   publicHost: (locale: string) => string;
 
   versions: BuilderVersion[] | undefined;
@@ -139,6 +187,8 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
   const [publishAt, setPublishAt] = useState("");
   const [unpublishAt, setUnpublishAt] = useState("");
   const [scheduleNote, setScheduleNote] = useState("");
+  const timezone = siteTimezone();
+  const zone = zoneAbbreviation(timezone);
   const [renameValue, setRenameValue] = useState<string | null>(null);
   const [locale, setLocale] = useState<string>(defaultLocale);
   const [copied, setCopied] = useState(false);
@@ -154,9 +204,22 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
     }
   }, [blocksFromServer]);
 
+  // Re-read the page when the next scheduled transition falls due, so a tab
+  // left open across a publish time stops claiming the page is still hidden.
+  // The hook owns the waiting, including what to do at a boundary whose fresh
+  // data has not arrived yet; see `use-publication-boundary`.
+  usePublicationBoundaryRefresh(page?.publication_at ?? null, () => {
+    deps.refetchPage();
+    deps.refetchPublications();
+  });
+
   const slugPath = deps.publicPath(locale);
   const host = deps.publicHost(locale);
-  const absoluteUrl = host ? `https://${host}${slugPath}` : slugPath;
+  // No hostname, no public URL. A relative href here would be resolved against
+  // the backoffice hostname, which is not where this page is published — and
+  // for an unmapped locale it is not published anywhere.
+  const publicUrl = host ? `https://${host}${slugPath}` : null;
+  const localeName = localeLabels[locale] ?? locale;
 
   const togglePanel = (panel: "history" | "schedule") => {
     if (panel === "history") {
@@ -171,8 +234,9 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
   };
 
   const onCopyUrl = async () => {
+    if (!publicUrl) return;
     try {
-      await navigator.clipboard.writeText(absoluteUrl);
+      await navigator.clipboard.writeText(publicUrl);
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     } catch {
@@ -198,6 +262,19 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
 
   const onSave = async (publish: boolean) => {
     if (!page) return;
+    /*
+     * Publishing puts the current canvas in front of every visitor, and the
+     * button sits next to "Save draft". Confirm it the same way cancelling a
+     * publication is confirmed — one keystroke should not go live.
+     */
+    if (
+      publish &&
+      !confirm(
+        `Publish "${page.name}" to the live site now?\n\n` +
+          statusChangeConfirmation("published", page.publication, page.publication_transition),
+      )
+    )
+      return;
     setBusy(true);
     try {
       // Shared content-section edits made in the inspector are part of the page
@@ -220,6 +297,25 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
       notify.error("Pick a publish date/time");
       return;
     }
+    /*
+     * Wall-clock in the *site's* timezone, not the browser's: an editor abroad
+     * must schedule the same instant a colleague at home would. `new Date(...)`
+     * on a datetime-local value reads it in whatever zone the laptop is set to.
+     */
+    const from = zonedLocalToInstant(publishAt, timezone);
+    const until = unpublishAt ? zonedLocalToInstant(unpublishAt, timezone) : null;
+    if (from == null || !zonedLocalExists(publishAt, timezone)) {
+      notify.error(`${publishAt.replace("T", " ")} does not exist in ${zone} — the clocks jump forward that night. Pick another time.`);
+      return;
+    }
+    if (unpublishAt && (until == null || !zonedLocalExists(unpublishAt, timezone))) {
+      notify.error(`${unpublishAt.replace("T", " ")} does not exist in ${zone} — the clocks jump forward that night. Pick another time.`);
+      return;
+    }
+    if (until != null && until <= from) {
+      notify.error("Unpublish time must be after the publish time.");
+      return;
+    }
     setBusy(true);
     try {
       const res = await deps.save({
@@ -231,8 +327,8 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
       });
       await deps.schedule({
         versionId: res.versionId,
-        publishAt: new Date(publishAt).toISOString(),
-        unpublishAt: unpublishAt ? new Date(unpublishAt).toISOString() : null,
+        publishAt: new Date(from).toISOString(),
+        unpublishAt: until == null ? null : new Date(until).toISOString(),
         note: scheduleNote || undefined,
         editSessionId: lock.sessionId,
       });
@@ -250,14 +346,36 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
     }
   };
 
-  const onCancelPub = async (id: string) => {
-    if (!confirm("Cancel this scheduled publication?")) return;
+  /**
+   * Call off a publication that has not started.
+   *
+   * The button is only offered on those, but "has not started" is a fact about
+   * the clock and this screen may have been open for an hour: the row can begin
+   * between the render and the click. The server checks it again against the
+   * database clock and refuses, so the failure path here is a real one — say
+   * what happened and re-read the page rather than leaving a stale screen with
+   * a Cancel button that no longer applies.
+   */
+  const onCancelPub = async (p: BuilderPublication) => {
+    const starts = new Date(p.publish_at).toLocaleString();
+    if (
+      !confirm(
+        `Cancel the publication scheduled for ${starts}?\n\n` +
+          "It will not happen, and what visitors see right now does not change.",
+      )
+    )
+      return;
     try {
-      await deps.cancelPublication(id, lock.sessionId);
+      await deps.cancelPublication(p.id, lock.sessionId);
       notify.success("Cancelled");
-      deps.refetchPublications();
     } catch (e) {
       notify.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      // Both, always: cancelling changes the schedule *and* what the header
+      // says happens next, and refetching only the list left the header
+      // describing a transition that had just been called off.
+      deps.refetchPublications();
+      deps.refetchPage();
     }
   };
 
@@ -329,24 +447,40 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
             </div>
           )}
           <div className="mt-2 flex flex-wrap items-center gap-2">
-            <a
-              href={absoluteUrl}
-              target="_blank"
-              rel="noreferrer"
-              title={`Open ${absoluteUrl}`}
-              className="inline-flex items-center gap-1.5 border border-ink/15 bg-white px-2.5 py-1 font-mono text-xs text-ink hover:border-sea"
-            >
-              {slugPath}
-              <ExternalLink className="size-3 text-ink/40" />
-            </a>
-            <button
-              onClick={onCopyUrl}
-              title="Copy full URL"
-              className="inline-flex items-center gap-1.5 border border-ink/15 px-2 py-1 text-xs text-ink/60 hover:border-sea hover:text-ink"
-            >
-              {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
-              {copied ? "Copied" : "Copy URL"}
-            </button>
+            {publicUrl ? (
+              <>
+                <a
+                  href={publicUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  title={`Open ${publicUrl}`}
+                  className="inline-flex items-center gap-1.5 border border-ink/15 bg-white px-2.5 py-1 font-mono text-xs text-ink hover:border-sea"
+                >
+                  {slugPath}
+                  <ExternalLink className="size-3 text-ink/40" />
+                </a>
+                <button
+                  onClick={onCopyUrl}
+                  title="Copy full URL"
+                  className="inline-flex items-center gap-1.5 border border-ink/15 px-2 py-1 text-xs text-ink/60 hover:border-sea hover:text-ink"
+                >
+                  {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+                  {copied ? "Copied" : "Copy URL"}
+                </button>
+              </>
+            ) : (
+              /* Not a link and not a copy target: there is no address to open
+                 or to paste into a message. The path is still shown, because
+                 it is the one true thing here — where this page would live if
+                 the locale were given a domain. */
+              <span
+                className="inline-flex items-center gap-1.5 border border-dashed border-ink/20 px-2.5 py-1 font-mono text-xs text-ink/50"
+                title={`${localeName} has no public domain, so this page has no public address.`}
+              >
+                {slugPath}
+                <span className="font-sans">· No domain configured for {localeName}</span>
+              </span>
+            )}
             {locales.length > 1 && (
               <div className="flex items-center gap-1">
                 {locales.map((loc) => (
@@ -365,8 +499,16 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
               </div>
             )}
           </div>
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            <PublicationBadge
+                  state={page.publication}
+                  at={page.publication_at}
+                  transition={page.publication_transition}
+                />
+            <PageStatusBadge status={normalizePageStatus(page.status)} />
+          </div>
           <div className="text-xs text-ink/50 font-mono mt-2">
-            {page.key} · {page.status}
+            {page.key}
             {dirty && " · unsaved changes"}
           </div>
         </div>
@@ -401,7 +543,8 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
             onClick={() => onSave(true)}
             className="inline-flex items-center gap-2 bg-ink text-white px-4 py-2 text-sm disabled:opacity-40"
           >
-            <Rocket className="size-4" /> Publish now
+            <Rocket className="size-4" />{" "}
+            {isPubliclyVisible(page.publication) ? "Publish update now" : "Publish now"}
           </button>
         </div>
       </div>
@@ -464,8 +607,9 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
             </div>
           </div>
           <p className="mt-3 text-xs text-ink/60">
-            The current canvas is saved as a new draft version and scheduled to become live at that
-            time. The site auto-selects the newest active publication whose window is open.
+            Times are in the site&rsquo;s timezone ({zone}). The current canvas is saved as a new
+            draft version and scheduled to become live at that time. The site auto-selects the
+            newest active publication whose window is open.
           </p>
 
           <div className="mt-6">
@@ -504,6 +648,11 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
                       <span className="ml-3 font-mono text-ink">
                         v{p.page_versions?.version_no ?? "?"}
                       </span>
+                      {p.version_id && p.version_id === page.publication_next_version_id ? (
+                        <span className="ml-2 text-[0.65rem] uppercase tracking-wider text-sea">
+                          next
+                        </span>
+                      ) : null}
                       <span className="ml-3 text-ink/70">
                         {new Date(p.publish_at).toLocaleString()}
                       </span>
@@ -514,15 +663,23 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
                       )}
                       {p.note && <span className="ml-3 text-ink/60 italic">{p.note}</span>}
                     </div>
-                    {p.is_active && status !== "expired" && (
+                    {status === "scheduled" ? (
                       <button
                         className="text-red-600 hover:underline disabled:opacity-40 disabled:no-underline"
                         disabled={lock.blocked}
-                        onClick={() => onCancelPub(p.id)}
+                        onClick={() => onCancelPub(p)}
                       >
                         Cancel
                       </button>
-                    )}
+                    ) : status === "active" ? (
+                      // Retiring this row does not cancel anything: it takes
+                      // the page off the public website, and where an older
+                      // row is still active behind it, puts that version back.
+                      // That is Unpublish, and it asks its own question.
+                      <span className="text-xs text-ink/45">
+                        Live — unpublish the page to take it down
+                      </span>
+                    ) : null}
                   </div>
                 );
               })}