@salla.sa/twilight-components
Version:
Salla Web Component
135 lines (134 loc) • 10.5 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, nearestLowerMultiple, normalizeLoyaltyData } from "./functions";
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 SIUserAdd from "../../assets/svg/user-add.svg";
import SIGiftSharing from "../../assets/svg/gift-sharing.svg";
import SICartUpload from "../../assets/svg/cart-upload.svg";
import SIGift from "../../assets/svg/gift.svg";
import { TrackedPromise } from "../../Helpers/tracked-promise";
import anime from "animejs";
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 SallaLoyaltyProgram {
constructor() {
/**
* prize to show in details or exchange modals
*/
this.currentPrize = null;
/**
* collapsed state of points list
*/
this.collapsed = true;
this.animatedPoints = 0;
this.handleExchangeSucceeded = () => {
this.points();
this.program();
};
}
componentWillLoad() {
return salla.onReady()
.then(() => salla.lang.onLoaded())
.then(() => setTranslations())
.then(() => {
this.program();
this.points();
salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
})
.catch((error) => salla.logger.error(error));
}
disconnectedCallback() {
salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
}
getOutlineItem(number, title, description) {
const icons = {
1: h("span", { innerHTML: SIUserAdd }),
2: h("span", { innerHTML: SIGiftSharing }),
3: h("span", { innerHTML: SICartUpload }),
};
return (h("li", { class: "s-loyalty-program-item" }, h("div", { class: "s-loyalty-program-content" }, h("span", { class: "s-loyalty-program-icon-container" }, h("span", { class: "s-loyalty-program-text-gradient" }, number), h("span", { class: "s-loyalty-program-icon" }, icons[number])), h("div", { class: "s-loyalty-program-title" }, title), h("div", { class: "s-loyalty-program-description" }, description))));
}
render() {
if (this.program.status === 'error') {
return h("p", null, salla.lang.get('common.errors.error_occured'));
}
const displayedPoints = this.program.data.points.slice(0, this.collapsed ? nearestLowerMultiple(this.program.data.points.length) : this.program.data.points.length);
const prizesGroups = this.program.data.prizes;
const prizesCount = this.program.data.prizes_count;
return (h("div", { class: "s-loyalty-program-container" }, h("salla-loyalty-hero", { name: this.program.data.name, description: this.program.data.description, image: this.program.data.image }, salla.config.isUser()
? h("div", { slot: "crosspoint", class: "s-loyalty-program-profile-wrapper" }, h("div", { class: "s-loyalty-program-profile-container" }, h("div", { class: "s-loyalty-program-profile-points-section" }, h("h2", { class: "s-loyalty-program-profile-label" }, salla.lang.get('pages.loyalty_program.your_points')), h("p", { class: "s-loyalty-program-profile-points" }, h("span", { class: "s-loyalty-program-profile-points-value" }, !!this.animatedPoints ? this.animatedPoints : this.points.data), "\u00A0", salla.lang.get('pages.loyalty_program.point'))), h("div", { class: "s-loyalty-program-profile-icon" }, h("span", { innerHTML: SIGift }))))
: h("button", { slot: "action", onClick: () => salla.event.dispatch('login::open'), class: {
's-loyalty-program-login-action': true,
's-loyalty-program-login-action-dark': !this.program.data.image,
's-loyalty-program-login-action-light': !!this.program.data.image,
} }, salla.lang.get('blocks.header.login'))), h("div", { class: "s-loyalty-program-outline-section" }, h("section", { class: "s-loyalty-program-section" }, h("header", { class: "s-loyalty-program-header" }, h("h1", { class: "s-loyalty-program-main-title" }, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", { class: "s-loyalty-program-subtitle" }, salla.lang.get('pages.loyalty_program.three_simple_steps'))), h("ol", { class: "s-loyalty-program-list" }, this.getOutlineItem(1, salla.lang.get('pages.loyalty_program.register'), salla.lang.get('pages.loyalty_program.create_account')), this.getOutlineItem(2, salla.lang.get('pages.loyalty_program.earn_points'), salla.lang.get('pages.loyalty_program.complete_tasks')), this.getOutlineItem(3, salla.lang.get('pages.loyalty_program.redeem_rewards'), salla.lang.get('pages.loyalty_program.enjoy_rewards'))))), h("div", { class: "s-loyalty-program-points-wrapper" }, h("section", { class: "s-loyalty-program-points-section" }, h("header", { class: "s-loyalty-program-points-header" }, h("h1", { class: "s-loyalty-program-points-title" }, this.program.data.promotion_title), h("p", { class: "s-loyalty-program-points-description" }, this.program.data.promotion_description)), h("div", { class: "s-loyalty-program-points-spacer" }), h("ul", { class: {
's-loyalty-program-points-list-one': this.program.data.points.length === 1,
's-loyalty-program-points-list-two': this.program.data.points.length === 2,
's-loyalty-program-points-list-multi': this.program.data.points.length > 2,
} }, displayedPoints.map(point => (h("li", null, h("salla-loyalty-point", { point: point }))))), h("div", { class: "s-loyalty-program-points-spacer" }), nearestLowerMultiple(this.program.data.points.length) !== this.program.data.points.length && h("button", { class: "s-loyalty-program-points-more-button", onClick: () => this.collapsed = !this.collapsed }, this.collapsed
? h("span", null, salla.lang.get('pages.loyalty_program.show_more'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "+"))
: h("span", null, salla.lang.get('pages.loyalty_program.show_less'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "-"))))), this.program.status !== 'success' ? '' : h("div", { class: "s-loyalty-program-rewards-container s-loyalty-program-slider-arrows-edges" }, h("section", { class: {
's-loyalty-program-tabs-hider': prizesGroups.length <= 2 || prizesCount <= 4,
} }, h("h1", { class: "s-loyalty-program-rewards-heading-mobile" }, salla.lang.get('pages.loyalty_program.rewards')), h("salla-tabs", null, h("div", { slot: "header", class: "s-loyalty-program-rewards-tab-items" }, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title))))), h("h1", { slot: "header", class: "s-loyalty-program-rewards-heading-desktop" }, salla.lang.get('pages.loyalty_program.rewards')), 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":4,"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-program"; }
static get originalStyleUrls() {
return {
"$": ["salla-loyalty-program.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-loyalty-program.css"]
};
}
static get states() {
return {
"currentPrize": {},
"collapsed": {},
"animatedPoints": {}
};
}
}
__decorate([
TrackedPromise(async function () {
const { data } = await salla.loyalty.getProgram();
return normalizeLoyaltyData(data);
}, { initialData: { points: [], prizes: [], prizes_count: 0 } })
], SallaLoyaltyProgram.prototype, "program", void 0);
__decorate([
TrackedPromise(async function () {
const { data } = await salla.loyalty.getPoints();
anime({
targets: { value: 0 },
value: data.points ?? 0,
round: 1,
easing: 'easeOutQuad',
duration: 2000,
update: (anim) => {
this.animatedPoints = anim.animations[0].currentValue;
}
});
return data.points;
})
], SallaLoyaltyProgram.prototype, "points", void 0);