@salla.sa/twilight-components 2.14.508 → 2.14.510

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

@@ -17,7 +17,6 @@
   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;
@@ -25,17 +24,22 @@
 
 .s-review-factors-tags-factor-rating {
   font-weight: 600;
-  color: #0f6a7c;
+  color: var(--color-primary) !important;
 }
 
 .s-review-factors-tags-factor-star {
   display: inline-flex;
   width: 0.8rem;
   height: 0.8rem;
-  fill: #0f6a7c;
+  fill: var(--color-primary) !important;
 }
 
 .s-review-factors-tags-factor-star svg {
   width: 100%;
   height: 100%;
+}
+
+.s-review-factors-tags-factor-name {
+  color: var(--main-text-color) !important;
+  font-weight: unset !important;
 }

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

@@ -6,35 +6,48 @@ import Star2 from "../../assets/svg/star2.svg";
 import { fetchOrder, resolveReviewFactors } from "./helpers";
 export class SallaReviewFactorsTags {
     constructor() {
-        this.factors = [];
+        this.loadedFactors = [];
     }
     async componentWillLoad() {
         await salla.onReady();
         await this.loadFactors();
     }
+    async onPropsChange() {
+        await this.loadFactors();
+    }
+    getDisplayFactors() {
+        if (this.factors?.length) {
+            return this.factors;
+        }
+        return this.loadedFactors;
+    }
     async loadFactors() {
+        if (this.factors?.length) {
+            this.loadedFactors = [];
+            return;
+        }
         if (!this.orderId) {
-            this.factors = [];
+            this.loadedFactors = [];
             return;
         }
         try {
             const order = await fetchOrder(this.orderId);
-            this.factors = resolveReviewFactors(order, this.ratingId, this.productId, this.itemId);
+            this.loadedFactors = resolveReviewFactors(order, this.ratingId, this.productId, this.itemId);
         }
         catch (error) {
             console.error('[salla-review-factors-tags] failed to load order rating factors', error);
-            this.factors = [];
+            this.loadedFactors = [];
         }
     }
     renderFactorTags() {
-        const factors = this.factors || [];
+        const factors = this.getDisplayFactors();
         if (!factors.length) {
             return null;
         }
         return (h("div", { class: "s-review-factors-tags-factors" }, factors.map(factor => (h("div", { class: "s-review-factors-tags-factor-tag" }, h("span", { class: "s-review-factors-tags-factor-name" }, factor.name), h("span", { class: "s-review-factors-tags-factor-star", innerHTML: Star2 }), h("span", { class: "s-review-factors-tags-factor-rating" }, factor.rating || ''))))));
     }
     render() {
-        return (h(Host, { key: '63e1ae3d8b45cdd9c82ade65cf6b33be9941f9d1', class: "s-review-factors-tags-wrapper" }, this.renderFactorTags()));
+        return (h(Host, { key: 'b9df42d369cd5a7c66d1275202a883f6dc8ac594', class: "s-review-factors-tags-wrapper" }, this.renderFactorTags()));
     }
     static get is() { return "salla-review-factors-tags"; }
     static get originalStyleUrls() {
@@ -49,6 +62,30 @@ export class SallaReviewFactorsTags {
     }
     static get properties() {
         return {
+            "factors": {
+                "type": "unknown",
+                "attribute": "factors",
+                "mutable": false,
+                "complexType": {
+                    "original": "ReviewFactor[]",
+                    "resolved": "ReviewFactor[]",
+                    "references": {
+                        "ReviewFactor": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-review-factors-tags/interfaces.ts::ReviewFactor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Preloaded review factors. When provided, skips the order fetch."
+                },
+                "getter": false,
+                "setter": false
+            },
             "orderId": {
                 "type": "number",
                 "attribute": "order-id",
@@ -58,8 +95,8 @@ export class SallaReviewFactorsTags {
                     "resolved": "number",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Order ID used to fetch rating factors from `GET /orders/{order_id}`."
@@ -129,7 +166,25 @@ export class SallaReviewFactorsTags {
     }
     static get states() {
         return {
-            "factors": {}
+            "loadedFactors": {}
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "factors",
+                "methodName": "onPropsChange"
+            }, {
+                "propName": "orderId",
+                "methodName": "onPropsChange"
+            }, {
+                "propName": "ratingId",
+                "methodName": "onPropsChange"
+            }, {
+                "propName": "productId",
+                "methodName": "onPropsChange"
+            }, {
+                "propName": "itemId",
+                "methodName": "onPropsChange"
+            }];
+    }
 }

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

@@ -2,6 +2,12 @@
   display: block;
 }
 
+.s-reviews-summary-main-container {
+  justify-content: space-between;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .s-reviews-summary-overall-section {
   display: flex;
   flex-direction: column;
@@ -25,39 +31,17 @@
 }
 
 .s-reviews-summary-factors {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  justify-content: flex-start;
-  margin-bottom: 0.6rem;
-}
-
-.s-reviews-summary-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;
+  max-width: 24rem;
 }
 
-.s-reviews-summary-factor-rating {
-  font-weight: 600;
-  color: #0f6a7c;
-}
-
-.s-reviews-summary-factor-star {
-  display: inline-flex;
-  width: 0.8rem;
-  height: 0.8rem;
-  fill: #0f6a7c;
+.s-reviews-summary-rows {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 1.3rem !important;
 }
 
-.s-reviews-summary-factor-star svg {
-  width: 100%;
-  height: 100%;
+@media (min-width: 640px) {
+  .s-reviews-summary-header {
+    gap: 1.25rem !important;
+  }
 }

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

@@ -38,7 +38,6 @@ export class SallaReviewsSummary {
             });
             this.basedOnLabel = salla.lang.get('blocks.comments.based_on');
             this.recommendedLabel = salla.lang.get('blocks.comments.recommended');
-            this.overallRatingLabel = salla.lang.get('blocks.comments.overall_rating');
         });
     }
     async loadSummary() {
@@ -62,13 +61,6 @@ export class SallaReviewsSummary {
             console.error('Error loading reviews summary:', error);
         }
     }
-    renderFactorTags() {
-        const factors = this.data?.factors || [];
-        if (!factors.length) {
-            return null;
-        }
-        return (h("div", { class: "s-reviews-summary-factors" }, factors.map(factor => (h("div", { class: "s-reviews-summary-factor-tag" }, h("span", { class: "s-reviews-summary-factor-name" }, factor.name), h("span", { class: "s-reviews-summary-factor-star", innerHTML: Star2 }), h("span", { class: "s-reviews-summary-factor-rating" }, factor.rating || ''))))));
-    }
     renderRecommendation() {
         if (!this.showRecommendation || !this.data?.recommendation) {
             return null;
@@ -94,9 +86,9 @@ export class SallaReviewsSummary {
         };
         const reviewElements = Object.keys(ratings).reverse().map((rating) => {
             const percentage = ratings[rating];
-            return (h("div", { key: rating, class: "s-reviews-summary-row" }, h("div", { class: "s-reviews-summary-row-rate" }, rating, " ", h("span", { innerHTML: Star2 })), h("salla-progress-bar", { class: "s-reviews-summary-progress", value: percentage, target: 100, hideUnits: true, height: '16px' }), h("span", { class: "s-reviews-summary-percentage" }, percentage, "%")));
+            return (h("div", { key: rating, class: "s-reviews-summary-row" }, h("div", { class: "s-reviews-summary-row-rate" }, rating, " ", h("span", { innerHTML: Star2 })), h("salla-progress-bar", { class: "s-reviews-summary-progress", value: percentage, target: 100, hideUnits: true, height: '20px' }), h("span", { class: "s-reviews-summary-percentage" }, percentage, "%")));
         });
-        return (h(Host, { class: "s-reviews-summary-wrapper" }, h("div", { class: "s-reviews-summary-header" }, h("div", { class: "s-reviews-summary-overall-section items-start" }, h("p", { class: "s-reviews-summary-overall-label" }, this.overallRatingLabel), h("div", { class: "s-reviews-summary-overall-row" }, h("h3", { class: "s-reviews-summary-average" }, this.data.rating), h("div", null, h("salla-rating-stars", { size: 'large', value: this.data.rating }), h("p", { class: "s-reviews-summary-count" }, this.basedOnLabel, " ", salla.helpers.number(salla.lang.choice('pages.rating.reviews', this.data.count)))))), this.renderFactorTags(), this.renderRecommendation()), h("div", { class: "s-reviews-summary-rows" }, reviewElements)));
+        return (h(Host, { class: "s-reviews-summary-wrapper s-reviews-summary-main-container" }, h("div", { class: "s-reviews-summary-header" }, h("div", { class: "s-reviews-summary-overall-section items-start" }, h("div", { class: "s-reviews-summary-overall-row" }, h("h3", { class: "s-reviews-summary-average" }, this.data.rating), h("div", null, h("salla-rating-stars", { size: 'large', value: this.data.rating }), h("p", { class: "s-reviews-summary-count" }, this.basedOnLabel, " ", salla.helpers.number(salla.lang.choice('pages.rating.reviews', this.data.count)))))), !!this.data?.factors?.length && (h("div", { class: "s-reviews-summary-factors" }, h("salla-review-factors-tags", { factors: this.data.factors }))), this.renderRecommendation()), h("div", { class: "s-reviews-summary-rows" }, reviewElements)));
     }
     static get is() { return "salla-reviews-summary"; }
     static get originalStyleUrls() {
@@ -138,7 +130,6 @@ export class SallaReviewsSummary {
             "canRender": {},
             "basedOnLabel": {},
             "recommendedLabel": {},
-            "overallRatingLabel": {},
             "showRatingSummary": {},
             "recommendationOnly": {},
             "showRecommendation": {}