@salla.sa/twilight-components
Version:
Salla Web Component
92 lines (91 loc) • 5 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { Host, h } from "@stencil/core";
/**
* @slot payment - Replaces payment item, has replaceable props `{image}`, `{payment}`.
* @slot sbc - Replaces SBC certificate item, has replaceable props `{image}`.
* @slot cod - Replaces COD item, has replaceable props `{image}`.
*/
export class SallaPayments {
constructor() {
/**
* 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();
}
static get is() { return "salla-payments"; }
static get originalStyleUrls() {
return {
"$": ["salla-payments.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-payments.css"]
};
}
static get properties() {
return {
"exclude": {
"type": "unknown",
"attribute": "exclude",
"mutable": true,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Array of the payments/items that are not supported, ex: [\"sbc\", \"made-in-ksa\", \"cod\", \"mada\", \"\"]."
},
"getter": false,
"setter": false,
"defaultValue": "[]"
}
};
}
static get elementRef() { return "host"; }
}