@salla.sa/twilight-components
Version:
Salla Web Component
87 lines (83 loc) • 4.93 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as closeModals } from './functions.js';
import { l as loyaltyProgramIcon } from './gift.js';
import { T as TrackedPromise } from './tracked-promise.js';
import { d as defineCustomElement$1 } from './salla-loading2.js';
const sallaLoyaltyProgramCss = "";
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;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const SallaRewardExchange = /*@__PURE__*/ proxyCustomElement(class SallaRewardExchange extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.productId = null;
}
reset(timeout = 0) {
setTimeout(() => {
closeModals();
}, timeout);
}
getApiErrorMessage(error) {
return error?.response?.data?.error?.message
|| error?.response?.data?.message
|| (typeof error === 'string' ? error : null)
|| salla.lang.get('common.errors.error_occurred');
}
async handleConfirm() {
try {
await this.exchange(this.prize.id, null, this.productId);
this.reset(300);
}
catch (error) {
salla.notify.error(this.getApiErrorMessage(error));
}
}
handleCancel() {
this.reset(0);
}
render() {
return (h(Host, { key: 'ceecba37884a11443b52b76dad69bd164b52b788' }, h("div", { key: '598f185363b917969b9de0fb6a536884d6578c95', class: "s-loyalty-program-exchange-heading" }, h("div", { key: 'a2aa6b15d97533a973f7f2fb6a2cf517c147367d', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: '9745001d514643add62fe9a64df7fc2c0a694513', innerHTML: loyaltyProgramIcon })), h("h2", { key: '4819327aacc1307c0f75014d9faef50f55115289' }, salla.lang.get('pages.loyalty_program.redeem_reward')), h("p", { key: 'b39c99abcefb0f3baf609cd21049b083a115cdef' }, salla.lang.get('pages.loyalty_program.redeem_confirmation'), " ", h("span", { key: '50852d87c9686f66beddc7b0a0a3062f0ced1a61' }, "(", this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), ")"), " ", salla.lang.get('pages.loyalty_program.for'), " ", h("span", { key: '5a4baa0f02859ced6fdcf7ce77c31bf9b27c45e6' }, "(", this.prize.name, ")"))), h("div", { key: 'b1f1067bd0f3a84231ac017f4b66a71277a5d209', class: "s-loyalty-program-exchange-btns" }, h("button", { key: '7d4ce6c08fcac58290b364a0df55f8acb715d362', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-confirm", onClick: () => this.handleConfirm() }, h("span", { key: 'ef1deb96c4bbb2843ae088b539848c15aacdb244', style: {
opacity: this.exchange.status !== 'pending' ? '1' : '0',
} }, salla.lang.get('common.elements.confirm')), h("span", { key: '0f949386c85d7544f7098e2bdc8c7ce4390c4383', class: "s-loyalty-program-exchange-loading", style: {
opacity: this.exchange.status === 'pending' ? '1' : '0',
} }, h("salla-loading", { key: '9cdfbfdc7ebfb2e1874f1956560dc464e4aa2a9f', color: "primary", size: 24 }))), h("button", { key: '79a2e8b44be5eb4b3ec5f1a285a8f4eba5324814', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-cancel", onClick: () => this.handleCancel() }, salla.lang.get('common.elements.cancel')))));
}
static get style() { return sallaLoyaltyProgramCss; }
}, [0, "salla-reward-exchange", {
"prize": [16],
"productId": [2, "product-id"]
}]);
__decorate([
TrackedPromise(async (...args) => await salla.loyalty.exchange(...args))
], SallaRewardExchange.prototype, "exchange", void 0);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-reward-exchange", "salla-loading"];
components.forEach(tagName => { switch (tagName) {
case "salla-reward-exchange":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaRewardExchange);
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { SallaRewardExchange as S, defineCustomElement as d };