@salla.sa/twilight-components 3.0.17 → 3.0.18

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

@@ -403,6 +403,9 @@
 .pointer-events-auto {
   pointer-events: auto;
 }
+.visible {
+  visibility: visible;
+}
 .static {
   position: static;
 }
@@ -930,9 +933,21 @@
   opacity: 1;
 }
 .s-gifting-textarea.shown {
-  height: 122px;
+  height: 142px;
   opacity: 1;
 }
+.s-gifting-textarea-counter {
+  margin-top: 0.25rem;
+  text-align: end;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-gifting-textarea-counter.limit {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
 .s-gifting-calendar.hide {
   pointer-events: none;
   visibility: hidden;

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

@@ -460,7 +460,9 @@ export class SallaGifting {
         this.showGiftText = customID;
         if (dataID) {
             this.selectedGiftTextOption = dataID;
-            customID ? this.selectedText = undefined : this.selectedText = event.target.value;
+            // Returning to the custom option keeps whatever is still typed in the box,
+            // so the counter and the submitted payload match the visible text.
+            customID ? this.selectedText = this.textArea?.value || undefined : this.selectedText = event.target.value;
         }
         else {
             // empty textarea value
@@ -851,7 +853,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '1211d713eaad2cddb4c36111ea67c867eecb3f41' }, h("salla-list-tile", { key: 'b994a3b555a568a0abf8f09acc0af68188363326', class: this.generateClass() }, h("div", { key: '579ee8a105b7fe2f9b9182f49deae77313e61ce5', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'e0d1d5d731e9533398b5234aaff8d38bdd4fb63c' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '358100f7148b29ffda793e81b4b5dd9bfc154025', slot: "subtitle" }, h("div", { key: '605920e1f9236fd09e51623ac1dd645c41929252' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '5bd6e1c009e7a75cd920bdc0ac7f221b2b4ec30e', slot: "action" }, h("salla-button", { key: 'bf9900e5f76ac0492a64fac4a3bfbfadaf055135', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'b1f86fe483fea048c07284549dde0e6a0b6ffb48', name: "widget-btn-content" }, h("div", { key: 'acd7d213f553cc0154326dfb3641c8379171c732', class: "s-gifting-widget-action-content" }, h("span", { key: 'd6fbeaf056e8bccf48036f0e0ade47791a009025', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '3647dd0a2797036060ec6d07bc1833caf74ae9df' }, this.sectionBtnText)))))), h("salla-modal", { key: 'bafbb84d6779189eee79d2c7c0ded404a85f09ac', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'b9dedbfe55475ce2a4add90c2bc2733c719f0e7b', slot: "loading" }, h("div", { key: '1e36230096fb71e8859650de12f199719ad3adc8', class: "s-gifting-skeleton" }, h("div", { key: '17bee6df4d5d9758e952301e5a6bc3ef4d49b303', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'b4665fa2bcd5c6bcd4f8bdb1930b69a63cce9e92', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '6a0feb57e5883e998d43eb924f0b84d81741436d', class: "s-gifting-modal-title" }, h("div", { key: 'b04fa98fc15c72f92f05d691456166670a0595ac', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9c01e90f6877f498d9f89e584bcffb6802c81eab', height: '15px', width: '150px' })))), h("div", { key: '37a2bb5685b861f57ac6fd01d761cc13f10c1577', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '567484e0efed52dbb336ac4b14d1ff5971a331d4', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f5dbad3a9e32a1ee72259d9a459585836f1f6c98', height: '230px' }), h("salla-skeleton", { key: 'fc042b78c2ce49fcbe6a86f14b025504018c4236', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'e7c707cb720e1e98cca9aa9d9de8e80b2a4b9b15', height: '30px' }), h("salla-skeleton", { key: '5b333361fc20890d1584135111dc2fdbb68c411f', height: '40px' })))), h("slot", { key: '27025859ab5e5b1f1e59c0c48a54edebd8e20da4', name: "header" }), !!this.hasError ?
+            h("div", { key: '3c86d3d5d9e610d9e6b802dce4355289c90329b0' }, h("salla-list-tile", { key: '5476098174aa8cb222c3240c8b07b3cbe757484e', class: this.generateClass() }, h("div", { key: '3759c2830dd8353c9a2294e936ae7b69d823ee36', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '603c25804e96cc80bbe2b8c802ae764947466ad2' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '605f42d920a49ca2e761b99d6539cd404e89f498', slot: "subtitle" }, h("div", { key: 'd06dd23bf140007156dc2653653c809fd5c11feb' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'a344e34b453f1ff0289fc57ad08935434d774b4f', slot: "action" }, h("salla-button", { key: '2e6af7eabf350b60513edb9252fd110f0eccb4b7', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '8bf491757bca99df94abbe2e6dacf54e15155e05', name: "widget-btn-content" }, h("div", { key: '9d45121e40c1f49936f9b2b6eb57a5605eca0e45', class: "s-gifting-widget-action-content" }, h("span", { key: '1a7524843066252c6148f1d57c6c08a255b2d70d', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '5b82d168b21ee5651f28a80776303137af6cf81d' }, this.sectionBtnText)))))), h("salla-modal", { key: '7901154aa0aa9925ca79df482566b69e2c30ad0a', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '4de9f1e21e6bae9eac1a58a419809befeef4aa9b', slot: "loading" }, h("div", { key: '483d223daa491ebb09bcf6a814ef1f8de7ca2ada', class: "s-gifting-skeleton" }, h("div", { key: '495b5fc2978480dcc52abbba0d3da92b503901b4', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '993e9d6d0a9f7df11746b925296308576ea22cd2', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '08d6a35d3084a32c71437e4a00e789b154645f87', class: "s-gifting-modal-title" }, h("div", { key: '02a659c96a2039e4c7b28857348d2d5c246d4a40', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '3e1fb71d0cf7ed41f8dccd7dda035ed6c3463cbc', height: '15px', width: '150px' })))), h("div", { key: 'dd6a845ceff281683981b5685663b24c586abeb1', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: 'f46a265bdb7e84e35ee7f78d8b039a29549ef235', height: '10px', width: '150px' }), h("salla-skeleton", { key: '6522ab7db38190320322d9cb7487d0873a03585a', height: '230px' }), h("salla-skeleton", { key: 'a17ae0ee2c71fa81ff346be989eb1db14d21c989', height: '10px', width: '150px' }), h("salla-skeleton", { key: '4f80b722d3b24ed9ee11e88b63e5f831b4eae377', height: '30px' }), h("salla-skeleton", { key: 'e4a9d769197cc6f58f96ce92affdf9dd2b38b8a6', height: '40px' })))), h("slot", { key: '7d76198a32dffd257d97873b0971ea8fa5aa8a0f', 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" }, " "))
                 :
                     [
@@ -863,7 +865,10 @@ export class SallaGifting {
                                     this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { src: item.url, alt: `${item.id}` }))) : ''))
                                 : "")), this.gift && this.gift.show_texts ?
                             h("div", { class: "anime-item" }, h("div", { class: "s-gifting-modal-uploader-title s-gifting-text-title" }, this.giftText), h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: !this.selectedGiftTextOption }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
-                                this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id, selected: String(this.selectedGiftTextOption) === String(txt.id) }, txt.text)) : '', this.gift && this.gift.show_custom_text ? h("option", { "data-id": "custom", selected: this.selectedGiftTextOption === 'custom' }, this.giftCustomText) : null)), h("div", { class: this.showGiftText && this.gift && this.gift.show_custom_text ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))) : null, h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2(!!this.gift?.show_texts) }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", style: this.skipStep1() ? { opacity: '1', transform: 'translateX(0)', position: 'relative' } : undefined, ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
+                                this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id, selected: String(this.selectedGiftTextOption) === String(txt.id) }, txt.text)) : '', this.gift && this.gift.show_custom_text ? h("option", { "data-id": "custom", selected: this.selectedGiftTextOption === 'custom' }, this.giftCustomText) : null)), h("div", { class: this.showGiftText && this.gift && this.gift.show_custom_text ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, maxLength: SallaGifting.CUSTOM_TEXT_MAX_LENGTH, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })), h("p", { class: {
+                                    's-gifting-textarea-counter': true,
+                                    'limit': (this.selectedText?.length || 0) >= SallaGifting.CUSTOM_TEXT_MAX_LENGTH,
+                                } }, SallaGifting.CUSTOM_TEXT_MAX_LENGTH, "/", this.selectedText?.length || 0))) : null, h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2(!!this.gift?.show_texts) }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", style: this.skipStep1() ? { opacity: '1', transform: 'translateX(0)', position: 'relative' } : undefined, ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.isPhysical() &&
@@ -874,7 +879,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: 'f927e423d09dfcdc986fe28cebd0185ec9f54660', name: "footer" })))
+                    ], h("slot", { key: '187d744793464098a2eb9592ec7ad8ec3777918f', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }
@@ -1166,4 +1171,6 @@ export class SallaGifting {
     }
 }
 SallaGifting.CITY_AJAX_THRESHOLD = 400;
+// Mirrors the API's `text => max:140` rule on AddItemAsGiftRequest.
+SallaGifting.CUSTOM_TEXT_MAX_LENGTH = 140;
 SallaGifting.CITY_SEARCH_DEBOUNCE_MS = 100;

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

@@ -131,7 +131,7 @@ export class SallaProductsList {
      * @param filters
      */
     async setFilters(filters) {
-        if (!filters || JSON.stringify(filters) === JSON.stringify(this.parsedFilters)) {
+        if (this.filtersResults !== true || !filters || JSON.stringify(filters) === JSON.stringify(this.parsedFilters)) {
             return;
         }
         window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -1042,8 +1042,9 @@ export class SallaProductsList {
                 // A theme's catalog default must not replace the relevance order used by the search popup.
                 // A shopper's explicit sort, and subsequent sortBy updates followed by reload(), still apply.
                 this.sortBy = this.isSearchPageList() ? requestedSort || undefined : this.sortBy || requestedSort;
-                this.parsedFilters = Helper.extractFiltersFromUrl(searchParams);
-                if (this.parsedFilters && this.parsedFilters.category_id) {
+                // Page filters belong to the main listing, not independently configured sections.
+                this.parsedFilters = this.filtersResults === true ? Helper.extractFiltersFromUrl(searchParams) : {};
+                if (this.filtersResults === true && this.parsedFilters?.category_id) {
                     this.currentCategoryIdFilter = this.toCategoryIdFilter(this.parsedFilters.category_id);
                 }
             }

package/dist/collection/components/salla-rating-modal/salla-rating-modal-v2.js

@@ -65,6 +65,7 @@ export class SallaRatingModalV2 {
         this.stepsCount = 0;
         this.currentIndex = 0;
         this.submitted = [];
+        this.isSubmitting = false;
         this.thanksCountdownInterval = null;
         this.MAX_IMAGE_UPLOAD_LIMIT = MAX_IMAGE_UPLOAD_LIMIT;
         this.MAX_VIDEO_UPLOAD_LIMIT = MAX_VIDEO_UPLOAD_LIMIT;
@@ -577,10 +578,11 @@ export class SallaRatingModalV2 {
         this.showActiveStep();
     }
     async submit() {
-        if (this.hasUploadsInProgress)
+        if (this.hasUploadsInProgress || this.isSubmitting)
             return;
-        this.refreshWizardRefs();
+        this.isSubmitting = true;
         try {
+            this.refreshWizardRefs();
             if (!this.submittedBefore()) {
                 this.validate();
             }
@@ -603,6 +605,7 @@ export class SallaRatingModalV2 {
             }
         }
         finally {
+            this.isSubmitting = false;
             this.nextBtn?.stop();
             salla.config.canLeave = true;
         }

package/dist/collection/shared/free-shipping-timer.js

@@ -0,0 +1,130 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const HOUR = 60 * 60 * 1000;
+const DAY = 24 * HOUR;
+const MAX_TIMEOUT = 2 ** 31 - 1;
+// Used only when storage is not available (private mode, blocked site data).
+let memoryStartedAt = null;
+const DEFAULT_COUNTDOWN_HOURS = 45;
+const DEFAULT_HIDDEN_DAYS = 7;
+const positive = (value, fallback) => {
+    const number = Number(value);
+    return Number.isFinite(number) && number > 0 ? number : fallback;
+};
+/** The countdown and hidden period, from the store settings with 45 hours and 7 days as the fallback. */
+export function getTimerSettings() {
+    const settings = salla.config?.get?.('store.settings.free_shipping_banner');
+    return {
+        countdownMs: positive(settings?.countdown_hours, DEFAULT_COUNTDOWN_HOURS) * HOUR,
+        hiddenMs: positive(settings?.hidden_days, DEFAULT_HIDDEN_DAYS) * DAY,
+    };
+}
+/** The timer exists only for visitors the backend allowed the banner for. */
+export function isTimerEnabled() {
+    return !!salla.config?.get?.('store.features')?.includes('free-shipping-banner');
+}
+const storageKey = () => `free-shipping-timer_${salla.config?.get?.('store.id')}`;
+/** When the visitor first saw the banner, or null if they have not yet. */
+export function getStartedAt() {
+    try {
+        const stored = Number(salla.storage.get(storageKey()));
+        if (Number.isFinite(stored) && stored > 0) {
+            return stored;
+        }
+    }
+    catch (e) {
+        // fall through to the in-memory value
+    }
+    return memoryStartedAt;
+}
+/**
+ * Records the first time the visitor saw the banner. Does nothing when it is already recorded
+ * or when the feature is off.
+ */
+export function startTimerIfNeeded(now = Date.now()) {
+    if (!isTimerEnabled()) {
+        return null;
+    }
+    const existing = getStartedAt();
+    if (existing) {
+        return existing;
+    }
+    memoryStartedAt = now;
+    try {
+        salla.storage.set(storageKey(), now);
+    }
+    catch (e) {
+        // keep the in-memory value
+    }
+    schedule();
+    notify();
+    return now;
+}
+/**
+ * Where the visitor is in the repeating cycle: `countdown` visible, then `hidden` hidden, again and again.
+ * Nothing but the first-seen time is stored, so changed settings apply on the next check.
+ */
+export function computeTimerState(startedAt, now, countdownMs, hiddenMs) {
+    const elapsed = Math.max(0, now - startedAt);
+    const position = elapsed % (countdownMs + hiddenMs);
+    if (position < countdownMs) {
+        return { visible: true, remainingMs: countdownMs - position, nextChangeMs: countdownMs - position };
+    }
+    return { visible: false, remainingMs: 0, nextChangeMs: countdownMs + hiddenMs - position };
+}
+/**
+ * The state the banner and tags follow. `null` means there is nothing to follow: the feature is off
+ * or the visitor has not seen the banner yet.
+ */
+export function getFreeShippingTimerState(now = Date.now()) {
+    if (!isTimerEnabled()) {
+        return null;
+    }
+    const startedAt = getStartedAt();
+    if (!startedAt) {
+        return null;
+    }
+    const { countdownMs, hiddenMs } = getTimerSettings();
+    return computeTimerState(startedAt, now, countdownMs, hiddenMs);
+}
+const listeners = new Set();
+let timeout;
+function notify() {
+    listeners.forEach((listener) => listener());
+}
+// One timeout for the whole page, set for the next visible/hidden change.
+function schedule() {
+    clearTimeout(timeout);
+    timeout = undefined;
+    if (!listeners.size) {
+        return;
+    }
+    const state = getFreeShippingTimerState();
+    if (!state) {
+        return;
+    }
+    timeout = setTimeout(() => {
+        notify();
+        schedule();
+    }, Math.min(state.nextChangeMs + 50, MAX_TIMEOUT));
+}
+/** Calls back whenever the banner and tags have to show or hide. Returns the unsubscribe function. */
+export function subscribeToFreeShippingTimer(listener) {
+    listeners.add(listener);
+    schedule();
+    return () => {
+        listeners.delete(listener);
+        if (!listeners.size) {
+            clearTimeout(timeout);
+            timeout = undefined;
+        }
+    };
+}
+/** Test helper. */
+export function resetFreeShippingTimer() {
+    memoryStartedAt = null;
+    listeners.clear();
+    clearTimeout(timeout);
+    timeout = undefined;
+}

package/dist/components/free-shipping-timer.js

@@ -0,0 +1,150 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const cache = new Map();
+async function request(productId) {
+    const endpoint = 'products/eligible-for-free-shipping' + (productId ? `/${productId}` : '');
+    try {
+        // 403 (feature off or plan not supported) and 410 (product gone) mean "not eligible",
+        // not a failure worth a toast.
+        const response = await salla.api.withoutNotifier(() => salla.api.request(endpoint));
+        return response?.data?.eligible === true;
+    }
+    catch (e) {
+        return false;
+    }
+}
+/**
+ * Whether free shipping applies: to the store when no product is given (banner),
+ * or to the product (tag, product page banner). Same calls share one request.
+ */
+function isEligibleForFreeShipping(productId) {
+    const key = String(productId ?? '');
+    if (!cache.has(key)) {
+        cache.set(key, request(productId));
+    }
+    return cache.get(key);
+}
+
+const HOUR = 60 * 60 * 1000;
+const DAY = 24 * HOUR;
+const MAX_TIMEOUT = 2 ** 31 - 1;
+// Used only when storage is not available (private mode, blocked site data).
+let memoryStartedAt = null;
+const DEFAULT_COUNTDOWN_HOURS = 45;
+const DEFAULT_HIDDEN_DAYS = 7;
+const positive = (value, fallback) => {
+    const number = Number(value);
+    return Number.isFinite(number) && number > 0 ? number : fallback;
+};
+/** The countdown and hidden period, from the store settings with 45 hours and 7 days as the fallback. */
+function getTimerSettings() {
+    const settings = salla.config?.get?.('store.settings.free_shipping_banner');
+    return {
+        countdownMs: positive(settings?.countdown_hours, DEFAULT_COUNTDOWN_HOURS) * HOUR,
+        hiddenMs: positive(settings?.hidden_days, DEFAULT_HIDDEN_DAYS) * DAY,
+    };
+}
+/** The timer exists only for visitors the backend allowed the banner for. */
+function isTimerEnabled() {
+    return !!salla.config?.get?.('store.features')?.includes('free-shipping-banner');
+}
+const storageKey = () => `free-shipping-timer_${salla.config?.get?.('store.id')}`;
+/** When the visitor first saw the banner, or null if they have not yet. */
+function getStartedAt() {
+    try {
+        const stored = Number(salla.storage.get(storageKey()));
+        if (Number.isFinite(stored) && stored > 0) {
+            return stored;
+        }
+    }
+    catch (e) {
+        // fall through to the in-memory value
+    }
+    return memoryStartedAt;
+}
+/**
+ * Records the first time the visitor saw the banner. Does nothing when it is already recorded
+ * or when the feature is off.
+ */
+function startTimerIfNeeded(now = Date.now()) {
+    if (!isTimerEnabled()) {
+        return null;
+    }
+    const existing = getStartedAt();
+    if (existing) {
+        return existing;
+    }
+    memoryStartedAt = now;
+    try {
+        salla.storage.set(storageKey(), now);
+    }
+    catch (e) {
+        // keep the in-memory value
+    }
+    schedule();
+    notify();
+    return now;
+}
+/**
+ * Where the visitor is in the repeating cycle: `countdown` visible, then `hidden` hidden, again and again.
+ * Nothing but the first-seen time is stored, so changed settings apply on the next check.
+ */
+function computeTimerState(startedAt, now, countdownMs, hiddenMs) {
+    const elapsed = Math.max(0, now - startedAt);
+    const position = elapsed % (countdownMs + hiddenMs);
+    if (position < countdownMs) {
+        return { visible: true, remainingMs: countdownMs - position, nextChangeMs: countdownMs - position };
+    }
+    return { visible: false, remainingMs: 0, nextChangeMs: countdownMs + hiddenMs - position };
+}
+/**
+ * The state the banner and tags follow. `null` means there is nothing to follow: the feature is off
+ * or the visitor has not seen the banner yet.
+ */
+function getFreeShippingTimerState(now = Date.now()) {
+    if (!isTimerEnabled()) {
+        return null;
+    }
+    const startedAt = getStartedAt();
+    if (!startedAt) {
+        return null;
+    }
+    const { countdownMs, hiddenMs } = getTimerSettings();
+    return computeTimerState(startedAt, now, countdownMs, hiddenMs);
+}
+const listeners = new Set();
+let timeout;
+function notify() {
+    listeners.forEach((listener) => listener());
+}
+// One timeout for the whole page, set for the next visible/hidden change.
+function schedule() {
+    clearTimeout(timeout);
+    timeout = undefined;
+    if (!listeners.size) {
+        return;
+    }
+    const state = getFreeShippingTimerState();
+    if (!state) {
+        return;
+    }
+    timeout = setTimeout(() => {
+        notify();
+        schedule();
+    }, Math.min(state.nextChangeMs + 50, MAX_TIMEOUT));
+}
+/** Calls back whenever the banner and tags have to show or hide. Returns the unsubscribe function. */
+function subscribeToFreeShippingTimer(listener) {
+    listeners.add(listener);
+    schedule();
+    return () => {
+        listeners.delete(listener);
+        if (!listeners.size) {
+            clearTimeout(timeout);
+            timeout = undefined;
+        }
+    };
+}
+
+export { isTimerEnabled as a, subscribeToFreeShippingTimer as b, getFreeShippingTimerState as g, isEligibleForFreeShipping as i, startTimerIfNeeded as s };