@salla.sa/twilight-components 3.0.17 → 3.0.19

package/dist/types/components/salla-bullet-delivery/salla-bullet-delivery.d.ts

@@ -1,4 +1,6 @@
 import { type EventEmitter } from "../../stencil-public-runtime";
+import { type SelectorTrigger } from "./selector-tracker";
+import type { BranchDiscountRange } from "./helpers";
 import type { AddressCreatedEvent, Branch, BulletDeliveryConfirmedEvent, City, Country, District, HeaderContextUpdateEvent, IntentType, NewAddressFormData, Region, SavedAddress } from "./interfaces";
 import { type LocationPermissionState } from "./location-permission-notice";
 import { type Coordinates } from "./location-distance-warning";
@@ -12,6 +14,8 @@ export declare class SallaBulletDelivery {
     private pendingCartSubmitResolver;
     private pendingCartSubmitPromise;
     private cartSubmitConfirmationPending;
+    /** Query the current branch list was searched with server-side; its results are not re-filtered locally. */
+    private branchesServerQuery;
     private branchSearchDebounceTimer;
     private countrySearchTimer;
     private regionSearchTimer;
@@ -38,6 +42,10 @@ export declare class SallaBulletDelivery {
     private hasExplicitPreselectedIdsForOpen;
     private bulletDeliveryOpenHandler;
     private closeHandler;
+    private readonly selectorTracker;
+    private openTrigger;
+    private pendingDismissReason;
+    private modalCloseHandler;
     private bulletDeliveryMobileSelectHandler;
     /** True after saved addresses have been loaded (lazy: only when address tab is shown). */
     private savedAddressesLoaded;
@@ -48,6 +56,8 @@ export declare class SallaBulletDelivery {
      *  coordinates re-picked, or the map left) can be told apart from the current one. */
     private geocodeRequestId;
     private isRTL;
+    /** Identifies the latest pickup-offer fetch so one from an earlier modal open is dropped. */
+    private pickupDiscountRequestId;
     activeTab: IntentType;
     isLoggedIn: boolean;
     viewMode: ViewMode;
@@ -66,9 +76,33 @@ export declare class SallaBulletDelivery {
     /** True when user selected the session address (guest address from before login, not yet saved) */
     selectedSessionAddress: boolean;
     branches: Branch[];
+    /** Pickup offer range across the store's branches (INV-1416); null shows the default tab badge. */
+    pickupDiscountRange: BranchDiscountRange | null;
+    /** False until the offer lookup settles, so the tab never flashes the default badge before an offer. */
+    pickupDiscountResolved: boolean;
     filteredBranches: Branch[];
     selectedBranch: Branch | null;
     branchSearchQuery: string;
+    /** Cities that have branches in the selected country (from the unfiltered branch list). */
+    branchCities: {
+        id: number;
+        name: string;
+    }[];
+    selectedBranchCity: {
+        id: number;
+        name: string;
+    } | null;
+    branchCitySearchQuery: string;
+    /** Branch whose weekly hours are expanded behind the chevron (one at a time). */
+    expandedScheduleBranchId: number | null;
+    /** Shopper's device location for branch distances (see getGrantedDeviceLocation). */
+    private shopperLocation;
+    private shopperLocationRequestId;
+    private nearestBranchRequestId;
+    /** Bumped per branch-list request; overlapping city/search loads only apply the latest one. */
+    private branchesRequestId;
+    /** Shared country rows and city options expire with the API cache. */
+    private allBranchCities;
     loadingCountries: boolean;
     loadingCities: boolean;
     loadingDistricts: boolean;
@@ -152,11 +186,14 @@ export declare class SallaBulletDelivery {
      * 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.
      */
-    open(silent?: boolean): Promise<void>;
+    open(silent?: boolean, trigger?: SelectorTrigger): Promise<void>;
     /**
      * Closes the bullet delivery modal
      */
     close(): Promise<HTMLElement>;
+    private selectorContext;
+    private handleModalVisibility;
+    private trackSelectorResult;
     private resetState;
     private getIntentStorage;
     private getShownStorage;
@@ -207,6 +244,8 @@ export declare class SallaBulletDelivery {
     private loadDistricts;
     private findPrefillDistrict;
     private loadBranches;
+    /** Reuse the country's city collection while keeping visible choices usable during loading. */
+    private refreshBranchCities;
     /**
      * Store a freshly fetched branch list and reconcile the current selection with it.
      * `selectedBranch` is a snapshot from selection time: when the refreshed list carries the
@@ -214,6 +253,13 @@ export declare class SallaBulletDelivery {
      * A selection missing from the list (e.g. filtered out by a search) is left untouched.
      */
     private applyLoadedBranches;
+    /** Shares a fresh branch collection with the picker on each modal open. */
+    private loadPickupDiscountRange;
+    /**
+     * ar: "خصم 25%" / "خصم 5 – 25%" / "خصم 10 ر.س"; en: "25% discount" / "5 – 25% discount" / "10 SAR discount".
+     * Money may carry the riyal-symbol SVG, so it renders as HTML.
+     */
+    private getPickupDiscountLabel;
     private filterBranches;
     /**
      * Prefill form fields from session storage
@@ -239,7 +285,10 @@ export declare class SallaBulletDelivery {
     private loadBranchesWithLocation;
     /** Locate nearest branch using device geolocation (branches tab only). */
     private handleFindNearestBranch;
+    private geolocationErrorMessage;
     private handleBranchSelect;
+    private handleBranchCitySelected;
+    private toggleBranchSchedule;
     /**
      * Restore a remembered / event-provided branch — but only one the list renders as selectable,
      * so a branch that has closed since it was remembered is never silently preselected (INV-1407).
@@ -314,6 +363,17 @@ export declare class SallaBulletDelivery {
     private renderMapCountryNotice;
     /** Center shown before geolocation resolves — the customer's IP-based default (falls back to Riyadh). */
     private get mapInitialCenter();
+    /** Device location for a branch list request, waiting at most BRANCH_LIST_LOCATION_WAIT. */
+    private getListLocation;
+    /**
+     * Where branch distances (`distance_km`) are measured from: the shopper's real device location
+     * only. It comes from "nearest to my location", or is read silently when location permission was
+     * already granted (never prompting). Empty otherwise: `user.default_geo_location` and the Riyadh
+     * map fallback are not where the shopper is, so they would show wrong distances.
+     */
+    private getGrantedDeviceLocation;
+    /** The customer's IP-based `user.default_geo_location`, or null when it is missing or invalid. */
+    private get defaultGeoLocation();
     /** Parse a config coordinate to a finite number, treating blank/whitespace strings as missing. */
     private toCoordinate;
     /**
@@ -391,10 +451,16 @@ export declare class SallaBulletDelivery {
     private getCartViewConfig;
     /** Creates the cart view DOM for mounting into cart.items.start hook */
     private createCartViewElement;
+    /**
+     * A branch pickup offer (INV-1416) replaces the default "save delivery fees" badge; only one shows,
+     * and neither until the offer lookup settles.
+     */
+    private renderPickupTabBadge;
     private renderTabs;
     private renderAlert;
     private renderAllocationOutOfCoverageAlert;
     private handleCountrySelected;
+    /** `showLabel` is off in the pickup filter panel, where the selects sit label-less side by side. */
     private renderCountrySelect;
     private handleRegionSelected;
     /** Region select (SA only): shown when SA is selected; city and district disabled until region selected. */
@@ -418,10 +484,23 @@ export declare class SallaBulletDelivery {
     private renderDeliveryTab;
     private renderGuestDeliveryContent;
     private renderBranchSearch;
-    /** Renders a branch's `preparation_time_range` as a localized "from - to <unit>" label. */
-    private getPreparationTimeLabel;
     private renderBranchList;
+    /** "يبعد عنك: ~" stays muted; the distance and its unit read as the value, as in checkout. */
+    private renderDistanceLabel;
+    private get isArabic();
+    private formatClock;
+    /** "جاهز اليوم 10:00 ص" for a branch that is closed now and opens later today. */
+    private getReadyTodayLabel;
+    /** "15-30 د" — compact preparation range for the card's meta row. */
+    private getPreparationShortLabel;
+    /**
+     * Busy, always-open, or the backend's `open_status_line` ("مفتوح - يغلق عند 11:00 م"), which reads
+     * the hours on the branch's clock. Without that line, `is_open` gives a bare open/closed label.
+     */
+    private renderBranchOpenStatus;
     private renderPickupTab;
+    /** City filter for the pickup list; options come from the branches themselves, so none is empty. */
+    private renderBranchCitySelect;
     /** Add-address form: map + confirm card in one screen, or dropdown fallback. */
     private renderAddAddressForm;
     private renderFooter;

package/dist/types/components/salla-bullet-delivery/selector-tracker.d.ts

@@ -0,0 +1,30 @@
+import type { BulletDeliveryResult } from "./interfaces";
+export type SelectorTrigger = "first_visit" | "after_add_to_cart" | "on_cart_click" | "incomplete_intent" | "checkout_gate" | "after_login" | "customer_requested";
+export type SelectorCloseReason = "escape" | "backdrop" | "close_button";
+export interface SelectorContext {
+    configured_required: boolean;
+    effective_nonclosable: boolean;
+    trigger_configured: string | null;
+    trigger_actual: SelectorTrigger;
+}
+export interface SelectorResult {
+    outcome: "accepted" | "failed";
+    fulfilment_method: "pickup" | "delivery";
+    previous_branch_ids: number[];
+    new_branch_ids: number[];
+    scope_id: number | null;
+}
+export declare const toCloseReason: (reason?: string) => SelectorCloseReason;
+export declare const allocatedBranchIds: (intent: BulletDeliveryResult | null) => number[];
+export declare class SelectorTracker {
+    private impressionId;
+    private visibleAt;
+    viewed(context: SelectorContext): void;
+    dismissed(context: SelectorContext, reason: SelectorCloseReason, hadAcceptedSelection: boolean): void;
+    result(context: SelectorContext, result: SelectorResult): void;
+    private guarded;
+    private send;
+    private session;
+    private storageName;
+    private save;
+}

package/dist/types/components/salla-free-shipping-banner/salla-free-shipping-banner.d.ts

@@ -1,15 +1,29 @@
+import { FreeShippingTimerState } from '../../shared/free-shipping-timer';
 export type BannerPlacement = 'home' | 'product';
-/**
- * Non-dismissible banner announcing the store's free shipping offer.
- * Where it is rendered (`placement`) decides which banner data is requested, and the
- * response decides whether it is shown.
- */
 export declare class SallaFreeShippingBanner {
     /** Where the banner is rendered: the home page or the product page. */
     placement: BannerPlacement;
+    host: HTMLElement | undefined;
     locale: string;
+    /** Whether free shipping applies here (feature on and the eligibility check passed). */
     visible: boolean;
+    timer: FreeShippingTimerState | null;
+    private tick;
+    private measuredBar;
+    private unsubscribe;
+    private colorScheme;
+    private onColorSchemeChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): Promise<void>;
+    private refreshTimer;
+    private stopTick;
+    /**
+     * 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.
+     */
+    private measureInkAndPaper;
+    componentDidRender(): void;
     /** Store translation wins, the built-in label is the fallback for the current language. */
     private label;
     render(): any;

package/dist/types/components/salla-free-shipping-tag/salla-free-shipping-tag.d.ts

@@ -1,6 +1,7 @@
 /**
  * Small "free shipping" tag for a product. Meant to be placed below the price in any
- * product card.
+ * product card. It follows the free shipping banner: while the banner's countdown is over and the
+ * banner is hidden, the tag is hidden too.
  */
 export declare class SallaFreeShippingTag {
     /** The product to show the tag for. */
@@ -11,7 +12,11 @@ export declare class SallaFreeShippingTag {
     showFreeShipping: boolean;
     host: HTMLElement | undefined;
     isFree: boolean;
+    timerHidden: boolean;
     label: string;
+    private unsubscribe;
+    disconnectedCallback(): void;
+    private refreshTimer;
     componentWillLoad(): Promise<void>;
     render(): any;
 }

package/dist/types/components/salla-gifting/salla-gifting.d.ts

@@ -77,6 +77,7 @@ export declare class SallaGifting {
     private step2Animated;
     private stepAnimationTimer;
     private static readonly CITY_AJAX_THRESHOLD;
+    private static readonly CUSTOM_TEXT_MAX_LENGTH;
     private static readonly CITY_SEARCH_DEBOUNCE_MS;
     private citySearchTimer;
     private citySearchCounter;

package/dist/types/components/salla-quick-buy/salla-quick-buy.d.ts

@@ -111,6 +111,9 @@ export declare class SallaQuickBuy {
     requireLogin: EventEmitter<{
         productId: string;
     }>;
+    /** The guest picked "continue as guest" on the login step, so don't ask again. */
+    private choseGuest;
+    private cancelLoginAsk;
     private quickBuyHandler;
     /** Sync PDP-option validity (preserves the AP gesture); emits + notifies on failure. */
     private validatePdpOptionsSync;
@@ -135,6 +138,9 @@ export declare class SallaQuickBuy {
     private resolveSupportedNetworks;
     private settlePayment;
     private legacyQuickPurchaseFallback;
+    /** login-before-checkout variant: offer login or guest before buy now. Not for Apple Pay, which must open on the tap. */
+    private shouldAskLoginFirst;
+    private askLoginFirst;
     private isGuestCheckout;
     private isGuestCheckoutAllowed;
     private getRequiredShippingContactFields;

package/dist/types/components/salla-rating-modal/salla-rating-modal-v2.d.ts

@@ -67,6 +67,7 @@ export declare class SallaRatingModalV2 {
     private steps;
     private dots;
     private submitted;
+    private isSubmitting;
     private thanksCountdownInterval;
     private MAX_IMAGE_UPLOAD_LIMIT;
     private MAX_VIDEO_UPLOAD_LIMIT;

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ import { Attachment as Attachment1 } from "./components/salla-attachment-view/sa
 import { Option } from "./components/salla-booking-field/interfaces";
 import { SallaBookingFieldInvalidInputEvent } from "./components/salla-booking-field/salla-booking-field";
 import { AddressCreatedEvent, BulletDeliveryConfirmedEvent, HeaderContextUpdateEvent } from "./components/salla-bullet-delivery/interfaces";
+import { SelectorTrigger } from "./components/salla-bullet-delivery/selector-tracker";
 import { Coupon } from "./components/salla-cart-coupons/interfaces";
 import { Color, Options } from "./components/salla-color-picker/interfaces";
 import { Comment, CommentSort, CommentType, ReviewFactor } from "./components/salla-comments/interfaces";
@@ -58,6 +59,7 @@ export { Attachment as Attachment1 } from "./components/salla-attachment-view/sa
 export { Option } from "./components/salla-booking-field/interfaces";
 export { SallaBookingFieldInvalidInputEvent } from "./components/salla-booking-field/salla-booking-field";
 export { AddressCreatedEvent, BulletDeliveryConfirmedEvent, HeaderContextUpdateEvent } from "./components/salla-bullet-delivery/interfaces";
+export { SelectorTrigger } from "./components/salla-bullet-delivery/selector-tracker";
 export { Coupon } from "./components/salla-cart-coupons/interfaces";
 export { Color, Options } from "./components/salla-color-picker/interfaces";
 export { Comment, CommentSort, CommentType, ReviewFactor } from "./components/salla-comments/interfaces";
@@ -425,7 +427,7 @@ export namespace Components {
         /**
           * Opens the bullet delivery modal. Pass `silent: true` to run the same state/data loading below without showing the modal — used by tryAutoConfirmAfterLogin() so a 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.
          */
-        "open": (silent?: boolean) => Promise<void>;
+        "open": (silent?: boolean, trigger?: SelectorTrigger) => Promise<void>;
     }
     /**
      * @name SallaBulletDeliveryTag
@@ -1552,11 +1554,6 @@ export namespace Components {
          */
         "withLoadMore": boolean;
     }
-    /**
-     * Non-dismissible banner announcing the store's free shipping offer.
-     * Where it is rendered (`placement`) decides which banner data is requested, and the
-     * response decides whether it is shown.
-     */
     interface SallaFreeShippingBanner {
         /**
           * Where the banner is rendered: the home page or the product page.
@@ -1566,7 +1563,8 @@ export namespace Components {
     }
     /**
      * Small "free shipping" tag for a product. Meant to be placed below the price in any
-     * product card.
+     * product card. It follows the free shipping banner: while the banner's countdown is over and the
+     * banner is hidden, the tag is hidden too.
      */
     interface SallaFreeShippingTag {
         /**
@@ -4616,11 +4614,6 @@ declare global {
         prototype: HTMLSallaFiltersWidgetElement;
         new (): HTMLSallaFiltersWidgetElement;
     };
-    /**
-     * Non-dismissible banner announcing the store's free shipping offer.
-     * Where it is rendered (`placement`) decides which banner data is requested, and the
-     * response decides whether it is shown.
-     */
     interface HTMLSallaFreeShippingBannerElement extends Components.SallaFreeShippingBanner, HTMLStencilElement {
     }
     var HTMLSallaFreeShippingBannerElement: {
@@ -4629,7 +4622,8 @@ declare global {
     };
     /**
      * Small "free shipping" tag for a product. Meant to be placed below the price in any
-     * product card.
+     * product card. It follows the free shipping banner: while the banner's countdown is over and the
+     * banner is hidden, the tag is hidden too.
      */
     interface HTMLSallaFreeShippingTagElement extends Components.SallaFreeShippingTag, HTMLStencilElement {
     }
@@ -7311,11 +7305,6 @@ declare namespace LocalJSX {
          */
         "withLoadMore"?: boolean;
     }
-    /**
-     * Non-dismissible banner announcing the store's free shipping offer.
-     * Where it is rendered (`placement`) decides which banner data is requested, and the
-     * response decides whether it is shown.
-     */
     interface SallaFreeShippingBanner {
         /**
           * Where the banner is rendered: the home page or the product page.
@@ -7325,7 +7314,8 @@ declare namespace LocalJSX {
     }
     /**
      * Small "free shipping" tag for a product. Meant to be placed below the price in any
-     * product card.
+     * product card. It follows the free shipping banner: while the banner's countdown is over and the
+     * banner is hidden, the tag is hidden too.
      */
     interface SallaFreeShippingTag {
         /**
@@ -9794,15 +9784,11 @@ declare module "@stencil/core" {
             "salla-file-upload": LocalJSX.SallaFileUpload & JSXBase.HTMLAttributes<HTMLSallaFileUploadElement>;
             "salla-filters": LocalJSX.SallaFilters & JSXBase.HTMLAttributes<HTMLSallaFiltersElement>;
             "salla-filters-widget": LocalJSX.SallaFiltersWidget & JSXBase.HTMLAttributes<HTMLSallaFiltersWidgetElement>;
-            /**
-             * Non-dismissible banner announcing the store's free shipping offer.
-             * Where it is rendered (`placement`) decides which banner data is requested, and the
-             * response decides whether it is shown.
-             */
             "salla-free-shipping-banner": LocalJSX.SallaFreeShippingBanner & JSXBase.HTMLAttributes<HTMLSallaFreeShippingBannerElement>;
             /**
              * Small "free shipping" tag for a product. Meant to be placed below the price in any
-             * product card.
+             * product card. It follows the free shipping banner: while the banner's countdown is over and the
+             * banner is hidden, the tag is hidden too.
              */
             "salla-free-shipping-tag": LocalJSX.SallaFreeShippingTag & JSXBase.HTMLAttributes<HTMLSallaFreeShippingTagElement>;
             /**

package/dist/types/shared/free-shipping-timer.d.ts

@@ -0,0 +1,36 @@
+export interface FreeShippingTimerState {
+    /** Whether the banner (and the free shipping tag) may be shown right now. */
+    visible: boolean;
+    /** While visible: time left on the countdown. While hidden: 0. */
+    remainingMs: number;
+    /** Time until `visible` flips. */
+    nextChangeMs: number;
+}
+/** The countdown and hidden period, from the store settings with 45 hours and 7 days as the fallback. */
+export declare function getTimerSettings(): {
+    countdownMs: number;
+    hiddenMs: number;
+};
+/** The timer exists only for visitors the backend allowed the banner for. */
+export declare function isTimerEnabled(): boolean;
+/** When the visitor first saw the banner, or null if they have not yet. */
+export declare function getStartedAt(): number | null;
+/**
+ * Records the first time the visitor saw the banner. Does nothing when it is already recorded
+ * or when the feature is off.
+ */
+export declare function startTimerIfNeeded(now?: number): number | null;
+/**
+ * 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 declare function computeTimerState(startedAt: number, now: number, countdownMs: number, hiddenMs: number): FreeShippingTimerState;
+/**
+ * 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 declare function getFreeShippingTimerState(now?: number): FreeShippingTimerState | null;
+/** Calls back whenever the banner and tags have to show or hide. Returns the unsubscribe function. */
+export declare function subscribeToFreeShippingTimer(listener: () => void): () => void;
+/** Test helper. */
+export declare function resetFreeShippingTimer(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "3.0.17",
+  "version": "3.0.19",
   "license": "GPL-3.0",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -82,9 +82,9 @@
   },
   "dependencies": {
     "@googlemaps/markerclusterer": "2.6.2",
-    "@salla.sa/applepay": "3.0.17",
-    "@salla.sa/twilight": "3.0.17",
-    "@salla.sa/twilight-tailwind-theme": "3.0.17",
+    "@salla.sa/applepay": "3.0.19",
+    "@salla.sa/twilight": "3.0.19",
+    "@salla.sa/twilight-tailwind-theme": "3.0.19",
     "@salla.sa/ui-address-autocomplete-widget": "1.2.1",
     "@salla.sa/ui-google-map-render": "1.2.1",
     "@types/node": "^20.4.8",
@@ -104,5 +104,5 @@
     "vanilla-lazyload": "^17.9.0",
     "vanilla-picker": "^2.12.3"
   },
-  "gitHead": "a5342823e2e6bdff83f7ae1b97ed43666361e90b"
+  "gitHead": "7668f911e50da28e3b118964ad95591db283bf40"
 }

package/dist/cjs/free-shipping-DkIKD6ch.js

@@ -1,31 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-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);
-}
-
-exports.isEligibleForFreeShipping = isEligibleForFreeShipping;