@salla.sa/twilight-components
Version:
Salla Web Component
168 lines (163 loc) • 7.98 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { T as TagMoneyIcon } from './tag-money.js';
import { i as iconCopy } from './swap-stroke.js';
import { d as defineCustomElement$3 } from './salla-button2.js';
import { d as defineCustomElement$2 } from './salla-skeleton2.js';
const sallaNextOrderCouponCss = ":host{display:block}";
const SallaNextOrderCoupon$1 = /*@__PURE__*/ proxyCustomElement(class SallaNextOrderCoupon extends HTMLElement {
constructor() {
super();
this.__registerHost();
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 h("span", { innerHTML: salla.money(a.amount, a.currency) });
}
return 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 (h("div", { class: "s-next-order-coupon-wrapper s-next-order-coupon-skeleton" }, h("div", { class: "s-next-order-coupon-inner" }, h("div", { class: "s-next-order-coupon-info" }, h("salla-skeleton", { type: "normal", width: "48px", height: "48px" }), h("div", { class: "s-next-order-coupon-details" }, h("salla-skeleton", { height: "14px", width: "220px" }), h("salla-skeleton", { height: "12px", width: "140px" }))), h("div", { class: "s-next-order-coupon-actions" }, h("salla-skeleton", { height: "40px", width: "140px" }), 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 (h("p", { class: "s-next-order-coupon-title" }, parts[0], 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 (h("div", { class: "s-next-order-coupon-wrapper" }, h("div", { class: "s-next-order-coupon-inner" }, h("div", { class: "s-next-order-coupon-info" }, h("div", { class: "s-next-order-coupon-icon-wrap" }, h("span", { class: "s-next-order-coupon-icon-bg" }), h("span", { class: "s-next-order-coupon-icon", innerHTML: TagMoneyIcon })), h("div", { class: "s-next-order-coupon-details" }, h("div", { class: "s-next-order-coupon-title-row" }, this.renderTitle(), h("span", { class: "s-next-order-coupon-badge" }, h("span", { class: "s-next-order-coupon-badge-bg" }), h("span", { class: "s-next-order-coupon-badge-text" }, this.badgeLabel))), (minSpend || expiry) && (h("p", { class: "s-next-order-coupon-meta" }, minSpend && (h("span", { innerHTML: this.minSpendTpl.replace(':amount', minSpend) })), expiry && (h("span", null, this.expiresTpl.replace(':date', expiry))))))), h("div", { class: "s-next-order-coupon-actions" }, h("div", { class: "s-next-order-coupon-code-box" }, h("span", { class: "s-next-order-coupon-code-text" }, this.coupon.code), h("salla-button", { shape: "link", class: "s-next-order-coupon-copy-btn", title: this.copyLabel, onClick: () => this.copyCode() }, h("span", { class: "s-next-order-coupon-copy-icon", innerHTML: iconCopy }))), h("salla-button", { href: salla.url.get(''), class: "s-next-order-coupon-shop-btn" }, this.shopNowLabel)))));
}
static get style() { return sallaNextOrderCouponCss; }
}, [0, "salla-next-order-coupon", {
"coupon": [32],
"isLoading": [32],
"titlePercentTpl": [32],
"titleFixedTpl": [32],
"badgeLabel": [32],
"minSpendTpl": [32],
"expiresTpl": [32],
"shopNowLabel": [32],
"copyLabel": [32],
"copiedLabel": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-next-order-coupon", "salla-button", "salla-skeleton"];
components.forEach(tagName => { switch (tagName) {
case "salla-next-order-coupon":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaNextOrderCoupon$1);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-skeleton":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const SallaNextOrderCoupon = SallaNextOrderCoupon$1;
const defineCustomElement = defineCustomElement$1;
export { SallaNextOrderCoupon, defineCustomElement };