@salla.sa/twilight-components 3.0.16 → 3.0.18

package/dist/components/salla-bullet-delivery.js

@@ -12,6 +12,110 @@ import { d as defineCustomElement$4 } from './salla-placeholder2.js';
 import { d as defineCustomElement$3 } from './salla-searchable-dropdown2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
+const SESSION_STORAGE_NAME = "sc_selector_session";
+const TRACKING_TIMEOUT_MS = 5000;
+const CLOSE_REASONS = {
+    closeButtonClick: "close_button",
+    backdropClick: "backdrop",
+};
+const toCloseReason = (reason) => CLOSE_REASONS[reason ?? ""] ?? "escape";
+const uuid = () => typeof crypto.randomUUID === "function"
+    ? crypto.randomUUID()
+    : "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) => (Number(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))).toString(16));
+const allocatedBranchIds = (intent) => {
+    const value = intent?.allocation_headers?.["s-scope-allocation-id"] ?? intent?.branch_id;
+    const ids = String(value ?? "")
+        .split(",")
+        .map(Number)
+        .filter((id) => Number.isSafeInteger(id) && id > 0);
+    return [...new Set(ids)].sort((a, b) => a - b);
+};
+const sameIds = (a, b) => a.length === b.length && a.every((id) => b.includes(id));
+class SelectorTracker {
+    constructor() {
+        this.impressionId = null;
+        this.visibleAt = 0;
+    }
+    viewed(context) {
+        this.guarded(() => {
+            this.impressionId = uuid();
+            this.visibleAt = Date.now();
+            this.send("Branch Selector Viewed", { ...context });
+        });
+    }
+    dismissed(context, reason, hadAcceptedSelection) {
+        this.guarded(() => this.send("Branch Selector Dismissed", {
+            ...context,
+            close_reason: reason,
+            had_accepted_selection: hadAcceptedSelection,
+            elapsed_ms: this.visibleAt ? Date.now() - this.visibleAt : 0,
+        }));
+    }
+    result(context, result) {
+        this.guarded(() => {
+            const session = this.session();
+            const seq = session.seq + 1;
+            const accepted = result.outcome === "accepted";
+            const firstAccepted = session.first_accepted_branch_ids ?? (accepted ? result.new_branch_ids : null);
+            // A draft or a failed attempt replaces the stored intent, so the last accepted branches live here.
+            const previous = session.last_accepted_branch_ids ?? result.previous_branch_ids;
+            this.save({
+                ...session,
+                seq,
+                first_accepted_branch_ids: firstAccepted,
+                last_accepted_branch_ids: accepted ? result.new_branch_ids : previous,
+            });
+            this.send("Branch Selector Completed", {
+                ...context,
+                ...result,
+                previous_branch_ids: previous,
+                selection_attempt_id: uuid(),
+                selection_seq: seq,
+                first_accepted_branch_ids: firstAccepted,
+                changed: accepted && previous.length > 0 && !sameIds(previous, result.new_branch_ids),
+            });
+        });
+    }
+    guarded(track) {
+        try {
+            track();
+        }
+        catch {
+            // Tracking must never break the selector.
+        }
+    }
+    send(event, properties) {
+        const body = {
+            event,
+            session_id: this.session().id,
+            impression_id: this.impressionId,
+            ...properties,
+        };
+        // Use the configured transport without the SDK's shared notification suppression.
+        // Tracking failures stay silent while concurrent customer requests keep their alerts.
+        // keepalive lets the request outlive the reload that follows a confirmed selection.
+        Promise.resolve(salla.api.axios.post("selector-events", body, {
+            timeout: TRACKING_TIMEOUT_MS,
+            adapter: ["fetch", "xhr"],
+            fetchOptions: { keepalive: true },
+        })).catch(() => undefined);
+    }
+    session() {
+        const stored = Salla.storage.session.get(this.storageName());
+        if (stored?.id)
+            return stored;
+        const fresh = { id: uuid(), seq: 0, first_accepted_branch_ids: null };
+        this.save(fresh);
+        return fresh;
+    }
+    storageName() {
+        return `${SESSION_STORAGE_NAME}:${Salla.config.get("store.id")}`;
+    }
+    save(session) {
+        Salla.storage.session.set(this.storageName(), session);
+    }
+}
+
 var LocationIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172" width="172" height="172">
   <!-- White rounded background -->
   <rect width="172" height="172" rx="64" fill="#FFFFFF"/>
@@ -271,6 +375,13 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             this.open();
         };
         this.closeHandler = null;
+        this.selectorTracker = new SelectorTracker();
+        this.openTrigger = "customer_requested";
+        this.pendingDismissReason = null;
+        this.modalCloseHandler = (detail) => {
+            this.pendingDismissReason = toCloseReason(detail?.reason);
+            queueMicrotask(() => (this.pendingDismissReason = null));
+        };
         this.bulletDeliveryMobileSelectHandler = null;
         /** True after saved addresses have been loaded (lazy: only when address tab is shown). */
         this.savedAddressesLoaded = false;
@@ -537,6 +648,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             const details = this.buildIntentAddress();
             if (!details)
                 return;
+            const previousIntent = this.getStoredIntent();
             this.setStoredIntent({
                 type: "address",
                 country_id: Number(this.selectedCountry?.id) || 0,
@@ -545,7 +657,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             });
             this.selectedSavedAddress = null;
             this.selectedSessionAddress = true;
-            await this.handleConfirm();
+            await this.handleConfirm(previousIntent);
         };
         this.handleCountrySelected = (item) => {
             const country = this.countries.find(c => String(c.id) === String(item.id)) || item;
@@ -630,9 +742,10 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
      * successful auto-confirm never flashes the saved-addresses list; the caller is
      * responsible for revealing the modal itself if it still needs the customer's input.
      */
-    async open(silent = false) {
+    async open(silent = false, trigger = "customer_requested") {
         if (!this.isEnabled)
             return; // feature disabled — never open
+        this.openTrigger = trigger;
         // If mobile app, open the sheet
         if (this.isMobileApp) {
             Salla.event.dispatch('salla::bullet-delivery.open-sheet');
@@ -734,6 +847,33 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         this.bulletDeliveryClosed.emit();
         return this.modal?.close();
     }
+    selectorContext() {
+        return {
+            configured_required: this.isRequired,
+            effective_nonclosable: this.isRequired || this.shouldForceNonClosable(),
+            trigger_configured: this.openingType ?? null,
+            trigger_actual: this.openTrigger,
+        };
+    }
+    handleModalVisibility(visible) {
+        if (visible) {
+            this.selectorTracker.viewed(this.selectorContext());
+            return;
+        }
+        if (!this.pendingDismissReason)
+            return;
+        this.selectorTracker.dismissed(this.selectorContext(), this.pendingDismissReason, !!this.getStoredIntent()?.scope_allocated);
+        this.pendingDismissReason = null;
+    }
+    trackSelectorResult(outcome, previousIntent, newBranchIds, scopeId) {
+        this.selectorTracker.result(this.selectorContext(), {
+            outcome,
+            fulfilment_method: this.activeTab === "branch" ? "pickup" : "delivery",
+            previous_branch_ids: previousIntent?.scope_allocated ? allocatedBranchIds(previousIntent) : [],
+            new_branch_ids: newBranchIds,
+            scope_id: scopeId ?? null,
+        });
+    }
     resetState() {
         this.viewMode = "main";
         this.mapLocationData = null;
@@ -873,7 +1013,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             if (!wasVisible) {
                 // Load silently — a successful auto-confirm should never flash the
                 // saved-addresses list; only reveal the modal below if it can't finish on its own.
-                await this.open(true);
+                await this.open(true, "after_login");
             }
             // open() -> loadSavedAddresses() already sets selectedSessionAddress when a
             // session intent exists; bail if that didn't happen (e.g. address_id already set).
@@ -1936,7 +2076,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         if (await this.tryAutoConfirmAfterLogin())
             return;
         if (!this.modal?.hasAttribute?.("visible") || !this.isLoggedIn) {
-            this.open();
+            this.open(false, "after_login");
         }
     }
     buildIntentAddress() {
@@ -2215,13 +2355,14 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         }
         return raw;
     }
-    async handleConfirm() {
+    async handleConfirm(intentBeforeDraft) {
         if (this.isConfirmDisabled() || this.confirming)
             return;
         this.allocationOutOfCoverageMessage = null;
         this.confirming = true;
         this.confirmBtn?.load();
         let scheduledRedirect = false;
+        const previousIntent = intentBeforeDraft === undefined ? this.getStoredIntent() : intentBeforeDraft;
         try {
             // A guest map pin uses the pin's own country; the IP/selected country may differ from it.
             const country = this.activeTab === "address" && this.isGuestMapPick
@@ -2239,6 +2380,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                     const savedAddress = await this.saveSessionAddressToProfile();
                     if (!savedAddress) {
                         Salla.notify?.error(Salla.lang.get("common.errors.error_occurred"));
+                        this.trackSelectorResult("failed", previousIntent, []);
                         this.confirmBtn?.stop();
                         return;
                     }
@@ -2313,6 +2455,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                         ? Salla.lang.get("pages.checkout.address_out_of_coverage")
                         : Salla.lang.get("pages.checkout.failed_to_set_pickup"));
                 this.allocationOutOfCoverageMessage = `${errorMessage}.`;
+                this.trackSelectorResult("failed", previousIntent, []);
                 this.confirmBtn?.stop();
                 this.confirming = false;
                 return;
@@ -2349,6 +2492,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                     const scopeApplied = await bulletDeliveryAPI.setDeliveryScope(allocatedScopeId);
                     if (!scopeApplied) {
                         this.allocationOutOfCoverageMessage = `${Salla.lang.get("common.errors.error_occurred")}.`;
+                        this.trackSelectorResult("failed", previousIntent, [], allocatedScopeId);
                         this.confirmBtn?.stop();
                         this.confirming = false;
                         return;
@@ -2368,6 +2512,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             // After allocation success: persist latest intent so switch UI can always reflect
             // the selected address/branch once confirmed.
             this.setStoredIntent({ ...result, scope_allocated: true });
+            this.trackSelectorResult("accepted", previousIntent, allocatedBranchIds(result), allocatedScopeId);
             const allocationConfirmedPayload = {
                 ...result,
                 address: this.buildAllocationConfirmedAddressData(selectedAddress),
@@ -2887,7 +3032,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         if (canOpenForIncompleteIntent) {
             this.markIncompleteIntentPrompted();
         }
-        this.open();
+        this.open(false, canOpenForIncompleteIntent ? "incomplete_intent" : "after_add_to_cart");
     }
     overrideScopeSwitchUI() {
         const intent = this.getStoredIntent();
@@ -2940,7 +3085,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                     // silently awaiting with nothing visible.
                     if (!this.isGuestUser()) {
                         if (!this.modal?.hasAttribute?.("visible")) {
-                            this.open();
+                            this.open(false, "checkout_gate");
                         }
                         await this.pendingCartSubmitPromise;
                         return;
@@ -2969,7 +3114,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                         this.openGuestLogin();
                         return;
                     }
-                    this.open();
+                    this.open(false, "checkout_gate");
                 });
                 await this.pendingCartSubmitPromise;
             };
@@ -2985,6 +3130,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         Salla.event.on("salla::bullet-delivery.modal.open.requested", this.bulletDeliveryOpenHandler);
         this.closeHandler = this.close.bind(this);
         Salla.event.on("salla::bullet-delivery.modal.close.requested", this.closeHandler);
+        Salla.event.on("modal::close", this.modalCloseHandler);
         this.isRTL = Salla.config.get("theme.is_rtl");
         // Reading the permission never prompts, so it's safe to watch from here — the map view then
         // renders the notice (or not) on its first paint instead of a frame later.
@@ -3009,7 +3155,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                 return;
             if (this.modal?.hasAttribute?.("visible"))
                 return;
-            this.open();
+            this.open(false, "after_login");
         };
         Salla.event.on("auth::logged.in", this.authLoggedInHandler);
         this.authLoggedOutHandler = () => {
@@ -3041,7 +3187,10 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             return null; // no-op when disabled
         return (h(Host, { class: "s-bullet-delivery" }, h("salla-modal", { ref: modal => {
                 this.modal = modal;
-            }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), class: "s-bullet-delivery-modal", width: "sm", "data-testid": "salla-bullet-delivery-modal" }, h("div", { class: "s-bullet-delivery-inner" }, h("div", { class: "s-bullet-delivery-header" }, h("h2", { class: "s-bullet-delivery-title" }, this.activeTab === 'address'
+            }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), onModalVisibilityChanged: (event) => {
+                if (event.target === this.modal)
+                    this.handleModalVisibility(Boolean(event.detail));
+            }, class: "s-bullet-delivery-modal", width: "sm", "data-testid": "salla-bullet-delivery-modal" }, h("div", { class: "s-bullet-delivery-inner" }, h("div", { class: "s-bullet-delivery-header" }, h("h2", { class: "s-bullet-delivery-title" }, this.activeTab === 'address'
             ? Salla.lang.get('blocks.home.add_address_for_order_delivery')
             : Salla.lang.get('blocks.home.choose_branch_for_order_pickup')), h("p", { class: "s-bullet-delivery-subtitle" }, this.activeTab === 'address'
             ? Salla.lang.get('blocks.home.products_available_for_delivery_shown_while_shopping')
@@ -3077,7 +3226,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
         // Handle pending open request (if event was emitted before component was ready)
         if (this.pendingOpen) {
             this.pendingOpen = false;
-            this.open();
+            this.open(false, this.openTrigger);
             return;
         }
         // Strategy-based auto-open logic
@@ -3085,11 +3234,11 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             case "first_visit":
                 // Open once per session when component mounts (per-session behaviour)
                 if (!this.hasBeenShownThisSession()) {
-                    this.open();
+                    this.open(false, "first_visit");
                 }
                 else if (this.shouldPromptIncompleteIntentThisSession()) {
                     this.markIncompleteIntentPrompted();
-                    this.open();
+                    this.open(false, "incomplete_intent");
                 }
                 break;
             case "on_cart_click":
@@ -3097,11 +3246,11 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
                 if (Salla.url.is_page("cart")) {
                     const shown = this.getShownStorage().get(this.sessionShownKey) === true;
                     if (!shown) {
-                        this.open();
+                        this.open(false, "on_cart_click");
                     }
                     else if (this.shouldPromptIncompleteIntentThisSession()) {
                         this.markIncompleteIntentPrompted();
-                        this.open();
+                        this.open(false, "incomplete_intent");
                     }
                 }
                 break;
@@ -3121,6 +3270,7 @@ const SallaBulletDelivery$1 = /*@__PURE__*/ proxyCustomElement(class SallaBullet
             this.stopWatchingLocationPermission = null;
         }
         Salla.event.off("salla::bullet-delivery.modal.open.requested", this.bulletDeliveryOpenHandler);
+        Salla.event.off("modal::close", this.modalCloseHandler);
         if (this.closeHandler) {
             Salla.event.off("salla::bullet-delivery.modal.close.requested", this.closeHandler);
             this.closeHandler = null;

package/dist/components/salla-free-shipping-banner.js

@@ -2,9 +2,9 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as isEligibleForFreeShipping } from './free-shipping.js';
+import { i as isEligibleForFreeShipping, s as startTimerIfNeeded, a as isTimerEnabled, b as subscribeToFreeShippingTimer, g as getFreeShippingTimerState } from './free-shipping-timer.js';
 
-const sallaFreeShippingBannerCss = "/*!twlt*/salla-free-shipping-banner{display:block}.s-free-shipping-banner{--s-fsb-tint:rgba(128, 128, 128, 0.1);--s-fsb-tint-2:rgba(128, 128, 128, 0.18);--s-fsb-shine:rgba(128, 128, 128, 0.35);color:inherit;font-size:13.5px;line-height:1.4;background:var(--s-fsb-tint);margin-block-start:1rem;margin-block-end:1rem;border-radius:12px;padding:8px 12px}@supports (color: color-mix(in srgb, red, blue)){.s-free-shipping-banner{--s-fsb-tint:color-mix(in srgb, currentColor 9%, transparent);--s-fsb-tint-2:color-mix(in srgb, currentColor 12%, transparent);--s-fsb-shine:color-mix(in srgb, currentColor 40%, transparent)}}.s-free-shipping-banner svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.s-free-shipping-banner__inner{display:flex;align-items:center;gap:10px}.s-free-shipping-banner__icon{flex:none;inline-size:42px;block-size:28px;overflow:visible}.s-free-shipping-banner__icon .s-fsb-fill{fill:currentColor;stroke:none}.s-free-shipping-banner__icon .s-fsb-window{fill:#fff;stroke:none}.s-free-shipping-banner__icon .s-fsb-line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.s-free-shipping-banner__icon .s-fsb-wheel{fill:none;stroke:currentColor;stroke-width:2}.s-free-shipping-banner__icon .s-fsb-body{animation:s-fsb-bob 0.36s ease-in-out infinite alternate}.s-free-shipping-banner__icon .s-fsb-speed path{animation:s-fsb-speed 0.6s linear infinite}.s-free-shipping-banner__icon .s-fsb-speed path:nth-child(2){animation-delay:0.2s}.s-free-shipping-banner__icon .s-fsb-speed path:nth-child(3){animation-delay:0.4s}.s-free-shipping-banner__text{margin:0;flex:1 1 auto;min-inline-size:0}.s-free-shipping-banner__text strong{display:block;font-size:14.5px;font-weight:700;line-height:1.3}.s-free-shipping-banner__desc{display:block;font-size:12.5px;line-height:1.35;opacity:0.85;margin-block-start:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-free-shipping-banner__chip{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding-inline:10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--s-fsb-tint-2)}.s-free-shipping-banner__chip svg{inline-size:15px;block-size:15px}.s-free-shipping-banner__chip::after{content:\"\";position:absolute;top:0;bottom:0;left:0;inline-size:45%;background:linear-gradient(90deg, transparent, var(--s-fsb-shine), transparent);transform:translateX(-150%) skewX(-18deg);animation:s-fsb-shine 5s ease-in-out infinite;pointer-events:none}@media (prefers-reduced-motion: reduce){.s-free-shipping-banner *,.s-free-shipping-banner *::after{animation:none !important}}@media (max-width: 767px){.s-free-shipping-banner__desc{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.s-free-shipping-banner__chip{padding-inline:9px}}@media (min-width: 900px){.s-free-shipping-banner{padding:8px 14px}.s-free-shipping-banner__inner{gap:12px}.s-free-shipping-banner__icon{inline-size:48px;block-size:32px}.s-free-shipping-banner__text strong{font-size:15.5px}.s-free-shipping-banner__desc{font-size:13px}}@keyframes s-fsb-bob{from{transform:translateY(0)}to{transform:translateY(-0.8px)}}@keyframes s-fsb-speed{0%{transform:translateX(2px);opacity:0}30%{opacity:0.9}100%{transform:translateX(-7px);opacity:0}}@keyframes s-fsb-shine{0%{transform:translateX(-150%) skewX(-18deg)}26%,100%{transform:translateX(360%) skewX(-18deg)}}.visible{visibility:visible}.hidden{display:none}";
+const sallaFreeShippingBannerCss = "/*!twlt*/salla-free-shipping-banner{display:block}.s-free-shipping-banner{--s-fsb-tint:rgba(128, 128, 128, 0.1);--s-fsb-tint-2:rgba(128, 128, 128, 0.18);--s-fsb-shine:rgba(128, 128, 128, 0.35);color:inherit;font-size:13.5px;line-height:1.4;background:var(--s-fsb-tint);margin-block-start:1rem;margin-block-end:1rem;border-radius:12px;padding:8px 12px}@supports (color: color-mix(in srgb, red, blue)){.s-free-shipping-banner{--s-fsb-tint:color-mix(in srgb, currentColor 9%, transparent);--s-fsb-tint-2:color-mix(in srgb, currentColor 12%, transparent);--s-fsb-shine:color-mix(in srgb, currentColor 40%, transparent)}}.s-free-shipping-banner svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.s-free-shipping-banner__inner{display:flex;align-items:center;gap:10px}.s-free-shipping-banner__icon{flex:none;inline-size:42px;block-size:28px;overflow:visible}.s-free-shipping-banner__icon .s-fsb-fill{fill:currentColor;stroke:none}.s-free-shipping-banner__icon .s-fsb-window{fill:#fff;stroke:none}.s-free-shipping-banner__icon .s-fsb-line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.s-free-shipping-banner__icon .s-fsb-wheel{fill:none;stroke:currentColor;stroke-width:2}.s-free-shipping-banner__icon .s-fsb-body{animation:s-fsb-bob 0.36s ease-in-out infinite alternate}.s-free-shipping-banner__icon .s-fsb-speed path{animation:s-fsb-speed 0.6s linear infinite}.s-free-shipping-banner__icon .s-fsb-speed path:nth-child(2){animation-delay:0.2s}.s-free-shipping-banner__icon .s-fsb-speed path:nth-child(3){animation-delay:0.4s}.s-free-shipping-banner__text{margin:0;flex:1 1 auto;min-inline-size:0}.s-free-shipping-banner__text strong{display:block;font-size:14.5px;font-weight:700;line-height:1.3}.s-free-shipping-banner__desc{display:block;font-size:12.5px;line-height:1.35;opacity:0.85;margin-block-start:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-free-shipping-banner__timer{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding-inline:10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--s-fsb-tint-2)}.s-free-shipping-banner__timer svg{inline-size:15px;block-size:15px}.s-free-shipping-banner__timer::after{content:\"\";position:absolute;top:0;bottom:0;left:0;inline-size:45%;background:linear-gradient(90deg, transparent, var(--s-fsb-shine), transparent);transform:translateX(-150%) skewX(-18deg);animation:s-fsb-shine 5s ease-in-out infinite;pointer-events:none}.s-free-shipping-banner__clock{font-size:13.5px;font-variant-numeric:tabular-nums;font-feature-settings:\"tnum\";direction:ltr;unicode-bidi:isolate}.s-free-shipping-banner.has-paper .s-free-shipping-banner__timer{background:var(--s-fsb-ink);color:var(--s-fsb-paper)}@media (prefers-reduced-motion: reduce){.s-free-shipping-banner *,.s-free-shipping-banner *::after{animation:none !important}}@media (max-width: 767px){.s-free-shipping-banner__desc{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.s-free-shipping-banner__label{display:none}.s-free-shipping-banner__timer{padding-inline:9px}}@media (min-width: 900px){.s-free-shipping-banner{padding:8px 14px}.s-free-shipping-banner__inner{gap:12px}.s-free-shipping-banner__icon{inline-size:48px;block-size:32px}.s-free-shipping-banner__text strong{font-size:15.5px}.s-free-shipping-banner__desc{font-size:13px}}@keyframes s-fsb-bob{from{transform:translateY(0)}to{transform:translateY(-0.8px)}}@keyframes s-fsb-speed{0%{transform:translateX(2px);opacity:0}30%{opacity:0.9}100%{transform:translateX(-7px);opacity:0}}@keyframes s-fsb-shine{0%{transform:translateX(-150%) skewX(-18deg)}26%,100%{transform:translateX(360%) skewX(-18deg)}}.visible{visibility:visible}.hidden{display:none}";
 
 const LABELS = {
     title: {
@@ -15,11 +15,27 @@ const LABELS = {
         ar: 'لفترة محدودة! تسوّق واستفد من الشحن المجاني',
         en: 'Shop now and save on delivery for a limited time.',
     },
-    limited: {
-        ar: 'عرض لفترة محدودة',
-        en: 'Limited-time offer',
+    ends_in: {
+        ar: 'ينتهي خلال',
+        en: 'Ends in',
     },
 };
+const pad = (n) => (n < 10 ? '0' : '') + n;
+function formatClock(ms) {
+    const seconds = Math.max(0, Math.floor(ms / 1000));
+    return `${pad(Math.floor(seconds / 3600))}:${pad(Math.floor((seconds % 3600) / 60))}:${pad(seconds % 60)}`;
+}
+function luminance(rgb) {
+    const m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(rgb || '');
+    if (!m)
+        return null;
+    const f = (c) => {
+        c /= 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * f(+m[1]) + 0.7152 * f(+m[2]) + 0.0722 * f(+m[3]);
+}
+const isTransparent = (bg) => !bg || bg === 'transparent' || /rgba\(\d+,\s*\d+,\s*\d+,\s*0\)/.test(bg);
 const SallaFreeShippingBanner$1 = /*@__PURE__*/ proxyCustomElement(class SallaFreeShippingBanner extends HTMLElement {
     constructor() {
         super();
@@ -27,7 +43,19 @@ const SallaFreeShippingBanner$1 = /*@__PURE__*/ proxyCustomElement(class SallaFr
         /** Where the banner is rendered: the home page or the product page. */
         this.placement = 'home';
         this.locale = 'ar';
+        /** Whether free shipping applies here (feature on and the eligibility check passed). */
         this.visible = false;
+        this.timer = null;
+        this.onColorSchemeChange = () => this.measureInkAndPaper();
+    }
+    connectedCallback() {
+        this.colorScheme = window.matchMedia?.('(prefers-color-scheme: dark)');
+        this.colorScheme?.addEventListener?.('change', this.onColorSchemeChange);
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+        this.stopTick();
+        this.colorScheme?.removeEventListener?.('change', this.onColorSchemeChange);
     }
     async componentWillLoad() {
         try {
@@ -43,27 +71,86 @@ const SallaFreeShippingBanner$1 = /*@__PURE__*/ proxyCustomElement(class SallaFr
             // home: is the store offering free shipping; product page: is this product eligible
             const productId = this.placement === 'product' ? salla.config.get('page.id') : undefined;
             this.visible = await isEligibleForFreeShipping(productId);
+            if (this.visible) {
+                // The visitor sees the banner now: remember when, the first time only.
+                startTimerIfNeeded();
+                // Only a banner that can show, and has a timer, follows it (to hide at the end and come back after).
+                if (isTimerEnabled()) {
+                    this.unsubscribe = subscribeToFreeShippingTimer(() => this.refreshTimer());
+                }
+            }
+            this.refreshTimer();
         }
         catch (e) {
             salla?.logger?.warn?.('salla-free-shipping-banner: init failed', e);
         }
     }
+    refreshTimer() {
+        this.timer = getFreeShippingTimerState();
+        if (this.visible && this.timer?.visible) {
+            this.tick = this.tick ?? setInterval(() => this.refreshTimer(), 1000);
+        }
+        else {
+            this.stopTick();
+        }
+    }
+    stopTick() {
+        clearInterval(this.tick);
+        this.tick = undefined;
+    }
+    /**
+     * The timer chip is drawn from the theme's own colours: solid in the text colour ("ink")
+     * with the nearest opaque background behind the banner ("paper") as its text colour.
+     */
+    measureInkAndPaper() {
+        const bar = this.host?.querySelector('.s-free-shipping-banner');
+        if (!bar)
+            return;
+        this.measuredBar = bar;
+        const ink = getComputedStyle(bar.parentElement || bar).color;
+        let paper = null;
+        for (let node = bar.parentElement; node; node = node.parentElement) {
+            const bg = getComputedStyle(node).backgroundColor;
+            if (!isTransparent(bg)) {
+                paper = bg;
+                break;
+            }
+        }
+        if (!paper) {
+            const l = luminance(ink);
+            paper = l != null && l > 0.5 ? '#111418' : '#ffffff';
+        }
+        bar.style.setProperty('--s-fsb-ink', ink);
+        bar.style.setProperty('--s-fsb-paper', paper);
+        bar.classList.add('has-paper');
+    }
+    componentDidRender() {
+        // The colours do not change with the countdown: measure once per banner element (it is a new
+        // element each time the banner comes back), and again on a colour scheme change.
+        const bar = this.host?.querySelector('.s-free-shipping-banner');
+        if (bar && bar !== this.measuredBar) {
+            this.measureInkAndPaper();
+        }
+    }
     /** Store translation wins, the built-in label is the fallback for the current language. */
     label(name) {
         const label = LABELS?.[name]?.[this.locale];
         return salla.lang.getWithDefault?.(`blocks.free_shipping_banner.${name}`, label) || label;
     }
     render() {
-        if (!this.visible) {
+        const timer = this.timer;
+        if (!this.visible || !timer?.visible) {
             return null;
         }
-        return (h(Host, null, h("div", { class: "container" }, h("section", { class: "s-free-shipping-banner", "aria-label": this.label('title') }, h("div", { class: "s-free-shipping-banner__inner" }, h("svg", { class: "s-free-shipping-banner__icon", viewBox: "0 0 48 32", "aria-hidden": "true" }, h("g", { class: "s-fsb-speed" }, h("path", { class: "s-fsb-line", d: "M3 11h7" }), h("path", { class: "s-fsb-line", d: "M1 16h5" }), h("path", { class: "s-fsb-line", d: "M4 21h6" })), h("g", { class: "s-fsb-body" }, h("rect", { class: "s-fsb-fill", x: "12", y: "5", width: "21", height: "16", rx: "2.5" }), h("path", { class: "s-fsb-fill", d: "M33 10h6.5a2 2 0 0 1 1.6.8l4.1 5.5c.5.7.8 1.5.8 2.4V21H33z" }), h("rect", { class: "s-fsb-fill", x: "12", y: "20", width: "34", height: "3.5", rx: "1.2" }), h("rect", { class: "s-fsb-window", x: "35", y: "12", width: "5.5", height: "4", rx: "1" })), h("circle", { class: "s-fsb-wheel", cx: "19.5", cy: "25.5", r: "3" }), h("circle", { class: "s-fsb-wheel", cx: "38", cy: "25.5", r: "3" })), h("p", { class: "s-free-shipping-banner__text" }, h("strong", null, this.label('title')), h("span", { class: "s-free-shipping-banner__desc" }, this.label('description'))), h("span", { class: "s-free-shipping-banner__chip" }, h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "13.5", r: "7" }), h("path", { d: "M10 2.5h4M12 2.5v4M12 13.5V9.5M18 7.5l1.5-1.5" })), h("span", null, this.label('limited'))))))));
+        return (h(Host, null, h("div", { class: "container" }, h("section", { class: "s-free-shipping-banner", "aria-label": this.label('title') }, h("div", { class: "s-free-shipping-banner__inner" }, h("svg", { class: "s-free-shipping-banner__icon", viewBox: "0 0 48 32", "aria-hidden": "true" }, h("g", { class: "s-fsb-speed" }, h("path", { class: "s-fsb-line", d: "M3 11h7" }), h("path", { class: "s-fsb-line", d: "M1 16h5" }), h("path", { class: "s-fsb-line", d: "M4 21h6" })), h("g", { class: "s-fsb-body" }, h("rect", { class: "s-fsb-fill", x: "12", y: "5", width: "21", height: "16", rx: "2.5" }), h("path", { class: "s-fsb-fill", d: "M33 10h6.5a2 2 0 0 1 1.6.8l4.1 5.5c.5.7.8 1.5.8 2.4V21H33z" }), h("rect", { class: "s-fsb-fill", x: "12", y: "20", width: "34", height: "3.5", rx: "1.2" }), h("rect", { class: "s-fsb-window", x: "35", y: "12", width: "5.5", height: "4", rx: "1" })), h("circle", { class: "s-fsb-wheel", cx: "19.5", cy: "25.5", r: "3" }), h("circle", { class: "s-fsb-wheel", cx: "38", cy: "25.5", r: "3" })), h("p", { class: "s-free-shipping-banner__text" }, h("strong", null, this.label('title')), h("span", { class: "s-free-shipping-banner__desc" }, this.label('description'))), h("span", { class: "s-free-shipping-banner__timer" }, h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "8" }), h("path", { d: "M12 8v4l3 2" })), h("span", { class: "s-free-shipping-banner__label" }, this.label('ends_in')), h("span", { class: "s-free-shipping-banner__clock", role: "timer" }, formatClock(timer.remainingMs))))))));
     }
+    get host() { return this; }
     static get style() { return sallaFreeShippingBannerCss; }
 }, [0, "salla-free-shipping-banner", {
         "placement": [1],
         "locale": [32],
-        "visible": [32]
+        "visible": [32],
+        "timer": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/salla-free-shipping-tag.js

@@ -2,9 +2,9 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as isEligibleForFreeShipping } from './free-shipping.js';
+import { g as getFreeShippingTimerState, a as isTimerEnabled, b as subscribeToFreeShippingTimer, i as isEligibleForFreeShipping } from './free-shipping-timer.js';
 
-const sallaFreeShippingTagCss = "/*!twlt*/salla-free-shipping-tag{display:block}.s-free-shipping-tag{display:inline-flex;align-items:center;gap:6px;margin-block-start:0.5rem;margin-bottom:1.25rem;padding:4px 10px;border-radius:8px;font-size:13px;line-height:1.4;color:#7a4b0c;background:rgba(245, 158, 11, 0.14)}.s-free-shipping-tag svg{inline-size:16px;block-size:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}";
+const sallaFreeShippingTagCss = "/*!twlt*/salla-free-shipping-tag{display:block}.s-free-shipping-tag{display:inline-flex;align-items:center;gap:6px;margin-block-start:0.5rem;margin-bottom:1.25rem;padding:4px 10px;border-radius:8px;font-size:13px;line-height:1.4;color:#7a4b0c;background:rgba(245, 158, 11, 0.14)}.s-free-shipping-tag svg{inline-size:16px;block-size:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.visible{visibility:visible}.hidden{display:none}";
 
 const SallaFreeShippingTag$1 = /*@__PURE__*/ proxyCustomElement(class SallaFreeShippingTag extends HTMLElement {
     constructor() {
@@ -15,13 +15,26 @@ const SallaFreeShippingTag$1 = /*@__PURE__*/ proxyCustomElement(class SallaFreeS
         /** With `fromProductCard`, whether the tag is shown. */
         this.showFreeShipping = false;
         this.isFree = false;
+        this.timerHidden = false;
         this.label = '';
     }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+    }
+    // The banner records when the visitor first saw it. Until then, or with the feature off, nothing hides the tag.
+    refreshTimer() {
+        this.timerHidden = getFreeShippingTimerState()?.visible === false;
+    }
     async componentWillLoad() {
         try {
             await salla.onReady();
             await salla.lang.onLoaded();
             const fallback = salla.lang.getLocale?.() === 'en' ? 'Free shipping' : 'شحن مجاني';
+            // Only follow the timer when there is one (feature on and timer settings present).
+            if (isTimerEnabled()) {
+                this.unsubscribe = subscribeToFreeShippingTimer(() => this.refreshTimer());
+            }
+            this.refreshTimer();
             this.label =
                 salla.lang.getWithDefault?.('pages.products.free_shipping', fallback) || fallback;
             if (this.fromProductCard) {
@@ -36,7 +49,7 @@ const SallaFreeShippingTag$1 = /*@__PURE__*/ proxyCustomElement(class SallaFreeS
         }
     }
     render() {
-        if (!this.isFree) {
+        if (!this.isFree || this.timerHidden) {
             return null;
         }
         return (h(Host, null, h("div", { class: "s-free-shipping-tag" }, h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M3 6.5h11v9H3zM14 9.5h3.6l2.9 3.2v2.8H14" }), h("circle", { cx: "7.5", cy: "17", r: "1.8" }), h("circle", { cx: "17", cy: "17", r: "1.8" })), h("span", { class: "s-free-shipping-tag-label" }, this.label))));
@@ -48,6 +61,7 @@ const SallaFreeShippingTag$1 = /*@__PURE__*/ proxyCustomElement(class SallaFreeS
         "fromProductCard": [4, "from-product-card"],
         "showFreeShipping": [4, "show-free-shipping"],
         "isFree": [32],
+        "timerHidden": [32],
         "label": [32]
     }]);
 function defineCustomElement$1() {