@salla.sa/twilight-components 2.14.489 → 2.14.490

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

@@ -1,4 +1,115 @@
 /*
 * 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-product-details {
+  padding-bottom: 0.5rem;
+}
+.s-rating-modal-comment {
+  margin-top: 0.35rem;
+}
+.s-rating-modal-product {
+  margin-bottom: 1rem;
+}
+.s-rating-modal-product-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.s-rating-modal-product-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.5;
+  margin: 0;
+}
+.s-rating-modal-stars-product {
+  margin-top: 0.5rem;
+}
+.s-rating-modal-product-details-main {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+.s-rating-modal-product-info-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+.s-rating-modal-product-main-review {
+  width: 100%;
+  text-align: right;
+}
+.s-rating-modal-product-rating-rows {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0.2rem 0 0.7rem;
+}
+.s-rating-modal-product-rating-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 2rem;
+}
+.s-rating-modal-product-rating-row salla-rating-stars {
+  flex-shrink: 0;
+}
+.s-rating-modal-product-rating-row .s-rating-stars-wrapper {
+  align-items: center;
+  min-height: 1.75rem;
+}
+.s-rating-modal-product-rating-row .s-rating-stars-label, .s-rating-modal-product-rating-row .s-rating-stars-label-without-tag {
+  min-width: auto;
+  min-height: 1.25rem;
+  line-height: 1.25rem;
+  font-size: 0.8rem;
+  color: #5b6470;
+  white-space: nowrap;
+  text-align: end;
+  transition: opacity 0.15s ease;
+}
+.s-rating-modal-product-rating-row .s-rating-stars-label--empty, .s-rating-modal-product-rating-row .s-rating-stars-label-without-tag--empty {
+  opacity: 0;
+}
+.s-rating-modal-product-rating-row-main {
+  margin-bottom: 0.35rem;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.45rem;
+  background: transparent;
+}
+.s-rating-modal-product-factor-name {
+  color: #5b6470;
+  font-size: 0.9rem;
+  line-height: 1.25;
+}
+.s-rating-modal-product-rating-row-main .s-rating-modal-product-factor-name {
+  font-size: 1rem;
+  color: #5b6470;
+}
+.s-rating-modal-product-factor-required {
+  color: #f87171;
+  margin-inline-start: 0.2rem;
+}
+.s-rating-modal-product-img-wrap {
+  width: 5rem;
+  min-width: 5rem;
+  height: 3.5rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  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;
+}

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

@@ -23,6 +23,7 @@ export class SallaRatingModal {
         this.deleteMode = false;
         this.shouldOpenDeleteModal = false;
         this.editItem = null;
+        this.enableNewPopUp = false;
         this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
         this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
         this.editReviewLabel = salla.lang.get('pages.rating.edit_review');
@@ -133,10 +134,21 @@ export class SallaRatingModal {
             setTranslations();
         });
     }
+    getV2Ref() {
+        return this.v2Ref ?? this.host.querySelector('salla-rating-modal-v2');
+    }
+    syncNewPopUpFlag() {
+        this.enableNewPopUp = !!salla.config.get('store.features')?.includes('new_popup_rating');
+    }
     /**
      * Show the rating modal
      */
     async open() {
+        await salla.onReady();
+        this.syncNewPopUpFlag();
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.open();
+        }
         this.defaultMode = true;
         return new Promise((resolve) => {
             setTimeout(() => {
@@ -166,6 +178,11 @@ export class SallaRatingModal {
         });
     }
     async openEditModal(params) {
+        await salla.onReady();
+        this.syncNewPopUpFlag();
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.openEditModal(params);
+        }
         this.defaultMode = false;
         this.editMode = true;
         this.editType = params.type;
@@ -206,6 +223,11 @@ export class SallaRatingModal {
         });
     }
     async openDeleteModal(params) {
+        await salla.onReady();
+        this.syncNewPopUpFlag();
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.openDeleteModal(params);
+        }
         this.defaultMode = false;
         this.deleteMode = true;
         this.deleteFeedbackId = params.feedback_id;
@@ -230,6 +252,9 @@ export class SallaRatingModal {
      * Show the rating modal
      */
     async close() {
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.close();
+        }
         return this.modal.close();
     }
     // handle wizard
@@ -393,6 +418,9 @@ export class SallaRatingModal {
             : null, h("div", { class: "s-rating-modal-footer s-rating-modal-footer-end" }, h("salla-button", { "loader-position": 'center', onClick: () => this.editReview() }, this.editReviewLabel)))));
     }
     render() {
+        if (this.enableNewPopUp) {
+            return (h(Host, { class: "s-rating-modal" }, h("salla-rating-modal-v2", { ref: (el) => (this.v2Ref = el), orderId: this.orderId })));
+        }
         if (this.deleteMode) {
             return h(Host, { class: "s-rating-modal" }, this.getDeleteModal());
         }
@@ -428,10 +456,12 @@ export class SallaRatingModal {
                 : h("salla-placeholder", { alignment: "center" }))));
         }
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         salla.event.on('rating::open', () => this.open());
         salla.event.on('rating::edit', (params) => this.openEditModal(params));
         salla.event.on('rating::delete', (params) => this.openDeleteModal(params));
+        await salla.onReady();
+        this.syncNewPopUpFlag();
     }
     componentDidLoad() {
         salla.event.dispatch('rating::ready', this);
@@ -487,7 +517,8 @@ export class SallaRatingModal {
             "editType": {},
             "editFeedbackId": {},
             "deleteFeedbackId": {},
-            "editItem": {}
+            "editItem": {},
+            "enableNewPopUp": {}
         };
     }
     static get methods() {

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

@@ -1,4 +1,37 @@
 /*
 * Salla Rating Stars Component: Rating starts as rating input or to display rating values.
 * You can use these classes to target the elements in the component.
-*/
+*/
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.s-rating-stars-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.75rem;
+}
+.s-rating-stars-wrapper--with-label {
+  min-height: 1.75rem;
+}
+.s-rating-stars-element {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.s-rating-stars-label, .s-rating-stars-label-without-tag {
+  flex-shrink: 0;
+  min-width: 5.5rem;
+  min-height: 1.25rem;
+  line-height: 1.25rem;
+  text-align: end;
+  transition: opacity 0.15s ease;
+}
+.s-rating-stars-label--empty, .s-rating-stars-label-without-tag--empty {
+  opacity: 0;
+}
+.s-rating-stars-btn-star {
+  flex-shrink: 0;
+}

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

@@ -23,9 +23,26 @@ export class SallaRatingStars {
        */
         this.reviews = 0;
         /**
+        * Render the description label before the stars instead of after.
+        */
+        this.labelBeforeStars = false;
+        /**
         * Allows the rating to be editable.
         */
         this.editable = false;
+        this.tag = true;
+    }
+    getLabelClassName() {
+        return this.tag ? 's-rating-stars-label' : 's-rating-stars-label-without-tag';
+    }
+    setLabelDisplay(text) {
+        if (!this.labelElem) {
+            return;
+        }
+        this.labelElem.textContent = text || '\u00a0';
+        const labelClass = this.getLabelClassName();
+        this.labelElem.classList.toggle(`${labelClass}--empty`, !text);
+        this.labelElem.setAttribute('aria-hidden', text ? 'false' : 'true');
     }
     async componentWillLoad() {
         await new Promise(resolve => {
@@ -49,23 +66,30 @@ export class SallaRatingStars {
         });
     }
     initiateRating() {
-        this.host.addEventListener('click', this.handleRating.bind(this));
+        this.host.addEventListener('click', event => this.handleRating(event));
     }
-    handleRating() {
+    handleRating(event) {
         if (!this.starsElem)
             return;
         let activeStars = this.starsElem.querySelectorAll('.s-rating-stars-hovered');
         let selected = activeStars[activeStars.length - 1];
+        if (!selected && event?.target instanceof HTMLElement) {
+            selected = event.target.closest('.s-rating-stars-btn-star[data-star]');
+        }
         if (!selected)
             return;
         let selectedIndex = parseInt(selected.getAttribute('data-star'));
-        this.starsElem.querySelector('.rating_hidden_input').value = selectedIndex.toString();
-        this.starsElem.querySelectorAll('.s-rating-stars-btn-star')
+        this.starsElem.querySelector('.rating_hidden_input').value =
+            selectedIndex.toString();
+        this.starsElem
+            .querySelectorAll('.s-rating-stars-btn-star')
             .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < selectedIndex));
         this.starsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
         selected.setAttribute('aria-pressed', 'true');
         this.selectedStar = selectedIndex;
-        this.withLabel && (this.reviewLabel = this.labels[selectedIndex - 1]);
+        if (this.withLabel) {
+            this.setLabelDisplay(this.labels[selectedIndex - 1]);
+        }
     }
     triggerRatingProgrammatically(index) {
         if (!this.starsElem)
@@ -87,11 +111,15 @@ export class SallaRatingStars {
                 for (let i = 0; i <= index; i++) {
                     stars[i].classList.add(hoveredClass);
                 }
-                this.withLabel && (this.reviewLabel = this.labels[index]);
+                if (this.withLabel) {
+                    this.setLabelDisplay(this.labels[index]);
+                }
             });
             star.addEventListener('mouseout', () => {
                 star.classList.remove(hoveredClass);
-                this.withLabel && (this.reviewLabel = this.selectedStar ? this.labels[this.selectedStar - 1] : '');
+                if (this.withLabel) {
+                    this.setLabelDisplay(this.selectedStar ? this.labels[this.selectedStar - 1] : '');
+                }
             });
         });
         this.starsElem?.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
@@ -110,22 +138,55 @@ export class SallaRatingStars {
         }
         return stars;
     }
+    renderReviewLabel() {
+        if (!this.withLabel) {
+            return null;
+        }
+        const labelClass = this.getLabelClassName();
+        return (h("span", { ref: el => {
+                this.labelElem = el;
+            }, class: {
+                [labelClass]: true,
+                [`${labelClass}--empty`]: !this.reviewLabel,
+            }, "aria-hidden": !this.reviewLabel ? 'true' : 'false' }, this.reviewLabel || '\u00a0'));
+    }
+    renderStarsWrapper(starsContent) {
+        const label = this.renderReviewLabel();
+        return (h("div", { class: {
+                's-rating-stars-wrapper': true,
+                's-rating-stars-wrapper--with-label': this.withLabel,
+                's-rating-stars-wrapper--label-first': this.labelBeforeStars,
+            } }, this.labelBeforeStars ? [label, starsContent] : [starsContent, label]));
+    }
+    renderEditableStars() {
+        return (h("div", { class: "s-rating-stars-element", ref: el => (this.starsElem = el) }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => (h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Star2 }))))));
+    }
     render() {
         return this.translationsLoaded ? (this.host.closest('.swiper-slide')?.classList.contains('swiper-slide-duplicate')
             ? ''
-            : (h(Host, null, (this.value || this.value == 0) && !this.editable ?
-                h("div", { class: "s-rating-stars-wrapper" }, this.createStars(this.value), this.withLabel && this.reviewLabel ? h("span", { class: "s-rating-stars-label" }, this.reviewLabel) : '')
-                :
-                    h("div", { class: "s-rating-stars-wrapper" }, h("div", { class: "s-rating-stars-element", ref: (el) => this.starsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Star2 })))), this.withLabel && this.reviewLabel ? h("span", { class: "s-rating-stars-label" }, this.reviewLabel) : '')))) : (h(Host, null));
+            : (h(Host, null, (this.value || this.value == 0) && !this.editable
+                ? this.renderStarsWrapper(this.createStars(this.value))
+                : this.renderStarsWrapper(this.renderEditableStars())))) : (h(Host, null));
     }
     componentDidLoad() {
         this.initiateRating();
         this.highlightSelectedStars();
-        if (this.value && this.editable) {
-            const stars = this.starsElem?.querySelectorAll('.s-rating-stars-btn-star');
-            if (stars && this.value >= 0 && this.value <= stars.length) {
-                this.triggerRatingProgrammatically(this.value - 1);
-            }
+        this.syncEditableRating();
+    }
+    componentDidUpdate() {
+        this.syncEditableRating();
+    }
+    syncEditableRating() {
+        if (!this.translationsLoaded || !this.editable || !this.value || !this.starsElem) {
+            return;
+        }
+        // Prefill only while untouched — don't reset after the user picks a new rating
+        if (this.selectedStar > 0) {
+            return;
+        }
+        const stars = this.starsElem.querySelectorAll('.s-rating-stars-btn-star');
+        if (stars?.length && this.value >= 1 && this.value <= stars.length) {
+            this.triggerRatingProgrammatically(this.value - 1);
         }
     }
     static get is() { return "salla-rating-stars"; }
@@ -239,6 +300,26 @@ export class SallaRatingStars {
                 "setter": false,
                 "reflect": false
             },
+            "labelBeforeStars": {
+                "type": "boolean",
+                "attribute": "label-before-stars",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the description label before the stars instead of after."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "editable": {
                 "type": "boolean",
                 "attribute": "editable",
@@ -258,6 +339,26 @@ export class SallaRatingStars {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tag": {
+                "type": "boolean",
+                "attribute": "tag",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

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

@@ -0,0 +1,86 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const CACHE_TTL = 5 * 60 * 1000;
+const orderCache = new Map();
+const inFlightRequests = new Map();
+export function normalizeList(value) {
+    if (!value) {
+        return [];
+    }
+    return Array.isArray(value) ? value : Object.values(value);
+}
+export function getProductRatings(rating) {
+    if (!rating) {
+        return [];
+    }
+    return [
+        ...normalizeList(rating.product),
+        ...normalizeList(rating.products),
+    ];
+}
+export function extractFactors(source) {
+    if (!source) {
+        return [];
+    }
+    for (const key of ['factor_reviews', 'review_factors', 'factors']) {
+        const value = source[key];
+        if (Array.isArray(value) && value.length) {
+            return value;
+        }
+    }
+    return [];
+}
+export function findProductRating(productRatings, ratingId, productId, itemId) {
+    return productRatings.find((productRating) => {
+        if (ratingId && Number(productRating.id ?? productRating.feedback_id) === Number(ratingId)) {
+            return true;
+        }
+        if (itemId && Number(productRating.order_item_id) === Number(itemId)) {
+            return true;
+        }
+        if (productId && Number(productRating.product_id ?? productRating.product?.id) === Number(productId)) {
+            return true;
+        }
+        return false;
+    });
+}
+export function resolveReviewFactors(order, ratingId, productId, itemId) {
+    const productRatings = getProductRatings(order?.rating);
+    const productRating = findProductRating(productRatings, ratingId, productId, itemId);
+    return extractFactors(productRating);
+}
+export async function fetchOrder(orderId) {
+    if (!orderId) {
+        return null;
+    }
+    const cached = orderCache.get(orderId);
+    if (cached && Date.now() - cached.timestamp <= CACHE_TTL) {
+        return cached.data;
+    }
+    const pending = inFlightRequests.get(orderId);
+    if (pending) {
+        return pending;
+    }
+    const request = (async () => {
+        try {
+            const response = await salla.api.request(`orders/${orderId}`, '', 'get');
+            const data = response?.data ?? response;
+            orderCache.set(orderId, { data, timestamp: Date.now() });
+            return data;
+        }
+        catch (error) {
+            orderCache.delete(orderId);
+            throw error;
+        }
+        finally {
+            inFlightRequests.delete(orderId);
+        }
+    })();
+    inFlightRequests.set(orderId, request);
+    return request;
+}
+export function resetOrderCacheForTests() {
+    orderCache.clear();
+    inFlightRequests.clear();
+}

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

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

package/dist/collection/components/salla-review-factors-tags/salla-review-factors-tags.css

@@ -0,0 +1,41 @@
+:host {
+  display: inline-flex;
+}
+
+.s-review-factors-tags-factors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-start;
+  margin-bottom: 0.6rem;
+}
+
+.s-review-factors-tags-factor-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 999px;
+  border: 1px solid #e8e8e8;
+  background: rgba(255, 255, 255, 0.3);
+  color: #374151;
+  font-size: 0.85rem;
+  line-height: 1;
+  padding: 0.4rem 0.65rem;
+}
+
+.s-review-factors-tags-factor-rating {
+  font-weight: 600;
+  color: #0f6a7c;
+}
+
+.s-review-factors-tags-factor-star {
+  display: inline-flex;
+  width: 0.8rem;
+  height: 0.8rem;
+  fill: #0f6a7c;
+}
+
+.s-review-factors-tags-factor-star svg {
+  width: 100%;
+  height: 100%;
+}