@salla.sa/twilight-components 2.14.485 → 2.14.487

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

@@ -120,6 +120,7 @@ export class SallaGifting {
             this.selectCity = salla.lang.get('pages.checkout.select_city');
             this.selectCountry = salla.lang.get('pages.checkout.select_country');
             this.selectCityInfo = salla.lang.get('blocks.buy_as_gift.city_info');
+            this.cityChangeNotice = salla.lang.get('blocks.buy_as_gift.city_change_notice');
             this.receiverCityFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_city');
             this.receiverRegionFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_region') || salla.lang.get('pages.checkout.region');
             this.selectRegion = salla.lang.get('pages.checkout.select_region');
@@ -139,6 +140,21 @@ export class SallaGifting {
     isPhysical() {
         return this.physicalProducts || this.physical;
     }
+    /**
+     * Resolves the city notice text shown in the physical-product gift step:
+     * - recipient can't change address           -> default city info notice
+     * - recipient can change, fixed shipping cost -> city-change notice
+     * - recipient can change, any shipping cost   -> no notice
+     */
+    cityNoticeText() {
+        if (!this.gift?.recipient_can_change_address) {
+            return this.selectCityInfo;
+        }
+        if (!this.gift?.allows_different_shipping_cost) {
+            return this.cityChangeNotice;
+        }
+        return null;
+    }
     componentDidLoad() {
         salla.event.product.onPriceUpdated(() => {
             const quantityInput = document.querySelector(`.s-quantity-input-input`);
@@ -730,7 +746,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: 'a2798e968c7311c99560db0710559f8f518031fa' }, h("salla-list-tile", { key: '5621984db45065e919fc647bf973b5fdb42e7c3f', class: this.generateClass() }, h("div", { key: '3fea9220af764f5675b17005169ec5398fb0a1d3', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '6984f88fa5675edfddbc67d87fa69ee26ee40b98' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '64cb13fac30d6613af2c278593e45d59f2f8e791', slot: "subtitle" }, h("div", { key: '578f47b7cc8242bbf6872cc670c37beeb7197c0e' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '54e56e74fcc1e3266395ad003369e47ea0b0c27b', slot: "action" }, h("salla-button", { key: '7687a680041c1e5b431eb56d94262fb2defe0664', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '9e466071aa0bf882962931f029e32d567390d9f2', name: "widget-btn-content" }, h("div", { key: 'f5b8a796dc3b7bb4e1094a7741944673e1ec6477', class: "s-gifting-widget-action-content" }, h("span", { key: '037ea375a6904bf51d15c8d76f8b650031526a59', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '490dceeaf5a7e0ec38dabd49182f74d4ea07d597' }, this.sectionBtnText)))))), h("salla-modal", { key: '2914d9a5a0ae7fe555a73f993553165e4fb91b02', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '6d70fa91062f55adb3d0a6371ccb8afc271e949e', slot: "loading" }, h("div", { key: '82a690b756eb1179c325416a33f66b9d726eb336', class: "s-gifting-skeleton" }, h("div", { key: '8cedf269ee0caf39cbd9f39ab80e7dd3d65b7fde', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '7cb2bfb3198c3096efa147348b2a6cdec21eb3d3', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '36cb724cfe2f39a7eb94b779a67520a3bff75389', class: "s-gifting-modal-title" }, h("div", { key: '2ef3bcb26f31cdc34725e9a87849a426bd9dfc72', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '66f4148f367bc687982a06975e41c6865a530e88', height: '15px', width: '150px' })))), h("div", { key: 'fda2fdc549cc6dfcb5f4cc9bfafe5dc686464e4c', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: 'f0f64ab8b9d467c2cbe4707154a21bb952f45831', height: '10px', width: '150px' }), h("salla-skeleton", { key: '1b1950d9d333b4249aab267fdbb90ac380ac6175', height: '230px' }), h("salla-skeleton", { key: '3b3a2472851e63754804ceb68401bb56a9900061', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'd3f9ace5c8b12061ac94d929d926e8458fb66411', height: '30px' }), h("salla-skeleton", { key: 'd0be03fc578e2559c0a5251875bac01519beb18f', height: '40px' })))), h("slot", { key: '86757c4d648dd818857aaee41c6df568724cbd1b', name: "header" }), !!this.hasError ?
+            h("div", { key: '416981417bec78c8c3fda43e6f80745f4d735154' }, h("salla-list-tile", { key: '495255205e1c226669a14a94e50442aabd9818da', class: this.generateClass() }, h("div", { key: 'f2dbdc4ea0dc76d806f18563739a116e15cbbe08', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '9ed4f1d995eaf2341a9ec237ebfb486ed3db988e' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'b5d5512fcb2513177eaa1e25eacce9092f7d845f', slot: "subtitle" }, h("div", { key: '0a8223b41973b72d942ce91c5f478a3edaa5dfd3' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'a6d5a077131117c6854ffc2b39e506be7953051e', slot: "action" }, h("salla-button", { key: '99b14364789884b0010e50941c27cbcfe7445785', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '27f6be7b07084f48da83af6240933d619407307f', name: "widget-btn-content" }, h("div", { key: 'ee5d04e96dd1e3849a33813b3737b476b5470497', class: "s-gifting-widget-action-content" }, h("span", { key: 'd02bb1f6cd4dff335eeca1341da2c86d2976b4fc', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '98a3594e6d01133c4f448d8e5df22ba2984cf09e' }, this.sectionBtnText)))))), h("salla-modal", { key: '0be87b9d369e92a71b68f570b9bf19a0ddb7dd6b', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '978995d399506ff82ac0f2385a1f85a808c7da3e', slot: "loading" }, h("div", { key: '7d1f141fd9131d35edb81326062e8f7cadfa2cab', class: "s-gifting-skeleton" }, h("div", { key: 'b33cfd58381c7c1b545ffedf6739e42fdb75c8de', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'e03a505ad3720c25077ca91c7eec2843cdaee225', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '6f630d2582c96fc71406ef4557143c6e9dbd4a88', class: "s-gifting-modal-title" }, h("div", { key: '8d1a3540993c9b40e705f2145bf0514754c36dab', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'd965c353f19cf785a13eba6332b715eed9748836', height: '15px', width: '150px' })))), h("div", { key: 'abacc03d1e30075d3d24dfd577dc9a60f7b52810', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '03db84cfccc546602a6f521b015d0c12b93caa6f', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'e8e2d4e70d208055baaae44a8d7da8aa5c6a33da', height: '230px' }), h("salla-skeleton", { key: '2c90d91fb63551685b2041f2bc51fdb5219cbbb7', height: '10px', width: '150px' }), h("salla-skeleton", { key: '8962bc17f43cb04563caa02db3df585189579f8f', height: '30px' }), h("salla-skeleton", { key: '73730453aa6f8d0ec2a653b4711b80b32a18b916', height: '40px' })))), h("slot", { key: '4bcf5a6d53485c461c35f53ce7e265bcf770989e', 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" }, " "))
                 :
                     [
@@ -751,9 +767,9 @@ export class SallaGifting {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.region'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-region` }, this.receiverRegionFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectRegion, items: this.regions ?? [], selectedItem: this.selectedRegion, loading: this.loadingRegions, disabled: this.loadingRegions || !this.regions?.length, required: true, inputId: `${this.hostId}-region`, searchable: false, keepParentScroll: true, onItemSelected: (e) => this.handleRegionSelected(e.detail), onDropdownClosed: () => this.handleRegionDropdownClosed() }), this.errors && this.errors['receiver.region'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.region']) : ''), this.isPhysical() &&
                             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() &&
-                            h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !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: '052bb080776d8d874da570b643345b95a40cd985', name: "footer" })))
+                                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: 'a4d37b893e4a0867c044817434ade65b16fbe89a', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }
@@ -927,6 +943,7 @@ export class SallaGifting {
             "selectCountry": {},
             "selectCity": {},
             "selectCityInfo": {},
+            "cityChangeNotice": {},
             "receiverCityFieldLabel": {},
             "receiverRegionFieldLabel": {},
             "selectRegion": {},

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

@@ -134,10 +134,11 @@ export class SallaProductsList {
         window.scrollTo({ top: 0, behavior: 'smooth' });
         // Create a deep copy of the filters object to avoid mutating the original object
         this.parsedFilters = JSON.parse(JSON.stringify(filters));
-        if (this.currentPage?.slug == 'product.index' &&
-            this.parsedFilters &&
-            this.parsedFilters.category_id) {
-            this.currentCategoryIdFilter = [this.parsedFilters.category_id];
+        if (this.currentPage?.slug == 'product.index') {
+            // clear when category_id disappears, otherwise getSourceValue() keeps filtering by the removed category
+            this.currentCategoryIdFilter = this.parsedFilters?.category_id
+                ? this.toCategoryIdFilter(this.parsedFilters.category_id)
+                : null;
         }
         return this.reload();
     }
@@ -600,6 +601,14 @@ export class SallaProductsList {
     isAuxiliaryProductsListSource() {
         return ['json', 'selected', 'related', 'landing-page', 'recently'].includes(this.getSource());
     }
+    // Normalize a category_id filter (array, legacy {0:,1:} object, or scalar) into a flat list of ids
+    toCategoryIdFilter(catId) {
+        if (Array.isArray(catId))
+            return catId;
+        if (catId && typeof catId === 'object')
+            return Object.values(catId);
+        return [catId];
+    }
     getSourceValue() {
         if (this.getSource() === 'wishlist') {
             const searchParams = new URLSearchParams(window.location.search);
@@ -904,7 +913,7 @@ export class SallaProductsList {
                 this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');
                 this.parsedFilters = Helper.extractFiltersFromUrl(searchParams);
                 if (this.parsedFilters && this.parsedFilters.category_id) {
-                    this.currentCategoryIdFilter = [this.parsedFilters.category_id];
+                    this.currentCategoryIdFilter = this.toCategoryIdFilter(this.parsedFilters.category_id);
                 }
             }
             catch (e) {
@@ -1025,12 +1034,15 @@ export class SallaProductsList {
                         title = salla.lang.get('common.elements.search_about', { word: this.getSourceValue() });
                     }
                     else if (!title) {
-                        let catId = this.parsedFilters.category_id || this.getSourceValue()[0];
+                        // with user-applied filters a category name in the title is misleading — show count only;
+                        // the unfiltered base state keeps the page category's name
+                        let catId = Object.keys(this.parsedFilters || {}).length ? null : this.getSourceValue()[0];
                         // get the first filter that its key is category_id, then get the value when filter.value.*.key==catId
                         title =
                             response.filters
                                 ?.find(filter => filter.key === 'category_id')
-                                ?.values?.find(cat => cat.key === catId)?.value ?? '';
+                                // loose == : catId may be a number (auto-appended page.id) while API keys are strings
+                                ?.values?.find(cat => cat.key == catId)?.value ?? '';
                     }
                     title +=
                         (title ? ' - ' : '') +

package/dist/components/Helper.js

@@ -114,8 +114,13 @@ class Helper {
             if (matchesNested) {
                 const filterName = matchesNested[1];
                 const nestedKey = matchesNested[3];
-                if (nestedKey) {
-                    // Handle nested object
+                if (nestedKey === '' || /^\d+$/.test(nestedKey)) {
+                    // Handle array (OR within a group), e.g. filters[brand_id][] or filters[brand_id][0]
+                    filters[filterName] = Array.isArray(filters[filterName]) ? filters[filterName] : [];
+                    filters[filterName].push(value);
+                }
+                else if (nestedKey) {
+                    // Handle nested object, e.g. filters[price][min]
                     filters[filterName] = filters[filterName] || {};
                     filters[filterName][nestedKey] = value;
                 }