@monetize.software/sdk-extension 3.0.0-alpha.24 → 3.0.0-alpha.25

package/dist/content.js

@@ -1,4 +1,4 @@
-import { P as L, B as qe, E as Ne, c as Fe, A as de, w as $e, a as Q, r as Ve, b as He } from "./chunks/chrome-port-bfTUUDz_.js";
+import { P as L, B as qe, E as Ne, c as Fe, A as de, w as Ve, a as Q, r as $e, b as He } from "./chunks/chrome-port-bfTUUDz_.js";
 import { render as ee, h as he, createContext as Ge } from "preact";
 import { jsx as o, jsxs as u, Fragment as le } from "preact/jsx-runtime";
 import { useState as k, useEffect as P, useContext as We, useRef as j, useMemo as Ze, useLayoutEffect as Ye } from "preact/hooks";
@@ -15,7 +15,7 @@ function Ce(r, e) {
     (i) => i.price_id == null && (i.discount_percent ?? 0) > 0
   ) ?? null);
 }
-function V(r, e, t = {}) {
+function $(r, e, t = {}) {
   const n = Ce(r, e);
   return n && Ie(n, t) ? n : null;
 }
@@ -1548,8 +1548,8 @@ function Ft({ block: r }) {
     ] })
   ] }, e.id)) }) : null;
 }
-function $t({ block: r }) {
-  const { t: e } = S(), t = r.title ?? e("pricing.money_back", "30-day money-back guarantee"), n = r.subtitle, i = (r.icon ?? "dollar_shield") !== "none", s = Vt(t);
+function Vt({ block: r }) {
+  const { t: e } = S(), t = r.title ?? e("pricing.money_back", "30-day money-back guarantee"), n = r.subtitle, i = (r.icon ?? "dollar_shield") !== "none", s = $t(t);
   return /* @__PURE__ */ u("div", { class: "flex flex-col items-center gap-1.5 border-b-1 pb-4 mb-1 border-gray-100", children: [
     /* @__PURE__ */ u("div", { class: "inline-flex items-center gap-2 text-[12px] text-gray-700", children: [
       i ? /* @__PURE__ */ o(Ht, {}) : null,
@@ -1562,7 +1562,7 @@ function $t({ block: r }) {
     n ? /* @__PURE__ */ o("span", { class: "text-center text-xs leading-relaxed text-gray-500", children: n }) : null
   ] });
 }
-function Vt(r) {
+function $t(r) {
   const e = r.match(/^(\d+[-\s]?days?)\s+(.+)$/i);
   return e ? { bold: e[1], rest: e[2] } : null;
 }
@@ -1693,7 +1693,7 @@ function Xt({ block: r, ctx: e }) {
             isLast: l === i.length - 1,
             isPopular: r.popular_price_id === a.id,
             popularLabel: s,
-            offer: V(e.bootstrap.offers, a.id, { readStart: N }),
+            offer: $(e.bootstrap.offers, a.id, { readStart: N }),
             selected: e.selectedPriceId === a.id,
             onSelect: () => {
               e.setSelectedPriceId(a.id), e.onAction("price_selected", { priceId: a.id, price: a });
@@ -1706,7 +1706,7 @@ function Xt({ block: r, ctx: e }) {
     );
   if (r.view === "horizontal") {
     const a = Math.min(i.length, 3), l = i.some(
-      (c) => (V(e.bootstrap.offers, c.id, { readStart: N })?.discount_percent ?? 0) > 0
+      (c) => ($(e.bootstrap.offers, c.id, { readStart: N })?.discount_percent ?? 0) > 0
     );
     return /* @__PURE__ */ o(
       "div",
@@ -1721,7 +1721,7 @@ function Xt({ block: r, ctx: e }) {
             price: c,
             isPopular: r.popular_price_id === c.id,
             popularLabel: s,
-            offer: V(e.bootstrap.offers, c.id, { readStart: N }),
+            offer: $(e.bootstrap.offers, c.id, { readStart: N }),
             reserveStrikeRow: l,
             selected: e.selectedPriceId === c.id,
             onSelect: () => {
@@ -1741,7 +1741,7 @@ function Xt({ block: r, ctx: e }) {
       role: "radiogroup",
       "aria-label": t("pricing.plans_aria", "Plans"),
       children: i.map((a) => {
-        const l = e.selectedPriceId === a.id, c = r.popular_price_id === a.id, d = V(e.bootstrap.offers, a.id, { readStart: N })?.discount_percent ?? null, { currency: g, amount: _, originalAmount: p } = ce(a, d);
+        const l = e.selectedPriceId === a.id, c = r.popular_price_id === a.id, d = $(e.bootstrap.offers, a.id, { readStart: N })?.discount_percent ?? null, { currency: g, amount: _, originalAmount: p } = ce(a, d);
         return /* @__PURE__ */ u(
           "button",
           {
@@ -2065,7 +2065,7 @@ const or = {
   current_session: Nt,
   features_list: Ft,
   tokenization_gate: ir,
-  guarantee_badge: $t,
+  guarantee_badge: Vt,
   offer_banner: Lt
 };
 function sr({ layout: r, bootstrap: e, onAction: t, auth: n, authSession: i, hasTopBanner: s }) {
@@ -2194,16 +2194,16 @@ function cr({
   }, [e, i, a, l]);
   const M = async (x) => {
     try {
-      const f = r.getCachedOffers?.() ?? null, w = f ? V(f, x, { readStart: N }) : null, B = await r.createCheckout({
+      const f = r.getCachedOffers?.() ?? null, w = f ? $(f, x, { readStart: N }) : null, B = await r.createCheckout({
         priceId: x,
         offerId: w?.id,
         ignoreActivePurchase: h === !0
       });
       if (n("checkout_started", { priceId: x, url: B.url, acquiring: B.acquiring }), typeof window > "u" || !B.url) return;
-      const $ = window.open(B.url, "_blank");
-      if ($) {
+      const V = window.open(B.url, "_blank");
+      if (V) {
         try {
-          $.opener = null;
+          V.opener = null;
         } catch {
         }
         y({ kind: "awaiting_payment", priceId: x, url: B.url });
@@ -2284,7 +2284,7 @@ function cr({
         n("error", new L("no_price", "No price selected"));
         return;
       }
-      const B = p.data.settings.checkout_mode ?? "guest", $ = r.auth?.getCachedSession() ?? null, ze = !!$ && !$.user.is_anonymous;
+      const B = p.data.settings.checkout_mode ?? "guest", V = r.auth?.getCachedSession() ?? null, ze = !!V && !V.user.is_anonymous;
       if (B === "preauth" && !!r.auth && !ze) {
         y({ kind: "auth_gate", pendingCheckout: { priceId: w } });
         return;
@@ -2557,15 +2557,14 @@ function _e({
   restored: e = !1
 }) {
   const { t } = S();
-  return /* @__PURE__ */ u("div", { class: "flex flex-col items-center gap-3 py-8 text-center", children: [
+  return /* @__PURE__ */ u("div", { class: "flex flex-col items-center gap-4 py-6 text-center", children: [
     /* @__PURE__ */ o(
       "div",
       {
-        class: "flex h-14 w-14 items-center justify-center rounded-full ring-8",
+        class: "flex h-14 w-14 items-center justify-center rounded-full",
         style: {
           background: "linear-gradient(135deg, #4ade80, #16a34a)",
           color: "#fff",
-          // emerald ring with low alpha for a halo effect
           boxShadow: "0 0 0 8px rgba(74,222,128,0.12), 0 8px 20px -6px rgba(22,163,74,0.45)"
         },
         "aria-hidden": "true",
@@ -2581,8 +2580,8 @@ function _e({
         ) })
       }
     ),
-    /* @__PURE__ */ o("p", { id: "pw-title", class: "mt-1 text-lg font-semibold tracking-tight text-gray-900", children: e ? t("modal.purchase_restored_title", "Subscription restored") : t("modal.purchase_success_title", "Payment received") }),
-    /* @__PURE__ */ o("p", { class: "text-sm leading-relaxed text-gray-500", children: e ? t(
+    /* @__PURE__ */ o("p", { id: "pw-title", class: "mt-1 text-3xl font-bold tracking-tight text-gray-900", children: e ? t("modal.purchase_restored_title", "Subscription restored") : t("modal.purchase_success_title", "Payment received") }),
+    /* @__PURE__ */ o("p", { class: "text-base leading-relaxed text-gray-600", children: e ? t(
       "modal.purchase_restored_subtitle",
       "Welcome back — your subscription is already active."
     ) : t("modal.purchase_success_subtitle", "Your subscription is now active.") }),
@@ -2591,12 +2590,12 @@ function _e({
       {
         type: "button",
         onClick: r,
-        class: "mt-3 rounded-xl px-5 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-px hover:brightness-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--pw-accent)]",
+        class: "pw-cta-shimmer relative mt-2 flex min-h-12 w-full items-center justify-center overflow-hidden rounded-3xl px-5 py-2 text-center text-base font-semibold leading-tight text-white transition-transform duration-150 active:scale-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--pw-accent)]",
         style: {
-          background: "linear-gradient(180deg, color-mix(in srgb, var(--pw-accent) 92%, white), var(--pw-accent))",
-          boxShadow: "0 1px 2px rgba(15,23,42,0.08), 0 8px 20px -6px color-mix(in srgb, var(--pw-accent) 50%, transparent)"
+          background: "linear-gradient(135deg, color-mix(in srgb, var(--pw-accent) 55%, white) 0%, var(--pw-accent) 55%, color-mix(in srgb, var(--pw-accent) 90%, black) 100%)",
+          boxShadow: "0 0 20px 0 color-mix(in srgb, var(--pw-accent) 25%, transparent), inset 0 0 8px 0 color-mix(in srgb, white 25%, transparent)"
         },
-        children: t("modal.continue", "Continue")
+        children: /* @__PURE__ */ o("span", { class: "relative z-10", children: t("modal.continue", "Continue") })
       }
     )
   ] });
@@ -2665,7 +2664,7 @@ const ae = {
 };
 let xr = class {
   constructor(e) {
-    this.handle = null, this.isOpen = !1, this.listeners = /* @__PURE__ */ new Map(), this.userUnsub = null, this.authUnsub = null, this.watcher = null, this.tracker = null, this.purchased = !1, this.trialStore = null, this.trialStoreConfig = null, this.lastTrialStatus = null, this.trialExpiredFired = !1, this.lastVisibility = null, this.currentState = ae, this.stateListeners = /* @__PURE__ */ new Set();
+    this.handle = null, this.isOpen = !1, this.listeners = /* @__PURE__ */ new Map(), this.userUnsub = null, this.authUnsub = null, this.watcher = null, this.tracker = null, this.purchased = !1, this.lastMountedView = null, this.trialStore = null, this.trialStoreConfig = null, this.lastTrialStatus = null, this.trialExpiredFired = !1, this.lastVisibility = null, this.currentState = ae, this.stateListeners = /* @__PURE__ */ new Set();
     const { auth: t, ownsAuth: n } = wr(e);
     this.auth = t, this.ownsAuth = n, this.billing = e.client ?? new qe({ ...e, auth: this.auth }), this.host = e.host, this.shadowMode = e.shadowMode ?? "closed", this.mountThenLoad = e.mountThenLoad ?? !0, this.inline = e.inline === !0, this.forceLocale = e.locale ?? null, this.userUnsub = this.billing.onUserChange((i) => {
       this.emit("userChange", i);
@@ -2689,14 +2688,15 @@ let xr = class {
       maxBufferSize: t.maxBufferSize,
       fetch: t.fetch,
       sendBeacon: t.sendBeacon
-    }), this.on("open", () => this.tracker?.track("paywall_opened")), this.on(
-      "ready",
-      (i) => this.tracker?.track("paywall_viewed", {
+    }), this.on("open", () => {
+      this.lastMountedView === "layout" && this.tracker?.track("paywall_opened");
+    }), this.on("ready", (i) => {
+      this.lastMountedView === "layout" && this.tracker?.track("paywall_viewed", {
         is_test_mode: i.settings.is_test_mode,
         prices_count: i.prices.length,
         offers_count: i.offers.length
-      })
-    ), this.on(
+      });
+    }), this.on(
       "price_selected",
       (i) => this.tracker?.track("price_selected", { price_id: i.priceId })
     ), this.on(
@@ -2714,7 +2714,9 @@ let xr = class {
     ), this.on(
       "purchase_failed",
       (i) => this.tracker?.track("purchase_failed", { reason: i.reason })
-    ), this.on("close", () => this.tracker?.track("paywall_closed")), this.on(
+    ), this.on("close", () => {
+      this.lastMountedView === "layout" && this.tracker?.track("paywall_closed");
+    }), this.on(
       "trial_blocked",
       (i) => this.tracker?.track("trial_blocked", {
         mode: i.mode,
@@ -3167,6 +3169,7 @@ let xr = class {
     return this.trialStore = typeof t == "function" ? t.call(this.billing, e) : Fe(this.billing.getStorage(), this.billing.paywallId, e), this.trialStore;
   }
   mountAndShow(e, t = {}) {
+    this.lastMountedView = e;
     const n = t.renew === !0, i = t.authMode, a = e === "auth" || e === "awaiting_payment" || e === "popup_blocked" ? t.checkoutPriceId ?? null : null, l = e === "awaiting_payment" || e === "popup_blocked" ? t.checkoutUrl ?? null : null;
     if (this.handle) {
       this.isOpen = !0, this.handle.update({
@@ -3900,7 +3903,7 @@ class Er {
         userMeta: e.userMeta
       });
       n.name = `pw-oauth-${s}`, n.location.replace(i), e.onPopupOpened?.();
-      const a = await $e(n, s), l = await this.transport.request("auth.oauthExchange", { state: s, code: a });
+      const a = await Ve(n, s), l = await this.transport.request("auth.oauthExchange", { state: s, code: a });
       return this.applySession("SIGNED_IN", l), l;
     } catch (i) {
       try {
@@ -3990,7 +3993,7 @@ class Ur {
       if (e.type === "response") {
         const t = this.pending.get(e.id);
         if (!t) return;
-        this.pending.delete(e.id), t.signal?.removeEventListener("abort", t.abortListener), e.ok ? t.resolve(e.result) : t.reject(Ve(e.error));
+        this.pending.delete(e.id), t.signal?.removeEventListener("abort", t.abortListener), e.ok ? t.resolve(e.result) : t.reject($e(e.error));
         return;
       }
       if (e.type === "event") {