@salla.sa/twilight-components 2.14.489 → 2.14.491

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

@@ -0,0 +1,1203 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host, forceUpdate } from "@stencil/core";
+import Star from "../../assets/svg/star.svg";
+import ShippingFast from "../../assets/svg/shipping-fast.svg";
+import CheckCircle2 from "../../assets/svg/check-circle2.svg";
+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";
+export class SallaRatingModalV2 {
+    constructor() {
+        this.hasError = false;
+        this.showContactWidget = true;
+        this.images = [];
+        this.productImages = {};
+        this.editItemImages = [];
+        this.productReviewFactors = {};
+        this.editFactorRatings = {};
+        this.productMainRatings = {};
+        this.productFactorRatings = {};
+        this.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_subject', { store, id, customer });
+        this.editMode = false;
+        this.defaultMode = false;
+        this.deleteMode = false;
+        this.shouldOpenDeleteModal = false;
+        this.editItem = null;
+        this.allowAttachImages = false;
+        this.allowContactSupport = false;
+        this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
+        this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
+        this.editReviewLabel = salla.lang.get('pages.rating.edit_review');
+        this.allowedImagesTypesLabel = salla.lang.get('common.uploader.allowed_images_types');
+        this.threeImagesMax = salla.lang.get('common.uploader.max_three_images');
+        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.confirmDeleteBtn = salla.lang.get('common.elements.confirm_delete');
+        this.updatedSuccessfullyLabel = salla.lang.get('pages.rating.review_updated_successfully');
+        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.contentRefs = [];
+        this.hiddenInputs = [];
+        this.userFilledFactorKeys = {};
+        this.boundRatingRows = new WeakSet();
+        this.stepsCount = 0;
+        this.currentIndex = 0;
+        this.submitted = [];
+        this.MAX_UPLOAD_LIMIT = 3;
+        this.thanksCountdownInterval = null;
+        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', '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', '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');
+                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.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.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_body', { store, id, customer });
+            };
+            setTranslations();
+        });
+    }
+    /**
+     * Show the rating modal
+     */
+    syncStoreSettings() {
+        if (!this.orderId) {
+            this.orderId = salla.config.get('page.id');
+        }
+        this.allowAttachImages = !!salla.config.get('store.settings.rating.allow_attach_images');
+        this.allowContactSupport = !!salla.config.get('store.settings.rating.allow_contact_support');
+    }
+    /** 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. */
+    getSubmitOrderId() {
+        return this.orderId;
+    }
+    isCustomerOrderShape(value) {
+        if (!value || typeof value !== 'object') {
+            return false;
+        }
+        const record = value;
+        return (!!record.rating &&
+            (Array.isArray(record.items) ||
+                Array.isArray(record.products) ||
+                Array.isArray(record.rating?.product) ||
+                Array.isArray(record.rating?.products)));
+    }
+    getBootstrapOrder() {
+        const page = salla.config.get('page');
+        if (this.isCustomerOrderShape(page)) {
+            return page;
+        }
+        if (page && typeof page === 'object') {
+            const pageRecord = page;
+            if (Array.isArray(pageRecord.products)) {
+                return page;
+            }
+            const nestedOrder = pageRecord.order;
+            if (this.isCustomerOrderShape(nestedOrder)) {
+                return nestedOrder;
+            }
+        }
+        return undefined;
+    }
+    async loadCustomerOrderForEdit() {
+        const bootstrapOrder = this.getBootstrapOrder();
+        if (bootstrapOrder?.rating?.product || bootstrapOrder?.rating?.products) {
+            this.order = bootstrapOrder;
+            return;
+        }
+        try {
+            const response = await salla.api.withoutNotifier(() => salla.order.api.getDetails(this.getRatingOrderId()));
+            if (response?.data) {
+                this.order = response.data;
+            }
+        }
+        catch (_error) {
+            if (!this.order) {
+                const orderResponse = await salla.api.withoutNotifier(() => salla.rating.api.order(this.getRatingOrderId()));
+                this.order = orderResponse.data;
+            }
+        }
+    }
+    getOrderProductRatings(order = this.order) {
+        if (!order?.rating) {
+            return [];
+        }
+        return [
+            ...this.normalizeToArray(order.rating.product),
+            ...this.normalizeToArray(order.rating.products),
+        ];
+    }
+    getMatchedProductRating(order = this.order, productId, feedbackId) {
+        return this.getOrderProductRatings(order).find(entry => Number(entry?.id ?? entry?.feedback_id) === Number(feedbackId) ||
+            Number(entry?.product_id ?? entry?.product?.id) === Number(productId));
+    }
+    hasRatingFeedback(feedback) {
+        const rating = feedback?.rating;
+        return rating !== undefined && rating !== null && rating !== '' && Number(rating) > 0;
+    }
+    isTestimonialsEnabled(order = this.order) {
+        if (order?.testimonials_enabled === false) {
+            return false;
+        }
+        if (this.hasRatingFeedback(order?.store?.feedback)) {
+            return false;
+        }
+        if (order?.testimonials_enabled === true) {
+            return true;
+        }
+        return !!order?.allowed_ratings?.testimonials_enabled;
+    }
+    isProductsEnabled(order = this.order) {
+        if (order?.products_enabled === false) {
+            return false;
+        }
+        return this.getRateableProducts(order).length > 0;
+    }
+    isShippingEnabled(order = this.order) {
+        if (order?.shipping_enabled === false) {
+            return false;
+        }
+        if (this.hasRatingFeedback(order?.shipping?.feedback)) {
+            return false;
+        }
+        if (!order?.shipping?.company) {
+            return false;
+        }
+        if (order?.shipping_enabled === true) {
+            return true;
+        }
+        return !!order?.allowed_ratings?.shipping_enabled;
+    }
+    getOrderProducts(order = this.order) {
+        if (!Array.isArray(order?.products)) {
+            return [];
+        }
+        return order.products.filter(item => item?.product?.id);
+    }
+    getRateableProducts(order = this.order) {
+        return this.getOrderProducts(order).filter(item => !this.hasRatingFeedback(item?.feedback));
+    }
+    getStepsCount(order = this.order) {
+        if (!order) {
+            return 0;
+        }
+        let count = 0;
+        if (this.isTestimonialsEnabled(order)) {
+            count++;
+        }
+        if (this.isProductsEnabled(order)) {
+            count += this.getRateableProducts(order).length;
+        }
+        if (this.isShippingEnabled(order) && order.shipping?.company) {
+            count++;
+        }
+        return count;
+    }
+    afterOrderLoaded() {
+        this.stepsCount = this.getStepsCount();
+        this.scheduleWizardSetup = true;
+        forceUpdate(this);
+    }
+    async open() {
+        await salla.onReady();
+        this.syncStoreSettings();
+        this.defaultMode = true;
+        this.currentIndex = 0;
+        this.submitted = [];
+        return new Promise(resolve => {
+            setTimeout(() => {
+                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);
+                    }))
+                    .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 = {};
+                    for (const item of this.getRateableProducts()) {
+                        initialImages[item.product.id] = [];
+                    }
+                    this.productImages = initialImages;
+                })
+                    .then(() => this.modal.stopLoading())
+                    .then(() => this.afterOrderLoaded())
+                    .catch(e => {
+                    resolve(false);
+                    this.hasError = true;
+                    this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+                    this.modal.stopLoading();
+                });
+                resolve(true);
+            }, 50);
+        });
+    }
+    async openEditModal(params) {
+        await salla.onReady();
+        this.syncStoreSettings();
+        this.defaultMode = false;
+        this.editMode = true;
+        this.editType = params.type;
+        this.editFeedbackId = params.feedback_id;
+        try {
+            await this.fetchEditItem(params.feedback_id);
+            if (this.editType === 'product' && this.editItem?.product?.id) {
+                await this.loadCustomerOrderForEdit();
+                await this.ensureProductFactorsLoaded(this.editItem.product.id);
+                this.editFactorRatings = { ...this.buildEditFactorRatings(this.editItem.product.id) };
+                this.markExistingFactorRatingsAsUserFilled(this.editItem.product.id, this.editFactorRatings);
+            }
+            this.editModal.open();
+        }
+        catch (e) {
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        }
+    }
+    async fetchEditItem(feedbackId) {
+        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 };
+            });
+        }
+    }
+    async editReview() {
+        const endpoint = `rating/${this.editFeedbackId}`;
+        let data;
+        if (this.editType === 'product') {
+            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);
+            }
+        }
+        else {
+            data = this.collectFormData(this.editModal);
+            data.images && (data.images = data.images.split(','));
+        }
+        await salla.api.request(endpoint, data, 'put').then(res => {
+            this.editModal.close();
+            salla.notify.success(res.message || this.updatedSuccessfullyLabel);
+            setTimeout(() => {
+                window.location.reload();
+            }, 500);
+        });
+    }
+    async openDeleteModal(params) {
+        this.defaultMode = false;
+        this.deleteMode = true;
+        this.deleteFeedbackId = params.feedback_id;
+        this.shouldOpenDeleteModal = true;
+        return new Promise(resolve => {
+            setTimeout(() => {
+                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();
+            salla.notify.success(this.deletedSuccessfullyLabel);
+            setTimeout(() => {
+                window.location.reload();
+            }, 500);
+        });
+    }
+    /**
+     * Show the rating modal
+     */
+    async 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');
+        if (this.stepsCount === 0) {
+            this.showThankYou();
+            return;
+        }
+        this.showActiveStep();
+    }
+    refreshWizardRefs() {
+        if (!this.modal) {
+            return;
+        }
+        this.steps = this.modal.querySelectorAll('.s-rating-modal-step');
+        this.dots = this.modal.querySelectorAll('.s-rating-modal-step-dot');
+    }
+    showActiveStep(current = null) {
+        this.refreshWizardRefs();
+        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);
+        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;
+        this.nextBtn?.setText(nextType
+            ? `${salla.lang.get('pages.rating.rate')} ${salla.lang.get(`pages.rating.${nextType}`)}`
+            : salla.lang.get('pages.rating.send_ratings'));
+        setTimeout(() => this.updateBodyHeight(), 0);
+        setTimeout(() => this.updateBodyHeight(), 150);
+    }
+    updateBodyHeight() {
+        if (!this.body || !this.currentTab) {
+            return;
+        }
+        // Product step contains async uploader mount; keep height auto to prevent clipping.
+        if (this.currentTab.dataset.type === 'products') {
+            this.body.style.height = 'auto';
+            return;
+        }
+        const extraHeight = this.editMode ? 60 : 0;
+        this.body.style.height = `${this.currentTab.offsetHeight + extraHeight}px`;
+    }
+    previousTab() {
+        this.currentIndex > 0 && this.currentIndex--;
+        Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+        this.showActiveStep();
+    }
+    async submit() {
+        this.refreshWizardRefs();
+        try {
+            if (!this.submittedBefore()) {
+                this.validate();
+            }
+            salla.config.canLeave = false;
+            await this.nextBtn.load();
+            if (!this.submittedBefore()) {
+                await this.sendFeedback();
+            }
+            this.currentTab
+                ?.querySelectorAll('[name],.s-rating-modal-btn-star')
+                .forEach(el => el.setAttribute('disabled', ''));
+            if (this.currentIndex < this.stepsCount) {
+                this.currentIndex++;
+            }
+            this.showActiveStep();
+            Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true);
+            if (this.currentIndex === this.stepsCount) {
+                this.showThankYou();
+                this.showContactWidget = false;
+            }
+        }
+        finally {
+            this.nextBtn.stop();
+            salla.config.canLeave = true;
+        }
+    }
+    submittedBefore() {
+        return this.submitted.includes(this.currentIndex);
+    }
+    getRatingHiddenInput(container) {
+        const element = container;
+        const directInput = element.querySelector?.('.rating_hidden_input');
+        if (directInput?.name) {
+            return directInput;
+        }
+        const starsComponent = element.querySelector?.('salla-rating-stars');
+        return (starsComponent?.shadowRoot?.querySelector('.rating_hidden_input') ||
+            null);
+    }
+    collectNamedInputs(container) {
+        const seen = new Set();
+        const inputs = [];
+        const addInput = (input) => {
+            if (!input?.name || seen.has(input)) {
+                return;
+            }
+            seen.add(input);
+            inputs.push(input);
+        };
+        container.querySelectorAll('[name]').forEach((input) => {
+            addInput(input);
+        });
+        container.querySelectorAll('salla-rating-stars').forEach((stars) => {
+            addInput(this.getRatingHiddenInput(stars));
+        });
+        return inputs;
+    }
+    normalizeFactorsList(factors) {
+        if (!factors) {
+            return [];
+        }
+        if (Array.isArray(factors)) {
+            return factors;
+        }
+        if (typeof factors === 'object') {
+            return Object.values(factors).filter(entry => entry && typeof entry === 'object');
+        }
+        return [];
+    }
+    validate(rating = null, type = null) {
+        if (!rating && this.currentTab.dataset.type === 'products') {
+            const ratingForms = this.currentTab.querySelectorAll('.rating-outer-form');
+            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 stars = mainRatingInput?.value;
+        const validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
+        type = type || rating.dataset.type;
+        if (!stars) {
+            validationMessage.innerHTML = salla.lang
+                .get(`pages.rating.rate_${type}_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"]'));
+            const hasMissingRequiredFactor = requiredFactorRows.some((row) => {
+                const factorStarsInput = this.getRatingHiddenInput(row);
+                return !factorStarsInput?.value;
+            });
+            if (hasMissingRequiredFactor) {
+                validationMessage.innerHTML = this.requiredFactorsLabel;
+                throw new Error(validationMessage.innerHTML);
+            }
+        }
+        validationMessage.innerHTML = '';
+    }
+    collectFormData(container = this.currentTab) {
+        const data = {};
+        this.collectNamedInputs(container).forEach((input) => {
+            const inputData = salla.helpers.inputData(input.name, input.value, data);
+            data[inputData.name] = inputData.value;
+        });
+        return data;
+    }
+    buildProductRatingPayload(data, container = this.currentTab) {
+        if (!data.rating) {
+            const mainRatingRow = container.querySelector('.s-rating-modal-product-rating-row-main');
+            const mainRatingInput = this.getRatingHiddenInput(mainRatingRow || container);
+            if (mainRatingInput?.value) {
+                data.rating = mainRatingInput.value;
+            }
+        }
+        const productId = Number(data.product_id);
+        let images = [];
+        if (data.images) {
+            images =
+                typeof data.images === 'string' ? data.images.split(',').filter(Boolean) : data.images;
+        }
+        else if (this.editMode && this.allowAttachImages && productId) {
+            images = this.editItemImages.map(img => img.url);
+        }
+        else if (this.allowAttachImages && productId) {
+            images = (this.productImages[productId] || []).map(img => img.url);
+        }
+        const factors = this.normalizeFactorsList(data.factors)
+            .filter(factor => factor?.id && factor?.rating)
+            .map(factor => ({
+            id: String(factor.id),
+            rating: String(factor.rating),
+        }));
+        return {
+            order_id: this.getSubmitOrderId(),
+            product_id: String(data.product_id),
+            rating: String(data.rating),
+            comment: data.comment || data.content || '',
+            images,
+            factors,
+            type: 'products',
+        };
+    }
+    async sendFeedback() {
+        this.refreshWizardRefs();
+        const stepType = this.currentTab?.dataset?.type;
+        if (stepType === 'products') {
+            const data = this.collectFormData(this.currentTab);
+            const payload = this.buildProductRatingPayload(data, this.currentTab);
+            if (!payload.product_id || !payload.rating) {
+                throw new Error('Missing product rating data');
+            }
+            const res = await salla.rating.api.products(payload);
+            this.submitted.push(this.currentIndex);
+            return res;
+        }
+        const data = this.collectFormData(this.currentTab);
+        if (Object.keys(data).length === 0) {
+            return;
+        }
+        data.order_id = this.getSubmitOrderId();
+        data.type = stepType;
+        const res = await salla.rating.api[stepType](data);
+        this.submitted.push(this.currentIndex);
+        return res;
+    }
+    clearThanksCountdown() {
+        if (this.thanksCountdownInterval !== null) {
+            clearInterval(this.thanksCountdownInterval);
+            this.thanksCountdownInterval = null;
+        }
+    }
+    showThankYou() {
+        let seconds = 10;
+        this.clearThanksCountdown();
+        this.thanksCountdownInterval = setInterval(() => {
+            this.thanksTime.innerHTML = `00:0${seconds--}`;
+            if (seconds > 0) {
+                return;
+            }
+            this.clearThanksCountdown();
+            this.thanksTime.remove();
+            this.close().then(() => window.location.reload());
+        }, 1000);
+        this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+        this.showActiveStep(this.thanksTab);
+    }
+    getFilepondPlaceholder() {
+        return `<div class="s-rating-modal-filepond-placeholder"><span class="s-rating-modal-filepond-placeholder-icon">${ImageIcon}</span><p class="s-rating-modal-filepond-placeholder-text">${this.dragAndDropFilesLabel}<br>
+    <span> ${this.allowedImagesTypesLabel} <br> ${this.threeImagesMax} </span></p></div>`;
+    }
+    getCustomerName() {
+        let firstName = salla.config.get('user.first_name') || salla.storage.get('user.first_name') || '';
+        let lasName = salla.config.get('user.last_name') || salla.storage.get('user.last_name') || '';
+        return `${firstName} ${lasName}`;
+    }
+    normalizeReviewFactorsPayload(payload) {
+        const data = payload?.data ?? payload?.factors;
+        if (!Array.isArray(data)) {
+            return [];
+        }
+        return data.flatMap(entry => {
+            const items = Array.isArray(entry?.items) ? [...entry.items] : null;
+            // Nested form shape: only use items[].id, ignore parent entry id
+            if (items?.length) {
+                items.sort((a, b) => (Number(a?.sort) || 0) - (Number(b?.sort) || 0));
+                const isRequired = !!entry?.is_required;
+                return items
+                    .filter(item => item?.id != null && item?.id !== '')
+                    .map(item => ({
+                    id: item.id,
+                    name: item?.name,
+                    required: isRequired,
+                }));
+            }
+            // Legacy flat shape (no items array)
+            if (entry?.id == null || entry?.id === '') {
+                return [];
+            }
+            return [
+                {
+                    id: entry.id,
+                    name: entry?.name,
+                    required: entry?.required ?? entry?.is_required ?? false,
+                },
+            ];
+        });
+    }
+    async fetchProductReviewFactors(productId) {
+        try {
+            const response = await salla.api.request(`review/factors/${productId}/form`);
+            return this.normalizeReviewFactorsPayload(response);
+        }
+        catch (_error) {
+            return [];
+        }
+    }
+    async fetchAllProductReviewFactors(order) {
+        const products = this.getRateableProducts(order);
+        if (!products.length) {
+            return {};
+        }
+        const pairs = await Promise.all(products.map(async (item) => {
+            const factors = await this.fetchProductReviewFactors(item.product.id);
+            return [item.product.id, factors];
+        }));
+        return Object.fromEntries(pairs);
+    }
+    async ensureProductFactorsLoaded(productId) {
+        if (!productId || this.productReviewFactors[productId]) {
+            return;
+        }
+        const factors = await this.fetchProductReviewFactors(productId);
+        this.productReviewFactors = {
+            ...this.productReviewFactors,
+            [productId]: factors,
+        };
+    }
+    getFactorFieldName(prefix, factorIndex, field) {
+        return prefix
+            ? `${prefix}[factors][${factorIndex}][${field}]`
+            : `factors[${factorIndex}][${field}]`;
+    }
+    normalizeToArray(value) {
+        if (value === null || value === undefined) {
+            return [];
+        }
+        return Array.isArray(value) ? value : [value];
+    }
+    isFactorReviewsList(value) {
+        return (Array.isArray(value) &&
+            value.length > 0 &&
+            value.every(item => item &&
+                typeof item === 'object' &&
+                (item['rating'] !== undefined ||
+                    item['stars'] !== undefined ||
+                    item['value'] !== undefined)));
+    }
+    getFactorReviewsFromRecord(record) {
+        if (!record) {
+            return [];
+        }
+        for (const key of ['factor_reviews', 'review_factors', 'factors']) {
+            const value = record[key];
+            if (this.isFactorReviewsList(value)) {
+                return value;
+            }
+        }
+        return [];
+    }
+    getEditFactorReviewsList(productId) {
+        const orderSources = [this.order, this.getBootstrapOrder()].filter(Boolean);
+        for (const order of orderSources) {
+            const matchedRating = this.getMatchedProductRating(order, productId, this.editFeedbackId);
+            const reviews = this.getFactorReviewsFromRecord(matchedRating);
+            if (reviews.length) {
+                return reviews;
+            }
+        }
+        const matchedOrderProduct = this.getOrderProducts(this.order).find(item => Number(item.product?.id) === Number(productId));
+        const sources = [
+            this.editItem?.factor_reviews,
+            this.editItem?.review_factors,
+            this.editItem?.product?.review_factors,
+            this.editItem?.product?.factor_reviews,
+            this.editItem?.factors,
+            matchedOrderProduct?.factor_reviews,
+            matchedOrderProduct?.review_factors,
+            matchedOrderProduct?.feedback?.factor_reviews,
+        ];
+        for (const source of sources) {
+            if (Array.isArray(source) && source.length > 0) {
+                return source;
+            }
+        }
+        return [];
+    }
+    getFactorKey(factor, factorIndex) {
+        if (factor.id !== undefined && factor.id !== null && factor.id !== '') {
+            return `id:${factor.id}`;
+        }
+        if (factor.name) {
+            return `name:${factor.name.trim()}`;
+        }
+        return `index:${factorIndex}`;
+    }
+    getFactorRatingsForProduct(productId) {
+        return this.editMode ? this.editFactorRatings : this.productFactorRatings[productId] || {};
+    }
+    setFactorRatingsForProduct(productId, ratings) {
+        if (this.editMode) {
+            this.editFactorRatings = ratings;
+            return;
+        }
+        this.productFactorRatings = { ...this.productFactorRatings, [productId]: ratings };
+    }
+    markExistingFactorRatingsAsUserFilled(productId, factorRatings) {
+        const factors = this.productReviewFactors[productId] || [];
+        const userFilled = new Set();
+        factors.forEach((factor, index) => {
+            const key = this.getFactorKey(factor, index);
+            const byId = factor.id !== undefined ? factorRatings[String(factor.id)] : undefined;
+            const byName = factor.name ? factorRatings[factor.name.trim()] : undefined;
+            const byIndex = factorRatings[`__index_${index}`];
+            if (byId !== undefined || byName !== undefined || byIndex !== undefined) {
+                userFilled.add(key);
+            }
+        });
+        this.userFilledFactorKeys[productId] = userFilled;
+    }
+    shouldAutofillFactors(mainRating) {
+        return mainRating === 4 || mainRating === 5;
+    }
+    autofillUnfilledFactors(productId, mainRating) {
+        const factors = this.productReviewFactors[productId] || [];
+        if (!factors.length) {
+            return;
+        }
+        const userFilled = this.userFilledFactorKeys[productId] || new Set();
+        const currentRatings = { ...this.getFactorRatingsForProduct(productId) };
+        const shouldAutofill = this.shouldAutofillFactors(mainRating);
+        let updated = false;
+        factors.forEach((factor, index) => {
+            const key = this.getFactorKey(factor, index);
+            if (userFilled.has(key)) {
+                return;
+            }
+            if (shouldAutofill) {
+                if (factor.id !== undefined) {
+                    currentRatings[String(factor.id)] = mainRating;
+                }
+                if (factor.name) {
+                    currentRatings[factor.name.trim()] = mainRating;
+                }
+                currentRatings[`__index_${index}`] = mainRating;
+                updated = true;
+                return;
+            }
+            if (factor.id !== undefined && currentRatings[String(factor.id)] !== undefined) {
+                delete currentRatings[String(factor.id)];
+                updated = true;
+            }
+            if (factor.name && currentRatings[factor.name.trim()] !== undefined) {
+                delete currentRatings[factor.name.trim()];
+                updated = true;
+            }
+            if (currentRatings[`__index_${index}`] !== undefined) {
+                delete currentRatings[`__index_${index}`];
+                updated = true;
+            }
+        });
+        if (updated) {
+            this.setFactorRatingsForProduct(productId, currentRatings);
+        }
+    }
+    handleMainRatingChange(productId, rating) {
+        if (this.editMode) {
+            this.editMainRating = rating;
+        }
+        else {
+            this.productMainRatings = { ...this.productMainRatings, [productId]: rating };
+        }
+        this.autofillUnfilledFactors(productId, rating);
+    }
+    handleFactorRatingChange(productId, factorKey, rating) {
+        if (!this.userFilledFactorKeys[productId]) {
+            this.userFilledFactorKeys[productId] = new Set();
+        }
+        this.userFilledFactorKeys[productId].add(factorKey);
+        const factors = this.productReviewFactors[productId] || [];
+        const factorIndex = factors.findIndex((factor, index) => this.getFactorKey(factor, index) === factorKey);
+        if (factorIndex < 0) {
+            return;
+        }
+        const factor = factors[factorIndex];
+        const currentRatings = { ...this.getFactorRatingsForProduct(productId) };
+        if (factor.id !== undefined) {
+            currentRatings[String(factor.id)] = rating;
+        }
+        if (factor.name) {
+            currentRatings[factor.name.trim()] = rating;
+        }
+        currentRatings[`__index_${factorIndex}`] = rating;
+        this.setFactorRatingsForProduct(productId, currentRatings);
+    }
+    setupProductRatingAutofill(container, productId) {
+        if (!container || this.boundRatingRows.has(container)) {
+            return;
+        }
+        this.boundRatingRows.add(container);
+        container.addEventListener('click', event => {
+            const target = event.target;
+            if (!target.closest('.s-rating-stars-btn-star')) {
+                return;
+            }
+            const mainRow = target.closest('.s-rating-modal-product-rating-row-main');
+            const factorRow = target.closest('.s-rating-modal-product-factor-row');
+            requestAnimationFrame(() => {
+                if (mainRow && container.contains(mainRow)) {
+                    const rating = Number(this.getRatingHiddenInput(mainRow)?.value);
+                    if (rating > 0) {
+                        this.handleMainRatingChange(productId, rating);
+                    }
+                    return;
+                }
+                if (factorRow && container.contains(factorRow)) {
+                    const factorKey = factorRow.getAttribute('data-factor-key');
+                    const rating = Number(this.getRatingHiddenInput(factorRow)?.value);
+                    if (factorKey && rating > 0) {
+                        this.handleFactorRatingChange(productId, factorKey, rating);
+                    }
+                }
+            });
+        });
+    }
+    buildEditFactorRatings(productId) {
+        const factorReviews = this.getEditFactorReviewsList(productId);
+        return factorReviews.reduce((acc, factor, index) => {
+            const rating = Number(factor?.rating ?? factor?.stars ?? factor?.value);
+            if (Number.isNaN(rating)) {
+                return acc;
+            }
+            const factorId = factor?.id ?? factor?.factor_id;
+            if (factorId !== undefined && factorId !== null && factorId !== '') {
+                acc[String(factorId)] = rating;
+            }
+            if (factor?.name) {
+                acc[factor.name.trim()] = rating;
+            }
+            acc[`__index_${index}`] = rating;
+            return acc;
+        }, {});
+    }
+    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" }, 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 => {
+                this.productImages = {
+                    ...this.productImages,
+                    [item.product.id]: [...(this.productImages[item.product.id] || []), e.detail],
+                };
+                this.hiddenInputs[index].value = this.productImages[item.product.id]
+                    .map(img => img.url)
+                    .join(',');
+            }, onRemoved: e => {
+                const removedId = e.detail;
+                if (!removedId || !this.productImages[item.product.id])
+                    return;
+                this.productImages = {
+                    ...this.productImages,
+                    [item.product.id]: this.productImages[item.product.id].filter(img => img.id !== removedId),
+                };
+                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))))));
+    }
+    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;
+            const byIndex = factorRatings[`__index_${factorIndex}`];
+            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 ||
+                typeof getPrefilledFactorRating(factor, factorIndex) === 'number', withLabel: true, labelBeforeStars: true, tag: false }))))));
+    }
+    handleSendEmail() {
+        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() {
+        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');
+    }
+    resetData(isOpen) {
+        if (isOpen.detail) {
+            return;
+        }
+        this.clearThanksCountdown();
+        this.modal?.close();
+        this.editItem = null;
+        this.editItemImages = [];
+        this.editFactorRatings = {};
+        this.productMainRatings = {};
+        this.productFactorRatings = {};
+        this.editMainRating = undefined;
+        this.userFilledFactorKeys = {};
+        this.hiddenInputs[1] && (this.hiddenInputs[1].value = '');
+        this.deleteFeedbackId = null;
+        this.editFeedbackId = null;
+        this.shouldOpenDeleteModal = false;
+        this.editMode = false;
+        this.deleteMode = false;
+        this.defaultMode = false;
+        this.currentIndex = 0;
+        this.submitted = [];
+        this.scheduleWizardSetup = false;
+    }
+    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)))));
+    }
+    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,
+        })));
+    }
+    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" }, 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 => {
+                this.editItemImages = [
+                    ...this.editItemImages,
+                    e.detail,
+                ];
+                this.hiddenInputs[1].value = this.editItemImages.map(img => img.url).join();
+            }, 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)))));
+    }
+    render() {
+        if (this.deleteMode) {
+            return h(Host, { class: "s-rating-modal" }, this.getDeleteModal());
+        }
+        if (this.editMode) {
+            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) }))),
+                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("salla-placeholder", { alignment: "center" })))));
+        }
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        this.syncStoreSettings();
+    }
+    componentDidRender() {
+        if (!this.scheduleWizardSetup || !this.defaultMode || !this.order) {
+            return;
+        }
+        this.scheduleWizardSetup = false;
+        requestAnimationFrame(() => this.handleWizard());
+    }
+    disconnectedCallback() {
+        this.clearThanksCountdown();
+    }
+    static get is() { return "salla-rating-modal-v2"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-rating-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-rating-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orderId": {
+                "type": "number",
+                "attribute": "order-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The order id, to rate on its products & shipping"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "order": {},
+            "hasError": {},
+            "showContactWidget": {},
+            "errorMessage": {},
+            "images": {},
+            "productImages": {},
+            "editItemImages": {},
+            "productReviewFactors": {},
+            "editFactorRatings": {},
+            "productMainRatings": {},
+            "productFactorRatings": {},
+            "editMainRating": {},
+            "contact_body": {},
+            "editMode": {},
+            "defaultMode": {},
+            "deleteMode": {},
+            "shouldOpenDeleteModal": {},
+            "editType": {},
+            "editFeedbackId": {},
+            "deleteFeedbackId": {},
+            "editItem": {},
+            "allowAttachImages": {},
+            "allowContactSupport": {}
+        };
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<unknown>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    },
+                    "return": "Promise<unknown>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openEditModal": {
+                "complexType": {
+                    "signature": "(params: { type: \"product\" | \"store\" | \"shipping\"; feedback_id: number; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "params",
+                            "type": "{ type: \"product\" | \"store\" | \"shipping\"; feedback_id: number; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openDeleteModal": {
+                "complexType": {
+                    "signature": "(params: any) => Promise<unknown>",
+                    "parameters": [{
+                            "name": "params",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<unknown>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement>"
+                },
+                "docs": {
+                    "text": "Show the rating modal",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}