@vio-live/web-sdk 0.5.1 → 0.7.0

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

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-7Q4MJ5NQ.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';
 
@@ -2823,6 +2823,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 = {
@@ -3499,6 +3503,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 +3712,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 +3950,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 +4059,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 +4075,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 +4147,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 +4342,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 +4461,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 +4472,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 +4482,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 +4558,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 +4680,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 +4714,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-LRXVUOEG.js.map
-//# sourceMappingURL=chunk-LRXVUOEG.js.map
+//# sourceMappingURL=chunk-GPMDZSC2.js.map
+//# sourceMappingURL=chunk-GPMDZSC2.js.map