@salla.sa/twilight-components
Version:
Salla Web Component
316 lines (306 loc) • 20.3 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { R as Rate } from './star2.js';
import { C as Cancel } from './cancel.js';
import { d as defineCustomElement$b } from './salla-button2.js';
import { d as defineCustomElement$a } from './salla-list-tile2.js';
import { d as defineCustomElement$9 } from './salla-loading2.js';
import { d as defineCustomElement$8 } from './salla-modal2.js';
import { d as defineCustomElement$7 } from './salla-placeholder2.js';
import { d as defineCustomElement$6 } from './salla-skeleton2.js';
import { d as defineCustomElement$5 } from './salla-slider2.js';
import { d as defineCustomElement$4 } from './salla-tab-content2.js';
import { d as defineCustomElement$3 } from './salla-tab-header2.js';
import { d as defineCustomElement$2 } from './salla-tabs2.js';
var Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<title>star3</title>
<defs>
<style>
.a {
fill: none !important;
}
.b {
fill: #ff9e01;
}
.c {
fill: #fff;
opacity: 0.1;
}
</style>
</defs>
<g transform="translate(-683 -269)">
<rect class="a" width="80" height="80" transform="translate(683 269)" />
<g transform="translate(684.539 261.216)">
<path class="b"
d="M110.117,37.062,90.024,35.2,82.043,16.665a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l17.351-10.3,17.351,10.3a1.61,1.61,0,0,0,2.393-1.739L95.871,53.192l15.16-13.318A1.61,1.61,0,0,0,110.117,37.062Z"
transform="translate(-42.104 -4.011)" />
<g transform="translate(0 10.971)">
<path class="b"
d="M93.54,12.016c1.024,1.423,3.915,7.533,5.568,11.094a.559.559,0,0,1-.891.641c-2.853-2.7-7.73-7.377-8.754-8.8a2.512,2.512,0,0,1,4.077-2.935Z"
transform="translate(-75.621 -10.971)" />
<path class="b"
d="M360.909,12.016c-1.024,1.423-3.915,7.533-5.568,11.094a.559.559,0,0,0,.891.641c2.853-2.7,7.73-7.377,8.754-8.8a2.512,2.512,0,0,0-4.077-2.935Z"
transform="translate(-301.908 -10.971)" />
<path class="b"
d="M427.538,284.659c-1.667-.543-8.366-1.441-12.261-1.934a.559.559,0,0,0-.34,1.044c3.436,1.9,9.377,5.123,11.044,5.666a2.512,2.512,0,0,0,1.558-4.776Z"
transform="translate(-352.351 -241.894)" />
<path class="b"
d="M1.734,284.659c1.667-.543,8.366-1.441,12.261-1.934a.559.559,0,0,1,.34,1.044c-3.436,1.9-9.377,5.123-11.044,5.666a2.512,2.512,0,0,1-1.558-4.776Z"
transform="translate(0 -241.894)" />
<path class="b"
d="M239.794,412.414c0-1.753,1.224-8.4,1.963-12.257a.559.559,0,0,1,1.1,0c.739,3.855,1.963,10.5,1.963,12.257a2.512,2.512,0,0,1-5.023,0Z"
transform="translate(-203.768 -341.301)" />
</g>
<path class="c"
d="M84.945,23.4l-2.9-6.74a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l2.309-1.371A125,125,0,0,1,84.945,23.4Z"
transform="translate(-42.104 -4.011)" />
</g>
</g>
</svg>
`;
var GiftImg = `<svg xmlns="http://www.w3.org/2000/svg" width="54.079" height="53.191" viewBox="0 0 54.079 53.191"><defs><style>.a{fill:#ee9d0d;}.b{fill:#c7830b;}.c{fill:#ea2b2d;}.d{fill:#cb2527;}.e{fill:#6699ce;}.f{fill:#faa6b2;}.g{fill:#a6deff;}.h{fill:#eeb436;}.i{fill:#f72d2f;}</style></defs><path class="a" d="M40,248H77.3v25.88a2.1,2.1,0,0,1-2.1,2.1H42.1a2.1,2.1,0,0,1-2.1-2.1Z" transform="translate(-38.135 -222.787)"/><path class="b" d="M250.632,248.711v12.755L236.2,248h13.67Z" transform="translate(-211.463 -222.787)"/><path class="b" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="c" d="M226.194,32.048l-.5.185a5.035,5.035,0,0,0-3.072,3.292l-.468,1.585-.759.414a5.035,5.035,0,0,0-2.422,3l8.865,8.271,5.09-5.456.262-6.205a5.191,5.191,0,0,0-7-5.083Z" transform="translate(-196.246 -31.722)"/><path class="c" d="M358.628,175.48l-.15.509a5.034,5.034,0,0,1-3.072,3.292l-1.55.577-.359.785a5.034,5.034,0,0,1-2.822,2.624L341.81,175l5.09-5.455,6.172-.69a5.191,5.191,0,0,1,5.555,6.629Z" transform="translate(-304.761 -152.837)"/><path class="d" d="M168,248h7.461v27.978H168Z" transform="translate(-151.213 -222.787)"/><path class="c" d="M40,336H77.3v7.461H40Z" transform="translate(-38.135 -300.528)"/><path class="d" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="a" d="M2.1,0H40.8a2.1,2.1,0,0,1,2.1,2.1V9.326H0V2.1A2.1,2.1,0,0,1,2.1,0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 18.641, 4.976)"/><path class="d" d="M0,0H9.326V9.326H0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 30.912, 16.424)"/><path class="d" d="M286.857,79.389a.931.931,0,0,1-.74-.365l-.615-.8a12.516,12.516,0,0,1-2.528-9,.933.933,0,0,1,1.855.2,10.66,10.66,0,0,0,2.153,7.667l.615.8a.933.933,0,0,1-.739,1.5Z" transform="translate(-252.718 -64.113)"/><path class="c" d="M185.485,178.151l-.039.014a30.78,30.78,0,0,1-12.034,1.906l-2.381-.1,4.092,3.817-1.181,4,3.728-1.206a30.775,30.775,0,0,0,9.833-5.315l.71-.572Z" transform="translate(-153.891 -161.081)"/><path class="d" d="M363.834,194.779a12.51,12.51,0,0,1-6.93-2.1l-.843-.559a.933.933,0,1,1,1.031-1.554l.842.558a10.659,10.659,0,0,0,7.8,1.618.933.933,0,1,1,.328,1.836A12.663,12.663,0,0,1,363.834,194.779Z" transform="translate(-316.982 -171.914)"/><path class="c" d="M275,202.524l-.012.04a30.776,30.776,0,0,0-1.069,12.137l.265,2.369-4.092-3.817-3.909,1.455.945-3.8a30.776,30.776,0,0,1,4.622-10.177l.521-.748Z" transform="translate(-237.949 -180.364)"/><circle class="e" cx="1.865" cy="1.865" r="1.865" transform="translate(10.259 0.032)"/><circle class="f" cx="1.865" cy="1.865" r="1.865" transform="translate(0 21.482)"/><path class="g" d="M36.663,36.663a.933.933,0,0,1-.885-.638l-.048-.143a2.946,2.946,0,0,0-2.8-2.017.933.933,0,1,1,0-1.865A4.808,4.808,0,0,1,37.5,35.292l.048.143a.933.933,0,0,1-.885,1.228Z" transform="translate(-31.067 -31.968)"/><path class="g" d="M79.493,194.438a.929.929,0,0,1-.506-.15l-.185-.12a2.074,2.074,0,0,0-2.192-.047.933.933,0,0,1-.947-1.607,3.929,3.929,0,0,1,4.153.088l.185.12a.933.933,0,0,1-.508,1.716Z" transform="translate(-69.235 -173.283)"/><path class="h" d="M27.751,85.141l2.88,2.644,3.811-.874-1.624,3.556,2.008,3.354-3.884-.446-2.569,2.946L27.6,92.49,24,90.957l3.4-1.922Z" transform="translate(-24 -78.914)"/><path class="h" d="M82.174,227.375l-.959,3.772,2.564,2.928-3.884.254L77.9,237.673l-1.442-3.615-3.8-.862,2.993-2.488-.353-3.876,3.291,2.078Z" transform="translate(-66.992 -204.086)"/><path class="i" d="M300.471,141.9l-5.455-5.09,5.09-5.456a8.342,8.342,0,0,1,5.455,5.09Z" transform="translate(-263.422 -119.737)"/></svg>`;
const sallaLoyaltyCss = "";
const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.selectedItem = undefined;
/**
* Does the merchant allow to login using email
*/
this.allowEmail = true;
/**
* Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
*/
this.allowMobile = true;
/**
* Does the merchant require registration with email & mobile
*/
this.requireEmail = false;
salla.event.on('loyalty::open', () => this.open());
salla.auth.event.onLoggedIn(() => {
this.is_loggedin = true;
});
salla.onReady(() => {
this.is_loggedin = salla.config.isUser();
});
salla.lang.onLoaded(() => {
this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');
this.translationLoaded = true;
});
salla.cart.event.onUpdated(cart => {
var _a, _b;
this.prizePoints = (_a = cart.loyalty.prize) === null || _a === void 0 ? void 0 : _a.points;
this.prizeTitle = (_b = cart.loyalty.prize) === null || _b === void 0 ? void 0 : _b.title;
this.customerPoints = cart.loyalty.customer_points || this.customerPoints;
});
}
setSelectedPrizeItem(item) {
var _a;
if (!this.selectedItem || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id) != item.id) {
this.selectedItem = item;
}
else {
this.selectedItem = undefined;
}
}
handleLongText(text) {
if (text.length > 150) {
return text.substring(0, 150) + '...';
}
return text;
}
prizeItem(item) {
var _a;
let klass = {
's-loyalty-prize-item-selected': !!this.selectedItem && ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id) == item.id,
"s-loyalty-prize-item": true
};
return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), h("div", { class: "s-loyalty-prize-item-title" }, item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, this.handleLongText(item.description)), h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), h("div", { class: "s-loyalty-prize-item-check" }, h("div", null))));
}
getConfirmationModal() {
var _a, _b;
return [
h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, salla.lang.get('pages.loyalty_program.exchange_points')), h("div", { slot: "description" }, salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange'), " ( ", h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ", salla.lang.get('pages.loyalty_program.point'), " ) ", salla.lang.get('pages.loyalty_program.for'), " ( ", h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )")),
h("div", { class: "s-loyalty-confirmation-actions" }, h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, salla.lang.get('pages.loyalty_program.cancellation')), h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, salla.lang.get('pages.loyalty_program.confirm')))
];
}
getAfterExchangeUI() {
return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: Cancel })))));
}
/**
* Show loyalty modal
*/
async open() {
var _a;
if (!this.is_loggedin)
return salla.event.dispatch('login::open');
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.open();
return await salla.loyalty.getProgram()
.then(response => {
this.loyaltyProgram = response.data;
})
.catch(e => {
var _a, _b, _c, _d;
this.hasError = true;
this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
})
.finally(() => { var _a; return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.stopLoading(); });
}
/**
*
* Hide loyalty modal
*/
async close() {
return this.modal.close();
}
/**
*
* Cancel Exchanged prizes
*/
async resetExchange() {
return await salla.loyalty.reset();
}
/**
* Open Confirmation modal
*/
async openConfirmation() {
return await this.modal.close()
.then(() => { var _a; return (_a = this.confirmationModal) === null || _a === void 0 ? void 0 : _a.open(); })
.catch(e => console.log(e));
}
/**
* Cancel process
*/
async cancelProcess() {
return await this.confirmationModal.close()
.then(() => this.selectedItem = null)
.catch(e => console.log(e));
}
/**
* Exchange loyalty points with the selected prize item
* @param {number} loyalty_prize_id
*
*/
async exchangeLoyaltyPoint() {
var _a;
this.buttonLoading = true;
return await salla.loyalty.exchange((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id)
.then(() => this.selectedItem.key == "FREE_PRODUCT" && salla.url.is_page('cart') && window.location.reload())
.finally(() => {
this.buttonLoading = false;
this.cancelProcess();
});
}
render() {
// A. when the exchange is done, and we have the final prize points to show it in cart page
if (this.prizePoints) {
return this.getAfterExchangeUI();
}
//todo:: change all translations to states
return [
h("slot", { name: 'widget' }, this.customerPoints ?
h("salla-list-tile", { class: 's-loyalty-widget' }, h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Rate }), h("div", { slot: "subtitle" }, this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints }) : this.guestMessage, h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')))) :
''),
h("salla-modal", { noPadding: true, width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item swiper-slide" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !this.hasError && !!this.loyaltyProgram ?
[
h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize, index) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-slider", { class: "s-loyalty-slider", loop: false, "controls-outer": true, id: 'loyalty-popup-slider-' + index, type: "carousel" }, h("div", { slot: 'items' }, prize.items.map((item) => this.prizeItem(item))))))),
h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
]
: h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : '')),
];
}
static get style() { return sallaLoyaltyCss; }
}, [4, "salla-loyalty", {
"prizePoints": [1544, "prize-points"],
"customerPoints": [1538, "customer-points"],
"prizeTitle": [1537, "prize-title"],
"allowEmail": [4, "allow-email"],
"allowMobile": [4, "allow-mobile"],
"requireEmail": [4, "require-email"],
"guestMessage": [1025, "guest-message"],
"loyaltyProgram": [32],
"buttonLoading": [32],
"selectedItem": [32],
"askConfirmation": [32],
"is_loggedin": [32],
"hasError": [32],
"errorMessage": [32],
"translationLoaded": [32],
"open": [64],
"close": [64],
"resetExchange": [64],
"exchangeLoyaltyPoint": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-loyalty", "salla-button", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs"];
components.forEach(tagName => { switch (tagName) {
case "salla-loyalty":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaLoyalty$1);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "salla-list-tile":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "salla-placeholder":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "salla-skeleton":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-tab-content":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-tab-header":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-tabs":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const SallaLoyalty = SallaLoyalty$1;
const defineCustomElement = defineCustomElement$1;
export { SallaLoyalty, defineCustomElement };
//# sourceMappingURL=salla-loyalty.js.map
//# sourceMappingURL=salla-loyalty.js.map