@vio-live/web-sdk 0.7.0 → 0.9.0

package/dist/{chunk-GPMDZSC2.js → chunk-OTL6QM3G.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-4ZEN4J7I.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-SNIF67UB.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -69,6 +69,8 @@ var VioTokens = {
     sm: "2px",
     md: "4px",
     lg: "8px",
+    /** Sheet/drawer corners — the largest surface radius in the checkout. */
+    xl: "16px",
     full: "9999px"
   }
 };
@@ -117,6 +119,7 @@ var VIO_TOKENS_CSS = `
     --vio-radius-sm: ${VioTokens.radius.sm};
     --vio-radius-md: ${VioTokens.radius.md};
     --vio-radius-lg: ${VioTokens.radius.lg};
+    --vio-radius-xl: ${VioTokens.radius.xl};
   }
 `;
 function injectTokens() {
@@ -140,7 +143,15 @@ var THEME_KEY_TO_CSS_VAR = {
   colorBorder: "--vio-color-border",
   colorBorderDefault: "--vio-color-border-default",
   fontSerif: "--vio-font-serif",
-  fontSans: "--vio-font-sans"
+  fontSans: "--vio-font-sans",
+  radiusSm: "--vio-radius-sm",
+  radiusMd: "--vio-radius-md",
+  radiusLg: "--vio-radius-lg",
+  radiusXl: "--vio-radius-xl",
+  spaceSm: "--vio-space-sm",
+  spaceMd: "--vio-space-md",
+  spaceLg: "--vio-space-lg",
+  spaceXl: "--vio-space-xl"
 };
 function applyVioTheme(overrides, target = typeof document !== "undefined" ? document.documentElement : null) {
   if (!target) return;
@@ -2827,6 +2838,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.kustomMountedOrderId = null;
     this.qliroMounting = false;
     this.qliroMountedOrderId = null;
+    this.walleyMounting = false;
+    this.walleyMountedOrderId = null;
     this.stripeLoading = false;
     this.vippsLoading = false;
     this.form = {
@@ -2920,7 +2933,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       max-height: 88vh;
       max-width: 460px;
       margin: 0 auto;
-      border-radius: 16px 16px 0 0;
+      border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
       box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
     }
     .modal.as-drawer .handle {
@@ -2934,7 +2947,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       width: 40px;
       height: 4px;
       background: var(--vio-color-border, #e5e5e5);
-      border-radius: 2px;
+      border-radius: var(--vio-radius-sm, 2px);
     }
 
     /* Express (Apple Pay-style): right-side drawer, like the cart. Slides in
@@ -2971,7 +2984,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         max-width: none;
         height: 92vh;
         transform: translateY(100%);
-        border-radius: 16px 16px 0 0;
+        border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
       }
       :host([open]) .modal.as-side { transform: translateY(0); }
     }
@@ -2986,7 +2999,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       max-width: 440px;
       height: auto;
       max-height: 88vh;
-      border-radius: 16px;
+      border-radius: var(--vio-radius-xl, 16px);
       box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.4);
       transform: translate(-50%, -50%) scale(0.96);
       opacity: 0;
@@ -3002,7 +3015,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         left: 0;
         width: 100%;
         max-width: none;
-        border-radius: 16px 16px 0 0;
+        border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
         transform: translateY(100%) scale(1);
         opacity: 1;
       }
@@ -3016,7 +3029,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       .modal {
         top: auto;
         height: 92vh;
-        border-radius: 16px 16px 0 0;
+        border-radius: var(--vio-radius-xl, 16px) var(--vio-radius-xl, 16px) 0 0;
         box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
       }
       .handle {
@@ -3030,7 +3043,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         width: 40px;
         height: 4px;
         background: var(--vio-color-border, #e5e5e5);
-        border-radius: 2px;
+        border-radius: var(--vio-radius-sm, 2px);
       }
     }
 
@@ -3186,7 +3199,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       flex: 1 1 auto;
       padding: 8px 12px;
       border: 1px solid var(--vio-color-border, #ddd);
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
       background: #fff;
       font-size: 13px;
       cursor: pointer;
@@ -3210,7 +3223,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     .ship-opt {
       display: flex; align-items: center; justify-content: space-between; gap: 12px;
       padding: 12px 14px; border: 1px solid var(--vio-color-border, #ddd);
-      border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit;
+      border-radius: var(--vio-radius-lg, 8px); background: #fff; cursor: pointer; font-family: inherit;
       text-align: left;
     }
     .ship-opt.active {
@@ -3227,7 +3240,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       padding: 12px 16px;
       background: #fdecea;
       border: 1px solid var(--vio-color-accent, #c14a3b);
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
       font-size: 13px;
       color: var(--vio-color-accent, #c14a3b);
       text-align: center;
@@ -3237,7 +3250,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       padding: 12px 16px;
       background: #f4f4f2;
       border: 1px solid var(--vio-color-border, #ddd);
-      border-radius: 8px;
+      border-radius: var(--vio-radius-lg, 8px);
       font-size: 13px;
       color: var(--vio-color-text, #1a1a1a);
       text-align: center;
@@ -3618,6 +3631,63 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         this.cleanReturnQueryParams(["checkout_id", "payment_processor"]);
         return;
       }
+      if (urlParams.get("payment_processor") === "WALLEY" && checkoutId) {
+        if (!this.checkoutState) {
+          const spIdToUse = sponsorId || [...Vio.cart.getAllCarts().keys()][0] || 0;
+          if (spIdToUse) {
+            try {
+              Vio.checkout.open(spIdToUse);
+            } catch {
+            }
+          }
+        }
+        try {
+          Vio.checkout.selectPaymentMethod("walley");
+        } catch {
+        }
+        this.open = true;
+        this.paymentNotice = "Bekrefter betalingen\u2026";
+        try {
+          const order = await Vio.checkout.getWalleyOrder(
+            checkoutId,
+            this.checkoutState?.sponsorId
+          );
+          this.paymentNotice = null;
+          if (order?.html_snippet) {
+            this.walleyMountedOrderId = order.order_id;
+            await this.updateComplete;
+            const container = this.renderRoot?.querySelector(
+              "#vio-walley-checkout-container"
+            );
+            if (container) {
+              Vio.checkout.renderKustomSnippet(container, order.html_snippet);
+            }
+            if (order.status === "PurchaseCompleted") {
+              this.dispatchEvent(
+                new CustomEvent("vio:payment-success", {
+                  detail: { method: "walley", orderId: order.order_id },
+                  bubbles: true,
+                  composed: true
+                })
+              );
+              const spId = this.checkoutState?.sponsorId;
+              if (spId) {
+                try {
+                  Vio.cart.clearSponsorCart(spId);
+                } catch {
+                }
+              }
+            }
+          }
+        } catch (err) {
+          this.paymentNotice = null;
+          if (typeof console !== "undefined") {
+            console.warn("[VioCheckout] Walley confirmation read failed:", err);
+          }
+        }
+        this.cleanReturnQueryParams(["checkout_id", "payment_processor"]);
+        return;
+      }
       if (vioMethod === "klarna" && typeof sessionStorage !== "undefined" && sessionStorage.getItem("vio.klarna.pending.v1")) {
         this.cleanReturnQueryParams(["vio_payment", "vio_method", "vio_sponsor", "checkout_id"]);
         return;
@@ -3714,6 +3784,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     void this.mountKlarnaIfNeeded();
     void this.mountKustomIfNeeded();
     void this.mountQliroIfNeeded();
+    void this.mountWalleyIfNeeded();
   }
   close() {
     this.open = false;
@@ -3958,6 +4029,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       Vio.checkout.selectPaymentMethod("qliro");
       return;
     }
+    if (method === "walley") {
+      Vio.checkout.selectPaymentMethod("walley");
+      return;
+    }
     if (method === "vipps") {
       const email = String(this.form.email ?? "").trim();
       if (!email || !email.includes("@")) {
@@ -4063,6 +4138,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         return "Kustom";
       case "qliro":
         return "Qliro";
+      case "walley":
+        return "Walley";
       case "vipps":
         return "Vipps";
       case "stripe":
@@ -4075,7 +4152,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   /** True for methods that complete via a separate sheet/widget, not the CTA. */
   isExpressMethod(method) {
-    return method === "apple-pay" || method === "klarna" || method === "kustom" || method === "qliro";
+    return method === "apple-pay" || method === "klarna" || method === "kustom" || method === "qliro" || method === "walley";
   }
   orderTotal() {
     const s = this.checkoutState;
@@ -4233,6 +4310,70 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       </div>
     `;
   }
+  /**
+   * Mount the Walley embedded checkout once it's the chosen method. Unlike
+   * Kustom/Qliro, success is signalled INLINE by Walley's own DOM event
+   * (`walleyCheckoutPurchaseCompleted`) — no redirect round-trip needed, so
+   * we handle it here instead of only in the confirmation-return branch.
+   */
+  async mountWalleyIfNeeded() {
+    if (!this.open || !this.checkoutState) return;
+    if (this.checkoutState.paymentMethod !== "walley") return;
+    if (this.walleyMounting) return;
+    const container = this.renderRoot?.querySelector(
+      "#vio-walley-checkout-container"
+    );
+    if (!container) return;
+    if (this.walleyMountedOrderId && container.childElementCount > 0) return;
+    this.walleyMounting = true;
+    container.innerHTML = "";
+    try {
+      const order = await Vio.checkout.mountWalleyCheckout(
+        container,
+        this.checkoutState.sponsorId,
+        () => {
+          this.dispatchEvent(
+            new CustomEvent("vio:payment-success", {
+              detail: { method: "walley", orderId: order.order_id },
+              bubbles: true,
+              composed: true
+            })
+          );
+          const spId = this.checkoutState?.sponsorId;
+          if (spId) {
+            try {
+              Vio.cart.clearSponsorCart(spId);
+            } catch {
+            }
+          }
+        }
+      );
+      this.walleyMountedOrderId = order.order_id;
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Walley mount failed:", err);
+      }
+      this.paymentError = `Kunne ikke laste Walley: ${err instanceof Error ? err.message : String(err)}`;
+      Vio.checkout.selectPaymentMethod("");
+    } finally {
+      this.walleyMounting = false;
+    }
+  }
+  unmountWalley() {
+    this.walleyMountedOrderId = null;
+    const container = this.renderRoot?.querySelector(
+      "#vio-walley-checkout-container"
+    );
+    if (container) container.innerHTML = "";
+  }
+  renderWalleyPanel() {
+    return html`
+      <div class="walley-panel">
+        ${this.walleyMounting ? html`<div style="font-size:13px;opacity:0.7;padding:8px 0;">Laster Walley…</div>` : ""}
+        <div id="vio-walley-checkout-container"></div>
+      </div>
+    `;
+  }
   renderKlarnaPanel() {
     const currency = this.checkoutState?.currency || getGlobalCurrency();
     return html`
@@ -4342,7 +4483,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     const method = this.checkoutState?.paymentMethod;
     const showCompleteCta = !!method && !this.isExpressMethod(method);
     const isVipps = method === "vipps";
-    const isKustom = method === "kustom" || method === "qliro";
+    const isKustom = method === "kustom" || method === "qliro" || method === "walley";
     return html`
           ${!isVipps && !isKustom ? html`
           <section class="section">
@@ -4474,6 +4615,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.unmountKlarna();
       this.unmountKustom();
       this.unmountQliro();
+      this.unmountWalley();
       Vio.checkout.selectPaymentMethod("");
     }}
                     >
@@ -4484,6 +4626,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${method === "klarna" ? this.renderKlarnaPanel() : ""}
                   ${method === "kustom" ? this.renderKustomPanel() : ""}
                   ${method === "qliro" ? this.renderQliroPanel() : ""}
+                  ${method === "walley" ? this.renderWalleyPanel() : ""}
                   ${method === "stripe" ? html`
                         <button
                           class="payment-btn primary complete-cta"
@@ -4568,6 +4711,11 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Qliro</span>
                           </button>
                         ` : ""}
+                    ${this.methodEnabled("walley") ? html`
+                          <button class="payment-btn" @click=${() => this.onPay("walley")}>
+                            <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Walley</span>
+                          </button>
+                        ` : ""}
                     ${this.methodEnabled("vipps") ? html`
                           <button class="payment-btn" @click=${() => this.onPay("vipps")}>
                             <span style="color:#ff5b24;font-weight:800;font-size:17px;letter-spacing:-0.02em">vipps</span>
@@ -4686,6 +4834,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], _VioCheckout.prototype, "qliroMounting", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "walleyMounting", 2);
 __decorateClass([
   state()
 ], _VioCheckout.prototype, "stripeLoading", 2);
@@ -4714,5 +4865,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-GPMDZSC2.js.map
-//# sourceMappingURL=chunk-GPMDZSC2.js.map
+//# sourceMappingURL=chunk-OTL6QM3G.js.map
+//# sourceMappingURL=chunk-OTL6QM3G.js.map