@salla.sa/twilight-components 2.14.558 → 2.14.559

package/dist/collection/components/salla-fulfillment-methods/salla-fulfillment-methods.js

@@ -4,42 +4,63 @@
 import { h, Host } from "@stencil/core";
 /**
  * @name SallaFulfillmentMethods
- * @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards
+ * @description Displays product fulfillment options (pickup and delivery) as side-by-side cards.
+ * Renders only the card(s) the product actually supports, per `supports_pickup` / `supports_delivery`
+ * on the product-details response. Login Cycle, branch capabilities, and product-type eligibility are
+ * all decided server-side (see `ProductFulfillmentMethods` composer) — this component is render-only
+ * and must not re-check any of those rules on the front end.
  * @tag salla-fulfillment-methods
  */
 export class SallaFulfillmentMethods {
     constructor() {
         this.methods = [];
         this.shouldRender = false;
+        this.productId = null;
     }
-    async componentDidLoad() {
-        await Salla.onReady();
-        await Salla.lang.onLoaded();
-        if (!Salla.config.get('store.shipping.support_pickup'))
-            return;
-        this.shouldRender = true;
-        this.setLabels();
+    async componentWillLoad() {
+        try {
+            // page.id is server-injected, resolve it the same way salla-cashback-banner does
+            // for this same hook slot (product:single.*).
+            this.productId = this.host.dataset.productId || Salla.config.get('page.id');
+            await Salla.onReady();
+            await Salla.lang.onLoaded();
+            if (!this.productId)
+                return;
+            const response = await Salla.product.getDetails(this.productId, []).catch(() => null);
+            this.setLabels(response?.data ?? {});
+        }
+        catch (e) {
+            Salla?.logger?.warn?.('salla-fulfillment-methods: init failed', e);
+        }
     }
-    setLabels() {
-        this.methods = [
-            {
+    setLabels(flags) {
+        console.log('flags', flags);
+        const methods = [];
+        // Missing/undefined flags (BE not yet deployed, request failed) resolve to falsy → hidden.
+        // Never fall back to showing both cards.
+        if (flags?.supports_delivery) {
+            methods.push({
                 id: 'delivery',
                 title: Salla.lang.getWithDefault('pages.products.promise_delivery_title', 'متاح للتوصيل'),
                 subtitle: Salla.lang.getWithDefault('pages.products.promise_delivery_subtitle', 'طلبك يوصلك لباب البيت بسهولة.'),
                 iconClass: 'sicon-location',
-            },
-            {
+            });
+        }
+        if (flags?.supports_pickup) {
+            methods.push({
                 id: 'pickup',
                 title: Salla.lang.getWithDefault('pages.products.promise_pickup_title', 'متاح للاستلام'),
                 subtitle: Salla.lang.getWithDefault('pages.products.promise_pickup_subtitle', 'استلام فوري من أقرب فرع.'),
                 iconClass: 'sicon-store',
-            },
-        ];
+            });
+        }
+        this.methods = methods;
+        this.shouldRender = methods.length > 0;
     }
     render() {
         if (!this.shouldRender)
             return null;
-        return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map((method) => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
+        return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map(method => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
     }
     static get is() { return "salla-fulfillment-methods"; }
     static get originalStyleUrls() {
@@ -58,4 +79,5 @@ export class SallaFulfillmentMethods {
             "shouldRender": {}
         };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/salla-payments/salla-payments.js

@@ -42,12 +42,12 @@ export class SallaPayments {
     render() {
         const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
         const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
-        return (h(Host, { key: 'da9ffad7606b7a1f885df4843612c4221a835c15', class: "s-payments-list-wrap" }, h("ul", { key: '9a15cd4328a65261e1137d65600867fd89893892', class: "s-payments-list" }, madeInKSA && h("li", { key: '17964fbe6a411738ad026cd116e1a67676ae0ab6', class: "s-payments-list-item" }, h("img", { key: '36baae3d522f41f1ab07d75328318ee9f9ae3a19', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
+        return (h(Host, { key: 'aaa2a9297d16666d9cf686aea17319026145ed1d', class: "s-payments-list-wrap" }, h("ul", { key: '0c9a19d7ba93555e897fdb5068572d90f64a87e5', class: "s-payments-list" }, madeInKSA && h("li", { key: '1da474ca870831495e7bee34e8e8ba538927c716', class: "s-payments-list-item" }, h("img", { key: '66b42b93ef788b7091e8343338182ffc93cae74f', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
             h("div", { id: "cod-slot", innerHTML: this.codSlot
                     .replace(/\{image\}/g, this.paymentLogo(`cod`)) }) :
             h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                     .replace(/\{image\}/g, this.paymentLogo(payment))
-                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '9f6c64efa03905a8584f8732bc7032ae686bef29', id: "sbc-slot", innerHTML: this.sbcSlot
+                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: 'fd9c5984a1c6890dc9690f6e3969a76fed2f1501', id: "sbc-slot", innerHTML: this.sbcSlot
                 .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                 .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
     }
@@ -170,5 +170,5 @@ export class SallaPayments {
     static get elementRef() { return "host"; }
 }
 /** Slugs whose mini logo lives on the new assets CDN; add one when its logo is re-uploaded there. */
-SallaPayments.NEW_CDN_LOGOS = ['tabby_installment', 'emkan_installment'];
+SallaPayments.NEW_CDN_LOGOS = ['tabby_installment', 'emkan_installment', 'benefit', 'qpay'];
 SallaPayments.audited = false;