@salla.sa/twilight-components 2.14.596 → 2.14.597

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

@@ -46,7 +46,7 @@ export class SallaOrderTotalsCard {
             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, ''), summary.has_remaining_amount && summary.paid_amount
             ? this.renderTotalRow(salla.lang.get('pages.orders.partially_paid'), summary.paid_amount, '')
             : null, summary.remaining_amount
             ? this.renderTotalRow(salla.lang.get('pages.orders.remaining_amount'), summary.remaining_amount, '')

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

@@ -3,6 +3,7 @@
  */
 import { h } from "@stencil/core";
 import Helper from "../../Helpers/Helper";
+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 +53,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 +67,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)
@@ -463,10 +471,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()));

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

@@ -35,14 +35,6 @@ export class SallaProductCard {
             salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));
             this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
         });
-        // Language
-        salla.lang.onLoaded(() => {
-            this.remained = salla.lang.get('pages.products.remained');
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.startingPrice = salla.lang.get('pages.products.starting_price');
-            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
-            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
-        });
         // Parse product data
         if (!this.product) {
             return;
@@ -54,6 +46,19 @@ export class SallaProductCard {
             salla.log('Bad json passed via product prop');
         }
     }
+    connectedCallback() {
+        // Language
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.remained = salla.lang.get('pages.products.remained');
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.startingPrice = salla.lang.get('pages.products.starting_price');
+            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
+            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Private Methods
     initCircleBar() {
         let qty = this.productData.quantity, total = this.productData.quantity > 100 ? this.productData.quantity * 2 : 100, roundPercent = (qty / total) * 100, bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'), strokeDashOffsetValue = 100 - roundPercent;
@@ -212,7 +217,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Product information."
+                    "text": "The product data to display. Can be a JSON string or a product object containing id, name, image, price, etc."
                 },
                 "getter": false,
                 "setter": false,
@@ -231,7 +236,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Horizontal card."
+                    "text": "Whether to display the card in horizontal (landscape) layout. Default is false (vertical layout)."
                 },
                 "getter": false,
                 "setter": false,
@@ -250,7 +255,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Support shadow on hover."
+                    "text": "Whether to add a shadow effect on hover. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -269,7 +274,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Hide add to cart button."
+                    "text": "Whether to hide the \"Add to Cart\" button. Default is false (button is shown)."
                 },
                 "getter": false,
                 "setter": false,
@@ -288,7 +293,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Full image card."
+                    "text": "Whether to use a full-image card style where the image covers the entire card. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -307,7 +312,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Minimal card."
+                    "text": "Whether to use a minimal card style with reduced information. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -326,7 +331,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Special card."
+                    "text": "Whether this is a special/featured product card with additional styling (like quantity pie chart). Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -345,7 +350,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show quantity."
+                    "text": "Whether to show the product quantity in a badge. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -364,7 +369,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Compact list layout for drawers and lists."
+                    "text": "Whether to use a compact card layout suitable for drawers and lists. Default is false."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -107,12 +107,6 @@ export class SallaProductOptions {
             const completed = option.donation.target_amount <= option.donation.collected_amount;
             return h("div", { class: { "s-product-options-donation-message": true, "s-product-options-donation-completed": completed, "s-product-options-donation-expired": !completed } }, h("p", null, option.donation.target_message), h("span", { innerHTML: completed ? salla.money(option.donation.target_amount) : '' }));
         };
-        salla.lang.onLoaded(() => {
-            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
-            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
-        });
         if (this.options) {
             try {
                 this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));
@@ -133,6 +127,14 @@ export class SallaProductOptions {
             });
         }
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        });
+    }
     /**
      * Sets the options data for the product
      * @param optionsData - Array of product options
@@ -513,6 +515,7 @@ export class SallaProductOptions {
         return needsCartId ? salla.api.cart.getCurrentCartId(false, "salla-product-options") : null;
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.pasteHandler) {
             document.removeEventListener("paste", this.pasteHandler);
         }

package/dist/collection/components/salla-product-size-guide/salla-product-size-guide.js

@@ -11,12 +11,17 @@ export class SallaProductSizeGuide {
     constructor() {
         this.hasError = false;
         salla.event.on('size-guide::open', (product_id) => this.open(product_id));
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
             this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
             this.modal_title = salla.lang.get('pages.products.size_guides');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * Show the size-guide modal window
      */
@@ -45,11 +50,11 @@ export class SallaProductSizeGuide {
         return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
     }
     render() {
-        return (h("salla-modal", { key: 'de368aff05a19d87eb4e99f4e1d7eee36155f435', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: 'c4ab31b3e6ef2751761ca2db27554f7f5bf057fc', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '17cfceb5ccb0546928f87f956267e9d0c11017ac', slot: "loading" }, h("div", { key: '4f4e20a62396d7825315203ffd22a72030e821b1', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'd9132b26634ae1997dad9f1229b248c2cd76fff0', height: '15px', width: '25%' }), h("div", { key: '1b6a236851eef6e7caf7b7a0e84e591824b4e4ef', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'bae06741881b57b4eb853f1256a22f9393d9cea4', height: '40px' }), h("salla-skeleton", { key: 'fdeb75a853f89df154b69dbd48fc8e233561af59', height: '40px' }), h("salla-skeleton", { key: 'd0be70bc141f04fd24adc86c56eec3a5e896f2d4', height: '40px' }), h("salla-skeleton", { key: 'c5146addbf2d5b9bda05170a9743cad0e08d8674', height: '40px' })), h("div", { key: '04dbbffe2de708c984c5d0966aa2b86c0051bd14', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '320fb33a2e5d9ee1f4b87c18b3f3dd13de180d4f', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f06aeac8e2f8ea86ec9b1c5c6f2b31172f23209f', height: '10px', width: '75%' }), h("salla-skeleton", { key: '1accf852a34edcac77a77151ebf67ba8e05cc729', height: '10px', width: '50%' }), h("salla-skeleton", { key: '42d4c3364779a6ee130339e37affe2e0c590e6a7', height: '10px', width: '75%' }), h("salla-skeleton", { key: '13064a231460414b4a0abd19dda41b01ac1ee04f', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'd5a50f96ca3bab125503f836cd883cfb98ca135d', height: '10px', width: '25%' }), h("salla-skeleton", { key: '11cd2ed36d9754c32173f14cd7d5ea99fc2b5577', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'a5b3a192d0e38dc13a025b8b8e0aba767f35611b', height: '10px', width: '45%' }), h("salla-skeleton", { key: 'dddcb26038e180fb5b686b29d286316d4314909f', height: '10px', width: '30%' })))), h("slot", { key: '43a08b9b6e64955b726b832f0849617ac31d4c25', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: '587dbc28fa828df2a47a4db1c124df032fe719fa', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '822224aa89fb065c7262abf2f24914ed1fa3d8bb', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '84e14a400f9417aa9be851a07f0203348a560aec', slot: "loading" }, h("div", { key: '5cbdbcf560f08279543c4d25fd21416ce2da1314', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'e3139f2898256adc2c20fbb86e96a9f5d008a677', height: '15px', width: '25%' }), h("div", { key: '961f482bf358c5a4ca0d980561bafdcd7489fa68', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '1754361211a771952be69eeda9a4c9788aaff0e6', height: '40px' }), h("salla-skeleton", { key: '2ea3578f8751a2526947d5c067392ef95e3bcf44', height: '40px' }), h("salla-skeleton", { key: '32bba195c5f6a60ce9837b4d4cbfa302d6ddfb07', height: '40px' }), h("salla-skeleton", { key: '9888b01cd47c5acdc0a159ad49db228efd630d75', height: '40px' })), h("div", { key: 'd86e706b2393b17301f9f28b4b303f00bf743363', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '02e0330958fd73288d5c654fce7169470cdf47cd', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'cccb8bc372c6ccfdf707621190bba4bc38aecb99', height: '10px', width: '75%' }), h("salla-skeleton", { key: '95f8e83b3b1a54a52da1ff2e61a866239575cf7b', height: '10px', width: '50%' }), h("salla-skeleton", { key: '4880b1d82cea617cae837ad2d6dd4d627fe8d9e3', height: '10px', width: '75%' }), h("salla-skeleton", { key: '38980cc41e7388b41e35015ceed72d025bd82980', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'bb1ad6a995e9e27b851007cae2c1f7204f3c2d91', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'fc5cd1e7adafca96e00b9284123bb3eb9f892c9c', height: '10px', width: '60%' }), h("salla-skeleton", { key: '89bbd77ec6da0c8e03dd2fb9f60c929f49415c83', height: '10px', width: '45%' }), h("salla-skeleton", { key: '0666ce266b9411913ae4db64c61d3cfa44cf4245', height: '10px', width: '30%' })))), h("slot", { key: '31a338bdc12e2a4ea1f80ea4bd700e293020b840', name: "header" }), !this.hasError && !!this.guides ?
             [
                 h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
             ]
-            : this.showPlaceholder(), h("slot", { key: '5ae0956ca1f9313b5ef3d01dbdcab32f2e975e05', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: '887b97cd58b442db20dad02db8ace42847bcef75', name: "footer" })));
     }
     static get is() { return "salla-product-size-guide"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-products-list/salla-products-list.js

@@ -101,14 +101,14 @@ export class SallaProductsList {
             this.includes = null;
         }
         Helper.setIncludes(this.includes);
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeholderText = salla.lang.get('pages.categories.no_products');
             this.endOfText = salla.lang.get('common.elements.end_of_content');
             this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
             this.currentPage = salla.config.get('page');
         });
-    }
-    connectedCallback() {
         //Override browser scroll restoration default behaviour
         if ('scrollRestoration' in history)
             history.scrollRestoration = 'manual';
@@ -119,6 +119,7 @@ export class SallaProductsList {
         salla.event.on('wishlist::storage.synced', this.onWishlistStorageSynced);
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         window.removeEventListener('scroll', this.boundHandleScroll);
         salla.event.off('wishlist::removed', this.onWishlistItemRemoved);

package/dist/collection/components/salla-progress-bar/salla-progress-bar.js

@@ -4,6 +4,9 @@
 import { h } from "@stencil/core";
 export class SallaProgressBar {
     constructor() {
+        // set when the constructor builds the donation-target labels, so the subscriber can rebuild them
+        this.hasDonationTarget = false;
+        this.donationEndDate = null;
         /**
          * Set height for the wrapper.
          */
@@ -15,6 +18,8 @@ export class SallaProgressBar {
                     donationJson.target_end_date = donationJson.target_end_date == '0000-00-00' ? null : donationJson.target_end_date;
                     this.value = donationJson.collected_amount;
                     this.target = donationJson.target_amount;
+                    this.hasDonationTarget = true;
+                    this.donationEndDate = donationJson.target_end_date;
                     this.header = salla.lang.get('pages.products.target');
                     this.message = donationJson.target_end_date ? salla.lang.get('pages.products.donation_target_date') + ' ' + donationJson.target_end_date : '';
                 }
@@ -29,10 +34,6 @@ export class SallaProgressBar {
         catch (e) {
             salla.log('Wrong donation json');
         }
-        salla.lang.onLoaded(() => {
-            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
-            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
-        });
         salla.onReady(() => {
             this.color = this.color || salla.config.get('theme.color.primary', "#ffd5c4");
             if (!this.unit) {
@@ -40,6 +41,21 @@ export class SallaProgressBar {
             }
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            if (this.hasDonationTarget) {
+                // rebuilt each time: once translated, the text no longer holds the keys replaced below
+                this.header = salla.lang.get('pages.products.target');
+                this.message = this.donationEndDate ? salla.lang.get('pages.products.donation_target_date') + ' ' + this.donationEndDate : '';
+                return;
+            }
+            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
+            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getPercentage() {
         return (this.value / this.target) * 100;
     }

package/dist/collection/components/salla-quick-buy/salla-quick-buy.js

@@ -79,10 +79,15 @@ export class SallaQuickBuy {
             });
             return true;
         };
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.quickBuy = salla.lang.get('pages.products.buy_now');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     quickBuyHandler() {
         if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });