@salla.sa/twilight-components 2.14.539 → 2.14.541

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

@@ -9,10 +9,13 @@ import Helper from "../../Helpers/Helper";
 import ImageIcon from "../../assets/svg/image.svg";
 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";
 export class SallaRatingModalV2 {
     constructor() {
         this.hasError = false;
         this.showContactWidget = true;
+        this.errorMessage = '';
         this.images = [];
         this.productImages = {};
         this.editItemImages = [];
@@ -27,7 +30,12 @@ export class SallaRatingModalV2 {
         this.shouldOpenDeleteModal = false;
         this.editItem = null;
         this.allowAttachImages = false;
+        this.allowAttachVideos = false;
         this.allowContactSupport = false;
+        this.uploadCounts = {};
+        this.uploadImageCounts = {};
+        this.uploadVideoCounts = {};
+        this.hasUploadsInProgress = false;
         this.loyaltyImageRatingPoints = 0;
         this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
         this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
@@ -48,13 +56,19 @@ export class SallaRatingModalV2 {
         });
         this.contentRefs = [];
         this.hiddenInputs = [];
+        this.hiddenVideoInputs = [];
+        this.uploadingByProductId = {};
         this.userFilledFactorKeys = {};
         this.boundRatingRows = new WeakSet();
         this.stepsCount = 0;
         this.currentIndex = 0;
         this.submitted = [];
-        this.MAX_UPLOAD_LIMIT = 3;
         this.thanksCountdownInterval = null;
+        this.MAX_IMAGE_UPLOAD_LIMIT = MAX_IMAGE_UPLOAD_LIMIT;
+        this.MAX_VIDEO_UPLOAD_LIMIT = MAX_VIDEO_UPLOAD_LIMIT;
+        this.MAX_VIDEO_FILE_SIZE = MAX_VIDEO_FILE_SIZE;
+        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');
@@ -85,8 +99,20 @@ export class SallaRatingModalV2 {
                 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', 'common.uploader.max_three_images', `.أضف ${this.MAX_UPLOAD_LIMIT} صور كحد أقصى`);
-                await setNestedAsync('en.trans', 'common.uploader.max_three_images', `Add up to ${this.MAX_UPLOAD_LIMIT} images maximum.`);
+                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', 'يرجى تقييم جميع المعايير لإتمام مراجعتك.');
@@ -96,8 +122,8 @@ export class SallaRatingModalV2 {
                 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 = salla.lang.get('common.uploader.allowed_images_types');
-                this.threeImagesMax = salla.lang.get('common.uploader.max_three_images');
+                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');
@@ -124,7 +150,70 @@ export class SallaRatingModalV2 {
             this.orderId = salla.config.get('page.id');
         }
         this.allowAttachImages = !!salla.config.get('store.settings.rating.allow_attach_images');
+        this.allowAttachVideos = !!salla.config.get('store.settings.rating.allow_attach_videos');
         this.allowContactSupport = !!salla.config.get('store.settings.rating.allow_contact_support');
+        this.refreshMediaLabels();
+    }
+    canAttachMedia() {
+        return this.allowAttachImages || this.allowAttachVideos;
+    }
+    getMediaUploadAccept() {
+        return buildMediaUploadAccept(this.allowAttachImages, this.allowAttachVideos);
+    }
+    refreshMediaLabels() {
+        this.allowedImagesTypesLabel = this.getAllowedMediaTypesLabel();
+        this.threeImagesMax = this.getMaxUploadHintLabel();
+    }
+    getAllowedMediaTypesLabel() {
+        if (this.allowAttachImages && this.allowAttachVideos) {
+            return salla.lang.get('common.uploader.allowed_media_types');
+        }
+        if (this.allowAttachImages) {
+            return salla.lang.get('common.uploader.allowed_images_types');
+        }
+        if (this.allowAttachVideos) {
+            return salla.lang.get('common.uploader.allowed_videos_types');
+        }
+        return '';
+    }
+    getMaxUploadHintLabel() {
+        if (this.allowAttachImages && this.allowAttachVideos) {
+            return salla.lang.get('common.uploader.max_three_images');
+        }
+        if (this.allowAttachImages) {
+            return salla.lang.get('common.uploader.max_images_count', {
+                count: this.MAX_IMAGE_UPLOAD_LIMIT,
+            });
+        }
+        if (this.allowAttachVideos) {
+            return salla.lang.get('common.uploader.max_videos_count', {
+                count: this.MAX_VIDEO_UPLOAD_LIMIT,
+            });
+        }
+        return '';
+    }
+    setUploadCount(productId, count, imageCount, videoCount) {
+        this.uploadCounts = { ...this.uploadCounts, [productId]: count };
+        if (imageCount != null) {
+            this.uploadImageCounts = { ...this.uploadImageCounts, [productId]: imageCount };
+        }
+        if (videoCount != null) {
+            this.uploadVideoCounts = { ...this.uploadVideoCounts, [productId]: videoCount };
+        }
+    }
+    setUploaderProcessing(productId, uploading) {
+        this.uploadingByProductId = { ...this.uploadingByProductId, [productId]: uploading };
+        this.hasUploadsInProgress = Object.values(this.uploadingByProductId).some(Boolean);
+    }
+    scheduleUploaderHeightRefresh() {
+        [50, 150, 350].forEach(delay => {
+            setTimeout(() => this.updateBodyHeight(), delay);
+        });
+    }
+    handleGalleryCountUpdate(productId, detail) {
+        this.setUploadCount(productId, detail.count, detail.imageCount, detail.videoCount);
+        this.setUploaderProcessing(productId, !!detail.uploading);
+        this.scheduleUploaderHeightRefresh();
     }
     /** Encrypted order id from page config / prop — used to fetch order details. */
     getRatingOrderId() {
@@ -270,7 +359,7 @@ export class SallaRatingModalV2 {
         return new Promise(resolve => {
             setTimeout(() => {
                 this.modal
-                    .open()
+                    ?.open()
                     .then(() => this.order ||
                     salla.api
                         .withoutNotifier(() => salla.rating.api.order(this.getRatingOrderId()))
@@ -279,7 +368,7 @@ export class SallaRatingModalV2 {
                         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(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">(#${this.order.id})</span>`))
                     .then(() => {
                     // Initialize productImages for all products
                     const initialImages = {};
@@ -287,14 +376,15 @@ export class SallaRatingModalV2 {
                         initialImages[item.product.id] = [];
                     }
                     this.productImages = initialImages;
+                    this.uploadCounts = Object.fromEntries(Object.keys(initialImages).map(productId => [Number(productId), 0]));
                 })
-                    .then(() => this.modal.stopLoading())
+                    .then(() => this.modal?.stopLoading())
                     .then(() => this.afterOrderLoaded())
-                    .catch(e => {
+                    .catch((e) => {
                     resolve(false);
                     this.hasError = true;
                     this.errorMessage = e.response?.data?.error?.message || e.response?.data;
-                    this.modal.stopLoading();
+                    this.modal?.stopLoading();
                 });
                 resolve(true);
             }, 50);
@@ -316,7 +406,10 @@ export class SallaRatingModalV2 {
                 this.editFactorRatings = { ...this.buildEditFactorRatings(this.editItem.product.id) };
                 this.markExistingFactorRatingsAsUserFilled(this.editItem.product.id, this.editFactorRatings);
             }
-            this.editModal.open();
+            this.editModal?.open();
+            if (this.editType === 'product' && this.canAttachMedia()) {
+                this.scheduleUploaderHeightRefresh();
+            }
         }
         catch (e) {
             this.hasError = true;
@@ -327,28 +420,56 @@ export class SallaRatingModalV2 {
         const endpoint = `rating/${feedbackId}/show`;
         const response = await salla.api.request(endpoint);
         this.editItem = response.data;
-        if (this.allowAttachImages && this.editType == 'product' && this.editItem.images.length) {
-            this.editItemImages = this.editItem.images.map(img => {
-                return { id: `${Math.floor(100 + Math.random() * 900)}`, url: img };
-            });
+        if (this.canAttachMedia() && this.editType == 'product') {
+            const imageUrls = (this.editItem.images || []).filter(Boolean);
+            const videoUrls = (this.editItem.videos || []).filter(Boolean);
+            let mediaUrls = [...imageUrls, ...videoUrls];
+            if (!videoUrls.length && imageUrls.length) {
+                const split = splitMediaUrls(imageUrls);
+                mediaUrls = [...split.images, ...split.videos];
+            }
+            mediaUrls = mediaUrls.filter(url => isVideoUrl(url) ? this.allowAttachVideos : this.allowAttachImages);
+            if (mediaUrls.length) {
+                this.editItemImages = mediaUrls.map(url => createPreloadedMediaItem(url));
+                const mediaCounts = countMediaByType(this.editItemImages);
+                this.setUploadCount(this.editItem.product.id, this.editItemImages.length, mediaCounts.image, mediaCounts.video);
+            }
         }
     }
     async editReview() {
+        if (this.hasUploadsInProgress)
+            return;
         const endpoint = `rating/${this.editFeedbackId}`;
         let data;
         if (this.editType === 'product') {
-            const container = this.editModal.querySelector('[data-type="products"]') || this.currentTab;
+            const container = this.editModal?.querySelector('[data-type="products"]') || this.currentTab;
             data = this.buildProductRatingPayload(this.collectFormData(container), container);
             if (!data.product_id && this.editItem?.product?.id) {
                 data.product_id = String(this.editItem.product.id);
             }
+            if (this.canAttachMedia()) {
+                const { images, videos } = getMediaUrlsByType(this.editItemImages);
+                if (this.allowAttachImages) {
+                    data.images = images;
+                }
+                if (this.allowAttachVideos) {
+                    data.videos = videos;
+                }
+            }
+            normalizeSubmittedMedia(data, this.allowAttachImages, this.allowAttachVideos);
         }
         else {
             data = this.collectFormData(this.editModal);
-            data.images && (data.images = data.images.split(','));
+            if (data.images) {
+                data.images = parseMediaField(data.images);
+            }
+            if (data.videos) {
+                data.videos = parseMediaField(data.videos);
+            }
+            normalizeSubmittedMedia(data, this.allowAttachImages, this.allowAttachVideos);
         }
-        await salla.api.request(endpoint, data, 'put').then(res => {
-            this.editModal.close();
+        await salla.api.request(endpoint, data, 'put').then((res) => {
+            this.editModal?.close();
             salla.notify.success(res.message || this.updatedSuccessfullyLabel);
             setTimeout(() => {
                 window.location.reload();
@@ -362,14 +483,14 @@ export class SallaRatingModalV2 {
         this.shouldOpenDeleteModal = true;
         return new Promise(resolve => {
             setTimeout(() => {
-                this.deleteModal.open().then(() => resolve(true));
+                this.deleteModal?.open().then(() => resolve(true));
             }, 50);
         });
     }
     async deleteReview() {
         const endpoint = `rating/${this.deleteFeedbackId}`;
         await salla.api.request(endpoint, null, 'delete').then(() => {
-            this.deleteModal.close();
+            this.deleteModal?.close();
             salla.notify.success(this.deletedSuccessfullyLabel);
             setTimeout(() => {
                 window.location.reload();
@@ -380,12 +501,12 @@ export class SallaRatingModalV2 {
      * Show the rating modal
      */
     async close() {
-        return this.modal.close();
+        return this.modal?.close();
     }
     // handle wizard
     handleWizard() {
-        this.steps = this.modal.querySelectorAll('.s-rating-modal-step');
-        this.dots = this.modal.querySelectorAll('.s-rating-modal-step-dot');
+        this.steps = this.modal?.querySelectorAll('.s-rating-modal-step');
+        this.dots = this.modal?.querySelectorAll('.s-rating-modal-step-dot');
         if (this.stepsCount === 0) {
             this.showThankYou();
             return;
@@ -401,18 +522,18 @@ export class SallaRatingModalV2 {
     }
     showActiveStep(current = null) {
         this.refreshWizardRefs();
-        this.currentTab = current || this.steps[this.currentIndex];
+        this.currentTab = current || this.steps?.[this.currentIndex];
         if (!this.currentTab) {
             return;
         }
-        Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex]).toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
+        Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', (dot) => dot != this.dots?.[this.currentIndex]).toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', (tab) => tab == this.currentTab);
         if (this.currentIndex !== 0) {
             // the animation
             Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
             setTimeout(() => Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
         }
         // Btn text
-        const nextType = this.steps[this.currentIndex + 1]?.dataset.type;
+        const nextType = this.steps?.[this.currentIndex + 1]?.dataset.type;
         this.nextBtn?.setText(nextType
             ? `${salla.lang.get('pages.rating.rate')} ${salla.lang.get(`pages.rating.${nextType}`)}`
             : salla.lang.get('pages.rating.send_ratings'));
@@ -437,13 +558,15 @@ export class SallaRatingModalV2 {
         this.showActiveStep();
     }
     async submit() {
+        if (this.hasUploadsInProgress)
+            return;
         this.refreshWizardRefs();
         try {
             if (!this.submittedBefore()) {
                 this.validate();
             }
             salla.config.canLeave = false;
-            await this.nextBtn.load();
+            await this.nextBtn?.load();
             if (!this.submittedBefore()) {
                 await this.sendFeedback();
             }
@@ -461,7 +584,7 @@ export class SallaRatingModalV2 {
             }
         }
         finally {
-            this.nextBtn.stop();
+            this.nextBtn?.stop();
             salla.config.canLeave = true;
         }
     }
@@ -489,6 +612,9 @@ export class SallaRatingModalV2 {
             inputs.push(input);
         };
         container.querySelectorAll('[name]').forEach((input) => {
+            if (input.closest('salla-file-upload')) {
+                return;
+            }
             addInput(input);
         });
         container.querySelectorAll('salla-rating-stars').forEach((stars) => {
@@ -509,25 +635,28 @@ export class SallaRatingModalV2 {
         return [];
     }
     validate(rating = null, type = null) {
-        if (!rating && this.currentTab.dataset.type === 'products') {
+        if (!rating && this.currentTab?.dataset?.type === 'products') {
             const ratingForms = this.currentTab.querySelectorAll('.rating-outer-form');
-            ratingForms.forEach(ratingForm => this.validate(ratingForm, 'product'));
+            ratingForms.forEach((ratingForm) => this.validate(ratingForm, 'product'));
             return;
         }
-        rating = rating || this.currentTab;
-        const mainRatingRow = rating.querySelector('.s-rating-modal-product-rating-row-main');
-        const mainRatingInput = this.getRatingHiddenInput(mainRatingRow || rating);
+        const resolvedRating = rating ?? this.currentTab;
+        if (!resolvedRating) {
+            return;
+        }
+        const mainRatingRow = resolvedRating.querySelector('.s-rating-modal-product-rating-row-main');
+        const mainRatingInput = this.getRatingHiddenInput(mainRatingRow || resolvedRating);
         const stars = mainRatingInput?.value;
-        const validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
-        type = type || rating.dataset.type;
+        const validationMessage = resolvedRating.querySelector('.s-rating-modal-validation-msg');
+        const resolvedType = type || resolvedRating.getAttribute('data-type');
         if (!stars) {
             validationMessage.innerHTML = salla.lang
-                .get(`pages.rating.rate_${type}_stars`)
+                .get(`pages.rating.rate_${resolvedType}_stars`)
                 .replace(' (:item)', '');
             throw new Error(validationMessage.innerHTML);
         }
-        if (type === 'product') {
-            const requiredFactorRows = Array.from(rating.querySelectorAll('.s-rating-modal-product-factor-row[data-required="true"]'));
+        if (resolvedType === 'product') {
+            const requiredFactorRows = Array.from(resolvedRating.querySelectorAll('.s-rating-modal-product-factor-row[data-required="true"]'));
             const hasMissingRequiredFactor = requiredFactorRows.some((row) => {
                 const factorStarsInput = this.getRatingHiddenInput(row);
                 return !factorStarsInput?.value;
@@ -537,9 +666,13 @@ export class SallaRatingModalV2 {
                 throw new Error(validationMessage.innerHTML);
             }
         }
-        validationMessage.innerHTML = '';
+        if (validationMessage) {
+            validationMessage.innerHTML = '';
+        }
     }
     collectFormData(container = this.currentTab) {
+        if (!container)
+            return {};
         const data = {};
         this.collectNamedInputs(container).forEach((input) => {
             const inputData = salla.helpers.inputData(input.name, input.value, data);
@@ -548,6 +681,8 @@ export class SallaRatingModalV2 {
         return data;
     }
     buildProductRatingPayload(data, container = this.currentTab) {
+        if (!container)
+            return {};
         if (!data.rating) {
             const mainRatingRow = container.querySelector('.s-rating-modal-product-rating-row-main');
             const mainRatingInput = this.getRatingHiddenInput(mainRatingRow || container);
@@ -557,15 +692,24 @@ export class SallaRatingModalV2 {
         }
         const productId = Number(data.product_id);
         let images = [];
+        let videos = [];
         if (data.images) {
-            images =
-                typeof data.images === 'string' ? data.images.split(',').filter(Boolean) : data.images;
+            images = parseMediaField(data.images);
+        }
+        else if (this.editMode && this.canAttachMedia() && productId) {
+            images = getMediaUrlsByType(this.editItemImages).images;
+        }
+        else if (this.canAttachMedia() && productId) {
+            images = getMediaUrlsByType(this.productImages[productId] || []).images;
         }
-        else if (this.editMode && this.allowAttachImages && productId) {
-            images = this.editItemImages.map(img => img.url);
+        if (data.videos) {
+            videos = parseMediaField(data.videos);
         }
-        else if (this.allowAttachImages && productId) {
-            images = (this.productImages[productId] || []).map(img => img.url);
+        else if (this.editMode && this.canAttachMedia() && productId) {
+            videos = getMediaUrlsByType(this.editItemImages).videos;
+        }
+        else if (this.canAttachMedia() && productId) {
+            videos = getMediaUrlsByType(this.productImages[productId] || []).videos;
         }
         const factors = this.normalizeFactorsList(data.factors)
             .filter(factor => factor?.id && factor?.rating)
@@ -573,15 +717,21 @@ export class SallaRatingModalV2 {
             id: String(factor.id),
             rating: String(factor.rating),
         }));
-        return {
+        const payload = {
             order_id: this.getSubmitOrderId(),
             product_id: String(data.product_id),
             rating: String(data.rating),
             comment: data.comment || data.content || '',
-            images,
             factors,
             type: 'products',
         };
+        if (this.allowAttachImages) {
+            payload.images = images;
+        }
+        if (this.allowAttachVideos) {
+            payload.videos = videos;
+        }
+        return payload;
     }
     async sendFeedback() {
         this.refreshWizardRefs();
@@ -602,6 +752,9 @@ export class SallaRatingModalV2 {
         }
         data.order_id = this.getSubmitOrderId();
         data.type = stepType;
+        if (!stepType) {
+            return;
+        }
         const res = await salla.rating.api[stepType](data);
         this.submitted.push(this.currentIndex);
         return res;
@@ -616,6 +769,8 @@ export class SallaRatingModalV2 {
         let seconds = 10;
         this.clearThanksCountdown();
         this.thanksCountdownInterval = setInterval(() => {
+            if (!this.thanksTime)
+                return;
             this.thanksTime.innerHTML = `00:0${seconds--}`;
             if (seconds > 0) {
                 return;
@@ -624,7 +779,7 @@ export class SallaRatingModalV2 {
             this.thanksTime.remove();
             this.close().then(() => window.location.reload());
         }, 1000);
-        this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+        this.modal?.querySelector('.s-rating-modal-footer')?.classList.add('s-rating-modal-unvisiable');
         this.showActiveStep(this.thanksTab);
     }
     getFilepondPlaceholder() {
@@ -932,26 +1087,41 @@ 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.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-opened", ref: el => (this.contentRefs[index] = el) }, h("salla-file-upload", { name: "image", maxFilesCount: this.MAX_UPLOAD_LIMIT, imagePreviewHeight: 117, "instant-upload": true, type: "feedback", payloadName: "files[]", id: `file-${item.product.id}`, title: item.product.name, allowMultiple: true, instantUpload: true, accept: "image/png, image/jpeg, image/jpg", url: salla.url.api('upload'), onUploaded: e => {
+        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 => {
+                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 => {
+                const productId = item.product.id;
+                const nextImages = [...(this.productImages[productId] || []), e.detail];
                 this.productImages = {
                     ...this.productImages,
-                    [item.product.id]: [...(this.productImages[item.product.id] || []), e.detail],
+                    [productId]: nextImages,
                 };
-                this.hiddenInputs[index].value = this.productImages[item.product.id]
-                    .map(img => img.url)
-                    .join(',');
+                const mediaCounts = countMediaByType(nextImages);
+                this.setUploadCount(productId, nextImages.length, mediaCounts.image, mediaCounts.video);
+                syncHiddenMediaInputs(this.hiddenInputs[index], this.hiddenVideoInputs[index], nextImages);
+                this.scheduleUploaderHeightRefresh();
             }, onRemoved: e => {
                 const removedId = e.detail;
-                if (!removedId || !this.productImages[item.product.id])
+                const productId = item.product.id;
+                if (!removedId || !this.productImages[productId])
                     return;
+                const nextImages = removeUploadedImage(this.productImages[productId], removedId);
                 this.productImages = {
                     ...this.productImages,
-                    [item.product.id]: this.productImages[item.product.id].filter(img => img.id !== removedId),
+                    [productId]: nextImages,
                 };
-                this.hiddenInputs[index].value = this.productImages[item.product.id]
-                    .map(img => img.url)
-                    .join(',');
-            }, labelIdle: this.getFilepondPlaceholder() }), h("input", { type: "hidden", name: "images", value: (this.productImages[item.product.id] || []).map(img => img.url).join(','), ref: el => (this.hiddenInputs[index] = el) }), this.renderUploadedImagesCount(item.product.id))))));
+                const mediaCounts = countMediaByType(nextImages);
+                this.setUploadCount(productId, nextImages.length, mediaCounts.image, mediaCounts.video);
+                syncHiddenMediaInputs(this.hiddenInputs[index], this.hiddenVideoInputs[index], nextImages);
+                this.scheduleUploaderHeightRefresh();
+            }, labelIdle: this.getFilepondPlaceholder(), onGalleryUpdated: e => this.handleGalleryCountUpdate(item.product.id, e.detail) }), this.allowAttachImages && (h("input", { type: "hidden", name: "images", value: getMediaUrlsByType(this.productImages[item.product.id] || []).images.join(','), ref: el => {
+                if (el)
+                    this.hiddenInputs[index] = el;
+            } })), this.allowAttachVideos && (h("input", { type: "hidden", name: "videos", value: getMediaUrlsByType(this.productImages[item.product.id] || []).videos.join(','), ref: el => {
+                if (el)
+                    this.hiddenVideoInputs[index] = el;
+            } })), this.renderUploadedImagesCount(item.product.id))))));
     }
     renderProductReviewFactors(productId, index, options = {}) {
         const factors = this.productReviewFactors[productId] || [];
@@ -971,16 +1141,22 @@ 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 => 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 ||
+        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 }))))));
     }
     handleSendEmail() {
+        if (!this.order) {
+            return;
+        }
         const subject = `${this.contactSubjectLabel} #${this.order.id}`;
         const body = this.contact_body(salla.config.get('store.name'), this.order.id, this.getCustomerName());
         const mailtoLink = `mailto:${salla.config.get('store.contacts.email')}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
         window.open(mailtoLink, '_blank');
     }
     handleSendWhatsApp() {
+        if (!this.order) {
+            return;
+        }
         const body = this.contact_body(salla.config.get('store.name'), this.order.id, this.getCustomerName());
         const whatsappLink = `https://wa.me/${salla.config.get('store.contacts.whatsapp')}?text=${encodeURIComponent(body)}`;
         window.open(whatsappLink, '_blank');
@@ -998,9 +1174,16 @@ export class SallaRatingModalV2 {
         this.productFactorRatings = {};
         this.editMainRating = undefined;
         this.userFilledFactorKeys = {};
+        this.uploadingByProductId = {};
+        this.hasUploadsInProgress = false;
         this.hiddenInputs[1] && (this.hiddenInputs[1].value = '');
-        this.deleteFeedbackId = null;
-        this.editFeedbackId = null;
+        this.editHiddenVideosInput && (this.editHiddenVideosInput.value = '');
+        if (this.body) {
+            this.body.style.height = '';
+            this.body.style.minHeight = '';
+        }
+        this.deleteFeedbackId = undefined;
+        this.editFeedbackId = undefined;
         this.shouldOpenDeleteModal = false;
         this.editMode = false;
         this.deleteMode = false;
@@ -1011,37 +1194,90 @@ export class SallaRatingModalV2 {
         this.loyaltyImageRatingPoints = 0;
     }
     getDeleteModal() {
-        return (h("salla-modal", { ref: modal => (this.deleteModal = modal), width: "xs", onModalVisibilityChanged: isOpen => this.resetData(isOpen) }, h("div", { class: "s-rating-modal-delete-wrapper", ref: el => (this.body = el) }, h("h3", null, this.confirmDeletionLabel), h("p", null, this.areYouSureLabel), h("div", { class: "s-rating-modal-delete-actions" }, h("salla-button", { loaderPosition: "center", onClick: () => this.deleteReview() }, this.confirmDeleteBtn), h("salla-button", { color: "danger", fill: "outline", onClick: () => this.deleteModal.close() }, this.cancelLabel)))));
+        return (h("salla-modal", { ref: modal => {
+                if (modal)
+                    this.deleteModal = modal;
+            }, width: "xs", onModalVisibilityChanged: isOpen => this.resetData(isOpen) }, h("div", { class: "s-rating-modal-delete-wrapper", ref: el => {
+                if (el)
+                    this.body = el;
+            } }, h("h3", null, this.confirmDeletionLabel), h("p", null, this.areYouSureLabel), h("div", { class: "s-rating-modal-delete-actions" }, h("salla-button", { loaderPosition: "center", onClick: () => this.deleteReview() }, this.confirmDeleteBtn), h("salla-button", { color: "danger", fill: "outline", onClick: () => this.deleteModal?.close() }, this.cancelLabel)))));
     }
     renderUploadedImagesCount(productId) {
-        // In edit mode, use editItemImages; in default mode, use productImages
-        const imageCount = this.editMode
-            ? this.editItemImages.length
-            : (this.productImages[productId] || []).length;
-        return (h("span", { class: "s-rating-modal-upload-count" }, salla.lang.choice('pages.rating.images_count', imageCount, {
-            current: imageCount,
-            total: this.MAX_UPLOAD_LIMIT,
-        })));
+        const items = this.editMode ? this.editItemImages : this.productImages[productId] || [];
+        const mediaCounts = countMediaByType(items);
+        const imageCount = this.uploadImageCounts[productId] ?? mediaCounts.image;
+        const videoCount = this.uploadVideoCounts[productId] ?? mediaCounts.video;
+        if (this.allowAttachImages && this.allowAttachVideos) {
+            return (h("span", { class: "s-rating-modal-upload-count" }, salla.lang.get('pages.rating.media_count', {
+                imageCurrent: imageCount,
+                imageTotal: this.MAX_IMAGE_UPLOAD_LIMIT,
+                videoCurrent: videoCount,
+                videoTotal: this.MAX_VIDEO_UPLOAD_LIMIT,
+            })));
+        }
+        if (this.allowAttachImages) {
+            return (h("span", { class: "s-rating-modal-upload-count" }, salla.lang.choice('pages.rating.images_count', imageCount, {
+                current: imageCount,
+                total: this.MAX_IMAGE_UPLOAD_LIMIT,
+            })));
+        }
+        if (this.allowAttachVideos) {
+            return (h("span", { class: "s-rating-modal-upload-count" }, salla.lang.choice('pages.rating.videos_count', videoCount, {
+                current: videoCount,
+                total: this.MAX_VIDEO_UPLOAD_LIMIT,
+            })));
+        }
+        return null;
     }
     getEditModal() {
-        return (h("salla-modal", { ref: modal => (this.editModal = modal), width: "md", onModalVisibilityChanged: isOpen => this.resetData(isOpen) }, h("div", { class: "s-rating-modal-edit-wrapper", ref: 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 => (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 => (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.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, {
+        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 => {
+                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 => {
+                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 => {
+                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, {
             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.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-opened", ref: el => (this.contentRefs[1] = el) }, h("salla-file-upload", { name: "images", allowMultiple: true, maxFilesCount: this.MAX_UPLOAD_LIMIT, imagePreviewHeight: 117, filePosterHeight: 117, "instant-upload": true, type: "feedback", files: JSON.stringify(this.editItemImages), payloadName: "files[]", id: `file-${this.editItem.product.id}`, title: this.editItem.product.name, instantUpload: true, accept: "image/png, image/jpeg, image/jpg", url: salla.url.api('upload'), onUploaded: e => {
+        }), 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 => {
+                if (el)
+                    this.contentRefs[1] = el;
+            } }, h("salla-file-upload", { name: "images", allowMultiple: true, 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", files: JSON.stringify(this.editItemImages), payloadName: "files[]", id: `file-${this.editItem.product.id}`, title: this.editItem.product.name, instantUpload: true, accept: this.getMediaUploadAccept(), url: salla.url.api('upload'), onUploaded: e => {
                 this.editItemImages = [
                     ...this.editItemImages,
                     e.detail,
                 ];
-                this.hiddenInputs[1].value = this.editItemImages.map(img => img.url).join();
+                const mediaCounts = countMediaByType(this.editItemImages);
+                this.setUploadCount(this.editItem.product.id, this.editItemImages.length, mediaCounts.image, mediaCounts.video);
+                syncHiddenMediaInputs(this.hiddenInputs[1], this.editHiddenVideosInput, this.editItemImages);
+                this.scheduleUploaderHeightRefresh();
             }, onRemoved: e => {
                 const removedId = e.detail;
                 if (!removedId)
                     return;
-                this.editItemImages = this.editItemImages.filter(img => img.id !== removedId);
-                this.hiddenInputs[1].value = this.editItemImages.map(img => img.url).join();
-            }, labelIdle: this.getFilepondPlaceholder() }), h("input", { type: "hidden", name: "images", value: this.editItemImages.map(img => img.url).join(','), ref: el => (this.hiddenInputs[1] = el) }), this.renderUploadedImagesCount(this.editItem.product.id)))))) : null, h("div", { class: "s-rating-modal-footer s-rating-modal-footer-end" }, h("salla-button", { "loader-position": "center", onClick: () => this.editReview() }, this.editReviewLabel)))));
+                this.editItemImages = removeUploadedImage(this.editItemImages, removedId);
+                const mediaCounts = countMediaByType(this.editItemImages);
+                this.setUploadCount(this.editItem.product.id, this.editItemImages.length, mediaCounts.image, mediaCounts.video);
+                syncHiddenMediaInputs(this.hiddenInputs[1], this.editHiddenVideosInput, this.editItemImages);
+                this.scheduleUploaderHeightRefresh();
+            }, labelIdle: this.getFilepondPlaceholder(), onGalleryUpdated: e => this.handleGalleryCountUpdate(this.editItem.product.id, e.detail) }), this.allowAttachImages && (h("input", { type: "hidden", name: "images", value: getMediaUrlsByType(this.editItemImages).images.join(','), ref: el => {
+                if (el)
+                    this.hiddenInputs[1] = el;
+            } })), this.allowAttachVideos && (h("input", { type: "hidden", name: "videos", value: getMediaUrlsByType(this.editItemImages).videos.join(','), ref: el => {
+                if (el)
+                    this.editHiddenVideosInput = el;
+            } })), this.renderUploadedImagesCount(this.editItem.product.id)))))) : null, h("div", { class: "s-rating-modal-footer s-rating-modal-footer-end" }, h("salla-button", { "loader-position": "center", loading: this.hasUploadsInProgress, disabled: this.hasUploadsInProgress, onClick: () => this.editReview() }, this.editReviewLabel)))));
     }
     render() {
         if (this.deleteMode) {
@@ -1051,14 +1287,32 @@ 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 => (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 => (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.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 => (this.thanksTime = el) }))),
+            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 => {
+                    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 => {
+                        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 => {
+                        if (el)
+                            this.thanksTime = el;
+                    } }))),
                 this.allowContactSupport &&
                     this.showContactWidget &&
                     (salla.config.get('store.contacts.whatsapp') ||
                         salla.config.get('store.contacts.email')) ? (h("div", { class: "s-rating-modal-contact" }, h("p", null, this.contactUsLabel), h("div", { class: "s-rating-modal-contact-icons" }, salla.config.get('store.contacts.whatsapp') && (h("span", { onClick: () => this.handleSendWhatsApp(), innerHTML: WhatsappIcon })), salla.config.get('store.contacts.email') && (h("span", { onClick: () => this.handleSendEmail(), innerHTML: MailIcon }))))) : (''),
-                h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => (this.backBtn = el), onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? (h("ul", { class: "s-rating-modal-dots" }, [...Array(this.stepsCount)].map((_, v) => (h("li", { key: v, class: "s-rating-modal-bg-gray s-rating-modal-step-dot" }))))) : (''), h("salla-button", { "loader-position": "center", ref: el => (this.nextBtn = el), onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),
+                h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => {
+                        if (el)
+                            this.backBtn = el;
+                    }, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? (h("ul", { class: "s-rating-modal-dots" }, [...Array(this.stepsCount)].map((_, v) => (h("li", { key: v, class: "s-rating-modal-bg-gray s-rating-modal-step-dot" }))))) : (''), h("salla-button", { "loader-position": "center", loading: this.hasUploadsInProgress, disabled: this.hasUploadsInProgress, ref: el => {
+                        if (el)
+                            this.nextBtn = el;
+                    }, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),
             ]) : (h("salla-placeholder", { alignment: "center" })))));
         }
     }
@@ -1099,7 +1353,7 @@ export class SallaRatingModalV2 {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The order id, to rate on its products & shipping"
@@ -1134,7 +1388,12 @@ export class SallaRatingModalV2 {
             "deleteFeedbackId": {},
             "editItem": {},
             "allowAttachImages": {},
+            "allowAttachVideos": {},
             "allowContactSupport": {},
+            "uploadCounts": {},
+            "uploadImageCounts": {},
+            "uploadVideoCounts": {},
+            "hasUploadsInProgress": {},
             "loyaltyImageRatingPoints": {}
         };
     }
@@ -1149,6 +1408,10 @@ export class SallaRatingModalV2 {
                             "location": "global",
                             "id": "global::Promise"
                         },
+                        "OrderFeedbackResponse": {
+                            "location": "global",
+                            "id": "global::OrderFeedbackResponse"
+                        },
                         "Record": {
                             "location": "global",
                             "id": "global::Record"
@@ -1188,10 +1451,10 @@ export class SallaRatingModalV2 {
             },
             "openDeleteModal": {
                 "complexType": {
-                    "signature": "(params: any) => Promise<unknown>",
+                    "signature": "(params: { feedback_id: number; }) => Promise<unknown>",
                     "parameters": [{
                             "name": "params",
-                            "type": "any",
+                            "type": "{ feedback_id: number; }",
                             "docs": ""
                         }],
                     "references": {