@salla.sa/twilight-components 2.14.595 → 2.14.597

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -5,6 +5,7 @@ import { h, Host } from "@stencil/core";
 import { formatDuration, formatBytesAsSize, getFilePondMaxFileSize, getMaxImagesCount, getMaxVideosCount, getTotalMaxFiles, getUploadErrorMessage, isImageMimeType, isVideoMimeType, parseSizeToBytes, shouldCountGalleryFile, shouldCountGalleryLimit, usesSplitCountLimits, } from "./upload-limits";
 import CancelIcon from "../../assets/svg/cancel.svg";
 import PlayIcon from "../../assets/svg/play-circle.svg";
+import { setTranslationDefault } from "../../Helpers/translate";
 const VIDEO_METADATA_TIMEOUT_MS = 10000;
 export class SallaFileUpload {
     /**
@@ -195,7 +196,9 @@ export class SallaFileUpload {
         if (!this.name) {
             this.name = 'file';
         }
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.host.querySelectorAll('.filepond--drop-label>label').forEach(label => label.innerHTML = this.getLabel());
             if (this.filepond) {
                 this.filepond.labelFileTypeNotAllowed = salla.lang.get('common.uploader.invalid_type');
@@ -216,7 +219,7 @@ export class SallaFileUpload {
             }
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -342,6 +345,14 @@ export class SallaFileUpload {
         }
         return this.value || '';
     }
+    isValidUploadResult(value) {
+        if (Array.isArray(value)) {
+            return value.length > 0 && value.every(item => typeof item === 'string' && this.isValidUploadResult(item));
+        }
+        // Keep relative paths and existing URL shapes; reject missing/coerced results.
+        return typeof value === 'string' && value.trim().length > 0 &&
+            !['undefined', 'null', '[object Object]'].includes(value.trim());
+    }
     usesSplitCountLimits() {
         return usesSplitCountLimits(this.maxImagesCount, this.maxVideosCount);
     }
@@ -872,6 +883,7 @@ export class SallaFileUpload {
         }
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.previewFilesSyncRaf != null) {
             cancelAnimationFrame(this.previewFilesSyncRaf);
             this.previewFilesSyncRaf = null;
@@ -879,12 +891,12 @@ export class SallaFileUpload {
         this.revokeAllPreviewObjectUrls();
     }
     render() {
-        return (h(Host, { key: '851d41cc6012f516488a99f56f9937c14f79bc85', class: {
+        return (h(Host, { key: '68b9fdc913b0e64080e71fe0e79d8bfb2e614ccb', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
                 "s-file-upload-has-gallery": this.usesGalleryPreview(),
-            } }, h("input", { key: '05902420c0ea6863d8fc010c5a54f40aedeac77b', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: '00b556281810005ea609a7d1cb7d514277453bee', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
+            } }, h("input", { key: '6594ba9b70d8b0be560ea461d32cf2d0139e75d3', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: 'f462d17fa2ed78a95b486e1880f4d84a6cc937b3', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
     }
     async componentDidLoad() {
         await Salla.onReady();
@@ -948,8 +960,12 @@ export class SallaFileUpload {
                 }
             },
             onprocessfile: (error, file) => {
-                if (error) {
-                    this.notifyUploadError(error, file);
+                // A 2xx response without a usable upload result is still a failed upload.
+                const uploadError = error || (file.serverId == null
+                    ? { type: 'error', body: salla.lang.get('common.errors.error_occurred') }
+                    : null);
+                if (uploadError) {
+                    this.notifyUploadError(uploadError, file);
                     this.removeFailedFile(file);
                     if (this.usesGalleryPreview()) {
                         this.schedulePreviewFilesSync();
@@ -1026,10 +1042,21 @@ export class SallaFileUpload {
                 // @ts-ignore
                 process: {
                     onload: (response) => {
-                        let responseData = JSON.parse(response).data;
+                        let responseData;
+                        try {
+                            const result = JSON.parse(response);
+                            if (!result || result.success === false)
+                                return null;
+                            responseData = result.data;
+                        }
+                        catch {
+                            return null;
+                        }
                         if ((this.instantUpload || this.allowMultiple) && Array.isArray(responseData) && responseData.length > 0) {
                             const item = responseData[0];
                             const fileUrl = typeof item === 'object' && item !== null ? item.filePath || item.url : item;
+                            if (!this.isValidUploadResult(fileUrl))
+                                return null;
                             const fileId = this.generateUploadFileId();
                             // Store the upload result to be picked up by onprocessfile
                             this.uploadedFiles = [
@@ -1044,6 +1071,8 @@ export class SallaFileUpload {
                             const fileUrl = typeof responseData === 'object' && responseData !== null
                                 ? responseData.filePath || responseData.url
                                 : responseData;
+                            if (!this.isValidUploadResult(fileUrl))
+                                return null;
                             const fileId = typeof responseData === 'object' && responseData !== null && responseData.id
                                 ? responseData.id
                                 : this.generateUploadFileId();

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

@@ -10,9 +10,6 @@ export class SallaFilters {
         this.isInitialFetch = true; //the base-category auto-append may only run on the first filters::fetched
         this.filtersData = {};
         salla.event.on('filters::hidden', () => this.host.style.display = 'none');
-        salla.lang.onLoaded(() => {
-            this.apply = salla.lang.get('pages.checkout.apply');
-        });
         salla.event.on('filters::fetched', ({ filters }) => {
             this.host.style.display = '';
             let freshFilterData = {};
@@ -50,6 +47,14 @@ export class SallaFilters {
             this.host.childNodes.forEach(async (widget) => widget.setWidgetHeight && await widget.setWidgetHeight());
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.apply = salla.lang.get('pages.checkout.apply');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         try {
             const searchParams = new URLSearchParams(window.location.search);
@@ -211,7 +216,7 @@ export class SallaFilters {
         this.applyFilters();
     }
     render() {
-        return h(Host, { key: 'ef7f2cf7241193cb8b2fe24fdb0713d8c92c04c9' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: '7e2df6367c28317e81c8904d545e79f39e80f132' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
             } })));
     }
@@ -250,7 +255,7 @@ export class SallaFilters {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Array of filter options"
+                    "text": "Array of filter options to display. Each filter contains key, label, type, and values for filtering products."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/salla-filters-widget/salla-filters-widget.js

@@ -24,11 +24,14 @@ export class SallaFiltersWidget {
         salla.onReady(() => {
             this.page = salla.config.get('page');
         });
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
             this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     componentDidLoad() {
         // Use fixed height per item for predictable calculations
         // Each item is approximately 20px, so we calculate based on item count
@@ -170,12 +173,12 @@ export class SallaFiltersWidget {
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: 'd3d9731c163a78609bb1a2f4b01ef6c3db4fc7dc', class: "s-filters-widget-container" }, h("h3", { key: 'bf1c5a033860416035ad7c74f4d9082f4c8de282', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '2a94d9a6500b3137900136fd052c731f63b0acae' }, this.option.label), h("span", { key: '69b28fcad8ebc564dbbe907a4eb4044a0ee9d6ad', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'fa20429b6b3399275eecbcac390d8895c3b01350', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '98c869541f0a1d61725048296af6296e603cfa2c', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: 'f5310cfdad6980e5d991bd03934d5c1a4a014f10', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '317bb4bcfae88596f8a8737b2454f5f2ecae5b0d', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '8620064a3526e686b95a0c21e39f5b15a8ea3133' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '1e0a234fe279cd77dbdb957d1e9852d1f59b39f4', class: "s-filters-widget-container" }, h("h3", { key: 'b2b16a758d5e3c9fc97d2bfab8aee9e98cb3eae7', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: 'af2738f683dc3455adc99d6e271ed7c5217c9626' }, this.option.label), h("span", { key: '6dd325fe1977e7e1cc3e72de495bcef51a4978b4', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '87f90e444bc15193c631a6223b45b5d5d82b512c', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'bde65a20317127d415c66c06e6bc1d060f959751', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '3c06b2b5158b59652a8f91649e18922111ba8f55', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: 'b38f4c7033259152e950d3c86ee17aeea1fcfcb8', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '58a69066c1fd57b3f2d034d883b3c20c14df6154' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '8c9c93c3579578f1da4fe676d4758c0bbb5b4e21', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '5124f0e1f14cdec0af61106161b769d67dc8f82f', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     static get is() { return "salla-filters-widget"; }
     static get originalStyleUrls() {

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

@@ -104,7 +104,12 @@ export class SallaGifting {
         };
         this.handleCountryDropdownClosed = () => { };
         this.handleRegionDropdownClosed = () => { };
-        salla.lang.onLoaded(() => {
+        salla.event.on(this.defaultEvent, () => {
+            this.open();
+        });
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
             this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
             this.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
@@ -138,9 +143,9 @@ export class SallaGifting {
             this.donationRequired = salla.lang.get('pages.products.donation_amount_required');
             this.currentLang = salla.lang.locale;
         });
-        salla.event.on(this.defaultEvent, () => {
-            this.open();
-        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     isPhysical() {
         return this.physicalProducts || this.physical;
@@ -852,7 +857,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '02f095cd71654941cc3d11f9c9be13e019247992' }, h("salla-list-tile", { key: '5dfefabc5e6fcb2f0193bf11dcd324c517b0e649', class: this.generateClass() }, h("div", { key: '35b5b8cbf54ccbf9368cdc95d2e0505ca317a555', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '2399e07a06a808b396cf57a5233be97938e7b9b5' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '12f460ce1df5e294e77b25e07d00d85370b2b939', slot: "subtitle" }, h("div", { key: '28fd4125c6f18fb976bc271ffc7c731683757bfb' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '2ccb5745341390a9aeb80c56b4d7bb171cc2940e', slot: "action" }, h("salla-button", { key: '4e74313bd4020ae32a1c2ba30b0133da0aaf410a', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '85ef811160f391d2fc456b13a89120407d6e4c36', name: "widget-btn-content" }, h("div", { key: '6d4d1162f7147488f8ce11d7da1bf7b82bc407b0', class: "s-gifting-widget-action-content" }, h("span", { key: 'e7aa877309bc7346fe56227365ad75c0d7c1a8dc', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '5c7f1a43fa84e8e5ba74a449063fc89576626db2' }, this.sectionBtnText)))))), h("salla-modal", { key: '1de82b1f9a7fc49321eb766b1451eacd2d210480', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'f3a97db3aa3a2591a1d391af61efa15ab76f1c8c', slot: "loading" }, h("div", { key: '67fb44c701b3f2771e041b91a2a438a0419ed4dd', class: "s-gifting-skeleton" }, h("div", { key: '70b2841fbafff80879cf2d68550cc9659da140a2', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8d337e1bfe29aea80e93ed2d1e172fa4fe23e1db', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'b8586d28a3dda5abbdbc341830560c157efb566c', class: "s-gifting-modal-title" }, h("div", { key: '956ec550fd7ddeb6b11f174b92d0133408f95165', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'f495e7ec761c8499efb7a6e7025bd205dca49f2c', height: '15px', width: '150px' })))), h("div", { key: '28e5ad1386cebcd93a5f9307bd812dca77a66188', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '951dbed5a03ab246d661dfd2a59ae099b468fa89', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f200d5a5a4a258fb0755b6adb48e25606ab93bb7', height: '230px' }), h("salla-skeleton", { key: '1b4f69321a13d1ddea4ad038bfad22385b3b51ed', height: '10px', width: '150px' }), h("salla-skeleton", { key: '5d9219d3826de28b8e585bada604bff60dfc80f8', height: '30px' }), h("salla-skeleton", { key: 'a248552e288bea2e9839f381ec2d96bdb0e53cdf', height: '40px' })))), h("slot", { key: '3c8f9965766d7ce17fb20b4df72a3e46c273b23a', name: "header" }), !!this.hasError ?
+            h("div", { key: '2b599846ae0abb92b699be0a3dbee0d3d5f3638a' }, h("salla-list-tile", { key: '1f08c01b96dab20e82a3260e23836d56f5bcf630', class: this.generateClass() }, h("div", { key: '1f4d04b7112be42587fc35a9fa6c322321a92482', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '8ce56efcb34d19433babde1f191e4301f4c2c8d0' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '6f035a3ee40a77a554492bde74bc834caa2e9a9a', slot: "subtitle" }, h("div", { key: '1e454d9ae0b95fd5b4ee05401f3edf0161338d43' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '98df402ea7ddda379fe10897453e61acf3166559', slot: "action" }, h("salla-button", { key: '7d7c49e3d0749cf8ed86ce17709f718fece6349c', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '6411376640ba3de3d36277981e04253fdcaaf135', name: "widget-btn-content" }, h("div", { key: '8fef0671cfa1335d6a5ab028c2fc0e978eaa11e2', class: "s-gifting-widget-action-content" }, h("span", { key: '820674db5e37dd1f3e1c3f7708bff7396955960a', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'ef3ee899f2231863f984ca13708382e273e38e0a' }, this.sectionBtnText)))))), h("salla-modal", { key: '0728b976c0f20f3713c9363e1c06b9da528da9ca', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '924fad1dbb5cb1ff039328bed201c07608b5e95d', slot: "loading" }, h("div", { key: '35907d0949afb5ed389fc2ee147ef73f388dc962', class: "s-gifting-skeleton" }, h("div", { key: 'c2252de89f09c4bfc1e2691b6da246408cd98003', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '1440fcf0b2dc5c3dd1d209604636bca1d68b2fd2', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '80527a48ec97624873100e91806d206194f4666c', class: "s-gifting-modal-title" }, h("div", { key: '095732ce0ca81c125ff7664e215c4a286bba4cd6', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9e385f2e21fa305782d7c7d40df31498dfab856d', height: '15px', width: '150px' })))), h("div", { key: 'e530926826192430f094cd227a11bb9c6aee38f7', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '35a5d4bd57461b5edf69c19f27a85da2131b0545', height: '10px', width: '150px' }), h("salla-skeleton", { key: '747893f9ab1cc35d7fccb62dbd64e7a3a57b4a98', height: '230px' }), h("salla-skeleton", { key: '80ddf6036a735901a1295c3abd5e208c0cc92ca7', height: '10px', width: '150px' }), h("salla-skeleton", { key: '98720c569e326a5d2d04a37839d2064688f00a47', height: '30px' }), h("salla-skeleton", { key: '65f9deca24700906e43d34612b01ed95c86fae00', height: '40px' })))), h("slot", { key: '82e3b8afc2a736bdee08ef906a1824fc4a16ce5a', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -875,7 +880,7 @@ export class SallaGifting {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() && this.cityNoticeText() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.cityNoticeText())), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '688de0af2e48acc0d91d128a321856197861eb16', name: "footer" })))
+                    ], h("slot", { key: '1d08c0a88ae9d95dd4c740d42451ddab1fffcfdc', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }

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

@@ -2,6 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { Host, h } from "@stencil/core";
+/**
+ * The `salla-hook` component serves as a placeholder for dynamic content injection.
+ * Used by the Salla hooks system to mount elements at specific locations.
+ */
 export class SallaHook {
     /**
      * Mounts a given HTML element into the hook position.
@@ -11,7 +15,7 @@ export class SallaHook {
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: '579b0abf0784c9396f636da50b1fed156e5a0600' });
+        return h(Host, { key: '7784823f34808c715180741263cf7e7edf9c9d5f' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -34,12 +34,17 @@ export class SallaInfiniteScroll {
         <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
         this.btnLoader = this.status.querySelector('.s-button-loader');
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.status.querySelector('.s-button-text').innerHTML = this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more');
             this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
             this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     loading(isLoading = true) {
         let btnText = this.status.querySelector('.s-button-text');
         Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from "@stencil/core";
+import { h, forceUpdate } from "@stencil/core";
 /**
  * @slot header - The top of the modal.
  * @slot footer - Replaces the bottom button.
@@ -87,6 +87,7 @@ export class SallaLocalizationModal {
         };
         //here we will used the currency code instead of the symbol when current language is not arabic
         this.arabicCurrencies = ["SAR", "AED", "KWD", "BHD", "QAR", "OMR", "EGP", "IQD", "LBP", "SYP", "TND", "DZD", "MAD", "YER"];
+        this.translationLoaded = false;
         this.languages = [];
         this.currencies = [];
         this.hasError = false;
@@ -106,6 +107,17 @@ export class SallaLocalizationModal {
         this.languageSlot = this.host.querySelector('[slot="language"]')?.innerHTML || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span></label>';
         this.currencySlot = this.host.querySelector('[slot="currency"]')?.innerHTML || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{symbol}</small></label>';
     }
+    connectedCallback() {
+        // re-render whenever translations (re)load, so the labels read via salla.lang.get() stay current
+        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?.();
+    }
     async componentWillLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
@@ -244,7 +256,7 @@ export class SallaLocalizationModal {
             this.showTrigger
                 ? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
                 : '',
-            h("salla-modal", { key: '1400a13aa9490e0f5f96259bea6bfcf3f98ee829', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'b31041e8d245ce30f41d4221418856e886200848', slot: 'loading' }, h("div", { key: '5531d672f7c5e8fb8a6b06fa5ae5328f4efcf3fe', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '61b8fa69733a4e970e1f72ef5b09e773781e45ae', width: '25%', height: '15px' }), h("div", { key: '20dd0f3444f0a6e05730266bf964b74f307e9aab', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '5b8b4b760f741e0cd56c07ff341205e9ec7fe4d3', width: '25%', height: '15px' }), h("div", { key: '0a3f5dbfca2d6cd81effef5d873e03c9aef57d0b', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'b068f327b3335b3f9154ac20f7f6de95864dde9a', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-modal", { key: '90691a08e6f504621d486093e0b4ce4dd6ade603', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '09c20e2dcf5840609eb6e1e124c2d8d3ceca0519', slot: 'loading' }, h("div", { key: '078f414c5c966000da4691000080912ab9e9d6e6', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'd34d24597d5dca4f6e987b82886749388e118454', width: '25%', height: '15px' }), h("div", { key: '5350cec15f6091450b297ed7114638440bd4da16', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '255dd34dc36801e78ea0dd83dd9825e58de3c20f', width: '25%', height: '15px' }), h("div", { key: '2f1d1acbb0734b72f6806d3ec229ffd8fc71f9f5', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '8ffa9e5ddfe05ca91032e29f24ef9eaedd73980d', height: '40px', width: '100%' }))), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
                 h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
                     h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
@@ -346,6 +358,7 @@ export class SallaLocalizationModal {
     }
     static get states() {
         return {
+            "translationLoaded": {},
             "languages": {},
             "currencies": {},
             "hasError": {},

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

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

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

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

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

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

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

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

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

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

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

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