@sevenfold/setto-client 0.8.0 → 0.8.2

package/dist/preview-bar.d.ts

@@ -1,3 +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

@@ -21362,22 +21362,51 @@ 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");
   }, []);
-  if (!onPreview || authLoading) return null;
-  if (session && sites === null) return null;
-  const bought = paid || currentSite?.status === "live";
-  const owner = !!session && !!currentSite && !bought;
+  useEffect(() => {
+    if (!onPreview || session) return;
+    let cancelled = false;
+    fetch(`${config.apiUrl}/onboarding/sites/${config.siteId}/sold`, {
+      headers: { Accept: "application/json" }
+    }).then((r) => r.ok ? r.json() : null).then((d) => {
+      if (!cancelled && d) setSoldPublic(d.sold === true);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [onPreview, session, config.apiUrl, 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;
-  if (bought) return null;
   const signIn = () => {
     window.location.href = "/setto";
   };
@@ -21486,6 +21515,17 @@ const primaryStyle = {
 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";