@salla.sa/twilight-components 2.14.370 → 2.14.372

package/dist/collection/assets/svg/mini-map.svg

@@ -0,0 +1,31 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_24181_220540)">
+    <mask id="mask0_24181_220540" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="33" height="32">
+    <rect x="1.90958" y="0.576577" width="30.8468" height="30.8468" rx="9.22523" fill="#D9D9D9" stroke="white" stroke-width="1.15315"/>
+    </mask>
+    <g mask="url(#mask0_24181_220540)">
+    <rect x="1.90958" y="0.576577" width="30.8468" height="30.8468" rx="9.22523" fill="#E8E8E8" stroke="white" stroke-width="1.15315"/>
+    <path d="M17.9096 6.77445L28.7204 5.33301H32.4681L32.7564 11.8195V23.6393L10.4141 23.9276V10.8105L17.9096 6.77445Z" fill="#97E7C8"/>
+    <path d="M-2.70303 10.6664H10.2699M41.6934 5.47722C38.378 5.47722 34.7744 5.47722 27.8555 5.47722C20.9366 5.47722 18.4862 6.63037 15.4591 8.64839C12.4321 10.6664 10.2699 10.6664 10.2699 10.6664M10.2699 34.4502V23.6394M10.2699 10.6664V23.6394M-6.16249 23.6394H10.2699M10.2699 23.6394H21.0807M38.8105 23.6394H21.0807M21.0807 23.6394V34.4502" stroke="white" stroke-width="2.30631"/>
+    <rect x="2.34202" y="1.00901" width="29.982" height="29.982" rx="8.79279" stroke="white" stroke-width="2.01802"/>
+    </g>
+    <g clip-path="url(#clip0_24181_220540)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.069 19.8621C19.4995 18.6902 22.171 16.0948 22.171 13.0548C22.171 11.7333 21.6461 10.466 20.7117 9.5316C19.7773 8.5972 18.51 8.07227 17.1885 8.07227C15.8671 8.07227 14.5998 8.5972 13.6654 9.5316C12.731 10.466 12.2061 11.7333 12.2061 13.0548C12.2061 16.0948 14.8776 18.6902 16.3081 19.8621C16.5553 20.0679 16.8669 20.1806 17.1885 20.1806C17.5102 20.1806 17.8218 20.0679 18.069 19.8621ZM17.1885 14.1618C17.517 14.1618 17.838 14.0644 18.1111 13.8819C18.3842 13.6995 18.597 13.4401 18.7227 13.1367C18.8484 12.8333 18.8812 12.4994 18.8172 12.1773C18.7531 11.8552 18.595 11.5593 18.3627 11.3271C18.1305 11.0948 17.8346 10.9367 17.5125 10.8726C17.1904 10.8085 16.8565 10.8414 16.5531 10.9671C16.2497 11.0928 15.9903 11.3056 15.8079 11.5787C15.6254 11.8518 15.528 12.1728 15.528 12.5012C15.528 12.9416 15.703 13.364 16.0144 13.6754C16.3258 13.9868 16.7481 14.1618 17.1885 14.1618Z" fill="#55575D"/>
+    </g>
+    </g>
+    <defs>
+    <filter id="filter0_d_24181_220540" x="-0.000325561" y="0" width="34.6667" height="34.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="1.33333"/>
+    <feGaussianBlur stdDeviation="0.666667"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24181_220540"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_24181_220540" result="shape"/>
+    </filter>
+    <clipPath id="clip0_24181_220540">
+    <rect width="12.1081" height="12.1081" fill="white" transform="translate(11.1338 8.07227)"/>
+    </clipPath>
+    </defs>
+    </svg>
+    

package/dist/collection/assets/svg/store3.svg

@@ -0,0 +1,12 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M1.14453 5.83032L1.14453 9.16486C1.14453 11.0511 1.14453 11.9943 1.73032 12.5803C2.3161 13.1663 3.25891 13.1663 5.14453 13.1663L9.14453 13.1663C11.0301 13.1663 11.9729 13.1663 12.5587 12.5803C13.1445 11.9943 13.1445 11.0511 13.1445 9.16486V5.83032"
+        stroke="currentcolor" stroke-linecap="round" />
+    <path
+        d="M9.14453 10.1619C8.68846 10.5667 7.9624 10.8285 7.14453 10.8285C6.32666 10.8285 5.60059 10.5667 5.14453 10.1619"
+        stroke="currentcolor" stroke-linecap="round" />
+    <path
+        d="M5.90256 4.44533C5.71455 5.12426 5.03086 6.29542 3.73185 6.46516C2.58488 6.61502 1.71497 6.11437 1.49277 5.90504C1.24779 5.7353 0.689441 5.19216 0.552703 4.85269C0.415966 4.51322 0.575492 3.77771 0.689441 3.47785L1.14495 2.15892C1.25615 1.82765 1.51646 1.04411 1.78334 0.779094C2.05022 0.514073 2.59054 0.502543 2.81294 0.502543L7.48329 0.502543C8.68543 0.519525 11.3139 0.491824 11.8335 0.502545C12.3532 0.513266 12.6654 0.948828 12.7565 1.13553C13.5318 3.01341 13.8333 4.08889 13.8333 4.54717C13.7321 5.03605 13.3133 5.95787 11.8335 6.36332C10.2956 6.7847 9.42363 5.96509 9.15007 5.65043M5.27015 5.65044C5.48665 5.91635 6.16578 6.45158 7.15029 6.46516C8.1348 6.47873 8.98485 5.79188 9.28681 5.44676C9.37227 5.34492 9.55687 5.04279 9.7483 4.44533"
+        stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
+    

package/dist/collection/collection-manifest.json

@@ -12,6 +12,7 @@
     "components/salla-booking-field/salla-booking-field.js",
     "components/salla-bottom-alert/salla-bottom-alert.js",
     "components/salla-breadcrumb/salla-breadcrumb.js",
+    "components/salla-bullet-delivery/salla-bullet-delivery.js",
     "components/salla-button/salla-button.js",
     "components/salla-cart-item-offers/salla-cart-item-offers.js",
     "components/salla-cart-summary/salla-cart-summary.js",

package/dist/collection/components/salla-bullet-delivery/api-service.js

@@ -0,0 +1,135 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * API Service for salla-bullet-delivery component
+ * Uses Salla's shipping API and scope API for delivery location management
+ */
+const API_LOG_PREFIX = 'BulletDeliveryAPI';
+const validId = (id) => {
+    const n = id == null ? Number.NaN : Number(id);
+    return !Number.isNaN(n) && n !== 0;
+};
+async function withApiErrorHandling(fn, fallback, logLabel) {
+    try {
+        return await fn();
+    }
+    catch (error) {
+        console.error(`${API_LOG_PREFIX}: ${logLabel}`, error);
+        return fallback;
+    }
+}
+/** Uses country code from API (e.g. 'SA'). */
+export const isSaudiArabia = (countryCode) => String(countryCode).toUpperCase() === 'SA';
+/**
+ * Fast Delivery API Service
+ * Uses Salla's shipping API and scopes API. Branch and address data are used as returned by the API (no mapping).
+ */
+export const bulletDeliveryAPI = {
+    /**
+     * Get available countries from Salla shipping API
+     * @param forBranch - when true, use for_branch=1 (e.g. for pickup/branches tab)
+     */
+    async getCountries(forBranch = false) {
+        return withApiErrorHandling(async () => {
+            const data = (await salla.api.request("shipping/countries", { params: { for_branch: forBranch ? 1 : 0 } }))?.data ?? [];
+            return data.map((c) => ({ id: c.id, code: c.code, name: c.name, has_regions: isSaudiArabia(c.code) }));
+        }, [], 'Error getting countries');
+    },
+    /**
+     * Get regions for a country from Salla shipping API
+     * Endpoint: GET /shipping/countries/<COUNTRY_ID>/region
+     */
+    async getRegions(countryId) {
+        if (!validId(countryId)) {
+            console.warn(`${API_LOG_PREFIX}: getRegions called without valid country_id`);
+            return [];
+        }
+        return withApiErrorHandling(async () => {
+            const data = (await salla.api.request(`shipping/countries/${countryId}/regions`))?.data ?? [];
+            return data.map((r) => ({ id: r.id, name: r.name, code: r.code, country_id: Number(countryId) }));
+        }, [], 'Error fetching regions');
+    },
+    /**
+     * Get cities from Salla shipping API
+     * @param regionId - Optional; when provided (e.g. for SA), cities are filtered by region
+     */
+    async getCities(countryId, regionId) {
+        if (!validId(countryId)) {
+            console.warn(`${API_LOG_PREFIX}: getCities called without valid country_id`);
+            return [];
+        }
+        return withApiErrorHandling(async () => {
+            const params = { for_branch: 0, country_id: countryId };
+            if (regionId)
+                params.region_id = regionId;
+            const data = (await salla.api.request("shipping/cities", { params }))?.data ?? [];
+            return data.map((c) => ({ id: c.id, name: c.name, country_id: countryId, ...(c.region_id != null && { region_id: c.region_id }) }));
+        }, [], 'Error fetching cities');
+    },
+    /**
+     * Get districts from Salla shipping API
+     */
+    async getDistricts(cityId) {
+        if (!validId(cityId)) {
+            console.warn(`${API_LOG_PREFIX}: getDistricts called without valid city_id`);
+            return [];
+        }
+        return withApiErrorHandling(async () => {
+            const raw = (await salla.api.request("shipping/districts", { params: { for_branch: 0, city_id: cityId } }))?.data;
+            const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.districts) ? raw.districts : []);
+            return list.map((d) => ({ id: d.id, name: d.name, name_en: d.name_en, city_id: cityId }));
+        }, [], 'Error fetching districts');
+    },
+    async getSavedAddresses() {
+        return withApiErrorHandling(async () => {
+            const data = (await salla.api.request("address"))?.data;
+            return Array.isArray(data) ? data : [];
+        }, [], 'Error fetching user addresses');
+    },
+    async getBranches({ query, lat, lng, country_id, per_page = 20 } = {}) {
+        return withApiErrorHandling(async () => {
+            const params = { per_page };
+            if (query?.trim().length >= 2)
+                params.query = query;
+            if (lat)
+                params.lat = lat;
+            if (lng)
+                params.lng = lng;
+            if (country_id)
+                params.country_id = country_id;
+            const res = await salla.api.request("branches", { params });
+            return (Array.isArray(res?.data) ? res.data : []);
+        }, [], 'Error fetching branches');
+    },
+    async saveAddressLocation(payload) {
+        return withApiErrorHandling(async () => {
+            const res = await salla.api.request('address/location', { ...payload, for_allocation: true }, 'post');
+            const data = res?.data ?? res;
+            const address = typeof data === 'object' && data != null && 'id' in data ? data : undefined;
+            return { success: true, address };
+        }, { success: false }, 'Error saving address/location');
+    },
+    async setDeliveryScope(scopeId) {
+        return withApiErrorHandling(async () => {
+            await salla.scope.change({ id: scopeId });
+            salla.storage.set("scope", { ...(salla.storage.get("scope") || {}), id: scopeId });
+            return true;
+        }, false, 'Error setting delivery scope');
+    },
+    async allocateScope(payload) {
+        const errMsg = (d) => d?.error?.message ?? d?.message ?? 'Failed to allocate scope';
+        try {
+            const response = await salla.api.request("scopes/allocation", payload, 'post');
+            // SDK resolves with { data } and throws on non-2xx; any resolved value is success
+            const data = response?.data ?? response;
+            return { success: true, data: data };
+        }
+        catch (error) {
+            console.error(`${API_LOG_PREFIX}: Error allocating scope`, error);
+            const err = error;
+            return { success: false, error: err?.response?.data != null ? errMsg(err.response.data) : (err?.message ?? 'Unknown error') };
+        }
+    },
+};
+export default bulletDeliveryAPI;

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

@@ -0,0 +1,125 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * Helper functions for salla-bullet-delivery component
+ */
+import { isSaudiArabia } from "./api-service";
+const EARTH_RADIUS_KM = 6371;
+const deg2rad = (deg) => deg * (Math.PI / 180);
+/** Haversine distance in km */
+function calculateDistance(lat1, lon1, lat2, lon2) {
+    const dLat = deg2rad(lat2 - lat1);
+    const dLon = deg2rad(lon2 - lon1);
+    const a = Math.sin(dLat / 2) ** 2 +
+        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon / 2) ** 2;
+    return EARTH_RADIUS_KM * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+/** First working-hours slot from API branch.working_hours[].times[]. */
+export const getBranchFirstSlot = (workingHours) => workingHours?.[0]?.times?.[0] ?? null;
+/** Nearest available branch by distance; single pass O(n). */
+export function findNearestBranch(branches, userLat, userLon) {
+    let nearest = null;
+    let minD = Number.POSITIVE_INFINITY;
+    for (const b of branches) {
+        const lat = b.location?.lat != null ? Number(b.location.lat) : Number.NaN;
+        const lng = b.location?.lng != null ? Number(b.location.lng) : Number.NaN;
+        if (Number.isNaN(lat) || Number.isNaN(lng) || b.is_open === false)
+            continue;
+        const d = calculateDistance(userLat, userLon, lat, lng);
+        if (d < minD) {
+            minD = d;
+            nearest = b;
+        }
+    }
+    return nearest;
+}
+/** 24h time string → locale 12h (e.g. "23:55" → "11:55 PM"). */
+export function formatTimeTo12h(time24, locale) {
+    const [h, m] = String(time24).trim().split(':').map(Number);
+    return Number.isNaN(h) || Number.isNaN(m)
+        ? time24
+        : new Date(2000, 0, 1, h, m).toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit', hour12: true });
+}
+/** Working hours display: "until X" when from is 00:00, else "from - to" in 12h. */
+export function formatWorkingHoursDisplay(from, to, locale, untilLabel) {
+    const f = String(from).trim();
+    const t = String(to).trim();
+    return !f || !t ? '' : f === '00:00' ? `${untilLabel} ${formatTimeTo12h(t, locale)}` : `${formatTimeTo12h(f, locale)} - ${formatTimeTo12h(t, locale)}`;
+}
+export const filterBranches = (branches, searchQuery) => {
+    if (!searchQuery)
+        return branches;
+    const q = searchQuery.toLowerCase();
+    return branches.filter((b) => b.name.toLowerCase().includes(q) || b.city?.name?.toLowerCase().includes(q));
+};
+/** Match saved address to guest intent by city/district (and optional street). */
+export function findMatchingAddress(guestIntent, userAddresses) {
+    const cityId = getIntentCityId(guestIntent);
+    const districtId = getIntentDistrictId(guestIntent);
+    return userAddresses.find((addr) => {
+        const addrCity = addr.city?.id ?? addr.city_id;
+        const addrDistrict = addr.district?.id ?? addr.district_id;
+        if (cityId == null || addrCity !== cityId)
+            return false;
+        if (districtId != null) {
+            if (addrDistrict !== districtId)
+                return false;
+            if (guestIntent.street && addr.street)
+                return guestIntent.street.toLowerCase() === addr.street.toLowerCase();
+            return true;
+        }
+        return true;
+    }) ?? null;
+}
+export const getIntentSubtitle = (intent, toAddress, fromBranch) => {
+    if (intent.type === 'branch') {
+        const loc = intent.branch_details?.city ?? intent.branch_details?.name;
+        return loc ? `${fromBranch} ${loc}`.trim() : '';
+    }
+    if (intent.type === 'address' && intent.address_details) {
+        const addr = [intent.address_details.district?.name, intent.address_details.city?.name, intent.address_details.country?.name].filter(Boolean).join('، ') || intent.address_details.short_address || '';
+        return addr ? `${toAddress} ${addr}`.trim() : '';
+    }
+    return '';
+};
+const idFrom = (val) => (val != null ? Number(val) : undefined);
+export const getIntentCountryId = (i) => idFrom(i?.address_details?.country?.id);
+export const getIntentCountryCode = (i) => i?.country_code ?? i?.address_details?.country?.code ?? '';
+export const getIntentRegionId = (i) => idFrom(i?.address_details?.region?.id);
+export const getIntentCityId = (i) => idFrom(i?.address_details?.city?.id);
+export const getIntentDistrictId = (i) => idFrom(i?.address_details?.district?.id);
+export const getIntentBranchId = (i) => i?.branch_details?.id;
+/** Intent coordinates (branch tab only; address flow no longer uses coordinates). */
+export const getIntentLatitude = (i) => i?.branch_details?.latitude;
+export const getIntentLongitude = (i) => i?.branch_details?.longitude;
+export const hasSessionAddressIntent = (intent) => {
+    if (!intent || intent.type !== 'address' || intent.address_id)
+        return false;
+    const c = getIntentCountryId(intent);
+    const city = getIntentCityId(intent);
+    const d = getIntentDistrictId(intent);
+    const code = getIntentCountryCode(intent);
+    return !!(c && city && (!isSaudiArabia(code) || d));
+};
+export const requireRegionAndDistrictForSA = (countryCode, regionId, districtIdOrName) => !countryCode || !isSaudiArabia(countryCode)
+    ? true
+    : (regionId != null && Number(regionId) !== 0) && (districtIdOrName != null && (typeof districtIdOrName === 'number' ? districtIdOrName !== 0 : String(districtIdOrName).trim().length > 0));
+export function buildAddressLocationPayloadFromSelection(options) {
+    const { countryId, countryCode, regionId, cityId, districtId, description = '' } = options;
+    const desc = description || '';
+    return {
+        country_id: Number(countryId) || undefined,
+        region_id: regionId != null ? Number(regionId) : undefined,
+        city_id: cityId != null ? Number(cityId) : undefined,
+        district_id: districtId != null ? Number(districtId) : undefined,
+        description: desc,
+        ...(countryCode && isSaudiArabia(countryCode) && { local: desc }),
+    };
+}
+const GEO_ERROR_MESSAGES = {
+    [GeolocationPositionError.PERMISSION_DENIED]: 'Location permission denied',
+    [GeolocationPositionError.POSITION_UNAVAILABLE]: 'Location unavailable',
+    [GeolocationPositionError.TIMEOUT]: 'Location timeout',
+};
+export const getGeolocationErrorMessage = (errorCode) => GEO_ERROR_MESSAGES[errorCode] ?? 'An error occurred while detecting location';

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.css

@@ -0,0 +1,23 @@
+@supports (interpolate-size: allow-keywords) and (block-size: calc-size(auto, size)) {
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body, .s-bullet-delivery-inner {
+    @apply [interpolate-size:allow-keywords];
+  }
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body {
+    @apply [overflow:clip] [transition:block-size_500ms_ease];
+  }
+  .s-bullet-delivery-inner {
+    @apply [overflow:clip] [transition:block-size_500ms_ease];
+    block-size: calc-size(auto, size);
+  }
+}
+
+@keyframes s-bullet-delivery-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}