@sevenfold/setto-client 0.7.0 → 0.8.1

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { SettoProvider, useSetto } from './provider';
 export { GuestEditProvider, useGuestEdit } from './guest-edit';
+export { SettoPreviewBar, isPreviewHost } from './preview-bar';
 export { T } from './T';
 export { SettoSection } from './SettoSection';
 export { SettoBlock } from './SettoBlock';

package/dist/preview-bar.d.ts

@@ -0,0 +1,29 @@
+/** True when this page is served from a Setto preview address. */
+export declare function isPreviewHost(hostname: string): boolean;
+export type PreviewBarState = 'hidden' | 'owner' | 'visitor';
+/**
+ * Whether the bar shows at all, and as whom.
+ *
+ * Pulled out of the component because the interesting failures are all in this
+ * decision and none of them are visual: showing «Publiser» to somebody who has
+ * already paid, showing «Forhåndsvisning» on a site that has been bought, or
+ * flashing either one during the round trip that would have said otherwise.
+ *
+ * Unknown is a state, not a default. Both `sitesLoaded` and `soldPublic` start
+ * out unresolved, and every unresolved input means `hidden` — the bar arrives
+ * a moment late rather than asserting something it has to take back.
+ */
+export declare function previewBarState(input: {
+    onPreview: boolean;
+    authLoading: boolean;
+    hasSession: boolean;
+    /** `sites !== null` — whether this account's site list has come back. */
+    sitesLoaded: boolean;
+    hasCurrentSite: boolean;
+    currentSiteIsLive: boolean;
+    /** The public answer, null until it arrives or if it never does. */
+    soldPublic: boolean | null;
+    /** Stripe's own `?betaling=ok`, which lands before the webhook does. */
+    paidMarker: boolean;
+}): PreviewBarState;
+export declare function SettoPreviewBar(): import("react").ReactPortal | null;

package/dist/setto-client.js

@@ -21358,6 +21358,175 @@ function useSiteAccess(supabase, session, siteId) {
   }, [supabase, session, siteId]);
   return state;
 }
+const PREVIEW_HOST = /(^|\.)site\.setto\.no$/i;
+function isPreviewHost(hostname) {
+  return PREVIEW_HOST.test(hostname);
+}
+function previewBarState(input) {
+  if (!input.onPreview || input.authLoading) return "hidden";
+  if (input.hasSession && !input.sitesLoaded) return "hidden";
+  if (!input.hasSession && input.soldPublic === null) return "hidden";
+  const bought = input.paidMarker || input.currentSiteIsLive || input.soldPublic === true;
+  if (bought) return "hidden";
+  return input.hasSession && input.hasCurrentSite ? "owner" : "visitor";
+}
+function SettoPreviewBar() {
+  const { supabase, api, config, session, authLoading, currentSite, sites, editMode } = useSetto();
+  const [onPreview, setOnPreview] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [paid, setPaid] = useState(false);
+  const [soldPublic, setSoldPublic] = useState(null);
+  useEffect(() => {
+    setOnPreview(isPreviewHost(window.location.hostname));
+    setPaid(new URLSearchParams(window.location.search).get("betaling") === "ok");
+  }, []);
+  useEffect(() => {
+    if (!onPreview || session) return;
+    let cancelled = false;
+    api.request(`/onboarding/sites/${config.siteId}/sold`, {}, "siteSold").then((d) => {
+      if (!cancelled) setSoldPublic(d.sold === true);
+    }).catch(() => {
+      if (!cancelled) setSoldPublic(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [onPreview, session, api, config.siteId]);
+  const state = previewBarState({
+    onPreview,
+    authLoading,
+    hasSession: !!session,
+    sitesLoaded: sites !== null,
+    hasCurrentSite: !!currentSite,
+    currentSiteIsLive: currentSite?.status === "live",
+    soldPublic,
+    paidMarker: paid
+  });
+  if (state === "hidden") return null;
+  const owner = state === "owner";
+  const name = currentSite?.display_name?.trim() || config.displayName?.trim() || config.siteId;
+  const signIn = () => {
+    window.location.href = "/setto";
+  };
+  const publish = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const token = (await supabase.auth.getSession()).data.session?.access_token;
+      if (!token) {
+        signIn();
+        return;
+      }
+      const data = await api.request(
+        `/onboarding/sites/${config.siteId}/checkout`,
+        {
+          method: "POST",
+          // Back to the page they were looking at, not to a chat window.
+          body: { returnTo: window.location.origin + window.location.pathname }
+        },
+        "checkout"
+      );
+      if (!data.url) throw new Error("checkout_failed");
+      window.location.href = data.url;
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : "";
+      setError(
+        detail.includes("already_paid") ? "Denne siden er allerede betalt." : detail.includes("not_found") ? "Fant ingen bestilling for denne siden på kontoen din." : detail.includes("stripe_not_configured") ? "Betaling er ikke satt opp ennå." : "Klarte ikke starte betalingen. Prøv igjen."
+      );
+      setBusy(false);
+    }
+  };
+  return createPortal(
+    /*
+     * Lifted above the editor's floating button when edit mode is on, which
+     * sits in the same corner band. Sideways would collide again the moment
+     * its toolbar opens, since that expands rightward.
+     */
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: editMode ? { ...barStyle, bottom: "calc(max(16px, env(safe-area-inset-bottom, 0px)) + 68px)" } : barStyle,
+        "data-setto-preview-bar": "",
+        children: owner ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { style: dotStyle, "aria-hidden": true }),
+          /* @__PURE__ */ jsxs("span", { style: labelStyle, children: [
+            "Du forhåndsviser nå ",
+            /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children: name })
+          ] }),
+          error && /* @__PURE__ */ jsx("span", { style: errorStyle$1, children: error }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: primaryStyle, onClick: publish, disabled: busy, children: busy ? "Åpner betaling …" : "Publiser" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { style: dotStyle, "aria-hidden": true }),
+          /* @__PURE__ */ jsxs("span", { style: labelStyle, children: [
+            "Forhåndsvisning av ",
+            name
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: primaryStyle, onClick: signIn, children: "Rediger" })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+const barStyle = {
+  position: "fixed",
+  left: "50%",
+  bottom: "max(16px, env(safe-area-inset-bottom, 0px))",
+  transform: "translateX(-50%)",
+  zIndex: 2147483e3,
+  display: "flex",
+  alignItems: "center",
+  gap: 14,
+  maxWidth: "calc(100vw - 24px)",
+  padding: "10px 10px 10px 18px",
+  borderRadius: 999,
+  background: "#211711",
+  color: "#fffdf8",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  fontSize: 14,
+  lineHeight: 1.3,
+  boxShadow: "0 18px 40px -18px rgba(0, 0, 0, 0.65)"
+};
+const dotStyle = {
+  width: 7,
+  height: 7,
+  borderRadius: "50%",
+  background: "#c4502a",
+  flex: "none"
+};
+const labelStyle = {
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+};
+const primaryStyle = {
+  flex: "none",
+  padding: "9px 18px",
+  border: 0,
+  borderRadius: 999,
+  background: "#c4502a",
+  color: "#fffdf8",
+  font: "inherit",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+const errorStyle$1 = {
+  color: "#ffb4a2",
+  fontSize: 13,
+  /*
+   * Shrinkable, unlike the label beside it.
+   *
+   * `nowrap` on a flex child whose `min-width` is `auto` cannot shrink below
+   * its own text, so on a 320px phone the error shouldered «Publiser» 19px
+   * past the right edge of the screen and the bar clipped it — the button
+   * that takes the money, unreachable, exactly when something had gone wrong.
+   */
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
 const SETTO_BASE = "/setto";
 function siteHomeUrl(pathname = "/") {
   const u = new URL(window.location.href);
@@ -24872,7 +25041,10 @@ function SettoProvider({ config, children }) {
     assetStore: storeReady ? assetStoreRef.current : null
   };
   const editShellActive = editMode && !!value.store;
-  return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsx(SectionEditProvider, { children: /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }) }) });
+  return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsxs(SectionEditProvider, { children: [
+    /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }),
+    !onAdminRoute && /* @__PURE__ */ jsx(SettoPreviewBar, {})
+  ] }) });
 }
 function useSetto() {
   const ctx = useContext(SettoContext);
@@ -26643,6 +26815,7 @@ export {
   SettoForm,
   SettoIcon,
   SettoImage,
+  SettoPreviewBar,
   SettoProvider,
   SettoRepeater,
   SettoSection,
@@ -26652,6 +26825,7 @@ export {
   extractContentKeys,
   formFieldsPrefix,
   isFormFieldType,
+  isPreviewHost,
   nodeChildren,
   parseBlockTree,
   readLocaleFields,