@sevenfold/setto-client 0.7.0 → 0.8.0

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,3 @@
+/** True when this page is served from a Setto preview address. */
+export declare function isPreviewHost(hostname: string): boolean;
+export declare function SettoPreviewBar(): import("react").ReactPortal | null;

package/dist/setto-client.js

@@ -21358,6 +21358,136 @@ 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 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);
+  useEffect(() => {
+    setOnPreview(isPreviewHost(window.location.hostname));
+    setPaid(new URLSearchParams(window.location.search).get("betaling") === "ok");
+  }, []);
+  if (!onPreview || authLoading) return null;
+  if (session && sites === null) return null;
+  const bought = paid || currentSite?.status === "live";
+  const owner = !!session && !!currentSite && !bought;
+  const name = currentSite?.display_name?.trim() || config.displayName?.trim() || config.siteId;
+  if (bought) return null;
+  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,
+  whiteSpace: "nowrap"
+};
 const SETTO_BASE = "/setto";
 function siteHomeUrl(pathname = "/") {
   const u = new URL(window.location.href);
@@ -24872,7 +25002,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 +26776,7 @@ export {
   SettoForm,
   SettoIcon,
   SettoImage,
+  SettoPreviewBar,
   SettoProvider,
   SettoRepeater,
   SettoSection,
@@ -26652,6 +26786,7 @@ export {
   extractContentKeys,
   formFieldsPrefix,
   isFormFieldType,
+  isPreviewHost,
   nodeChildren,
   parseBlockTree,
   readLocaleFields,