@vio-live/web-sdk 0.4.1 → 0.5.0

package/dist/{chunk-V5ZQG2H5.js → chunk-5CKG3F56.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice, KLARNA_SHIPPING_OPTIONS } from './chunk-NP2KCM7X.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-HNQG56SD.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -460,6 +460,13 @@ var VioProductCarousel = class extends LitElement {
     this.fetched = null;
     this.isLoading = false;
     this.fetchError = "";
+    // ── Analytics (auto) ──────────────────────────────────────────────
+    // component_impression on the contract rule (≥50% visible ≥1s, once per
+    // session) + view_item_list with the rendered products. No-ops unless
+    // Vio.analytics.start() ran.
+    this.unobserveImpression = null;
+    this.impressed = false;
+    this.listTracked = false;
   }
   static {
     this.styles = css`
@@ -608,10 +615,16 @@ var VioProductCarousel = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.observeForAnalytics();
     if (this.productRefs.trim() || this.productIds.trim()) {
       void this.autoFetch();
     }
   }
+  disconnectedCallback() {
+    this.unobserveImpression?.();
+    this.unobserveImpression = null;
+    super.disconnectedCallback();
+  }
   updated(changed) {
     const propChanged = changed.has("productRefs") || changed.has("productIds") || changed.has("commerceKey") || changed.has("sponsorId");
     if (propChanged && (this.productRefs.trim() || this.productIds.trim())) {
@@ -656,12 +669,61 @@ var VioProductCarousel = class extends LitElement {
         const product = lookup.get(`${sponsorId}:${productId}`);
         return product ? { product, sponsorId } : null;
       }).filter((x) => x !== null);
+      this.maybeTrackList();
     } catch (err) {
       this.fetchError = err instanceof Error ? err.message : String(err);
     } finally {
       this.isLoading = false;
     }
   }
+  observeForAnalytics() {
+    if (this.unobserveImpression) return;
+    try {
+      this.unobserveImpression = Vio.analytics.observeImpression(
+        this,
+        {
+          sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+          componentTemplateId: "product-carousel",
+          locationId: this.label || void 0
+        },
+        {
+          key: `carousel:${this.label || this.productIds || this.productRefs || "default"}`,
+          onImpression: () => {
+            this.impressed = true;
+            this.maybeTrackList();
+          }
+        }
+      );
+    } catch {
+    }
+  }
+  /** view_item_list needs BOTH the viewport dwell and loaded products —
+   * whichever lands last fires it (once). */
+  maybeTrackList() {
+    if (!this.impressed || this.listTracked) return;
+    const entries = this.fetched ?? [];
+    if (entries.length === 0) return;
+    this.listTracked = true;
+    try {
+      Vio.analytics.track("view_item_list", {
+        context: {
+          sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+          componentTemplateId: "product-carousel",
+          locationId: this.label || void 0
+        },
+        commerce: {
+          items: entries.map(({ product, sponsorId }) => ({
+            productId: product.id,
+            name: product.title,
+            price: Number(product.price?.amount_incl_taxes ?? product.price?.amount) || void 0
+          })),
+          currency: entries[0]?.product.price?.currency_code
+        },
+        props: this.label ? { list_name: this.label } : void 0
+      });
+    } catch {
+    }
+  }
   parseRefs(raw) {
     return raw.split(",").map((pair) => pair.trim()).filter((s) => s.length > 0).map((pair) => {
       const [sidStr, pidStr] = pair.split(":");
@@ -1313,6 +1375,31 @@ var VioProductDetail = class extends LitElement {
     }
     this.optMapCache = /* @__PURE__ */ new WeakMap();
     this.product = products?.[0] ?? null;
+    if (this.product) {
+      try {
+        const price = Number(
+          this.product.price?.amount_incl_taxes ?? this.product.price?.amount
+        );
+        Vio.analytics.track("view_item", {
+          context: {
+            sponsorId: this.sponsorId > 0 ? Number(this.sponsorId) : void 0,
+            componentTemplateId: "product-detail"
+          },
+          commerce: {
+            items: [
+              {
+                productId: this.product.id,
+                name: this.product.title,
+                price: Number.isFinite(price) ? price : void 0
+              }
+            ],
+            value: Number.isFinite(price) ? price : void 0,
+            currency: this.product.price?.currency_code
+          }
+        });
+      } catch {
+      }
+    }
     if (!this.product) {
       this.fetchError = "Fant ikke produktet.";
     }
@@ -2361,6 +2448,9 @@ var VioCart = class extends LitElement {
   }
   show() {
     this.open = true;
+    this.dispatchEvent(
+      new CustomEvent("vio:open-cart", { bubbles: true, composed: true })
+    );
     void this.loadAvailablePaymentMethods();
   }
   /** Which payment buttons to render — backend-configured per sponsor.
@@ -2730,7 +2820,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.klarnaCategories = [];
     this.klarnaSelectedCat = "";
     this.klarnaAuthorizing = false;
-    this.selectedShipping = KLARNA_SHIPPING_OPTIONS.find((o) => o.preselected)?.id ?? KLARNA_SHIPPING_OPTIONS[0]?.id ?? "";
+    this.selectedShipping = "";
     this.availableShippingsList = [];
     this.availableMethods = null;
     this.stripeLoading = false;
@@ -3080,10 +3170,13 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       gap: 12px;
       margin-top: 4px;
     }
+    /* Klarna remembers the customer's preferred payment_method_category
+     * server-side across sessions/browsers — exposing a category-switcher
+     * chip UI on top of that just confuses users. Hidden per Alan's
+     * 2026-08-18 cross-browser investigation; the switching logic (onKlarnaCategory)
+     * stays wired for when/if this becomes configurable again. */
     .klarna-cats {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
+      display: none !important;
     }
     .klarna-cat {
       flex: 1 1 auto;
@@ -3496,7 +3589,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     super.disconnectedCallback();
   }
   updated(changed) {
-    if (changed.has("open") && this.open && this.availableShippingsList.length === 0) {
+    if (changed.has("open") && this.open && this.items.length > 0 && this.availableShippingsList.length === 0) {
       void this.loadAvailableShippings();
     }
     void this.mountKlarnaIfNeeded();
@@ -3508,7 +3601,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   show() {
     this.open = true;
-    if (this.availableShippingsList.length === 0) {
+    if (this.items.length > 0 && this.availableShippingsList.length === 0) {
       void this.loadAvailableShippings();
     }
   }
@@ -3516,6 +3609,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   async loadAvailableShippings() {
     const spId = this.checkoutState?.sponsorId;
     if (!spId) return;
+    if (this.items.length === 0) return;
     if (this.loadingShippings) return;
     this.loadingShippings = true;
     this.shippingsAttempted = true;
@@ -3602,6 +3696,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     if (!this.klarnaAvailable || !this.open || !this.checkoutState) return;
     if (this.checkoutState.paymentMethod !== "klarna" && !this.express) return;
     if (this.klarnaMounting) return;
+    if (this.items.length > 0 && this.availableShippingsList.length === 0 && !this.shippingsAttempted) {
+      await this.loadAvailableShippings();
+    }
     const amount = this.checkoutState.subtotal;
     if (this.klarnaHandle && this.klarnaMountedAmount === amount && this.klarnaMountedShipping === this.selectedShipping) {
       return;
@@ -3649,9 +3746,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.klarnaSelectedCat = "";
     this.klarnaAuthorizing = false;
   }
-  /** Shippings in effect: backend per-supplier when loaded, static otherwise. */
+  /** Shippings in effect: backend per-supplier when loaded. */
   get shippingList() {
-    return this.availableShippingsList.length > 0 ? this.availableShippingsList : KLARNA_SHIPPING_OPTIONS;
+    return this.availableShippingsList;
   }
   /** Selected shipping option (express flow). */
   get shippingOption() {
@@ -3679,8 +3776,11 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   /** Switch the Klarna widget to a different payment_method_category. */
   async onKlarnaCategory(identifier) {
-    if (!this.klarnaHandle || this.klarnaSelectedCat === identifier) return;
+    if (!this.klarnaHandle) return;
     this.klarnaSelectedCat = identifier;
+    if (typeof console !== "undefined") {
+      console.log("[VioCheckout] User selected payment_method_category:", identifier);
+    }
     try {
       await this.klarnaHandle.load(identifier);
     } catch (err) {
@@ -3695,8 +3795,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.paymentError = null;
     this.paymentNotice = null;
     this.klarnaAuthorizing = true;
+    const cat = this.klarnaSelectedCat || this.klarnaHandle.selected || "pay_now";
+    if (typeof console !== "undefined") {
+      console.log("[VioCheckout] Authorizing Klarna with payment_method_category:", cat);
+    }
     try {
-      await this.klarnaHandle.authorize();
+      await this.klarnaHandle.authorize(cat);
     } finally {
       this.klarnaAuthorizing = false;
     }
@@ -4370,5 +4474,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-V5ZQG2H5.js.map
-//# sourceMappingURL=chunk-V5ZQG2H5.js.map
+//# sourceMappingURL=chunk-5CKG3F56.js.map
+//# sourceMappingURL=chunk-5CKG3F56.js.map