@salla.sa/twilight-components
Version:
Salla Web Component
81 lines (76 loc) • 4.59 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { c as closeModals } from './functions.js';
import { l as loyaltyProgramIcon } from './gift.js';
import { d as defineCustomElement$2 } from './salla-badge2.js';
const sallaLoyaltyProgramCss = "";
const SallaLoyaltyReward$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyReward extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.rewardModalOpen = createEvent(this, "rewardModalOpen", 7);
this.confirmModalOpen = createEvent(this, "confirmModalOpen", 7);
this.size = 'md';
this.isActionClickable = (prize) => {
switch (prize.key?.toLowerCase()) {
case 'free_product':
return prize.is_product_available;
default:
return true;
}
};
this.handleActionArea = () => {
this.rewardModalOpen.emit(this.prize);
};
this.handleAction = () => {
if (!this.isActionClickable(this.prize))
return;
if (!salla.config.isUser()) {
closeModals(() => salla.event.dispatch('login::open'));
return;
}
else {
this.confirmModalOpen.emit(this.prize);
}
};
}
render() {
return (h("div", { key: 'ba9554fee3ffeb4e64410913c6f78217482eaa9b', class: {
's-loyalty-program-reward-container': true,
's-loyalty-program-reward-xs': this.size === 'xs',
} }, h("div", { key: '807e949da96e8b307ed252e32ffafac682835a28', onClick: this.handleActionArea, role: "button" }, h("div", { key: '373862674986def57f35e1d006f41cb6b01b1e75', class: "s-loyalty-program-reward-img" }, h("img", { key: 'b8b072e962519aaf78d19c04759ee1590b0dd6de', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: '9866bf65f0a26c3136b3e345094314c6552bd70e', class: "s-loyalty-program-reward-content" }, h("div", { key: 'ee8455df80b61e1c8d86059725e5da5952dab85a', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '27b8f31d4b71255f1298bfd2c5705520b349db59', size: "xs" }, h("span", { key: 'e94f13b973bf0b5171b3aa1dd075ad5a0ee732c5', innerHTML: loyaltyProgramIcon }), h("span", { key: '7776cb3a470b72ca2239fb2c8452711bf5dc59e2', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), h("div", { key: '03dbed2bca1a462f8e4a13bbbb373d236f2da8ad', class: "s-loyalty-program-reward-title" }, h("span", { key: 'ca64b8c7378baa7e7c4197580290f71ecead8310' }, this.group)), h("div", { key: '3f8e125da5dc4618f82033c2b9e4b9c97760821f', class: "s-loyalty-program-reward-name" }, h("div", { key: 'a2494d8a25a09dd66871d55c762f90a351a54b52', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: 'fe4e03bdab2d95b5adee8b6ae4c51f96186d6016', class: "p-4" }, h("button", { key: '1d33bd0616d4c8e51f2b01cad7bff02c2842d935', 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),
} }, this.isActionClickable(this.prize) ? salla.lang.get('pages.loyalty_program.redeem_reward') : salla.lang.get('pages.loyalty_program.out_of_stock')))));
}
static get style() { return sallaLoyaltyProgramCss; }
}, [0, "salla-loyalty-reward", {
"size": [1],
"prize": [16],
"group": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-loyalty-reward", "salla-badge"];
components.forEach(tagName => { switch (tagName) {
case "salla-loyalty-reward":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaLoyaltyReward$1);
}
break;
case "salla-badge":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const SallaLoyaltyReward = SallaLoyaltyReward$1;
const defineCustomElement = defineCustomElement$1;
export { SallaLoyaltyReward, defineCustomElement };