@drawbridge/components 0.0.78 → 0.1.0

package/dist/bridge/template-layout.js

@@ -0,0 +1,733 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var template_layout_exports = {};
+__export(template_layout_exports, {
+  default: () => template_layout_default
+});
+module.exports = __toCommonJS(template_layout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_dynamic = __toESM(require("next/dynamic"));
+var import_navigation = require("next/navigation");
+var import_provider_font = __toESM(require("../provider-font"));
+var import_template_subdomain = __toESM(require("./template-subdomain"));
+var import_powered_by = __toESM(require("../icons/powered-by"));
+var import_menu = __toESM(require("../icons/menu"));
+var import_shop = __toESM(require("../icons/shop"));
+var import_loader = __toESM(require("../icons/loader"));
+var import_times = __toESM(require("../icons/times"));
+var import_overlay = __toESM(require("../shared/overlay"));
+var import_button = __toESM(require("../shared/button"));
+var import_link = __toESM(require("next/link"));
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_constants = __toESM(require("./lib/constants"));
+var import_checkout_kit = require("./lib/checkout-kit");
+var import_provider_analytics = require("./provider-analytics");
+const TemplateModal = (0, import_dynamic.default)(() => import("./template-modal"), { ssr: false });
+const TemplateLayout = ({
+  params,
+  result,
+  userAgent
+}) => {
+  var _a, _b, _c, _d, _e;
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const token = searchParams.get("drwbrdg_pre");
+  const preview = Boolean(token);
+  const affiliate = searchParams.get("drwbrdg_af") || null;
+  const submissionId = searchParams.get("submission");
+  const redirectToCheckout = (0, import_react.useCallback)(
+    (url) => {
+      if (!url) return;
+      window.location.assign(url);
+    },
+    []
+  );
+  const [data, setData] = (0, import_react.useState)(result);
+  const [iframe, setIframe] = (0, import_react.useState)(false);
+  const style = data == null ? void 0 : data.style;
+  const [cart, setCart] = (0, import_react.useState)(null);
+  const [cartLoading, setCartLoading] = (0, import_react.useState)(true);
+  const [modal, setModal] = (0, import_react.useState)(Boolean(submissionId));
+  const [opened, setOpened] = (0, import_react.useState)(Boolean(submissionId));
+  const [panel, setPanel] = (0, import_react.useState)(submissionId ? {
+    name: "submission",
+    data: {
+      id: submissionId,
+      title: "Keep going",
+      preview,
+      style,
+      ...params
+    }
+  } : {
+    name: null,
+    data: {}
+  });
+  const cartCount = (0, import_react.useMemo)(
+    () => ((cart == null ? void 0 : cart.lines) || []).reduce((sum, line) => sum + (line.quantity || 0), 0),
+    [cart]
+  );
+  const cartRoot = "/subdomain/" + (params == null ? void 0 : params.subdomain) + "/page/" + (params == null ? void 0 : params.slug) + "/cart";
+  const cartStorageKey = "cart:" + (params == null ? void 0 : params.subdomain);
+  const checkout = (0, import_react.useCallback)(
+    (args = {}) => (0, import_checkout_kit.checkout)({
+      affiliate,
+      campaign: data == null ? void 0 : data.campaign,
+      onComplete: () => {
+        var _a2;
+        if (typeof window !== "undefined") {
+          window.localStorage.removeItem(cartStorageKey);
+          window.localStorage.removeItem(cartStorageKey + "_expiry");
+        }
+        ;
+        setCart(null);
+        setPanel({
+          name: "purchase",
+          data: {
+            message: ((_a2 = data == null ? void 0 : data.defaults) == null ? void 0 : _a2.purchase) || "Thank you for your purchase"
+          }
+        });
+        setModal(true);
+      },
+      onOpen: () => setModal(false),
+      onRedirect: redirectToCheckout,
+      organization: data == null ? void 0 : data.organization,
+      page: data == null ? void 0 : data.page,
+      slug: params == null ? void 0 : params.slug,
+      subdomain: params == null ? void 0 : params.subdomain,
+      ...args
+    }),
+    [affiliate, cartStorageKey, data == null ? void 0 : data.campaign, (_a = data == null ? void 0 : data.defaults) == null ? void 0 : _a.purchase, data == null ? void 0 : data.organization, data == null ? void 0 : data.page, params == null ? void 0 : params.slug, params == null ? void 0 : params.subdomain, redirectToCheckout]
+  );
+  const openCheckout = (0, import_react.useCallback)(
+    (checkoutUrl) => checkout({ checkoutUrl }),
+    [checkout]
+  );
+  if ((modal || (panel == null ? void 0 : panel.name)) && !opened) setOpened(true);
+  (0, import_react.useEffect)(
+    () => {
+      if (typeof window === "undefined") return;
+      let timer;
+      const load = () => import("./template-modal").catch(() => {
+      });
+      const afterLoad = () => {
+        timer = setTimeout(load, 3e3);
+      };
+      if (document.readyState === "complete") {
+        afterLoad();
+      } else {
+        window.addEventListener("load", afterLoad, { once: true });
+      }
+      return () => {
+        window.removeEventListener("load", afterLoad);
+        clearTimeout(timer);
+      };
+    },
+    []
+  );
+  (0, import_react.useEffect)(
+    () => {
+      if (typeof window === "undefined") return;
+      const load = () => (0, import_checkout_kit.ensureCheckoutKit)().catch(() => {
+      });
+      if (window.requestIdleCallback) {
+        const id2 = window.requestIdleCallback(load, { timeout: 3e3 });
+        return () => window.cancelIdleCallback(id2);
+      }
+      const id = setTimeout(load, 2e3);
+      return () => clearTimeout(id);
+    },
+    []
+  );
+  (0, import_react.useEffect)(
+    () => {
+      if (typeof window === "undefined") return;
+      const cartId = window.localStorage.getItem(cartStorageKey);
+      const cartExpiry = window.localStorage.getItem(cartStorageKey + "_expiry");
+      const expired = !cartExpiry || Date.now() - Number(cartExpiry) > 864e5;
+      if (!cartId || expired) {
+        if (cartId && expired) {
+          window.localStorage.removeItem(cartStorageKey);
+          window.localStorage.removeItem(cartStorageKey + "_expiry");
+        }
+        ;
+        setCartLoading(false);
+        return;
+      }
+      ;
+      (0, import_fetch.request)({
+        endpoint: cartRoot + "?cartId=" + encodeURIComponent(cartId),
+        method: "GET"
+      }).then(({ result: result2 }) => {
+        if (result2 == null ? void 0 : result2.id) {
+          setCart(result2);
+        } else {
+          window.localStorage.removeItem(cartStorageKey);
+          window.localStorage.removeItem(cartStorageKey + "_expiry");
+        }
+        ;
+      }).catch(() => {
+        window.localStorage.removeItem(cartStorageKey);
+        window.localStorage.removeItem(cartStorageKey + "_expiry");
+      }).finally(() => {
+        setCartLoading(false);
+      });
+    },
+    [cartRoot, cartStorageKey]
+  );
+  const onAddToCart = (0, import_react.useCallback)(
+    async ({ variant }) => {
+      var _a2;
+      const attributes = [
+        ...(data == null ? void 0 : data.campaign) ? [{ key: "_drwbrdg_ca", value: data.campaign }] : [],
+        ...(data == null ? void 0 : data.organization) ? [{ key: "_drwbrdg_or", value: data.organization }] : [],
+        ...affiliate ? [{ key: "_drwbrdg_af", value: affiliate }] : [],
+        ...(data == null ? void 0 : data.page) ? [{ key: "_drwbrdg_pg", value: data.page }] : []
+      ];
+      const line = {
+        attributes,
+        merchandiseId: variant.id,
+        quantity: 1
+      };
+      let response;
+      if (cart == null ? void 0 : cart.id) {
+        try {
+          response = await (0, import_fetch.request)({
+            body: {
+              cartId: cart.id,
+              lines: [line]
+            },
+            endpoint: cartRoot + "/lines",
+            method: "POST"
+          });
+        } catch {
+          response = await (0, import_fetch.request)({
+            body: {
+              lines: [line]
+            },
+            endpoint: cartRoot,
+            method: "POST"
+          });
+        }
+      } else {
+        response = await (0, import_fetch.request)({
+          body: {
+            lines: [line]
+          },
+          endpoint: cartRoot,
+          method: "POST"
+        });
+      }
+      ;
+      if ((_a2 = response == null ? void 0 : response.result) == null ? void 0 : _a2.id) {
+        if (typeof window !== "undefined") {
+          window.localStorage.setItem(cartStorageKey, response.result.id);
+          window.localStorage.setItem(cartStorageKey + "_expiry", String(Date.now()));
+        }
+        ;
+        setCart(response.result);
+        setModal(true);
+      }
+      ;
+      return response == null ? void 0 : response.result;
+    },
+    [affiliate, cart, cartRoot, cartStorageKey, data]
+  );
+  const onCartLineUpdate = (0, import_react.useCallback)(
+    async (lineId, quantity) => {
+      var _a2;
+      if (!(cart == null ? void 0 : cart.id)) return;
+      const response = await (0, import_fetch.request)({
+        body: {
+          cartId: cart.id,
+          lines: [
+            {
+              id: lineId,
+              quantity
+            }
+          ]
+        },
+        endpoint: cartRoot + "/lines",
+        method: "PUT"
+      });
+      if ((_a2 = response == null ? void 0 : response.result) == null ? void 0 : _a2.id) setCart(response.result);
+    },
+    [cart, cartRoot]
+  );
+  const onCartLineRemove = (0, import_react.useCallback)(
+    async (lineId) => {
+      var _a2, _b2;
+      if (!(cart == null ? void 0 : cart.id)) return;
+      const response = await (0, import_fetch.request)({
+        body: {
+          cartId: cart.id,
+          lineIds: [lineId]
+        },
+        endpoint: cartRoot + "/lines",
+        method: "DELETE"
+      });
+      if ((_a2 = response == null ? void 0 : response.result) == null ? void 0 : _a2.id) {
+        setCart(response.result);
+        if (!((_b2 = response.result.lines) == null ? void 0 : _b2.length) && typeof window !== "undefined") {
+          window.localStorage.removeItem(cartStorageKey);
+        }
+        ;
+      }
+      ;
+    },
+    [cart, cartRoot, cartStorageKey]
+  );
+  const tracking = (0, import_provider_analytics.useTracking)({
+    params,
+    preview,
+    result
+  });
+  const iframeMessageResponse = (0, import_react.useCallback)(
+    ({
+      event,
+      preview: preview2
+    }) => {
+      var _a2, _b2, _c2, _d2, _e2, _f, _g;
+      let trusted = false;
+      try {
+        trusted = Boolean(
+          process.env.NEXT_PUBLIC_DASHBOARD_URI && (event == null ? void 0 : event.origin) && new URL(event.origin).origin === new URL(process.env.NEXT_PUBLIC_DASHBOARD_URI).origin
+        );
+      } catch {
+        trusted = false;
+      }
+      if (preview2 && trusted) {
+        setIframe(true);
+      }
+      if (preview2 && trusted && ((_a2 = event == null ? void 0 : event.data) == null ? void 0 : _a2.update)) {
+        const headline = ((_c2 = (_b2 = event == null ? void 0 : event.data) == null ? void 0 : _b2.update) == null ? void 0 : _c2.headline) || ((_d2 = result == null ? void 0 : result.data) == null ? void 0 : _d2.headline) || ((_f = (_e2 = import_constants.default) == null ? void 0 : _e2.form) == null ? void 0 : _f.headline);
+        setData({
+          ...result,
+          ...(_g = event == null ? void 0 : event.data) == null ? void 0 : _g.update,
+          headline
+        });
+      }
+    },
+    [result]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      var _a2, _b2, _c2, _d2;
+      if (!(userAgent == null ? void 0 : userAgent.includes("google-read-aloud"))) {
+        tracking.page();
+      }
+      const color = (_b2 = (_a2 = style == null ? void 0 : style.background) == null ? void 0 : _a2.color) == null ? void 0 : _b2.rgb;
+      const textColor = (_d2 = (_c2 = style == null ? void 0 : style.text) == null ? void 0 : _c2.color) == null ? void 0 : _d2.rgb;
+      if (color) sessionStorage.setItem("db_bg", color);
+      if (textColor) sessionStorage.setItem("db_text", textColor);
+      document.documentElement.style.background = color;
+      document.body.style.background = color;
+      document.documentElement.style.color = textColor;
+      const onRecievedMessage = (event) => iframeMessageResponse({
+        event,
+        preview
+      });
+      window.addEventListener("message", onRecievedMessage);
+      return () => {
+        window.removeEventListener("message", onRecievedMessage);
+        document.documentElement.style.background = "";
+        document.body.style.background = "";
+        document.documentElement.style.color = "";
+      };
+    },
+    [iframeMessageResponse, preview, tracking, (_c = (_b = style == null ? void 0 : style.background) == null ? void 0 : _b.color) == null ? void 0 : _c.rgb, (_e = (_d = style == null ? void 0 : style.text) == null ? void 0 : _d.color) == null ? void 0 : _e.rgb, userAgent]
+  );
+  const submission = (0, import_react.useCallback)(
+    ({ id, lead, message, title }) => {
+      setPanel({
+        name: "submission",
+        data: {
+          affiliate,
+          id,
+          lead,
+          message,
+          preview,
+          style,
+          title,
+          ...params
+        }
+      });
+      setModal(true);
+    },
+    [affiliate, params, preview, style]
+  );
+  const buttons = (0, import_react.useMemo)(
+    () => {
+      var _a2, _b2, _c2, _d2, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+      const branding = (compact = false) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ...{
+            className: "w-full" + (compact ? " p-6" : " p-6")
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.default,
+            {
+              ...{
+                "aria-label": "Link to Drawbridge website.",
+                element: import_link.default,
+                href: process.env.NEXT_PUBLIC_WEBSITE_URI,
+                onClick: () => tracking.track(
+                  {
+                    name: "logo-website-referral"
+                  },
+                  "click",
+                  {
+                    plugins: {
+                      all: false,
+                      "google-tag-manager-drawbridge": true
+                    }
+                  }
+                ),
+                target: "_blank",
+                variant: "link"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_powered_by.default,
+                {
+                  ...{
+                    className: "w-full max-w-[180px] lg:max-w-[200px]"
+                  }
+                }
+              )
+            }
+          )
+        }
+      );
+      return {
+        branding: branding(),
+        brandingCompact: branding(true),
+        close: (name) => {
+          var _a3, _b3, _c3, _d3, _e3, _f2, _g2, _h2, _i2, _j2, _k2;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.default,
+            {
+              ...{
+                "aria-label": "Close Modal",
+                inline: true,
+                onClick: () => {
+                  setModal(false);
+                  tracking.track({
+                    name: "button-" + name + "-close"
+                  });
+                },
+                variant: "link"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  ...{
+                    className: "flex items-center justify-center w-6 h-6 rounded-full",
+                    ...style && {
+                      style: {
+                        backgroundColor: ((_c3 = (_b3 = (_a3 = style == null ? void 0 : style.button) == null ? void 0 : _a3.background) == null ? void 0 : _b3.color) == null ? void 0 : _c3.rgb) || ((_e3 = (_d3 = style == null ? void 0 : style.text) == null ? void 0 : _d3.color) == null ? void 0 : _e3.rgb),
+                        borderRadius: ((_f2 = style == null ? void 0 : style.button) == null ? void 0 : _f2.radius) != null ? style.button.radius / 4 + "px" : void 0,
+                        color: ((_i2 = (_h2 = (_g2 = style == null ? void 0 : style.button) == null ? void 0 : _g2.text) == null ? void 0 : _h2.color) == null ? void 0 : _i2.rgb) || ((_k2 = (_j2 = style == null ? void 0 : style.background) == null ? void 0 : _j2.color) == null ? void 0 : _k2.rgb)
+                      }
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_times.default,
+                    {
+                      ...{
+                        className: "w-4 h-4",
+                        "aria-hidden": true
+                      }
+                    }
+                  )
+                }
+              )
+            }
+          );
+        },
+        enter: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              disabled: !preview && !(data == null ? void 0 : data.valid),
+              onClick: () => {
+                setPanel({
+                  name: "enter"
+                });
+                setModal(true);
+                tracking.track({
+                  name: "button-enter-open"
+                });
+              },
+              style
+            },
+            children: preview || Boolean(data == null ? void 0 : data.valid) ? ((_a2 = data == null ? void 0 : data.defaults) == null ? void 0 : _a2.active) || ((_d2 = (_c2 = (_b2 = import_drawbridge_utils.constants) == null ? void 0 : _b2.campaign) == null ? void 0 : _c2.defaults) == null ? void 0 : _d2.active) : ((_e2 = data == null ? void 0 : data.defaults) == null ? void 0 : _e2.inactive) || ((_h = (_g = (_f = import_drawbridge_utils.constants) == null ? void 0 : _f.campaign) == null ? void 0 : _g.defaults) == null ? void 0 : _h.inactive)
+          }
+        ),
+        menu: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              "aria-label": "Open Menu",
+              inline: true,
+              onClick: () => {
+                setPanel({
+                  name: "menu"
+                });
+                setModal(true);
+                tracking.track({
+                  name: "button-menu-open"
+                });
+              },
+              variant: "link"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                ...{
+                  className: "flex items-center justify-center w-10 h-10 border border-current rounded-full",
+                  ...style && {
+                    style: {
+                      backgroundColor: ((_k = (_j = (_i = style == null ? void 0 : style.button) == null ? void 0 : _i.background) == null ? void 0 : _j.color) == null ? void 0 : _k.rgb) || ((_m = (_l = style == null ? void 0 : style.text) == null ? void 0 : _l.color) == null ? void 0 : _m.rgb),
+                      borderColor: ((_p = (_o = (_n = style == null ? void 0 : style.button) == null ? void 0 : _n.background) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb) || ((_r = (_q = style == null ? void 0 : style.text) == null ? void 0 : _q.color) == null ? void 0 : _r.rgb),
+                      borderRadius: ((_s = style == null ? void 0 : style.button) == null ? void 0 : _s.radius) != null ? style.button.radius / 4 + "px" : void 0,
+                      color: ((_v = (_u = (_t = style == null ? void 0 : style.button) == null ? void 0 : _t.text) == null ? void 0 : _u.color) == null ? void 0 : _v.rgb) || ((_x = (_w = style == null ? void 0 : style.background) == null ? void 0 : _w.color) == null ? void 0 : _x.rgb)
+                    }
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_menu.default,
+                  {
+                    ...{
+                      className: "w-6 h-6"
+                    }
+                  }
+                )
+              }
+            )
+          }
+        ),
+        recaptcha: () => {
+          var _a3, _b3, _c3, _d3;
+          return Boolean((_b3 = (_a3 = data == null ? void 0 : data.integrations) == null ? void 0 : _a3.recaptcha) == null ? void 0 : _b3.enabled) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ...{
+                className: "text-center text-[10px] opacity-50",
+                style: {
+                  color: (_d3 = (_c3 = style == null ? void 0 : style.text) == null ? void 0 : _c3.color) == null ? void 0 : _d3.rgb
+                }
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "This site is protected by reCAPTCHA." }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+                  "The Google\xA0",
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "a",
+                    {
+                      ...{
+                        className: "underline",
+                        href: "https://policies.google.com/privacy",
+                        target: "_blank"
+                      },
+                      children: "Privacy Policy"
+                    }
+                  ),
+                  "\xA0and\xA0",
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "a",
+                    {
+                      ...{
+                        className: "underline",
+                        href: "https://policies.google.com/terms",
+                        target: "_blank"
+                      },
+                      children: "Terms of Service"
+                    }
+                  ),
+                  "\xA0apply"
+                ] })
+              ]
+            }
+          );
+        },
+        shop: (name = "shop") => {
+          var _a3, _b3, _c3, _d3, _e3, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.default,
+            {
+              ...{
+                "aria-label": "Open Shop",
+                inline: true,
+                onClick: () => {
+                  setPanel({
+                    name
+                  });
+                  setModal(true);
+                  tracking.track({
+                    name: "button-" + name + "-open"
+                  });
+                },
+                variant: "link"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  ...{
+                    className: "flex items-center justify-center h-10 border border-current rounded-full " + (cartCount > 0 ? "pl-3 pr-4 space-x-1" : "w-10"),
+                    ...style && {
+                      style: {
+                        backgroundColor: ((_c3 = (_b3 = (_a3 = style == null ? void 0 : style.button) == null ? void 0 : _a3.background) == null ? void 0 : _b3.color) == null ? void 0 : _c3.rgb) || ((_e3 = (_d3 = style == null ? void 0 : style.text) == null ? void 0 : _d3.color) == null ? void 0 : _e3.rgb),
+                        borderColor: ((_h2 = (_g2 = (_f2 = style == null ? void 0 : style.button) == null ? void 0 : _f2.background) == null ? void 0 : _g2.color) == null ? void 0 : _h2.rgb) || ((_j2 = (_i2 = style == null ? void 0 : style.text) == null ? void 0 : _i2.color) == null ? void 0 : _j2.rgb),
+                        borderRadius: ((_k2 = style == null ? void 0 : style.button) == null ? void 0 : _k2.radius) != null ? style.button.radius / 4 + "px" : void 0,
+                        color: ((_n2 = (_m2 = (_l2 = style == null ? void 0 : style.button) == null ? void 0 : _l2.text) == null ? void 0 : _m2.color) == null ? void 0 : _n2.rgb) || ((_p2 = (_o2 = style == null ? void 0 : style.background) == null ? void 0 : _o2.color) == null ? void 0 : _p2.rgb)
+                      }
+                    }
+                  },
+                  children: [
+                    cartLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_loader.default,
+                      {
+                        ...{
+                          className: "w-5 h-5 animate-spin"
+                        }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_shop.default,
+                      {
+                        ...{
+                          className: "w-5 h-5"
+                        }
+                      }
+                    ),
+                    cartCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        ...{
+                          className: "m-auto"
+                        },
+                        children: cartCount
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          );
+        }
+      };
+    },
+    [cartCount, cartLoading, data, preview, style, tracking]
+  );
+  const props = {
+    affiliate,
+    buttons,
+    cart,
+    data,
+    iframe,
+    modal,
+    params,
+    preview,
+    setData,
+    setModal,
+    setPanel,
+    style,
+    tracking
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_provider_font.default,
+    {
+      ...style,
+      children: (fonts) => {
+        var _a2, _b2;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_template_subdomain.default,
+            {
+              ...{
+                ...props,
+                fonts
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_overlay.default,
+            {
+              ...{
+                className: "z-30 fixed inset-0",
+                onClick: () => {
+                  setModal(false);
+                  if (panel == null ? void 0 : panel.name) {
+                    tracking.track({
+                      name: "button-" + panel.name + "-close"
+                    });
+                  }
+                  ;
+                },
+                show: modal,
+                style
+              }
+            }
+          ),
+          opened && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TemplateModal,
+            {
+              ...{
+                buttons,
+                cart,
+                checkout,
+                data,
+                fonts,
+                iframe,
+                modal,
+                onAddToCart,
+                onCartLineRemove,
+                onCartLineUpdate,
+                openCheckout,
+                panel,
+                params,
+                preview,
+                // From the SERVER result, not the mutable `data` —
+                // matches the pre-split behavior (the provider key
+                // must not flip on preview updates).
+                recaptchaEnabled: Boolean((_b2 = (_a2 = result == null ? void 0 : result.integrations) == null ? void 0 : _a2.recaptcha) == null ? void 0 : _b2.enabled),
+                setModal,
+                setPanel,
+                style,
+                submission,
+                tracking
+              }
+            }
+          )
+        ] });
+      }
+    }
+  );
+};
+var template_layout_default = TemplateLayout;