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

package/dist/collection/components/advanced/cards/tet-compare-cards-tab/compare-cards-tab-products-filters.js

@@ -1,96 +1,97 @@
 class CompareCardsTabProductsFilters {
+    onFilterSelect;
+    availableTvFilters = [];
+    allFilters = [];
+    currentProducts = {};
     constructor(onFilterSelect) {
         this.onFilterSelect = onFilterSelect;
-        this.availableTvFilters = [];
-        this.allFilters = [];
-        this.currentProducts = {};
-        this.initialize = (productCodes) => {
-            const products = productCodes['products'];
-            const productTags = productCodes['productTags'];
-            this.currentProducts = products;
-            this.availableTvFilters = this.resolveFilters(products, productTags);
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds());
-        };
-        this.getAvailableFilters = () => {
-            return [...this.availableTvFilters];
-        };
-        this.clearFilters = () => {
-            this.availableTvFilters.forEach(filter => {
-                filter.active = false;
-                filter.showIcon = false;
-            });
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], [], this.getFilteredProductIds());
-        };
-        this.resolveFilters = (products, productTags) => {
-            const productCodeSet = new Set(Object.values(products).map(product => product.productCode));
-            return (productTags || [])
-                .map(tag => {
-                const localProducts = (tag.products || []).filter(productCode => productCodeSet.has(productCode));
-                return {
-                    id: tag.tag,
-                    title: tag.title,
-                    products: localProducts,
-                    active: false,
-                    disabled: false,
-                    clickAction: this.filterClickAction.bind(this),
-                };
-            })
-                .filter(filter => filter.products.length > 0);
-        };
-        this.filterClickAction = (filter) => {
-            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());
-        };
-        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 <= 0;
-                    filter.showIcon = false;
-                }
+    }
+    initialize = (productCodes) => {
+        const products = productCodes['products'];
+        const productTags = productCodes['productTags'];
+        this.currentProducts = products;
+        this.availableTvFilters = this.resolveFilters(products, productTags);
+        this.updateDisabledFilters();
+        this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds());
+    };
+    getAvailableFilters = () => {
+        return [...this.availableTvFilters];
+    };
+    clearFilters = () => {
+        this.availableTvFilters.forEach(filter => {
+            filter.active = false;
+            filter.showIcon = false;
+        });
+        this.updateDisabledFilters();
+        this.onFilterSelect([...this.availableTvFilters], [], this.getFilteredProductIds());
+    };
+    resolveFilters = (products, productTags) => {
+        const productCodeSet = new Set(Object.values(products).map(product => product.productCode));
+        return (productTags || [])
+            .map(tag => {
+            const localProducts = (tag.products || []).filter(productCode => productCodeSet.has(productCode));
+            return {
+                id: tag.tag,
+                title: tag.title,
+                products: localProducts,
+                active: false,
+                disabled: false,
+                clickAction: this.filterClickAction.bind(this),
+            };
+        })
+            .filter(filter => filter.products.length > 0);
+    };
+    filterClickAction = (filter) => {
+        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());
+    };
+    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)));
             }
-        };
-        this.getActiveFilterIds = () => {
-            return this.availableTvFilters.filter(filter => filter.active).map(filter => filter.id);
-        };
-        this.getFilteredProductIds = () => {
-            const activeTags = this.availableTvFilters.filter(tag => tag.active);
-            const allProductCodes = Object.values(this.currentProducts).map(p => p.productCode);
-            if (activeTags.length === 0) {
-                return allProductCodes;
+        }
+        for (const filter of this.availableTvFilters) {
+            if (filter.active || activeCount === 0) {
+                filter.disabled = false;
             }
-            let intersection = [...activeTags[0].products];
-            for (let i = 1; i < activeTags.length; i++) {
-                intersection = intersection.filter(productCode => activeTags[i].products.includes(productCode));
+            else {
+                let simulatedIntersection = intersection ? [...intersection] : filter.products;
+                if (intersection) {
+                    simulatedIntersection = simulatedIntersection.filter(code => filter.products.includes(code));
+                }
+                filter.disabled = simulatedIntersection.length <= 0;
+                filter.showIcon = false;
             }
-            const validSet = new Set(allProductCodes);
-            intersection = intersection.filter(code => validSet.has(code));
-            return intersection;
-        };
-    }
+        }
+    };
+    getActiveFilterIds = () => {
+        return this.availableTvFilters.filter(filter => filter.active).map(filter => filter.id);
+    };
+    getFilteredProductIds = () => {
+        const activeTags = this.availableTvFilters.filter(tag => tag.active);
+        const allProductCodes = Object.values(this.currentProducts).map(p => p.productCode);
+        if (activeTags.length === 0) {
+            return allProductCodes;
+        }
+        let intersection = [...activeTags[0].products];
+        for (let i = 1; i < activeTags.length; i++) {
+            intersection = intersection.filter(productCode => activeTags[i].products.includes(productCode));
+        }
+        const validSet = new Set(allProductCodes);
+        intersection = intersection.filter(code => validSet.has(code));
+        return intersection;
+    };
 }
 export { CompareCardsTabProductsFilters };

package/dist/collection/components/advanced/cards/tet-compare-cards-tab/tet-compare-cards-tab.js

@@ -7,23 +7,6 @@ import { CompareCardsTabProductsFilters } from "./compare-cards-tab-products-fil
  */
 export class TetTabCompareCards {
     constructor() {
-        /**
-         * Handles filtered products changed event from tet-address-offers-filters-products.
-         */
-        this.handleFilteredProductsChanged = (event) => {
-            this.filteredProductCodes = event.detail.filteredProductIds;
-        };
-        this.renderLoader = () => (h("div", { class: {
-                'tet-compare-cards-tab__placeholder': true,
-                'visible': this.showLoader
-            } }, [...Array(3)].map(() => (h("tet-placeholder", { class: "tet-placeholder", height: "27rem", width: "21.5rem", darkTheme: this.darkMode })))));
-        /**
-         * Renders product filters component.
-         * @returns Renders product filters component
-         */
-        this.renderProductFilters = () => {
-            return (h("tet-address-offers-filters-products", { productCodes: this.productSACData, class: "center tet-compare-cards-tab__filters", clearFilterButton: true, onFilteredProductsChanged: this.handleFilteredProductsChanged, theme: this.darkMode ? 'dark' : 'light' }));
-        };
         this.data = undefined;
         this.forceColumn = false;
         this.layout = 'default';
@@ -37,6 +20,9 @@ export class TetTabCompareCards {
         this.productSACData = undefined;
         this.filteredProductCodes = [];
     }
+    /** The root of the component */
+    element;
+    compareCardsFiltersHelper;
     async componentWillLoad() {
         const productCodes = this.addProductCodes(this.data, []);
         if (productCodes.length > 0) {
@@ -72,14 +58,14 @@ export class TetTabCompareCards {
      * @param productCodes A list of product codes.
      */
     addProductCodes(tabList, productCodes) {
-        if ((tabList === null || tabList === void 0 ? void 0 : tabList.compareCards) !== undefined) {
+        if (tabList?.compareCards !== undefined) {
             tabList.compareCards.forEach((element) => {
                 if (typeof element.productCode !== 'undefined' && !productCodes.includes(element.productCode)) {
                     productCodes.push(element.productCode);
                 }
             });
         }
-        else if ((tabList === null || tabList === void 0 ? void 0 : tabList.tabs) !== undefined) {
+        else if (tabList?.tabs !== undefined) {
             tabList.tabs.forEach((element) => {
                 if (element.compareCards !== undefined) {
                     productCodes = this.addProductCodes(element, productCodes);
@@ -116,6 +102,16 @@ export class TetTabCompareCards {
         });
         this.compareCardsFiltersHelper.initialize(this.productSACData);
     }
+    /**
+     * Handles filtered products changed event from tet-address-offers-filters-products.
+     */
+    handleFilteredProductsChanged = (event) => {
+        this.filteredProductCodes = event.detail.filteredProductIds;
+    };
+    renderLoader = () => (h("div", { class: {
+            'tet-compare-cards-tab__placeholder': true,
+            'visible': this.showLoader
+        } }, [...Array(3)].map(() => (h("tet-placeholder", { class: "tet-placeholder", height: "27rem", width: "21.5rem", darkTheme: this.darkMode })))));
     /**
      * Renders the tab header.
      *
@@ -128,11 +124,11 @@ export class TetTabCompareCards {
                 return;
             }
         }
-        if ((tabList === null || tabList === void 0 ? void 0 : tabList.tabs) === undefined || (tabList === null || tabList === void 0 ? void 0 : tabList.tabHeader) === undefined) {
+        if (tabList?.tabs === undefined || tabList?.tabHeader === undefined) {
             return;
         }
         tabList.tabs.map((tab) => {
-            if ((tab === null || tab === void 0 ? void 0 : tab.title) === '' || (tab === null || tab === void 0 ? void 0 : tab.title) === undefined) {
+            if (tab?.title === '' || tab?.title === undefined) {
                 return;
             }
             if (tabList.tabs.length === 1) {
@@ -157,6 +153,13 @@ export class TetTabCompareCards {
                 : '')))));
         }
     }
+    /**
+     * Renders product filters component.
+     * @returns Renders product filters component
+     */
+    renderProductFilters = () => {
+        return (h("tet-address-offers-filters-products", { productCodes: this.productSACData, class: "center tet-compare-cards-tab__filters", clearFilterButton: true, onFilteredProductsChanged: this.handleFilteredProductsChanged, theme: this.darkMode ? 'dark' : 'light' }));
+    };
     /**
      * Renders compare cards
      * @param cards The details of the tab
@@ -179,7 +182,7 @@ export class TetTabCompareCards {
             }
             cardsWithAddedSACData.push(element);
         });
-        return (h("div", { class: "tet-compare-cards-tab__content" }, h("tet-compare-cards", { theme: this.theme, "dark-mode": this.darkMode, "is-netflix-card": this.isNetflixCard, layout: this.layout, "force-column": this.forceColumn, "vat-text": vatText !== null && vatText !== void 0 ? vatText : false, "card-script": cardScript !== null && cardScript !== void 0 ? cardScript : false, data: cardsWithAddedSACData })));
+        return (h("div", { class: "tet-compare-cards-tab__content" }, h("tet-compare-cards", { theme: this.theme, "dark-mode": this.darkMode, "is-netflix-card": this.isNetflixCard, layout: this.layout, "force-column": this.forceColumn, "vat-text": vatText ?? false, "card-script": cardScript ?? false, data: cardsWithAddedSACData })));
     }
     render() {
         return (h(Host, { key: 'e5053b5fc6a387ead25274117c56453be934a850' }, h("div", { key: '4ea1b50f18436416bbd7cbda69eb23470eeebdf2', class: "tet-compare-cards-tab-wrapper" }, this.withProductFilters ? this.renderProductFilters() : '', this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: 'f9a144648ca90e24b095b556506a590d2ff0e4ce', class: {

package/dist/collection/components/advanced/cards/tet-dynamic-card/tet-dynamic-card.js

@@ -13,65 +13,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetDynamicCard {
     constructor() {
-        this.priceViewRef = null;
-        this.buttonRef = null;
-        this.dateTagColorRef = null;
-        this.rootElementRef = null;
-        this.BREAKPOINTS = {
-            MOBILE: 768,
-            TABLET: 1440,
-            DESKTOP: 1920
-        };
-        this.CARD_SIZES = {
-            standard: {
-                'S': 'fit-content',
-                'M': 'calc(50% - 0.75rem)',
-                'XL': '100%',
-            },
-            responsive: {
-                mobile: '100%',
-                tablet: 'calc(100% - var(--card-width-tablet) - 1.5rem - 2px)',
-                desktop: 'calc(100% - var(--card-width-desktop) - 1.5rem - 2px)',
-            }
-        };
-        this.resizeCard = (width) => {
-            this.currentSize = this.getCardSize(width);
-            this.rootElementRef.style.minWidth = this.getMinWidth(width);
-            this.rootElementRef.style.width = this.getCardWidth(this.currentSize, width);
-        };
-        this.resizeObserver = new ResizeObserver(() => {
-            var _a, _b, _c, _d, _e, _f;
-            const width = window.innerWidth;
-            this.resizeCard(width);
-            if (width < 768) {
-                (_a = this.priceViewRef) === null || _a === void 0 ? void 0 : _a.setAttribute('size', 'S');
-                (_b = this.buttonRef) === null || _b === void 0 ? void 0 : _b.setAttribute('size', 'small');
-            }
-            else if (width < 1920) {
-                (_c = this.priceViewRef) === null || _c === void 0 ? void 0 : _c.setAttribute('size', 'M');
-                (_d = this.buttonRef) === null || _d === void 0 ? void 0 : _d.setAttribute('size', 'medium');
-            }
-            else {
-                (_e = this.priceViewRef) === null || _e === void 0 ? void 0 : _e.setAttribute('size', 'M');
-                (_f = this.buttonRef) === null || _f === void 0 ? void 0 : _f.setAttribute('size', 'large');
-            }
-        });
-        this.handleClick = (event) => {
-            var _a;
-            const path = event.composedPath();
-            const isButtonClick = path.some(el => { var _a; return el instanceof HTMLElement && ((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains('button')); });
-            if (!isButtonClick) {
-                if (this.buttonRef && this.linkHref) {
-                    const button = (_a = this.buttonRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
-                    if (button) {
-                        button.click();
-                    }
-                }
-            }
-            else {
-                this.tetDynamicCardClickEvent.emit();
-            }
-        };
         this.theme = 'light';
         this.size = 'S';
         this.sizeChangeBreakpoint = 'None';
@@ -96,20 +37,42 @@ export class TetDynamicCard {
         this.currentSize = null;
     }
     onThemeChanged(theme) {
-        var _a, _b, _c, _d;
         if (theme === 'dark') {
-            (_a = this.dateTagColorRef) === null || _a === void 0 ? void 0 : _a.classList.remove(`tag--${this.dateTagColorLight}`);
-            (_b = this.dateTagColorRef) === null || _b === void 0 ? void 0 : _b.classList.add(`tag--${this.dateTagColorDark}`);
+            this.dateTagColorRef?.classList.remove(`tag--${this.dateTagColorLight}`);
+            this.dateTagColorRef?.classList.add(`tag--${this.dateTagColorDark}`);
         }
         else {
-            (_c = this.dateTagColorRef) === null || _c === void 0 ? void 0 : _c.classList.remove(`tag--${this.dateTagColorDark}`);
-            (_d = this.dateTagColorRef) === null || _d === void 0 ? void 0 : _d.classList.add(`tag--${this.dateTagColorLight}`);
+            this.dateTagColorRef?.classList.remove(`tag--${this.dateTagColorDark}`);
+            this.dateTagColorRef?.classList.add(`tag--${this.dateTagColorLight}`);
         }
     }
     onSizeChange() {
         this.originalSize = this.size;
         this.resizeCard(window.innerWidth);
     }
+    /** Event emitted when the card is clicked */
+    tetDynamicCardClickEvent;
+    priceViewRef = null;
+    buttonRef = null;
+    dateTagColorRef = null;
+    rootElementRef = null;
+    BREAKPOINTS = {
+        MOBILE: 768,
+        TABLET: 1440,
+        DESKTOP: 1920
+    };
+    CARD_SIZES = {
+        standard: {
+            'S': 'fit-content',
+            'M': 'calc(50% - 0.75rem)',
+            'XL': '100%',
+        },
+        responsive: {
+            mobile: '100%',
+            tablet: 'calc(100% - var(--card-width-tablet) - 1.5rem - 2px)',
+            desktop: 'calc(100% - var(--card-width-desktop) - 1.5rem - 2px)',
+        }
+    };
     getCardSize(width) {
         if (this.originalSize === 'L') {
             if (width < this.BREAKPOINTS.MOBILE) {
@@ -183,6 +146,27 @@ export class TetDynamicCard {
         }
         return this.CARD_SIZES.standard[size] || 'fit-content';
     }
+    resizeCard = (width) => {
+        this.currentSize = this.getCardSize(width);
+        this.rootElementRef.style.minWidth = this.getMinWidth(width);
+        this.rootElementRef.style.width = this.getCardWidth(this.currentSize, width);
+    };
+    resizeObserver = new ResizeObserver(() => {
+        const width = window.innerWidth;
+        this.resizeCard(width);
+        if (width < 768) {
+            this.priceViewRef?.setAttribute('size', 'S');
+            this.buttonRef?.setAttribute('size', 'small');
+        }
+        else if (width < 1920) {
+            this.priceViewRef?.setAttribute('size', 'M');
+            this.buttonRef?.setAttribute('size', 'medium');
+        }
+        else {
+            this.priceViewRef?.setAttribute('size', 'M');
+            this.buttonRef?.setAttribute('size', 'large');
+        }
+    });
     componentWillLoad() {
         this.originalSize = this.size;
         this.currentSize = this.size;
@@ -191,16 +175,29 @@ export class TetDynamicCard {
         this.onThemeChanged(this.theme);
         this.resizeObserver.observe(window.document.body);
     }
+    handleClick = (event) => {
+        const path = event.composedPath();
+        const isButtonClick = path.some(el => el instanceof HTMLElement && el.classList?.contains('button'));
+        if (!isButtonClick) {
+            if (this.buttonRef && this.linkHref) {
+                const button = this.buttonRef.shadowRoot?.querySelector('button');
+                if (button) {
+                    button.click();
+                }
+            }
+        }
+        else {
+            this.tetDynamicCardClickEvent.emit();
+        }
+    };
     renderTags() {
-        var _a;
         const dateTagColor = this.theme === 'dark' ? this.dateTagColorDark : this.dateTagColorLight;
-        return (h("div", { class: "tags-container", part: "tags" }, ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "tags" }, this.tags.map(tag => (h("span", { class: "tag" }, tag))))), this.dateTag && (h("div", { class: "tags" }, h("div", { class: `tag colored colored--${dateTagColor}`, ref: (elm) => { this.dateTagColorRef = elm; } }, h("span", { class: "date-tag-text" }, this.dateTag))))));
+        return (h("div", { class: "tags-container", part: "tags" }, this.tags?.length > 0 && (h("div", { class: "tags" }, this.tags.map(tag => (h("span", { class: "tag" }, tag))))), this.dateTag && (h("div", { class: "tags" }, h("div", { class: `tag colored colored--${dateTagColor}`, ref: (elm) => { this.dateTagColorRef = elm; } }, h("span", { class: "date-tag-text" }, this.dateTag))))));
     }
     renderPrice() {
-        var _a, _b, _c;
-        if (!((_a = this.priceTagOptions) === null || _a === void 0 ? void 0 : _a.show))
+        if (!this.priceTagOptions?.show)
             return null;
-        return (h("div", { class: "price", part: "price" }, h("tet-price-view", { ref: elm => { this.priceViewRef = elm; }, font: this.priceTagOptions.font || "Gilroy, Arial, sans-serif", background: this.priceTagOptions.background, staticColors: this.priceTagOptions.isStatic, theme: this.theme, size: "S", "heading-text": this.priceTagOptions.headingText, "price-type": this.priceTagOptions.priceType, "euro-price": (_b = this.priceTagOptions.euroPrice) === null || _b === void 0 ? void 0 : _b.toString(), "cents-price": (_c = this.priceTagOptions.centsPrice) === null || _c === void 0 ? void 0 : _c.toString(), "footer-text": this.priceTagOptions.footerText, "footer-text-type": this.priceTagOptions.footerTextType })));
+        return (h("div", { class: "price", part: "price" }, h("tet-price-view", { ref: elm => { this.priceViewRef = elm; }, font: this.priceTagOptions.font || "Gilroy, Arial, sans-serif", background: this.priceTagOptions.background, staticColors: this.priceTagOptions.isStatic, theme: this.theme, size: "S", "heading-text": this.priceTagOptions.headingText, "price-type": this.priceTagOptions.priceType, "euro-price": this.priceTagOptions.euroPrice?.toString(), "cents-price": this.priceTagOptions.centsPrice?.toString(), "footer-text": this.priceTagOptions.footerText, "footer-text-type": this.priceTagOptions.footerTextType })));
     }
     renderButton() {
         if (!this.linkText)
@@ -213,7 +210,7 @@ export class TetDynamicCard {
             'url-target': this.linkNewTab ? '_blank' : '_self',
             'accessibility-label': this.linkText
         };
-        return (h("div", { class: "button", part: "button" }, h("tet-button", Object.assign({}, buttonProps, { ref: elm => { this.buttonRef = elm; } }), this.linkText)));
+        return (h("div", { class: "button", part: "button" }, h("tet-button", { ...buttonProps, ref: elm => { this.buttonRef = elm; } }, this.linkText)));
     }
     render() {
         return (h(Host, { key: '2c7a5efbaf1b36a29465e35322207afbc991bbae', class: {

package/dist/collection/components/advanced/cards/utils.js

@@ -10,11 +10,10 @@ import { generateFormUrl } from "../../../services/url/build-form-url";
  * @param isNetflixCard Optional flag to indicate if the card is for Netflix.
  */
 export const fillProductData = (compareCard, requestedProduct, requestedProductData, theme, darkMode, isNetflixCard = false) => {
-    var _a, _b, _c, _d;
     const currentCompareCardOptions = compareCard.options;
     const contractTerms = requestedProductData.contractTerms;
     const defaultContractData = requestedProductData.contractTerms[0];
-    const bestChoice = (_c = (_b = (_a = requestedProductData.attributes) === null || _a === void 0 ? void 0 : _a.find((attributes) => attributes.key === 'isBestChoice')) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : false;
+    const bestChoice = requestedProductData.attributes?.find((attributes) => attributes.key === 'isBestChoice')?.value ?? false;
     let productLanguage = compareCard.language;
     let contractLink = null;
     let priceDescription = null;
@@ -28,7 +27,7 @@ export const fillProductData = (compareCard, requestedProduct, requestedProductD
     if (defaultContractData.priceDescription !== null) {
         priceDescription = defaultContractData.priceDescription[productLanguage];
     }
-    if (!!((_d = requestedProductData.benefits) === null || _d === void 0 ? void 0 : _d[productLanguage])) {
+    if (!!requestedProductData.benefits?.[productLanguage]) {
         benefits = [requestedProductData.benefits[productLanguage]][0].split('\n');
     }
     let price = unlimitedContractTerm.amount;
@@ -39,7 +38,6 @@ export const fillProductData = (compareCard, requestedProduct, requestedProductD
     };
     if (typeof compareCard.options.contractTerm !== 'undefined') {
         contractTerms.forEach((term) => {
-            var _a;
             if (parseFloat(compareCard.options.contractTerm) === term.term && (term.isAlwaysOn || term.showDiscount)) {
                 parameters.product = requestedProductData.productCode;
                 parameters.contractTerm = term.term;
@@ -50,7 +48,7 @@ export const fillProductData = (compareCard, requestedProduct, requestedProductD
                 if (term.showDiscount) {
                     oldPrice = parseFloat(requestedProductData.amount.toString()).toFixed(2).replace('.', ',');
                 }
-                if (!!((_a = term.benefits) === null || _a === void 0 ? void 0 : _a[productLanguage])) {
+                if (!!term.benefits?.[productLanguage]) {
                     benefits = [term.benefits[productLanguage]][0].split('\n');
                 }
             }
@@ -67,14 +65,31 @@ export const fillProductData = (compareCard, requestedProduct, requestedProductD
         formUrl = formUrl + currentCompareCardOptions.formParameters;
     }
     const finalPrice = parseFloat(price.toString()).toFixed(2).replace('.', ',');
-    compareCard = Object.assign(Object.assign({}, compareCard), { bestChoice: bestChoice });
-    compareCard.options = Object.assign(Object.assign({}, currentCompareCardOptions), { price: finalPrice, oldPrice: oldPrice, mainTitle: requestedProductData.name[productLanguage], subTitle: requestedProductData.subtitle[productLanguage], bulletPoints: benefits, infoItem: requestedProductData.descriptionTooltip[productLanguage] !== ''
+    compareCard = {
+        ...compareCard,
+        bestChoice: bestChoice
+    };
+    compareCard.options = {
+        ...currentCompareCardOptions,
+        price: finalPrice,
+        oldPrice: oldPrice,
+        mainTitle: requestedProductData.name[productLanguage],
+        subTitle: requestedProductData.subtitle[productLanguage],
+        bulletPoints: benefits,
+        infoItem: requestedProductData.descriptionTooltip[productLanguage] !== ''
             ? '<tet-icon class="icon" name="info-circle" focusable={true}></tet-icon>' +
                 '<tet-tooltip class="tet-tooltip">' +
                 requestedProductData.descriptionTooltip[productLanguage] +
                 '</tet-tooltip>' +
                 '<style>.tet-tooltip { --text-font: var(--font-family-content) }</style>'
-            : '', link: formUrl.toString(), secondaryLink: contractLink, helper: priceDescription, theme: theme, darkMode: darkMode, isNetflixCard: isNetflixCard });
+            : '',
+        link: formUrl.toString(),
+        secondaryLink: contractLink,
+        helper: priceDescription,
+        theme: theme,
+        darkMode: darkMode,
+        isNetflixCard: isNetflixCard
+    };
     if (!compareCard.isNetflixCard) {
         delete compareCard.productCode;
     }