@salla.sa/twilight-components
Version:
Salla Web Component
73 lines (69 loc) • 4.35 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, H as Host, g as getElement } from './index-114c614f.js';
const sallaPaymentsCss = ":host{display:block}";
const SallaPayments = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.exclude = [];
}
componentWillLoad() {
return salla.onReady()
.then(() => {
var _a, _b, _c;
if (typeof this.exclude === 'string') {
try {
this.exclude = JSON.parse(this.exclude);
}
catch (error) {
salla.logger.error('salla-payments:: failed to parse the exclude props!', this.exclude);
this.exclude = [];
}
}
this.placeholderImage = salla.url.cdn(`images/s-empty.png`);
this.paymentSlot = ((_a = this.host.querySelector('[slot="payment"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<li class="s-payments-list-item"><img class="lazy" width="100%" height="100%" src="${this.placeholderImage}" data-src="{image}" alt={payment} /><li>`;
this.sbcSlot = ((_b = this.host.querySelector('[slot="sbc"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || `<li class="s-payments-list-item"><a target="_blank" href="{link}"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy s-payments-sbc-image" alt="SBC"/></a><li>`;
this.codSlot = ((_c = this.host.querySelector('[slot="cod"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || `<li class="s-payments-list-item"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy" alt="COD"/><li>`;
this.payments = salla.config.get('store.settings.payments');
});
}
render() {
const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
return (h(Host, { class: "s-payments-list-wrap" }, h("ul", { class: "s-payments-list" }, madeInKSA && h("li", { class: "s-payments-list-item" }, h("img", { class: "lazy", width: "100%", height: "100%", decoding: "async", loading: "lazy", "data-src": salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
h("div", { id: "cod-slot", innerHTML: this.codSlot
.replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
h("div", { id: "payment-slot", innerHTML: this.paymentSlot
.replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
.replace(/\{payment\}/g, payment) }))), sbcId && h("div", { id: "sbc-slot", innerHTML: this.sbcSlot
.replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
.replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
}
componentDidLoad() {
var _a;
//todo:: double check about the following workaround, it looks not normal
(_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update(this.host.querySelectorAll('.lazy'));
// fix lazy loaded images that have 100% width and height
this.host.querySelectorAll('.lazy').forEach((img) => {
img.addEventListener('load', () => {
img.setAttribute('width', "100%");
img.setAttribute('height', "100%");
});
});
}
componentDidRender() {
var _a, _b, _c;
//todo:: double check about the following workaround to reduce the dom length, it looks unusal
this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));
this.host.querySelectorAll('#sbc-slot').forEach(el => el.replaceWith(el.firstChild));
this.host.querySelectorAll('#cod-slot').forEach(el => el.replaceWith(el.firstChild));
(_a = this.host.querySelector('[slot="payment"]')) === null || _a === void 0 ? void 0 : _a.remove();
(_b = this.host.querySelector('[slot="sbc"]')) === null || _b === void 0 ? void 0 : _b.remove();
(_c = this.host.querySelector('[slot="cod"]')) === null || _c === void 0 ? void 0 : _c.remove();
}
get host() { return getElement(this); }
};
SallaPayments.style = sallaPaymentsCss;
export { SallaPayments as salla_payments };
//# sourceMappingURL=salla-payments.entry.js.map