@salla.sa/twilight-components 3.0.18 → 3.0.20

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

@@ -1,5 +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";
@@ -13,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;
@@ -53,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;
@@ -71,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;
@@ -215,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
@@ -222,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
@@ -247,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).
@@ -322,8 +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();
-    /** Parse a config coordinate to a finite number, treating blank/whitespace strings as missing. */
-    private toCoordinate;
+    /** 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();
     /**
      * Submit add-address form: stage the picked address/dropdowns as the session intent,
      * then delegate to handleConfirm() for the single save→allocate→close path (avoids
@@ -399,10 +449,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. */
@@ -426,10 +482,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-mobile-update-modal/salla-mobile-update-modal.d.ts

@@ -0,0 +1,44 @@
+type Step = 'choice' | 'mobile' | 'verify';
+type Mode = 'same_number' | 'new_number';
+/**
+ * Makes a customer flagged as a duplicate confirm the current mobile number or replace it, verified by a code.
+ * Opened by `salla.mobileUpdate`, which mounts it on any theme when the order submit is blocked.
+ */
+export declare class SallaMobileUpdateModal {
+    host: HTMLElement;
+    options: Mode[];
+    step: Step;
+    mode: Mode;
+    errorMessage: string;
+    fieldError: string;
+    private modal;
+    private telInput;
+    private verify;
+    private phone;
+    private completed;
+    private sending;
+    private flow;
+    private dialCode;
+    private t;
+    /**
+     * Open the popup
+     * @param data `options` is the list the backend returned: `new_number`, and `same_number` for an unresolved duplicate
+     */
+    open(data?: {
+        options?: string[];
+    }): Promise<void>;
+    private onVisibilityChanged;
+    private fail;
+    private sendCode;
+    private requestCode;
+    private verifyCode;
+    private resendCode;
+    componentDidRender(): void;
+    private chooseMode;
+    private changeNumber;
+    private sentTo;
+    private clarification;
+    private body;
+    render(): any;
+}
+export {};

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,11 +138,26 @@ 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;
+    /**
+     * The saved address the shopper confirmed in Bullet Delivery, for the checkout to use directly
+     * instead of the address Apple Pay would ask for (SHPD-11082). Undefined keeps the default
+     * Apple Pay address flow: no Bullet Delivery, no confirmed saved address, or a guest.
+     */
+    private getSavedAddressForApplePay;
     /** Set Apple Pay amount + currency from a price payload, always keeping the pair in one currency. */
     private applyBaseCurrencyPrice;
+    /**
+     * Networks/countries travel with price responses so the next sheet matches the new total
+     * (the low-amount network rules depend on it; the page config is a cached render snapshot).
+     * A payload without the key (product details, older backend) leaves the current source as-is.
+     */
+    private applyApplePayProperties;
     componentWillLoad(): Promise<unknown>;
     render(): any;
     private quickBuyButton;

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

@@ -155,6 +155,10 @@ export declare class SallaRatingModalV2 {
     private getRatingHiddenInput;
     private collectNamedInputs;
     private normalizeFactorsList;
+    private getRateStarsMessage;
+    private getValidationItemName;
+    /** Clear a step's validation message as soon as a star rating is picked. */
+    private clearValidationOnRating;
     private validate;
     private collectFormData;
     private buildProductRatingPayload;

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

@@ -41,6 +41,14 @@ export declare class SallaVerify {
      * Once the api verify success, it will be login the customer in web pages
      */
     supportWebAuth: boolean;
+    /**
+     * Replaces the verify request, for flows with their own endpoint. Receives `{code, ...data}`
+     */
+    verifyHandler?: (data: any) => Promise<any>;
+    /**
+     * Replaces the resend request, for flows with their own endpoint. Receives the data passed to `open()`
+     */
+    resendHandler?: (data: any) => Promise<any>;
     /**
      * Event when success verification
      */

package/dist/types/components.d.ts

@@ -2022,6 +2022,17 @@ export namespace Components {
          */
         "entityId": number | number[] | string;
     }
+    /**
+     * Makes a customer flagged as a duplicate confirm the current mobile number or replace it, verified by a code.
+     * Opened by `salla.mobileUpdate`, which mounts it on any theme when the order submit is blocked.
+     */
+    interface SallaMobileUpdateModal {
+        /**
+          * Open the popup
+          * @param data `options` is the list the backend returned: `new_number`, and `same_number` for an unresolved duplicate
+         */
+        "open": (data?: { options?: string[]; }) => Promise<void>;
+    }
     interface SallaModal {
         /**
           * Whether to center-align the modal header content. Default is false.
@@ -3926,6 +3937,10 @@ export namespace Components {
           * @param data
          */
         "open": (data: any) => Promise<void>;
+        /**
+          * Replaces the resend request, for flows with their own endpoint. Receives the data passed to `open()`
+         */
+        "resendHandler"?: (data: any) => Promise<any>;
         /**
           * Once the api verify success, it will be login the customer in web pages
           * @default true
@@ -3936,6 +3951,10 @@ export namespace Components {
           * @default 'mobile'
          */
         "type": 'mobile' | 'email';
+        /**
+          * Replaces the verify request, for flows with their own endpoint. Receives `{code, ...data}`
+         */
+        "verifyHandler"?: (data: any) => Promise<any>;
     }
     interface SallaWallet {
     }
@@ -4865,6 +4884,16 @@ declare global {
         prototype: HTMLSallaMetadataElement;
         new (): HTMLSallaMetadataElement;
     };
+    /**
+     * Makes a customer flagged as a duplicate confirm the current mobile number or replace it, verified by a code.
+     * Opened by `salla.mobileUpdate`, which mounts it on any theme when the order submit is blocked.
+     */
+    interface HTMLSallaMobileUpdateModalElement extends Components.SallaMobileUpdateModal, HTMLStencilElement {
+    }
+    var HTMLSallaMobileUpdateModalElement: {
+        prototype: HTMLSallaMobileUpdateModalElement;
+        new (): HTMLSallaMobileUpdateModalElement;
+    };
     interface HTMLSallaModalElementEventMap {
         "modalVisibilityChanged": Boolean;
         "modalBack": void;
@@ -5808,6 +5837,7 @@ declare global {
         "salla-map": HTMLSallaMapElement;
         "salla-menu": HTMLSallaMenuElement;
         "salla-metadata": HTMLSallaMetadataElement;
+        "salla-mobile-update-modal": HTMLSallaMobileUpdateModalElement;
         "salla-modal": HTMLSallaModalElement;
         "salla-multiple-bundle-product": HTMLSallaMultipleBundleProductElement;
         "salla-multiple-bundle-product-cart": HTMLSallaMultipleBundleProductCartElement;
@@ -7742,6 +7772,12 @@ declare namespace LocalJSX {
          */
         "entityId"?: number | number[] | string;
     }
+    /**
+     * Makes a customer flagged as a duplicate confirm the current mobile number or replace it, verified by a code.
+     * Opened by `salla.mobileUpdate`, which mounts it on any theme when the order submit is blocked.
+     */
+    interface SallaMobileUpdateModal {
+    }
     interface SallaModal {
         /**
           * Whether to center-align the modal header content. Default is false.
@@ -9480,6 +9516,10 @@ declare namespace LocalJSX {
           * Event when success verification
          */
         "onVerified"?: (event: SallaVerifyCustomEvent<SallaVerifyVerifiedEvent>) => void;
+        /**
+          * Replaces the resend request, for flows with their own endpoint. Receives the data passed to `open()`
+         */
+        "resendHandler"?: (data: any) => Promise<any>;
         /**
           * Once the api verify success, it will be login the customer in web pages
           * @default true
@@ -9490,6 +9530,10 @@ declare namespace LocalJSX {
           * @default 'mobile'
          */
         "type"?: 'mobile' | 'email';
+        /**
+          * Replaces the verify request, for flows with their own endpoint. Receives `{code, ...data}`
+         */
+        "verifyHandler"?: (data: any) => Promise<any>;
     }
     interface SallaWallet {
     }
@@ -9586,6 +9630,7 @@ declare namespace LocalJSX {
         "salla-map": SallaMap;
         "salla-menu": SallaMenu;
         "salla-metadata": SallaMetadata;
+        "salla-mobile-update-modal": SallaMobileUpdateModal;
         "salla-modal": SallaModal;
         "salla-multiple-bundle-product": SallaMultipleBundleProduct;
         "salla-multiple-bundle-product-cart": SallaMultipleBundleProductCart;
@@ -9841,6 +9886,11 @@ declare module "@stencil/core" {
             "salla-map": LocalJSX.SallaMap & JSXBase.HTMLAttributes<HTMLSallaMapElement>;
             "salla-menu": LocalJSX.SallaMenu & JSXBase.HTMLAttributes<HTMLSallaMenuElement>;
             "salla-metadata": LocalJSX.SallaMetadata & JSXBase.HTMLAttributes<HTMLSallaMetadataElement>;
+            /**
+             * Makes a customer flagged as a duplicate confirm the current mobile number or replace it, verified by a code.
+             * Opened by `salla.mobileUpdate`, which mounts it on any theme when the order submit is blocked.
+             */
+            "salla-mobile-update-modal": LocalJSX.SallaMobileUpdateModal & JSXBase.HTMLAttributes<HTMLSallaMobileUpdateModalElement>;
             "salla-modal": LocalJSX.SallaModal & JSXBase.HTMLAttributes<HTMLSallaModalElement>;
             /**
              * Example usage with new nested structure:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "3.0.18",
+  "version": "3.0.20",
   "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.18",
-    "@salla.sa/twilight": "3.0.18",
-    "@salla.sa/twilight-tailwind-theme": "3.0.18",
+    "@salla.sa/applepay": "3.0.20",
+    "@salla.sa/twilight": "3.0.20",
+    "@salla.sa/twilight-tailwind-theme": "3.0.20",
     "@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": "c9063f4c25769b9a5b3b7448c1075ffbadaf2a95"
+  "gitHead": "87982d444f0f3f162c8a96a5daaa004a0937487d"
 }