@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -31,6 +31,7 @@ export class SallaLoginModal {
         this.scrolling = 'no';
         this.direction = document.dir;
         this.canRenderIframe = false;
+        this.loginSucceeded = false;
         salla.event.on('login::open', (data) => this.onLoginOpen(data));
         salla.event.on('modal::close', (data) => {
             if (this.iframe)
@@ -125,6 +126,7 @@ export class SallaLoginModal {
             }
             // temporary condition until we handle both cases separately
             if (action == 'authenticated' || action == 'authenticated_web_auth') {
+                this.loginSucceeded = true;
                 !value?.withoutClose && this.close();
                 return salla.auth.api.handlAfterAuthenticatedResponse(value, this.supportWebAuth)
                     .then(() => !(value?.withoutReload || this.withoutReload) && setTimeout(() => window.location.reload(), 1000));
@@ -178,6 +180,14 @@ export class SallaLoginModal {
         // Fire an event if withoutReload is true
         return;
     }
+    /** Tell the listeners waiting for a login (e.g. `requireLoginThen`) that the popup was closed without one. */
+    onVisibilityChanged(visible) {
+        if (visible) {
+            this.loginSucceeded = false;
+            return;
+        }
+        !this.loginSucceeded && Salla.event.emit('salla-login::dismissed');
+    }
     close() {
         Salla.event.emit('salla-login::closing');
         this.modal.close();
@@ -229,6 +239,7 @@ export class SallaLoginModal {
             }
         });
         if (token) {
+            this.loginSucceeded = true;
             this.modal.close();
             Salla.auth.event.tokenFetched(token);
             try {
@@ -343,7 +354,7 @@ export class SallaLoginModal {
         if (this.inline) {
             return this.getLoginDom();
         }
-        return (h("salla-modal", { class: "s-login-modal", ref: modal => this.modal = modal, width: "xs" }, this.getLoginDom()));
+        return (h("salla-modal", { class: "s-login-modal", ref: modal => this.modal = modal, width: "xs", onModalVisibilityChanged: e => this.onVisibilityChanged(e.detail) }, this.getLoginDom()));
     }
     getLoginDom() {
         if (!this.canRenderIframe) {

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from "@stencil/core";
+import { h, forceUpdate } from "@stencil/core";
 import Star2 from "../../assets/svg/star2.svg";
 import Star3 from "../../assets/svg/star3.svg";
 import CancelIcon from "../../assets/svg/cancel.svg";
@@ -34,16 +34,23 @@ export class SallaLoyalty {
         salla.onReady(() => {
             this.is_loggedin = salla.config.isUser();
         });
-        salla.lang.onLoaded(() => {
-            this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');
-            this.translationLoaded = true;
-        });
         salla.cart.event.onUpdated(cart => {
             this.prizePoints = cart.loyalty.prize?.points;
             this.prizeTitle = cart.loyalty.prize?.title;
             this.customerPoints = cart.loyalty.customer_points || this.customerPoints;
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');
+            this.translationLoaded = true;
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     onTabSelected(event) {
         const prize = this.loyaltyProgram?.prizes.find(p => p.title === event.detail?.name);
         if (prize)

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

@@ -46,16 +46,21 @@ export class SallaMap {
          * Sets map style.
          */
         this.theme = 'light';
-        salla.lang.onLoaded(() => {
+        salla.onReady(() => {
+            this.apiKey = salla.config.get('store.settings.keys.maps');
+        });
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
             this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
             this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
             this.locateButtonEdit = salla.lang.get('common.elements.edit');
             this.searchPlaceholder = salla.lang.get('pages.checkout.search_for_address');
         });
-        salla.onReady(() => {
-            this.apiKey = salla.config.get('store.settings.keys.maps');
-        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     formatAddress(address) {
         return address.length > 25 ? address.substring(0, 25) + '...' : address;
@@ -327,11 +332,11 @@ export class SallaMap {
     }
     // render
     render() {
-        return (h(Host, { key: 'a1c17b249dca7f6bf172e235b1960c634fba4e02', class: "s-map-wrapper" }, h("salla-modal", { key: 'd896fd882de7598dfe9ea1fddff571d5bd43b8ec', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
+        return (h(Host, { key: '3200387d0b18f6ecc5f5b6c2a464cb02516268f9', class: "s-map-wrapper" }, h("salla-modal", { key: '1a0b0181945dc1c5fa3950f7bcdf56f4aed2be1c', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
                 this.locationModal = modal;
-            } }, this.getLocationModal()), h("slot", { key: 'bf70602eba04f09ea904c0cc4cdda37ef9bc3988', name: "button" }, h("salla-button", { key: 'e9ab67288c8bc4a8ffeff9f49683b57421aaaaef', onClick: () => {
+            } }, this.getLocationModal()), h("slot", { key: '474ba510d9c5cbf0abc473151674e6627f374458', name: "button" }, h("salla-button", { key: '3a08552e4be8f1306f679fd44231743a377064ea', onClick: () => {
                 this.open();
-            }, color: "primary", class: "s-map-location-button" }, h("span", { key: '9e8d2a788cf5e209f00b73280b5b54701f354171', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: '8c07eaa39a6f881147bda89f683e1ae3d9fc0a0f', class: "s-map-value-input", name: this.name, required: this.required, value: this.getLatLng(), tabIndex: -1, "aria-hidden": "true", ref: input => (this.mapInput = input) })));
+            }, color: "primary", class: "s-map-location-button" }, h("span", { key: '0b17fd41e0563c52e7826534877df00adcbce777', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: 'b097866bd2d4b29af0212064897d3fc5311534e2', class: "s-map-value-input", name: this.name, required: this.required, value: this.getLatLng(), tabIndex: -1, "aria-hidden": "true", ref: input => (this.mapInput = input) })));
     }
     static get is() { return "salla-map"; }
     static get originalStyleUrls() {

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

@@ -11,11 +11,16 @@ export class SallaNotifications {
         this.itemPerPage = 10;
         this.no_notifications_trans = salla.lang.get('blocks.header.no_notifications');
         this.load_more_text_trans = salla.lang.get('common.elements.load_more');
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.no_notifications_trans = salla.lang.get('blocks.header.no_notifications');
             this.load_more_text_trans = salla.lang.get('common.elements.load_more');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Show/hide loading
     loading(isLoading = true) {
         let btnText = this.status?.querySelector('.s-button-text');

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

@@ -52,8 +52,16 @@ export class SallaOffer {
         this.get_from_text = translate('pages.offer.get_from_categories', {}, 'احصل من:');
         this.payment_methods_text = translate('pages.offer.payment_methods', {}, 'طرق الدفع');
         this.product_text = salla.lang.get('common.elements.product', 'منتج');
+        salla.onReady(() => {
+            this.currentPage = salla.config.get('page.slug');
+            const currencies = salla.config.get('currencies') || {};
+            const currencyCode = salla.config.get('user.currency_code');
+            this.userCurrency = currencies[currencyCode] || { symbol: '', code: currencyCode || 'SAR', name: '' };
+        });
+    }
+    connectedCallback() {
         // Language
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.offer_with_price_text = salla.lang.get('pages.offer.with_price');
             this.with_discount_text = salla.lang.get('pages.products.with_a_discount');
             this.product_discount_text = salla.lang.get('pages.products.discount');
@@ -69,12 +77,9 @@ export class SallaOffer {
             this.payment_methods_text = translate('pages.offer.payment_methods', {}, 'طرق الدفع');
             this.product_text = salla.lang.get('common.elements.product', 'منتج');
         });
-        salla.onReady(() => {
-            this.currentPage = salla.config.get('page.slug');
-            const currencies = salla.config.get('currencies') || {};
-            const currencyCode = salla.config.get('user.currency_code');
-            this.userCurrency = currencies[currencyCode] || { symbol: '', code: currencyCode || 'SAR', name: '' };
-        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     async getEndpointByPageName() {
         if (this.currentPage == PageType.Cart) {

package/dist/collection/components/salla-offer-modal/salla-offer-modal.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from "@stencil/core";
+import { h, forceUpdate } from "@stencil/core";
 import { translate } from "../../Helpers/translate";
 import SpecialDiscountIcon from "../../assets/svg/special-discount.svg";
 import Tag from "../../assets/svg/tag.svg";
@@ -18,10 +18,6 @@ export class SallaOfferModal {
         this.translationLoaded = false;
         this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
         salla.event.on('offer-modal::open', product_id => this.open(product_id));
-        salla.lang.onLoaded(() => {
-            this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
-            this.translationLoaded = true;
-        });
         this.categorySlot = this.host.querySelector('[slot="category"]')?.innerHTML || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
         // this.productSlot = this.host.querySelector('[slot="product"]')?.innerHTML || this.defaultProductSlot();
         salla.event.on('offer-modal::open', product_id => this.open(product_id));
@@ -33,6 +29,17 @@ export class SallaOfferModal {
             this.open(offer.product_id);
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
+            this.translationLoaded = true;
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
  * Emits a promotion viewed event for analytics tracking
  * @param offer - The offer being viewed in the modal
@@ -230,7 +237,7 @@ export class SallaOfferModal {
     //       '</div>';
     //   }
     render() {
-        return h("salla-modal", { key: 'b41e4389d7bd3ba89f7cfd10d9e2e7a8ddafbb3d', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '2beaa53d150ba7d17e1d66d6f5a5619ff03dd7f8', slot: 'loading' }, h("div", { key: '6a35aa5676449dd74ed50e48ee62fe3dc604eb82', class: "s-offer-modal-skeleton" }, h("div", { key: 'eb0458bbe6bef1c7931ef1b29c7831b6fdd8cf94', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: 'ba0dfd74e0e279633fbfa1536a1232f7b88d09c4', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '41a501b4179488e1346a12aaf76407dfeeaa233b', height: '15px', width: '50%' }), h("salla-skeleton", { key: '60e56666921a9a1e28d070ee26864c3df488cdfb', height: '10px', width: '30%' })), h("div", { key: '7079a1b0d16c373004fc2abd7e3240349061975f', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '63dda9415de1c0eacced5a1135bc6193290106c7', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '4e39d82ff6e2145f5a651747423c86929b703f6f', height: '15px', width: '50%' }), h("salla-skeleton", { key: '55115403e6710254d6f8637f05ce3f8733f7101b', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+        return h("salla-modal", { key: 'beed061e843a93ff4dff12234d5bac13dde06023', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '390f86b1c8fa2b2c278576784e0623051dddf969', slot: 'loading' }, h("div", { key: '923ac23aa2038cf64476af0b99a93a38bdd86766', class: "s-offer-modal-skeleton" }, h("div", { key: '3ec7335437554217a22aafcfe7d11b7ebf648335', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '48e244848f5c49c5b0d8406289ef71fc8dac3a90', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: 'c0663ea07d3afa6e70645f4ceb8610f595d5f4ed', height: '15px', width: '50%' }), h("salla-skeleton", { key: '152b319f3932dea0bb5bb2f55cd9c43904ee412d', height: '10px', width: '30%' })), h("div", { key: 'c91455f90f133d346b71c6c7ac9d78c6d645f264', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '0657191d93e3929f74734c90b082fc272f189a83', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '2ac022a4ca2b18182e24dd10124061d9ff068094', height: '15px', width: '50%' }), h("salla-skeleton", { key: '029fca022c898eb4b519fa8f0808ca9dba1bd07a', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
             ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(),
                 this.getOfferConditions(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
                     h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)

package/dist/collection/components/salla-order-branch/salla-order-branch.css

@@ -5,6 +5,12 @@
 .s-order-branch-ready {
   background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
+.s-order-branch-instructions {
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+.s-order-branch-instructions-content {
+  white-space: pre-wrap;
+}
 .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);
 }
@@ -226,6 +232,35 @@
   line-height: 1.45;
   color: var(--color-text-secondary,#666);
 }
+.s-order-branch-instructions {
+  border-radius: 0.5rem;
+  padding: 1rem;
+  text-align: start;
+}
+.s-order-branch-instructions-heading {
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  line-height: 1.35;
+}
+.s-order-branch-instructions-heading i {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+.s-order-branch-instructions-content {
+  margin: 0px;
+  overflow-wrap: break-word;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  line-height: 1.6;
+}
 .s-order-branch-actions {
   display: flex;
   flex-shrink: 0;

package/dist/collection/components/salla-order-branch/salla-order-branch.js

@@ -14,10 +14,33 @@ export class SallaOrderBranch {
         /** Stack the identity and contact cards vertically instead of side-by-side. */
         this.stackCards = false;
         this.isLoading = false;
+        /** Bilingual defaults for keys introduced by this component; store/central translations win. */
+        this.translationDefaults = {
+            'pages.orders.pickup_instructions': { ar: 'معلومات إرشادية', en: 'Pickup instructions' },
+        };
     }
     componentWillLoad() {
+        salla.lang.onLoaded?.(() => this.registerTranslationDefaults());
+        this.registerTranslationDefaults();
         return this.getBranchData();
     }
+    /**
+     * Register bilingual (ar/en) defaults without overriding existing translations.
+     */
+    registerTranslationDefaults() {
+        if (!salla?.lang?.addBulk)
+            return;
+        const missing = Object.entries(this.translationDefaults).reduce((acc, [key, value]) => {
+            // `get` returns the key itself when no translation is found.
+            if (salla.lang.get?.(key) === key) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        if (Object.keys(missing).length) {
+            salla.lang.addBulk(missing);
+        }
+    }
     async getBranchData() {
         const orderId = salla.config.get('page.id');
         if (!orderId)
@@ -53,6 +76,11 @@ export class SallaOrderBranch {
     label(key, fallback) {
         return salla.lang.getWithDefault(key, fallback);
     }
+    bilingualLabel(key) {
+        const entry = this.translationDefaults[key];
+        const locale = (salla.lang.locale || 'ar').startsWith('en') ? 'en' : 'ar';
+        return this.label(key, entry?.[locale] ?? entry?.ar ?? key);
+    }
     get preparationText() {
         const range = this.branchData?.preparation_time_range;
         if (!range?.from || !range?.to)
@@ -100,6 +128,16 @@ export class SallaOrderBranch {
     get phone() {
         return getBranchPhone(this.branchData?.contacts);
     }
+    get pickupInstructions() {
+        const instructions = this.branchData?.pickup_instructions;
+        return typeof instructions === 'string' && instructions.trim() ? instructions : '';
+    }
+    renderPickupInstructions() {
+        const instructions = this.pickupInstructions;
+        if (!instructions)
+            return null;
+        return (h("div", { class: "s-order-branch-instructions" }, h("div", { class: "s-order-branch-instructions-heading" }, h("span", { "aria-hidden": "true" }, h("i", { class: "sicon-info" })), h("span", null, this.bilingualLabel('pages.orders.pickup_instructions'))), h("p", { class: "s-order-branch-instructions-content" }, instructions)));
+    }
     renderDetailsColumn() {
         const phone = this.phone;
         if (!phone)
@@ -110,13 +148,13 @@ export class SallaOrderBranch {
         const items = this.workingHoursItems;
         if (!items.length)
             return null;
-        return (h("div", { class: "s-order-branch-info-card s-order-branch-hours-card" }, h("span", { class: "s-order-branch-info-icon", "aria-hidden": "true" }, h("i", { class: "sicon-calendar-alt" })), h("div", { class: "s-order-branch-info-text" }, h("span", { class: "s-order-branch-info-label" }, this.label('pages.checkout.working_hours', 'ساعات العمل')), h("div", { class: "s-order-branch-hours-list" }, items.map(item => (h("span", { class: "s-order-branch-hours-item" }, item)))))));
+        return (h("div", { class: "s-order-branch-info-card s-order-branch-hours-card" }, h("span", { class: "s-order-branch-info-icon", "aria-hidden": "true" }, h("i", { class: "sicon-calendar-alt" })), h("div", { class: "s-order-branch-info-text" }, h("span", { class: "s-order-branch-info-label" }, this.label('pages.checkout.working_hours', 'ساعات العمل')), h("div", { class: "s-order-branch-hours-list" }, items.map((item, index) => (h("span", { key: `${item}-${index}`, class: "s-order-branch-hours-item" }, item)))))));
     }
     renderBranchIdentityCard() {
         const branch = this.branchData;
         const address = this.branchAddress;
         const readyText = this.preparationText;
-        return (h("section", { class: "s-order-branch-card" }, h("div", { class: "s-order-branch-location" }, h("div", { class: "s-order-branch-identity" }, h("span", { class: "s-order-branch-store-icon" }, h("i", { class: "sicon-store", "aria-hidden": "true" })), h("div", { class: "s-order-branch-text" }, h("div", { class: "s-order-branch-name-row" }, branch?.name ? h("span", { class: "s-order-branch-name" }, branch.name) : null, readyText ? h("span", { class: "s-order-branch-ready" }, readyText) : null), address ? h("span", { class: "s-order-branch-address" }, address) : null)), this.mapUrl ? (h("div", { class: "s-order-branch-actions" }, h("a", { href: this.mapUrl, target: "_blank", rel: "noopener noreferrer", class: "s-order-branch-map-link" }, h("span", null, this.label('pages.orders.branch_map', 'موقع الفرع علي الخريطة')), h("span", { class: "s-order-branch-action-icon", innerHTML: navigationIcon })))) : null)));
+        return (h("section", { class: "s-order-branch-card" }, h("div", { class: "s-order-branch-location" }, h("div", { class: "s-order-branch-identity" }, h("span", { class: "s-order-branch-store-icon" }, h("i", { class: "sicon-store", "aria-hidden": "true" })), h("div", { class: "s-order-branch-text" }, h("div", { class: "s-order-branch-name-row" }, branch?.name ? h("span", { class: "s-order-branch-name" }, branch.name) : null, readyText ? h("span", { class: "s-order-branch-ready" }, readyText) : null), address ? h("span", { class: "s-order-branch-address" }, address) : null)), this.mapUrl ? (h("div", { class: "s-order-branch-actions" }, h("a", { href: this.mapUrl, target: "_blank", rel: "noopener noreferrer", class: "s-order-branch-map-link" }, h("span", null, this.label('pages.orders.branch_map', 'موقع الفرع علي الخريطة')), h("span", { class: "s-order-branch-action-icon", innerHTML: navigationIcon })))) : null), this.renderPickupInstructions()));
     }
     render() {
         if (this.isLoading || !this.branchData) {

package/dist/collection/components/salla-order-summary/salla-order-summary.js

@@ -15,13 +15,15 @@ export class SallaOrderSummary {
         this.isDigitalCard = (item) => item.product.type === 'codes';
         this.isDigitalProduct = (item) => item.product.type === 'digital';
     }
-    async componentWillLoad() {
-        salla.lang.onLoaded(() => {
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.codes_text = salla.lang.get('pages.thank_you.codes');
             this.copy_text = salla.lang.get('common.elements.copy');
             this.files_text = salla.lang.get('pages.thank_you.files');
             this.download_text = salla.lang.get('pages.thank_you.download');
         });
+    }
+    async componentWillLoad() {
         return await this.getOrderItems();
     }
     copyToClipboardHandler(code) {
@@ -59,10 +61,11 @@ export class SallaOrderSummary {
         }
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         this.copyCodeButtonTimeout && clearTimeout(this.copyCodeButtonTimeout);
     }
     render() {
-        return (h("ul", { key: '09314d7241f730cc2dcd220542d02ca44565ae9c', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
+        return (h("ul", { key: 'b01089c3818be36fa4ff2341d7986269abdfd7c8', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
             this.order_items.map((item) => (this.isDigitalCard(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.codes_text, " (", item.name, ")"), item.codes.map((code) => (h("div", { key: code.code, class: "s-order-summary-code-item-wrapper" }, h("p", null, h("span", { innerHTML: iconCreditCard }), h("span", null, code.code)), h("salla-button", { class: `s-order-summary-item-copy-button ${this.codeCopied === code.code ? 'copied' : ''}`, onClick: () => this.copyToClipboardHandler(code.code), shape: "link" }, h("span", { innerHTML: this.codeCopied === code.code ? iconCheck : iconCopy }), h("span", null, this.copy_text))))))) :
                 this.isDigitalProduct(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.files_text, " (", item.name, ")"), h("ul", null, item.files.map((file) => (h("li", { class: "s-order-summary-digital-item-wrapper" }, h("div", null, h("span", { innerHTML: iconFileArchive }), h("span", null, file.name)), h("a", { href: file.url, target: "_blank", class: "s-order-summary-item-download" }, h("span", { innerHTML: iconDownload }), h("span", null, this.download_text)))))))) : null))));
     }

package/dist/collection/components/salla-order-totals-card/salla-order-totals-card.js

@@ -36,21 +36,28 @@ export class SallaOrderTotalsCard {
     renderRefundRow(amount) {
         return (h("div", { class: "s-order-totals-card-row" }, h("div", { class: "s-order-totals-card-row-inner" }, h("dt", { class: "s-order-totals-card-refund-label" }, h("span", { class: "s-order-totals-card-refund-icon" }, h("i", { class: "sicon-info" })), h("span", null, " ", salla.lang.get('pages.orders.refund_amount'))), h("dd", { class: "s-order-totals-card-refund-value" }, h("b", { innerHTML: salla.money(amount) })))));
     }
+    /** Totals arrive either as a money object or a plain float, depending on the presenter. */
+    toAmount(value) {
+        return (typeof value === 'number' ? value : value?.amount) || 0;
+    }
     render() {
         if (!this.summary) {
             return h(Host, { class: "s-order-totals-card-wrapper" });
         }
         const { summary } = this;
         const hasOptions = Array.isArray(summary.options) ? summary.options.length > 0 : false;
+        const refundAmount = this.toAmount(summary.refund_amount);
+        // Independent of the refund: a partially refunded order can still owe a balance.
+        const isPartiallyPaid = summary.has_remaining_amount ?? this.toAmount(summary.remaining_amount) > 0;
         return (h(Host, { class: "s-order-totals-card-wrapper" }, h("div", { class: "s-order-totals-card-panel" }, h("h2", { id: "summary-heading", class: "s-order-totals-card-heading" }, salla.lang.get('pages.orders.summary')), h("div", { class: "s-order-totals-card-flow" }, h("dl", { class: "s-order-totals-card-list" }, this.renderTotalRow(salla.lang.get('pages.cart.items_total'), summary.sub_total), hasOptions &&
             this.renderTotalRow(salla.lang.get('pages.cart.order_options_total'), summary.options_total), summary.discounts && this.renderDiscountRow(), summary.cod_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.cod_cost'), summary.cod_cost, ''), summary.shipping_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.shipping_cost'), summary.shipping_cost, 's-order-totals-card-shipping'), summary.tax &&
-            this.renderTotalRow(`${salla.lang.get('pages.cart.tax')} ${summary.tax.percent}%`, summary.tax.amount, ''), summary.paid_amount
+            this.renderTotalRow(`${salla.lang.get('pages.cart.tax')} ${summary.tax.percent}%`, summary.tax.amount, ''), isPartiallyPaid && summary.paid_amount != null
             ? this.renderTotalRow(salla.lang.get('pages.orders.partially_paid'), summary.paid_amount, '')
-            : null, summary.remaining_amount
+            : null, isPartiallyPaid
             ? this.renderTotalRow(salla.lang.get('pages.orders.remaining_amount'), summary.remaining_amount, '')
-            : null, h("div", { class: "s-order-totals-card-total" }, this.renderTotalRow(salla.lang.get('pages.orders.final_total'), summary.total, 's-order-totals-card-total-label', 's-order-totals-card-total-value', true)), summary.refund_amount ? (h("div", { class: "s-order-totals-card-refund" }, this.renderRefundRow(summary.refund_amount))) : null)))));
+            : null, h("div", { class: "s-order-totals-card-total" }, this.renderTotalRow(salla.lang.get('pages.orders.final_total'), summary.total, 's-order-totals-card-total-label', 's-order-totals-card-total-value', true)), refundAmount > 0 ? (h("div", { class: "s-order-totals-card-refund" }, this.renderRefundRow(summary.refund_amount))) : null)))));
     }
     static get is() { return "salla-order-totals-card"; }
     static get originalStyleUrls() {

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

@@ -3,6 +3,8 @@
  */
 import { h } from "@stencil/core";
 import Helper from "../../Helpers/Helper";
+import { moneyHtml } from "../../Helpers/money-text";
+import { addMissingTranslations } from "../../Helpers/translate";
 const FEEDBACK_STATUS_WAITING = 'waiting';
 const TAB_QUERY_PARAM = 'tab';
 const SHOW_EXTERNAL_ORDERS_FEATURE = 'show-external-orders';
@@ -52,7 +54,11 @@ export class SallaOrder {
         this.reviewPoints = 0;
         this.filterGeneration = 0;
         this.showExternalOrders = false;
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            addMissingTranslations(LANG_DEFAULTS);
+            this.refreshReviewLabels();
             this.languageCode = salla.lang.locale;
             this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
             this.totalOrderText = salla.lang.get('pages.orders.total');
@@ -62,6 +68,9 @@ export class SallaOrder {
             this.load_more_text_trans = salla.lang.get('common.elements.load_more');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     setLoadMoreLoading(isLoading = true) {
         const buttonText = this.status?.querySelector('.s-button-text');
         if (!buttonText || !this.btnLoader)
@@ -362,7 +371,9 @@ export class SallaOrder {
         span4.classList.add('s-orders-mobile-title');
         span4.textContent = `${this.totalOrderText}:`;
         const div4 = document.createElement('div');
-        div4.innerHTML = salla.money(order.total);
+        // In the order's own currency: salla.money alone falls back to the selected market's currency
+        // when the page config does not list the order currency (Multimarket).
+        div4.innerHTML = moneyHtml(Number(order.total?.amount), order.total?.currency);
         const anchor2 = document.createElement('a');
         if (order.url)
             anchor2.href = order.url;
@@ -463,10 +474,6 @@ export class SallaOrder {
         this.populateOrdersTableIfEmpty();
     }
     componentWillLoad() {
-        salla.lang.onLoaded(() => {
-            salla.lang.addBulk(LANG_DEFAULTS);
-            this.refreshReviewLabels();
-        });
         return salla.onReady().then(() => {
             this.setupLoyalty();
             this.showExternalOrders = salla.config

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, forceUpdate } from "@stencil/core";
 import Inbox from "../../assets/svg/inbox.svg";
 /**
  * @slot title - The primary content of the placeholder.
@@ -22,10 +22,17 @@ export class SallaPlaceholder {
           * The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
           */
         this.iconSize = 'md';
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.translationLoaded = true;
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     alignmentClass() {
         return {
             's-placeholder-wrapper': true,
@@ -35,7 +42,7 @@ export class SallaPlaceholder {
         };
     }
     render() {
-        return (h(Host, { key: '7680e249ef9627c8c53c1fcbd02bb942d3f650a4', class: this.alignmentClass() }, h("div", { key: '17df509f27879794ea37172826489033ddb85045', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '117de24add832359f0a046a5e67b16748e25572d', class: "s-placeholder-title" }, h("slot", { key: '3bc517f00c6427a1103f859b58e9763f10851f4d', name: 'title' }, h("span", { key: '17615872d9b5e03d9b33d01fde5e1753f5f7a97e' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '962eafb62268b4ae3e25610a0dec6734ac58378a', class: "s-placeholder-description" }, h("slot", { key: '6326fdee550361c7cf6be95f1da2baf5616bd0f4', name: 'description' }, h("span", { key: '179fbe8c4352fad27a88b39baa6d858075006bfe' }, salla.lang.get('common.errors.empty_results'))))));
+        return (h(Host, { key: 'e0ddbbcae1f1770e0aa1fde820b80f010b837c70', class: this.alignmentClass() }, h("div", { key: '42aaa39f4b5ff6e854d8752fd8b7f51967a61640', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '89b58694c6e8e52df2a6cfcf53f928e8e1be65cc', class: "s-placeholder-title" }, h("slot", { key: '810a0cbc0338a430f48e0478d855baef78368d30', name: 'title' }, h("span", { key: '29f370d5460607afd3ad8971afb8387e3ab8ccd7' }, salla.lang.get('common.elements.no_options')))), h("div", { key: 'daabc9a39c770605c2b0a18a8e32c9b77cd28387', class: "s-placeholder-description" }, h("slot", { key: 'b318ca5417191c0e78eaab5e814dbc393679b416', name: 'description' }, h("span", { key: '1f616f82f63bbe79d7f88ae83544ce0ab97aa9fb' }, salla.lang.get('common.errors.empty_results'))))));
     }
     static get is() { return "salla-placeholder"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-price-range/salla-price-range.js

@@ -22,7 +22,7 @@ export class SallaPriceRange {
             this.minPrice = this.filtersData.price.min;
             this.maxPrice = this.filtersData.price.max;
         }
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
             this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
             this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
@@ -49,6 +49,9 @@ export class SallaPriceRange {
             // do whatever
         }
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * reset the price range inputs
      */
@@ -146,9 +149,9 @@ export class SallaPriceRange {
         this.maxPrice = value === undefined ? '' : value;
     }
     render() {
-        return (h(Host, { key: '582547be2a058bd2ab9c8567b5925f25711e1aff' }, this.filterValues.map((filterValue, index) => {
+        return (h(Host, { key: '58b6733af46dcfc2f58f6096a3054512aea0f13a' }, this.filterValues.map((filterValue, index) => {
             return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
-        }), h("div", { key: '36dea18b1f8f9b9c11a235328d6019cdb0ea5d9d', class: "flex justify-center items-center" }, h("div", { key: '765c5a4eca4cb39b47cba341e8c8f7b7888f0072', class: "relative max-w-xl w-full" }, h("div", { key: '24c54bcec699865a391f198d701abcdcf40bd438', class: "s-price-range-inputs" }, h("div", { key: '962c157d0d7df4f096eed09b51618f3bdadaa347', class: "s-price-range-relative" }, h("div", { key: 'e39123015563b93553be0498673245311644f178', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '4dadf22dc8ad4a982a07acdbb5b62b28b46aa49a', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '1aea9954befb49f6c9f3f0b1d20ce04defa352b9', class: "s-price-range-gray-text" }, " -"), h("div", { key: 'c4ed3a532ab1c780e69bcadd96ed9581e0a69a85', class: "s-price-range-relative" }, h("div", { key: '3489752cc4de7fb82e758bf877959d7c34094d28', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '9f06151e1156553f0a45283c0db0af92c269c110', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '1496f0eb951492d3eaad51c90bc1234d746d748c', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: '9efb20a46dae252c5e82bb52f0bcb57c8e030c99', innerHTML: this.isRTL ? arrowLeft : arrowRight })))))));
+        }), h("div", { key: 'ffac46ec70c43e8e6866c27e7885700d8b84e02e', class: "flex justify-center items-center" }, h("div", { key: 'a44f86c833a9311fdbd043bacab3c8e39a3798a3', class: "relative max-w-xl w-full" }, h("div", { key: '58da7b0ff0bd6599660ddf2aa2b6f1c06fbd4e3a', class: "s-price-range-inputs" }, h("div", { key: 'f6cc6ea7bc4fa74b962adc29fd0f496a81ff7f98', class: "s-price-range-relative" }, h("div", { key: 'c5dcb135e50a0eafb9662deb3adde895ea997fa9', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'ddc438e870e21a030984ba5422d686ee0d756b9a', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '713b4a7ba19e6c00a57b20978813dbd250acec6d', class: "s-price-range-gray-text" }, " -"), h("div", { key: '8a87cb916d418b898747b7dfe63d770419892ec1', class: "s-price-range-relative" }, h("div", { key: 'fb1790fdc5494925560a4ce8be907f980090ceff', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '164c84322ccf6fdddc2cb93f40440e4ddab9c164', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: 'cfb8f9d06b1b66170bddfebcd5bc0fea6bdcb9ff', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: '1c1251cc2becb339ee3f286d3be50acc5ea159c0', innerHTML: this.isRTL ? arrowLeft : arrowRight })))))));
     }
     componentDidLoad() {
         this.isReady = true;

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, forceUpdate } from "@stencil/core";
 import BellRingIcon from "../../assets/svg/bell-ring.svg";
 import Helper from "../../Helpers/Helper";
 export class SallaProductAvailability {
@@ -45,11 +45,8 @@ export class SallaProductAvailability {
             error?.classList.contains('s-product-availability-error-msg') && (error.innerText = '');
             e.keyCode === 13 && this.submit();
         };
-        salla.lang.onLoaded(() => {
-            this.translationLoaded = true;
-            this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-            this.modal?.setTitle(this.title_);
-        });
+        // Read before the guest path below strips the attribute; the lang subscriber runs later, from connectedCallback.
+        this.hostTitle = this.host.title;
         if (!this.productId) {
             this.productId = salla.config.get('page.id');
         }
@@ -59,6 +56,18 @@ export class SallaProductAvailability {
         this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
         this.host.removeAttribute('title');
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.translationLoaded = true;
+            this.title_ = this.hostTitle || salla.lang.get('pages.products.notify_availability_title');
+            this.modal?.setTitle(this.title_);
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     channelsWatcher(newValue) {
         // fall back to store-configured channels, reading config directly when the SDK helper is missing
         let channels = newValue || salla.api.product.getAvailabilityChannels?.() || Helper.availabilityChannels();
@@ -137,7 +146,7 @@ export class SallaProductAvailability {
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: 'ba2423b2f12f2c6b3870c55b12157bbcf42407e8', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: 'aa9fad186e8f24c5e27a1e9e6d5de75806226bce', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribedToProduct ? '' : this.renderModal()));