@tet/tet-components 1.3.157-testing → 1.4.0-production

package/dist/collection/components/advanced/customer/tet-asset-addresses/tet-asset-addresses.js

@@ -5,98 +5,6 @@ import { customerAssets, queryCustomer } from "../../../../services/api/index";
  */
 export class TetAssetAddresses {
     constructor() {
-        /**
-         * The object for storing memoized asset data to avoid request duplication.
-         */
-        this.memoizedAddresses = {};
-        /**
-         * Load available customer addresses.
-         */
-        this.loadAddresses = async () => {
-            var _a;
-            const memoizationKey = this.salesforceAccountId || this.pid;
-            if (memoizationKey in this.memoizedAddresses) {
-                this.addresses = this.memoizedAddresses[memoizationKey];
-                return;
-            }
-            this.showLoader = true;
-            const salesforceCustomerId = this.salesforceAccountId || ((_a = (await queryCustomer(this.pid, this.accessToken))) === null || _a === void 0 ? void 0 : _a.salesforceAccountId);
-            if (salesforceCustomerId) {
-                const assets = await customerAssets(salesforceCustomerId, this.accessToken);
-                this.addresses = this.getUniqueAddresses(assets);
-                this.memoizedAddresses[memoizationKey] = this.addresses;
-            }
-            else {
-                this.noCustomerFound({ pid: this.pid });
-                this.addresses = [];
-            }
-            this.showLoader = false;
-        };
-        /**
-         * Extract unique addresses of all customer's assets
-         *
-         * @param allAssets
-         */
-        this.getUniqueAddresses = (allAssets) => {
-            return allAssets.reduce((accumulator, asset) => {
-                const index = accumulator.findIndex((address) => address.addressKey === asset.addressKey);
-                if (index === -1) {
-                    accumulator.push({
-                        fullAddress: asset.fullAddress,
-                        addressKey: asset.addressKey
-                    });
-                }
-                return accumulator;
-            }, []);
-        };
-        /**
-         * Remove the last added address from the list
-         *
-         * @param event
-         */
-        this.removeAssetAddress = (event) => {
-            event.stopPropagation();
-            this.addresses = this.addresses.slice(0, -1);
-            this.lastAddedKey = '';
-        };
-        /**
-         * Address selection handler.
-         *
-         * @param event
-         */
-        this.selectAssetAddress = (event) => {
-            this.assetAddressSelected.emit(event.detail);
-        };
-        /**
-         * The error emitted when no Salesforce customer is found for the given PID.
-         *
-         * @param event
-         */
-        this.noCustomerFound = (event) => {
-            this.customerNotFound.emit(event);
-        };
-        /**
-         * Changes the state of the address search
-         */
-        this.showAddressSearch = () => {
-            this.isAddressSearchVisible = true;
-        };
-        /**
-         * Renders single address line
-         *
-         * @param groupedAsset
-         * @param address
-         * @param selected
-         */
-        this.renderAddress = (address, { selected }) => {
-            return (h("tet-container", { part: `selection-list-item-container ${selected && 'container-selected'}`, selected: selected }, h("tet-icon", { part: `icon ${selected && 'icon-selected'}`, name: "location" }), address.fullAddress, address.addressKey === this.lastAddedKey && (h("tet-icon", { part: `icon icon-right ${selected && 'icon-selected'}`, name: "close", onClick: this.removeAssetAddress }))));
-        };
-        /**
-         * Renders the list of client's asset addresses.
-         */
-        this.renderAddressList = () => {
-            return (h("div", { class: "list-container" }, h("tet-selection-list", { items: this.addresses, itemRenderFunction: this.renderAddress, multipleSelections: false, class: "selection-list", onItemSelected: this.selectAssetAddress }), !this.isAddressSearchVisible && (h("tet-container", { class: "selection-list-item-container" }, h("div", { onClick: this.showAddressSearch }, h("tet-icon", { class: "icon", name: "add" }), this.addressSearchLabel)))));
-        };
         this.accessToken = undefined;
         this.pid = undefined;
         this.salesforceAccountId = undefined;
@@ -117,6 +25,18 @@ export class TetAssetAddresses {
     onAddressesChange(value) {
         this.addressesUpdated.emit(value);
     }
+    /**
+     * The event that is emitted when user selects an address from the list.
+     */
+    assetAddressSelected;
+    /**
+     * The event that is emitted whenever addresses change.
+     */
+    addressesUpdated;
+    /**
+     * The event that is emitted when no Salesforce customer is found for the given PID.
+     */
+    customerNotFound;
     /**
      * Listen for `addressSelected` event emitted by `tet-address-search` and add the selected address to the list
      *
@@ -128,9 +48,100 @@ export class TetAssetAddresses {
         this.addresses = [...this.addresses, { fullAddress, addressKey }];
         this.lastAddedKey = addressKey;
     }
+    /**
+     * The object for storing memoized asset data to avoid request duplication.
+     */
+    memoizedAddresses = {};
     componentWillLoad() {
         return this.loadAddresses();
     }
+    /**
+     * Load available customer addresses.
+     */
+    loadAddresses = async () => {
+        const memoizationKey = this.salesforceAccountId || this.pid;
+        if (memoizationKey in this.memoizedAddresses) {
+            this.addresses = this.memoizedAddresses[memoizationKey];
+            return;
+        }
+        this.showLoader = true;
+        const salesforceCustomerId = this.salesforceAccountId || (await queryCustomer(this.pid, this.accessToken))?.salesforceAccountId;
+        if (salesforceCustomerId) {
+            const assets = await customerAssets(salesforceCustomerId, this.accessToken);
+            this.addresses = this.getUniqueAddresses(assets);
+            this.memoizedAddresses[memoizationKey] = this.addresses;
+        }
+        else {
+            this.noCustomerFound({ pid: this.pid });
+            this.addresses = [];
+        }
+        this.showLoader = false;
+    };
+    /**
+     * Extract unique addresses of all customer's assets
+     *
+     * @param allAssets
+     */
+    getUniqueAddresses = (allAssets) => {
+        return allAssets.reduce((accumulator, asset) => {
+            const index = accumulator.findIndex((address) => address.addressKey === asset.addressKey);
+            if (index === -1) {
+                accumulator.push({
+                    fullAddress: asset.fullAddress,
+                    addressKey: asset.addressKey
+                });
+            }
+            return accumulator;
+        }, []);
+    };
+    /**
+     * Remove the last added address from the list
+     *
+     * @param event
+     */
+    removeAssetAddress = (event) => {
+        event.stopPropagation();
+        this.addresses = this.addresses.slice(0, -1);
+        this.lastAddedKey = '';
+    };
+    /**
+     * Address selection handler.
+     *
+     * @param event
+     */
+    selectAssetAddress = (event) => {
+        this.assetAddressSelected.emit(event.detail);
+    };
+    /**
+     * The error emitted when no Salesforce customer is found for the given PID.
+     *
+     * @param event
+     */
+    noCustomerFound = (event) => {
+        this.customerNotFound.emit(event);
+    };
+    /**
+     * Changes the state of the address search
+     */
+    showAddressSearch = () => {
+        this.isAddressSearchVisible = true;
+    };
+    /**
+     * Renders single address line
+     *
+     * @param groupedAsset
+     * @param address
+     * @param selected
+     */
+    renderAddress = (address, { selected }) => {
+        return (h("tet-container", { part: `selection-list-item-container ${selected && 'container-selected'}`, selected: selected }, h("tet-icon", { part: `icon ${selected && 'icon-selected'}`, name: "location" }), address.fullAddress, address.addressKey === this.lastAddedKey && (h("tet-icon", { part: `icon icon-right ${selected && 'icon-selected'}`, name: "close", onClick: this.removeAssetAddress }))));
+    };
+    /**
+     * Renders the list of client's asset addresses.
+     */
+    renderAddressList = () => {
+        return (h("div", { class: "list-container" }, h("tet-selection-list", { items: this.addresses, itemRenderFunction: this.renderAddress, multipleSelections: false, class: "selection-list", onItemSelected: this.selectAssetAddress }), !this.isAddressSearchVisible && (h("tet-container", { class: "selection-list-item-container" }, h("div", { onClick: this.showAddressSearch }, h("tet-icon", { class: "icon", name: "add" }), this.addressSearchLabel)))));
+    };
     render() {
         return (h(Host, { key: '548a110c74ce7c7f4f3ba4142e87f20841a12143', class: { 'asset-adddress-selection': true, [this.theme]: true } }, this.showLoader ? (h("tet-placeholder", { height: "12.5rem", darkTheme: this.theme === 'dark' })) : (this.renderAddressList()), this.isAddressSearchVisible && (h("tet-address-search", { key: 'c566aa6fe62b44a267018fadf487290e76d95582', inputDisabled: !!this.lastAddedKey, language: "lv", placeholder: this.addressSearchPlaceholder, newStyle: true, theme: this.theme }))));
     }

package/dist/collection/components/advanced/customer/tet-asset-availability-addresses/tet-asset-availability-addresses.js

@@ -5,18 +5,6 @@ import { customerAssets, queryCustomer } from "../../../../services/api/index";
  */
 export class TetAssetAvailabilityAddresses {
     constructor() {
-        /**
-         * The object for storing memoized asset data to avoid request duplication.
-         */
-        this.memoizedAddresses = {};
-        /**
-         * Address selection handler.
-         *
-         * @param event
-         */
-        this.selectAssetAddress = (event) => {
-            this.assetAddressSelected.emit(event.detail);
-        };
         this.accessToken = undefined;
         this.pid = undefined;
         this.salesforceAccountId = undefined;
@@ -27,6 +15,10 @@ export class TetAssetAvailabilityAddresses {
         this.lastAddedKey = '';
         this.showLoader = true;
     }
+    /**
+     * The element of the selection list component.
+     */
+    selectionListElement;
     /**
      * Watch for pid change to load addresses for given user.
      */
@@ -46,6 +38,22 @@ export class TetAssetAvailabilityAddresses {
     onAddressesChange(value) {
         this.addressesUpdated.emit(value);
     }
+    /**
+     * The event that is emitted when user selects an address from the lsit.
+     */
+    assetAddressSelected;
+    /**
+     * The event that is emitted whenever addresses change.
+     */
+    addressesUpdated;
+    /**
+     * The event that is emitted when no Salesforce customer is found for the given PID.
+     */
+    customerNotFound;
+    /**
+     * The object for storing memoized asset data to avoid request duplication.
+     */
+    memoizedAddresses = {};
     componentWillLoad() {
         return this.loadAddresses();
     }
@@ -53,14 +61,13 @@ export class TetAssetAvailabilityAddresses {
      * Load available customer addresses.
      */
     async loadAddresses() {
-        var _a;
         const memoizationKey = this.salesforceAccountId || this.pid;
         if (memoizationKey in this.memoizedAddresses) {
             this.addresses = this.memoizedAddresses[memoizationKey];
             return;
         }
         this.showLoader = true;
-        const salesforceCustomerId = this.salesforceAccountId || ((_a = (await queryCustomer(this.pid, this.accessToken))) === null || _a === void 0 ? void 0 : _a.salesforceAccountId);
+        const salesforceCustomerId = this.salesforceAccountId || (await queryCustomer(this.pid, this.accessToken))?.salesforceAccountId;
         if (salesforceCustomerId) {
             const assets = await customerAssets(salesforceCustomerId, this.accessToken);
             this.addresses = this.getUniqueAddresses(assets);
@@ -91,6 +98,14 @@ export class TetAssetAvailabilityAddresses {
         }, []);
     }
     ;
+    /**
+     * Address selection handler.
+     *
+     * @param event
+     */
+    selectAssetAddress = (event) => {
+        this.assetAddressSelected.emit(event.detail);
+    };
     /**
      * Method to trigger unselect functionality for the
      * selection list component.

package/dist/collection/components/advanced/customer/tet-customer-assets/tet-customer-assets.js

@@ -8,88 +8,6 @@ import { customerAssets, queryCustomer } from "../../../../services/api/index";
  */
 export class TetCustomerAssets {
     constructor() {
-        /** The object for storing memoized asset data to avoid request duplication. */
-        this.memoizedAssets = {};
-        this.loadAssets = async () => {
-            var _a;
-            const memoizationKey = this.salesforceAccountId || this.pid;
-            if (memoizationKey in this.memoizedAssets) {
-                this.assets = this.memoizedAssets[memoizationKey];
-                return;
-            }
-            this.showLoader = true;
-            const salesforceCustomerId = this.salesforceAccountId ||
-                ((_a = (await queryCustomer(this.pid, this.accessToken))) === null || _a === void 0 ? void 0 : _a.salesforceAccountId);
-            if (salesforceCustomerId) {
-                this.assets = await customerAssets(salesforceCustomerId, this.accessToken);
-                this.assets = this.assets ? this.assets.filter(this.isActiveNonConsumerGoodAsset) : [];
-                this.memoizedAssets[memoizationKey] = this.assets;
-            }
-            else {
-                this.noCustomerFound({ pid: this.pid });
-                this.assets = [];
-            }
-            this.showLoader = false;
-        };
-        /**
-         * Groups given assets by their addresses.
-         *
-         * @param allAssets
-         */
-        this.getGroupedAssets = (allAssets) => {
-            return allAssets.reduce((accumulator, asset) => {
-                const index = accumulator.findIndex((groupedAsset) => groupedAsset.addressKey === asset.addressKey);
-                if (index !== -1) {
-                    accumulator[index].assets.push(asset);
-                }
-                else {
-                    accumulator.push({
-                        fullAddress: asset.fullAddress,
-                        addressKey: asset.addressKey,
-                        assets: [asset]
-                    });
-                }
-                return accumulator;
-            }, []);
-        };
-        this.selectAsset = (event) => {
-            this.assetSelected.emit(event.detail);
-        };
-        /**
-         * The error emitted when no Salesforce customer is found for the given PID.
-         *
-         * @param event
-         */
-        this.noCustomerFound = (event) => {
-            this.customerNotFound.emit(event);
-        };
-        /**
-         * Renders the asset template.
-         *
-         * @param asset
-         * @param selected
-         */
-        this.renderAsset = (asset, { selected }) => {
-            return (h("tet-container", { part: "selection-list-item-container", selected: selected }, h("div", { part: "radio-wrapper" }, h("tet-radio", { checked: selected, theme: this.darkTheme ? 'mint' : 'light' }, h("p", { part: this.darkTheme ? 'asset-address-dark' : 'asset-address' }, asset.fullAddress), h("p", { part: this.darkTheme ? 'asset-name-dark' : 'asset-name' }, asset.productName)))));
-        };
-        /**
-         * Renders the asset group at a single address.
-         *
-         * @param groupedAsset
-         * @param selected
-         */
-        this.renderGroupedAsset = (groupedAsset, { selected }) => {
-            return (h("tet-container", { part: "selection-list-item-container", selected: selected }, h("div", { part: "radio-wrapper" }, h("tet-radio", { checked: selected, theme: this.darkTheme ? 'mint' : 'light' }, h("p", { part: this.darkTheme ? 'asset-address-dark' : 'asset-address' }, groupedAsset.fullAddress), !this.hideAssets &&
-                h("ul", { part: this.darkTheme ? 'asset-name-dark' : 'asset-name' }, groupedAsset.assets.map((asset) => h("li", null, asset.productName)))))));
-        };
-        this.renderLoader = () => {
-            return (h("div", { class: "loader" }, [...Array(this.loaderElementsCount)].map(() => h("tet-placeholder", { height: "4.6875rem", darkTheme: this.darkTheme }))));
-        };
-        this.renderAssetsList = () => {
-            const assets = this.groupByAddress ? this.getGroupedAssets(this.assets) : this.assets;
-            const assetRenderFunction = this.groupByAddress ? this.renderGroupedAsset : this.renderAsset;
-            return (h("tet-selection-list", { items: assets, itemRenderFunction: assetRenderFunction, multipleSelections: false, class: "item", exportparts: "label", onItemSelected: this.selectAsset }));
-        };
         this.accessToken = undefined;
         this.pid = undefined;
         this.singleLoader = false;
@@ -110,12 +28,99 @@ export class TetCustomerAssets {
     onAssetsChange(assets) {
         this.assetsUpdated.emit(assets);
     }
+    /** The event that is emitted when user selects an asset. */
+    assetSelected;
+    /** The event that is emitted whenever assets change. */
+    assetsUpdated;
+    /** The event that is emitted when no Salesforce customer is found for the given PID. */
+    customerNotFound;
+    /** The object for storing memoized asset data to avoid request duplication. */
+    memoizedAssets = {};
     async componentDidLoad() {
         await this.loadAssets(); // Load assets after the component has been loaded in order to be able to show the loader.
     }
+    loadAssets = async () => {
+        const memoizationKey = this.salesforceAccountId || this.pid;
+        if (memoizationKey in this.memoizedAssets) {
+            this.assets = this.memoizedAssets[memoizationKey];
+            return;
+        }
+        this.showLoader = true;
+        const salesforceCustomerId = this.salesforceAccountId ||
+            (await queryCustomer(this.pid, this.accessToken))?.salesforceAccountId;
+        if (salesforceCustomerId) {
+            this.assets = await customerAssets(salesforceCustomerId, this.accessToken);
+            this.assets = this.assets ? this.assets.filter(this.isActiveNonConsumerGoodAsset) : [];
+            this.memoizedAssets[memoizationKey] = this.assets;
+        }
+        else {
+            this.noCustomerFound({ pid: this.pid });
+            this.assets = [];
+        }
+        this.showLoader = false;
+    };
     isActiveNonConsumerGoodAsset({ provisioningStatus, tetProductType }) {
         return provisioningStatus === 'Active' && tetProductType !== 'ConsumerGoods';
     }
+    /**
+     * Groups given assets by their addresses.
+     *
+     * @param allAssets
+     */
+    getGroupedAssets = (allAssets) => {
+        return allAssets.reduce((accumulator, asset) => {
+            const index = accumulator.findIndex((groupedAsset) => groupedAsset.addressKey === asset.addressKey);
+            if (index !== -1) {
+                accumulator[index].assets.push(asset);
+            }
+            else {
+                accumulator.push({
+                    fullAddress: asset.fullAddress,
+                    addressKey: asset.addressKey,
+                    assets: [asset]
+                });
+            }
+            return accumulator;
+        }, []);
+    };
+    selectAsset = (event) => {
+        this.assetSelected.emit(event.detail);
+    };
+    /**
+     * The error emitted when no Salesforce customer is found for the given PID.
+     *
+     * @param event
+     */
+    noCustomerFound = (event) => {
+        this.customerNotFound.emit(event);
+    };
+    /**
+     * Renders the asset template.
+     *
+     * @param asset
+     * @param selected
+     */
+    renderAsset = (asset, { selected }) => {
+        return (h("tet-container", { part: "selection-list-item-container", selected: selected }, h("div", { part: "radio-wrapper" }, h("tet-radio", { checked: selected, theme: this.darkTheme ? 'mint' : 'light' }, h("p", { part: this.darkTheme ? 'asset-address-dark' : 'asset-address' }, asset.fullAddress), h("p", { part: this.darkTheme ? 'asset-name-dark' : 'asset-name' }, asset.productName)))));
+    };
+    /**
+     * Renders the asset group at a single address.
+     *
+     * @param groupedAsset
+     * @param selected
+     */
+    renderGroupedAsset = (groupedAsset, { selected }) => {
+        return (h("tet-container", { part: "selection-list-item-container", selected: selected }, h("div", { part: "radio-wrapper" }, h("tet-radio", { checked: selected, theme: this.darkTheme ? 'mint' : 'light' }, h("p", { part: this.darkTheme ? 'asset-address-dark' : 'asset-address' }, groupedAsset.fullAddress), !this.hideAssets &&
+            h("ul", { part: this.darkTheme ? 'asset-name-dark' : 'asset-name' }, groupedAsset.assets.map((asset) => h("li", null, asset.productName)))))));
+    };
+    renderLoader = () => {
+        return (h("div", { class: "loader" }, [...Array(this.loaderElementsCount)].map(() => h("tet-placeholder", { height: "4.6875rem", darkTheme: this.darkTheme }))));
+    };
+    renderAssetsList = () => {
+        const assets = this.groupByAddress ? this.getGroupedAssets(this.assets) : this.assets;
+        const assetRenderFunction = this.groupByAddress ? this.renderGroupedAsset : this.renderAsset;
+        return (h("tet-selection-list", { items: assets, itemRenderFunction: assetRenderFunction, multipleSelections: false, class: "item", exportparts: "label", onItemSelected: this.selectAsset }));
+    };
     render() {
         return (h(Host, { key: 'a52dddf6388ed2d2761a1a53bdb33771724d1d46' }, h("div", { key: '65edbab278ace2872030bf26c079bec2b9d57631', class: { wrapper: this.showLoader && this.singleLoader, 'dark-theme': this.darkTheme } }, this.showLoader && this.singleLoader
             ? h("tet-loader", { class: "loader-single" })

package/dist/collection/components/advanced/customer/tet-referral/tet-referral.js

@@ -9,38 +9,43 @@ import { forceUpdate, h, Host } from "@stencil/core";
  */
 export class TetReferral {
     constructor() {
-        /**
-         * Returns the link with the referral ID (the data prop encoded as Base64).
-         */
-        this.getReferralUrl = () => {
-            const b64data = btoa(this.data);
-            return `${landingPages.referralUrl}?code=${b64data}`;
-        };
-        /**
-         * Copies the referral link to the clipboard.
-         */
-        this.copyToClipBoard = () => {
-            const textToClipboard = this.getReferralUrl();
-            navigator.clipboard.writeText(textToClipboard).then(() => {
-                this.urlCopied.emit(true);
-                this.tooltip.show().then(() => {
-                    setTimeout(() => this.tooltip.hide().then(), 4000);
-                });
-            });
-        };
         this.theme = Theme.LIGHT;
         this.language = 'lv';
         this.data = undefined;
     }
+    tooltip;
     onLanguageChange(value) {
         processTranslations('tet-components', value).then(() => forceUpdate(this));
     }
+    /**
+     * The event to be emitted when the link is copied to the clipboard.
+     */
+    urlCopied;
     /**
      * Lifecycle method.
      */
     async componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    /**
+     * Returns the link with the referral ID (the data prop encoded as Base64).
+     */
+    getReferralUrl = () => {
+        const b64data = btoa(this.data);
+        return `${landingPages.referralUrl}?code=${b64data}`;
+    };
+    /**
+     * Copies the referral link to the clipboard.
+     */
+    copyToClipBoard = () => {
+        const textToClipboard = this.getReferralUrl();
+        navigator.clipboard.writeText(textToClipboard).then(() => {
+            this.urlCopied.emit(true);
+            this.tooltip.show().then(() => {
+                setTimeout(() => this.tooltip.hide().then(), 4000);
+            });
+        });
+    };
     render() {
         return (h(Host, { key: '13e83c2f9d836db221509f2d620c8118281288d4' }, h("div", { key: 'db5ca91261a88d2d1c61d4be6e6c22b745c0b9e8', class: "wrapper" }, h(ThemeWrapper, { key: 'ccc5964c3fda112e9a808b6640cd052a8e3e6ae0', theme: this.theme }, h("div", { key: '051c7ef8b713562c2210aa74427d7dbe722ea669', class: "image-container" }, h("img", { key: '4e8d781c44ac04edc3f142dc7b9e7352f2cdac63', src: t('components-referral-image-url'), alt: "" })), h("div", { key: '98cec78d0757730972e67ac6b2ffaed1a3e321fa', class: "subtitle-container" }, t('components-referral-subtitle')), h("div", { key: '39d110b915d2bc2723aa0ad244ae19154ebf3247', class: "description-container", innerHTML: t('components-referral-description') }), h("div", { key: '0a2749da0545410f534755da73309c0fa81cf45b', class: "referral-block" }, h("div", { key: '6e313d01aebabbaf63c8d8abcd0b3c99866fc4b0', class: "url-wrapper" }, h("div", { key: '9e29058a18938b129b326d286d246f306706cbce', class: "referral-url" }, this.getReferralUrl()), h("div", { key: '82ce30cc4c7cb31e468fad16e1162671c7e03dee' }, h("div", { key: '79ad46e433c35ba7718208d5e71446ae196cc05d', class: "button-wrapper" }, h("tet-tooltip", { key: '91e99222a8c81fa658467825ced8ed887f13ba16', theme: this.theme, class: "tooltip", doNotShowOnHover: true, ref: (el) => {
                 this.tooltip = el;