@salla.sa/twilight-components
Version:
Salla Web Component
70 lines (69 loc) • 3.23 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
var __decorate = (this && this.__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;
};
import { h } from "@stencil/core";
import { setTranslations } from "./translations";
import SIGift from "../../assets/svg/gift.svg";
import { TrackedPromise } from "../../Helpers/tracked-promise";
export class SallaLoyaltyBanner {
/**
* Get product ID from data attribute or fallback to page.id
*/
get productId() {
return this.host.dataset.productId || salla.config.get('page.id');
}
componentWillLoad() {
return salla.onReady()
.then(() => salla.lang.onLoaded())
.then(() => setTranslations())
.then(() => this.prize())
.catch(error => salla.logger.error(error));
}
handleClick() {
if (salla.config.isGuest()) {
salla.event.dispatch('login::open');
return;
}
this.exchangeModal.open();
}
render() {
if (this.prize.status !== 'success' || !this.productId) {
return null;
}
return (h("div", { class: "s-loyalty-program-banner-container" }, h("div", null, h("p", { class: "s-loyalty-program-banner-container-banner-title" }, salla.lang.get('pages.loyalty_program.want_to_redeem_free_product')), h("p", { class: "s-loyalty-program-banner-container-banner-subtitle" }, salla.lang.get('pages.loyalty_program.exchange_points_for_free_product', { points: this.prize.data.cost_points }))), h("button", { onClick: () => this.handleClick() }, h("span", { innerHTML: SIGift }), h("span", null, salla.lang.get('pages.loyalty_program.exchange_points'))), h("salla-modal", { ref: modal => this.exchangeModal = modal, width: "sm" }, !this.prize.data ? '' : h("salla-reward-exchange", { productId: Number(this.productId), prize: this.prize.data }))));
}
static get is() { return "salla-loyalty-banner"; }
static get originalStyleUrls() {
return {
"$": ["salla-loyalty-program.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-loyalty-program.css"]
};
}
static get elementRef() { return "host"; }
}
__decorate([
TrackedPromise(async function () {
if (!(salla.config.get('store.features') || []).includes('loyalty-system')) {
return Promise.reject('Loyalty system is not enabled for merchant');
}
const { loyalty_prize } = await salla.product.api.getDetails(this.productId);
if (!loyalty_prize) {
return Promise.reject('no loyalty prize for this product');
}
return loyalty_prize;
})
], SallaLoyaltyBanner.prototype, "prize", void 0);