@salla.sa/twilight-components
Version:
Salla Web Component
174 lines (173 loc) • 9.52 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 { closeModals, normalizeLoyaltyData } from "./functions";
import Star2 from "../../assets/svg/star2.svg";
import CancelIcon from "../../assets/svg/cancel.svg";
import SILayoutGrid from "../../assets/svg/layout-grid.svg";
import SIShipping from "../../assets/svg/shipping.svg";
import SIPercentage from "../../assets/svg/percentage.svg";
import SICart2 from "../../assets/svg/cart2.svg";
import PrizeImage from "../../assets/images/prize-image.svg";
import { TrackedPromise } from "../../Helpers/tracked-promise";
const sicons = {
all: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SILayoutGrid }),
free_shipping: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIShipping }),
coupon_discount: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIPercentage }),
free_product: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SICart2 }),
};
export class SallaLoyaltyPanel {
constructor() {
/**
* prize to show in details or exchange modals
*/
this.currentPrize = null;
this.handleExchangeSucceeded = () => window.location.reload();
this.handleResetSucceeded = () => window.location.reload();
}
componentWillLoad() {
return salla.onReady()
.then(() => salla.lang.onLoaded())
.then(() => setTranslations())
.then(() => {
salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
salla.event.on('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
// Fetch points if user is logged in
if (!salla.config.isGuest()) {
this.points();
}
})
.catch((error) => salla.logger.error(error));
}
disconnectedCallback() {
salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
salla.event.off('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
}
render() {
const prizesGroups = this.program.data.prizes;
const prizesCount = this.program.data.prizes_count;
const customerPoints = (this.points.data ?? this.customerPoints ?? 0);
if (this.prizeTitle && this.prizePoints) {
return (h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: "s-loyalty-program-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-program-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: "action", class: "s-loyalty-program-after-exchange-action" }, h("salla-button", { class: "s-loyalty-program-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => salla.loyalty.reset() }, h("span", { innerHTML: CancelIcon }))))));
}
if (!customerPoints || customerPoints === 0) {
return null;
}
return (h("div", { class: "" }, h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: 's-loyalty-program-panel-widget' }, h("div", { slot: "icon", class: "s-loyalty-program-panel-widget-icon", innerHTML: Star2 }), h("div", { slot: "subtitle" }, salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": customerPoints }), h("salla-button", { shape: "link", color: "primary", onClick: () => {
if (['error', 'idle'].includes(this.program.status)) {
this.program();
}
this.rewardsModal.open();
} }, salla.lang.get('pages.loyalty_program.cart_point_exchange_now'))))), h("salla-modal", { id: "loyalty-rewards-modal", isLoading: this.program.status === 'pending', ref: modal => this.rewardsModal = modal, class: "s-loyalty-program-rewards-cart s-loyalty-program-modal", width: "lg", noPadding: true }, h("div", { slot: "loading" }, h("salla-loading", null)), this.program.status === 'success' ? h("div", { class: "s-loyalty-program-rewards-container-cart" }, h("div", { class: "s-loyalty-program-rewards-cart-header" }, h("div", { innerHTML: PrizeImage }), h("div", { class: "s-loyalty-program-panel-content" }, h("h1", null, this.program.data.prize_promotion_title), h("p", null, this.program.data.prize_promotion_description))), h("div", { class: {
's-loyalty-program-slider-arrows': true,
's-loyalty-program-tabs-hider': prizesGroups.length < 2 || prizesCount < 2,
} }, h("salla-tabs", null, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title)))), prizesGroups.map((group) => (h("salla-tab-content", { slot: "content", name: group.type }, h("salla-slider", { id: group.type, type: "default", "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":12,"breakpoints":{"768":{"slidesPerView":3,"spaceBetween":24,"freeMode":false,"speed":300}}}' }, h("div", { slot: "items" }, group.items.map((prize) => h("salla-reward-card", { prize: prize, onAreaClick: () => {
this.currentPrize = prize;
closeModals(() => this.detailsModal.open());
}, 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 }))));
}
static get is() { return "salla-loyalty-panel"; }
static get originalStyleUrls() {
return {
"$": ["salla-loyalty-program.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-loyalty-program.css"]
};
}
static get properties() {
return {
"prizePoints": {
"type": "any",
"attribute": "prize-points",
"mutable": true,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The exchanged prize point"
},
"getter": false,
"setter": false,
"reflect": true
},
"customerPoints": {
"type": "number",
"attribute": "customer-points",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Available customer points with which they can exchange."
},
"getter": false,
"setter": false,
"reflect": true
},
"prizeTitle": {
"type": "string",
"attribute": "prize-title",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The prize title"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get states() {
return {
"currentPrize": {}
};
}
}
__decorate([
TrackedPromise(async () => {
const { data } = await salla.loyalty.getProgram();
return normalizeLoyaltyData(data);
}, { initialData: { prizes: [], prizes_count: 0 } })
], SallaLoyaltyPanel.prototype, "program", void 0);
__decorate([
TrackedPromise(async () => {
const { data } = await salla.loyalty.getPoints();
return data.points;
}, { initialData: null })
], SallaLoyaltyPanel.prototype, "points", void 0);