@salla.sa/twilight-components 2.14.529 → 2.14.530

package/dist/collection/components/salla-cashback-banner/salla-cashback-banner.js

@@ -5,26 +5,46 @@ import { Host, h } from "@stencil/core";
 import StarFilledIcon from "../../assets/svg/star-filled.svg";
 export class SallaCashbackBanner {
     constructor() {
-        this.cashbackData = null;
+        this.cashbackData = undefined;
         this.productId = null;
+        this.handlePriceUpdated = (response, productId) => {
+            if (String(productId) !== String(this.productId))
+                return;
+            const cashback = response?.data?.cashback;
+            if (cashback !== undefined) {
+                this.cashbackData = cashback;
+            }
+        };
     }
     async componentWillLoad() {
         try {
+            // page.id is server-injected, resolve it before awaits so the listener is registered
+            // before salla-product-options fires its initial price event.
+            this.productId = this.host.dataset.productId || salla.config.get('page.id');
+            if (this.productId) {
+                salla.event.on('product::price.updated', this.handlePriceUpdated);
+            }
             await salla.onReady();
             await salla.lang.onLoaded();
-            this.productId = this.host.dataset.productId || salla.config.get('page.id');
             if (!this.productId) {
                 return;
             }
+            // Baseline cashback from the product-level endpoint.
+            // For products with options the price event (above) will override this with the variant-specific amount.
             const response = await salla.api
                 .request(`/products/${this.productId}/cashback-offer`)
                 .catch(() => null);
-            this.cashbackData = response?.data || null;
+            if (this.cashbackData === undefined) {
+                this.cashbackData = response?.data ?? null;
+            }
         }
         catch (e) {
             salla?.logger?.warn?.('salla-cashback-banner: init failed', e);
         }
     }
+    disconnectedCallback() {
+        salla.event.off('product::price.updated', this.handlePriceUpdated);
+    }
     getPaymentMethodsText(methods = []) {
         return methods
             .map(method => String(method || '').trim())
@@ -42,13 +62,14 @@ export class SallaCashbackBanner {
         return salla.lang.get('pages.loyalty_program.cashback_when_buying_product');
     }
     render() {
-        if (!this.productId || !Number(this.cashbackData?.amount)) {
+        const cashbackData = this.cashbackData;
+        if (!this.productId || !cashbackData || !Number(cashbackData.amount)) {
             return null;
         }
-        const cashbackValue = this.cashbackData.amount;
-        const currency = this.cashbackData.currency;
+        const cashbackValue = cashbackData.amount;
+        const currency = cashbackData.currency;
         const cashbackMessage = this.getCashbackMessage();
-        const cashbackType = this.cashbackData.offer_type;
+        const cashbackType = cashbackData.offer_type;
         return (h(Host, null, h("div", { class: "s-cashback-banner-container" }, h("div", { class: "s-cashback-banner-icon" }, h("span", { class: "s-cashback-banner-inner-icon", innerHTML: StarFilledIcon })), h("p", null, h("span", { class: "s-cashback-banner-label" }, salla.lang.get('pages.loyalty_program.earn'), ' '), h("span", { class: "s-cashback-banner-value" }, cashbackType === "percentage" ? "+" : "", cashbackValue, " ", ['SAR', 'ر.س'].includes(currency) ? h("i", { class: "sicon-sar" }) : currency, ' '), h("span", { class: "s-cashback-banner-label" }, cashbackMessage)))));
     }
     static get is() { return "salla-cashback-banner"; }