@everymatrix/promoting-banners 0.1.0

package/dist/collection/components/promoting-banners/promoting-banners.js

@@ -0,0 +1,260 @@
+import { h } from "@stencil/core";
+import { getDevice, getDevicePlatform } from "../../utils/utils";
+import { translate, getTranslations } from "../../utils/locale.utils";
+export class PromotingBanners {
+    constructor() {
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.componentDidLoad = () => {
+            if (this.stylingContainer) {
+                if (this.clientStyling)
+                    this.setClientStyling();
+                if (this.clientStylingUrl)
+                    this.setClientStylingURL();
+            }
+        };
+        this.cmsEndpoint = '';
+        this.language = 'en';
+        this.cmsEnv = '';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.promotingBannersArray = [];
+        this.hasErrors = false;
+        this.isLoading = true;
+        this.translationData = undefined;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
+    }
+    connectedCallback() {
+        if (this.cmsEndpoint && this.language) {
+            this.getPromotingBanners();
+        }
+    }
+    getPromotingBanners() {
+        const url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
+        const params = new URLSearchParams();
+        params.append('language', this.language);
+        params.append('env', this.cmsEnv);
+        params.append('device', getDevicePlatform());
+        url.search = params.toString();
+        let requestOptions = {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            }
+        };
+        return new Promise((resolve, reject) => {
+            this.isLoading = true;
+            fetch(url.href, requestOptions)
+                .then(res => res.json())
+                .then(data => {
+                const { promotingBanners } = data;
+                this.promotingBannersArray = promotingBanners;
+                resolve(promotingBanners);
+            })
+                .catch(error => {
+                console.error('Error fetching data:', error);
+                this.hasErrors = true;
+                reject(error);
+            }).finally(() => {
+                this.isLoading = false;
+            });
+        });
+    }
+    sendOpenLink(url, isExternal, target) {
+        window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
+    }
+    async componentWillLoad() {
+        // Translation url logic
+        const promises = [];
+        if (this.translationUrl) {
+            const translationPromise = getTranslations(this.translationUrl).then((data) => {
+                this.translationData = JSON.stringify(data);
+            }).catch(err => {
+                console.log(err);
+            });
+            promises.push(translationPromise);
+        }
+        return Promise.all(promises);
+    }
+    renderBannersGrid(banner) {
+        var _a, _b, _c;
+        return h("a", { class: "PromotingBannersBox", href: banner === null || banner === void 0 ? void 0 : banner.url, target: banner.targetType, style: { backgroundImage: `url(${banner === null || banner === void 0 ? void 0 : banner.backgroundImage})` } }, h("div", { class: "PromotingBannersIconContainer" }, h("img", { src: (getDevice() === 'Android' || getDevice() === 'iPhone') ? (_a = banner.icon) === null || _a === void 0 ? void 0 : _a.mobile : (getDevice() === 'iPad') ? (_b = banner.image) === null || _b === void 0 ? void 0 : _b.srcTablet : (_c = banner.icon) === null || _c === void 0 ? void 0 : _c.desktop, alt: "Banner image" })), h("div", { class: "PromotingBannersTextContainer" }, h("h3", { class: "PromotingBannersTitle" }, banner === null || banner === void 0 ? void 0 : banner.title), h("div", { class: "PromotingBannersContent", innerHTML: banner === null || banner === void 0 ? void 0 : banner.description }), banner.button &&
+            h("button", { class: `PromotingBannersButton ${(banner === null || banner === void 0 ? void 0 : banner.button.text) ? '' : 'ButtonDisabled'}`, innerHTML: banner === null || banner === void 0 ? void 0 : banner.button.text, onClick: this.sendOpenLink.bind(this, banner === null || banner === void 0 ? void 0 : banner.button.url, banner === null || banner === void 0 ? void 0 : banner.button.externalLink, banner === null || banner === void 0 ? void 0 : banner.button.target) })));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("div", { key: '80f15f2a7a49290bfd0fb80c6ccfb02b9fe3a0a9', class: "PromotingBannersSection", ref: el => this.stylingContainer = el }, this.hasErrors && h("div", { key: '392ef0a6910a457d17efc41a3a2443afc8be4a61', class: "AboutUsError" }, h("div", { key: 'c19eb8a49a8c8a422bd47557a7815e0252667005', class: "ErrorInfo" }, translate('error', this.language))), this.isLoading && h("div", { key: '28fc923e41227b8ca1529e8e2815ebd70678e50c', class: "SkeletonGrid" }, new Array(4).fill(null).map((index) => (h("div", { key: index, class: "Skeleton SkeletonItem" })))), !this.isLoading &&
+            h("div", { key: 'aff2d67a139ede5bdcc3c1ad240806594ab5fae7', class: "PromotingBannersWrapper" }, h("div", { key: '7d8caf2fee017407a618960ea37fff9d809e3eaa', class: getDevice() === 'PC' ? 'PromotingBannersHeader' : 'PromotingBannersHeader PromotingBannersHeaderMobile' }, ((_a = this.promotingBannersArray) === null || _a === void 0 ? void 0 : _a.title) && h("h1", { key: 'd947b41266fdfda8762ebc654c7a1c3516a08be5', class: "PromotingBannersSectionTitle" }, (_b = this.promotingBannersArray) === null || _b === void 0 ? void 0 : _b.title), ((_c = this.promotingBannersArray) === null || _c === void 0 ? void 0 : _c.description) && h("h5", { key: '72127f002e53c9e2d7430e222494c4470aca23e9', class: "PromotingBannersSectionSubtitle", style: { 'display': `${getDevice() !== 'PC' ? 'inline-block' : 'none'}` }, innerHTML: (_d = this.promotingBannersArray) === null || _d === void 0 ? void 0 : _d.description })), h("div", { key: '50c4fb4ae455f363d128993908016b0245c2bd50', class: "PromotingBannersGrid" }, this.promotingBannersArray.map(banner => (this.renderBannersGrid(banner)))))));
+    }
+    static get is() { return "promoting-banners"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["promoting-banners.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["promoting-banners.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cmsEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The endpoint"
+                },
+                "attribute": "cms-endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "cmsEnv": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CMS environment"
+                },
+                "attribute": "cms-env",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline style"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translations via URL"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "promotingBannersArray": {},
+            "hasErrors": {},
+            "isLoading": {},
+            "translationData": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/promoting-banners';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,48 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        error: 'Error',
+        noResults: 'Loading, please wait ...',
+    },
+    hu: {
+        error: 'Error',
+        noResults: 'Loading, please wait ...',
+    },
+    ro: {
+        error: 'Eroare',
+        noResults: 'Loading, please wait ...',
+    },
+    fr: {
+        error: 'Error',
+        noResults: 'Loading, please wait ...',
+    },
+    ar: {
+        error: 'خطأ',
+        noResults: 'Loading, please wait ...',
+    },
+    hr: {
+        error: 'Greška',
+        noResults: 'Učitavanje, molimo pričekajte ...',
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+};
+export const getTranslations = (url) => {
+    // fetch url, get the data, replace the TRANSLATIONS content
+    return new Promise((resolve, reject) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                for (let key in data[item]) {
+                    TRANSLATIONS[item][key] = data[item][key];
+                }
+            });
+            resolve(TRANSLATIONS);
+        }).catch(err => {
+            reject(err);
+        });
+    });
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,27 @@
+export const getDevice = () => {
+    let userAgent = window.navigator.userAgent;
+    if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
+    }
+    if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
+    }
+    if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+        return 'iPad';
+    }
+    return 'PC';
+};
+export const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'mtWeb';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };