@salla.sa/twilight-components 3.0.23 → 3.0.25

package/dist/collection/components/salla-cart-coupons/salla-cart-coupons.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host } from "@stencil/core";
+import { getCouponsRequest } from "../../shared/coupons-request";
 export class SallaCartCoupons {
     constructor() {
         this.availableCoupons = [];
@@ -35,6 +36,8 @@ export class SallaCartCoupons {
         // (Salla.config.get('store.settings.cart.multi_coupon')) — a stable store-level setting,
         // exactly like cart.apply_coupon_enabled — not from the per-cart payload or localStorage.
         this.multiCoupon = false;
+        // True from scheduling until the first (visible) load starts.
+        this.awaitingVisibility = false;
         this.isHandlingInternalError = false;
         // Store cart event listener references for cleanup
         this.cartUpdatedHandler = (cartData) => {
@@ -129,7 +132,7 @@ export class SallaCartCoupons {
         // apply_coupon_enabled), so it never depends on the per-cart payload or localStorage.
         this.multiCoupon = !!salla.config.get('store.settings.cart.multi_coupon');
         //then set your logic here to avoid any race condition
-        this.loadCouponsData(); // Load async without blocking render - shows empty until loaded
+        this.scheduleCouponsLoad(); // Load async without blocking render - shows empty until loaded
         // Synchronous first-paint seed from the storage cart so an applied coupon shows on the very
         // first render instead of flashing empty → applied while the async server fetch is in flight
         // (the old loadCartTotal read storage synchronously). loadCartTotal() then reconciles with the
@@ -148,6 +151,7 @@ export class SallaCartCoupons {
         salla.event.on('cart::coupon.deleted', this.couponDeletedHandler);
     }
     disconnectedCallback() {
+        this.stopObservingVisibility();
         // Input events are bound via JSX (onInput/onKeyUp) — Stencil cleans those up. Only the
         // global cart event listeners need explicit teardown here.
         salla.event.off('cart::updated', this.cartUpdatedHandler);
@@ -181,10 +185,44 @@ export class SallaCartCoupons {
         }
         return selectedCoupon;
     }
+    /**
+     * CHKM-594: the cart page needs the coupons straight away; anywhere else (a theme's cart
+     * drawer, often display:none until opened) wait until the host is first visible, so a page
+     * the shopper never opens the cart on makes no request. No IntersectionObserver → fetch now.
+     */
+    scheduleCouponsLoad() {
+        if (salla.url.is_page('cart') || typeof IntersectionObserver === 'undefined') {
+            this.loadCouponsData();
+            return;
+        }
+        this.awaitingVisibility = true;
+        this.observeVisibility();
+    }
+    observeVisibility() {
+        this.visibilityObserver = new IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+                this.awaitingVisibility = false;
+                this.stopObservingVisibility();
+                this.loadCouponsData();
+            }
+        });
+        this.visibilityObserver.observe(this.host);
+    }
+    stopObservingVisibility() {
+        this.visibilityObserver?.disconnect();
+        this.visibilityObserver = undefined;
+    }
+    // A host that was removed and re-attached before it was first visible must resume watching:
+    // componentWillLoad (the only scheduler) does not run again for the same element.
+    connectedCallback() {
+        if (this.awaitingVisibility && !this.visibilityObserver) {
+            this.observeVisibility();
+        }
+    }
     async loadCouponsData() {
         try {
-            // Load coupons from API
-            const response = await salla.api.request('coupons');
+            // Load coupons from API (shared across instances, see coupons-request.ts)
+            const response = await getCouponsRequest();
             const raw = response?.data;
             const coupons = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : []);
             this.availableCoupons = coupons;
@@ -621,7 +659,7 @@ export class SallaCartCoupons {
     }
     render() {
         const couponRow = this.couponRow();
-        return (h(Host, { key: 'edf77b08d11d50a1083e1b2c2970cc4af4163d80' }, h("div", { key: 'a5e3ed9302fe64136f572c9a89df529ac139cca4', class: "s-cart-coupons-wrapper" }, h("div", { key: 'f09279d5ccd96b1ffec3fa1a4fe280e322c624a8', class: "s-cart-coupons-input-section" }, h("label", { key: 'fa0b750c99686ad2e196f720de6f27c0f84eb41b', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '96e892d3f6685dbd9fd901a6e5602a520eea7ecc', class: "s-cart-coupons-coupon-input-container" }, this.multiCoupon ? [
+        return (h(Host, { key: '59daca187b980f5ea675aea6d3617bf891bff32f' }, h("div", { key: '0e27f04a648ef5d4b4a9f0273e128a4658d5e97d', class: "s-cart-coupons-wrapper" }, h("div", { key: '3090b6c9e39069382ca517162d1861788b642e33', class: "s-cart-coupons-input-section" }, h("label", { key: 'fac50b4ab6835519849b1a5b00fcb190eabf20dd', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: 'cd96cc8bdbb32b14dc1dfaa166a87aa0c2a37372', class: "s-cart-coupons-coupon-input-container" }, this.multiCoupon ? [
             // Multi-coupon: input stays active to append more codes; applied coupons render
             // as removable chips below.
             h("input", { type: "text", id: "coupon-input", name: "coupon", class: `form-input ${this.couponError ? 's-coupon-input-error' : ''}`, placeholder: salla.lang.get('pages.cart.coupon_placeholder'), value: this.couponInputValue, disabled: this.isApplying, onInput: this.onInput, onKeyUp: this.onKeyUp, "aria-label": salla.lang.get('pages.cart.apply_coupon'), key: "coupon-input" }),
@@ -632,7 +670,7 @@ export class SallaCartCoupons {
             // a new code can only be entered after removing. Reuses the existing master classes.
             h("input", { type: "text", id: "coupon-input", name: "coupon", class: `form-input ${this.couponError ? 's-coupon-input-error' : ''}`, placeholder: salla.lang.get('pages.cart.coupon_placeholder'), value: this.couponInputValue, disabled: !!this.currentCoupon || this.isApplying, onInput: this.onInput, onKeyUp: this.onKeyUp, "aria-label": salla.lang.get('pages.cart.apply_coupon'), key: "coupon-input" }),
             h("salla-button", { ref: el => this.couponButtonRef = el, class: `s-cart-coupons-coupon-button ${this.currentCoupon ? 's-cart-coupons-coupon-button-remove' : 's-cart-coupons-coupon-button-apply'}`, color: this.currentCoupon ? 'danger' : 'primary', loading: this.isApplying, "loader-position": "center", onClick: () => this.handleCouponButtonClick(), key: "apply-button" }, this.currentCoupon ? (h("i", { class: "sicon-cancel" })) : (h("span", null, salla.lang.get('pages.cart.save_coupon')))),
-        ]), this.couponError && (h("span", { key: '1e2bb51904486fe5e0cb3f842965a7b330ef7e91', class: "s-cart-coupons-coupon-error" }, this.couponError))), couponRow.length > 0 && (h("salla-slider", { type: "carousel", showControls: false, class: "s-cart-coupons-slider",
+        ]), this.couponError && (h("span", { key: 'eeb7bc0ad60797930af60fd476c74af748f91f72', class: "s-cart-coupons-coupon-error" }, this.couponError))), couponRow.length > 0 && (h("salla-slider", { type: "carousel", showControls: false, class: "s-cart-coupons-slider",
             /* salla-slider hands its slot children to Swiper, which MOVES them out of the
                `slot="items"` div into its own .swiper-wrapper. Stencil then patches against a
                tree that no longer exists where it expects, so a slide added to a list that
@@ -641,7 +679,7 @@ export class SallaCartCoupons {
                against dynamic custom components inside it. Keying on the exact code list
                makes Stencil discard and remount the slider whenever the set changes, so
                Swiper re-initialises over the full, correct set of slides. */
-            key: couponRow.map(entry => entry.code).join('|') }, h("div", { key: 'c83306bce90ca9a62b13b39718d9941dcc6da498', slot: "items" }, couponRow.map(entry => this.renderCouponCard(entry))))))));
+            key: couponRow.map(entry => entry.code).join('|') }, h("div", { key: 'f095c16d9e93a19087a0125600286f3c75527671', slot: "items" }, couponRow.map(entry => this.renderCouponCard(entry))))))));
     }
     static get is() { return "salla-cart-coupons"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-cart-item-offers/salla-cart-item-offers.js

@@ -17,9 +17,13 @@ export class SallaCartItemOffers {
         this.receivedOffer = '';
         this.discountAmountLabel = '';
         this.showMoreOffers = '';
+        // `item.added` / `item.deleted` too: adding or removing ANOTHER line (e.g. from the cart offer's
+        // free product picker) moves the cart across an offer tier, which changes this line's offers.
         this.cartUpdateEvents = [
             'cart::latest.fetched',
             'cart::item.updated',
+            'cart::item.added',
+            'cart::item.deleted',
             'cart::coupon.added',
             'cart::coupon.deleted',
         ];

package/dist/collection/components/salla-conditional-offer/salla-conditional-offer.css

@@ -424,6 +424,145 @@
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
   text-decoration-line: line-through;
 }
+.s-conditional-offer-gifts {
+  margin-top: 0.75rem;
+  width: 100%;
+  min-width: 0px;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  padding: 0.75rem;
+}
+.s-conditional-offer-picker {
+  display: flex;
+  width: 100%;
+  min-width: 0px;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.s-conditional-offer-picker-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.s-conditional-offer-picker-counter {
+  display: inline-flex;
+  height: 2.25rem;
+  width: 2.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-color: var(--color-primary);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
+  color: var(--color-primary-dark);
+}
+.s-conditional-offer-picker-title {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  color: var(--color-primary-dark);
+}
+.s-conditional-offer-picker-list {
+  margin: 0px;
+  display: flex;
+  list-style-type: none;
+  gap: 0.75rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-behavior: smooth;
+  padding: 0px;
+  padding-bottom: 0.25rem;
+  scrollbar-width: thin;
+}
+.s-conditional-offer-picker-card {
+  display: flex;
+  width: 9rem;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 0.375rem;
+  text-align: start;
+}
+.s-conditional-offer-picker-thumb {
+  display: inline-flex;
+  height: 7rem;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  font-size: 1.5rem;
+  line-height: 2rem;
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+.s-conditional-offer-picker-image {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+.s-conditional-offer-picker-name {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
+}
+.s-conditional-offer-picker-prices {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.s-conditional-offer-picker-price-regular {
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
+}
+.s-conditional-offer-picker-actions {
+  margin-top: auto;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.375rem;
+}
+.s-conditional-offer-picker-add {
+  display: inline-flex;
+  height: 2.25rem;
+  flex: 1 1 0%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  border-color: var(--color-primary);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  color: var(--color-primary-dark);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.s-conditional-offer-picker-add:hover {
+  background-color: var(--color-primary);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
 .s-conditional-offer-tooltip {
   position: absolute;
   top: calc(100% + 0.75rem);