@salla.sa/twilight-components 2.14.541 → 2.14.543

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

@@ -146,7 +146,7 @@ export class SallaRatingModalV2 {
      * Show the rating modal
      */
     syncStoreSettings() {
-        if (!this.orderId) {
+        if (this.orderId === undefined) {
             this.orderId = salla.config.get('page.id');
         }
         this.allowAttachImages = !!salla.config.get('store.settings.rating.allow_attach_images');
@@ -215,11 +215,15 @@ export class SallaRatingModalV2 {
         this.setUploaderProcessing(productId, !!detail.uploading);
         this.scheduleUploaderHeightRefresh();
     }
+    /** An eligible review with no order behind it — product-only, no store/shipping steps. */
+    isUnverifiedReview() {
+        return this.orderId === null && !!this.productId;
+    }
     /** Encrypted order id from page config / prop — used to fetch order details. */
     getRatingOrderId() {
         return this.orderId || salla.config.get('page.id');
     }
-    /** Numeric order id from API response — used when submitting ratings. */
+    /** Numeric order id from API response — used when submitting ratings. Null when unverified. */
     getSubmitOrderId() {
         return this.orderId;
     }
@@ -288,6 +292,9 @@ export class SallaRatingModalV2 {
         return rating !== undefined && rating !== null && rating !== '' && Number(rating) > 0;
     }
     isTestimonialsEnabled(order = this.order) {
+        if (this.productId) {
+            return false;
+        }
         if (order?.testimonials_enabled === false) {
             return false;
         }
@@ -306,6 +313,9 @@ export class SallaRatingModalV2 {
         return this.getRateableProducts(order).length > 0;
     }
     isShippingEnabled(order = this.order) {
+        if (this.productId) {
+            return false;
+        }
         if (order?.shipping_enabled === false) {
             return false;
         }
@@ -327,7 +337,8 @@ export class SallaRatingModalV2 {
         return order.products.filter(item => item?.product?.id);
     }
     getRateableProducts(order = this.order) {
-        return this.getOrderProducts(order).filter(item => !this.hasRatingFeedback(item?.feedback));
+        return this.getOrderProducts(order).filter(item => !this.hasRatingFeedback(item?.feedback) &&
+            (!this.productId || String(item.product.id) === String(this.productId)));
     }
     getStepsCount(order = this.order) {
         if (!order) {
@@ -350,6 +361,50 @@ export class SallaRatingModalV2 {
         this.scheduleWizardSetup = true;
         forceUpdate(this);
     }
+    /**
+     * Point the modal at a different order/product and invalidate any cached
+     * order so the next open() re-fetches instead of reusing stale data.
+     * Pass `orderId` as `null` for an eligible-but-unverified product review.
+     */
+    async setOrder(orderId, productId) {
+        this.orderId = orderId;
+        this.productId = productId;
+        this.order = undefined;
+        this.hasError = false;
+        this.errorMessage = undefined;
+        this.showContactWidget = true;
+    }
+    /** Builds a single-product, order-less feedback target for unverified reviews. */
+    async loadUnverifiedProductOrder() {
+        const response = await salla.api
+            .withoutNotifier(() => salla.product.api.getDetails(this.productId))
+            .catch(() => null);
+        const product = response?.data;
+        this.order = {
+            products: [
+                {
+                    feedback: undefined,
+                    product: {
+                        id: Number(this.productId),
+                        name: product?.name || '',
+                        thumbnail: product?.image?.url || salla.url.cdn('images/s-empty.png'),
+                    },
+                },
+            ],
+            products_enabled: true,
+            testimonials_enabled: false,
+            shipping_enabled: false,
+            thanks_message: '',
+        };
+        this.productReviewFactors = await this.fetchAllProductReviewFactors(this.order);
+    }
+    getModalTitle() {
+        if (this.isUnverifiedReview()) {
+            const productName = this.getRateableProducts()[0]?.product?.name || '';
+            return `${salla.lang.get('pages.rating.rate')} ${productName}`.trim();
+        }
+        return `${salla.lang.get('pages.rating.rate_order')} <span class="unicode">(#${this.order?.id})</span>`;
+    }
     async open() {
         await salla.onReady();
         this.syncStoreSettings();
@@ -361,14 +416,16 @@ export class SallaRatingModalV2 {
                 this.modal
                     ?.open()
                     .then(() => this.order ||
-                    salla.api
-                        .withoutNotifier(() => salla.rating.api.order(this.getRatingOrderId()))
-                        .then(async (res) => {
-                        this.order = res.data;
-                        this.productReviewFactors = await this.fetchAllProductReviewFactors(res.data);
-                    }))
+                    (this.isUnverifiedReview()
+                        ? this.loadUnverifiedProductOrder()
+                        : salla.api
+                            .withoutNotifier(() => salla.rating.api.order(this.getRatingOrderId()))
+                            .then(async (res) => {
+                            this.order = res.data;
+                            this.productReviewFactors = await this.fetchAllProductReviewFactors(res.data);
+                        })))
                     .then(() => this.readyUpLoyaltyPoints())
-                    .then(() => this.modal?.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">(#${this.order.id})</span>`))
+                    .then(() => this.modal?.setTitle(this.getModalTitle()))
                     .then(() => {
                     // Initialize productImages for all products
                     const initialImages = {};
@@ -803,7 +860,9 @@ export class SallaRatingModalV2 {
             Number(rating_product_with_image_points) + Number(rating_product_points);
     }
     loyaltyPointsNote() {
-        if (!this.loyaltyImageRatingPoints || !this.loyaltyPointsForImagesLabel) {
+        if (!this.loyaltyImageRatingPoints ||
+            !this.loyaltyPointsForImagesLabel ||
+            this.isUnverifiedReview()) {
             return null;
         }
         const svgIcon = (h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10 0C13.6819 0 16.6667 2.98477 16.6667 6.66664C16.6667 9.37047 15.057 11.6984 12.7437 12.7444C11.6978 15.0575 9.3701 16.6666 6.66668 16.6666C2.98477 16.6666 0 13.6819 0 9.99998C0 7.29656 1.60918 4.96894 3.92195 3.92276C4.96827 1.60964 7.29618 0 10 0ZM6.66668 5C3.90524 5 1.66667 7.23856 1.66667 9.99998C1.66667 12.7614 3.90524 15 6.66668 15C9.4281 15 11.6667 12.7614 11.6667 9.99998C11.6667 7.23856 9.4281 5 6.66668 5ZM7.50002 5.83333V6.66664H9.16668V8.33331H5.83333C5.60322 8.33331 5.41667 8.51989 5.41667 8.74998C5.41667 8.95456 5.56407 9.12464 5.75844 9.15998L5.83333 9.16664H7.50002C8.6506 9.16664 9.58335 10.0994 9.58335 11.25C9.58335 12.4006 8.6506 13.3333 7.50002 13.3333V14.1666H5.83333V13.3333H4.16667V11.6666H7.50002C7.7301 11.6666 7.91668 11.4801 7.91668 11.25C7.91668 11.0455 7.76927 10.8753 7.57493 10.8401L7.50002 10.8333H5.83333C4.68274 10.8333 3.75 9.90056 3.75 8.74998C3.75 7.59939 4.68274 6.66664 5.83333 6.66664V5.83333H7.50002ZM10 1.66667C8.51377 1.66667 7.17893 2.31513 6.26313 3.34457C6.39704 3.33736 6.53138 3.33333 6.66668 3.33333C10.3486 3.33333 13.3333 6.3181 13.3333 9.99998C13.3333 10.1356 13.3293 10.2702 13.3213 10.4037C14.3513 9.48814 15 8.15314 15 6.66664C15 3.90524 12.7614 1.66667 10 1.66667Z", fill: "#008C56" })));
@@ -1344,19 +1403,38 @@ export class SallaRatingModalV2 {
     static get properties() {
         return {
             "orderId": {
-                "type": "number",
+                "type": "any",
                 "attribute": "order-id",
-                "mutable": false,
+                "mutable": true,
+                "complexType": {
+                    "original": "number | string | null",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The order id, to rate on its products & shipping.\nExplicitly `null` means an unverified (no order) product review."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "productId": {
+                "type": "any",
+                "attribute": "product-id",
+                "mutable": true,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | string",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The order id, to rate on its products & shipping"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -1399,6 +1477,31 @@ export class SallaRatingModalV2 {
     }
     static get methods() {
         return {
+            "setOrder": {
+                "complexType": {
+                    "signature": "(orderId: number | string | null, productId?: number | string) => Promise<void>",
+                    "parameters": [{
+                            "name": "orderId",
+                            "type": "string | number",
+                            "docs": ""
+                        }, {
+                            "name": "productId",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Point the modal at a different order/product and invalidate any cached\norder so the next open() re-fetches instead of reusing stale data.\nPass `orderId` as `null` for an eligible-but-unverified product review.",
+                    "tags": []
+                }
+            },
             "open": {
                 "complexType": {
                     "signature": "() => Promise<unknown>",

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

@@ -24,7 +24,7 @@ export class SallaRatingModal {
         this.shouldOpenDeleteModal = false;
         this.editItem = null;
         this.loyaltyImageRatingPoints = 0;
-        this.enableNewPopUp = false;
+        this.enableNewPopUp = true;
         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');
@@ -143,7 +143,19 @@ export class SallaRatingModal {
         return this.v2Ref ?? this.host.querySelector('salla-rating-modal-v2');
     }
     syncNewPopUpFlag() {
-        this.enableNewPopUp = !!salla.config.get('store.features')?.includes('new_popup_rating');
+        // Enable the new pop-up to all consumers:
+        this.enableNewPopUp = true;
+    }
+    /**
+     * Point the modal at a different order/product and invalidate any cached
+     * order so the next open() re-fetches instead of reusing stale data.
+     * Pass `orderId` as `null` for an eligible-but-unverified product review.
+     */
+    async setOrder(orderId, productId) {
+        this.orderId = orderId;
+        this.productId = productId;
+        this.order = undefined;
+        await this.getV2Ref()?.setOrder(orderId, productId);
     }
     /**
      * Show the rating modal
@@ -442,7 +454,7 @@ export class SallaRatingModal {
     }
     render() {
         if (this.enableNewPopUp) {
-            return (h(Host, { class: "s-rating-modal" }, h("salla-rating-modal-v2", { ref: (el) => (this.v2Ref = el), orderId: this.orderId })));
+            return (h(Host, { class: "s-rating-modal" }, h("salla-rating-modal-v2", { ref: (el) => (this.v2Ref = el), orderId: this.orderId, productId: this.productId })));
         }
         if (this.deleteMode) {
             return h(Host, { class: "s-rating-modal" }, this.getDeleteModal());
@@ -480,7 +492,10 @@ export class SallaRatingModal {
         }
     }
     async componentWillLoad() {
-        salla.event.on('rating::open', () => this.open());
+        salla.event.on('rating::open', (params) => {
+            const orderId = params?.orderId || salla.config.get('page.id');
+            this.setOrder(orderId, params?.productId).then(() => this.open());
+        });
         salla.event.on('rating::edit', (params) => this.openEditModal(params));
         salla.event.on('rating::delete', (params) => this.openDeleteModal(params));
         await salla.onReady();
@@ -503,19 +518,38 @@ export class SallaRatingModal {
     static get properties() {
         return {
             "orderId": {
-                "type": "number",
+                "type": "any",
                 "attribute": "order-id",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | string | null",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The order id, to rate on its products & shipping"
+                    "text": "The order id, to rate on its products & shipping.\nExplicitly `null` means an unverified (no order) product review."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "productId": {
+                "type": "any",
+                "attribute": "product-id",
+                "mutable": true,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -547,6 +581,31 @@ export class SallaRatingModal {
     }
     static get methods() {
         return {
+            "setOrder": {
+                "complexType": {
+                    "signature": "(orderId: number | string | null, productId?: number | string) => Promise<void>",
+                    "parameters": [{
+                            "name": "orderId",
+                            "type": "string | number",
+                            "docs": ""
+                        }, {
+                            "name": "productId",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Point the modal at a different order/product and invalidate any cached\norder so the next open() re-fetches instead of reusing stale data.\nPass `orderId` as `null` for an eligible-but-unverified product review.",
+                    "tags": []
+                }
+            },
             "open": {
                 "complexType": {
                     "signature": "() => Promise<unknown>",

package/dist/collection/components/salla-verified-review/salla-verified-review.css

@@ -0,0 +1,162 @@
+/*!twlt*/salla-verified-review:empty {
+  display: none;
+}
+
+.s-verified-review-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  margin-top: 1.25rem;
+  padding: 1rem;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 1rem;
+  background: #fff;
+}
+@media (min-width: 768px) {
+  .s-verified-review-container {
+    flex-direction: row;
+    align-items: center;
+    gap: 1.25rem;
+    padding: 1.25rem;
+  }
+}
+
+.s-verified-review-glow {
+  pointer-events: none;
+  position: absolute;
+  top: -4rem;
+  inset-inline-end: -2.5rem;
+  width: 10rem;
+  height: 10rem;
+  border-radius: 9999px;
+  background: var(--color-primary, #008c56);
+  opacity: 0.12;
+  filter: blur(2rem);
+}
+
+.s-verified-review-media {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.s-verified-review-image {
+  width: 72px;
+  height: 72px;
+  border-radius: 0.75rem;
+  object-fit: cover;
+  background: #f3f4f6;
+}
+
+.s-verified-review-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.s-verified-review-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.s-verified-review-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--color-primary, #008c56) 10%, transparent);
+  color: var(--color-primary, #008c56);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.s-verified-review-badge-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.s-verified-review-badge-icon svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  fill: currentColor;
+}
+
+.s-verified-review-order {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.s-verified-review-title {
+  margin: 0;
+  color: #111827;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.375;
+}
+@media (min-width: 768px) {
+  .s-verified-review-title {
+    font-size: 1.125rem;
+  }
+}
+
+.s-verified-review-subtitle {
+  margin: 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+
+.s-verified-review-loyalty {
+  margin: 0.125rem 0 0;
+  color: var(--color-primary, #008c56);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.s-verified-review-actions {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+}
+@media (min-width: 768px) {
+  .s-verified-review-actions {
+    margin-inline-start: auto;
+  }
+}
+
+.s-verified-review-cta {
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .s-verified-review-cta {
+    width: auto;
+  }
+}
+
+.s-verified-review-rate-limit-message {
+  text-align: center;
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin-top: -1rem;
+}
+
+.s-verified-review-rate-limit-footer {
+  margin-top: 1rem;
+}
+.outline {
+  outline-style: solid;
+}