@salla.sa/twilight-components
Version:
Salla Web Component
129 lines (124 loc) • 6.77 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
;
var index = require('./index-C7gO-zm5.js');
var tagMoney = require('./tag-money-Cuohw_4j.js');
var swapStroke = require('./swap-stroke-CYGxjKIS.js');
const sallaNextOrderCouponCss = ":host{display:block}";
const SallaNextOrderCoupon = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.coupon = null;
this.isLoading = true;
this.titlePercentTpl = '';
this.titleFixedTpl = '';
this.badgeLabel = '';
this.minSpendTpl = '';
this.expiresTpl = '';
this.shopNowLabel = '';
this.copyLabel = '';
this.copiedLabel = '';
}
componentWillLoad() {
Salla.onReady()
.then(() => Salla.lang.onLoaded())
.then(() => {
this.loadTranslations();
return this.loadCoupon();
})
.catch(() => {
this.isLoading = false;
});
}
loadTranslations() {
this.titlePercentTpl = Salla.lang.get('pages.thank_you.next_order_coupon_title_percent') || '';
this.titleFixedTpl = Salla.lang.get('pages.thank_you.next_order_coupon_title_fixed') || '';
this.badgeLabel = Salla.lang.get('pages.thank_you.next_order_coupon_badge') || '';
this.minSpendTpl = Salla.lang.get('pages.thank_you.next_order_coupon_min_spend') || '';
this.expiresTpl = Salla.lang.get('pages.thank_you.next_order_coupon_expires') || '';
this.shopNowLabel = Salla.lang.get('pages.thank_you.next_order_coupon_shop_now') || '';
this.copyLabel = Salla.lang.get('common.elements.copy') || '';
this.copiedLabel = Salla.lang.get('pages.thank_you.next_order_coupon_copied') || '';
}
async loadCoupon() {
try {
const response = await salla.api.request('coupons', { params: { type: 'thankyou' } });
const raw = response?.data;
const list = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : []);
this.coupon = list[0] ?? null;
}
catch {
this.coupon = null;
}
finally {
this.isLoading = false;
}
}
async copyCode() {
if (!this.coupon)
return;
try {
await navigator.clipboard.writeText(this.coupon.code);
salla.notify.success(this.copiedLabel);
salla.event.dispatch('salla::next-order-coupon.code.copied', { code: this.coupon.code });
}
catch {
// clipboard write failed silently
}
}
isPercentage() {
return this.coupon?.type === 'P' || this.coupon?.type === 'percentage';
}
formatAmount() {
if (!this.coupon)
return '';
if (this.isPercentage()) {
return `${salla.helpers.number(this.coupon.amount)}%`;
}
const amt = this.coupon.amount;
if (typeof amt === 'object' && amt.amount) {
const a = amt;
return index.h("span", { innerHTML: salla.money(a.amount, a.currency) });
}
return index.h("span", { innerHTML: salla.money(amt) });
}
formatMinSpend() {
const min = this.coupon?.minimum_amount;
if (!min)
return '';
if (typeof min === 'object' && !min.amount)
return '';
if (typeof min === 'string') {
return min.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
return salla.money(min.amount, min.currency);
}
formatExpiry() {
const d = this.coupon?.expiry_date;
if (!d)
return '';
return new Date(d).toLocaleDateString(Salla.lang.locale || 'en-GB');
}
renderSkeleton() {
return (index.h("div", { class: "s-next-order-coupon-wrapper s-next-order-coupon-skeleton" }, index.h("div", { class: "s-next-order-coupon-inner" }, index.h("div", { class: "s-next-order-coupon-info" }, index.h("salla-skeleton", { type: "normal", width: "48px", height: "48px" }), index.h("div", { class: "s-next-order-coupon-details" }, index.h("salla-skeleton", { height: "14px", width: "220px" }), index.h("salla-skeleton", { height: "12px", width: "140px" }))), index.h("div", { class: "s-next-order-coupon-actions" }, index.h("salla-skeleton", { height: "40px", width: "140px" }), index.h("salla-skeleton", { height: "40px", width: "100px" })))));
}
renderTitle() {
const amount = this.formatAmount();
const tpl = this.isPercentage() ? this.titlePercentTpl : this.titleFixedTpl;
const placeholder = this.isPercentage() ? ':amount%' : ':amount';
const parts = tpl.split(placeholder);
return (index.h("p", { class: "s-next-order-coupon-title" }, parts[0], index.h("span", { class: "s-next-order-coupon-amount" }, amount), parts[1] || ''));
}
render() {
if (this.isLoading)
return this.renderSkeleton();
if (!this.coupon)
return null;
const minSpend = this.formatMinSpend();
const expiry = this.formatExpiry();
return (index.h("div", { class: "s-next-order-coupon-wrapper" }, index.h("div", { class: "s-next-order-coupon-inner" }, index.h("div", { class: "s-next-order-coupon-info" }, index.h("div", { class: "s-next-order-coupon-icon-wrap" }, index.h("span", { class: "s-next-order-coupon-icon-bg" }), index.h("span", { class: "s-next-order-coupon-icon", innerHTML: tagMoney.TagMoneyIcon })), index.h("div", { class: "s-next-order-coupon-details" }, index.h("div", { class: "s-next-order-coupon-title-row" }, this.renderTitle(), index.h("span", { class: "s-next-order-coupon-badge" }, index.h("span", { class: "s-next-order-coupon-badge-bg" }), index.h("span", { class: "s-next-order-coupon-badge-text" }, this.badgeLabel))), (minSpend || expiry) && (index.h("p", { class: "s-next-order-coupon-meta" }, minSpend && (index.h("span", { innerHTML: this.minSpendTpl.replace(':amount', minSpend) })), expiry && (index.h("span", null, this.expiresTpl.replace(':date', expiry))))))), index.h("div", { class: "s-next-order-coupon-actions" }, index.h("div", { class: "s-next-order-coupon-code-box" }, index.h("span", { class: "s-next-order-coupon-code-text" }, this.coupon.code), index.h("salla-button", { shape: "link", class: "s-next-order-coupon-copy-btn", title: this.copyLabel, onClick: () => this.copyCode() }, index.h("span", { class: "s-next-order-coupon-copy-icon", innerHTML: swapStroke.iconCopy }))), index.h("salla-button", { href: salla.url.get(''), class: "s-next-order-coupon-shop-btn" }, this.shopNowLabel)))));
}
};
SallaNextOrderCoupon.style = sallaNextOrderCouponCss;
exports.salla_next_order_coupon = SallaNextOrderCoupon;