@vio-live/web-sdk 0.6.0 → 0.8.0

package/dist/{chunk-6X225SGW.js → chunk-YNKOGPTE.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-MOKVTWQW.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-4ZEN4J7I.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;
@@ -2823,6 +2834,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.selectedShipping = "";
     this.availableShippingsList = [];
     this.availableMethods = null;
+    this.kustomMounting = false;
+    this.kustomMountedOrderId = null;
+    this.qliroMounting = false;
+    this.qliroMountedOrderId = null;
     this.stripeLoading = false;
     this.vippsLoading = false;
     this.form = {
@@ -2916,7 +2931,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 {
@@ -2930,7 +2945,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
@@ -2967,7 +2982,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); }
     }
@@ -2982,7 +2997,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;
@@ -2998,7 +3013,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;
       }
@@ -3012,7 +3027,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 {
@@ -3026,7 +3041,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);
       }
     }
 
@@ -3182,7 +3197,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;
@@ -3206,7 +3221,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 {
@@ -3223,7 +3238,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;
@@ -3233,7 +3248,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;
@@ -3499,6 +3514,121 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       const sponsorId = Number(urlParams.get("vio_sponsor") || 0);
       const checkoutId = urlParams.get("checkout_id") || "";
       if (!vioPayment && !checkoutId) return;
+      const kustomOrderId = urlParams.get("order_id") || "";
+      if (urlParams.get("payment_processor") === "KUSTOM" && kustomOrderId) {
+        if (!this.checkoutState) {
+          const spIdToUse = sponsorId || [...Vio.cart.getAllCarts().keys()][0] || 0;
+          if (spIdToUse) {
+            try {
+              Vio.checkout.open(spIdToUse);
+            } catch {
+            }
+          }
+        }
+        try {
+          Vio.checkout.selectPaymentMethod("kustom");
+        } catch {
+        }
+        this.open = true;
+        this.paymentNotice = "Bekrefter betalingen\u2026";
+        try {
+          const order = await Vio.checkout.getKustomOrder(
+            kustomOrderId,
+            this.checkoutState?.sponsorId
+          );
+          this.paymentNotice = null;
+          if (order?.html_snippet) {
+            this.kustomMountedOrderId = order.order_id;
+            await this.updateComplete;
+            const container = this.renderRoot?.querySelector(
+              "#vio-kustom-checkout-container"
+            );
+            if (container) {
+              Vio.checkout.renderKustomSnippet(container, order.html_snippet);
+            }
+            if (order.status === "checkout_complete") {
+              this.dispatchEvent(
+                new CustomEvent("vio:payment-success", {
+                  detail: { method: "kustom", 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] Kustom confirmation read failed:", err);
+          }
+        }
+        this.cleanReturnQueryParams(["order_id", "payment_processor"]);
+        return;
+      }
+      if (urlParams.get("payment_processor") === "QLIRO" && 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("qliro");
+        } catch {
+        }
+        this.open = true;
+        this.paymentNotice = "Bekrefter betalingen\u2026";
+        try {
+          const order = await Vio.checkout.getQliroOrder(
+            checkoutId,
+            this.checkoutState?.sponsorId
+          );
+          this.paymentNotice = null;
+          if (order?.html_snippet) {
+            this.qliroMountedOrderId = order.order_id;
+            await this.updateComplete;
+            const container = this.renderRoot?.querySelector(
+              "#vio-qliro-checkout-container"
+            );
+            if (container) {
+              Vio.checkout.renderKustomSnippet(container, order.html_snippet);
+            }
+            if (order.status === "Completed") {
+              this.dispatchEvent(
+                new CustomEvent("vio:payment-success", {
+                  detail: { method: "qliro", 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] Qliro 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;
@@ -3593,6 +3723,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       void this.loadAvailableShippings();
     }
     void this.mountKlarnaIfNeeded();
+    void this.mountKustomIfNeeded();
+    void this.mountQliroIfNeeded();
   }
   close() {
     this.open = false;
@@ -3829,6 +3961,14 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       void this.onApplePay();
       return;
     }
+    if (method === "kustom") {
+      Vio.checkout.selectPaymentMethod("kustom");
+      return;
+    }
+    if (method === "qliro") {
+      Vio.checkout.selectPaymentMethod("qliro");
+      return;
+    }
     if (method === "vipps") {
       const email = String(this.form.email ?? "").trim();
       if (!email || !email.includes("@")) {
@@ -3930,6 +4070,10 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         return "Apple Pay";
       case "klarna":
         return "Klarna";
+      case "kustom":
+        return "Kustom";
+      case "qliro":
+        return "Qliro";
       case "vipps":
         return "Vipps";
       case "stripe":
@@ -3942,7 +4086,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";
+    return method === "apple-pay" || method === "klarna" || method === "kustom" || method === "qliro";
   }
   orderTotal() {
     const s = this.checkoutState;
@@ -4014,6 +4158,92 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     `;
   }
   /** Klarna Payments widget panel: shipping + category chips + widget + pay button. */
+  /** Mount the Kustom embedded checkout once it's the chosen method. */
+  async mountKustomIfNeeded() {
+    if (!this.open || !this.checkoutState) return;
+    if (this.checkoutState.paymentMethod !== "kustom") return;
+    if (this.kustomMounting) return;
+    const container = this.renderRoot?.querySelector(
+      "#vio-kustom-checkout-container"
+    );
+    if (!container) return;
+    if (this.kustomMountedOrderId && container.childElementCount > 0) return;
+    this.kustomMounting = true;
+    container.innerHTML = "";
+    try {
+      const order = await Vio.checkout.mountKustomCheckout(
+        container,
+        this.checkoutState.sponsorId
+      );
+      this.kustomMountedOrderId = order.order_id;
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Kustom mount failed:", err);
+      }
+      this.paymentError = `Kunne ikke laste Kustom: ${err instanceof Error ? err.message : String(err)}`;
+      Vio.checkout.selectPaymentMethod("");
+    } finally {
+      this.kustomMounting = false;
+    }
+  }
+  unmountKustom() {
+    this.kustomMountedOrderId = null;
+    const container = this.renderRoot?.querySelector(
+      "#vio-kustom-checkout-container"
+    );
+    if (container) container.innerHTML = "";
+  }
+  renderKustomPanel() {
+    return html`
+      <div class="kustom-panel">
+        ${this.kustomMounting ? html`<div style="font-size:13px;opacity:0.7;padding:8px 0;">Laster Kustom…</div>` : ""}
+        <div id="vio-kustom-checkout-container"></div>
+      </div>
+    `;
+  }
+  /** Mount the Qliro embedded checkout once it's the chosen method. */
+  async mountQliroIfNeeded() {
+    if (!this.open || !this.checkoutState) return;
+    if (this.checkoutState.paymentMethod !== "qliro") return;
+    if (this.qliroMounting) return;
+    const container = this.renderRoot?.querySelector(
+      "#vio-qliro-checkout-container"
+    );
+    if (!container) return;
+    if (this.qliroMountedOrderId && container.childElementCount > 0) return;
+    this.qliroMounting = true;
+    container.innerHTML = "";
+    try {
+      const order = await Vio.checkout.mountQliroCheckout(
+        container,
+        this.checkoutState.sponsorId
+      );
+      this.qliroMountedOrderId = order.order_id;
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[VioCheckout] Qliro mount failed:", err);
+      }
+      this.paymentError = `Kunne ikke laste Qliro: ${err instanceof Error ? err.message : String(err)}`;
+      Vio.checkout.selectPaymentMethod("");
+    } finally {
+      this.qliroMounting = false;
+    }
+  }
+  unmountQliro() {
+    this.qliroMountedOrderId = null;
+    const container = this.renderRoot?.querySelector(
+      "#vio-qliro-checkout-container"
+    );
+    if (container) container.innerHTML = "";
+  }
+  renderQliroPanel() {
+    return html`
+      <div class="qliro-panel">
+        ${this.qliroMounting ? html`<div style="font-size:13px;opacity:0.7;padding:8px 0;">Laster Qliro…</div>` : ""}
+        <div id="vio-qliro-checkout-container"></div>
+      </div>
+    `;
+  }
   renderKlarnaPanel() {
     const currency = this.checkoutState?.currency || getGlobalCurrency();
     return html`
@@ -4123,8 +4353,9 @@ 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";
     return html`
-          ${!isVipps ? html`
+          ${!isVipps && !isKustom ? html`
           <section class="section">
             <div class="section-label">Steg 1</div>
             <h3 class="section-heading">Leveringsadresse</h3>
@@ -4241,7 +4472,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
               ` : ""}
 
           <section class="section">
-            <div class="section-label">${isVipps ? "Betaling" : "Steg 2"}</div>
+            <div class="section-label">${isVipps || isKustom ? "Betaling" : "Steg 2"}</div>
             ${method ? html`
                   <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
                     <h3 class="section-heading" style="margin:0;">
@@ -4252,6 +4483,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                       style="background:none; border:none; color:var(--vio-color-accent, #c14a3b); text-decoration:underline; font-size:13px; cursor:pointer;"
                       @click=${() => {
       this.unmountKlarna();
+      this.unmountKustom();
+      this.unmountQliro();
       Vio.checkout.selectPaymentMethod("");
     }}
                     >
@@ -4260,6 +4493,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   </div>
 
                   ${method === "klarna" ? this.renderKlarnaPanel() : ""}
+                  ${method === "kustom" ? this.renderKustomPanel() : ""}
+                  ${method === "qliro" ? this.renderQliroPanel() : ""}
                   ${method === "stripe" ? html`
                         <button
                           class="payment-btn primary complete-cta"
@@ -4334,6 +4569,16 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                             Klarna
                           </button>
                         ` : ""}
+                    ${this.methodEnabled("kustom") ? html`
+                          <button class="payment-btn" @click=${() => this.onPay("kustom")}>
+                            <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Kustom</span>
+                          </button>
+                        ` : ""}
+                    ${this.methodEnabled("qliro") ? html`
+                          <button class="payment-btn" @click=${() => this.onPay("qliro")}>
+                            <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Qliro</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>
@@ -4446,6 +4691,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], _VioCheckout.prototype, "availableMethods", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "kustomMounting", 2);
+__decorateClass([
+  state()
+], _VioCheckout.prototype, "qliroMounting", 2);
 __decorateClass([
   state()
 ], _VioCheckout.prototype, "stripeLoading", 2);
@@ -4474,5 +4725,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-6X225SGW.js.map
-//# sourceMappingURL=chunk-6X225SGW.js.map
+//# sourceMappingURL=chunk-YNKOGPTE.js.map
+//# sourceMappingURL=chunk-YNKOGPTE.js.map