@salla.sa/twilight-components 2.14.493 → 2.14.495

package/dist/collection/components/salla-loyalty-program/salla-loyalty-point.js

@@ -171,7 +171,7 @@ export class SallaLoyaltyPoint {
         }
     }
     render() {
-        return (h("div", { key: 'ddfb0e0ffb4c23f7cab43dd994e25ba7c599a931' }, h("div", { key: 'a2fe514f59b0e01fc6e22011b6734d7ba97e951e', onClick: () => closeModals(() => this.modal.open()), class: "s-loyalty-program-point-wrapper" }, h("div", { key: '486b61a56b739a881de4ff0581a19ef91fbfc2e8', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-sm s-loyalty-program-circle-variant-fill" }, h("span", { key: '15f77554d8af1f65a66bf788cae341fe9f8f0fa3', class: this.point.icon })), h("div", { key: '2921be35f4d122e1a4580ed625832e4f33d69276', class: "s-loyalty-program-points-badge-mobile" }, h("salla-badge", { key: 'c809f65f9c93553e595fc995b76070a6a065e9d8', size: "xs", bg: "transparent" }, h("span", { key: 'd76ddeb873ac19f91b3cfe8af5837feb096cd7ca', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("div", { key: '18674b523984b6ca91afcee873e219571f867fcf', class: "s-loyalty-program-points-badge-desktop" }, h("salla-badge", { key: '7ebbee57d2858f1ba372fd4b0b42771e394e330f', size: "sm", bg: "transparent" }, h("span", { key: '41a93def0e2e54b4e6e036222e212703fe9ef88f', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("p", { key: 'acfa0ed98f398b591cb22e828ca677d37007e4e6', class: "s-loyalty-program-point-description" }, this.point.name), this.point.is_completed ?
+        return (h("div", { key: '4f7a191b41435d2ea0c603e4454af4307362f5bf' }, h("div", { key: 'ef68b5b9f8606e2aa54ed97eddaecd5f9c191d1c', onClick: () => closeModals(() => this.modal.open()), class: "s-loyalty-program-point-wrapper" }, h("div", { key: 'b14f2d1f94daf0674b076db69af9427b23d35e08', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-sm s-loyalty-program-circle-variant-fill" }, h("span", { key: '4d7ee556fde10c0039f035b1310711f2ddb6b6ab', class: this.point.icon })), h("div", { key: '5bf70bb463de4c340a71286d7b9b1a1412842762', class: "s-loyalty-program-points-badge-mobile" }, h("salla-badge", { key: '53a1ac2b950144b78104ffbc9824642865d2b03e', size: "xs", bg: "transparent" }, h("span", { key: 'bb45f6133544718e5296ca5635f5d72c4ff6e86b', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("div", { key: '92f4eed2567bcad8e4e8d65e5d36cd12829862ef', class: "s-loyalty-program-points-badge-desktop" }, h("salla-badge", { key: 'ee188fec0149cb900af5e7a3467defd8302c66b0', size: "sm", bg: "transparent" }, h("span", { key: 'b196131e3c3f4d78e11384ee9663373dcfc6f76d', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("p", { key: 'b759840a68a867310bf0be0ebe6bbef038c48284', class: "s-loyalty-program-point-description" }, this.point.name), this.point.is_completed ?
             h("a", { class: {
                     's-loyalty-program-points-action': true,
                     's-loyalty-program-points-action-completed': this.point.is_completed,
@@ -181,12 +181,12 @@ export class SallaLoyaltyPoint {
                     's-loyalty-program-points-action': true,
                     's-loyalty-program-points-action-completed': this.point.is_completed,
                     's-loyalty-program-points-action-incomplete': !this.point.is_completed,
-                } }, this.point.description)), h("salla-modal", { key: '7c9f4dce935ba3e1f841aab57de04013e2fb983f', ref: modal => this.modal = modal, class: "s-loyalty-program-point-modal s-loyalty-program-modal", width: window.matchMedia('(min-width: 768px)').matches ? 'md' : 'sm', noPadding: true }, h("div", { key: '5e1dbd60526ae8450ce6453c04ea244ef1a96697', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: 'b43153fe19ffa308d5bd4126c9bd0fd43f1379ea', class: "s-loyalty-program-points-modal-info" }, this.point.name)), h("div", { key: '5d8f1cad86fd916f984f5baa07ff7fb18afeda68', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: '69c4e3f2d513ec6c52caaa31ab3e7c886c0827a0', class: "s-loyalty-program-points-modal-main" }, h("div", { key: '539a7713a22f64e9e4157dcd288ceca49910a449', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: '5249f670969022167be8b11bff3ec8c75b4f0a5b', class: this.point.icon })), h("salla-badge", { key: 'e19decc72866ca36e3cc52c9822fc4677816bbda', size: "sm", bg: "light" }, h("span", { key: 'f2ed0ef699b63ce091c2b7dc5d30341bb0dcf713', innerHTML: SIGift }), h("span", { key: '54275a2ec227c9415e77f88051bbf4e36d10489e', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.point)))), this.getSubHeading(this.point), !!this.point.steps && Object.keys(this.point.steps).length > 0 &&
-            h("div", { key: '7b8d4168a96586efa2855f169536a0577750cabe', class: "s-loyalty-program-points-modal-details" }, h("div", { key: '102274da4418a7119e65c6a5c44630315e348c98', class: "s-loyalty-program-points-chains-wrapper" }, h("ul", { key: '9a87e3fcb31ab6a0b984fe3fd43b9b57678b4600', class: "s-loyalty-program-points-chain-list" }, Object.values(this.point.steps).map((step, idx) => {
+                } }, this.point.description)), h("salla-modal", { key: '90d851469e4f1ce77c4f509bfecd96abb2425dda', ref: modal => this.modal = modal, class: "s-loyalty-program-point-modal s-loyalty-program-modal", width: window.matchMedia('(min-width: 768px)').matches ? 'md' : 'sm', noPadding: true }, h("div", { key: '795d0984a4b7bca115500a9c3850cce6c6e6a7f0', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '0124a924ddde8516b6d27e9d9b36f44b14d5f13a', class: "s-loyalty-program-points-modal-info" }, this.point.name)), h("div", { key: '3ff4ec01ffe1e16ac53a170e04c8ca7b4c065d36', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: 'a56d5201a53a4e56bd5d04b51d1ce9a3151f0375', class: "s-loyalty-program-points-modal-main" }, h("div", { key: '5b1b1ed27359d2f6b31a86a58ca8a7388f61b6e3', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: 'c73db6477ad88cc4b8467623fbf4a2d623b2f66f', class: this.point.icon })), h("salla-badge", { key: '432dde709ab1ea8d346104cee2e2d230fe9e5060', size: "sm", bg: "light" }, h("span", { key: '53134910bad559f02782092d47bfe56d4a56decb', innerHTML: SIGift }), h("span", { key: 'e374ac7a30fc529b4a32833dfa7af90f76ae4c34', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.point)))), this.getSubHeading(this.point), !!this.point.steps && Object.keys(this.point.steps).length > 0 &&
+            h("div", { key: '885c021210ceb4c6410deb811515b58489db76fa', class: "s-loyalty-program-points-modal-details" }, h("div", { key: '9d4a907cf6ab0fd59f85cbcfe111fd2dd1031cee', class: "s-loyalty-program-points-chains-wrapper" }, h("ul", { key: '8653fe18c6fe5f4708d91159db40c54bc44deeda', class: "s-loyalty-program-points-chain-list" }, Object.values(this.point.steps).map((step, idx) => {
                 const stepsArray = Object.values(this.point.steps);
                 const isLastItem = idx === stepsArray.length - 1;
                 return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[step.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", null, salla.lang.get(`pages.loyalty_program.step_${idx + 1}`))), h("p", { class: "s-loyalty-program-points-chain-description" }, step.title || step.name))));
-            })))), this.getDetails(this.point), h("div", { key: '7c96d9b4014f2b531cf85f0f4dd9c797f6b4e352', class: "s-loyalty-program-points-modal-details" }, this.getTrailingContent(this.point)), !this.point.branches?.length ? '' : h("div", { class: "s-loyalty-program-points-modal-list" }, h("div", { class: "s-loyalty-program-point-details-branches" }, h("h2", null, salla.lang.get('pages.loyalty_program.branches')), h("p", null, salla.lang.get('pages.loyalty_program.shop_from_branches'))), h("div", { class: "s-loyalty-program-points-modal-list-wrapper" }, h("ul", null, this.point.branches.map((branch) => (h("li", { class: "s-loyalty-program-points-modal-list-item" }, h("p", null, branch.name), h("salla-badge", { size: "sm", bg: "transparent" }, h("span", { innerHTML: SIGift }), h("a", { href: branch.location ? `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lon}` : '#', target: "_blank", rel: "noopener noreferrer" }, branch.address_description))))))))), h("div", { key: '79a6d37b6af82a40b5b88f1a7e03034c3ac9fe90', class: "s-loyalty-program-points-modal-action" }, h("a", { key: '6498d88e64af28621281b8c12b28c1a22473001d', href: this.point.url, onClick: (e) => (e.stopPropagation(), this.handleAction(e, this.point)), class: {
+            })))), this.getDetails(this.point), h("div", { key: 'fed15aa3a7c7ecfe9818a87264e660c045d2658a', class: "s-loyalty-program-points-modal-details" }, this.getTrailingContent(this.point)), !this.point.branches?.length ? '' : h("div", { class: "s-loyalty-program-points-modal-list" }, h("div", { class: "s-loyalty-program-point-details-branches" }, h("h2", null, salla.lang.get('pages.loyalty_program.branches')), h("p", null, salla.lang.get('pages.loyalty_program.shop_from_branches'))), h("div", { class: "s-loyalty-program-points-modal-list-wrapper" }, h("ul", null, this.point.branches.map((branch) => (h("li", { class: "s-loyalty-program-points-modal-list-item" }, h("p", null, branch.name), h("salla-badge", { size: "sm", bg: "transparent" }, h("span", { innerHTML: SIGift }), h("a", { href: branch.location ? `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lon}` : '#', target: "_blank", rel: "noopener noreferrer" }, branch.address_description))))))))), h("div", { key: 'c4b5a24d78cf70dad65ea9b4d606c338bba7912e', class: "s-loyalty-program-points-modal-action" }, h("a", { key: 'f9718774e2fc3a1def69b8fa8d7ebfdfb9086197', href: this.point.url, onClick: (e) => (e.stopPropagation(), this.handleAction(e, this.point)), class: {
                 's-loyalty-program-points-action': true,
                 's-loyalty-program-points-action-completed': this.point.is_completed,
                 's-loyalty-program-points-action-incomplete': !this.point.is_completed,

package/dist/collection/components/salla-loyalty-program/salla-loyalty-program.css

@@ -0,0 +1,48 @@
+@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;
+}

package/dist/collection/components/salla-loyalty-program/salla-loyalty-program.js

@@ -34,6 +34,7 @@ export class SallaLoyaltyProgram {
          * prize to show in details or exchange modals
          */
         this.currentPrize = null;
+        this.currentProductId = null;
         /**
          * collapsed state of points list
          */
@@ -92,7 +93,7 @@ export class SallaLoyaltyProgram {
             }, onActionClick: () => {
                 this.currentPrize = prize;
                 closeModals(() => this.detailsModal.open());
-            } })))))))), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => closeModals(() => this.exchangeModal.open()), prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize }))))));
+            } })))))))), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => { this.currentProductId = null; closeModals(() => this.exchangeModal.open()); }, onProductActionClick: (e) => { this.currentProductId = e.detail.productId; closeModals(() => this.exchangeModal.open()); }, prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize, productId: this.currentProductId }))))));
     }
     static get is() { return "salla-loyalty-program"; }
     static get originalStyleUrls() {
@@ -108,6 +109,7 @@ export class SallaLoyaltyProgram {
     static get states() {
         return {
             "currentPrize": {},
+            "currentProductId": {},
             "collapsed": {},
             "animatedPoints": {}
         };

package/dist/collection/components/salla-loyalty-program/salla-loyalty-reward.js

@@ -31,10 +31,10 @@ export class SallaLoyaltyReward {
         };
     }
     render() {
-        return (h("div", { key: '46da4cdcfee8e04307722a89c94ab7c3d867aec4', class: {
+        return (h("div", { key: '0e3735d77de3b13948ba8cf473986185c52b9b1f', class: {
                 's-loyalty-program-reward-container': true,
                 's-loyalty-program-reward-xs': this.size === 'xs',
-            } }, h("div", { key: '3d4d1b1adada717d2c248e1a2287b80b370accc8', onClick: this.handleActionArea, role: "button" }, h("div", { key: '2f699dcc9098adbbdec2ab1522bdb49977440663', class: "s-loyalty-program-reward-img" }, h("img", { key: '9fcc993f9f010ebd5663d02849714db897321357', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: 'd66d0be909c1f1c239a4aeb2152cd6f3850f25d4', class: "s-loyalty-program-reward-content" }, h("div", { key: '10968623d1fe8815a547e7b404f58b8401eed98b', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: 'd677e3be9ed036091f523b51d06d64635e1426d9', size: "xs" }, h("span", { key: '8b67c0112a61c5a9f224f308193dd933db6811df', innerHTML: SIGift }), h("span", { key: '0b53d61ca1b07318a19d00c5948045385be2c877', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '5c88b91c602ddb8d81bd2537ebe32afaa13dabd7', class: "s-loyalty-program-reward-title" }, h("span", { key: '9f070612c7b381cdfc11cb794a29dd3d4fad78e3' }, this.group)), h("div", { key: 'd2ed88971fb88f4c857970a15b08b87681225ad4', class: "s-loyalty-program-reward-name" }, h("div", { key: '0818181909194a5a9d7bd8b0b0f421ee1c33cac9', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '61a792efce0cb44e5d676a2d10fbf466fdc9926a', class: "p-4" }, h("button", { key: 'b2f469e2206892914e14e542fc9acf6ccc289f59', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
+            } }, h("div", { key: '3988af25528bed3ff027405a1b84a4ded0b4fce8', onClick: this.handleActionArea, role: "button" }, h("div", { key: '3b6c3b7a35aa41a792f5ac05ff58f904ff850194', class: "s-loyalty-program-reward-img" }, h("img", { key: '2c8b14fcfd5b8db52c82033cdc797cc819e117eb', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: 'a0c7699c3a84adac9040ed2132e631795b041784', class: "s-loyalty-program-reward-content" }, h("div", { key: '5072ad6dae99ea1dec7bb4eef97a7c4fcca4f554', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '8e75004f0ac06e6ff29f5f5dc0fa0915392078bc', size: "xs" }, h("span", { key: 'eda3bd13b60467b5c3b6342ea1688e880913aaf4', innerHTML: SIGift }), h("span", { key: '3be615346ec1d55f312fd22d6a324366a181abdf', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '611821580eb3216ad71b22634bdb40eec78adabf', class: "s-loyalty-program-reward-title" }, h("span", { key: 'dfa2d90b84aad0fd83e7add9bfdf72e26b14751b' }, this.group)), h("div", { key: '0401936cd2f3fd7d534ebe8ffe69ccb4149f38a4', class: "s-loyalty-program-reward-name" }, h("div", { key: '3275b7e29eec246fb9b7983c4160338613e31c13', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '4051723d3c48dd0c967b28d231f8a4dc09530a8f', class: "p-4" }, h("button", { key: 'e74ea5eb83e50f3be56e75904c5a961b63b2445d', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
                 's-loyalty-program-rewards-action-base': true,
                 's-loyalty-program-rewards-action-on': this.isActionClickable(this.prize),
                 's-loyalty-program-rewards-action-off': !this.isActionClickable(this.prize),

package/dist/collection/components/salla-loyalty-program/salla-reward-action.js

@@ -26,10 +26,7 @@ export class SallaRewardAction {
         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')))));

package/dist/collection/components/salla-loyalty-program/salla-reward-card.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import SIGift from "../../assets/svg/gift.svg";
 export class SallaRewardCard {
     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: SIGift }), 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: SIGift }), 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 is() { return "salla-reward-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-loyalty-program/salla-reward-details.js

@@ -22,9 +22,14 @@ const c = (...args) => args.map(i => 's-loyalty-program-' + i).join(' ');
 export class SallaRewardDetails {
     constructor() {
         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') {
@@ -33,6 +38,23 @@ export class SallaRewardDetails {
         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;
@@ -111,23 +133,29 @@ export class SallaRewardDetails {
     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: SIGift }), 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: SIGift }), 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: SICheck }), 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: SICancel }), 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 is() { return "salla-reward-details"; }
     static get originalStyleUrls() {
@@ -170,7 +198,8 @@ export class SallaRewardDetails {
     }
     static get states() {
         return {
-            "refreshKey": {}
+            "refreshKey": {},
+            "includedProductsData": {}
         };
     }
     static get events() {
@@ -194,6 +223,21 @@ export class SallaRewardDetails {
                         }
                     }
                 }
+            }, {
+                "method": "productActionClick",
+                "name": "productActionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ productId: number }",
+                    "resolved": "{ productId: number; }",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {
@@ -202,6 +246,15 @@ export class SallaRewardDetails {
                 "methodName": "handlePrizeChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "loyaltyProductExchange",
+                "method": "handleProductExchange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     TrackedPromise(async () => {

package/dist/collection/components/salla-loyalty-program/salla-reward-exchange.js

@@ -43,11 +43,7 @@ export class SallaRewardExchange {
         this.reset(0);
     }
     render() {
-        return (h(Host, { key: 'b1e4fe9368655f389e403b2676191b46f71d49b7' }, h("div", { key: '19b8bbffa591f22608d56e8e932d7f013f6cd868', class: "s-loyalty-program-exchange-heading" }, h("div", { key: '290214db26895ba481de364299afd115b3a501cc', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: 'd59c1b1f7683db554856950b6ec919bb48c402dd', innerHTML: SIGift })), h("h2", { key: '51a4abff2e593279cc5c9ce9dd47f7ed05533325' }, salla.lang.get('pages.loyalty_program.redeem_reward')), h("p", { key: '8a16577bce81552878cdcae4e60ce8e8719b3ed0' }, salla.lang.get('pages.loyalty_program.redeem_confirmation'), " ", h("span", { key: 'c05bdc04cbac8dc530c49bb49eca6119d2653b63' }, "(", this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), ")"), " ", salla.lang.get('pages.loyalty_program.for'), " ", h("span", { key: 'ce3e88fde9f2434cabf75f7a3f622da539b5d310' }, "(", this.prize.name, ")"))), h("div", { key: 'ac51de5c34119eb79c1a8c2d06c201e4da3d7a0d', class: "s-loyalty-program-exchange-btns" }, h("button", { key: '9386b4a3d43a05fe9141561c7421b2b23ddb5a1e', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-confirm", onClick: () => this.handleConfirm() }, h("span", { key: '88d7658b7715932ff8200f79de5dd8864b00db15', style: {
-                opacity: this.exchange.status !== 'pending' ? '1' : '0',
-            } }, salla.lang.get('common.elements.confirm')), h("span", { key: '80c30140959693b3d98dc2162e45d4089e81eb6b', class: "s-loyalty-program-exchange-loading", style: {
-                opacity: this.exchange.status === 'pending' ? '1' : '0',
-            } }, h("salla-loading", { key: '516e36b4271d8da0ad711732aa991a45633edea5', color: "primary", size: 24 }))), h("button", { key: '4642c008c656a662bd277829ef80db37cffa0b1a', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-cancel", onClick: () => this.handleCancel() }, salla.lang.get('common.elements.cancel')))));
+        return (h(Host, { key: '12288db4227af2c833b80a0a4b4df9192c56a9f4' }, h("div", { key: '0bb5b3037fb091e9f4b96e709ad6df3f97b7d7af', class: "s-loyalty-program-exchange-heading" }, h("div", { key: '5161c1961bd08e626e33780cf01efe5000d8e939', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: '83429d754f37b2112ba2201b54a51349a98947df', innerHTML: SIGift })), h("h2", { key: '0437972cf3b853271042de844cb70bc49dd04abf' }, salla.lang.get('pages.loyalty_program.redeem_reward')), h("p", { key: '14c0dbd4b29d73082ee71703c0a794447f9ee40e' }, salla.lang.get('pages.loyalty_program.redeem_confirmation'), " ", h("span", { key: '9128f2c88f20536ca5ddae84b2160024bb8b2fe9' }, "(", this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), ")"), " ", salla.lang.get('pages.loyalty_program.for'), " ", h("span", { key: 'e323f1dbb02caf7e385ac68d3cb74b84a5e062da' }, "(", this.prize.name, ")"))), h("div", { key: 'e5895bd3e62bacf86077fe85932e85f4a313e9f6', class: "s-loyalty-program-exchange-btns" }, h("salla-button", { key: 'df88cc68a2a265fc5a0e9a84be7159d028cc22a9', width: "wide", loading: this.exchange.status === 'pending', onClick: () => this.handleConfirm() }, salla.lang.get('common.elements.confirm')), h("salla-button", { key: 'a99305e2bcde52b63da0b1102f3bd626d256ebbf', width: "wide", fill: "outline", color: "danger", onClick: () => this.handleCancel() }, salla.lang.get('common.elements.cancel')))));
     }
     static get is() { return "salla-reward-exchange"; }
     static get originalStyleUrls() {

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

@@ -28,6 +28,7 @@ export class SallaRatingModalV2 {
         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');
@@ -42,6 +43,9 @@ export class SallaRatingModalV2 {
         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 = {};
@@ -89,6 +93,8 @@ export class SallaRatingModalV2 {
                 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');
@@ -102,6 +108,9 @@ export class SallaRatingModalV2 {
                 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();
@@ -269,6 +278,7 @@ export class SallaRatingModalV2 {
                         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
@@ -299,6 +309,7 @@ export class SallaRatingModalV2 {
         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);
@@ -625,6 +636,24 @@ export class SallaRatingModalV2 {
         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)) {
@@ -903,7 +932,7 @@ export class SallaRatingModalV2 {
         }, {});
     }
     renderProductStep(item, index) {
-        return (h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products", "data-product-id": item.product.id, key: item.product.id }, h("div", { class: "s-rating-modal-product" }, 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],
@@ -979,6 +1008,7 @@ export class SallaRatingModalV2 {
         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)))));
@@ -994,7 +1024,7 @@ export class SallaRatingModalV2 {
         })));
     }
     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,
@@ -1104,7 +1134,8 @@ export class SallaRatingModalV2 {
             "deleteFeedbackId": {},
             "editItem": {},
             "allowAttachImages": {},
-            "allowContactSupport": {}
+            "allowContactSupport": {},
+            "loyaltyImageRatingPoints": {}
         };
     }
     static get methods() {

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

@@ -26,6 +26,38 @@
 .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;