@neowhale/storefront 0.2.38 → 0.2.40

package/dist/landing.global.js

@@ -556,7 +556,24 @@ var WhaleStorefront = (function (exports) {
   function GallerySection({ section, theme }) {
     const { images } = section.content;
     const columns = section.config?.columns || 3;
+    const layout = section.config?.layout || "grid";
     if (!images || images.length === 0) return null;
+    if (layout === "collage") {
+      return /* @__PURE__ */ jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: {
+        gridColumn: i === 0 ? "1 / -1" : void 0,
+        aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
+        overflow: "hidden",
+        background: theme.surface
+      }, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: img.url,
+          alt: img.alt || "",
+          loading: i < 2 ? "eager" : "lazy",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) }, i)) }) });
+    }
     return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
   }
   function SocialLinksSection({ section, theme }) {
@@ -784,6 +801,7 @@ var WhaleStorefront = (function (exports) {
     const [newsletterOptIn, setNewsletterOptIn] = useState(false);
     const [status, setStatus] = useState("idle");
     const [errorMsg, setErrorMsg] = useState("");
+    const [serverMessage, setServerMessage] = useState(null);
     const gatewayUrl = c.gateway_url || data.gatewayUrl || "https://whale-gateway.fly.dev";
     const storeId = c.store_id || data.store?.id;
     const slug = c.landing_page_slug || data.landing_page?.slug;
@@ -822,8 +840,15 @@ var WhaleStorefront = (function (exports) {
           })
         });
         if (!res.ok) {
-          const body = await res.json().catch(() => ({}));
-          throw new Error(body?.error?.message || "Something went wrong. Please try again.");
+          const body2 = await res.json().catch(() => ({}));
+          throw new Error(body2?.error?.message || "Something went wrong. Please try again.");
+        }
+        const body = await res.json().catch(() => ({}));
+        if (body.is_new === false) {
+          setServerMessage({
+            heading: "welcome back!",
+            message: body.message || "your rewards are already loaded."
+          });
         }
         setStatus("success");
         onEvent?.("lead", { email, first_name: firstName || void 0, source: c.source || "landing_page", landing_page_slug: slug || void 0 });
@@ -846,7 +871,7 @@ var WhaleStorefront = (function (exports) {
       fontFamily: "inherit",
       transition: "border-color 0.2s"
     };
-    if (status === "success") return /* @__PURE__ */ jsx(SuccessState, { theme, heading: successHeading, message: successMessage, couponCode: c.coupon_code });
+    if (status === "success") return /* @__PURE__ */ jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code });
     return /* @__PURE__ */ jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
       /* @__PURE__ */ jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
       /* @__PURE__ */ jsx("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)" }, children: [

package/dist/react/index.cjs

@@ -2300,7 +2300,24 @@ function VideoSection({ section, theme }) {
 function GallerySection({ section, theme }) {
   const { images } = section.content;
   const columns = section.config?.columns || 3;
+  const layout = section.config?.layout || "grid";
   if (!images || images.length === 0) return null;
+  if (layout === "collage") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      gridColumn: i === 0 ? "1 / -1" : void 0,
+      aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
+      overflow: "hidden",
+      background: theme.surface
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: img.url,
+        alt: img.alt || "",
+        loading: i < 2 ? "eager" : "lazy",
+        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+      }
+    ) }, i)) }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
 }
 function SocialLinksSection({ section, theme }) {
@@ -2524,6 +2541,7 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
   const [newsletterOptIn, setNewsletterOptIn] = react.useState(false);
   const [status, setStatus] = react.useState("idle");
   const [errorMsg, setErrorMsg] = react.useState("");
+  const [serverMessage, setServerMessage] = react.useState(null);
   const gatewayUrl = c.gateway_url || data.gatewayUrl || "https://whale-gateway.fly.dev";
   const storeId = c.store_id || data.store?.id;
   const slug = c.landing_page_slug || data.landing_page?.slug;
@@ -2562,8 +2580,15 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
         })
       });
       if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        throw new Error(body?.error?.message || "Something went wrong. Please try again.");
+        const body2 = await res.json().catch(() => ({}));
+        throw new Error(body2?.error?.message || "Something went wrong. Please try again.");
+      }
+      const body = await res.json().catch(() => ({}));
+      if (body.is_new === false) {
+        setServerMessage({
+          heading: "welcome back!",
+          message: body.message || "your rewards are already loaded."
+        });
       }
       setStatus("success");
       onEvent?.("lead", { email, first_name: firstName || void 0, source: c.source || "landing_page", landing_page_slug: slug || void 0 });
@@ -2586,7 +2611,7 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
     fontFamily: "inherit",
     transition: "border-color 0.2s"
   };
-  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(SuccessState, { theme, heading: successHeading, message: successMessage, couponCode: c.coupon_code });
+  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(SuccessState, { theme, heading: serverMessage?.heading || successHeading, message: serverMessage?.message || successMessage, couponCode: c.coupon_code });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)" }, children: [