@salla.sa/twilight-components 2.14.594 → 2.14.595

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

@@ -47,12 +47,23 @@ export class SallaCartCoupons {
             //   - Single-coupon (flag off): any payload carrying `coupon` re-syncs the input, so a
             //     server-side invalidation (e.g. cart drops below the coupon minimum) that emits
             //     `coupon: ''` clears the stale code instead of leaving it stuck until a reload.
+            //     A null `coupon` is dropped from the payload, so a cart holding only a cashback
+            //     activation code carries `cashback_code` alone — accept that too.
             const carriesCoupons = this.multiCoupon
                 ? Array.isArray(cartData?.coupons)
-                : (cartData && 'coupon' in cartData);
+                : (cartData && ('coupon' in cartData || 'cashback_code' in cartData));
             if (carriesCoupons) {
                 this.syncAppliedFromCart(cartData);
             }
+            else if (this.multiCoupon && cartData && 'cashback_code' in cartData) {
+                // Multi-coupon had a blind spot: a cart whose only code is a cashback activation code
+                // has no `coupons` array to carry (forApi drops a null `coupon`), so the chip never
+                // appeared on a cart::updated that wasn't itself an add/remove. It cannot go through
+                // syncAppliedFromCart though — that RE-SEEDS from the payload, and a summary-only
+                // update would then drop every stacked coupon, which is exactly what the guard above
+                // exists to prevent. So merge the one chip instead of rebuilding the list.
+                this.mergeCashbackCodeChip(cartData.cashback_code);
+            }
             // Clear error when cart updates
             this.couponError = '';
         };
@@ -92,6 +103,24 @@ export class SallaCartCoupons {
         this.onInput = (event) => {
             this.couponInputValue = event.target.value;
         };
+        /**
+         * Seed the chip list and the active coupon from a cart object.
+         * Multi-coupon: use the cart's `coupons` array (survives refresh).
+         * Single-coupon (default): use the single `coupon` code.
+         * A cashback activation code (`cashback_code`) is shown like an applied coupon; removing it
+         * goes through the same coupon delete calls, which clear it on the server.
+         */
+        /**
+         * Add the cashback activation code to the existing chips without touching the rest.
+         *
+         * Additive only, on purpose: removal already flows through the explicit remove path, which
+         * refreshes from the server with a real `coupons` array. Inferring removal here is not
+         * possible anyway — nothing marks which chip is the cashback one — and guessing would risk
+         * deleting a real coupon.
+         */
+        /** The cashback code this component merged into the chips, so a later update can replace
+         *  or clear exactly that one without touching a real coupon. */
+        this.mergedCashbackCode = '';
     }
     async componentWillLoad() {
         await Salla.onReady();
@@ -225,7 +254,7 @@ export class SallaCartCoupons {
             // cart-details nests the cart under data.cart (same shape addCoupon/deleteCoupon read).
             const cart = response?.data?.cart ?? response?.data ?? response;
             if (cart && typeof cart === 'object' &&
-                (Array.isArray(cart.coupons) || 'coupon' in cart)) {
+                (Array.isArray(cart.coupons) || 'coupon' in cart || 'cashback_code' in cart)) {
                 this.applyCart(cart);
                 return;
             }
@@ -244,17 +273,41 @@ export class SallaCartCoupons {
         this.syncCartTotal(cart);
         this.syncAppliedFromCart(cart);
     }
-    /**
-     * Seed the chip list and the active coupon from a cart object.
-     * Multi-coupon: use the cart's `coupons` array (survives refresh).
-     * Single-coupon (default): use the single `coupon` code.
-     */
+    mergeCashbackCodeChip(code) {
+        const next = (code || '').trim();
+        const prev = (this.mergedCashbackCode || '').trim();
+        if (next.toLowerCase() === prev.toLowerCase())
+            return;
+        // Drop the code WE merged last time before adding the new one. Purely additive
+        // merging left a stale chip behind whenever the code was replaced or cleared, so a
+        // shopper could see two cashback chips, or one for a code no longer on the cart.
+        // Only ever removes the tracked value — never a real coupon, which we have no way to
+        // distinguish otherwise. An ABSENT `cashback_code` key still means "no information",
+        // not "removed", and never reaches here.
+        const kept = prev
+            ? this.appliedCoupons.filter(c => (c || '').toLowerCase() !== prev.toLowerCase())
+            : [...this.appliedCoupons];
+        const already = kept.some(c => (c || '').toLowerCase() === next.toLowerCase());
+        this.appliedCoupons = next && !already ? [...kept, next] : kept;
+        this.mergedCashbackCode = next;
+        if (prev && this.currentCoupon.toLowerCase() === prev.toLowerCase()) {
+            this.currentCoupon = next;
+        }
+        else if (next) {
+            this.currentCoupon = this.currentCoupon || next;
+        }
+        this.buildMergedCoupons();
+    }
     syncAppliedFromCart(cart) {
-        this.currentCoupon = cart?.coupon || '';
+        this.currentCoupon = cart?.coupon || cart?.cashback_code || '';
+        // Keep the merge tracker in step with the rebuilt list. Without this the tracker went
+        // stale the moment a full payload rebuilt appliedCoupons, so the NEXT cashback-only
+        // update compared against a value no longer on the cart — leaving the old chip,
+        // appending a replacement beside it, or skipping a valid code.
+        this.mergedCashbackCode = (cart?.cashback_code || '').trim();
         if (this.multiCoupon) {
-            this.appliedCoupons = Array.isArray(cart?.coupons)
-                ? cart.coupons.filter(Boolean)
-                : (this.currentCoupon ? [this.currentCoupon] : []);
+            const coupons = Array.isArray(cart?.coupons) ? cart.coupons : [cart?.coupon];
+            this.appliedCoupons = [...coupons, cart?.cashback_code].filter(Boolean);
             // The payload sends `applied_coupons` keyed BY CODE, which is the useful shape for a
             // lookup; a plain list is accepted too so neither side depends on the other's choice.
             const cards = cart?.applied_coupons;
@@ -568,7 +621,7 @@ export class SallaCartCoupons {
     }
     render() {
         const couponRow = this.couponRow();
-        return (h(Host, { key: 'e756434a2f77235e870891ce7e0b672a69429e49' }, h("div", { key: 'ca86866dc7275c98f72c2bc4c95684826e2a94d0', class: "s-cart-coupons-wrapper" }, h("div", { key: '8c37273ea0e40cad320ac148d82eeea2774ba18d', class: "s-cart-coupons-input-section" }, h("label", { key: '8495bff14cae70f530c648e49cac76bd57ec4429', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '5e6d10ab653561c33e73829f9259fe3037eab8e7', class: "s-cart-coupons-coupon-input-container" }, this.multiCoupon ? [
+        return (h(Host, { key: '79d820f5931ca33571e6897f4e5a09413e02cf96' }, h("div", { key: '7c55aa93e8f4bc44c76606e1af4cb593cab0e7b2', class: "s-cart-coupons-wrapper" }, h("div", { key: '7deee9dc280b91008c9f29eab2c7dbb42fb4d586', class: "s-cart-coupons-input-section" }, h("label", { key: 'f4362e77c3031c8bdacdbd0bd126f7df3c973583', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '631dce1aeb71c6bfc80d00869c0974ffedb3f932', 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" }),
@@ -579,7 +632,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: '5f7ff489d561f440e643c62c0d238a059f94ff2e', 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: '9713718d67c8c4ff4daeffc47572ac3cabea6905', 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
@@ -588,7 +641,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: '5b811515254595fcde9a364b113b60d38048e2c0', slot: "items" }, couponRow.map(entry => this.renderCouponCard(entry))))))));
+            key: couponRow.map(entry => entry.code).join('|') }, h("div", { key: '4b96603ef79b45b312a87755850b3c81cc51deea', slot: "items" }, couponRow.map(entry => this.renderCouponCard(entry))))))));
     }
     static get is() { return "salla-cart-coupons"; }
     static get originalStyleUrls() {
@@ -613,7 +666,8 @@ export class SallaCartCoupons {
             "appliedCoupons": {},
             "mergedCoupons": {},
             "appliedCouponCards": {},
-            "multiCoupon": {}
+            "multiCoupon": {},
+            "mergedCashbackCode": {}
         };
     }
     static get methods() {

package/dist/collection/components/salla-cart-summary-card/salla-cart-summary-card.js

@@ -17,6 +17,8 @@ export class SallaCartSummaryCard {
         this.cartCount = 0;
         this.cartTotal = 0;
         this.cartTotalDiscount = 0;
+        /** Active cashback (automatic or code-unlocked) — folded into the savings badge alongside the coupon discount. */
+        this.cartCashbackAmount = 0;
         this.cartSubTotal = 0;
         this.cartOptionsTotal = 0;
         this.cartShippingCost = 0;
@@ -128,6 +130,7 @@ export class SallaCartSummaryCard {
         this.vatTaxLabel = salla.lang.get('pages.cart.VAT_tax_amount');
         this.savedLabel = salla.lang.get('pages.cart.discount');
         this.discountBadge = salla.lang.get('pages.cart.saved');
+        this.cashbackLabel = salla.lang.get('pages.checkout.cashback');
         this.finalTotalLabel = salla.lang.get('pages.cart.final_total');
         this.pricesTaxedLabel = salla.lang.get('pages.cart.prices_taxed');
         this.completeOrderLabel = salla.lang.get('pages.cart.complete_order');
@@ -254,8 +257,10 @@ export class SallaCartSummaryCard {
     // skeleton either way so the CTA always renders.
     applyCachedSummary() {
         const summary = salla.storage?.get?.('cart.summary');
+        // false: the cached summary never carries cashback_amount, so it must not retract a
+        // promise the live cart made. Events refresh the real figure.
         if (summary && typeof summary === 'object')
-            this.applyCartData(summary);
+            this.applyCartData(summary, false);
         this.isLoading = false;
     }
     extractCart(payload) {
@@ -267,7 +272,7 @@ export class SallaCartSummaryCard {
             return payload.cart;
         return payload;
     }
-    applyCartData(data) {
+    applyCartData(data, cashbackAuthoritative) {
         if (!data)
             return;
         // First real payload ends the skeleton.
@@ -280,6 +285,25 @@ export class SallaCartSummaryCard {
         const discount = data.total_discount ?? data.discount;
         if (discount !== undefined)
             this.cartTotalDiscount = this.num(discount);
+        // cashback_amount is a PROMISE, not a measurement, so it needs different handling from
+        // its neighbours in both directions.
+        //
+        // It must be RETRACTABLE: the backend omits it exactly when it has no promise to make
+        // (totals unbound, or the offers lookup failing closed), so a cart that recomputed its
+        // totals and did not come back with a figure is no longer promising one. Carrying the old
+        // number forward would leave the badge advertising cashback the cart may no longer earn.
+        //
+        // But only a payload that actually recomputed the totals may retract it. Two sources
+        // legitimately lack the field and must NOT clear the badge: the cached SDK summary
+        // (applyCachedSummary, used when cart/details fails) never carries it, and a
+        // `cart::updated` event can arrive with metadata only. Hence the explicit override, and
+        // otherwise the sub_total+total probe — a full cart payload always carries both, a
+        // metadata-only one carries neither.
+        const recomputedTotals = cashbackAuthoritative ?? (data.sub_total !== undefined && data.total !== undefined);
+        if (data.cashback_amount !== undefined)
+            this.cartCashbackAmount = this.num(data.cashback_amount);
+        else if (recomputedTotals)
+            this.cartCashbackAmount = 0;
         if (data.sub_total !== undefined)
             this.cartSubTotal = this.num(data.sub_total);
         if (data.options_total !== undefined)
@@ -348,6 +372,7 @@ export class SallaCartSummaryCard {
         if (this.isLoading)
             return this.renderSkeleton();
         const showSavings = this.cartTotalDiscount > 0;
+        const showCashback = this.cartCashbackAmount > 0;
         const subTotalLabel = this.cartTaxAmount ? this.itemsTotalNoTaxLabel : this.itemsTotalLabel;
         // Inline transform so sheet motion doesn't depend on SCSS load order.
         const sheetStyle = this.isDesktop
@@ -364,7 +389,7 @@ export class SallaCartSummaryCard {
             } }, h("div", { class: {
                 's-cart-summary-card-sheet-wrap': true,
                 's-cart-summary-card-sheet-wrap--open': this.isOpen,
-            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.roundToCurrency(this.cartTotal + this.cartTotalDiscount)))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), showSavings && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel))));
+            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.roundToCurrency(this.cartTotal + this.cartTotalDiscount)))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), (showSavings || showCashback) && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, showSavings && (h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) }))), showSavings && showCashback && ' + ', showCashback && (h("span", null, h("span", { innerHTML: this.money(this.cartCashbackAmount) }), " ", this.cashbackLabel))))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel))));
     }
     static get is() { return "salla-cart-summary-card"; }
     static get originalStyleUrls() {
@@ -406,6 +431,7 @@ export class SallaCartSummaryCard {
             "cartCount": {},
             "cartTotal": {},
             "cartTotalDiscount": {},
+            "cartCashbackAmount": {},
             "cartSubTotal": {},
             "cartOptionsTotal": {},
             "cartShippingCost": {},
@@ -422,6 +448,7 @@ export class SallaCartSummaryCard {
             "vatTaxLabel": {},
             "savedLabel": {},
             "discountBadge": {},
+            "cashbackLabel": {},
             "finalTotalLabel": {},
             "pricesTaxedLabel": {},
             "completeOrderLabel": {},