@salla.sa/twilight-components
Version:
Salla Web Component
80 lines (75 loc) • 4.59 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const sallaPaymentsCss = ":host{display:block}";
const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* Array of the payments/items that are not supported, ex: ["sbc", "made-in-ksa", "cod", "mada", ""].
*/
this.exclude = [];
}
componentWillLoad() {
return salla.onReady()
.then(() => {
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.paymentSlot = this.host.querySelector('[slot="payment"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="{payment}" /></li>`;
this.sbcSlot = this.host.querySelector('[slot="sbc"]')?.innerHTML || `<li class="s-payments-list-item"><a target="_blank" href="{link}"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" class="s-payments-sbc-image" alt="SBC" /></a></li>`;
this.codSlot = this.host.querySelector('[slot="cod"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" 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, { key: 'bfb363665dada7c3e5c9ca429a4174b2ed5c2ed8', class: "s-payments-list-wrap" }, h("ul", { key: '8f66db94e7e75ad5550892a319066c2101cb10fd', class: "s-payments-list" }, madeInKSA && h("li", { key: 'c570b7666e32e890966555b436d483cfe6bc888e', class: "s-payments-list-item" }, h("img", { key: 'c448bc161508b9762dd45d316b079d31a7429e39', width: 58, height: 58, decoding: "async", loading: "lazy", 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", { key: 'dbe8288f3d6231c8fdd013630bffa54f9d8178a4', 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}`) }))));
}
componentDidRender() {
//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));
this.host.querySelector('[slot="payment"]')?.remove();
this.host.querySelector('[slot="sbc"]')?.remove();
this.host.querySelector('[slot="cod"]')?.remove();
}
get host() { return this; }
static get style() { return sallaPaymentsCss; }
}, [0, "salla-payments", {
"exclude": [1040]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-payments"];
components.forEach(tagName => { switch (tagName) {
case "salla-payments":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaPayments$1);
}
break;
} });
}
defineCustomElement$1();
const SallaPayments = SallaPayments$1;
const defineCustomElement = defineCustomElement$1;
export { SallaPayments, defineCustomElement };