@salla.sa/twilight-components
Version:
Salla Web Component
258 lines (247 loc) • 20.1 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-C7gO-zm5.js');
var functions = require('./functions-BZosuGw4.js');
var gift = require('./gift-DbNivqYO.js');
var tag = require('./tag-D-PcUR33.js');
var check = require('./check-BnVBPQNp.js');
var cancel = require('./cancel-B5SbMYEk.js');
var trackedPromise = require('./tracked-promise-CMALwoa6.js');
const sallaLoyaltyProgramCss$3 = "";
const SallaRewardAction = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.actionClick = index.createEvent(this, "actionClick");
this.isShopNow = (prize) => {
if (!(salla.config.get('store.features') || []).includes('loyalty-system-v2')) {
return false;
}
return prize.key?.toLowerCase() === 'free_product';
};
this.handleClick = (e) => {
if (salla.config.isGuest()) {
functions.closeModals(() => salla.event.dispatch('login::open'));
return;
}
this.actionClick.emit(e);
};
}
render() {
return (index.h("div", { key: '95d6e753d49c7cb69e6f5e25ef6ccf3f916f4022', class: "s-loyalty-program-rewards-modal-action" }, this.isShopNow(this.prize) ? (index.h("a", { href: this.prize.prize_url || salla.url.get(''), class: {
's-loyalty-program-rewards-action-base': true,
's-loyalty-program-rewards-action-on': true,
} }, salla.lang.get('pages.loyalty_program.shop_now'))) : (index.h("button", { onClick: this.handleClick, class: {
's-loyalty-program-rewards-action-base': true,
's-loyalty-program-rewards-action-on': true,
} }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
}
};
SallaRewardAction.style = sallaLoyaltyProgramCss$3;
const sallaLoyaltyProgramCss$2 = "";
const SallaRewardCard = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.areaClick = index.createEvent(this, "areaClick");
this.actionClick = index.createEvent(this, "actionClick");
}
render() {
return (index.h(index.Host, { key: '900a20618e1b3ce82778aa99715baf61689f3eee', class: "s-loyalty-program-reward-host" }, index.h("div", { key: '95b326008c2799ee7d38b48bc57e0860a9386184', class: "s-loyalty-program-reward-container" }, index.h("div", { key: 'd846dc36fa4494ed9ac6152a982f18598936969f', onClick: (e) => this.areaClick.emit(e), role: "button" }, index.h("div", { key: 'b8d23796827e4b07f6c271c50fa0e4aeb59f82fc', class: "s-loyalty-program-reward-img" }, index.h("img", { key: '04a52401941d8a731e8d310397b1ad735bfe44db', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), index.h("div", { key: '64fa967c98d615d7b16859c9d14b60e0c53fc5aa', class: "s-loyalty-program-reward-content" }, index.h("div", { key: 'bb8c34ce8f3bcec9599c87b56bea6abd793187df', class: "s-loyalty-program-reward-points" }, index.h("salla-badge", { key: 'f7d0a396cf754d1e8f9e8fddee53a7d545311148', size: "xs" }, index.h("span", { key: '36f4e1ed873f1a231e2d5e51a2a8cc36bdcedfee', innerHTML: gift.SIGift }), index.h("span", { key: '638b3ecefbfcb424869987ab33478e67d9b5d9b8', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), index.h("div", { key: '6f8386fccf201836d76a86e7fe5e6d3461bb5540', class: "s-loyalty-program-reward-title" }, index.h("span", { key: '6d6692c44d6bac35da40108514471a3c56884d81' }, this.prize.group_title)), index.h("div", { key: '6ad9ad90728ac7f882ff8db9cfadb5a6e12f3e25', class: "s-loyalty-program-reward-name" }, index.h("div", { key: 'ef4344c7cb67785a4cd66d36e303e40a610a5375', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), index.h("div", { key: '5eee5a4f8b10cd790ce41e4a99d94f86bd26dd3b', class: "p-4" }, index.h("slot", { key: '359d50033cdd3cce41901401bf0b75ba9c5aea1f', name: "action" }, index.h("button", { key: 'ea7aa1c5cd50937a27cef7580e508a1e3f8f852d', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
}
};
SallaRewardCard.style = sallaLoyaltyProgramCss$2;
const sallaLoyaltyProgramCss$1 = "";
var __decorate$1 = (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 c = (...args) => args.map(i => 's-loyalty-program-' + i).join(' ');
const SallaRewardDetails = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.actionClick = index.createEvent(this, "actionClick");
this.refreshKey = Date.now();
}
handlePrizeChange() {
this.refreshKey = Date.now();
}
componentWillLoad() {
if (this.category.status === 'idle') {
this.category();
}
if (this.brand.status === 'idle') {
this.brand();
}
}
getTermsAndConditions() {
const minimumAmount = Number((this.prize.order_minimum_amount || '0').split('.')[0]) || 0;
const maximumAmount = Number((this.prize.coupon_maximum_amount || '0').split('.')[0]) || 0;
const termsAndConditions = [];
if (minimumAmount) {
termsAndConditions.push([
salla.lang.get('pages.loyalty_program.order_minimum_amount'),
`${minimumAmount} ${salla.lang.get(`currency.${(salla.config.get('user.currency_code') || '').toLowerCase()}`)}`,
]);
}
if (maximumAmount) {
termsAndConditions.push([
salla.lang.get('pages.loyalty_program.coupon_maximum_amount'),
`${maximumAmount} ${salla.lang.get(`currency.${(salla.config.get('user.currency_code') || '').toLowerCase()}`)}`,
]);
}
return termsAndConditions;
}
findItems(ids) {
if (!ids?.length)
return [];
const brands = this.brand.data;
const categories = this.category.data;
// id_ is the numeric ID from the API (e.g. 740744759); id is a string hash (e.g. "zEVZGx"). included_category_ids/included_brand_ids are number[], so id_ is correct here.
return brands.concat(categories).filter(i => ids.includes(i.id_));
}
getIncludedItems(items, ids) {
if (items?.length) {
return items;
}
if (ids?.length) {
return this.findItems(ids);
}
return [];
}
getProductIds(ids) {
return ids || [];
}
getItemsMarkers(key) {
if (key === 'both') {
return this.getItemsMarkers('included') + this.getItemsMarkers('excluded');
}
return [
this.prize[`${key}_product_ids`]?.length || 0,
this.prize[`${key}_brand_ids`]?.length || 0,
this.prize[`${key}_category_ids`]?.length || 0,
].map(Boolean).map(Number).join('');
}
getItemsMarkersText() {
// Check if prize type is free_shipping
if (this.prize.key === 'FREE_SHIPPING') {
return salla.lang.get('pages.loyalty_program.redeem_for_free_shipping');
}
switch (this.getItemsMarkers('included')) {
case '001':
return salla.lang.get('pages.loyalty_program.redeem_on_specific_products');
case '010':
return salla.lang.get('pages.loyalty_program.redeem_on_specific_brands');
case '100':
return salla.lang.get('pages.loyalty_program.redeem_on_specific_categories');
case '000':
return salla.lang.get('pages.loyalty_program.redeem_on_all_products');
default:
return salla.lang.get('pages.loyalty_program.redeem_on_specific_products');
}
}
getCategoriesJsx(items, title) {
return !items.length ? '' : index.h("div", { class: c('reward-details-categories-wrapper') }, index.h("div", { class: c('reward-details-categories') }, index.h("h2", { class: c('reward-details-categories-heading') }, title), index.h("ul", { class: c('reward-details-categories-list') }, items.map((category) => {
return (index.h("li", null, index.h("a", { href: category.urls?.customer || category.url || category.lingual_urls?.[0], class: c('reward-details-categories-item') }, index.h("span", { innerHTML: tag.SITag }), index.h("span", { class: c('reward-details-categories-item-content') }, category.name))));
}))));
}
getBrandsJsx(items, title) {
return !items.length ? '' : index.h("div", { class: c('reward-details-items-brands', 'slider-arrows-edges') }, index.h("div", null, index.h("h2", null, title), index.h("salla-slider", { id: `brands-${items.map(({ id }) => id).join('-')}`, "slider-config": '{"loop":false,"slidesPerView":"auto","spaceBetween":10}' }, index.h("div", { slot: "items" }, items.map((brand) => (index.h("a", { href: salla.url.get(functions.brand_path(brand)), class: c('reward-brand-item') }, index.h("img", { src: brand.logo || salla.url.cdn('images/s-empty.png'), alt: "" }))))))));
}
getProductsJsx(items, title) {
return !items?.length ? '' : index.h("div", { class: "s-loyalty-program-reward-details-items-products s-loyalty-program-slider-arrows-edges" }, index.h("h2", null, title), index.h("salla-products-slider", { source: "selected", sourceValue: JSON.stringify(items), "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":0,"breakpoints":{"768":{"slidesPerView":3,"freeMode":false,"speed":300}}}' }));
}
render() {
const termsAndConditions = this.getTermsAndConditions();
return (index.h("div", { key: '280d646eff094c16596ca31ee57f4bd104958f8c', class: "s-loyalty-program-reward-modal" }, index.h("div", { key: 'a39d376f170684f754c4357dc64d02b5ffbb1ed2', class: "s-loyalty-program-points-modal-header" }, index.h("h1", { key: '654e061c8852461a5248248ed2d95ef02a8a4711', class: "s-loyalty-program-points-modal-info" }, !salla.url.is_page('cart') ? ''
: index.h("button", { class: "s-loyalty-program-back-btn", onClick: () => functions.closeModals(() => salla.event.dispatch('modal::open', 'loyalty-rewards-modal')) }, index.h("span", { class: {
'sicon-arrow-right': document.documentElement.getAttribute('dir') === 'rtl',
'sicon-arrow-left': document.documentElement.getAttribute('dir') === 'ltr',
} })), this.prize.name)), index.h("div", { key: '8dce07ce81b0d6879efc0cba88523b6d3daf42bb', class: "s-loyalty-program-modal-scrollable-content" }, index.h("div", { key: 'f288d7483911af0bbc17a824ee4397ad0b3ef367', class: "s-loyalty-program-reward-details-header" }, index.h("div", { key: '87686174a3a8c17558d0a97180cb4756a1edbefe', class: "s-loyalty-program-aspect-container" }, index.h("img", { key: '31461e1503c50715f160e75cf7ffad59939fb93c', src: this.prize.image, alt: this.prize.name })), index.h("salla-badge", { key: 'ed1fc08260885fa865279a9d2fc6af35c01e2bdc', size: "sm", bg: "light" }, index.h("span", { key: '26eec953f9c5f3fa5aa118828faec50a4477e013', innerHTML: gift.SIGift }), index.h("span", { key: 'db3bf908be0f28534e121da9e692d801d2ee6cf9', class: "s-loyalty-program-points-badge-points" }, functions.formattedPointsJsx(this.prize.cost_points)))), !termsAndConditions.length ? '' : index.h("div", { class: "s-loyalty-program-terms-and-conditions" }, index.h("h1", { class: "s-loyalty-program-terms-and-conditions-heading" }, salla.lang.get('pages.loyalty_program.terms_and_conditions')), index.h("ul", { class: "s-loyalty-program-terms-and-conditions-list" }, termsAndConditions.map(([title, points]) => (index.h("li", { class: "s-loyalty-program-terms-and-conditions-item" }, index.h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, title), index.h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, points)))))), index.h("div", { key: 'bfdc4d22117ae86f3bb2140546b4b5a8ecd35f8e', class: "s-loyalty-program-reward-info-message" }, index.h("h1", { key: 'f03b30c0372fd83e4fa7815bbd76d307c6fbe3c1', class: "s-loyalty-program-reward-info-message-heading" }, salla.lang.get('pages.loyalty_program.how_to_benefit_from_this_reward')), index.h("p", { key: '245acd0b8438230ff5d503e5819abb581f0ba14a', class: "s-loyalty-program-reward-info-message-content" }, this.getItemsMarkersText())), (this.prize.key === 'FREE_SHIPPING' || this.getItemsMarkers('both') === '000000') ? '' : index.h("div", { class: "s-loyalty-program-reward-details" }, index.h("salla-tabs", { key: this.refreshKey }, this.getItemsMarkers('included') === '000' ? '' : [
index.h("salla-tab-header", { slot: "header", name: "included", style: {
display: this.getItemsMarkers('excluded') === '000' ? 'none' : 'block',
} }, index.h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: check.SICheck }), index.h("span", null, salla.lang.get(`pages.loyalty_program.included`))),
index.h("salla-tab-content", { slot: "content", name: "included" }, index.h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.categories, this.prize.included_category_ids), salla.lang.get('pages.loyalty_program.included_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.brands, this.prize.included_brand_ids), salla.lang.get('pages.loyalty_program.included_brands')), this.getProductsJsx(this.getProductIds(this.prize.included_product_ids), salla.lang.get('pages.loyalty_program.included_products')))),
], this.getItemsMarkers('excluded') === '000' ? '' : [
index.h("salla-tab-header", { slot: "header", name: "excluded", style: {
display: this.getItemsMarkers('included') === '000' ? 'none' : 'block',
} }, index.h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: cancel.SICancel }), index.h("span", null, salla.lang.get(`pages.loyalty_program.excluded`))),
index.h("salla-tab-content", { slot: "content", name: "excluded" }, index.h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.excludedCategories, this.prize.excluded_category_ids), salla.lang.get('pages.loyalty_program.excluded_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.excludedBrands, this.prize.excluded_brand_ids), salla.lang.get('pages.loyalty_program.excluded_brands')), this.getProductsJsx(this.getProductIds(this.prize.excluded_product_ids), salla.lang.get('pages.loyalty_program.excluded_products')))),
]))), index.h("salla-reward-action", { key: 'e129546afde7da7fe66e250ce4de67d4523727be', onActionClick: e => this.actionClick.emit(e.detail), prize: this.prize })));
}
static get watchers() { return {
"prize": ["handlePrizeChange"]
}; }
};
__decorate$1([
trackedPromise.TrackedPromise(async () => {
return (await salla.product.api.categories()).data;
}, { initialData: [] })
], SallaRewardDetails.prototype, "category", void 0);
__decorate$1([
trackedPromise.TrackedPromise(async () => {
return (await salla.api.request('/brands')).data;
}, { initialData: [] })
], SallaRewardDetails.prototype, "brand", void 0);
SallaRewardDetails.style = sallaLoyaltyProgramCss$1;
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 SallaRewardExchange = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.productId = null;
}
reset(timeout = 0) {
setTimeout(() => {
functions.closeModals();
}, timeout);
}
getApiErrorMessage(error) {
return error?.response?.data?.error?.message
|| error?.response?.data?.message
|| (typeof error === 'string' ? error : null)
|| salla.lang.get('common.errors.error_occurred');
}
async handleConfirm() {
try {
await this.exchange(this.prize.id, null, this.productId);
this.reset(300);
}
catch (error) {
salla.notify.error(this.getApiErrorMessage(error));
}
}
handleCancel() {
this.reset(0);
}
render() {
return (index.h(index.Host, { key: 'ceecba37884a11443b52b76dad69bd164b52b788' }, index.h("div", { key: '598f185363b917969b9de0fb6a536884d6578c95', class: "s-loyalty-program-exchange-heading" }, index.h("div", { key: 'a2aa6b15d97533a973f7f2fb6a2cf517c147367d', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, index.h("span", { key: '9745001d514643add62fe9a64df7fc2c0a694513', innerHTML: gift.SIGift })), index.h("h2", { key: '4819327aacc1307c0f75014d9faef50f55115289' }, salla.lang.get('pages.loyalty_program.redeem_reward')), index.h("p", { key: 'b39c99abcefb0f3baf609cd21049b083a115cdef' }, salla.lang.get('pages.loyalty_program.redeem_confirmation'), " ", index.h("span", { key: '50852d87c9686f66beddc7b0a0a3062f0ced1a61' }, "(", this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), ")"), " ", salla.lang.get('pages.loyalty_program.for'), " ", index.h("span", { key: '5a4baa0f02859ced6fdcf7ce77c31bf9b27c45e6' }, "(", this.prize.name, ")"))), index.h("div", { key: 'b1f1067bd0f3a84231ac017f4b66a71277a5d209', class: "s-loyalty-program-exchange-btns" }, index.h("button", { key: '7d4ce6c08fcac58290b364a0df55f8acb715d362', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-confirm", onClick: () => this.handleConfirm() }, index.h("span", { key: 'ef1deb96c4bbb2843ae088b539848c15aacdb244', style: {
opacity: this.exchange.status !== 'pending' ? '1' : '0',
} }, salla.lang.get('common.elements.confirm')), index.h("span", { key: '0f949386c85d7544f7098e2bdc8c7ce4390c4383', class: "s-loyalty-program-exchange-loading", style: {
opacity: this.exchange.status === 'pending' ? '1' : '0',
} }, index.h("salla-loading", { key: '9cdfbfdc7ebfb2e1874f1956560dc464e4aa2a9f', color: "primary", size: 24 }))), index.h("button", { key: '79a2e8b44be5eb4b3ec5f1a285a8f4eba5324814', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-cancel", onClick: () => this.handleCancel() }, salla.lang.get('common.elements.cancel')))));
}
};
__decorate([
trackedPromise.TrackedPromise(async (...args) => await salla.loyalty.exchange(...args))
], SallaRewardExchange.prototype, "exchange", void 0);
SallaRewardExchange.style = sallaLoyaltyProgramCss;
exports.salla_reward_action = SallaRewardAction;
exports.salla_reward_card = SallaRewardCard;
exports.salla_reward_details = SallaRewardDetails;
exports.salla_reward_exchange = SallaRewardExchange;