@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/components/salla-loyalty.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
 import { R as Rate } from './star2.js';
 import { C as Cancel } from './cancel.js';
 import { d as defineCustomElement$b } from './salla-button2.js';
@@ -95,16 +95,23 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
         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/components/salla-map2.js

@@ -477,16 +477,21 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
          * 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;
@@ -758,11 +763,11 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
     }
     // 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 : SILocation }), 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 : SILocation }), 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) })));
     }
     get host() { return this; }
     static get style() { return sallaMapCss; }

package/dist/components/salla-notifications.js

@@ -20,11 +20,16 @@ const SallaNotifications$1 = /*@__PURE__*/ proxyCustomElement(class SallaNotific
         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/components/salla-offer-modal.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
 import { t as translate } from './translate.js';
 import { S as SpecialDiscountIcon } from './special-discount.js';
 import { T as Tag } from './tag.js';
@@ -41,10 +41,6 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(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));
@@ -56,6 +52,17 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(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
@@ -253,7 +260,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(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/components/salla-offer.js

@@ -69,8 +69,16 @@ const SallaOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaOffer extends H
         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');
@@ -86,12 +94,9 @@ const SallaOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaOffer extends H
             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/components/salla-order-branch.js

@@ -63,7 +63,7 @@ var phoneTalkingIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaOrderBranchCss = "/*!twlt*/:host{display:block}.s-order-branch-ready{background-color:color-mix(in srgb, var(--color-primary) 30%, transparent)}.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)}.s-order-branch-wrapper{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem;font-family:inherit}.s-order-branch-container{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-items:stretch;gap:1rem}@media (min-width: 768px){.s-order-branch-container{grid-template-columns:repeat(2, minmax(0, 1fr))}}.s-order-branch-details{display:grid;align-content:stretch;gap:1rem}.s-order-branch-info-card{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:0.75rem}.s-order-branch-info-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:3px;text-align:start}.s-order-branch-info-label{font-size:0.75rem;line-height:1rem;line-height:1.35;color:var(--color-text-secondary,#666)}.s-order-branch-info-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.875rem;line-height:1.25rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-hours-card .s-order-branch-info-text{gap:0.5rem}.s-order-branch-hours-list{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-hours-item{display:inline-flex;align-items:center;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-border,#eee);padding-left:0.625rem;padding-right:0.625rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-info-action{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:0.5rem;background-color:var(--color-surface-secondary,#f6f6f6);color:var(--color-text-primary,#2b2d34);text-decoration-line:none}.s-order-branch-info-icon{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:22px;color:currentColor}.s-order-branch-info-icon svg{height:1.5rem;width:1.5rem;fill:currentColor}.s-order-branch-card{display:flex;flex-direction:column;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:1rem}@media (min-width: 768px){.s-order-branch-card{padding:1.25rem}}.s-order-branch-ready{display:inline-flex;flex-shrink:0;align-items:center;white-space:nowrap;border-radius:9999px;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.75rem;padding-right:0.75rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--color-primary-dark,#0c2519)}.s-order-branch-location{display:flex;min-height:52px;flex-direction:column;align-items:stretch;justify-content:space-between;gap:1.5rem}@media (min-width: 768px){.s-order-branch-location{flex-direction:row;align-items:center}}.s-order-branch-identity{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:0.75rem}.s-order-branch-store-icon{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:1.5rem;line-height:2rem;color:var(--color-text-primary,#2b2d34)}.s-order-branch-store-icon svg{height:1em;width:1em;fill:currentColor}.s-order-branch-text{display:flex;min-width:0px;flex-direction:column;gap:0.25rem;text-align:start}.s-order-branch-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#2b2d34)}.s-order-branch-address{overflow-wrap:break-word;font-size:0.75rem;line-height:1rem;line-height:1.45;color:var(--color-text-secondary,#666)}.s-order-branch-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:0.75rem}@media (min-width: 768px){.s-order-branch-actions{flex-wrap:nowrap}}.s-order-branch-map-link{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;line-height:1.2;color:var(--color-primary,#236e4c);text-decoration-line:none}.s-order-branch-action-icon{display:inline-flex;align-items:center;justify-content:center;font-size:0.875rem;line-height:1.25rem;color:currentColor}.s-order-branch-action-icon svg{height:1em;width:1em}";
+const sallaOrderBranchCss = "/*!twlt*/:host{display:block}.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)}.s-order-branch-wrapper{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem;font-family:inherit}.s-order-branch-container{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-items:stretch;gap:1rem}@media (min-width: 768px){.s-order-branch-container{grid-template-columns:repeat(2, minmax(0, 1fr))}}.s-order-branch-details{display:grid;align-content:stretch;gap:1rem}.s-order-branch-info-card{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:0.75rem}.s-order-branch-info-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:3px;text-align:start}.s-order-branch-info-label{font-size:0.75rem;line-height:1rem;line-height:1.35;color:var(--color-text-secondary,#666)}.s-order-branch-info-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.875rem;line-height:1.25rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-hours-card .s-order-branch-info-text{gap:0.5rem}.s-order-branch-hours-list{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-hours-item{display:inline-flex;align-items:center;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-border,#eee);padding-left:0.625rem;padding-right:0.625rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-info-action{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:0.5rem;background-color:var(--color-surface-secondary,#f6f6f6);color:var(--color-text-primary,#2b2d34);text-decoration-line:none}.s-order-branch-info-icon{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:22px;color:currentColor}.s-order-branch-info-icon svg{height:1.5rem;width:1.5rem;fill:currentColor}.s-order-branch-card{display:flex;flex-direction:column;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:1rem}@media (min-width: 768px){.s-order-branch-card{padding:1.25rem}}.s-order-branch-ready{display:inline-flex;flex-shrink:0;align-items:center;white-space:nowrap;border-radius:9999px;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.75rem;padding-right:0.75rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--color-primary-dark,#0c2519)}.s-order-branch-location{display:flex;min-height:52px;flex-direction:column;align-items:stretch;justify-content:space-between;gap:1.5rem}@media (min-width: 768px){.s-order-branch-location{flex-direction:row;align-items:center}}.s-order-branch-identity{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:0.75rem}.s-order-branch-store-icon{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:1.5rem;line-height:2rem;color:var(--color-text-primary,#2b2d34)}.s-order-branch-store-icon svg{height:1em;width:1em;fill:currentColor}.s-order-branch-text{display:flex;min-width:0px;flex-direction:column;gap:0.25rem;text-align:start}.s-order-branch-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#2b2d34)}.s-order-branch-address{overflow-wrap:break-word;font-size:0.75rem;line-height:1rem;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;flex-wrap:wrap;align-items:center;gap:0.75rem}@media (min-width: 768px){.s-order-branch-actions{flex-wrap:nowrap}}.s-order-branch-map-link{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;line-height:1.2;color:var(--color-primary,#236e4c);text-decoration-line:none}.s-order-branch-action-icon{display:inline-flex;align-items:center;justify-content:center;font-size:0.875rem;line-height:1.25rem;color:currentColor}.s-order-branch-action-icon svg{height:1em;width:1em}";
 
 const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBranch extends HTMLElement {
     constructor() {
@@ -72,10 +72,33 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
         /** 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)
@@ -111,6 +134,11 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
     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)
@@ -158,6 +186,16 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
     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)
@@ -168,13 +206,13 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
         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/components/salla-order-summary.js

@@ -40,13 +40,15 @@ const SallaOrderSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderSum
         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) {
@@ -84,10 +86,11 @@ const SallaOrderSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderSum
         }
     }
     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 ? IconVerified : 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/components/salla-order-totals-card.js

@@ -43,21 +43,28 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
     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 watchers() { return {
         "order": ["handleOrderChange"]

package/dist/components/salla-orders.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
+import { a as addMissingTranslations } from './translate.js';
 import { d as defineCustomElement$c } from './salla-attachment-view2.js';
 import { d as defineCustomElement$b } from './salla-button2.js';
 import { d as defineCustomElement$a } from './salla-file-upload2.js';
@@ -15,6 +16,34 @@ import { d as defineCustomElement$4 } from './salla-rating-stars2.js';
 import { d as defineCustomElement$3 } from './salla-skeleton2.js';
 import { d as defineCustomElement$2 } from './salla-slider2.js';
 
+const escapeHtml = (value) => String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+/** Riyal icon swap, the same rule `salla.money()` applies when the store enables `use_sar_symbol`. */
+const withSarIcon = (html) => salla?.config?.get?.('store.settings.use_sar_symbol') ? html.replace(/SAR|ر\.س\.?/g, '<i class=sicon-sar></i>') : html;
+/**
+ * Money in a given currency as HTML, without ever borrowing another currency's symbol.
+ * `salla.money()` resolves currencies from the page config, which under Multimarket only holds the
+ * selected market's currencies, and silently falls back to them — so an order placed in SAR (or KWD)
+ * would show the current market's symbol. Known currencies keep `salla.money()`'s store formatting;
+ * unknown ones use the ISO symbol from `Intl`, separated by a non-breaking space.
+ */
+function moneyHtml(amount, currency) {
+    // Only bypass salla.money when the page's currency list is known and lacks this code.
+    const currencies = salla?.config?.get?.('currencies');
+    if (!currency || !currencies || typeof currencies !== 'object' || currencies[currency]) {
+        return salla.money({ amount, currency });
+    }
+    let symbol = currency;
+    try {
+        symbol = new Intl.NumberFormat(salla?.lang?.locale || 'ar', { style: 'currency', currency, currencyDisplay: 'narrowSymbol' })
+            .formatToParts(0)
+            .find(part => part.type === 'currency')?.value || currency;
+    }
+    catch {
+        // unknown ISO code: show the code itself
+    }
+    return withSarIcon(`${escapeHtml(salla.helpers.number(amount))} ${escapeHtml(symbol)}`);
+}
+
 const sallaOrdersCss = "/*!twlt*/:host{display:block}.s-orders-banner{display:flex;align-items:center;gap:0.625rem;width:100%;margin-top:1.5rem;margin-bottom:0.75rem;padding:0.75rem;border-radius:0.5rem;background-color:#E6F4EA}.s-orders-banner-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:#1B7F5C}.s-orders-banner-icon svg{width:1.5rem;height:1.5rem;fill:currentColor}.s-orders-banner-text{flex:1;margin:0;font-size:0.875rem;line-height:1.25rem;color:#1f2937}.s-orders-action-cell.s-orders-action-cell{display:flex;align-items:center;justify-content:flex-end}.s-orders-leave-review-btn .s-button-text{display:flex;align-items:center;gap:0.375rem}.s-orders-action-cell .s-orders-status-rated{margin-inline-start:auto}.relative{position:relative}.table{display:table}.outline{outline-style:solid}.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)}.s-button-btn{position:relative;display:inline-flex;flex:1 1 0%;user-select:none;flex-direction:row-reverse;align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--s-radius, 0.25rem);border-style:solid;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-button-btn:hover{opacity:0.8}.s-button-primary{border-width:1px;border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-primary-reverse)}.s-button-primary:hover{background-color:var(--color-primary-dark)}.s-button-text{pointer-events:none;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-button-loader{margin-left:0.5rem;margin-right:0.5rem;display:flex;align-items:center;justify-content:center;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-button-loader::before{display:inline-block;height:1rem;content:var(--tw-content);width:1rem}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.s-button-loader::before{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-style:solid;border-top-color:var(--color-primary);border-left-color:var(--color-primary);border-bottom-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-border-opacity:1;border-right-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;margin:0px !important;--tw-translate-y:-50%;--tw-translate-x:-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))}.s-comments-item-like-btn .s-button-text{display:flex;flex-direction:row-reverse;gap:0.5rem}.s-orders-container>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.625rem * var(--tw-space-y-reverse))}@media (min-width: 768px){.s-orders-container>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}}.s-orders-mobile-title{display:inline-block;width:8rem;font-weight:400;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.s-orders-mobile-title{display:none}}.s-orders-reference-id{display:none}@media (min-width: 768px){.s-orders-reference-id{display:inline-block}}.s-orders-buy-as-gift-icon{margin-left:0.25rem;margin-right:0.25rem;display:inline-block;color:var(--color-primary)}.s-orders-copy-to-clipboard-button{display:flex;align-items:center}@media (min-width: 768px){.s-orders-copy-to-clipboard-button{display:none}}.s-orders-copy-to-clipboard-button salla-button{position:relative}.s-orders-copy-to-clipboard-button-icon{pointer-events:none;font-size:0.75rem;line-height:1rem}.s-orders-copy-to-clipboard-button-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:0.25rem}.s-orders-copy-to-clipboard-button-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:0.25rem}@media (min-width: 768px){.s-orders-status-container{margin-left:0px;margin-right:0px}}.s-orders-status-container:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:auto}.s-orders-status-container:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:auto}.s-orders-status-container i{margin-top:0.25rem}.s-orders-status-container i:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.25rem}.s-orders-status-container i:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.25rem}.s-orders-status-rated{font-size:1.125rem;line-height:1.75rem}.s-orders-status-rated:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:1rem}.s-orders-status-rated:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:1rem}.s-orders-rated-text{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.s-orders-unrated-text{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.s-orders-leave-review-btn{display:inline-flex;flex-shrink:0;align-items:center;gap:0.25rem;font-weight:700;color:var(--color-primary);transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-orders-leave-review-btn:hover{opacity:0.7}.s-orders-leave-review-btn:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:1rem}.s-orders-leave-review-btn:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:1rem}.s-orders-review-star-icon{font-size:1.125rem;line-height:1.75rem}.s-orders-no-content{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding-top:2.5rem;padding-bottom:5rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-orders-no-content .icon{margin-bottom:1rem;display:flex;height:8rem;width:8rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:3rem;line-height:1;--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.s-orders-no-content p{margin-bottom:1rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-orders-filters{margin-bottom:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-orders-list-wrapper{position:relative}.s-orders-list-loading{position:absolute;inset:0px;z-index:10;display:flex;align-items:center;justify-content:center;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity:0.1}.s-orders-table{min-width:100%;border-collapse:separate}@media (min-width: 768px){.s-orders-table{margin-bottom:-0.75rem;--tw-border-spacing-y:1.25rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}}.s-orders-table-fetching{pointer-events:none;opacity:0.4;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms}.s-orders-table-head{margin-bottom:1.25rem;display:none;--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (min-width: 768px){.s-orders-table-head{display:table-header-group}}.s-orders-table-head-tr-th{padding-left:1.5rem;padding-right:1.5rem;text-align:start;font-size:0.875rem;line-height:1.25rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.s-orders-table-head-tr-th:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:left}.s-orders-table-head-tr-th:last-child:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:right}.s-orders-table-head-tr-th:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}.s-orders-table-head-tr-th:last-child:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:left}.s-orders-table-tbody-tr{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;overflow:hidden;border-radius:var(--s-radius, 0.25rem);border-bottom-width:8px;border-top-width:8px;--tw-border-opacity:1;border-color:rgb(249 250 251 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.5rem;transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms}@media (min-width: 768px){.s-orders-table-tbody-tr{display:table-row;flex-direction:row;flex-wrap:nowrap;padding:0px}}.s-orders-table-tbody-tr-shadow:hover{box-shadow:5px 10px 30px #2b2d340d}.s-orders-table-tbody-tr-td{width:100%;white-space:nowrap;font-size:0.875rem;line-height:1.25rem}.s-orders-table-tbody-tr-td:first-child{font-weight:700}@media (min-width: 768px){.s-orders-table-tbody-tr-td{height:5rem;width:auto}.s-orders-table-tbody-tr-td:last-child{text-align:end}.s-orders-table-tbody-tr-td:first-child:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-left-radius:0.375rem;border-bottom-left-radius:0.375rem}.s-orders-table-tbody-tr-td:first-child:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-right-radius:0.375rem;border-bottom-right-radius:0.375rem}}.s-orders-table-tbody-tr-td:first-child{font-weight:700}.s-orders-table-tbody-tr-td-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem}@media (min-width: 768px){.s-orders-table-tbody-tr-td-content{padding-left:1.5rem;padding-right:1.5rem;padding-top:1.5rem;padding-bottom:1.5rem}}.s-orders-table-tbody-tr a{position:absolute;top:0px;bottom:0px;display:block;width:100%}.s-orders-table-tbody-tr a:where([dir=\"ltr\"],[dir=\"ltr\"] *){left:0px}.s-orders-table-tbody-tr a:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:0px}";
 
 const sallaInfiniteScrollCss = "/*!twlt*/.s-button-btn{position:relative;display:inline-flex;flex:1 1 0%;user-select:none;flex-direction:row-reverse;align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--s-radius, 0.25rem);border-style:solid;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-button-btn:hover{opacity:0.8}.s-button-primary{border-width:1px;border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-primary-reverse)}.s-button-primary:hover{background-color:var(--color-primary-dark)}.s-button-text{pointer-events:none;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-button-loader{margin-left:0.5rem;margin-right:0.5rem;display:flex;align-items:center;justify-content:center;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-button-loader::before{display:inline-block;height:1rem;content:var(--tw-content);width:1rem}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.s-button-loader::before{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-style:solid;border-top-color:var(--color-primary);border-left-color:var(--color-primary);border-bottom-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-border-opacity:1;border-right-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;margin:0px !important;--tw-translate-y:-50%;--tw-translate-x:-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))}.s-comments-item-like-btn .s-button-text{display:flex;flex-direction:row-reverse;gap:0.5rem}.s-infinite-scroll-wrapper{margin-top:1rem;text-align:center}.s-infinite-scroll-last{margin:0px;text-align:center}.s-infinite-scroll-error{margin:0px;text-align:center}";
@@ -70,7 +99,11 @@ const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTM
         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');
@@ -80,6 +113,9 @@ const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTM
             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)
@@ -380,7 +416,9 @@ const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTM
         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;
@@ -481,10 +519,6 @@ const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTM
         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/components/salla-placeholder2.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 
 var Inbox = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -29,10 +29,17 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(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,
@@ -42,7 +49,7 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(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 style() { return sallaPlaceholderCss; }
 }, [4, "salla-placeholder", {

package/dist/components/salla-price-range2.js

@@ -29,7 +29,7 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
             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);
@@ -56,6 +56,9 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
             // do whatever
         }
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * reset the price range inputs
      */
@@ -153,9 +156,9 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
         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 ? IconArrowLeft : 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 ? IconArrowLeft : arrowRight })))))));
     }
     componentDidLoad() {
         this.isReady = true;

package/dist/components/salla-product-availability2.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { B as BellRing } from './bell-ring.js';
 import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$4 } from './salla-button2.js';
@@ -54,11 +54,8 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
             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');
         }
@@ -68,6 +65,18 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
         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();
@@ -146,7 +155,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
         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: BellRing, 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()));