@tet/tet-components 1.3.68-testing → 1.3.69-production

package/dist/collection/components/advanced/address/tet-address-offers/address-product-offers.store.js

@@ -0,0 +1,21 @@
+import { createStore } from "@stencil/store";
+const { state, onChange } = createStore({
+    catalog: {
+        addressKey: '',
+        structure: [],
+        productTags: [],
+        meta: []
+    },
+    availableTvProducts: [],
+    activeTvFilters: ['']
+});
+function clearFilters() {
+    state.activeTvFilters = [''];
+    state.availableTvProducts = state.availableTvProducts.map((availableTvFilter) => {
+        availableTvFilter.active = availableTvFilter.id === '';
+        return availableTvFilter;
+    });
+}
+;
+export default state;
+export { state, onChange, clearFilters };

package/dist/collection/components/advanced/address/tet-address-offers/tet-address-offers.css

@@ -472,6 +472,12 @@
   flex-direction: column;
   gap: 1rem;
 }
+.subcategory-filters {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
 
 .product {
   width: 100%;
@@ -485,6 +491,58 @@
     padding: 0;
   }
 }
+.product .upsell-block {
+  display: flex;
+  flex-direction: column;
+}
+.product .upsell-block--title {
+  margin-bottom: 0.5rem;
+  font: 500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
+  color: var(--tc-text-secondary);
+}
+.product .upsell-block--title.dark {
+  color: rgb(153, 160, 174);
+}
+.product .upsell-block--content {
+  background: rgb(255, 255, 255);
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  border-radius: 0.5rem;
+}
+.product .upsell-block--content.dark {
+  background: var(--tc-grey-minus-10-dark);
+}
+.product .upsell-block--icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.75rem;
+}
+.product .upsell-block--name {
+  color: var(--tc-text-primary);
+  font: 500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
+  margin-right: auto;
+}
+.product .upsell-block--name.dark {
+  color: var(--tc-grey-110-dark);
+}
+.product .upsell-block--amount {
+  color: var(--tc-text-primary);
+  font: 500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
+  background: var(--tc-background-secondary);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  margin-right: 0.75rem;
+}
+.product .upsell-block--amount.dark {
+  background: var(--tc-grey-10-dark);
+  color: var(--tc-grey-110-dark);
+}
+.product .upsell-block--tooltip {
+  cursor: pointer;
+}
 
 .placeholder-section {
   margin-bottom: 2rem;

package/dist/collection/components/advanced/address/tet-address-offers/tet-address-offers.js

@@ -6,11 +6,6 @@ import { generateFormUrl } from "../../../../services/url/build-form-url";
 import { formatPrice } from "../../../../services/utils/index";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { sprintf } from "sprintf-js";
-import tetTvPlusLogo from "../../../../assets/images/tet-tv-plus-logo.svg";
-import tetTvPlusLogoWhite from "../../../../assets/images/tet-tv-plus-logo-white.svg";
-import tetTvLogo from "../../../../assets/images/tet-tv-logo.svg";
-import tetTvLogoWhite from "../../../../assets/images/tet-tv-logo-white.svg";
-import netflixLogo from "../../../../assets/images/netflix-logo.svg";
 /**
  * This component displays the available Tet catalog offers in the given address.
  */
@@ -31,19 +26,15 @@ export class TetAddressOffers {
          * @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 } = addressOffersStore;
-            return category.products.filter((product) => {
-                var _a;
-                // Exclude Netflix premium products
-                if (category.hasNetflixToggle) {
-                    const isNetflixPremiumProduct = (_a = product.attributes) === null || _a === void 0 ? void 0 : _a.some((attr) => attr.key === 'isNetflixPremiumProduct' && attr.value === true);
-                    if (isNetflixPremiumProduct) {
-                        return false;
-                    }
-                }
-                // Apply active filters logic
-                return activeFilters.includes('promotions') ? this.productHasPromotion(product) : true;
-            });
+            if (activeFilters.includes('promotions')) {
+                return category.products.filter(this.productHasPromotion.bind(this));
+            }
+            return category.products;
         };
         /**
          * Determines whether the particular category should be rendered.
@@ -59,7 +50,8 @@ export class TetAddressOffers {
             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.categoryContainsContractTerms(category) &&
+                this.filterCategoryProducts(category).length > 0);
         };
         this.renderSubCategoryHeader = ({ displayTitle, name, landingPage, isOneTv }) => {
             const categoryName = this.translateProperty(name);
@@ -78,12 +70,15 @@ export class TetAddressOffers {
             })));
         };
         this.addressKey = undefined;
+        this.catalog = undefined;
         this.theme = 'light';
         this.darkMode = false;
         this.termText = undefined;
         this.formParameters = '';
         this.language = 'lv';
+        this.allowedTvProductCodes = [];
         this.showLoader = true;
+        this.subcategoryProductFilters = {};
     }
     /**
      * Loads new data on addressKey change
@@ -98,6 +93,12 @@ export class TetAddressOffers {
         await processTranslations(this.translationsGroup, language);
         forceUpdate(this);
     }
+    /**
+     * @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 });
+    }
     /**
      * Prepares the translations before the component is rendered.
      */
@@ -110,7 +111,6 @@ export class TetAddressOffers {
     async componentDidLoad() {
         await this.loadCatalogData();
         this.initFilterChangeEvent();
-        this.handleTabContentInit();
     }
     /**
      * Initializes the active filter change event on the component.
@@ -125,21 +125,8 @@ export class TetAddressOffers {
                 activeFilters: addressOffersStore.activeFilters,
                 availableFilters: translatedFilters
             });
-            this.handleTabContentInit();
         });
     }
-    /**
-     * Handle the init of tab conents.
-     */
-    async handleTabContentInit() {
-        await new Promise(requestAnimationFrame);
-        const tabContents = this.element.shadowRoot.querySelectorAll('tet-tab-content');
-        if (tabContents) {
-            tabContents.forEach((tabContent) => {
-                tabContent.parentContainer = this.element.shadowRoot;
-            });
-        }
-    }
     /**
      * Loads the catalog data from the gateway.
      */
@@ -147,9 +134,11 @@ export class TetAddressOffers {
         this.showLoader = true;
         addressOffersStore.availableFilters = [];
         try {
-            addressOffersStore.catalog = await serviceAvailabilityServices(this.addressKey);
+            const catalogData = await serviceAvailabilityServices(this.addressKey);
+            this.catalog = catalogData;
+            addressOffersStore.catalog = catalogData;
             this.catalogChange.emit({
-                catalog: addressOffersStore.catalog,
+                catalog: catalogData,
                 activeFilters: addressOffersStore.activeFilters,
                 availableFilters: addressOffersStore.availableFilters
             });
@@ -212,56 +201,44 @@ export class TetAddressOffers {
     renderTopCategories() {
         var _a, _b;
         return (_b = (_a = addressOffersStore.catalog) === null || _a === void 0 ? void 0 : _a.structure) === null || _b === void 0 ? void 0 : _b.filter(this.showCategory).map((structure) => {
+            var _a;
             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 || []))));
-        });
-    }
-    /**
-     * Filters products based on whether they are Netflix or non-Netflix.
-     *
-     * @param category The category structure model containing products and attributes.
-     * @param isNetflix If true, returns only Netflix products. If false, returns non-Netflix products.
-     */
-    filterProductsByNetflix(category, isNetflix) {
-        // Return all products if there's no Netflix toggle
-        if (!category.hasNetflixToggle) {
-            return category.products;
-        }
-        return category.products.filter((product) => {
-            var _a, _b;
-            // Exclude Netflix premium products
-            const isNetflixPremiumProduct = (_a = product.attributes) === null || _a === void 0 ? void 0 : _a.some((attr) => attr.key === 'isNetflixPremiumProduct' && attr.value === true);
-            if (isNetflixPremiumProduct) {
-                return false;
-            }
-            // Check if the product is a Netflix product
-            const isNetflixProduct = (_b = product.attributes) === null || _b === void 0 ? void 0 : _b.some((attr) => attr.key === 'isNetflixProduct' && attr.value === true);
-            // Return based on the `isNetflix` flag
-            return isNetflix ? isNetflixProduct : !isNetflixProduct;
+            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 = addressOffersStore.catalog) === null || _a === void 0 ? void 0 : _a.meta))));
         });
     }
     /**
      * Renders sub-category blocks.
      *
      * @param {StructureModel[]} categories
+     * @param {MetaModel[]} meta
      * @returns {FunctionalComponent[]}
      */
-    renderSubCategories(categories) {
+    renderSubCategories(categories, meta) {
         return categories.filter(this.showCategory).map((category) => {
-            // If the category has a Netflix toggle, render the tabs
-            if (category.hasNetflixToggle) {
-                const nonNetflixProducts = this.filterProductsByNetflix(category, false);
-                const netflixProducts = this.filterProductsByNetflix(category, true);
-                const isIptvCategory = category.key === "iptv";
-                return (h("div", { class: "subcategory" }, h("div", { class: { 'subcategory-header': true, [`subcategory-header--${this.theme}`]: !!this.theme, [this.theme]: true } }, this.renderSubCategoryHeader(category)), h("div", { class: "tab-header" }, h("tet-tab-header", { class: "header-switch", theme: this.theme, position: "center", "data-name": category.key, "default-tab": category.key + '1', segmented: true, sizing: "web", "hide-header-underline": false }, h("button", { class: { 'text-first': true, [`text-first--${this.theme}`]: !!this.theme, [this.theme]: true }, "data-name": category.key + '1' }, h("img", { src: isIptvCategory
-                        ? (this.theme === 'dark' ? tetTvLogoWhite : tetTvLogo)
-                        : (this.theme === 'dark' ? tetTvPlusLogoWhite : tetTvPlusLogo), alt: "tet-tv-logo", class: "tab-header-image", style: { maxHeight: '1.5rem' } }), t('components-tab-subscriptions')), h("button", { class: { 'text-first': true, [`text-first--${this.theme}`]: !!this.theme, [this.theme]: true }, "data-name": category.key + '2', "data-image": netflixLogo, "data-image-alt": "netflix" }, isIptvCategory ? t('components-tab-tet-tv') : t('components-tab-tet-tv-plus')))), h("tet-tab-content", { class: "tab-content", "data-name": category.key, "default-tab": category.key + '1', "use-visibility": false }, h("div", { "data-name": category.key + '1' }, h("div", { class: "subcategory-tab" }, nonNetflixProducts.map((product) => this.renderProduct(product, category.theme)))), h("div", { "data-name": category.key + '2' }, h("div", { class: "subcategory-tab" }, netflixProducts.map((product) => this.renderProduct(product, category.theme)))))));
-            }
-            // For categories without Netflix toggle, render normally
-            const filteredProducts = this.filterCategoryProducts(category);
-            return (h("div", { class: "subcategory" }, h("div", { class: "subcategory-header" }, this.renderSubCategoryHeader(category)), h("div", { class: "subcategory-products" }, filteredProducts.map((product) => this.renderProduct(product, category.theme)))));
+            return (h("div", { class: "subcategory" }, h("div", { class: "subcategory-header" }, this.renderSubCategoryHeader(category)), category.hasProductTags &&
+                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)))));
         });
     }
+    renderUpsellBlock(name, icons, amount) {
+        let icon = icons.find(icon => icon.key === 'upsell-adjust-offers-light');
+        const isDarkTheme = this.theme === 'dark';
+        if (isDarkTheme) {
+            icon = icons.find(icon => icon.key === 'upsell-adjust-offers-dark');
+        }
+        return (h("div", { class: "upsell-block" }, h("div", { class: {
+                'upsell-block--title': true,
+                'dark': isDarkTheme
+            } }, t('components-max-sport-upsell-title')), h("div", { class: {
+                'upsell-block--content': true,
+                'dark': isDarkTheme
+            } }, h("img", { src: icon.icon, class: { 'upsell-block--icon': true } }), h("div", { class: {
+                'upsell-block--name': true,
+                'dark': isDarkTheme
+            } }, name), h("div", { class: {
+                'upsell-block--amount': true,
+                'dark': isDarkTheme
+            } }, "+", amount, " Eur"), h("div", { class: { 'upsell-block--tooltip': true } }, h("tet-icon", { class: "icon", name: "info-circle", focusable: true, theme: this.theme }), h("tet-tooltip", { theme: this.theme }, t('components-max-sport-upsell-tooltip-info'))))));
+    }
     /**
      * Renders a single product.
      *
@@ -269,15 +246,15 @@ export class TetAddressOffers {
      * @param {ServiceAvailabilityServicesCategoryTheme} theme
      * @returns {FunctionalComponent}
      */
-    renderProduct(product, theme = 'light') {
-        var _a, _b, _c, _d, _e;
+    renderProduct(product, theme = 'light', meta) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!this.getContractTerm(product)) {
             return;
         }
         const tp = (property) => this.translateProperty(property);
         const tooltip = (text) => `
-        <tet-icon class="icon" name="info-circle" focusable={true}></tet-icon>
-        <tet-tooltip>${text}</tet-tooltip>
+        <tet-icon class="icon" name="info-circle" focusable="${true}"></tet-icon>
+        <tet-tooltip theme="${this.theme}">${text}</tet-tooltip>
       `.trim();
         const buttonTheme = this.darkMode ? 'dark' : 'light';
         const button = (text, link) => `
@@ -295,13 +272,22 @@ export class TetAddressOffers {
         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;
+        let upsellBlock = null;
+        if (showMaxSportUpsell && Object.keys(meta)[0] === 'hboMaxSport') {
+            const upsellProduct = Object.values(meta)[0];
+            const name = upsellProduct.name ? upsellProduct.name[this.language] : '';
+            const icons = upsellProduct.icons ? upsellProduct.icons : [];
+            const amount = upsellProduct.amount ? upsellProduct.amount : null;
+            upsellBlock = this.renderUpsellBlock(name, icons, amount);
+        }
         let termText = null;
         if (this.termText) {
             const contractTerm = this.getContractTermProperty(product, 'term');
             if (contractTerm !== 0) {
                 termText = sprintf(this.termText, contractTerm);
             }
-            if ((_d = (_c = this.getAttribute(product.attributes, 'availabilityTermUnlimitedOverride')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : false) {
+            if ((_f = (_e = this.getAttribute(product.attributes, 'availabilityTermUnlimitedOverride')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : false) {
                 termText = t('components-indefinite');
             }
         }
@@ -313,6 +299,16 @@ export class TetAddressOffers {
             }
         }
         const benefitItems = benefits === null || benefits === void 0 ? void 0 : benefits.split('\n').filter(Boolean);
+        let productDescription = null;
+        if ((_g = this.getAttribute(product.attributes, 'isNetflixProduct')) === null || _g === void 0 ? void 0 : _g.value) {
+            productDescription = t('components-netflix-card-description');
+        }
+        else if ((_h = this.getAttribute(product.attributes, 'isNetflixMaxProduct')) === null || _h === void 0 ? void 0 : _h.value) {
+            productDescription = t('components-netflix-max-card-description');
+        }
+        else if ((_j = this.getAttribute(product.attributes, 'isMaxProduct')) === null || _j === void 0 ? void 0 : _j.value) {
+            productDescription = t('components-max-card-description');
+        }
         const options = {
             mainTitle: tp(product.name),
             subTitle: this.getProductSubtitle(product),
@@ -330,13 +326,11 @@ export class TetAddressOffers {
             secondaryLink: contract,
             secondaryLinkText: t('components-offers-contract-term-link'),
             secondaryLinkOpenBlank: true,
-            netflixProductDescription: ((_e = this.getAttribute(product.attributes, 'isNetflixProduct')) === null || _e === void 0 ? void 0 : _e.value)
-                ? t('components-netflix-card-description')
-                : null,
+            netflixProductDescription: productDescription,
         };
         return (h("tet-compare-card", { class: { 'product': true, 'best-choice': bestChoice }, options: options, cardType: "wide60-40", minWideWidth: 768, theme: theme, bestChoice: bestChoice,
             // Resets the best choice card height to 100% and removes negative margin
-            cardList: true, darkMode: this.darkMode }));
+            cardList: true, darkMode: this.darkMode, darkModeOverride: this.theme == "dark" }, h("div", { slot: "upsell-block-slot" }, upsellBlock)));
     }
     /**
      * Returns the product subtitle with the dynamic broadband speed if the product is broadband or a TV/TV+ hard bundle.
@@ -424,7 +418,7 @@ export class TetAddressOffers {
         return generateFormUrl(baseUrl, parameters);
     }
     render() {
-        return (h(Host, { key: '581f2290f683f9bcf77bb2ae8a00b951f06b4606' }, this.showLoader ? this.renderLoader() : addressOffersStore.catalog && this.renderTopCategories()));
+        return (h(Host, { key: '2995d979e507e7ceafe7a8c51712314a35d59c1e' }, this.showLoader ? this.renderLoader() : addressOffersStore.catalog && this.renderTopCategories()));
     }
     static get is() { return "tet-address-offers"; }
     static get encapsulation() { return "shadow"; }
@@ -457,6 +451,27 @@ export class TetAddressOffers {
                 "attribute": "address-key",
                 "reflect": false
             },
+            "catalog": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvailableServicesModel",
+                    "resolved": "AvailableServicesModel",
+                    "references": {
+                        "AvailableServicesModel": {
+                            "location": "import",
+                            "path": "@services/api/services/catalog/service-availability-services",
+                            "id": "src/services/api/services/catalog/service-availability-services.ts::AvailableServicesModel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The catalog data."
+                }
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -551,12 +566,29 @@ export class TetAddressOffers {
                 "attribute": "language",
                 "reflect": false,
                 "defaultValue": "'lv'"
+            },
+            "allowedTvProductCodes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently active tv product filters."
+                },
+                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
-            "showLoader": {}
+            "showLoader": {},
+            "subcategoryProductFilters": {}
         };
     }
     static get events() {

package/dist/collection/components/advanced/address/tet-address-offers-filters/address-offers-filters.js

@@ -49,13 +49,14 @@ class AddressOffersFilters {
         this.resolveFilters = (serviceAvailabilityData) => {
             const filtersCount = this.calculateFilterCounts(serviceAvailabilityData);
             return (this.allFilters
-                // Show only filters that have some products.
+                // 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)
             })));
         };
@@ -104,22 +105,34 @@ class AddressOffersFilters {
                 return;
             }
             if (this.singleSelectionFilters.includes(availableFilter.id)) {
-                // De-select all filters.
-                this.availableFilters.forEach((forEachFilter) => (forEachFilter.active = false));
+                this.deSelectAllFilers(availableFilter);
             }
             else {
-                // De-select those filters that cannot be included in multiple filter selection.
-                this.availableFilters
-                    .filter(({ id }) => this.singleSelectionFilters.includes(id))
-                    .forEach((forEachFilter) => (forEachFilter.active = false));
+                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)) {
-                this.availableFilters.find(({ id }) => id === 'all').active = true;
+                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 = () => {
+            this.availableFilters
+                .filter(({ id }) => this.singleSelectionFilters.includes(id))
+                .forEach((forEachFilter) => { forEachFilter.active = false; forEachFilter.showIcon = false; });
+        };
     }
 }
 export { AddressOffersFilters };

package/dist/collection/components/advanced/address/tet-address-offers-filters-products/address-offers-products-filters.js

@@ -0,0 +1,95 @@
+class AddressOffersProductsFilters {
+    constructor(onFilterSelect) {
+        this.onFilterSelect = onFilterSelect;
+        this.availableTvFilters = [];
+        this.allFilters = [];
+        this.initialize = (serviceAvailabilityData, category) => {
+            if (serviceAvailabilityData.productTags) {
+                this.availableTvFilters = this.resolveFilters(serviceAvailabilityData, category);
+            }
+            this.updateDisabledFilters();
+            this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds(category));
+        };
+        this.getAvailableFilters = () => {
+            return [...this.availableTvFilters];
+        };
+        this.clearFilters = (category) => {
+            this.availableTvFilters.forEach(filter => (filter.active = false));
+            this.updateDisabledFilters();
+            this.onFilterSelect([...this.availableTvFilters], [], this.getFilteredProductIds(category));
+        };
+        this.resolveFilters = (serviceAvailabilityData, category) => {
+            const subcategoryProductCodes = new Set(category.products.map(product => product.productCode));
+            const productTags = serviceAvailabilityData.productTags || [];
+            return productTags
+                .map(tag => {
+                const localProducts = (tag.products || []).filter(productCode => subcategoryProductCodes.has(productCode));
+                return {
+                    id: tag.tag,
+                    title: tag.title,
+                    products: localProducts,
+                    active: false,
+                    disabled: false,
+                    showIcon: false,
+                    clickAction: this.filterClickAction.bind(this)
+                };
+            })
+                .filter(filter => filter.products.length > 0); // Only include if products present in this group
+        };
+        this.updateDisabledFilters = () => {
+            const activeFilters = this.availableTvFilters.filter(f => f.active);
+            const activeCount = activeFilters.length;
+            let intersection = null;
+            if (activeCount > 0) {
+                intersection = new Set(activeFilters[0].products);
+                for (let i = 1; i < activeFilters.length; i++) {
+                    intersection = new Set([...intersection].filter(productCode => activeFilters[i].products.includes(productCode)));
+                }
+            }
+            for (const filter of this.availableTvFilters) {
+                if (filter.active || activeCount === 0) {
+                    filter.disabled = false;
+                }
+                else {
+                    let simulatedIntersection = intersection ? [...intersection] : filter.products;
+                    if (intersection) {
+                        simulatedIntersection = simulatedIntersection.filter(code => filter.products.includes(code));
+                    }
+                    filter.disabled = simulatedIntersection.length <= 1;
+                    filter.showIcon = false;
+                }
+            }
+        };
+        this.filterClickAction = (filter, category) => {
+            const availableFilter = this.availableTvFilters.find(({ id }) => id === filter.id);
+            if (!availableFilter)
+                return;
+            if (availableFilter.disabled)
+                return;
+            availableFilter.active = !availableFilter.active;
+            availableFilter.showIcon = !availableFilter.showIcon;
+            this.updateDisabledFilters();
+            this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds(category));
+        };
+        this.getActiveFilterIds = () => {
+            return this.availableTvFilters.filter(filter => filter.active).map(filter => filter.id);
+        };
+        this.getFilteredProductIds = (category = null) => {
+            if (!category || !category.products) {
+                return [];
+            }
+            const activeTags = this.availableTvFilters.filter(tag => tag.active);
+            if (activeTags.length === 0) {
+                return category.products.map(product => product.productCode);
+            }
+            let intersection = [...activeTags[0].products];
+            for (let i = 1; i < activeTags.length; i++) {
+                intersection = intersection.filter(productCode => activeTags[i].products.includes(productCode));
+            }
+            const productsInCategory = new Set(category.products.map(product => product.productCode));
+            intersection = intersection.filter(productCode => productsInCategory.has(productCode));
+            return intersection;
+        };
+    }
+}
+export { AddressOffersProductsFilters };

package/dist/collection/components/advanced/address/tet-address-offers-filters-products/test/tet-address-offers-filters-products.spec.js

@@ -0,0 +1,23 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TetAddressOffersFiltersProducts } from "../tet-address-offers-filters-products";
+describe('tet-address-offers-filters-products', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [TetAddressOffersFiltersProducts],
+            html: `<tet-address-offers-filters-products></tet-address-offers-filters-products>`
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-address-offers-filters-products>
+        <mock:shadow-root>
+          <div class="loader">
+            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
+            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
+            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
+            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
+          </div>
+         <tet-tag-group language="lv" theme="light"></tet-tag-group>
+        </mock:shadow-root>
+      </tet-address-offers-filters-products>
+    `);
+    });
+});