@salla.sa/twilight-components 2.14.493 → 2.14.495

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

@@ -23,7 +23,7 @@ var ShippingFast = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaRatingModalCss = ".s-rating-modal-product-details{padding-bottom:0.5rem}.s-rating-modal-comment{margin-top:0.35rem}.s-rating-modal-product{margin-bottom:1rem}.s-rating-modal-product-img{display:block;width:100%;height:100%;object-fit:cover}.s-rating-modal-product-title{font-size:0.95rem;font-weight:600;line-height:1.5;margin:0}.s-rating-modal-stars-product{margin-top:0.5rem}.s-rating-modal-product-details-main{display:flex;align-items:center;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-info-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-main-review{width:100%;text-align:right}.s-rating-modal-product-rating-rows{display:grid;gap:0.45rem;margin:0.2rem 0 0.7rem}.s-rating-modal-product-rating-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:2rem}.s-rating-modal-product-rating-row salla-rating-stars{flex-shrink:0}.s-rating-modal-product-rating-row .s-rating-stars-wrapper{align-items:center;min-height:1.75rem}.s-rating-modal-product-rating-row .s-rating-stars-label,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag{min-width:auto;min-height:1.25rem;line-height:1.25rem;font-size:0.8rem;color:#5b6470;white-space:nowrap;text-align:end;transition:opacity 0.15s ease}.s-rating-modal-product-rating-row .s-rating-stars-label--empty,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag--empty{opacity:0}.s-rating-modal-product-rating-row-main{margin-bottom:0.35rem;padding:0.5rem 0.6rem;border:1px solid #d1d5db;border-radius:0.45rem;background:transparent}.s-rating-modal-product-factor-name{color:#5b6470;font-size:0.9rem;line-height:1.25}.s-rating-modal-product-rating-row-main .s-rating-modal-product-factor-name{font-size:1rem;color:#5b6470}.s-rating-modal-product-factor-required{color:#f87171;margin-inline-start:0.2rem}.s-rating-modal-product-img-wrap{width:5rem;min-width:5rem;height:3.5rem;flex-shrink:0;overflow:hidden;border-radius:0.375rem;background:#f3f4f6}.s-rating-modal-uploader.is-opened{height:auto !important;opacity:1 !important;overflow:visible !important;pointer-events:auto !important;margin-bottom:1rem}";
+const sallaRatingModalCss = ".s-rating-modal-product-details{padding-bottom:0.5rem}.s-rating-modal-comment{margin-top:0.35rem}.s-rating-modal-product{margin-bottom:1rem}.s-rating-modal-product-img{display:block;width:100%;height:100%;object-fit:cover}.s-rating-modal-product-title{font-size:0.95rem;font-weight:600;line-height:1.5;margin:0}.s-rating-modal-stars-product{margin-top:0.5rem}.s-rating-modal-loyalty-points-note-container{display:flex;align-items:center;gap:0.625rem;width:100%;margin-top:1.5rem;margin-bottom:0.75rem;padding:0.75rem;border-radius:0.5rem;background-color:#E6F4EA}.s-rating-modal-loyalty-points-note-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:#1B7F5C}.s-rating-modal-loyalty-points-note-icon svg{width:1.5rem;height:1.5rem;fill:currentColor}.s-rating-modal-loyalty-points-note-text{flex:1;margin:0;font-size:0.875rem;line-height:1.25rem;color:#1f2937}.s-rating-modal-product-details-main{display:flex;align-items:center;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-info-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-main-review{width:100%;text-align:right}.s-rating-modal-product-rating-rows{display:grid;gap:0.45rem;margin:0.2rem 0 0.7rem}.s-rating-modal-product-rating-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:2rem}.s-rating-modal-product-rating-row salla-rating-stars{flex-shrink:0}.s-rating-modal-product-rating-row .s-rating-stars-wrapper{align-items:center;min-height:1.75rem}.s-rating-modal-product-rating-row .s-rating-stars-label,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag{min-width:auto;min-height:1.25rem;line-height:1.25rem;font-size:0.8rem;color:#5b6470;white-space:nowrap;text-align:end;transition:opacity 0.15s ease}.s-rating-modal-product-rating-row .s-rating-stars-label--empty,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag--empty{opacity:0}.s-rating-modal-product-rating-row-main{margin-bottom:0.35rem;padding:0.5rem 0.6rem;border:1px solid #d1d5db;border-radius:0.45rem;background:transparent}.s-rating-modal-product-factor-name{color:#5b6470;font-size:0.9rem;line-height:1.25}.s-rating-modal-product-rating-row-main .s-rating-modal-product-factor-name{font-size:1rem;color:#5b6470}.s-rating-modal-product-factor-required{color:#f87171;margin-inline-start:0.2rem}.s-rating-modal-product-img-wrap{width:5rem;min-width:5rem;height:3.5rem;flex-shrink:0;overflow:hidden;border-radius:0.375rem;background:#f3f4f6}.s-rating-modal-uploader.is-opened{height:auto !important;opacity:1 !important;overflow:visible !important;pointer-events:auto !important;margin-bottom:1rem}";
 
 const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingModalV2 extends HTMLElement {
     constructor() {
@@ -46,6 +46,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         this.editItem = null;
         this.allowAttachImages = false;
         this.allowContactSupport = false;
+        this.loyaltyImageRatingPoints = 0;
         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');
@@ -60,6 +61,9 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         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.loyaltyPointsForImagesLabel = salla.lang.get('pages.rating.loyalty_points_for_images', {
+            points: ':points',
+        });
         this.contentRefs = [];
         this.hiddenInputs = [];
         this.userFilledFactorKeys = {};
@@ -107,6 +111,8 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
                 await setNestedAsync('en.trans', 'pages.rating.rate_required_factors', 'Please rate all required factors to complete your review.');
                 await setNestedAsync('ar.trans', 'pages.rating.overall_product_rating', 'التقييم العام للمنتج');
                 await setNestedAsync('en.trans', 'pages.rating.overall_product_rating', 'Overall product rating');
+                await setNestedAsync('ar.trans', 'pages.rating.loyalty_points_for_images', 'اكسب :points نقطة ولاء عند إضافة صور لتقييمك!');
+                await setNestedAsync('en.trans', 'pages.rating.loyalty_points_for_images', 'Earn :points loyalty points when adding photos to your review!');
                 this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
                 this.allowedImagesTypesLabel = salla.lang.get('common.uploader.allowed_images_types');
                 this.threeImagesMax = salla.lang.get('common.uploader.max_three_images');
@@ -120,6 +126,9 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
                 this.confirmDeleteBtn = salla.lang.get('common.elements.confirm_delete');
                 this.requiredFactorsLabel = salla.lang.get('pages.rating.rate_required_factors');
                 this.overallProductRatingLabel = salla.lang.get('pages.rating.overall_product_rating');
+                this.loyaltyPointsForImagesLabel = salla.lang.get('pages.rating.loyalty_points_for_images', {
+                    points: ':points',
+                });
                 this.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_body', { store, id, customer });
             };
             setTranslations();
@@ -287,6 +296,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
                         this.order = res.data;
                         this.productReviewFactors = await this.fetchAllProductReviewFactors(res.data);
                     }))
+                    .then(() => this.readyUpLoyaltyPoints())
                     .then(() => this.modal.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">(#${this.order.id})</span>`))
                     .then(() => {
                     // Initialize productImages for all products
@@ -317,6 +327,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         this.editFeedbackId = params.feedback_id;
         try {
             await this.fetchEditItem(params.feedback_id);
+            await this.readyUpLoyaltyPoints();
             if (this.editType === 'product' && this.editItem?.product?.id) {
                 await this.loadCustomerOrderForEdit();
                 await this.ensureProductFactorsLoaded(this.editItem.product.id);
@@ -643,6 +654,24 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         let lasName = salla.config.get('user.last_name') || salla.storage.get('user.last_name') || '';
         return `${firstName} ${lasName}`;
     }
+    async readyUpLoyaltyPoints() {
+        const featureEnabled = salla.loyalty?.isFeatureEnabled?.();
+        if (!featureEnabled) {
+            this.loyaltyImageRatingPoints = 0;
+            return;
+        }
+        const rating_product_points = salla.config.get('store.settings.rating.rating_product_points') || 0;
+        const rating_product_with_image_points = salla.config.get('store.settings.rating.rating_product_with_image_points') || 0;
+        this.loyaltyImageRatingPoints =
+            Number(rating_product_with_image_points) + Number(rating_product_points);
+    }
+    loyaltyPointsNote() {
+        if (!this.loyaltyImageRatingPoints || !this.loyaltyPointsForImagesLabel) {
+            return null;
+        }
+        const svgIcon = (h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10 0C13.6819 0 16.6667 2.98477 16.6667 6.66664C16.6667 9.37047 15.057 11.6984 12.7437 12.7444C11.6978 15.0575 9.3701 16.6666 6.66668 16.6666C2.98477 16.6666 0 13.6819 0 9.99998C0 7.29656 1.60918 4.96894 3.92195 3.92276C4.96827 1.60964 7.29618 0 10 0ZM6.66668 5C3.90524 5 1.66667 7.23856 1.66667 9.99998C1.66667 12.7614 3.90524 15 6.66668 15C9.4281 15 11.6667 12.7614 11.6667 9.99998C11.6667 7.23856 9.4281 5 6.66668 5ZM7.50002 5.83333V6.66664H9.16668V8.33331H5.83333C5.60322 8.33331 5.41667 8.51989 5.41667 8.74998C5.41667 8.95456 5.56407 9.12464 5.75844 9.15998L5.83333 9.16664H7.50002C8.6506 9.16664 9.58335 10.0994 9.58335 11.25C9.58335 12.4006 8.6506 13.3333 7.50002 13.3333V14.1666H5.83333V13.3333H4.16667V11.6666H7.50002C7.7301 11.6666 7.91668 11.4801 7.91668 11.25C7.91668 11.0455 7.76927 10.8753 7.57493 10.8401L7.50002 10.8333H5.83333C4.68274 10.8333 3.75 9.90056 3.75 8.74998C3.75 7.59939 4.68274 6.66664 5.83333 6.66664V5.83333H7.50002ZM10 1.66667C8.51377 1.66667 7.17893 2.31513 6.26313 3.34457C6.39704 3.33736 6.53138 3.33333 6.66668 3.33333C10.3486 3.33333 13.3333 6.3181 13.3333 9.99998C13.3333 10.1356 13.3293 10.2702 13.3213 10.4037C14.3513 9.48814 15 8.15314 15 6.66664C15 3.90524 12.7614 1.66667 10 1.66667Z", fill: "#008C56" })));
+        return (h("div", { class: "s-rating-modal-loyalty-points-note-container" }, h("span", { class: "s-rating-modal-loyalty-points-note-icon" }, svgIcon), h("p", { class: "s-rating-modal-loyalty-points-note-text" }, this.loyaltyPointsForImagesLabel.replace(':points', String(this.loyaltyImageRatingPoints)))));
+    }
     normalizeReviewFactorsPayload(payload) {
         const data = payload?.data ?? payload?.factors;
         if (!Array.isArray(data)) {
@@ -921,7 +950,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         }, {});
     }
     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 => {
+        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 => {
                 this.productImages = {
                     ...this.productImages,
                     [item.product.id]: [...(this.productImages[item.product.id] || []), e.detail],
@@ -997,6 +1026,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         this.currentIndex = 0;
         this.submitted = [];
         this.scheduleWizardSetup = false;
+        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)))));
@@ -1012,7 +1042,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         })));
     }
     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, {
+        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, {
             fieldPrefix: '',
             mainRating: this.editMainRating ?? Number(this.editItem.stars ?? this.editItem.rating),
             factorRatings: this.editFactorRatings,
@@ -1091,6 +1121,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         "editItem": [32],
         "allowAttachImages": [32],
         "allowContactSupport": [32],
+        "loyaltyImageRatingPoints": [32],
         "open": [64],
         "openEditModal": [64],
         "openDeleteModal": [64],

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

@@ -2,14 +2,14 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { W as WishListIcon } from './star.js';
-import { d as defineCustomElement$4, S as ShippingFast } from './salla-rating-modal-v22.js';
+import { a as anime } from './anime.es.js';
 import { C as CheckCircle2 } from './check-circle2.js';
-import { H as Helper } from './Helper.js';
 import { I as ImageIcon } from './image.js';
-import { W as WhatsappIcon } from './whatsapp2.js';
 import { M as MailIcon } from './mail.js';
-import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$4, S as ShippingFast } from './salla-rating-modal-v22.js';
+import { W as WishListIcon } from './star.js';
+import { W as WhatsappIcon } from './whatsapp2.js';
+import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$9 } from './salla-button2.js';
 import { d as defineCustomElement$8 } from './salla-file-upload2.js';
 import { d as defineCustomElement$7 } from './salla-loading2.js';
@@ -18,7 +18,7 @@ import { d as defineCustomElement$5 } from './salla-placeholder2.js';
 import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
-const sallaRatingModalCss = ".s-rating-modal-product-details{padding-bottom:0.5rem}.s-rating-modal-comment{margin-top:0.35rem}.s-rating-modal-product{margin-bottom:1rem}.s-rating-modal-product-img{display:block;width:100%;height:100%;object-fit:cover}.s-rating-modal-product-title{font-size:0.95rem;font-weight:600;line-height:1.5;margin:0}.s-rating-modal-stars-product{margin-top:0.5rem}.s-rating-modal-product-details-main{display:flex;align-items:center;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-info-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-main-review{width:100%;text-align:right}.s-rating-modal-product-rating-rows{display:grid;gap:0.45rem;margin:0.2rem 0 0.7rem}.s-rating-modal-product-rating-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:2rem}.s-rating-modal-product-rating-row salla-rating-stars{flex-shrink:0}.s-rating-modal-product-rating-row .s-rating-stars-wrapper{align-items:center;min-height:1.75rem}.s-rating-modal-product-rating-row .s-rating-stars-label,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag{min-width:auto;min-height:1.25rem;line-height:1.25rem;font-size:0.8rem;color:#5b6470;white-space:nowrap;text-align:end;transition:opacity 0.15s ease}.s-rating-modal-product-rating-row .s-rating-stars-label--empty,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag--empty{opacity:0}.s-rating-modal-product-rating-row-main{margin-bottom:0.35rem;padding:0.5rem 0.6rem;border:1px solid #d1d5db;border-radius:0.45rem;background:transparent}.s-rating-modal-product-factor-name{color:#5b6470;font-size:0.9rem;line-height:1.25}.s-rating-modal-product-rating-row-main .s-rating-modal-product-factor-name{font-size:1rem;color:#5b6470}.s-rating-modal-product-factor-required{color:#f87171;margin-inline-start:0.2rem}.s-rating-modal-product-img-wrap{width:5rem;min-width:5rem;height:3.5rem;flex-shrink:0;overflow:hidden;border-radius:0.375rem;background:#f3f4f6}.s-rating-modal-uploader.is-opened{height:auto !important;opacity:1 !important;overflow:visible !important;pointer-events:auto !important;margin-bottom:1rem}";
+const sallaRatingModalCss = ".s-rating-modal-product-details{padding-bottom:0.5rem}.s-rating-modal-comment{margin-top:0.35rem}.s-rating-modal-product{margin-bottom:1rem}.s-rating-modal-product-img{display:block;width:100%;height:100%;object-fit:cover}.s-rating-modal-product-title{font-size:0.95rem;font-weight:600;line-height:1.5;margin:0}.s-rating-modal-stars-product{margin-top:0.5rem}.s-rating-modal-loyalty-points-note-container{display:flex;align-items:center;gap:0.625rem;width:100%;margin-top:1.5rem;margin-bottom:0.75rem;padding:0.75rem;border-radius:0.5rem;background-color:#E6F4EA}.s-rating-modal-loyalty-points-note-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:#1B7F5C}.s-rating-modal-loyalty-points-note-icon svg{width:1.5rem;height:1.5rem;fill:currentColor}.s-rating-modal-loyalty-points-note-text{flex:1;margin:0;font-size:0.875rem;line-height:1.25rem;color:#1f2937}.s-rating-modal-product-details-main{display:flex;align-items:center;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-info-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-main-review{width:100%;text-align:right}.s-rating-modal-product-rating-rows{display:grid;gap:0.45rem;margin:0.2rem 0 0.7rem}.s-rating-modal-product-rating-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:2rem}.s-rating-modal-product-rating-row salla-rating-stars{flex-shrink:0}.s-rating-modal-product-rating-row .s-rating-stars-wrapper{align-items:center;min-height:1.75rem}.s-rating-modal-product-rating-row .s-rating-stars-label,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag{min-width:auto;min-height:1.25rem;line-height:1.25rem;font-size:0.8rem;color:#5b6470;white-space:nowrap;text-align:end;transition:opacity 0.15s ease}.s-rating-modal-product-rating-row .s-rating-stars-label--empty,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag--empty{opacity:0}.s-rating-modal-product-rating-row-main{margin-bottom:0.35rem;padding:0.5rem 0.6rem;border:1px solid #d1d5db;border-radius:0.45rem;background:transparent}.s-rating-modal-product-factor-name{color:#5b6470;font-size:0.9rem;line-height:1.25}.s-rating-modal-product-rating-row-main .s-rating-modal-product-factor-name{font-size:1rem;color:#5b6470}.s-rating-modal-product-factor-required{color:#f87171;margin-inline-start:0.2rem}.s-rating-modal-product-img-wrap{width:5rem;min-width:5rem;height:3.5rem;flex-shrink:0;overflow:hidden;border-radius:0.375rem;background:#f3f4f6}.s-rating-modal-uploader.is-opened{height:auto !important;opacity:1 !important;overflow:visible !important;pointer-events:auto !important;margin-bottom:1rem}";
 
 const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal extends HTMLElement {
     constructor() {
@@ -35,6 +35,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         this.deleteMode = false;
         this.shouldOpenDeleteModal = false;
         this.editItem = null;
+        this.loyaltyImageRatingPoints = 0;
         this.enableNewPopUp = false;
         this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
         this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
@@ -50,6 +51,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         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.loyaltyPointsForImagesLabel = salla.lang.get('pages.rating.loyalty_points_for_images', { points: ':points' });
         this.allowAttachImages = salla.config.get('store.settings.rating.allow_attach_images');
         this.allowContactSupport = salla.config.get('store.settings.rating.allow_contact_support');
         this.contentRefs = [];
@@ -124,6 +126,8 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
                 await setNestedAsync('en.trans', 'pages.rating.review_deleted_successfully', 'The review has been successfully deleted.');
                 await setNestedAsync('ar.trans', 'pages.rating.images_count', 'الصور ( :current من أصل :total )');
                 await setNestedAsync('en.trans', 'pages.rating.images_count', 'Images ( :current of :total )');
+                await setNestedAsync('ar.trans', 'pages.rating.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!');
                 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', 'تأكيد الحذف');
@@ -141,6 +145,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
                 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.loyaltyPointsForImagesLabel = salla.lang.get('pages.rating.loyalty_points_for_images', { points: ':points' });
                 this.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_body', { store, id, customer });
             };
             setTranslations();
@@ -165,6 +170,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         return new Promise((resolve) => {
             setTimeout(() => {
                 this.modal.open().then(() => this.order || salla.api.withoutNotifier(() => salla.rating.api.order(this.orderId ? this.orderId : salla.config.get('page.id'))).then(res => this.order = res.data))
+                    .then(() => this.readyUpLoyaltyPoints())
                     .then(() => this.modal.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">(#${this.order.id})</span>`))
                     .then(() => {
                     // Initialize productImages for all products
@@ -201,6 +207,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         this.editFeedbackId = params.feedback_id;
         try {
             await this.fetchEditItem(params.feedback_id);
+            await this.readyUpLoyaltyPoints();
             this.editModal.open();
         }
         catch (e) {
@@ -405,6 +412,24 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         this.editMode = false;
         this.deleteMode = false;
         this.defaultMode = false;
+        this.loyaltyImageRatingPoints = 0;
+    }
+    async readyUpLoyaltyPoints() {
+        const featureEnabled = salla.loyalty?.isFeatureEnabled?.();
+        if (!featureEnabled) {
+            this.loyaltyImageRatingPoints = 0;
+            return;
+        }
+        const rating_product_points = salla.config.get('store.settings.rating.rating_product_points') || 0;
+        const rating_product_with_image_points = salla.config.get('store.settings.rating.rating_product_with_image_points') || 0;
+        this.loyaltyImageRatingPoints = Number(rating_product_with_image_points) + Number(rating_product_points);
+    }
+    loyaltyPointsNote() {
+        if (!this.loyaltyImageRatingPoints || !this.loyaltyPointsForImagesLabel) {
+            return null;
+        }
+        const svgIcon = (h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10 0C13.6819 0 16.6667 2.98477 16.6667 6.66664C16.6667 9.37047 15.057 11.6984 12.7437 12.7444C11.6978 15.0575 9.3701 16.6666 6.66668 16.6666C2.98477 16.6666 0 13.6819 0 9.99998C0 7.29656 1.60918 4.96894 3.92195 3.92276C4.96827 1.60964 7.29618 0 10 0ZM6.66668 5C3.90524 5 1.66667 7.23856 1.66667 9.99998C1.66667 12.7614 3.90524 15 6.66668 15C9.4281 15 11.6667 12.7614 11.6667 9.99998C11.6667 7.23856 9.4281 5 6.66668 5ZM7.50002 5.83333V6.66664H9.16668V8.33331H5.83333C5.60322 8.33331 5.41667 8.51989 5.41667 8.74998C5.41667 8.95456 5.56407 9.12464 5.75844 9.15998L5.83333 9.16664H7.50002C8.6506 9.16664 9.58335 10.0994 9.58335 11.25C9.58335 12.4006 8.6506 13.3333 7.50002 13.3333V14.1666H5.83333V13.3333H4.16667V11.6666H7.50002C7.7301 11.6666 7.91668 11.4801 7.91668 11.25C7.91668 11.0455 7.76927 10.8753 7.57493 10.8401L7.50002 10.8333H5.83333C4.68274 10.8333 3.75 9.90056 3.75 8.74998C3.75 7.59939 4.68274 6.66664 5.83333 6.66664V5.83333H7.50002ZM10 1.66667C8.51377 1.66667 7.17893 2.31513 6.26313 3.34457C6.39704 3.33736 6.53138 3.33333 6.66668 3.33333C10.3486 3.33333 13.3333 6.3181 13.3333 9.99998C13.3333 10.1356 13.3293 10.2702 13.3213 10.4037C14.3513 9.48814 15 8.15314 15 6.66664C15 3.90524 12.7614 1.66667 10 1.66667Z", fill: "#008C56" })));
+        return (h("div", { class: "s-rating-modal-loyalty-points-note-container" }, h("span", { class: "s-rating-modal-loyalty-points-note-icon" }, svgIcon), h("p", { class: "s-rating-modal-loyalty-points-note-text" }, this.loyaltyPointsForImagesLabel.replace(':points', String(this.loyaltyImageRatingPoints)))));
     }
     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)))));
@@ -417,7 +442,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
     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-img-wrap" }, h("img", { src: this.editItem.product.image.url, alt: this.editItem.product.name, class: "s-rating-modal-product-img" })), h("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-details-main" }, h("div", null, h("h3", { class: "s-rating-modal-product-title" }, " ", this.editItem.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { withLabel: true, size: "small", editable: true, value: this.editItem.stars }))), this.allowAttachImages && h("salla-button", { class: "s-comments-item-like-btn mt-0", loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleUploader(1) }, h("span", null, this.editItemImages.length ? this.editImagesLabel : this.addImagesLabel), h("span", { innerHTML: ImageIcon }))), h("textarea", { value: this.editItem.content, placeholder: salla.lang.get('pages.rating.write_product_rate'), name: "content", class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-closed", 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("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-img-wrap" }, h("img", { src: this.editItem.product.image.url, alt: this.editItem.product.name, class: "s-rating-modal-product-img" })), h("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-details-main" }, h("div", null, h("h3", { class: "s-rating-modal-product-title" }, " ", this.editItem.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { withLabel: true, size: "small", editable: true, value: this.editItem.stars }))), this.allowAttachImages && h("salla-button", { class: "s-comments-item-like-btn mt-0", loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleUploader(1) }, h("span", null, this.editItemImages.length ? this.editImagesLabel : this.addImagesLabel), h("span", { innerHTML: ImageIcon }))), h("textarea", { value: this.editItem.content, placeholder: salla.lang.get('pages.rating.write_product_rate'), name: "content", class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-closed", 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) => {
@@ -444,7 +469,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
                 ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order?.testimonials_enabled ?
                         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.order.products_enabled
-                        ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "s-rating-modal-product", key: index }, h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, 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("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-details-main" }, h("div", null, h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { withLabel: true, size: "small", name: `products[${index}][rating]` }))), this.allowAttachImages && h("salla-button", { class: "s-comments-item-like-btn mt-0", loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleUploader(index) }, h("span", null, this.addImagesLabel), h("span", { innerHTML: ImageIcon }))), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-closed", 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) => {
+                        ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.allowAttachImages && this.loyaltyPointsNote(), this.order.products.map((item, index) => h("div", { class: "s-rating-modal-product", key: index }, h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, 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("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-details-main" }, h("div", null, h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { withLabel: true, size: "small", name: `products[${index}][rating]` }))), this.allowAttachImages && h("salla-button", { class: "s-comments-item-like-btn mt-0", loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleUploader(index) }, h("span", null, this.addImagesLabel), h("span", { innerHTML: ImageIcon }))), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-closed", 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]
@@ -498,6 +523,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         "editFeedbackId": [32],
         "deleteFeedbackId": [32],
         "editItem": [32],
+        "loyaltyImageRatingPoints": [32],
         "enableNewPopUp": [32],
         "open": [64],
         "close": [64]

package/dist/components/salla-reward-action2.js

@@ -3,8 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as closeModals } from './functions.js';
+import { d as defineCustomElement$1 } from './salla-button2.js';
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 const SallaRewardAction = /*@__PURE__*/ proxyCustomElement(class SallaRewardAction extends HTMLElement {
     constructor() {
@@ -32,10 +33,7 @@ const SallaRewardAction = /*@__PURE__*/ proxyCustomElement(class SallaRewardActi
         if (!this.isClickable(this.prize)) {
             return null;
         }
-        return (h("div", { class: "s-loyalty-program-rewards-modal-action" }, this.isShopNow(this.prize) ? (h("a", { href: this.prize.prize_url || salla.url.get(''), class: {
-                's-loyalty-program-rewards-action-base': true,
-                's-loyalty-program-rewards-action-on': true,
-            } }, salla.lang.get('pages.loyalty_program.shop_now'))) : (h("button", { onClick: this.handleClick, class: {
+        return (h("div", { class: "s-loyalty-program-rewards-modal-action" }, this.isShopNow(this.prize) ? (h("salla-button", { fill: "outline", color: "light", class: "s-loyalty-program-rewards-action-base", onClick: () => closeModals() }, salla.lang.get('common.elements.cancel'))) : (h("button", { onClick: this.handleClick, class: {
                 's-loyalty-program-rewards-action-base': true,
                 's-loyalty-program-rewards-action-on': true,
             } }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
@@ -48,13 +46,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-reward-action"];
+    const components = ["salla-reward-action", "salla-button"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-reward-action":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaRewardAction);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/components/salla-reward-card2.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loyaltyProgramIcon } from './gift.js';
 import { d as defineCustomElement$1 } from './salla-badge2.js';
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 const SallaRewardCard = /*@__PURE__*/ proxyCustomElement(class SallaRewardCard extends HTMLElement {
     constructor() {
@@ -15,7 +15,7 @@ const SallaRewardCard = /*@__PURE__*/ proxyCustomElement(class SallaRewardCard e
         this.actionClick = createEvent(this, "actionClick", 7);
     }
     render() {
-        return (h(Host, { key: 'b27c707b6ac03d037d2f019131a654bcda65dd6e', class: "s-loyalty-program-reward-host" }, h("div", { key: '9606c3ad2ea7ead1f4ab2db8e148a90d43c69902', class: "s-loyalty-program-reward-container" }, h("div", { key: 'f7b6f60847b86dbb6f2b05209ab2db8eabbbd931', onClick: (e) => this.areaClick.emit(e), role: "button" }, h("div", { key: '6cd912d2c6b5c2b12ab5b4ba431ca0c965d0518b', class: "s-loyalty-program-reward-img" }, h("img", { key: 'b4f844fe1064b8ca6f5666765d92a7924fe2ad74', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), h("div", { key: 'fd61d1ff64f2097fe2f696dacbb57f6c84db5339', class: "s-loyalty-program-reward-content" }, h("div", { key: 'fa1d404d5b02fe0027cef018f2eeb6e0bd109c2c', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '29dad65f9b1f41a1698da49d113a0f9b0086210e', size: "xs" }, h("span", { key: '99526fabe82feef8ef777bfbcde868399c44e2db', innerHTML: loyaltyProgramIcon }), h("span", { key: '94a3ed106aad1b14438227d8914695b1a18e8f64', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '1e8e12541bfd7acd303f89008f2e48c9f183c83a', class: "s-loyalty-program-reward-title" }, h("span", { key: '746377627b01443a712a52f1016c29b41eaa1ad5' }, this.prize.group_title)), h("div", { key: '1f09736c18b0be21b67e1713a44f94722bbdb09d', class: "s-loyalty-program-reward-name" }, h("div", { key: '18c26f3fe19b4e6ff28bda4d18cdb253f795792b', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), h("div", { key: '7a814db57ae3bfad6aaba12cdab17b0e900e9080', class: "p-4" }, h("slot", { key: '0ce627f221262d54f4cda4d1a50cb2d1a6197d06', name: "action" }, h("button", { key: '10f0e39d0ecc79d84674efb0a7389430da979160', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
+        return (h(Host, { key: '9b1eecb431ab26fc6bfbd89d511294a230dd2aa9', class: "s-loyalty-program-reward-host" }, h("div", { key: '0793104978291566c136eb0e5b841224f97f25b6', class: "s-loyalty-program-reward-container" }, h("div", { key: 'f4572e5480d51f041af3e3b95bdfcc3a952c395e', onClick: (e) => this.areaClick.emit(e), role: "button" }, h("div", { key: 'ba3e6d1583219bfba80903d8b45a02c6f862efd2', class: "s-loyalty-program-reward-img" }, h("img", { key: '36e26b8fcf8d2f094b0ab990ad96c3722e23d4fd', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), h("div", { key: 'b7f042b124044e8ca7eee15341d08ef175013b18', class: "s-loyalty-program-reward-content" }, h("div", { key: 'd3274d9bf3f53dfdc87e4f11cddd2abae5288333', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '4db76994541536d16e11a7e34bce9e06ce9aff4b', size: "xs" }, h("span", { key: 'a565b786c683bc5b076036c81494137ccaef0c18', innerHTML: loyaltyProgramIcon }), h("span", { key: '481a4016c7ccea49a860df2a7b3a322302a2e5ad', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '5820431c80d0eee99da2592ef29685710b73a048', class: "s-loyalty-program-reward-title" }, h("span", { key: '82b99ec1244890b19930686c228ca56ecee7191b' }, this.prize.group_title)), h("div", { key: '08bc6a5f88365c23e07a20b858b4cda5430eb363', class: "s-loyalty-program-reward-name" }, h("div", { key: 'dd4ce5ed0097a746b91c74cdab38ca557c55194d', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), h("div", { key: 'ae7cd30ae6794f0957db6cfca3a69403b5996183', class: "p-4" }, h("slot", { key: '41a4cce4cb28d91d038754f69ea42b25fda6427a', name: "action" }, h("button", { key: '353da11c1197ed3dafd85282cd3343c21f55c80b', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [4, "salla-reward-card", {

package/dist/components/salla-reward-details2.js

@@ -8,16 +8,17 @@ import { T as Tag } from './tag.js';
 import { I as IconVerified } from './check.js';
 import { C as Cancel } from './cancel.js';
 import { T as TrackedPromise } from './tracked-promise.js';
-import { d as defineCustomElement$p } from './salla-add-product-button2.js';
-import { d as defineCustomElement$o } from './salla-badge2.js';
-import { d as defineCustomElement$n } from './salla-booking-field2.js';
-import { d as defineCustomElement$m } from './salla-button2.js';
-import { d as defineCustomElement$l } from './salla-color-picker2.js';
-import { d as defineCustomElement$k } from './salla-conditional-fields2.js';
-import { d as defineCustomElement$j } from './salla-count-down2.js';
-import { d as defineCustomElement$i } from './salla-datetime-picker2.js';
-import { d as defineCustomElement$h } from './salla-file-upload2.js';
-import { d as defineCustomElement$g } from './salla-loading2.js';
+import { d as defineCustomElement$q } from './salla-add-product-button2.js';
+import { d as defineCustomElement$p } from './salla-badge2.js';
+import { d as defineCustomElement$o } from './salla-booking-field2.js';
+import { d as defineCustomElement$n } from './salla-button2.js';
+import { d as defineCustomElement$m } from './salla-color-picker2.js';
+import { d as defineCustomElement$l } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$k } from './salla-count-down2.js';
+import { d as defineCustomElement$j } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$i } from './salla-file-upload2.js';
+import { d as defineCustomElement$h } from './salla-loading2.js';
+import { d as defineCustomElement$g } from './salla-loyalty-exchange-product-card2.js';
 import { d as defineCustomElement$f } from './salla-map2.js';
 import { d as defineCustomElement$e } from './salla-modal2.js';
 import { d as defineCustomElement$d } from './salla-order-options-modal2.js';
@@ -34,7 +35,7 @@ import { d as defineCustomElement$3 } from './salla-tab-header2.js';
 import { d as defineCustomElement$2 } from './salla-tabs2.js';
 import { d as defineCustomElement$1 } from './salla-tel-input2.js';
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -52,10 +53,16 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
         super();
         this.__registerHost();
         this.actionClick = createEvent(this, "actionClick", 7);
+        this.productActionClick = createEvent(this, "productActionClick", 7);
         this.refreshKey = Date.now();
+        this.includedProductsData = [];
+    }
+    handleProductExchange(e) {
+        this.productActionClick.emit({ productId: e.detail.productId });
     }
     handlePrizeChange() {
         this.refreshKey = Date.now();
+        this.fetchIncludedProducts();
     }
     componentWillLoad() {
         if (this.category.status === 'idle') {
@@ -64,6 +71,23 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
         if (this.brand.status === 'idle') {
             this.brand();
         }
+        this.fetchIncludedProducts();
+    }
+    async fetchIncludedProducts() {
+        this.includedProductsData = [];
+        const ids = this.prize?.included_product_ids;
+        if (!ids?.length)
+            return;
+        const requestedPrize = this.prize;
+        try {
+            const response = await salla.api.withoutNotifier(() => salla.product.api.fetch({ source: 'selected', source_value: ids }));
+            if (this.prize === requestedPrize) {
+                this.includedProductsData = response.data || [];
+            }
+        }
+        catch {
+            this.includedProductsData = [];
+        }
     }
     getTermsAndConditions() {
         const minimumAmount = Number((this.prize.order_minimum_amount || '0').split('.')[0]) || 0;
@@ -142,23 +166,29 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
     getProductsJsx(items, title) {
         return !items?.length ? '' : h("div", { class: "s-loyalty-program-reward-details-items-products s-loyalty-program-slider-arrows-edges" }, h("h2", null, title), h("salla-products-slider", { source: "selected", sourceValue: JSON.stringify(items), "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":0,"breakpoints":{"768":{"slidesPerView":3,"freeMode":false,"speed":300}}}' }));
     }
+    getIncludedProductsJsx(title) {
+        const products = this.includedProductsData;
+        if (!products?.length)
+            return '';
+        return (h("div", { class: c('reward-details-items-products') }, h("h2", null, title), h("div", { class: c('reward-details-products-grid') }, products.map(product => h("salla-loyalty-exchange-product-card", { product: product })))));
+    }
     render() {
         const termsAndConditions = this.getTermsAndConditions();
-        return (h("div", { key: 'b448be9380e1b0226e0e1bf4f2383190769de152', class: "s-loyalty-program-reward-modal" }, h("div", { key: '16087a27ea5cef2738f07745ac2b830ea07ab4ce', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: 'f03dde8a72339ce561298cf27b524f9a69a1fd3c', class: "s-loyalty-program-points-modal-info" }, !salla.url.is_page('cart') ? ''
+        return (h("div", { key: 'e75387a83bdf558f087bfda4f8c7db15bf97ac5d', class: "s-loyalty-program-reward-modal" }, h("div", { key: '89caf02d9b28996177b5bc23a711986ad9da9208', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '455d0a2e6f5c08dbbdf063c1f243e7e041deb788', class: "s-loyalty-program-points-modal-info" }, !salla.url.is_page('cart') ? ''
             : h("button", { class: "s-loyalty-program-back-btn", onClick: () => closeModals(() => salla.event.dispatch('modal::open', 'loyalty-rewards-modal')) }, h("span", { class: {
                     'sicon-arrow-right': document.documentElement.getAttribute('dir') === 'rtl',
                     'sicon-arrow-left': document.documentElement.getAttribute('dir') === 'ltr',
-                } })), this.prize.name)), h("div", { key: '94e4c042eda800d4127e98af05399aefd8cf162c', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: '5e847cbfd2aefe88baaddd991ac9a3c9d5be4318', class: "s-loyalty-program-reward-details-header" }, h("div", { key: '67fa2b255a10ada08cd780f204d8bc958b2562df', class: "s-loyalty-program-aspect-container" }, h("img", { key: '06298fbe666f161ace6f8bd70ead43ff4647f912', src: this.prize.image, alt: this.prize.name })), h("salla-badge", { key: '2d5fb82811dfced1eb558baa01ddb83bf8271312', size: "sm", bg: "light" }, h("span", { key: 'bb9d7cf72ea6bc88eaed97e62465c85b3628de0d', innerHTML: loyaltyProgramIcon }), h("span", { key: '87bd5622040b555ab70de43ffb7a6fa06cb4b45a', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.prize.cost_points)))), !termsAndConditions.length ? '' : h("div", { class: "s-loyalty-program-terms-and-conditions" }, h("h1", { class: "s-loyalty-program-terms-and-conditions-heading" }, salla.lang.get('pages.loyalty_program.terms_and_conditions')), h("ul", { class: "s-loyalty-program-terms-and-conditions-list" }, termsAndConditions.map(([title, points]) => (h("li", { class: "s-loyalty-program-terms-and-conditions-item" }, h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, title), h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, points)))))), h("div", { key: '8b9ae2745e2134b41c8bc1c9bce8bc449774fd48', class: "s-loyalty-program-reward-info-message" }, h("h1", { key: 'd5e6f1f591a09144d9d15bf32457ca22f8438b82', class: "s-loyalty-program-reward-info-message-heading" }, salla.lang.get('pages.loyalty_program.how_to_benefit_from_this_reward')), h("p", { key: '00c63a4b0dafecd45141b2627f3cf00df9b77e83', class: "s-loyalty-program-reward-info-message-content" }, this.getItemsMarkersText())), (this.prize.key === 'FREE_SHIPPING' || this.getItemsMarkers('both') === '000000') ? '' : h("div", { class: "s-loyalty-program-reward-details" }, h("salla-tabs", { key: this.refreshKey }, this.getItemsMarkers('included') === '000' ? '' : [
+                } })), this.prize.name)), h("div", { key: '1e65d03e52071802ec396cc4838bdaf135303494', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: 'f6869249b21464296725644acd9a593fb6c5ea30', class: "s-loyalty-program-reward-details-header" }, h("div", { key: 'c93dfe4c362421f7f7d5938a86d043e6ee0f2369', class: "s-loyalty-program-aspect-container" }, h("img", { key: '0c86bde982fd627939e47b9cf1eed02285a041f1', src: this.prize.image, alt: this.prize.name })), h("salla-badge", { key: '2be3695ee888ef65e0fec106e4b7845abc25491b', size: "sm", bg: "light" }, h("span", { key: '193ce34305780ecc2fd78d4e2d8572da06a0ebda', innerHTML: loyaltyProgramIcon }), h("span", { key: 'aee708c7b484afa29392fe25768ae48051c8b211', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.prize.cost_points)))), !termsAndConditions.length ? '' : h("div", { class: "s-loyalty-program-terms-and-conditions" }, h("h1", { class: "s-loyalty-program-terms-and-conditions-heading" }, salla.lang.get('pages.loyalty_program.terms_and_conditions')), h("ul", { class: "s-loyalty-program-terms-and-conditions-list" }, termsAndConditions.map(([title, points]) => (h("li", { class: "s-loyalty-program-terms-and-conditions-item" }, h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, title), h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, points)))))), h("div", { key: 'add5d8a427511f9554f5d13a88bc5a4994021477', class: "s-loyalty-program-reward-info-message" }, h("h1", { key: '723dd37428176057e6d9e315e2a29528df9b8b1f', class: "s-loyalty-program-reward-info-message-heading" }, salla.lang.get('pages.loyalty_program.how_to_benefit_from_this_reward')), h("p", { key: 'ef1d7ea6af657ff4810c257d378aac35c106de66', class: "s-loyalty-program-reward-info-message-content" }, this.getItemsMarkersText())), (this.prize.key === 'FREE_SHIPPING' || this.getItemsMarkers('both') === '000000') ? '' : h("div", { class: "s-loyalty-program-reward-details" }, h("salla-tabs", { key: this.refreshKey }, this.getItemsMarkers('included') === '000' ? '' : [
             h("salla-tab-header", { slot: "header", name: "included", style: {
                     display: this.getItemsMarkers('excluded') === '000' ? 'none' : 'block',
                 } }, h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: IconVerified }), h("span", null, salla.lang.get(`pages.loyalty_program.included`))),
-            h("salla-tab-content", { slot: "content", name: "included" }, h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.categories, this.prize.included_category_ids), salla.lang.get('pages.loyalty_program.included_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.brands, this.prize.included_brand_ids), salla.lang.get('pages.loyalty_program.included_brands')), this.getProductsJsx(this.getProductIds(this.prize.included_product_ids), salla.lang.get('pages.loyalty_program.included_products')))),
+            h("salla-tab-content", { slot: "content", name: "included" }, h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.categories, this.prize.included_category_ids), salla.lang.get('pages.loyalty_program.included_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.brands, this.prize.included_brand_ids), salla.lang.get('pages.loyalty_program.included_brands')), this.getIncludedProductsJsx(salla.lang.get('pages.loyalty_program.included_products')))),
         ], this.getItemsMarkers('excluded') === '000' ? '' : [
             h("salla-tab-header", { slot: "header", name: "excluded", style: {
                     display: this.getItemsMarkers('included') === '000' ? 'none' : 'block',
                 } }, h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: Cancel }), h("span", null, salla.lang.get(`pages.loyalty_program.excluded`))),
             h("salla-tab-content", { slot: "content", name: "excluded" }, h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.excludedCategories, this.prize.excluded_category_ids), salla.lang.get('pages.loyalty_program.excluded_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.excludedBrands, this.prize.excluded_brand_ids), salla.lang.get('pages.loyalty_program.excluded_brands')), this.getProductsJsx(this.getProductIds(this.prize.excluded_product_ids), salla.lang.get('pages.loyalty_program.excluded_products')))),
-        ]))), h("salla-reward-action", { key: 'd4ccecb2463fd6c06957f40e7865b1d12158b4bd', onActionClick: e => this.actionClick.emit(e.detail), prize: this.prize })));
+        ]))), h("salla-reward-action", { key: 'd1a0304c5229958d4a135affae27bb62c7419cd8', onActionClick: e => this.actionClick.emit(e.detail), prize: this.prize })));
     }
     static get watchers() { return {
         "prize": ["handlePrizeChange"]
@@ -166,8 +196,9 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
     static get style() { return sallaLoyaltyProgramCss; }
 }, [0, "salla-reward-details", {
         "prize": [16],
-        "refreshKey": [32]
-    }, undefined, {
+        "refreshKey": [32],
+        "includedProductsData": [32]
+    }, [[0, "loyaltyProductExchange", "handleProductExchange"]], {
         "prize": ["handlePrizeChange"]
     }]);
 __decorate([
@@ -184,7 +215,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-reward-details", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
+    const components = ["salla-reward-details", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-loyalty-exchange-product-card", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-reward-details":
             if (!customElements.get(tagName)) {
@@ -193,50 +224,55 @@ function defineCustomElement() {
             break;
         case "salla-add-product-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "salla-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "salla-booking-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "salla-color-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "salla-conditional-fields":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "salla-count-down":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "salla-datetime-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "salla-file-upload":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-loyalty-exchange-product-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }