@salla.sa/twilight-components 3.0.23 → 3.0.25

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

@@ -5,6 +5,51 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-slider2.js';
 
+/**
+ * One shared GET /coupons per page view (CHKM-594).
+ *
+ * Every `salla-cart-coupons` instance (a re-created drawer, a second mount) used to hit the
+ * endpoint on its own. They now share one in-flight/settled promise, keyed by everything the
+ * response varies on, so a currency / language / scope change automatically misses the cache.
+ */
+const requests = new Map();
+// Same source the request layer uses to send the scope (lib/request.js): config first, then storage.
+const requestKey = () => {
+    const scope = salla.config.get('store.scope', salla.storage.get('scope'));
+    return [
+        ...['store.id', 'user.currency_code', 'user.language_code'].map(key => String(salla.config.get(key, ''))),
+        String(scope?.id ?? ''),
+    ].join('|');
+};
+/** Drop every cached request, so the next load refetches. */
+const resetCouponsRequest = () => {
+    requests.clear();
+};
+// A coupon added or removed changes what the endpoint returns (and what is still applicable).
+// off-then-on keeps the subscription single however often (or after whatever reset) this runs.
+const invalidateOnCouponChange = () => {
+    ['cart::coupon.added', 'cart::coupon.deleted'].forEach(eventName => {
+        salla.event.off(eventName, resetCouponsRequest);
+        salla.event.on(eventName, resetCouponsRequest);
+    });
+};
+const getCouponsRequest = () => {
+    invalidateOnCouponChange();
+    const key = requestKey();
+    let request = requests.get(key);
+    if (!request) {
+        request = salla.api.request('coupons');
+        requests.set(key, request);
+        const failed = request;
+        // A failed request must never stick: let the next caller retry.
+        failed.catch(() => {
+            if (requests.get(key) === failed)
+                requests.delete(key);
+        });
+    }
+    return request;
+};
+
 const sallaCartCouponsCss = "/*!twlt*/@charset \"UTF-8\";.s-cart-coupons-card--applied{cursor:default}.s-cart-coupons-card--applied:hover{transform:none}.s-cart-coupons-card--applied .s-cart-coupons-top-section,.s-cart-coupons-card--applied .s-cart-coupons-bottom-section,.s-cart-coupons-card--applied .s-cart-coupons-divider{border-color:#d1d5db;border-color:color-mix(in srgb, var(--color-primary, #004d5a) 40%, transparent)}.s-cart-coupons-card--applied .s-cart-coupons-bottom-section{background:rgba(0, 0, 0, 0.04);background:color-mix(in srgb, var(--color-primary, #004d5a) 8%, transparent)}.s-cart-coupons-card--applied::before,.s-cart-coupons-card--applied::after{border-color:#d1d5db;border-color:color-mix(in srgb, var(--color-primary, #004d5a) 40%, transparent)}.s-cart-coupons-card--applied .s-cart-coupons-action{display:inline-flex;align-items:center;gap:10px}.s-cart-coupons-card--applied .s-cart-coupons-action{font-size:10px;font-weight:600;color:#4b5563}.s-cart-coupons-card-applied-label{color:#4b5563;color:var(--color-primary-dark, var(--color-primary, #4b5563))}.s-cart-coupons-card--applied .s-cart-coupons-action{min-width:0;max-width:100%}.s-cart-coupons-card-applied-label,.s-cart-coupons-card-remove{overflow:hidden;text-overflow:ellipsis}.s-cart-coupons-card--applied .s-cart-coupons-action,.s-cart-coupons-card--applied .s-cart-coupons-card-remove{pointer-events:auto}.s-cart-coupons-card-remove{flex:none;font-size:inherit;font-weight:inherit;color:#6b7280;background:transparent;border:0;padding:0;cursor:pointer;transition:color 0.15s ease}.s-cart-coupons-card-remove:hover{color:var(--color-danger, #ef4444)}.s-cart-coupons-card-remove:disabled{opacity:0.5;cursor:not-allowed}.s-cart-coupons-card--minimal .s-cart-coupons-bottom-section{justify-content:flex-end}.visible{visibility:visible}.fixed{position:fixed}.shrink{flex-shrink:1}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.form-input{height:2.5rem;width:100%;border-radius:0.375rem;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));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}.form-input:focus{border-color:var(--color-primary);--tw-ring-color:transparent}.form-input:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.form-input:focus:is(.dark *){border-color:var(--color-primary)}@media (min-width: 640px){.form-input{font-size:0.875rem;line-height:1.25rem}}.s-cart-coupons-wrapper{display:block;width:100%;padding-top:1.25rem;padding-bottom:1.25rem}.s-cart-coupons-input-section{margin-bottom:0.625rem}.s-cart-coupons-coupon-label{margin-bottom:0.625rem;display:block;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.s-cart-coupons-coupon-input-container{position:relative;display:flex;align-items:stretch}.s-cart-coupons-coupon-input-container .form-input{height:auto;flex:1 1 0%}.s-cart-coupons-coupon-input-container .form-input:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem;border-top-right-radius:0px !important;border-bottom-right-radius:0px !important;border-right-width:0px}.s-cart-coupons-coupon-input-container .form-input:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;border-top-left-radius:0px !important;border-bottom-left-radius:0px !important;border-left-width:0px}.s-cart-coupons-coupon-input-container .form-input:focus{position:relative;z-index:10}.s-cart-coupons-coupon-button:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;border-top-left-radius:0px;border-bottom-left-radius:0px}.s-cart-coupons-coupon-button:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem;border-top-right-radius:0px;border-bottom-right-radius:0px}.s-cart-coupons-coupon-button-remove:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;border-top-left-radius:0px !important;border-bottom-left-radius:0px !important}.s-cart-coupons-coupon-button-remove:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem;border-top-right-radius:0px !important;border-bottom-right-radius:0px !important}.s-cart-coupons-coupon-button-apply:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-right-radius:0.5rem !important;border-bottom-right-radius:0.5rem !important;border-top-left-radius:0px !important;border-bottom-left-radius:0px !important}.s-cart-coupons-coupon-button-apply:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-left-radius:0.5rem !important;border-bottom-left-radius:0.5rem !important;border-top-right-radius:0px !important;border-bottom-right-radius:0px !important}.s-cart-coupons-coupon-error{margin-top:0.5rem;display:block;font-size:10px;line-height:1rem;--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-cart-coupons-slider{width:100%;overflow:hidden;padding-left:0.375rem;padding-right:0.375rem}.s-cart-coupons-card{position:relative;cursor:pointer;overflow:hidden;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-cart-coupons-card:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.s-cart-coupons-card:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.s-cart-coupons-disabled{cursor:not-allowed;opacity:0.5}.s-cart-coupons-disabled:hover{transform:none;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-cart-coupons-top-section{display:flex;height:60px;flex-direction:row;align-items:center;justify-content:space-between;border-top-left-radius:0.75rem;border-top-right-radius:0.75rem;border-width:1px;border-bottom-width:0px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding-top:1rem;padding-bottom:1rem;padding-left:0.75rem;padding-right:0.75rem}.s-cart-coupons-discount-values{display:flex;flex-direction:column;align-items:flex-start}.s-cart-coupons-discount-values .s-cart-coupons-main-amount{display:flex;align-items:center;gap:0.25rem;white-space:nowrap;font-size:1.25rem;line-height:1.75rem;font-weight:900;line-height:1;--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.s-cart-coupons-discount-values .s-cart-coupons-secondary-info{margin:0px;font-size:10px;line-height:1rem}.s-cart-coupons-code{font-size:10px;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-cart-coupons-divider{position:relative;z-index:10;margin:0px;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-cart-coupons-bottom-section{display:flex;min-height:44px;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-right-radius:0.75rem;border-bottom-left-radius:0.75rem;border-width:1px;border-top-width:0px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.75rem;padding-right:0.75rem}.s-cart-coupons-terms{display:flex;flex-direction:column;align-items:flex-start}.s-cart-coupons-terms .s-cart-coupons-expiry{margin:0px;font-size:10px;line-height:16px;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.s-cart-coupons-terms .s-cart-coupons-minimum{margin:0px;font-size:10px;line-height:16px;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.s-cart-coupons-terms .s-cart-coupons-expiry.s-cart-coupons-expiry-warning{font-weight:500;--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.s-cart-coupons-action{cursor:pointer;white-space:nowrap;border-width:0px;background-color:transparent;padding:0px;font-size:9px;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));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:150ms}.s-cart-coupons-action:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.s-cart-coupons-slide-one-fourth{width:calc(75% - 10px);min-width:200px !important;padding-left:5px !important;padding-right:5px !important;padding-top:2px !important}@media (min-width: 1024px){.s-cart-coupons-slide-one-fourth{width:calc(40% - 10px) !important}}.s-cart-coupons-card:before{pointer-events:none;position:absolute;right:-10px;top:60px;z-index:20;height:1.25rem;width:1.25rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-cart-coupons-card:is(.dark *):before{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.s-cart-coupons-card:after{pointer-events:none;position:absolute;left:-10px;top:60px;z-index:20;height:1.25rem;width:1.25rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-cart-coupons-card:is(.dark *):after{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.s-cart-coupons-coupon-input-container .form-input.s-coupon-input-error{--tw-shadow:0 0 0 3px rgba(239,68,68,0.1) !important;--tw-shadow-colored:0 0 0 3px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important}";
 
 const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupons extends HTMLElement {
@@ -42,6 +87,8 @@ const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupo
         // (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) => {
@@ -136,7 +183,7 @@ const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupo
         // 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
@@ -155,6 +202,7 @@ const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupo
         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);
@@ -188,10 +236,44 @@ const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupo
         }
         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;
@@ -628,7 +710,7 @@ const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupo
     }
     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" }),
@@ -639,7 +721,7 @@ const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupo
             // 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
@@ -648,7 +730,7 @@ const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupo
                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))))))));
     }
     get host() { return this; }
     static get style() { return sallaCartCouponsCss; }

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

@@ -40,9 +40,13 @@ const SallaCartItemOffers$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartIt
         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',
         ];