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

package/dist/esm/tet-address-offers_4.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-7f1e2a22.js';
-import { c as createStore } from './index-1bf36cb9.js';
-import { A as ApiRequest, e as endpoints } from './http-codes-7faa9f6e.js';
-import { t as translate, p as processTranslations } from './translations-eff34607.js';
+import { r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, H as Host } from './index-950abbb7.js';
+import { c as createStore } from './index-8ebb7ad1.js';
+import { A as ApiRequest, e as endpoints } from './http-codes-eb08ff6f.js';
+import { p as processTranslations, t as translate } from './translations-baabae60.js';
 import { g as generateFormUrl } from './build-form-url-c2769e0d.js';
-import { q as queryCustomer, c as customerAssets } from './assets-b971f105.js';
-import { c as createCallCenterTask } from './tasks-3dfcc330.js';
-import { P as PhoneNumberValidator, R as RequiredValidator } from './phone-99c2f297.js';
-import './typecheck-31fd6c02.js';
-import './async-request-6675e5f5.js';
+import { q as queryCustomer, c as customerAssets } from './assets-79f78adb.js';
+import { c as createCallCenterTask } from './tasks-770dc32d.js';
+import { P as PhoneNumberValidator, R as RequiredValidator } from './phone-4b016684.js';
+import './typecheck-4abf0258.js';
+import './async-request-ab25480d.js';
 
 /**
  * Price formatting utility function.
@@ -31,141 +31,140 @@ const formatPrice = (value, { decimalSeparator = ',', currency = '€' } = {}) =
 };
 
 class AddressOffersFilters {
+    onFilterSelect;
+    availableFilters = [];
+    allFilters = [
+        {
+            id: 'all',
+            titleTranslationKey: 'components-address-offers-tag-all',
+            active: true
+        },
+        {
+            id: 'promotions',
+            titleTranslationKey: 'components-address-offers-tag-promotions',
+            active: false
+        },
+        {
+            id: 'internet',
+            titleTranslationKey: 'components-address-offers-tag-internet',
+            active: false
+        },
+        {
+            id: 'tet-bundles',
+            titleTranslationKey: 'components-address-offers-tag-bundle',
+            active: false
+        },
+        {
+            id: 'tv',
+            titleTranslationKey: 'components-address-offers-tag-tv',
+            active: false
+        }
+    ];
+    /**
+     * The IDs of the filters that can only be selected on their own, without any other filters being selected at the same time.
+     */
+    singleSelectionFilters = ['all', 'promotions'];
     constructor(onFilterSelect) {
         this.onFilterSelect = onFilterSelect;
-        this.availableFilters = [];
-        this.allFilters = [
-            {
-                id: 'all',
-                titleTranslationKey: 'components-address-offers-tag-all',
-                active: true
-            },
-            {
-                id: 'promotions',
-                titleTranslationKey: 'components-address-offers-tag-promotions',
-                active: false
-            },
-            {
-                id: 'internet',
-                titleTranslationKey: 'components-address-offers-tag-internet',
-                active: false
-            },
-            {
-                id: 'tet-bundles',
-                titleTranslationKey: 'components-address-offers-tag-bundle',
-                active: false
-            },
-            {
-                id: 'tv',
-                titleTranslationKey: 'components-address-offers-tag-tv',
-                active: false
-            }
-        ];
-        /**
-         * The IDs of the filters that can only be selected on their own, without any other filters being selected at the same time.
-         */
-        this.singleSelectionFilters = ['all', 'promotions'];
-        this.initialize = (serviceAvailabilityData) => {
-            if (serviceAvailabilityData.structure) {
-                this.availableFilters = this.resolveFilters(serviceAvailabilityData);
-            }
-        };
-        this.getAvailableFilters = () => {
-            return this.availableFilters;
-        };
-        /**
-         * Returns the filters that should be currently displayed for the given categories and products.
-         *
-         * @param serviceAvailabilityData
-         */
-        this.resolveFilters = (serviceAvailabilityData) => {
-            const filtersCount = this.calculateFilterCounts(serviceAvailabilityData);
-            return (this.allFilters
-                // Show filters that have some products and filters without product as disabled.
-                .filter(({ id }) => filtersCount[id])
-                .map((filter) => ({
-                id: filter.id,
-                title: filter.titleTranslationKey,
-                count: filtersCount[filter.id],
-                active: filter.active,
-                showIcon: filter.id === 'all' ? false : filter.active,
-                clickAction: this.filterClickAction.bind(this, filter)
-            })));
-        };
-        /**
-         * Calculates the number (count) of offers for each filter.
-         *
-         * @param serviceAvailabilityData
-         */
-        this.calculateFilterCounts = ({ structure: structures }) => {
-            const filtersCount = {};
-            filtersCount['all'] = 0;
-            filtersCount['promotions'] = 0;
-            structures === null || structures === void 0 ? void 0 : structures.forEach((category) => {
-                category.subgroups.forEach(({ tag, products }) => {
-                    if (!filtersCount[tag]) {
-                        filtersCount[tag] = 0;
-                    }
-                    // Filter out Netflix premium products
-                    const filteredProducts = products.filter((product) => {
-                        var _a;
-                        const isNetflixPremiumProduct = (_a = product.attributes) === null || _a === void 0 ? void 0 : _a.some((attr) => attr.key === 'isNetflixPremiumProduct' && attr.value === true);
-                        return !isNetflixPremiumProduct; // Exclude Netflix premium products
-                    });
-                    filtersCount[tag] += filteredProducts.length;
-                    filtersCount['all'] += filteredProducts.length;
-                    const promotionCodeCount = filteredProducts.reduce((sum, product) => {
-                        var _a;
-                        if ((_a = product.contractTerms) === null || _a === void 0 ? void 0 : _a.some(({ promotionCode }) => promotionCode)) {
-                            return sum + 1;
-                        }
-                        return sum;
-                    }, 0);
-                    filtersCount['promotions'] += promotionCodeCount;
+    }
+    initialize = (serviceAvailabilityData) => {
+        if (serviceAvailabilityData.structure) {
+            this.availableFilters = this.resolveFilters(serviceAvailabilityData);
+        }
+    };
+    getAvailableFilters = () => {
+        return this.availableFilters;
+    };
+    /**
+     * Returns the filters that should be currently displayed for the given categories and products.
+     *
+     * @param serviceAvailabilityData
+     */
+    resolveFilters = (serviceAvailabilityData) => {
+        const filtersCount = this.calculateFilterCounts(serviceAvailabilityData);
+        return (this.allFilters
+            // Show filters that have some products and filters without product as disabled.
+            .filter(({ id }) => filtersCount[id])
+            .map((filter) => ({
+            id: filter.id,
+            title: filter.titleTranslationKey,
+            count: filtersCount[filter.id],
+            active: filter.active,
+            showIcon: filter.id === 'all' ? false : filter.active,
+            clickAction: this.filterClickAction.bind(this, filter)
+        })));
+    };
+    /**
+     * Calculates the number (count) of offers for each filter.
+     *
+     * @param serviceAvailabilityData
+     */
+    calculateFilterCounts = ({ structure: structures }) => {
+        const filtersCount = {};
+        filtersCount['all'] = 0;
+        filtersCount['promotions'] = 0;
+        structures?.forEach((category) => {
+            category.subgroups.forEach(({ tag, products }) => {
+                if (!filtersCount[tag]) {
+                    filtersCount[tag] = 0;
+                }
+                // Filter out Netflix premium products
+                const filteredProducts = products.filter((product) => {
+                    const isNetflixPremiumProduct = product.attributes?.some((attr) => attr.key === 'isNetflixPremiumProduct' && attr.value === true);
+                    return !isNetflixPremiumProduct; // Exclude Netflix premium products
                 });
+                filtersCount[tag] += filteredProducts.length;
+                filtersCount['all'] += filteredProducts.length;
+                const promotionCodeCount = filteredProducts.reduce((sum, product) => {
+                    if (product.contractTerms?.some(({ promotionCode }) => promotionCode)) {
+                        return sum + 1;
+                    }
+                    return sum;
+                }, 0);
+                filtersCount['promotions'] += promotionCodeCount;
             });
-            return filtersCount;
-        };
-        /**
-         * The click action for the filter.
-         *
-         * @param {TagInterface} filter
-         */
-        this.filterClickAction = (filter) => {
-            const availableFilter = this.availableFilters.find(({ id }) => id === filter.id);
-            if (availableFilter === undefined) {
-                return;
-            }
-            if (this.singleSelectionFilters.includes(availableFilter.id)) {
-                this.deSelectAllFilers(availableFilter);
-            }
-            else {
-                this.deSelectSingleSelectionFilters();
-            }
-            availableFilter.active = !availableFilter.active;
-            availableFilter.showIcon = availableFilter.id === 'all' ? false : !availableFilter.showIcon;
-            // If all filters become de-selected, then automatically select all offers filter.
-            if (!this.availableFilters.some(({ active }) => active)) {
-                const allSelectedFilters = this.availableFilters.find(({ id }) => id === 'all');
-                allSelectedFilters.active = true;
-            }
-            this.onFilterSelect(this.availableFilters);
-        };
-        // De-select all filters if all filter tab or not active single selection tab clicked.
-        this.deSelectAllFilers = (availableFilter) => {
-            const { id, active } = availableFilter;
-            if (id === 'all' || !active) {
-                this.availableFilters
-                    .forEach((forEachFilter) => { forEachFilter.active = false; forEachFilter.showIcon = false; });
-            }
-        };
-        //De-select those filters that cannot be included in multiple filter selection.
-        this.deSelectSingleSelectionFilters = () => {
+        });
+        return filtersCount;
+    };
+    /**
+     * The click action for the filter.
+     *
+     * @param {TagInterface} filter
+     */
+    filterClickAction = (filter) => {
+        const availableFilter = this.availableFilters.find(({ id }) => id === filter.id);
+        if (availableFilter === undefined) {
+            return;
+        }
+        if (this.singleSelectionFilters.includes(availableFilter.id)) {
+            this.deSelectAllFilers(availableFilter);
+        }
+        else {
+            this.deSelectSingleSelectionFilters();
+        }
+        availableFilter.active = !availableFilter.active;
+        availableFilter.showIcon = availableFilter.id === 'all' ? false : !availableFilter.showIcon;
+        // If all filters become de-selected, then automatically select all offers filter.
+        if (!this.availableFilters.some(({ active }) => active)) {
+            const allSelectedFilters = this.availableFilters.find(({ id }) => id === 'all');
+            allSelectedFilters.active = true;
+        }
+        this.onFilterSelect(this.availableFilters);
+    };
+    // De-select all filters if all filter tab or not active single selection tab clicked.
+    deSelectAllFilers = (availableFilter) => {
+        const { id, active } = availableFilter;
+        if (id === 'all' || !active) {
             this.availableFilters
-                .filter(({ id }) => this.singleSelectionFilters.includes(id))
                 .forEach((forEachFilter) => { forEachFilter.active = false; forEachFilter.showIcon = false; });
-        };
-    }
+        }
+    };
+    //De-select those filters that cannot be included in multiple filter selection.
+    deSelectSingleSelectionFilters = () => {
+        this.availableFilters
+            .filter(({ id }) => this.singleSelectionFilters.includes(id))
+            .forEach((forEachFilter) => { forEachFilter.active = false; forEachFilter.showIcon = false; });
+    };
 }
 
 const { state, onChange } = createStore({
@@ -428,76 +427,6 @@ const TetAddressOffers = class {
         this.emptyCatalog = createEvent(this, "emptyCatalog", 7);
         this.catalogChange = createEvent(this, "catalogChange", 7);
         this.filtersChange = createEvent(this, "filtersChange", 7);
-        /** The translation group key of the component. */
-        this.translationsGroup = 'tet-components';
-        this.allowedProductsToShowInfo = [
-            'PD_TELCO_SUPER',
-            'PD_TELCO_SUPER_PACK_A',
-            'PD_TELCO_SUPER_PACK_B',
-            'PD_TELCO_SUPER_PACK_C',
-            'PD_TELCO_SUPER_PACK_D',
-            'PD_TELCO_PACKAGE_A',
-            'PD_TELCO_PACKAGE_B',
-            'PD_TELCO_PACKAGE_C',
-            'PD_TELCO_PACKAGE_D',
-            'PD_TELCO_NETFLIX_PACKAGE_A_ITV_SUPER',
-            'PD_TELCO_HBOMAX_IPTV_PACK_A',
-            'PD_TELCO_HBOMAX_IPTV_PACK_B',
-            'PD_TELCO_HBOMAX_IPTV_PACK_C',
-            'PD_TELCO_NETFLIX_PACKAGE_A_SUPER',
-            'PD_TELCO_HBOMAX_OTT_PACK_A_SUPER',
-            'PD_TELCO_HBOMAX_OTT_PACK_B_SUPER',
-            'PD_TELCO_HBOMAX_OTT_PACK_C_SUPER'
-        ];
-        /**
-         * Filters out products that belong to the particular category.
-         *
-         * @param category
-         */
-        this.filterCategoryProducts = (category) => {
-            const filteredCodes = this.subcategoryProductFilters[category.key] || [];
-            if (filteredCodes.length > 0) {
-                return category.products.filter(product => filteredCodes.includes(product.productCode));
-            }
-            const { activeFilters } = state;
-            if (activeFilters.includes('promotions')) {
-                return category.products.filter(this.productHasPromotion.bind(this));
-            }
-            return category.products;
-        };
-        /**
-         * Determines whether the particular category should be rendered.
-         *
-         * @param category
-         */
-        this.showCategory = (category) => {
-            var _a, _b;
-            if (((_a = category.subgroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                return category.subgroups.some(this.showCategory);
-            }
-            const { activeFilters } = state;
-            return ((!category.tag ||
-                ['all', (_b = category.tag) !== null && _b !== void 0 ? _b : ''].some((tag) => activeFilters.includes(tag)) ||
-                (activeFilters.includes('promotions') && this.categoryContainsPromotions(category))) &&
-                this.categoryContainsContractTerms(category) &&
-                this.filterCategoryProducts(category).length > 0);
-        };
-        this.renderSubCategoryHeader = ({ displayTitle, name, landingPage, isOneTv }) => {
-            const categoryName = this.translateProperty(name);
-            const categoryOffersLink = this.translateProperty(landingPage);
-            return [
-                h("div", { class: { 'subcategory-title': true, [`subcategory-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, isOneTv && h("tet-icon", { name: "logo-tet-tv-plus", useDefaultColor: true }), displayTitle && categoryName && h("h3", { class: { [this.theme]: !!this.theme } }, categoryName)),
-                categoryOffersLink && (h("a", { class: { 'subcategory-offers-link': true, [`subcategory-offers-link--${this.theme}`]: !!this.theme, [this.theme]: true }, href: categoryOffersLink, target: "_blank" }, h("span", { class: { 'subcategory-offers-link-text': true, [`subcategory-offers-link-text--${this.theme}`]: !!this.theme, [this.theme]: true } }, translate('components-address-offers-view-more-link')), " -->"))
-            ];
-        };
-        /**
-         * Renders the loader.
-         */
-        this.renderLoader = () => {
-            return (h("div", { class: "placeholder" }, [...Array(2)].map(() => {
-                return (h("div", { class: "placeholder-section" }, h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-section-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "1em", width: "20%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), [...Array(3)].map(() => [h("br", null), h("tet-placeholder", { height: "10em", darkTheme: this.darkMode })])));
-            })));
-        };
         this.addressKey = undefined;
         this.catalog = undefined;
         this.theme = 'light';
@@ -509,6 +438,40 @@ const TetAddressOffers = class {
         this.showLoader = true;
         this.subcategoryProductFilters = {};
     }
+    /** The translation group key of the component. */
+    translationsGroup = 'tet-components';
+    allowedProductsToShowInfo = [
+        'PD_TELCO_SUPER',
+        'PD_TELCO_SUPER_PACK_A',
+        'PD_TELCO_SUPER_PACK_B',
+        'PD_TELCO_SUPER_PACK_C',
+        'PD_TELCO_SUPER_PACK_D',
+        'PD_TELCO_PACKAGE_A',
+        'PD_TELCO_PACKAGE_B',
+        'PD_TELCO_PACKAGE_C',
+        'PD_TELCO_PACKAGE_D',
+        'PD_TELCO_NETFLIX_PACKAGE_A_ITV_SUPER',
+        'PD_TELCO_HBOMAX_IPTV_PACK_A',
+        'PD_TELCO_HBOMAX_IPTV_PACK_B',
+        'PD_TELCO_HBOMAX_IPTV_PACK_C',
+        'PD_TELCO_NETFLIX_PACKAGE_A_SUPER',
+        'PD_TELCO_HBOMAX_OTT_PACK_A_SUPER',
+        'PD_TELCO_HBOMAX_OTT_PACK_B_SUPER',
+        'PD_TELCO_HBOMAX_OTT_PACK_C_SUPER'
+    ];
+    get element() { return getElement(this); }
+    /**
+     * Event that triggers if availability catalog is empty.
+     */
+    emptyCatalog;
+    /**
+     * Event that triggers if availability catalog is loaded or updated.
+     */
+    catalogChange;
+    /**
+     * Event that triggers when active filters have changed.
+     */
+    filtersChange;
     /**
      * Loads new data on addressKey change
      */
@@ -526,7 +489,10 @@ const TetAddressOffers = class {
      * @param event The event containing the filtered product IDs for the particular subcategory.
      */
     handleFilteredProductsChanged(event) {
-        this.subcategoryProductFilters = Object.assign(Object.assign({}, this.subcategoryProductFilters), { [event.detail.subcategoryId]: event.detail.filteredProductIds });
+        this.subcategoryProductFilters = {
+            ...this.subcategoryProductFilters,
+            [event.detail.subcategoryId]: event.detail.filteredProductIds
+        };
     }
     /**
      * Prepares the translations before the component is rendered.
@@ -580,6 +546,22 @@ const TetAddressOffers = class {
         }
         this.showLoader = false;
     }
+    /**
+     * Filters out products that belong to the particular category.
+     *
+     * @param category
+     */
+    filterCategoryProducts = (category) => {
+        const filteredCodes = this.subcategoryProductFilters[category.key] || [];
+        if (filteredCodes.length > 0) {
+            return category.products.filter(product => filteredCodes.includes(product.productCode));
+        }
+        const { activeFilters } = state;
+        if (activeFilters.includes('promotions')) {
+            return category.products.filter(this.productHasPromotion.bind(this));
+        }
+        return category.products;
+    };
     /**
      * Translates property
      *
@@ -587,15 +569,31 @@ const TetAddressOffers = class {
      * @returns {string}
      */
     translateProperty(property) {
-        return (property === null || property === void 0 ? void 0 : property[this.language]) || '';
+        return property?.[this.language] || '';
     }
+    /**
+     * Determines whether the particular category should be rendered.
+     *
+     * @param category
+     */
+    showCategory = (category) => {
+        if (category.subgroups?.length > 0) {
+            return category.subgroups.some(this.showCategory);
+        }
+        const { activeFilters } = state;
+        return ((!category.tag ||
+            ['all', category.tag ?? ''].some((tag) => activeFilters.includes(tag)) ||
+            (activeFilters.includes('promotions') && this.categoryContainsPromotions(category))) &&
+            this.categoryContainsContractTerms(category) &&
+            this.filterCategoryProducts(category).length > 0);
+    };
     /**
      * Determines whether the particular category contains at least one offer that has some promotion applied.
      *
      * @param {StructureModel} category
      */
     categoryContainsPromotions({ products = [] }) {
-        return products === null || products === void 0 ? void 0 : products.some((product) => this.productHasPromotion(product));
+        return products?.some((product) => this.productHasPromotion(product));
     }
     /**
      * Checks if product has promotion
@@ -603,8 +601,7 @@ const TetAddressOffers = class {
      * @returns {boolean}
      */
     productHasPromotion(product) {
-        var _a;
-        return (_a = product === null || product === void 0 ? void 0 : product.contractTerms) === null || _a === void 0 ? void 0 : _a.some(({ promotionCode }) => promotionCode);
+        return product?.contractTerms?.some(({ promotionCode }) => promotionCode);
     }
     /**
      * Determines whether the particular category contains at least one product that has contractTerms.
@@ -613,7 +610,7 @@ const TetAddressOffers = class {
      * @returns {boolean}
      */
     categoryContainsContractTerms({ products = [] }) {
-        return products === null || products === void 0 ? void 0 : products.some((product) => this.productHasContractTerms(product));
+        return products?.some((product) => this.productHasContractTerms(product));
     }
     /**
      * Cehcks if product has contract terms
@@ -621,18 +618,15 @@ const TetAddressOffers = class {
      * @returns {boolean}
      */
     productHasContractTerms(product) {
-        var _a;
-        return !!((_a = product === null || product === void 0 ? void 0 : product.contractTerms) === null || _a === void 0 ? void 0 : _a.length);
+        return !!product?.contractTerms?.length;
     }
     /**
      * Renders top-level categories.
      */
     renderTopCategories() {
-        var _a, _b;
-        return (_b = (_a = state.catalog) === null || _a === void 0 ? void 0 : _a.structure) === null || _b === void 0 ? void 0 : _b.filter(this.showCategory).map((structure) => {
-            var _a;
+        return state.catalog?.structure?.filter(this.showCategory).map((structure) => {
             const categoryName = this.translateProperty(structure.name);
-            return (h("section", { class: { 'category': true, [`category--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName && h("h2", { class: { 'category-title': true, [`category-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName), h("div", { class: { 'category-subcategories': true, [`category-subcategories--${this.theme}`]: !!this.theme, [this.theme]: true } }, this.renderSubCategories(structure.subgroups || [], (_a = state.catalog) === null || _a === void 0 ? void 0 : _a.meta))));
+            return (h("section", { class: { 'category': true, [`category--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName && h("h2", { class: { 'category-title': true, [`category-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, categoryName), h("div", { class: { 'category-subcategories': true, [`category-subcategories--${this.theme}`]: !!this.theme, [this.theme]: true } }, this.renderSubCategories(structure.subgroups || [], state.catalog?.meta))));
         });
     }
     /**
@@ -648,6 +642,14 @@ const TetAddressOffers = class {
                 h("div", { class: "subcategory-filters" }, h("tet-address-offers-filters-products", { catalog: this.catalog, class: `center`, language: this.language, clearFilterButton: true, subcategoryId: category.key, onFilteredProductsChanged: event => this.handleFilteredProductsChanged(event), category: category, theme: this.theme })), h("div", { class: "subcategory-products" }, this.filterCategoryProducts(category).map((product) => this.renderProduct(product, category.theme, meta)))));
         });
     }
+    renderSubCategoryHeader = ({ displayTitle, name, landingPage, isOneTv }) => {
+        const categoryName = this.translateProperty(name);
+        const categoryOffersLink = this.translateProperty(landingPage);
+        return [
+            h("div", { class: { 'subcategory-title': true, [`subcategory-title--${this.theme}`]: !!this.theme, [this.theme]: true } }, isOneTv && h("tet-icon", { name: "logo-tet-tv-plus", useDefaultColor: true }), displayTitle && categoryName && h("h3", { class: { [this.theme]: !!this.theme } }, categoryName)),
+            categoryOffersLink && (h("a", { class: { 'subcategory-offers-link': true, [`subcategory-offers-link--${this.theme}`]: !!this.theme, [this.theme]: true }, href: categoryOffersLink, target: "_blank" }, h("span", { class: { 'subcategory-offers-link-text': true, [`subcategory-offers-link-text--${this.theme}`]: !!this.theme, [this.theme]: true } }, translate('components-address-offers-view-more-link')), " -->"))
+        ];
+    };
     renderUpsellBlock(name, icons, amount) {
         let icon = icons.find(icon => icon.key === 'sac-offers-light');
         const isDarkTheme = this.theme === 'dark';
@@ -676,7 +678,6 @@ const TetAddressOffers = class {
      * @returns {FunctionalComponent}
      */
     renderProduct(product, theme = 'light', meta) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!this.getContractTerm(product)) {
             return;
         }
@@ -696,8 +697,8 @@ const TetAddressOffers = class {
         const priceTooltip = tp(this.getContractTermProperty(product, 'priceTooltip'));
         const priceDescription = tp(this.getContractTermProperty(product, 'priceDescription'));
         const contract = this.getContractTermProperty(product, 'contract');
-        const bestChoice = (_b = (_a = this.getAttribute(product.attributes, 'isBestChoice')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : false;
-        const showMaxSportUpsell = (_d = (_c = this.getAttribute(product.attributes, 'showMaxSportUpsell')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : false;
+        const bestChoice = this.getAttribute(product.attributes, 'isBestChoice')?.value ?? false;
+        const showMaxSportUpsell = this.getAttribute(product.attributes, 'showMaxSportUpsell')?.value ?? false;
         let upsellBlock = null;
         if (showMaxSportUpsell && Object.keys(meta)[0] === 'hboMaxSport') {
             const upsellProduct = Object.values(meta)[0];
@@ -712,7 +713,7 @@ const TetAddressOffers = class {
             if (contractTerm !== 0) {
                 termText = sprintf.sprintf(this.termText, contractTerm);
             }
-            if ((_f = (_e = this.getAttribute(product.attributes, 'availabilityTermUnlimitedOverride')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : false) {
+            if (this.getAttribute(product.attributes, 'availabilityTermUnlimitedOverride')?.value ?? false) {
                 termText = translate('components-indefinite');
             }
         }
@@ -723,15 +724,15 @@ const TetAddressOffers = class {
                 benefits = contractTermBenefits;
             }
         }
-        const benefitItems = benefits === null || benefits === void 0 ? void 0 : benefits.split('\n').filter(Boolean);
+        const benefitItems = benefits?.split('\n').filter(Boolean);
         let productDescription = null;
-        if ((_g = this.getAttribute(product.attributes, 'isNetflixProduct')) === null || _g === void 0 ? void 0 : _g.value) {
+        if (this.getAttribute(product.attributes, 'isNetflixProduct')?.value) {
             productDescription = translate('components-netflix-card-description');
         }
-        else if ((_h = this.getAttribute(product.attributes, 'isNetflixMaxProduct')) === null || _h === void 0 ? void 0 : _h.value) {
+        else if (this.getAttribute(product.attributes, 'isNetflixMaxProduct')?.value) {
             productDescription = translate('components-netflix-max-card-description');
         }
-        else if ((_j = this.getAttribute(product.attributes, 'isMaxProduct')) === null || _j === void 0 ? void 0 : _j.value) {
+        else if (this.getAttribute(product.attributes, 'isMaxProduct')?.value) {
             productDescription = translate('components-max-card-description');
         }
         const options = {
@@ -741,7 +742,7 @@ const TetAddressOffers = class {
             infoItemIconName: 'info-circle',
             infoItemTooltipContent: this.getProductInfoItem(product),
             bulletPoints: benefitItems,
-            price: formatPrice(promotionPrice !== null && promotionPrice !== void 0 ? promotionPrice : basePrice, { currency: '' }),
+            price: formatPrice(promotionPrice ?? basePrice, { currency: '' }),
             oldPrice: showDiscount ? formatPrice(basePrice, { currency: '' }) : null,
             currency: translate('components-euro-per-month'),
             priceInfoIconName: priceTooltip ? 'info-circle' : null,
@@ -780,11 +781,10 @@ const TetAddressOffers = class {
      * @returns {string}
      */
     getProductInfoItem(product) {
-        var _a, _b;
-        const bundleProducts = (_a = product === null || product === void 0 ? void 0 : product.bundleProducts) === null || _a === void 0 ? void 0 : _a.split(',');
+        const bundleProducts = product?.bundleProducts?.split(',');
         // Tet TV+ has the second product code in the `bundleProducts` as the broadband offer code.
         // Tet TV has only one product code in the `bundleProducts` and that is the broadband offer code.
-        const broadbandOfferCode = (_b = bundleProducts === null || bundleProducts === void 0 ? void 0 : bundleProducts[1]) !== null && _b !== void 0 ? _b : bundleProducts === null || bundleProducts === void 0 ? void 0 : bundleProducts[0];
+        const broadbandOfferCode = bundleProducts?.[1] ?? bundleProducts?.[0];
         const broadbandOffer = Object.values(state.catalog.structure[0].products).find((offer) => offer.productCode === broadbandOfferCode);
         if (!this.allowedProductsToShowInfo.includes(product.productCode)) {
             return;
@@ -794,12 +794,10 @@ const TetAddressOffers = class {
             : this.translateProperty(product.technologySpeed.description);
     }
     getContractTermProperty(product, property) {
-        var _a, _b;
-        return (_b = (_a = this.getContractTerm(product)) === null || _a === void 0 ? void 0 : _a[property]) !== null && _b !== void 0 ? _b : null;
+        return this.getContractTerm(product)?.[property] ?? null;
     }
     getContractTerm(product) {
-        var _a;
-        return (_a = product.contractTerms) === null || _a === void 0 ? void 0 : _a.find((contractTerm) => contractTerm.term === ContractTerm.TwentyFourMonth);
+        return product.contractTerms?.find((contractTerm) => contractTerm.term === ContractTerm.TwentyFourMonth);
     }
     /**
      * Finds product attribute by key.
@@ -809,7 +807,7 @@ const TetAddressOffers = class {
      * @return ProductAttributeModel
      */
     getAttribute(productAttributes, key) {
-        return productAttributes === null || productAttributes === void 0 ? void 0 : productAttributes.find((attributes) => attributes.key === key);
+        return productAttributes?.find((attributes) => attributes.key === key);
     }
     /**
      * Handles the service application form URL generation for each product.
@@ -827,7 +825,6 @@ const TetAddressOffers = class {
      * @param product
      */
     getServiceApplicationFormUrl(product) {
-        var _a, _b;
         const baseUrl = this.translateProperty(product.formUrl);
         const promotionCode = this.getContractTermProperty(product, 'promotionCode');
         let parameters = {
@@ -838,16 +835,23 @@ const TetAddressOffers = class {
         }
         parameters.addressKey = this.addressKey;
         parameters.product = product.productCode;
-        const availabilityFormUrlOverride = (_b = (_a = this.getAttribute(product.attributes, 'availabilityFormUrlOverride')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        const availabilityFormUrlOverride = this.getAttribute(product.attributes, 'availabilityFormUrlOverride')?.value ?? '';
         if (availabilityFormUrlOverride) {
             return availabilityFormUrlOverride.toString();
         }
         return generateFormUrl(baseUrl, parameters);
     }
+    /**
+     * Renders the loader.
+     */
+    renderLoader = () => {
+        return (h("div", { class: "placeholder" }, [...Array(2)].map(() => {
+            return (h("div", { class: "placeholder-section" }, h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-section-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "3em", width: "40%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), h("br", null), h("tet-placeholder", { height: "1em", width: "20%", class: "placeholder-subsection-title", darkTheme: this.darkMode }), [...Array(3)].map(() => [h("br", null), h("tet-placeholder", { height: "10em", darkTheme: this.darkMode })])));
+        })));
+    };
     render() {
         return (h(Host, { key: '15466862e81fe36fb8f001019c24a71b0f6c881e' }, this.showLoader ? this.renderLoader() : state.catalog && this.renderTopCategories()));
     }
-    get element() { return getElement(this); }
     static get watchers() { return {
         "addressKey": ["onAddressKeyChange"],
         "language": ["onLanguageChanged"]
@@ -861,23 +865,6 @@ const TetAddressOffersFiltersStyle0 = tetAddressOffersFiltersCss;
 const TetAddressOffersFilters = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** Render Clear Filter button if defined it should be included. */
-        this.renderClearFilterBtn = () => {
-            if (!this.clearFilterButton) {
-                return null;
-            }
-            if (state.availableFilters.length > 0) {
-                return (h("button", { class: { 'clear-button': true, [`theme-${this.theme}`]: true }, onClick: () => clearFilters() }, h("tet-icon", { name: "tc-reload", part: "icon-selected" }), translate('components-address-offers-filters-clear-btn')));
-            }
-            return null;
-        };
-        /**
-         * Renders loader component
-         * @returns {FunctionalComponent}
-         */
-        this.renderLoader = () => {
-            return (h("div", { class: "loader" }, Array.from({ length: 4 }).map(() => (h("tet-placeholder", { height: "2rem", width: "8rem", class: "tag-placeholder", darkTheme: this.theme === 'dark' })))));
-        };
         this.language = 'lv';
         this.clearFilterButton = false;
         this.theme = 'light';
@@ -895,6 +882,23 @@ const TetAddressOffersFilters = class {
     componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    /** Render Clear Filter button if defined it should be included. */
+    renderClearFilterBtn = () => {
+        if (!this.clearFilterButton) {
+            return null;
+        }
+        if (state.availableFilters.length > 0) {
+            return (h("button", { class: { 'clear-button': true, [`theme-${this.theme}`]: true }, onClick: () => clearFilters() }, h("tet-icon", { name: "tc-reload", part: "icon-selected" }), translate('components-address-offers-filters-clear-btn')));
+        }
+        return null;
+    };
+    /**
+     * Renders loader component
+     * @returns {FunctionalComponent}
+     */
+    renderLoader = () => {
+        return (h("div", { class: "loader" }, Array.from({ length: 4 }).map(() => (h("tet-placeholder", { height: "2rem", width: "8rem", class: "tag-placeholder", darkTheme: this.theme === 'dark' })))));
+    };
     /**
      * Renders component
      * @returns {FunctionalComponent}
@@ -917,18 +921,6 @@ const TetAssetAvailabilityAddresses = class {
         this.assetAddressSelected = createEvent(this, "assetAddressSelected", 7);
         this.addressesUpdated = createEvent(this, "addressesUpdated", 7);
         this.customerNotFound = createEvent(this, "customerNotFound", 7);
-        /**
-         * 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;
@@ -939,6 +931,10 @@ const TetAssetAvailabilityAddresses = class {
         this.lastAddedKey = '';
         this.showLoader = true;
     }
+    /**
+     * The element of the selection list component.
+     */
+    selectionListElement;
     /**
      * Watch for pid change to load addresses for given user.
      */
@@ -958,6 +954,22 @@ const TetAssetAvailabilityAddresses = class {
     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();
     }
@@ -965,14 +977,13 @@ const TetAssetAvailabilityAddresses = class {
      * 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);
@@ -1003,6 +1014,14 @@ const TetAssetAvailabilityAddresses = class {
         }, []);
     }
     ;
+    /**
+     * Address selection handler.
+     *
+     * @param event
+     */
+    selectAssetAddress = (event) => {
+        this.assetAddressSelected.emit(event.detail);
+    };
     /**
      * Method to trigger unselect functionality for the
      * selection list component.
@@ -1057,48 +1076,6 @@ const TetAvailabilityContactForm = class {
         registerInstance(this, hostRef);
         this.taskCreationSuccess = createEvent(this, "taskCreationSuccess", 7);
         this.taskCreationFailed = createEvent(this, "taskCreationFailed", 7);
-        /** The list of validators to apply to the input field. */
-        this.validators = [
-            new PhoneNumberValidator('components-validation-incorrect-phone'),
-            new RequiredValidator('components-validation-required')
-        ];
-        /**
-         * Method to close dialog element.
-         */
-        this.closeDialogElement = async () => {
-            await this.dialogElement.close();
-        };
-        /**
-         * Method to open dialog element.
-         */
-        this.openDialogElement = async () => {
-            await this.dialogElement.open();
-        };
-        /**
-         * Method to create task for call center.
-         */
-        this.createManualTask = async () => {
-            this.showLoader = true;
-            const phoneInputElement = await this.phoneInput.getInputHtmlElement();
-            const errors = await this.phoneInput.validateInput();
-            if (errors.length) {
-                this.showLoader = false;
-                return;
-            }
-            try {
-                const data = await createCallCenterTask(this.getTaskOptions(phoneInputElement.value));
-                if (data && data.TaskId) {
-                    this.taskCreationSuccess.emit(data.TaskId);
-                }
-                else {
-                    this.taskCreationFailed.emit();
-                }
-            }
-            catch (error) {
-                this.taskCreationFailed.emit(error);
-            }
-            this.showLoader = false;
-        };
         this.showLoader = false;
         this.language = 'lv';
         this.taskOptions = undefined;
@@ -1111,6 +1088,15 @@ const TetAvailabilityContactForm = class {
         this.showAvailabilityContactForm = false;
         this.subtitle = 'components-contact-form-subtitle';
     }
+    /** The input component. */
+    phoneInput;
+    /** The dialog component. */
+    dialogElement;
+    /** The list of validators to apply to the input field. */
+    validators = [
+        new PhoneNumberValidator('components-validation-incorrect-phone'),
+        new RequiredValidator('components-validation-required')
+    ];
     /**
      * The watch to update translations.
      * @param language
@@ -1118,6 +1104,10 @@ const TetAvailabilityContactForm = class {
     onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
+    /** The event emitted if the task creation was successful. */
+    taskCreationSuccess;
+    /** The event emitted if the task creation failed. */
+    taskCreationFailed;
     /**
      * Listen for task creation success event.
      * @param event
@@ -1140,6 +1130,43 @@ const TetAvailabilityContactForm = class {
         await processTranslations('tet-components', this.language);
         forceUpdate(this);
     }
+    /**
+     * Method to close dialog element.
+     */
+    closeDialogElement = async () => {
+        await this.dialogElement.close();
+    };
+    /**
+     * Method to open dialog element.
+     */
+    openDialogElement = async () => {
+        await this.dialogElement.open();
+    };
+    /**
+     * Method to create task for call center.
+     */
+    createManualTask = async () => {
+        this.showLoader = true;
+        const phoneInputElement = await this.phoneInput.getInputHtmlElement();
+        const errors = await this.phoneInput.validateInput();
+        if (errors.length) {
+            this.showLoader = false;
+            return;
+        }
+        try {
+            const data = await createCallCenterTask(this.getTaskOptions(phoneInputElement.value));
+            if (data && data.TaskId) {
+                this.taskCreationSuccess.emit(data.TaskId);
+            }
+            else {
+                this.taskCreationFailed.emit();
+            }
+        }
+        catch (error) {
+            this.taskCreationFailed.emit(error);
+        }
+        this.showLoader = false;
+    };
     /**
      * Appends the submitted phone number to the task description and returns the options.
      *
@@ -1147,7 +1174,10 @@ const TetAvailabilityContactForm = class {
      */
     getTaskOptions(phoneNumber) {
         const { taskDescription } = this.taskOptions;
-        return Object.assign(Object.assign({}, this.taskOptions), { taskDescription: [taskDescription.trim(), `Phone: ${phoneNumber}`].join(' ') });
+        return {
+            ...this.taskOptions,
+            taskDescription: [taskDescription.trim(), `Phone: ${phoneNumber}`].join(' ')
+        };
     }
     ;
     /**