@salla.sa/twilight-components 2.14.573 → 2.14.574

package/dist/collection/Helpers/Helper.js

@@ -6,6 +6,14 @@ import anime from "animejs";
 //TODO::reduce it to 10
 salla.event.setMaxListeners(100);
 class Helper {
+    constructor() {
+        this.plans = {
+            0: 'basic',
+            25: 'plus',
+            50: 'pro',
+            100: 'special',
+        };
+    }
     setIncludes(includes) {
         this.includes = includes;
         return this;
@@ -19,7 +27,9 @@ class Helper {
         return this;
     }
     toggleClassIf(selector, classes1, classes2, callback) {
-        document.querySelectorAll(selector).forEach(element => this.toggleElementClassIf(element, classes1, classes2, callback));
+        document
+            .querySelectorAll(selector)
+            .forEach(element => this.toggleElementClassIf(element, classes1, classes2, callback));
         return this;
     }
     isValidEmail(email) {
@@ -28,7 +38,7 @@ class Helper {
     }
     filterEmojies(text) {
         var characterFilter = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g;
-        return text.replace(characterFilter, "");
+        return text.replace(characterFilter, '');
     }
     debounce(fn, ...data) {
         if (!this.debounce_) {
@@ -38,7 +48,7 @@ class Helper {
         return this.debounce_(fn, ...data);
     }
     getProductsSource(source) {
-        return {
+        return ({
             'brands.single': 'brands',
             'product.index': 'categories',
             'product.index.latest': 'latest',
@@ -49,23 +59,25 @@ class Helper {
             'product.index.tag': 'tags',
             'product.index.sales': 'sales',
             'components.most_sales_products': 'sales', //temporary, delete it after two days from now
-        }[source || salla.config.get('page.slug')] || source || 'latest';
+        }[source || salla.config.get('page.slug')] ||
+            source ||
+            'latest');
     }
     getApiSource(source) {
-        const apiSourceMap = { 'recently': 'selected' };
+        const apiSourceMap = { recently: 'selected' };
         return apiSourceMap[source] || source;
     }
     getPageTitleForSource(source) {
         source = {
-            'brands': 'common.titles.brands',
+            brands: 'common.titles.brands',
             // 'categories':'',
-            'latest': 'blocks.home.latest_products',
-            'offers': 'common.titles.discounts',
-            'reorder': 'common.titles.products',
+            latest: 'blocks.home.latest_products',
+            offers: 'common.titles.discounts',
+            reorder: 'common.titles.products',
             // 'search':'',
             // 'landing-page':'',
             // 'tags':'',
-            'sales': 'common.titles.most_sales',
+            sales: 'common.titles.most_sales',
         }[source];
         return source ? salla.lang.get(source) : '';
     }
@@ -150,12 +162,13 @@ class Helper {
     resolveFilterLabels(filters) {
         return filters.map((filter) => {
             const resolved = { ...filter };
-            resolved.label = {
-                category_id: salla.lang.get('common.titles.categories'),
-                brand_id: salla.lang.get('common.titles.brands'),
-                rating: salla.lang.get('pages.categories.filter_rating'),
-                price: salla.lang.get('pages.categories.filter_price'),
-            }[resolved.key] || resolved.label;
+            resolved.label =
+                {
+                    category_id: salla.lang.get('common.titles.categories'),
+                    brand_id: salla.lang.get('common.titles.brands'),
+                    rating: salla.lang.get('pages.categories.filter_rating'),
+                    price: salla.lang.get('pages.categories.filter_price'),
+                }[resolved.key] || resolved.label;
             if (resolved.key == 'rating') {
                 resolved.type = FilterOptionTypes.VALUES;
                 //@ts-ignore
@@ -292,92 +305,102 @@ class Helper {
         scriptElement.type = 'application/ld+json';
         // TODO: This json object MIGHT need mode data or properties.
         const jsonData = {
-            "@context": "http://schema.org",
-            "@type": "Product",
-            "name": product?.name,
-            "image": product?.image?.url || product?.thumbnail,
-            "description": product?.description,
-            "brand": {
-                "@type": "Brand",
-                "logo": product?.brand?.logo
+            '@context': 'http://schema.org',
+            '@type': 'Product',
+            name: product?.name,
+            image: product?.image?.url || product?.thumbnail,
+            description: product?.description,
+            brand: {
+                '@type': 'Brand',
+                logo: product?.brand?.logo,
+            },
+            offers: {
+                '@type': 'Offer',
+                price: product?.price,
             },
-            "offers": {
-                "@type": "Offer",
-                "price": product?.price
-            }
         };
         scriptElement.text = JSON.stringify(jsonData);
         return scriptElement;
     }
     createProductSchema(product, position) {
         let ProductSchema = {
-            "productID": `${product.id}`,
-            "@type": 'Product',
-            "name": product.name,
-            "url": product.url,
-            "image": product.image.url || product.image,
-            "description": product.description || product.subtitle || product.name,
+            productID: `${product.id}`,
+            '@type': 'Product',
+            name: product.name,
+            url: product.url,
+            image: product.image.url || product.image,
+            description: product.description || product.subtitle || product.name,
             // Add SKU only if valid
-            ...(product.sku && product.sku.length > 0 && {
-                "sku": product.sku
+            ...(product.sku &&
+                product.sku.length > 0 && {
+                sku: product.sku,
             }),
-            "offers": {
-                "@type": "Offer",
-                "url": product.url,
-                "priceCurrency": product.currency,
-                "price": product.price,
-                "itemCondition": "NewCondition",
-                "availability": product.is_available ? "InStock" : "OutOfStock",
+            offers: {
+                '@type': 'Offer',
+                url: product.url,
+                priceCurrency: product.currency,
+                price: product.price,
+                itemCondition: 'NewCondition',
+                availability: product.is_available ? 'InStock' : 'OutOfStock',
                 //if there is no product.discount_ends, will set it to be valid until the end of this week
-                "priceValidUntil": product.discount_ends || (new Date(new Date().setDate(new Date().getDate() + 7)).toISOString().split('T')[0]),
-                "priceSpecification": {
-                    "@type": "PriceSpecification",
-                    "price": product.regular_price,
-                    "priceCurrency": product.currency,
-                    "valueAddedTaxIncluded": product.is_taxable,
+                priceValidUntil: product.discount_ends ||
+                    new Date(new Date().setDate(new Date().getDate() + 7)).toISOString().split('T')[0],
+                priceSpecification: {
+                    '@type': 'PriceSpecification',
+                    price: product.regular_price,
+                    priceCurrency: product.currency,
+                    valueAddedTaxIncluded: product.is_taxable,
                 },
-                "seller": {
-                    "@type": "Organization",
-                    "name": salla.config.get('store.name'),
+                seller: {
+                    '@type': 'Organization',
+                    name: salla.config.get('store.name'),
                 },
-                "shippingDetails": {
-                    "@type": "OfferShippingDetails",
-                    "shippingRate": {
-                        "@type": "MonetaryAmount",
-                        "value": "0",
-                        "currency": product.currency || "SAR"
+                shippingDetails: {
+                    '@type': 'OfferShippingDetails',
+                    shippingRate: {
+                        '@type': 'MonetaryAmount',
+                        value: '0',
+                        currency: product.currency || 'SAR',
                     },
-                    "deliveryTime": {
-                        "@type": "ShippingDeliveryTime",
-                        "businessDays": {
-                            "@type": "OpeningHoursSpecification",
-                            "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
+                    deliveryTime: {
+                        '@type': 'ShippingDeliveryTime',
+                        businessDays: {
+                            '@type': 'OpeningHoursSpecification',
+                            dayOfWeek: [
+                                'Monday',
+                                'Tuesday',
+                                'Wednesday',
+                                'Thursday',
+                                'Friday',
+                                'Saturday',
+                                'Sunday',
+                            ],
                         },
-                        "cutoffTime": "14:00"
-                    }
+                        cutoffTime: '14:00',
+                    },
                 },
-                "hasMerchantReturnPolicy": {
-                    "@type": "MerchantReturnPolicy",
-                    "returnPolicyCategory": "https://schema.org/MerchantReturnFiniteReturnWindow",
-                    "merchantReturnDays": 30,
-                    "returnMethod": "https://schema.org/ReturnByMail",
-                    "returnFees": "https://schema.org/FreeReturn"
-                }
-            }
+                hasMerchantReturnPolicy: {
+                    '@type': 'MerchantReturnPolicy',
+                    returnPolicyCategory: 'https://schema.org/MerchantReturnFiniteReturnWindow',
+                    merchantReturnDays: 30,
+                    returnMethod: 'https://schema.org/ReturnByMail',
+                    returnFees: 'https://schema.org/FreeReturn',
+                },
+            },
         };
         //@ts-ignore
         if (product.rating?.stars) {
             ProductSchema.aggregateRating = {
-                "@type": "AggregateRating",
+                '@type': 'AggregateRating',
                 //@ts-ignore
-                "ratingValue": product.rating.stars,
-                "reviewCount": product.rating.count,
+                ratingValue: product.rating.stars,
+                reviewCount: product.rating.count,
             };
         }
         return {
-            "@type": "ListItem",
-            "position": position,
-            "item": ProductSchema,
+            '@type': 'ListItem',
+            position: position,
+            item: ProductSchema,
         };
     }
     generateProductSchema(productList) {
@@ -390,21 +413,21 @@ class Helper {
         script.type = 'application/ld+json';
         script.id = schemaId;
         const schema = {
-            "@context": "https://schema.org",
-            "@type": "ItemList",
-            "name": salla.config.get('page.title'),
-            "itemListElement": productList.map((product, indxe) => this.createProductSchema(product, indxe + 1)),
+            '@context': 'https://schema.org',
+            '@type': 'ItemList',
+            name: salla.config.get('page.title'),
+            itemListElement: productList.map((product, indxe) => this.createProductSchema(product, indxe + 1)),
         };
         script.textContent = JSON.stringify(schema);
         document.head.appendChild(script);
     }
     /**
-    * Format date in the form of `Monday 13 November 2023`
-    */
+     * Format date in the form of `Monday 13 November 2023`
+     */
     formatDateFromString(dateString, numberCb, lang = 'en') {
         const errors = {
-            en: "Invalid Date",
-            ar: "تاريخ غير صالح"
+            en: 'Invalid Date',
+            ar: 'تاريخ غير صالح',
         };
         // Check if dateString exists and is not empty
         if (!dateString || typeof dateString !== 'string' || dateString.trim() === '') {
@@ -427,11 +450,37 @@ class Helper {
         }
         const daysOfWeek = {
             en: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-            ar: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت']
+            ar: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
         };
         const months = {
-            en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-            ar: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر']
+            en: [
+                'January',
+                'February',
+                'March',
+                'April',
+                'May',
+                'June',
+                'July',
+                'August',
+                'September',
+                'October',
+                'November',
+                'December',
+            ],
+            ar: [
+                'يناير',
+                'فبراير',
+                'مارس',
+                'أبريل',
+                'مايو',
+                'يونيو',
+                'يوليو',
+                'أغسطس',
+                'سبتمبر',
+                'أكتوبر',
+                'نوفمبر',
+                'ديسمبر',
+            ],
         };
         const dayOfWeek = daysOfWeek[lang][dateObject.getDay()];
         const dayOfMonth = numberCb(dateObject.getDate(), lang === 'en');
@@ -440,14 +489,15 @@ class Helper {
         return `${dayOfWeek} ${dayOfMonth} ${month} ${year}`;
     }
     /**
-   * Copy text into clipboard.
-   * @param event
-   */
+     * Copy text into clipboard.
+     * @param event
+     */
     copyToClipboard(event) {
         // Get the text content from the clicked div
         var textToCopy = event.target.innerText;
         // Use the Clipboard API to copy text to the clipboard
-        navigator.clipboard.writeText(textToCopy)
+        navigator.clipboard
+            .writeText(textToCopy)
             .then(() => {
             console.log('Text copied to clipboard: ' + textToCopy);
         })
@@ -471,38 +521,38 @@ class Helper {
                 items.forEach((item) => {
                     item.classList.add('animated');
                 });
-            }
+            },
         });
     }
     createReviewObject(reviewData) {
         return {
-            "@type": "Review",
-            "author": { "@type": "Person", "name": reviewData.name },
+            '@type': 'Review',
+            author: { '@type': 'Person', name: reviewData.name },
             //   "datePublished": reviewData.date * 1000,
-            "reviewBody": reviewData.content,
-            "reviewRating": {
-                "@type": "Rating",
-                "bestRating": "5",
-                "ratingValue": reviewData.stars,
-                "worstRating": "1"
-            }
+            reviewBody: reviewData.content,
+            reviewRating: {
+                '@type': 'Rating',
+                bestRating: '5',
+                ratingValue: reviewData.stars,
+                worstRating: '1',
+            },
         };
     }
     generateReviewSchema(reviews) {
         const script = document.createElement('script');
         script.type = 'application/ld+json';
         const schema = {
-            "@context": "http://schema.org/",
-            "@type": "Store",
-            "name": salla.config.get('store.name'),
-            "url": salla.config.get('store.url'),
-            "address": "الرياض",
-            "review": reviews.map((review) => this.createReviewObject(review)),
-            "aggregateRating": {
-                "@type": "AggregateRating",
-                "ratingValue": reviews.reduce((acc, review) => acc + review.stars, 0) / reviews.length,
-                "reviewCount": reviews.length
-            }
+            '@context': 'http://schema.org/',
+            '@type': 'Store',
+            name: salla.config.get('store.name'),
+            url: salla.config.get('store.url'),
+            address: 'الرياض',
+            review: reviews.map(review => this.createReviewObject(review)),
+            aggregateRating: {
+                '@type': 'AggregateRating',
+                ratingValue: reviews.reduce((acc, review) => acc + review.stars, 0) / reviews.length,
+                reviewCount: reviews.length,
+            },
         };
         script.textContent = JSON.stringify(schema);
         document.head.appendChild(script);
@@ -526,11 +576,15 @@ class Helper {
             if (Number.isNaN(id))
                 return;
             const added = salla.wishlist.api.has(id);
-            card.querySelectorAll('.s-product-card-wishlist-btn, .btn--wishlist').forEach((btn) => {
+            card.querySelectorAll('.s-product-card-wishlist-btn, .btn--wishlist').forEach(btn => {
                 btn.classList.toggle('s-product-card-wishlist-added', added);
                 btn.classList.toggle('wishlist-added', added);
             });
         });
     }
+    getPlanName() {
+        const ray = Number(salla.config.get('store.ray'));
+        return ray in this.plans ? this.plans[ray] : undefined;
+    }
 }
-export default new Helper;
+export default new Helper();

package/dist/collection/collection-manifest.json

@@ -140,7 +140,8 @@
     "components/salla-verified-review/salla-verified-review.js",
     "components/salla-verify/salla-verify.js",
     "components/salla-wallet/salla-wallet.js",
-    "components/salla-wishlist-actions/salla-wishlist-actions.js"
+    "components/salla-wishlist-actions/salla-wishlist-actions.js",
+    "components/salla-wishlist-summary/salla-wishlist-summary.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -8,8 +8,6 @@ const BRANCH_SEARCH_DEBOUNCE_MS = 1000;
 const GEOLOCATION_TIMEOUT = 10000;
 /** Final fallback center used only if `user.default_geo_location` is absent (Riyadh — matches checkout map-page). */
 const DEFAULT_MAP_CENTER = { lat: 24.7756042, lng: 46.7360729 };
-import "@salla.sa/ui-google-map-render";
-import { load } from "@salla.sa/ui-google-map-render";
 import GetDirections from "../../assets/svg/get-directions.svg";
 import GPS from "../../assets/svg/gps.svg";
 import LocationTag from "../../assets/svg/location-tag.svg";
@@ -1231,11 +1229,17 @@ export class SallaBulletDelivery {
         try {
             const mapsKey = salla.config.get('store.settings.keys.maps');
             if (mapsKey) {
-                load({
+                const bootMaps = () => import('@salla.sa/ui-google-map-render')
+                    .then(({ load }) => load({
                     key: mapsKey,
                     libraries: ['marker', 'places'],
                     language: salla.config.get('user.language_code') || 'ar',
-                }).catch(err => log('Failed to load Google Maps SDK', err));
+                }))
+                    .catch(err => log('Failed to load Google Maps SDK', err));
+                if (document.readyState === 'complete')
+                    bootMaps();
+                else
+                    window.addEventListener('load', bootMaps, { once: true });
             }
             this.addressToken = await bulletDeliveryAPI.getAddressToken();
         }

package/dist/collection/components/salla-cart-summary/salla-cart-summary.css

@@ -33,7 +33,7 @@
     background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
     padding: 0.25rem;
     font-size: 0.75rem;
-    line-height: 1rem;
+    line-height: 1.25rem;
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 }

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -7,7 +7,7 @@ import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
 import BellRing from "../../assets/svg/bell-ring.svg";
 import OrderIcon from "../../assets/svg/box-bankers.svg";
 import PendingOrdersIcon from "../../assets/svg/cart.svg";
-import WishListIcon from "../../assets/svg/star.svg";
+import WishListIcon from "../../assets/svg/heart.svg";
 import ProfileIcon from "../../assets/svg/user-circle.svg";
 import LogoutIcon from "../../assets/svg/send-out.svg";
 import Cancel from "../../assets/svg/cancel.svg";

package/dist/collection/components/salla-wishlist-summary/salla-wishlist-summary.css

@@ -0,0 +1,62 @@
+/*!twlt*/:host {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: 1rem;
+}
+.hidden {
+  display: none;
+}
+.s-wishlist-summary-wrapper {
+  position: relative;
+  margin-inline-start: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  border-style: none;
+  text-decoration-line: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.s-wishlist-summary-wrapper:hover {
+  opacity: 0.8;
+}
+.s-wishlist-summary-icon {
+  display: inline-flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--color-border,#e5e7eb);
+  color: var(--color-text-primary,#374151);
+}
+.s-wishlist-summary-icon svg {
+  height: 1.25rem;
+  width: 1.25rem;
+  fill: currentColor;
+}
+.s-wishlist-summary-count {
+  position: absolute;
+  top: -4px;
+  left: -6px;
+  display: inline-flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
+  padding: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.s-wishlist-summary-count:where([dir="rtl"], [dir="rtl"] *) {
+  left: unset;
+  right: -6px;
+}

package/dist/collection/components/salla-wishlist-summary/salla-wishlist-summary.js

@@ -0,0 +1,65 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Host, h } from "@stencil/core";
+import HeartIcon from "../../assets/svg/heart.svg";
+import Helper from "../../Helpers/Helper";
+/**
+ * Standalone wishlist ("Fav") icon, meant to sit at the outer nav-bar level
+ * next to `salla-user-menu` and `salla-cart-summary` — not nested inside the
+ * account dropdown.
+ *
+ * A/B test: shown only on basic/plus stores (see Helper.getPlanName()) —
+ * pro/special stores keep the pre-existing wishlist-in-menu-only experience.
+ * TODO: confirm before/after click-count reporting comes from analytics.
+ */
+export class SallaWishlistSummary {
+    constructor() {
+        this.isEnabled = false;
+        this.wishlistCount = 0;
+        this.wishlistLabel = salla.lang.get('common.titles.wishlist');
+        salla.wishlist.event.onAdded(() => this.syncCount());
+        salla.wishlist.event.onRemoved(() => this.syncCount());
+        // Server hydration (packages/twilight/src/api/wishlist.js syncStorageFromServer)
+        // rewrites `salla::wishlist` in storage after the add/remove events above have
+        // already fired, or without either firing at all — re-sync once it settles so
+        // the badge doesn't stay stale.
+        salla.event.on('wishlist::storage.synced', () => this.syncCount());
+    }
+    componentWillLoad() {
+        return new Promise(resolve => salla.onReady(() => {
+            const plan = Helper.getPlanName();
+            this.isEnabled = !!plan && ['basic', 'plus'].includes(plan);
+            this.syncCount();
+            resolve();
+        }));
+    }
+    syncCount() {
+        this.wishlistCount = (salla.storage.get('salla::wishlist', []) || []).length;
+    }
+    render() {
+        const is_guest = salla.config.isGuest();
+        if (!this.isEnabled || is_guest) {
+            return h(Host, { hidden: true });
+        }
+        return (h(Host, null, h("a", { class: "s-wishlist-summary-wrapper", href: salla.url.get('account/wishlist'), "aria-label": this.wishlistLabel }, h("i", { class: "s-wishlist-summary-icon", innerHTML: HeartIcon }), this.wishlistCount > 0 && (h("span", { class: "s-wishlist-summary-count" }, salla.helpers.number(this.wishlistCount))))));
+    }
+    static get is() { return "salla-wishlist-summary"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-wishlist-summary.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-wishlist-summary.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isEnabled": {},
+            "wishlistCount": {},
+            "wishlistLabel": {}
+        };
+    }
+}