@salla.sa/twilight-components
Version:
Salla Web Component
111 lines (106 loc) • 4.64 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const sallaMetadataCss = "";
const SallaMetadata$1 = /*@__PURE__*/ proxyCustomElement(class SallaMetadata extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* The entity type.
*/
this.entity = 'product';
this.specs = [];
this.download = salla.lang.get('pages.thank_you.download');
if (this.entityId) {
try {
this.entityId = Array.isArray(this.entityId)
? this.entityId
: JSON.parse(this.entityId);
return;
}
catch (e) {
salla.log('Bad json passed via entityId prop');
}
}
}
getValue(field) {
if (field.type === 'file') {
return `<a href="${field.value}" class="text-primary" target="_blank"><span class="sicon-download"></span> ${this.download}</a>`;
}
if (field.type === 'url') {
return `<a href="${field.value}" class="text-blue-700 underline" target="_blank">${field.value}</a>`; // classes will be moved to the utilities.json file
}
if (field.type === 'date') {
const date = new Date(field.value);
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
const year = date.getFullYear();
const formattedDate = `${day}/${month}/${year}`;
return formattedDate;
}
return field.value;
}
componentWillLoad() {
return salla
.onReady()
.then(() => {
var _a;
if (!((_a = salla.config.get('store.features')) === null || _a === void 0 ? void 0 : _a.includes('custom-fields'))) {
throw new Error('feature custom-fields is not activated');
}
})
.then(() => {
if (!this.entityId && salla.url.is_page('product.single')) {
this.entityId = salla.config.get('page.id');
}
if (!this.entityId) {
throw new Error("can't render salla-metadata without enity-id prop!");
}
salla.lang.onLoaded(() => (this.download = salla.lang.get('pages.thank_you.download')));
//todo:: check in graylog, if there is too many requests for same users, let's store it in the session storage for 15 minutes same as the offers
const entityIdsArray = Array.isArray(this.entityId) ? this.entityId : [this.entityId];
const entitiesParam = entityIdsArray.map(id => `entities[]=${id}`).join('&');
const url = `https://api.salla.dev/store/v1/metadata/values?type=${this.entity}&${entitiesParam}`;
return salla.api.request(url).then(response => { var _a; return (_a = response.data[0]) === null || _a === void 0 ? void 0 : _a.sections; });
})
.then(specs => (this.specs = specs))
.catch(error => salla.logger.error('Error loading more specs:', error));
}
render() {
if (!this.specs.length) {
return;
}
return (h(Host, { class: "s-metadata-wrapper" }, this.specs.map((item) => {
return (h("div", { class: "s-metadata-box" }, h("div", { class: "s-metadata-box-header" }, h("i", { class: "sicon-list" }), item.name), item.fields.map((field) => {
return (h("div", { class: "s-metadata-row" }, h("p", { class: "s-metadata-row-name" }, field.name), h("p", { class: "s-metadata-row-value", innerHTML: this.getValue(field) })));
})));
})));
}
get host() { return this; }
static get style() { return sallaMetadataCss; }
}, [0, "salla-metadata", {
"entity": [1],
"entityId": [8, "entity-id"],
"specs": [32],
"download": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-metadata"];
components.forEach(tagName => { switch (tagName) {
case "salla-metadata":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaMetadata$1);
}
break;
} });
}
const SallaMetadata = SallaMetadata$1;
const defineCustomElement = defineCustomElement$1;
export { SallaMetadata, defineCustomElement };
//# sourceMappingURL=salla-metadata.js.map
//# sourceMappingURL=salla-metadata.js.map