@vio-live/web-sdk 0.24.0 → 0.26.0

package/dist/{chunk-N6U65DWG.js → chunk-A3LN5JEM.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, normalizeScope, campaignCandidates } from './chunk-AXJKB2CW.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, toCampaignId, getGlobalCurrency, ensureVippsButton, formatPrice, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, gatewayHasBuyerRef, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, normalizeScope, campaignCandidates } from './chunk-5KWICUME.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -226,7 +226,7 @@ var SlotRegistration = class {
     this.unregister();
     if (!next) return;
     try {
-      this.release = typeof Vio.registerSlot !== "function" ? null : next.campaignId !== void 0 ? Vio.registerSlot(next.id, next.displayName, next.campaignId) : Vio.registerSlot(next.id, next.displayName);
+      this.release = typeof Vio.registerSlot !== "function" ? null : next.campaignId !== void 0 ? Vio.registerSlot(next.id, next.displayName, next.campaignId, { kind: this.kind }) : Vio.registerSlot(next.id, next.displayName, { kind: this.kind });
       this.identity = next;
     } catch {
       this.release = null;
@@ -339,6 +339,7 @@ var VioProduct = class extends LitElement {
     this.vioCampaign = "";
     this.vioContentId = "";
     this.vioContentTitle = "";
+    this.componentTemplateId = "";
     this.slotRegistration = new SlotRegistration(this, "card");
     this.hasVariants = false;
     this.variants = void 0;
@@ -383,6 +384,7 @@ var VioProduct = class extends LitElement {
     }) : { slot: this.effectiveSlot || void 0 };
     return {
       ...base,
+      componentTemplateId: this.componentTemplateId || "product-card",
       ...this.vioContentId ? { contentId: this.vioContentId } : {},
       ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
     };
@@ -581,11 +583,15 @@ var VioProduct = class extends LitElement {
           // The host's sponsor-id wins; without one, the slot's campaign sponsor.
           sponsorId: this.sponsorId || this.sponsorFromAttribution(),
           // The host adds to the cart: pass this through as `origin` so the
-          // purchase is attributed to this place and campaign.
+          // purchase is attributed to this place, campaign, kind of element
+          // and page — the cart keeps it and Commerce receives it (ADR-0035).
           origin: {
             campaignId: attribution.campaignId,
             slot: attribution.slot,
-            contentId: attribution.contentId
+            contentId: attribution.contentId,
+            componentKind: attribution.componentTemplateId,
+            contentUrl: attribution.contentUrl,
+            contentTitle: attribution.contentTitle
           }
         }
       })
@@ -675,6 +681,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "vio-content-title" })
 ], VioProduct.prototype, "vioContentTitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "component-template-id" })
+], VioProduct.prototype, "componentTemplateId", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "has-variants" })
 ], VioProduct.prototype, "hasVariants", 2);
@@ -753,6 +762,7 @@ var VioProductCarousel = class extends LitElement {
     }) : { slot: this.effectiveSlot || void 0 };
     return {
       ...base,
+      componentTemplateId: "product-carousel",
       ...this.vioContentId ? { contentId: this.vioContentId } : {},
       ...this.vioContentTitle ? { contentTitle: this.vioContentTitle } : {}
     };
@@ -994,7 +1004,6 @@ var VioProductCarousel = class extends LitElement {
         this,
         {
           sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
-          componentTemplateId: "product-carousel",
           // The slot is the real location id; the label only stands in for it.
           locationId: this.effectiveSlot || this.label || void 0,
           ...this.attribution()
@@ -1022,7 +1031,6 @@ var VioProductCarousel = class extends LitElement {
       Vio.analytics.track("view_item_list", {
         context: {
           sponsorId: sponsorId > 0 ? sponsorId : void 0,
-          componentTemplateId: "product-carousel",
           locationId: this.effectiveSlot || this.label || void 0,
           ...this.attribution()
         },
@@ -1081,6 +1089,7 @@ var VioProductCarousel = class extends LitElement {
             image-url=${img}
             ?has-variants=${(p.variants?.length ?? 0) > 1}
             .vioSlot=${this.effectiveSlot}
+            .componentTemplateId=${"product-carousel"}
             .vioCampaign=${this.effectiveCampaignId !== void 0 ? String(this.effectiveCampaignId) : ""}
             .vioContentId=${this.vioContentId}
             .vioContentTitle=${this.vioContentTitle}
@@ -1519,6 +1528,7 @@ var VioProductDetail = class extends LitElement {
     const contentTitle = this.fromCard && this.eventContentTitle || this.vioContentTitle;
     return {
       ...base,
+      componentTemplateId: "product-detail",
       ...contentId ? { contentId } : {},
       ...contentTitle ? { contentTitle } : {}
     };
@@ -2055,7 +2065,6 @@ var VioProductDetail = class extends LitElement {
         Vio.analytics.track("view_item", {
           context: {
             sponsorId: this.sponsorId > 0 ? Number(this.sponsorId) : void 0,
-            componentTemplateId: "product-detail",
             ...this.attribution()
           },
           commerce: {
@@ -2378,14 +2387,14 @@ var VioProductDetail = class extends LitElement {
     const sponsor = Vio.bootstrapCache?.primarySponsor;
     const secondaries = Vio.bootstrapCache?.secondarySponsors ?? [];
     const sponsorName = sponsor?.id === this.sponsorId ? sponsor.name : secondaries.find((s) => s.id === this.sponsorId)?.name;
-    const { campaignId, slot, contentId } = this.attribution();
+    const { campaignId, slot, contentId, componentTemplateId, contentUrl, contentTitle } = this.attribution();
     Vio.cart.addProduct({
       product: this.product,
       sponsorId: this.sponsorId,
       sponsorName,
       quantity: this.quantity,
       variantId: variant?.id,
-      origin: { campaignId, slot, contentId }
+      origin: { campaignId, slot, contentId, componentKind: componentTemplateId, contentUrl, contentTitle }
     });
     return variant?.id;
   }
@@ -3353,11 +3362,12 @@ var VioCart = class extends LitElement {
       for (const sponsorId of [...this.carts.keys()]) {
         Vio.cart.clearSponsorCart(sponsorId);
       }
+      const buyerRef = buyerRefOf({ result });
       this.dispatchEvent(
         new CustomEvent("vio:payment-success", {
           bubbles: true,
           composed: true,
-          detail: { method: "apple-pay", result }
+          detail: { method: "apple-pay", result, ...buyerRef ? { buyerRef } : {} }
         })
       );
     });
@@ -3927,6 +3937,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : friendlyPaymentError(detail.error, detail.method);
       this.open = true;
     };
+    /** Payment events still waiting for their buyer reference: settled early (without it) when the page hides or the element leaves. */
+    this.pendingSuccessEmits = /* @__PURE__ */ new Set();
   }
   /** A payment is being started or confirmed right now: the overlay must not close under it. */
   get paymentInFlight() {
@@ -4617,13 +4629,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.orderConfirmed = true;
       this.open = true;
       void this.fillOrderNumber(checkoutId, sponsorId);
-      this.dispatchEvent(
-        new CustomEvent("vio:payment-success", {
-          bubbles: true,
-          composed: true,
-          detail: { method: vioMethod, sponsorId, orderId: checkoutId }
-        })
-      );
+      void this.emitPaymentSuccess({ method: vioMethod, sponsorId, orderId: checkoutId }, checkoutId, sponsorId);
     } else if (outcome === "duplicate") {
       this.paymentError = CART_PAID_MESSAGE;
       this.open = true;
@@ -4965,6 +4971,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.unmountKlarna();
     this.unmountNexi();
     this.unmountAdyen();
+    for (const settle of [...this.pendingSuccessEmits]) settle();
     super.disconnectedCallback();
   }
   updated(changed) {
@@ -5476,18 +5483,122 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.confirmedMethod = method;
     this.orderConfirmed = true;
     this.open = true;
-    this.dispatchEvent(
-      new CustomEvent("vio:payment-success", {
+    void this.fillOrderNumber(checkoutId, sponsorId);
+    void this.emitPaymentSuccess(
+      { method, sponsorId, result, checkoutId },
+      checkoutId,
+      sponsorId,
+      () => Vio.cart.clearSponsorCart(sponsorId)
+    );
+  }
+  static {
+    /** Longest `vio:payment-success` waits for the checkout's buyer reference, and when it asks a second time. */
+    this.BUYER_REF_WAIT_MS = 2500;
+  }
+  static {
+    this.BUYER_REF_RETRY_AT_MS = 1200;
+  }
+  /**
+   * `vio:payment-success` for the host and analytics — with the buyer
+   * reference (`buyerRef`: shopcart's keyed hash of the email → analytics
+   * `buyer_id`) when the checkout can say it. An emitter whose own answer
+   * carried it (Apple Pay, Klarna native) sends at once; the others (a
+   * redirect return, Stripe / Adyen / Nexi in the drawer, a provider's
+   * receipt) ask the checkout — at once and, while it has neither order nor
+   * reference, again at 1.2 s, since a webhook may write the checkout a
+   * moment after the redirect — within 2.5 s, and
+   * send without it when the answer is late or empty. Nothing is asked when
+   * it cannot help (the gateway has no `buyer_ref` yet; a confirmation that
+   * already answered). Only the event waits — the screen is already the
+   * confirmation — and not past the page: when the page hides (`pagehide`,
+   * `visibilitychange`) or the element leaves, the event goes out at once
+   * without the reference. Exactly one event per call. `afterwards` runs
+   * right after the event, so a path keeps the order it always had (the cart
+   * is cleared after the event).
+   */
+  async emitPaymentSuccess(detail, checkoutId, sponsorId, afterwards) {
+    let done = false;
+    const finish = (buyerRef) => {
+      if (done) return;
+      done = true;
+      const event = new CustomEvent("vio:payment-success", {
         bubbles: true,
         composed: true,
-        // `checkoutId` is Vio's own reference for the purchase — what the
-        // redirect path already sends as `orderId`; analytics falls back to it
-        // when the provider's result carries no order id.
-        detail: { method, sponsorId, result, checkoutId }
-      })
-    );
-    Vio.cart.clearSponsorCart(sponsorId);
-    void this.fillOrderNumber(checkoutId, sponsorId);
+        detail: buyerRef ? { ...detail, buyerRef } : detail
+      });
+      this.dispatchEvent(event);
+      if (!this.isConnected && typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("vio:payment-success", { detail: event.detail }));
+      }
+      try {
+        afterwards?.();
+      } catch {
+      }
+    };
+    const known = buyerRefOf(detail);
+    if (known || !checkoutId || !this.shouldAskBuyerRef(detail)) {
+      finish(known);
+      return;
+    }
+    const settleEarly = () => finish();
+    const onVisibility = () => {
+      if (typeof document !== "undefined" && document.visibilityState === "hidden") settleEarly();
+    };
+    this.pendingSuccessEmits.add(settleEarly);
+    window.addEventListener("pagehide", settleEarly);
+    document.addEventListener("visibilitychange", onVisibility);
+    try {
+      finish(await this.askBuyerRef(checkoutId, sponsorId, () => done));
+    } catch {
+      finish();
+    } finally {
+      this.pendingSuccessEmits.delete(settleEarly);
+      window.removeEventListener("pagehide", settleEarly);
+      document.removeEventListener("visibilitychange", onVisibility);
+    }
+  }
+  /** Whether asking the checkout for the buyer reference can still help. */
+  shouldAskBuyerRef(detail) {
+    if (typeof Vio.checkout.getOrderReference !== "function") return false;
+    if (!gatewayHasBuyerRef()) return false;
+    if ((detail.method === "apple-pay" || detail.method === "klarna") && detail.result) return false;
+    return true;
+  }
+  /**
+   * The buyer reference of a checkout: asked at once and, when that answer
+   * failed or has neither the reference nor an order yet (the webhook has not
+   * written the checkout), again at 1.2 s — all within 2.5 s. An order
+   * without a reference is a settled answer: the backend has none, asking
+   * again cannot help. `undefined` when the time is up, when the answer
+   * stopped mattering (`stopped()`) or on failure.
+   */
+  async askBuyerRef(checkoutId, sponsorId, stopped) {
+    const started = Date.now();
+    const remaining = () => _VioCheckout.BUYER_REF_WAIT_MS - (Date.now() - started);
+    let deadline;
+    const timeUp = new Promise((resolve) => {
+      deadline = setTimeout(() => resolve(null), _VioCheckout.BUYER_REF_WAIT_MS);
+    });
+    try {
+      for (const at of [0, _VioCheckout.BUYER_REF_RETRY_AT_MS]) {
+        const wait = Math.min(at - (Date.now() - started), remaining());
+        if (wait > 0) await Promise.race([new Promise((resolve) => setTimeout(resolve, wait)), timeUp]);
+        if (stopped() || remaining() <= 0) return void 0;
+        try {
+          const reference = await Promise.race([
+            Vio.checkout.getOrderReference(checkoutId, sponsorId || void 0),
+            timeUp
+          ]);
+          if (reference === null) return void 0;
+          if (reference.buyerRef) return reference.buyerRef;
+          if (reference.orderNumber !== null) return void 0;
+        } catch {
+        }
+      }
+      return void 0;
+    } finally {
+      clearTimeout(deadline);
+    }
   }
   static {
     /** Waits between asks for the Vio order number: the order is often born a
@@ -5638,19 +5749,14 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.confirmedMethod = method;
     this.open = true;
     const checkoutId = returnCheckoutId || this.checkoutState?.checkoutId;
-    this.dispatchEvent(
-      new CustomEvent("vio:payment-success", {
-        bubbles: true,
-        composed: true,
-        detail: { method, sponsorId, result, checkoutId }
-      })
-    );
-    if (sponsorId) {
-      try {
-        Vio.cart.clearSponsorCart(sponsorId);
-      } catch {
+    void this.emitPaymentSuccess(
+      { method, sponsorId, result, checkoutId },
+      checkoutId,
+      sponsorId,
+      () => {
+        if (sponsorId) Vio.cart.clearSponsorCart(sponsorId);
       }
-    }
+    );
   }
   /** Back from the payment page, asking whether it was paid — and nothing
    * else on screen while we do. */
@@ -7105,5 +7211,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-N6U65DWG.js.map
-//# sourceMappingURL=chunk-N6U65DWG.js.map
+//# sourceMappingURL=chunk-A3LN5JEM.js.map
+//# sourceMappingURL=chunk-A3LN5JEM.js.map