@salla.sa/twilight-components 2.14.539 → 2.14.541

package/dist/collection/components/salla-rating-modal/salla-rating-modal.css

@@ -2,6 +2,22 @@
 * Salla Rating Component: Order rating modal, used in the order single page
 * You can use these classes to target the elements in the component.
 */
+.s-rating-modal-uploader {
+  overflow: visible;
+}
+.s-rating-modal-uploader.is-opened {
+  height: auto !important;
+  opacity: 1 !important;
+  overflow: visible;
+  pointer-events: auto !important;
+  margin-bottom: 1rem;
+}
+.s-rating-modal-uploader .s-file-upload-gallery {
+  overflow: visible;
+}
+.s-rating-modal-edit-wrapper, .s-rating-modal-wrapper {
+  transition: height 0.15s ease;
+}
 .s-rating-modal-product-details {
   padding-bottom: 0.5rem;
 }
@@ -143,13 +159,6 @@
   border-radius: 0.375rem;
   background: #f3f4f6;
 }
-.s-rating-modal-uploader.is-opened {
-  height: auto !important;
-  opacity: 1 !important;
-  overflow: visible !important;
-  pointer-events: auto !important;
-  margin-bottom: 1rem;
-}
 .mt-0 {
   margin-top: 0px;
 }
@@ -581,6 +590,7 @@ unicode {
 }
 .s-rating-modal-uploader.is-opened {
   margin-bottom: 1.5rem;
+  overflow: visible;
 }
 .s-rating-modal-uploader.is-closed {
   pointer-events: none;

package/dist/collection/components/salla-rating-modal/salla-rating-modal.js

@@ -208,9 +208,7 @@ export class SallaRatingModal {
         const response = await salla.api.request(endpoint);
         this.editItem = response.data;
         if (this.allowAttachImages && this.editType == "product" && this.editItem.images.length) {
-            this.editItemImages = this.editItem.images.map(img => {
-                return { id: `${Math.floor(100 + Math.random() * 900)}`, url: img };
-            });
+            this.editItemImages = this.editItem.images.map(img => ({ id: img, url: img }));
         }
     }
     async editReview() {

package/dist/collection/components/salla-review-factors-tags/helpers.js

@@ -51,14 +51,15 @@ export function resolveReviewFactors(order, ratingId, productId, itemId) {
     return extractFactors(productRating);
 }
 export async function fetchOrder(orderId) {
-    if (!orderId) {
+    if (orderId == null || orderId === '') {
         return null;
     }
-    const cached = orderCache.get(orderId);
+    const cacheKey = String(orderId);
+    const cached = orderCache.get(cacheKey);
     if (cached && Date.now() - cached.timestamp <= CACHE_TTL) {
         return cached.data;
     }
-    const pending = inFlightRequests.get(orderId);
+    const pending = inFlightRequests.get(cacheKey);
     if (pending) {
         return pending;
     }
@@ -66,18 +67,18 @@ export async function fetchOrder(orderId) {
         try {
             const response = await salla.api.request(`orders/${orderId}`, '', 'get');
             const data = response?.data ?? response;
-            orderCache.set(orderId, { data, timestamp: Date.now() });
+            orderCache.set(cacheKey, { data, timestamp: Date.now() });
             return data;
         }
         catch (error) {
-            orderCache.delete(orderId);
+            orderCache.delete(cacheKey);
             throw error;
         }
         finally {
-            inFlightRequests.delete(orderId);
+            inFlightRequests.delete(cacheKey);
         }
     })();
-    inFlightRequests.set(orderId, request);
+    inFlightRequests.set(cacheKey, request);
     return request;
 }
 export function resetOrderCacheForTests() {

package/dist/collection/components/salla-review-order-item/interfaces.js

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

package/dist/collection/components/salla-review-order-item/salla-review-order-item.js

@@ -0,0 +1,154 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+import { fetchOrder, getProductRatings } from "../salla-review-factors-tags/helpers";
+export class SallaReviewOrderItem {
+    constructor() {
+        this.productRatings = [];
+        this.allowUpdate = false;
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        await this.loadOrderItem();
+    }
+    async onProductIdChange() {
+        this.orderItem = undefined;
+        this.productRatings = [];
+        await this.loadOrderItem();
+    }
+    /** Real order id used for `GET /orders/{id}`. */
+    resolveFetchOrderId() {
+        return salla.config.get('page.id');
+    }
+    sameId(left, right) {
+        return left != null && right != null && String(left) === String(right);
+    }
+    label(key, fallback) {
+        if (typeof salla?.lang?.getWithDefault === 'function') {
+            return salla.lang.getWithDefault(key, fallback);
+        }
+        return salla?.lang?.get?.(key) || fallback;
+    }
+    toOrderItemRating(productRating) {
+        return {
+            id: productRating.id ?? productRating.feedback_id,
+            stars: productRating.stars ?? productRating.rating,
+            content: productRating.content || '',
+            is_pending: productRating.is_pending,
+            can_update: productRating.can_update,
+            images: productRating.images || [],
+            videos: productRating.videos || [],
+            product: productRating.product,
+        };
+    }
+    /**
+     * Build the reviewed line item from:
+     * - `order.items[]` matched by `items[].product.id`
+     * - `order.rating.product[]` matched by `rating.product[].product.id`
+     */
+    resolveOrderItem(order, productRatings) {
+        const items = Array.isArray(order?.items) ? order.items : [];
+        const productRating = productRatings.find(rating => this.sameId(rating.product?.id, this.productId));
+        // No product review for this product → render nothing.
+        if (!productRating) {
+            return undefined;
+        }
+        const matchedItem = items.find(item => this.sameId(item.product?.id, this.productId)) || {
+            product: productRating.product || { id: this.productId },
+        };
+        return {
+            ...matchedItem,
+            product: matchedItem.product || productRating.product || { id: this.productId },
+            rating: this.toOrderItemRating(productRating),
+        };
+    }
+    async loadOrderItem() {
+        const fetchOrderId = this.resolveFetchOrderId();
+        if (!fetchOrderId || this.productId == null || this.productId === '') {
+            return;
+        }
+        this.fetchOrderId = fetchOrderId;
+        this.allowUpdate = !!salla.config.get('store.settings.rating.allow_update');
+        try {
+            const order = (await fetchOrder(fetchOrderId));
+            this.productRatings = getProductRatings(order?.rating);
+            this.orderItem = this.resolveOrderItem(order, this.productRatings);
+        }
+        catch (error) {
+            console.error('[salla-review-order-item] failed to load order item review', error);
+        }
+    }
+    renderActions(item) {
+        const rating = item.rating;
+        if (!rating || !this.allowUpdate) {
+            return null;
+        }
+        return (h("div", { class: "rating-actions" }, h("div", { class: "tooltip-toggle tooltip-toggle--hover icon-trigger mobile-shifted" }, !rating.can_update ? (h("div", { class: "tooltip-content shadow-md rounded" }, h("small", null, this.label('pages.order.edit_period_ended', 'انتهت مدة التعديل'), "."))) : null, h("salla-button", { "loader-position": "center", disabled: !rating.can_update, shape: "icon", fill: "outline", color: "dark", size: "medium", onClick: () => rating.can_update
+                ? salla.event.dispatch('rating::edit', {
+                    type: 'product',
+                    feedback_id: rating.id,
+                })
+                : undefined }, h("i", { class: "sicon-format-border-color text-xl" }))), h("div", { class: "tooltip-toggle tooltip-toggle--hover icon-trigger mobile-shifted" }, !rating.can_update ? (h("div", { class: "tooltip-content shadow-md rounded" }, h("small", null, this.label('pages.order.delete_period_ended', 'انتهت مدة الحذف'), "."))) : null, h("salla-button", { "loader-position": "center", disabled: !rating.can_update, shape: "icon", color: "danger", fill: "outline", size: "medium", onClick: () => rating.can_update
+                ? salla.event.dispatch('rating::delete', {
+                    feedback_id: rating.id,
+                })
+                : undefined }, h("i", { class: "sicon-trash-2 text-xl" })))));
+    }
+    serializeRatingMedia(rating) {
+        return JSON.stringify({
+            images: rating.images || [],
+            videos: rating.videos || [],
+            product: rating.product,
+        });
+    }
+    serializeProductRatings() {
+        return JSON.stringify(this.productRatings);
+    }
+    render() {
+        const item = this.orderItem;
+        const rating = item?.rating;
+        if (!item || !rating || !this.fetchOrderId) {
+            return h(Host, null);
+        }
+        return (h(Host, null, h("section", { class: "flex justify-between items-start border-t mt-10 pt-8" }, h("div", null, h("p", { innerHTML: rating.content || '' }), rating.is_pending ? (h("span", null, this.label('pages.rating.pending', 'قيد المراجعة'))) : null, h("div", { class: "flex flex-row flex-wrap gap-2" }, h("salla-rating-stars", { size: "large", value: rating.stars }), h("salla-review-factors-tags", { "order-id": this.fetchOrderId, "rating-id": rating.id, "product-id": item.product?.id })), h("div", { class: "mt-2" }, h("salla-attachments", { rating: this.serializeRatingMedia(rating), "product-ratings": this.serializeProductRatings(), "product-id": item.product?.id ?? null }))), this.renderActions(item))));
+    }
+    static get is() { return "salla-review-order-item"; }
+    static get properties() {
+        return {
+            "productId": {
+                "type": "any",
+                "attribute": "product-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Product id used to match `items[].product.id` and `rating.product[].product.id`.\nThe order itself is fetched via `page.id`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "orderItem": {},
+            "fetchOrderId": {},
+            "productRatings": {},
+            "allowUpdate": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "productId",
+                "methodName": "onProductIdChange"
+            }];
+    }
+}