@salla.sa/twilight-components
Version:
Salla Web Component
253 lines (247 loc) • 15.5 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
import { s as setTranslations } from './translations.js';
import { n as normalizeLoyaltyData, c as closeModals } from './functions.js';
import { R as Rate } from './star2.js';
import { C as Cancel } from './cancel.js';
import { S as SIPercentage, a as SILayoutGrid } from './percentage.js';
import { S as SIShipping } from './shipping.js';
import { C as Cart2 } from './cart2.js';
import { T as TrackedPromise } from './tracked-promise.js';
import { d as defineCustomElement$m } from './salla-add-product-button2.js';
import { d as defineCustomElement$l } from './salla-badge2.js';
import { d as defineCustomElement$k } from './salla-button2.js';
import { d as defineCustomElement$j } from './salla-count-down2.js';
import { d as defineCustomElement$i } from './salla-list-tile2.js';
import { d as defineCustomElement$h } from './salla-loading2.js';
import { d as defineCustomElement$g } from './salla-modal2.js';
import { d as defineCustomElement$f } from './salla-product-availability2.js';
import { d as defineCustomElement$e } from './salla-product-card2.js';
import { d as defineCustomElement$d } from './salla-products-slider2.js';
import { d as defineCustomElement$c } from './salla-progress-bar2.js';
import { d as defineCustomElement$b } from './salla-quick-buy2.js';
import { d as defineCustomElement$a } from './salla-reward-action2.js';
import { d as defineCustomElement$9 } from './salla-reward-card2.js';
import { d as defineCustomElement$8 } from './salla-reward-details2.js';
import { d as defineCustomElement$7 } from './salla-reward-exchange2.js';
import { d as defineCustomElement$6 } from './salla-slider2.js';
import { d as defineCustomElement$5 } from './salla-tab-content2.js';
import { d as defineCustomElement$4 } from './salla-tab-header2.js';
import { d as defineCustomElement$3 } from './salla-tabs2.js';
import { d as defineCustomElement$2 } from './salla-tel-input2.js';
var PrizeImage = `<svg xmlns="http://www.w3.org/2000/svg" width="77" height="77" fill="none" viewBox="0 0 57 57"><rect width="56.3" height="55.9" x=".4" y=".2" fill="#FFF5E5" rx="27.9"/><g clip-path="url(#a)"><path fill="#EE9D0D" d="M16.7 27.5h17.5v12.2a1 1 0 0 1-1 1H17.7a1 1 0 0 1-1-1V27.5Z"/><path fill="#C7830B" d="M34.2 27.8v6l-6.8-6.3H34l.3.3Z"/><path fill="#C7830B" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EA2B2D" d="m29.9 15.8-.3.1a2.4 2.4 0 0 0-1.4 1.5l-.2.8-.4.2a2.4 2.4 0 0 0-1.1 1.4l4.2 3.9L33 21l.2-2.9a2.4 2.4 0 0 0-3.3-2.4ZM41.1 26.3v.2a2.4 2.4 0 0 1-1.5 1.6l-.7.3-.2.3a2.4 2.4 0 0 1-1.3 1.3l-4.2-4 2.4-2.5 2.9-.3a2.4 2.4 0 0 1 2.6 3.1Z"/><path fill="#CB2527" d="M23.7 27.5h3.5v13.1h-3.5V27.5Z"/><path fill="#EA2B2D" d="M16.7 32.3h17.5v3.5H16.7v-3.5Z"/><path fill="#CB2527" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EE9D0D" d="M25.3 18.7 38.6 31a1 1 0 0 1 0 1.4l-2.3 2.4-14.7-13.7 2.3-2.5a1 1 0 0 1 1.4 0Z"/><path fill="#CB2527" d="m30.3 23.4 3.2 3-3 3.2-3.2-3 3-3.2ZM31.8 22.8a.4.4 0 0 1-.3-.1l-.3-.4A5.9 5.9 0 0 1 30 18a.4.4 0 0 1 .9 0 5 5 0 0 0 1 3.7l.3.3a.4.4 0 0 1-.4.7Z"/><path fill="#EA2B2D" d="M30.7 23.7c-1.9.7-3.8 1-5.7.9h-1.1l1.9 1.7-.6 1.9 1.8-.6c1.7-.5 3.2-1.4 4.6-2.5l.3-.2-1.2-1.2Z"/><path fill="#CB2527" d="M37.8 26.4c-1.1 0-2.3-.3-3.2-1l-.4-.2a.4.4 0 0 1 0-.8.4.4 0 0 1 .5 0l.3.3a5 5 0 0 0 3.7.7.4.4 0 1 1 .2 1 6 6 0 0 1-1 0Z"/><path fill="#EA2B2D" d="M33.2 26c-.5 2-.7 3.9-.5 5.8l.1 1.1-1.9-1.8-1.8.7.4-1.8c.4-1.7 1.2-3.3 2.2-4.8l.2-.3 1.3 1.2Z"/><path fill="#6699CE" d="M21.5 17.4a.9.9 0 1 0 0-1.7.9.9 0 0 0 0 1.7Z"/><path fill="#FAA6B2" d="M16.7 27.5a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z"/><path fill="#A6DEFF" d="M18.4 17.9a.4.4 0 0 1-.4-.3v-.1a1.4 1.4 0 0 0-1.3-1 .4.4 0 0 1-.2-.8h.2a2.3 2.3 0 0 1 2.1 1.5.4.4 0 0 1-.4.7ZM20.6 25.6h-.2v-.1a1 1 0 0 0-1.1 0 .4.4 0 0 1-.5-.8 1.8 1.8 0 0 1 2 0 .4.4 0 0 1-.2.9Z"/><path fill="#EEB436" d="m17.6 18.6 1.3 1.2 1.8-.4-.7 1.7.9 1.6-1.8-.2-1.2 1.3-.4-1.8-1.7-.7 1.6-.9.2-1.8ZM23 26.6l-.5 1.8 1.2 1.3-1.8.2-1 1.5-.6-1.7-1.8-.4 1.4-1.1-.2-1.9 1.6 1 1.6-.7Z"/><path fill="#F72D2F" d="m33.2 26-2.5-2.3L33 21a4 4 0 0 1 2.6 2.4l-2.4 2.6Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M15.8 15.7h25.4v25H15.8z"/></clipPath></defs></svg>`;
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 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: Cart2 }),
};
const SallaLoyaltyPanel$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyPanel extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* 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: Cancel }))))));
}
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: Rate }), 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 style() { return sallaLoyaltyProgramCss; }
}, [0, "salla-loyalty-panel", {
"prizePoints": [1544, "prize-points"],
"customerPoints": [1538, "customer-points"],
"prizeTitle": [1537, "prize-title"],
"currentPrize": [32]
}]);
__decorate([
TrackedPromise(async () => {
const { data } = await salla.loyalty.getProgram();
return normalizeLoyaltyData(data);
}, { initialData: { prizes: [], prizes_count: 0 } })
], SallaLoyaltyPanel$1.prototype, "program", void 0);
__decorate([
TrackedPromise(async () => {
const { data } = await salla.loyalty.getPoints();
return data.points;
}, { initialData: null })
], SallaLoyaltyPanel$1.prototype, "points", void 0);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-loyalty-panel", "salla-add-product-button", "salla-badge", "salla-button", "salla-count-down", "salla-list-tile", "salla-loading", "salla-modal", "salla-product-availability", "salla-product-card", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-reward-card", "salla-reward-details", "salla-reward-exchange", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
components.forEach(tagName => { switch (tagName) {
case "salla-loyalty-panel":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaLoyaltyPanel$1);
}
break;
case "salla-add-product-button":
if (!customElements.get(tagName)) {
defineCustomElement$m();
}
break;
case "salla-badge":
if (!customElements.get(tagName)) {
defineCustomElement$l();
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$k();
}
break;
case "salla-count-down":
if (!customElements.get(tagName)) {
defineCustomElement$j();
}
break;
case "salla-list-tile":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "salla-product-availability":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "salla-product-card":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "salla-products-slider":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "salla-progress-bar":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "salla-quick-buy":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "salla-reward-action":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "salla-reward-card":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "salla-reward-details":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "salla-reward-exchange":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-tab-content":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-tab-header":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-tabs":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-tel-input":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const SallaLoyaltyPanel = SallaLoyaltyPanel$1;
const defineCustomElement = defineCustomElement$1;
export { SallaLoyaltyPanel, defineCustomElement };