@salla.sa/twilight-components 2.14.546 → 2.14.548

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

@@ -11,6 +11,7 @@ import WhatsappIcon from "../../assets/svg/whatsapp2.svg";
 import MailIcon from "../../assets/svg/mail.svg";
 import { buildMediaUploadAccept } from "../salla-file-upload/upload-limits";
 import { MAX_IMAGE_UPLOAD_LIMIT, MAX_PARALLEL_UPLOADS, MAX_VIDEO_DURATION, MAX_VIDEO_FILE_SIZE, MAX_VIDEO_UPLOAD_LIMIT, countMediaByType, createPreloadedMediaItem, getMediaUrlsByType, isVideoUrl, normalizeSubmittedMedia, parseMediaField, removeUploadedImage, splitMediaUrls, syncHiddenMediaInputs, } from "./rating-modal-media";
+const MODAL_WIDTH = '600px';
 export class SallaRatingModalV2 {
     constructor() {
         this.hasError = false;
@@ -50,7 +51,7 @@ export class SallaRatingModalV2 {
         this.deletedSuccessfullyLabel = salla.lang.get('pages.rating.review_deleted_successfully');
         this.contactUsLabel = salla.lang.get('blocks.footer.social');
         this.requiredFactorsLabel = salla.lang.get('pages.rating.rate_required_factors');
-        this.overallProductRatingLabel = salla.lang.get('pages.rating.overall_product_rating');
+        this.rateTheFollowingLabel = salla.lang.get('pages.rating.rate_the_following_factors');
         this.loyaltyPointsForImagesLabel = salla.lang.get('pages.rating.loyalty_points_for_images', {
             points: ':points',
         });
@@ -70,83 +71,12 @@ export class SallaRatingModalV2 {
         this.MAX_VIDEO_DURATION = MAX_VIDEO_DURATION;
         this.MAX_PARALLEL_UPLOADS = MAX_PARALLEL_UPLOADS;
         this.scheduleWizardSetup = false;
-        salla.lang.onLoaded(() => {
-            this.contactUsLabel = salla.lang.get('blocks.footer.social');
-            const setNestedAsync = (lang, key, value) => {
-                return new Promise(resolve => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
-                    resolve(true);
-                });
-            };
-            const setTranslations = async () => {
-                await setNestedAsync('ar.trans', 'common.uploader.drag_and_drop_files', 'اسحب الملفات وأفلتها هنا');
-                await setNestedAsync('en.trans', 'common.uploader.drag_and_drop_files', 'Drag and drop files here');
-                await setNestedAsync('ar.trans', 'common.uploader.allowed_images_types', ' .jpg أو jpeg أو png يُسمح بإضافة صور بصيغة');
-                await setNestedAsync('en.trans', 'common.uploader.allowed_images_types', 'Images in jpg, jpeg, or png format are allowed.');
-                await setNestedAsync('ar.trans', 'pages.rating.add_images', 'اضافة صور');
-                await setNestedAsync('en.trans', 'pages.rating.add_images', 'Add Images');
-                await setNestedAsync('ar.trans', 'pages.rating.edit_images', 'تعديل الصور');
-                await setNestedAsync('en.trans', 'pages.rating.edit_images', 'Edit Images');
-                await setNestedAsync('ar.trans', 'pages.rating.edit_review', 'تعديل التقييم');
-                await setNestedAsync('en.trans', 'pages.rating.edit_review', 'Edit review');
-                await setNestedAsync('ar.trans', 'pages.rating.confirm_deletion', 'تأكيد حذف التقييم');
-                await setNestedAsync('en.trans', 'pages.rating.confirm_deletion', 'Confirm review deletion');
-                await setNestedAsync('ar.trans', 'pages.rating.are_you_sure_you_want_to_delete_review', 'هل أنت متأكد من حذف تقييمك؟');
-                await setNestedAsync('en.trans', 'pages.rating.are_you_sure_you_want_to_delete_review', 'Are you sure you want to delete your review?');
-                await setNestedAsync('ar.trans', 'pages.rating.review_updated_successfully', 'تم تعديل التقييم بنجاح');
-                await setNestedAsync('en.trans', 'pages.rating.review_updated_successfully', 'The review has been successfully updated.');
-                await setNestedAsync('ar.trans', 'pages.rating.review_deleted_successfully', 'تم حذف التقييم بنجاح');
-                await setNestedAsync('en.trans', 'pages.rating.review_deleted_successfully', 'The review has been successfully deleted.');
-                await setNestedAsync('ar.trans', 'pages.rating.images_count', 'الصور ( :current من أصل :total )');
-                await setNestedAsync('en.trans', 'pages.rating.images_count', 'Images ( :current of :total )');
-                await setNestedAsync('ar.trans', 'pages.rating.media_count', 'الصور (:imageCurrent/:imageTotal) · الفيديو (:videoCurrent/:videoTotal)');
-                await setNestedAsync('en.trans', 'pages.rating.media_count', 'Images (:imageCurrent/:imageTotal) · Videos (:videoCurrent/:videoTotal)');
-                await setNestedAsync('ar.trans', 'common.uploader.allowed_videos_types', 'يُسمح بفيديوهات mp4 أو mov أو avi أو mkv');
-                await setNestedAsync('en.trans', 'common.uploader.allowed_videos_types', 'Videos in mp4, mov, avi, or mkv format are allowed.');
-                await setNestedAsync('ar.trans', 'pages.rating.videos_count', 'الفيديو ( :current من أصل :total )');
-                await setNestedAsync('en.trans', 'pages.rating.videos_count', 'Videos ( :current of :total )');
-                await setNestedAsync('ar.trans', 'common.uploader.allowed_media_types', 'يُسمح بصور jpg أو jpeg أو png وفيديوهات mp4 أو mov أو avi أو mkv');
-                await setNestedAsync('en.trans', 'common.uploader.allowed_media_types', 'Images in jpg, jpeg, or png and videos in mp4, mov, avi, or mkv are allowed.');
-                await setNestedAsync('ar.trans', 'common.uploader.max_three_images', `أضف حتى ${MAX_IMAGE_UPLOAD_LIMIT} صور و ${MAX_VIDEO_UPLOAD_LIMIT} فيديوهات كحد أقصى`);
-                await setNestedAsync('en.trans', 'common.uploader.max_three_images', `Add up to ${MAX_IMAGE_UPLOAD_LIMIT} images and ${MAX_VIDEO_UPLOAD_LIMIT} videos maximum.`);
-                await setNestedAsync('ar.trans', 'common.uploader.max_images_count', 'أضف :count صور كحد أقصى');
-                await setNestedAsync('en.trans', 'common.uploader.max_images_count', 'Add up to :count images maximum.');
-                await setNestedAsync('ar.trans', 'common.uploader.max_videos_count', 'أضف :count فيديوهات كحد أقصى');
-                await setNestedAsync('en.trans', 'common.uploader.max_videos_count', 'Add up to :count videos maximum.');
-                await setNestedAsync('ar.trans', 'common.elements.confirm_delete', 'تأكيد الحذف');
-                await setNestedAsync('en.trans', 'common.elements.confirm_delete', 'Confirm deletion');
-                await setNestedAsync('ar.trans', 'pages.rating.rate_required_factors', 'يرجى تقييم جميع المعايير لإتمام مراجعتك.');
-                await setNestedAsync('en.trans', 'pages.rating.rate_required_factors', 'Please rate all required factors to complete your review.');
-                await setNestedAsync('ar.trans', 'pages.rating.overall_product_rating', 'التقييم العام للمنتج');
-                await setNestedAsync('en.trans', 'pages.rating.overall_product_rating', 'Overall product rating');
-                await setNestedAsync('ar.trans', 'pages.rating.loyalty_points_for_images', 'اكسب :points نقطة ولاء عند إضافة صور لتقييمك!');
-                await setNestedAsync('en.trans', 'pages.rating.loyalty_points_for_images', 'Earn :points loyalty points when adding photos to your review!');
-                this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
-                this.allowedImagesTypesLabel = this.getAllowedMediaTypesLabel();
-                this.threeImagesMax = this.getMaxUploadHintLabel();
-                this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
-                this.editReviewLabel = salla.lang.get('pages.rating.edit_review');
-                this.areYouSureLabel = salla.lang.get('pages.rating.are_you_sure_you_want_to_delete_review');
-                this.confirmDeletionLabel = salla.lang.get('pages.rating.confirm_deletion');
-                this.cancelLabel = salla.lang.get('common.elements.cancel');
-                this.updatedSuccessfullyLabel = salla.lang.get('pages.rating.review_updated_successfully');
-                this.deletedSuccessfullyLabel = salla.lang.get('pages.rating.review_deleted_successfully');
-                this.confirmDeleteBtn = salla.lang.get('common.elements.confirm_delete');
-                this.requiredFactorsLabel = salla.lang.get('pages.rating.rate_required_factors');
-                this.overallProductRatingLabel = salla.lang.get('pages.rating.overall_product_rating');
-                this.loyaltyPointsForImagesLabel = salla.lang.get('pages.rating.loyalty_points_for_images', {
-                    points: ':points',
-                });
-                this.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_body', { store, id, customer });
-            };
-            setTranslations();
-        });
     }
     /**
      * 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 +145,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 +222,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 +243,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 +267,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 +291,58 @@ 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);
+    }
+    escapeHtml(str) {
+        return str
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+    getModalTitle() {
+        if (this.isUnverifiedReview()) {
+            const productName = this.escapeHtml(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 +354,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 +798,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" })));
@@ -964,7 +961,7 @@ export class SallaRatingModalV2 {
         this.userFilledFactorKeys[productId] = userFilled;
     }
     shouldAutofillFactors(mainRating) {
-        return mainRating === 4 || mainRating === 5;
+        return mainRating >= 4;
     }
     autofillUnfilledFactors(productId, mainRating) {
         const factors = this.productReviewFactors[productId] || [];
@@ -1087,7 +1084,7 @@ export class SallaRatingModalV2 {
         }, {});
     }
     renderProductStep(item, index) {
-        return (h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products", "data-product-id": item.product.id, key: item.product.id }, h("div", { class: "s-rating-modal-product" }, this.allowAttachImages && this.loyaltyPointsNote(), h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-info-row" }, h("div", { class: "s-rating-modal-product-img-wrap" }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })), h("h3", { class: "s-rating-modal-product-title" }, item.product.name)), this.renderProductReviewFactors(item.product.id, 0, { fieldPrefix: '' }), h("input", { type: "hidden", name: "product_id", value: item.product.id }), h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: "comment", class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.canAttachMedia() && (h("div", { class: "s-rating-modal-uploader is-opened", ref: el => {
+        return (h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products", "data-product-id": item.product.id, key: item.product.id }, h("div", { class: "s-rating-modal-product" }, this.allowAttachImages && this.loyaltyPointsNote(), h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-details", ref: el => el && this.setupProductRatingAutofill(el, item.product.id) }, h("div", { class: "s-rating-modal-step-wrap" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })), h("h3", { class: "s-rating-modal-title" }, item.product.name), h("p", { class: "s-rating-modal-subtitle" }, salla.lang.get('pages.rating.write_product_rate')), this.renderProductMainRating(item.product.id, 0, { fieldPrefix: '' })), this.renderProductReviewFactors(item.product.id, 0, { fieldPrefix: '' }), h("input", { type: "hidden", name: "product_id", value: item.product.id }), h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: "comment", class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.canAttachMedia() && (h("div", { class: "s-rating-modal-uploader is-opened", ref: el => {
                 if (el)
                     this.contentRefs[index] = el;
             } }, h("salla-file-upload", { name: "image", enableGallery: true, maxImagesCount: this.allowAttachImages ? this.MAX_IMAGE_UPLOAD_LIMIT : undefined, maxVideosCount: this.allowAttachVideos ? this.MAX_VIDEO_UPLOAD_LIMIT : undefined, maxVideoFileSize: this.allowAttachVideos ? this.MAX_VIDEO_FILE_SIZE : undefined, maxVideoDuration: this.allowAttachVideos ? this.MAX_VIDEO_DURATION : undefined, maxParallelUploads: this.MAX_PARALLEL_UPLOADS, imagePreviewHeight: 75, filePosterHeight: 75, "instant-upload": true, type: "feedback", payloadName: "files[]", id: `file-${item.product.id}`, title: item.product.name, allowMultiple: true, instantUpload: true, accept: this.getMediaUploadAccept(), url: salla.url.api('upload'), onUploaded: e => {
@@ -1123,17 +1120,21 @@ export class SallaRatingModalV2 {
                     this.hiddenVideoInputs[index] = el;
             } })), this.renderUploadedImagesCount(item.product.id))))));
     }
+    renderProductMainRating(productId, index, options = {}) {
+        const fieldPrefix = options.fieldPrefix ?? `products[${index}]`;
+        const mainRatingName = fieldPrefix ? `${fieldPrefix}[rating]` : 'rating';
+        const normalizedMainRating = Number(options.mainRating ??
+            (this.editMode ? this.editMainRating : this.productMainRatings[productId]));
+        const hasMainRating = !Number.isNaN(normalizedMainRating);
+        return (h("div", { class: "s-rating-modal-stars-product s-rating-modal-product-rating-row-main" }, h("salla-rating-stars", { size: "large", name: mainRatingName, key: hasMainRating ? `main-rating-${normalizedMainRating}` : 'main-rating-empty', value: hasMainRating ? normalizedMainRating : undefined, editable: hasMainRating, withLabel: true })));
+    }
     renderProductReviewFactors(productId, index, options = {}) {
         const factors = this.productReviewFactors[productId] || [];
         const fieldPrefix = options.fieldPrefix ?? `products[${index}]`;
-        const mainRatingName = fieldPrefix ? `${fieldPrefix}[rating]` : 'rating';
         const factorRatings = {
             ...(this.editMode ? {} : this.productFactorRatings[productId] || {}),
             ...(options.factorRatings || {}),
         };
-        const normalizedMainRating = Number(options.mainRating ??
-            (this.editMode ? this.editMainRating : this.productMainRatings[productId]));
-        const hasMainRating = !Number.isNaN(normalizedMainRating);
         const getPrefilledFactorRating = (factor, factorIndex) => {
             const byId = factor.id !== undefined ? factorRatings[String(factor.id)] : undefined;
             const byName = factor.name ? factorRatings[factor.name.trim()] : undefined;
@@ -1141,8 +1142,12 @@ export class SallaRatingModalV2 {
             const normalized = Number(byId ?? byName ?? byIndex);
             return Number.isNaN(normalized) ? undefined : normalized;
         };
-        return (h("div", { class: "s-rating-modal-product-rating-rows", ref: el => el && this.setupProductRatingAutofill(el, productId) }, h("div", { class: "s-rating-modal-product-rating-row s-rating-modal-product-rating-row-main" }, h("span", { class: "s-rating-modal-product-factor-name" }, this.overallProductRatingLabel, h("span", { class: "s-rating-modal-product-factor-required" }, "*")), h("salla-rating-stars", { size: "medium", name: mainRatingName, key: hasMainRating ? `main-rating-${normalizedMainRating}` : 'main-rating-empty', value: hasMainRating ? normalizedMainRating : undefined, editable: hasMainRating, withLabel: true, labelBeforeStars: true, tag: false })), factors.map((factor, factorIndex) => (h("div", { class: "s-rating-modal-product-rating-row s-rating-modal-product-factor-row px-3", "data-required": factor.required ? 'true' : 'false', "data-factor-key": this.getFactorKey(factor, factorIndex) }, h("input", { type: "hidden", name: this.getFactorFieldName(fieldPrefix, factorIndex, 'name'), value: factor.name }), !!factor.id && (h("input", { type: "hidden", name: this.getFactorFieldName(fieldPrefix, factorIndex, 'id'), value: String(factor.id) })), h("span", { class: "s-rating-modal-product-factor-name" }, factor.name, factor.required ? h("span", { class: "s-rating-modal-product-factor-required" }, "*") : ''), h("salla-rating-stars", { size: "medium", name: this.getFactorFieldName(fieldPrefix, factorIndex, 'rating'), key: `factor-rating-${factor.id ?? factorIndex}-${getPrefilledFactorRating(factor, factorIndex) ?? 0}`, value: getPrefilledFactorRating(factor, factorIndex), editable: options.alwaysEditable ||
-                typeof getPrefilledFactorRating(factor, factorIndex) === 'number', withLabel: true, labelBeforeStars: true, tag: false }))))));
+        if (!factors.length) {
+            return null;
+        }
+        const hasRequiredFactor = factors.some(factor => factor.required);
+        return (h("div", { class: "s-rating-modal-product-factors-card" }, h("div", { class: "s-rating-modal-product-factors-heading" }, this.rateTheFollowingLabel, hasRequiredFactor ? h("span", { class: "s-rating-modal-product-factor-required" }, "*") : ''), h("div", { class: "s-rating-modal-product-rating-rows" }, factors.map((factor, factorIndex) => (h("div", { class: "s-rating-modal-product-rating-row s-rating-modal-product-factor-row", "data-required": factor.required ? 'true' : 'false', "data-factor-key": this.getFactorKey(factor, factorIndex) }, h("input", { type: "hidden", name: this.getFactorFieldName(fieldPrefix, factorIndex, 'name'), value: factor.name }), !!factor.id && (h("input", { type: "hidden", name: this.getFactorFieldName(fieldPrefix, factorIndex, 'id'), value: String(factor.id) })), h("span", { class: "s-rating-modal-product-factor-name" }, factor.name), h("salla-rating-stars", { size: "medium", name: this.getFactorFieldName(fieldPrefix, factorIndex, 'rating'), key: `factor-rating-${factor.id ?? factorIndex}-${getPrefilledFactorRating(factor, factorIndex) ?? 0}`, value: getPrefilledFactorRating(factor, factorIndex), editable: options.alwaysEditable ||
+                typeof getPrefilledFactorRating(factor, factorIndex) === 'number', tag: false })))))));
     }
     handleSendEmail() {
         if (!this.order) {
@@ -1233,21 +1238,24 @@ export class SallaRatingModalV2 {
         return (h("salla-modal", { ref: modal => {
                 if (modal)
                     this.editModal = modal;
-            }, width: "md", onModalVisibilityChanged: isOpen => this.resetData(isOpen) }, h("div", { class: "s-rating-modal-edit-wrapper", ref: el => {
+            }, width: "custom", customWidth: MODAL_WIDTH, onModalVisibilityChanged: isOpen => this.resetData(isOpen) }, h("div", { class: "s-rating-modal-edit-wrapper", ref: el => {
                 if (el)
                     this.body = el;
             } }, this.editType === 'store' && this.editItem ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step", "data-type": "store", ref: currentTab => {
                 if (currentTab)
                     this.currentTab = currentTab;
-            } }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large", editable: true, value: this.editItem.stars })), h("textarea", { name: "content", value: this.editItem.content, class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : null, this.editType === 'shipping' && this.editItem ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step", "data-type": "shipping", ref: currentTab => {
+            } }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.config.get('store.name')), h("p", { class: "s-rating-modal-subtitle" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large", editable: true, value: this.editItem.stars })), h("textarea", { name: "content", value: this.editItem.content, class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : null, this.editType === 'shipping' && this.editItem ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step", "data-type": "shipping", ref: currentTab => {
                 if (currentTab)
                     this.currentTab = currentTab;
-            } }, this.editItem.shipping.logo ? (h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.editItem.shipping.logo, class: "s-rating-modal-shipping-logo", alt: this.editItem.shipping.name }))) : (h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast })), h("div", { class: "s-rating-modal-title" }, ' ', `${salla.lang.get('pages.rating.rate_shipping')} ${this.editItem.shipping.name}`), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large", editable: true, value: this.editItem.stars })), h("textarea", { name: "content", class: "s-rating-modal-comment", value: this.editItem.content, placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : null, this.editType == 'product' && this.editItem ? (h("section", { class: "s-rating-modal-step", "data-type": "products", ref: currentTab => {
+            } }, this.editItem.shipping.logo ? (h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.editItem.shipping.logo, class: "s-rating-modal-shipping-logo", alt: this.editItem.shipping.name }))) : (h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast })), h("div", { class: "s-rating-modal-title" }, ' ', `${salla.lang.get('pages.rating.rate_shipping')} ${this.editItem.shipping.name}`), h("p", { class: "s-rating-modal-subtitle" }, salla.lang.get('pages.rating.write_shipping_rate')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large", editable: true, value: this.editItem.stars })), h("textarea", { name: "content", class: "s-rating-modal-comment", value: this.editItem.content, placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : null, this.editType == 'product' && this.editItem ? (h("section", { class: "s-rating-modal-step", "data-type": "products", ref: currentTab => {
                 if (currentTab)
                     this.currentTab = currentTab;
-            } }, h("div", { class: "s-rating-modal-product" }, this.allowAttachImages && this.loyaltyPointsNote(), h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-info-row" }, h("div", { class: "s-rating-modal-product-img-wrap" }, h("img", { src: this.editItem.product.image.url, alt: this.editItem.product.name, class: "s-rating-modal-product-img" })), h("h3", { class: "s-rating-modal-product-title" }, this.editItem.product.name)), this.renderProductReviewFactors(this.editItem.product.id, 0, {
+            } }, h("div", { class: "s-rating-modal-product" }, this.allowAttachImages && this.loyaltyPointsNote(), h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-details", ref: el => el && this.setupProductRatingAutofill(el, this.editItem.product.id) }, h("div", { class: "s-rating-modal-step-wrap" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.editItem.product.image.url, alt: this.editItem.product.name, class: "s-rating-modal-product-img" })), h("h3", { class: "s-rating-modal-title" }, this.editItem.product.name), h("p", { class: "s-rating-modal-subtitle" }, salla.lang.get('pages.rating.write_product_rate')), this.renderProductMainRating(this.editItem.product.id, 0, {
+            fieldPrefix: '',
+            mainRating: this.editMainRating ??
+                Number(this.editItem.stars ?? this.editItem.rating),
+        })), this.renderProductReviewFactors(this.editItem.product.id, 0, {
             fieldPrefix: '',
-            mainRating: this.editMainRating ?? Number(this.editItem.stars ?? this.editItem.rating),
             factorRatings: this.editFactorRatings,
             alwaysEditable: true,
         }), h("input", { type: "hidden", name: "product_id", value: this.editItem.product.id }), h("textarea", { value: this.editItem.content, placeholder: salla.lang.get('pages.rating.write_product_rate'), name: "comment", class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.canAttachMedia() && (h("div", { class: "s-rating-modal-uploader is-opened", ref: el => {
@@ -1287,15 +1295,15 @@ export class SallaRatingModalV2 {
             return h(Host, { class: "s-rating-modal" }, this.getEditModal());
         }
         if (this.defaultMode) {
-            return (h(Host, { class: "s-rating-modal" }, h("salla-modal", { class: "s-rating-modal-wrap", onModalVisibilityChanged: isOpen => this.resetData(isOpen), isLoading: true, width: "md", ref: modal => {
+            return (h(Host, { class: "s-rating-modal" }, h("salla-modal", { class: "s-rating-modal-wrap", onModalVisibilityChanged: isOpen => this.resetData(isOpen), isLoading: true, width: "custom", customWidth: MODAL_WIDTH, ref: modal => {
                     if (modal)
                         this.modal = modal;
                 } }, h("div", { slot: "loading" }, h("div", { class: "s-rating-modal-skeleton" }, h("salla-skeleton", { type: "circle", height: "80px", width: "80px" }), h("salla-skeleton", { height: "15px", width: "60%" }), h("salla-skeleton", { height: "10px", width: "30%" }), h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map(v => (h("div", { key: v, innerHTML: Star })))), h("salla-skeleton", { height: "100px", width: "100%" }), h("div", { class: "s-rating-modal-skeleton-footer" }, h("salla-skeleton", { height: "40px", width: "30%" })))), !this.hasError && this.order ? ([
                 h("div", { class: "s-rating-modal-wrapper", ref: el => {
                         if (el)
                             this.body = el;
-                    } }, this.isTestimonialsEnabled() ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : (''), this.isProductsEnabled() &&
-                    this.getRateableProducts().map((item, index) => this.renderProductStep(item, index)), this.isShippingEnabled() && this.order.shipping?.company ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo ? (h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))) : (h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast })), h("div", { class: "s-rating-modal-title" }, ' ', `${salla.lang.get('pages.rating.rate_shipping')} ${this.order.shipping.company.name}`), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : (''), h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => {
+                    } }, this.isTestimonialsEnabled() ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.config.get('store.name')), h("p", { class: "s-rating-modal-subtitle" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : (''), this.isProductsEnabled() &&
+                    this.getRateableProducts().map((item, index) => this.renderProductStep(item, index)), this.isShippingEnabled() && this.order.shipping?.company ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo ? (h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))) : (h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast })), h("div", { class: "s-rating-modal-title" }, ' ', `${salla.lang.get('pages.rating.rate_shipping')} ${this.order.shipping.company.name}`), h("p", { class: "s-rating-modal-subtitle" }, salla.lang.get('pages.rating.write_shipping_rate')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : (''), h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => {
                         if (el)
                             this.thanksTab = el;
                     } }, h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }), h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => {
@@ -1318,8 +1326,105 @@ export class SallaRatingModalV2 {
     }
     async componentWillLoad() {
         await salla.onReady();
+        await salla.lang.onLoaded();
+        this.registerTranslations();
         this.syncStoreSettings();
     }
+    registerTranslations() {
+        salla.lang.addBulk({
+            'common.uploader.drag_and_drop_files': {
+                ar: 'اسحب الملفات وأفلتها هنا',
+                en: 'Drag and drop files here',
+            },
+            'common.uploader.allowed_images_types': {
+                ar: ' .jpg أو jpeg أو png يُسمح بإضافة صور بصيغة',
+                en: 'Images in jpg, jpeg, or png format are allowed.',
+            },
+            'pages.rating.add_images': { ar: 'اضافة صور', en: 'Add Images' },
+            'pages.rating.edit_images': { ar: 'تعديل الصور', en: 'Edit Images' },
+            'pages.rating.edit_review': { ar: 'تعديل التقييم', en: 'Edit review' },
+            'pages.rating.confirm_deletion': { ar: 'تأكيد حذف التقييم', en: 'Confirm review deletion' },
+            'pages.rating.are_you_sure_you_want_to_delete_review': {
+                ar: 'هل أنت متأكد من حذف تقييمك؟',
+                en: 'Are you sure you want to delete your review?',
+            },
+            'pages.rating.review_updated_successfully': {
+                ar: 'تم تعديل التقييم بنجاح',
+                en: 'The review has been successfully updated.',
+            },
+            'pages.rating.review_deleted_successfully': {
+                ar: 'تم حذف التقييم بنجاح',
+                en: 'The review has been successfully deleted.',
+            },
+            'pages.rating.images_count': {
+                ar: 'الصور ( :current من أصل :total )',
+                en: 'Images ( :current of :total )',
+            },
+            'pages.rating.media_count': {
+                ar: 'الصور (:imageCurrent/:imageTotal) · الفيديو (:videoCurrent/:videoTotal)',
+                en: 'Images (:imageCurrent/:imageTotal) · Videos (:videoCurrent/:videoTotal)',
+            },
+            'common.uploader.allowed_videos_types': {
+                ar: 'يُسمح بفيديوهات mp4 أو mov أو avi أو mkv',
+                en: 'Videos in mp4, mov, avi, or mkv format are allowed.',
+            },
+            'pages.rating.videos_count': {
+                ar: 'الفيديو ( :current من أصل :total )',
+                en: 'Videos ( :current of :total )',
+            },
+            'common.uploader.allowed_media_types': {
+                ar: 'يُسمح بصور jpg أو jpeg أو png وفيديوهات mp4 أو mov أو avi أو mkv',
+                en: 'Images in jpg, jpeg, or png and videos in mp4, mov, avi, or mkv are allowed.',
+            },
+            'common.uploader.max_three_images': {
+                ar: `أضف حتى ${MAX_IMAGE_UPLOAD_LIMIT} صور و ${MAX_VIDEO_UPLOAD_LIMIT} فيديوهات كحد أقصى`,
+                en: `Add up to ${MAX_IMAGE_UPLOAD_LIMIT} images and ${MAX_VIDEO_UPLOAD_LIMIT} videos maximum.`,
+            },
+            'common.uploader.max_images_count': {
+                ar: 'أضف :count صور كحد أقصى',
+                en: 'Add up to :count images maximum.',
+            },
+            'common.uploader.max_videos_count': {
+                ar: 'أضف :count فيديوهات كحد أقصى',
+                en: 'Add up to :count videos maximum.',
+            },
+            'common.elements.confirm_delete': { ar: 'تأكيد الحذف', en: 'Confirm deletion' },
+            'pages.rating.rate_required_factors': {
+                ar: 'يرجى تقييم جميع المعايير لإتمام مراجعتك.',
+                en: 'Please rate all required factors to complete your review.',
+            },
+            'pages.rating.overall_product_rating': {
+                ar: 'التقييم العام للمنتج',
+                en: 'Overall product rating',
+            },
+            'pages.rating.rate_the_following_factors': {
+                ar: 'كيف تقيِّم التالي؟',
+                en: 'How would you rate the following?',
+            },
+            'pages.rating.loyalty_points_for_images': {
+                ar: 'شاركنا صورة مع تقييمك للطلب واكسب :points نقطة ولاء',
+                en: 'Share a photo with your order review and earn :points loyalty points',
+            },
+        });
+        this.contactUsLabel = salla.lang.get('blocks.footer.social');
+        this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
+        this.allowedImagesTypesLabel = this.getAllowedMediaTypesLabel();
+        this.threeImagesMax = this.getMaxUploadHintLabel();
+        this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
+        this.editReviewLabel = salla.lang.get('pages.rating.edit_review');
+        this.areYouSureLabel = salla.lang.get('pages.rating.are_you_sure_you_want_to_delete_review');
+        this.confirmDeletionLabel = salla.lang.get('pages.rating.confirm_deletion');
+        this.cancelLabel = salla.lang.get('common.elements.cancel');
+        this.updatedSuccessfullyLabel = salla.lang.get('pages.rating.review_updated_successfully');
+        this.deletedSuccessfullyLabel = salla.lang.get('pages.rating.review_deleted_successfully');
+        this.confirmDeleteBtn = salla.lang.get('common.elements.confirm_delete');
+        this.requiredFactorsLabel = salla.lang.get('pages.rating.rate_required_factors');
+        this.rateTheFollowingLabel = salla.lang.get('pages.rating.rate_the_following_factors');
+        this.loyaltyPointsForImagesLabel = salla.lang.get('pages.rating.loyalty_points_for_images', {
+            points: ':points',
+        });
+        this.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_body', { store, id, customer });
+    }
     componentDidRender() {
         if (!this.scheduleWizardSetup || !this.defaultMode || !this.order) {
             return;
@@ -1344,19 +1449,38 @@ export class SallaRatingModalV2 {
     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": 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,
@@ -1399,6 +1523,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>",