@tet/tet-components 1.4.75-testing → 1.4.76-staging

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

@@ -1,40 +1,34 @@
-import { h, Fragment } from "@stencil/core";
+import { h } from "@stencil/core";
 import { productComparison } from "../../../../services/api/index";
 export class TetCompareCardV3 {
     constructor() {
         this.cardType = 'static';
         this.theme = 'light';
-        this.bestChoice = false;
         this.language = 'lv';
         this.options = [];
-        this.bonuses = [];
-        this.benefits = [];
+        this.toggles = [];
         this.contractTerm = 0;
-        this.bestChoiceText = '';
+        this.controlsTitle = undefined;
+        this.bestChoiceText = undefined;
+        this.bestChoiceIconName = undefined;
         this.currency = '€/mēn.';
         this.secondaryLink = '';
         this.secondaryLinkText = '';
         this.secondaryLinkOpenBlank = false;
         this.buttonTitle = '';
         this.linkOpenBlank = false;
+        this.showControlsFirst = false;
         this.showLoader = true;
-        this.selectedProductCode = '';
+        this.selectedProductId = '';
         this.selectedSwitchKeys = [];
         this.preselectedKeys = [];
-        this.preselectedProductCode = '';
+        this.preselectedProductId = '';
         this.allProductData = {};
         this.preselectedRemountId = 0;
         this.buttonSize = 'large';
     }
     buttonSizeBreakpoint = 1280;
-    /**
-     * WeakMap to store unique IDs for bonuses.
-     */
-    bonusWeakMap = new WeakMap();
-    /**
-     * Counter for unique bonus IDs.
-     */
-    bonusCounter = 0;
+    didEmitCardLoaded = false;
     /**
      * Emitted when the card has loaded.
      */
@@ -47,8 +41,8 @@ export class TetCompareCardV3 {
      * @param event
      */
     onOptionSelected(event) {
-        const productCode = event.detail.value;
-        this.selectedProductCode = productCode;
+        const productId = event.detail.value;
+        this.selectedProductId = productId;
         this.productChanged.emit();
     }
     async componentWillLoad() {
@@ -59,7 +53,7 @@ export class TetCompareCardV3 {
             case 'radio': {
                 const selectedOption = this.options.find(option => option.preselected) ?? this.options[0];
                 if (selectedOption) {
-                    this.selectedProductCode = selectedOption.productCode;
+                    this.selectedProductId = this.getOptionId(selectedOption);
                     this.productChanged.emit();
                 }
                 break;
@@ -68,21 +62,27 @@ export class TetCompareCardV3 {
                 const preselected = this.options.find(option => option.preselected);
                 if (preselected) {
                     this.preselectedKeys = [...preselected.keys ?? []];
-                    this.preselectedProductCode = preselected.productCode;
+                    this.preselectedProductId = this.getOptionId(preselected);
                     this.selectedSwitchKeys = [...preselected.keys ?? []];
-                    this.selectedProductCode = preselected.productCode;
+                    this.selectedProductId = this.getOptionId(preselected);
                     this.productChanged.emit();
                 }
                 break;
             }
             case 'static':
-                this.selectedProductCode = this.options.find(option => option.productCode)?.productCode || '';
+                this.selectedProductId = this.getOptionId(this.options[0]);
                 this.productChanged.emit();
                 break;
             default:
                 break;
         }
     }
+    componentDidRender() {
+        if (!this.showLoader && !this.didEmitCardLoaded) {
+            this.didEmitCardLoaded = true;
+            this.cardLoaded.emit();
+        }
+    }
     onResize() {
         this.syncButtonSize();
     }
@@ -98,33 +98,39 @@ export class TetCompareCardV3 {
             this.buttonSize = nextButtonSize;
         }
     }
+    getOptionId(option) {
+        return option?.id ?? option?.productCode ?? '';
+    }
+    getOptionById(productId) {
+        return this.options.find(option => this.getOptionId(option) === productId);
+    }
     getSelectionOptions() {
         return this.options.map((option) => ({
-            label: option.label || '',
-            value: option.productCode || '',
-            preselected: option.preselected || false
+            label: option.optionLabel || '',
+            value: this.getOptionId(option),
+            preselected: this.getOptionId(option) === this.selectedProductId,
         }));
     }
     /**
-     * Resolves product code by matching an exact toggle-key combination.
+     * Resolves a product selection key by matching an exact toggle-key combination.
      */
-    getToggledProductCode(keys) {
+    getToggledProductId(keys) {
         const sortedKeys = [...keys].sort((a, b) => a.localeCompare(b)).join(',');
         const found = this.options.find(option => [...option.keys ?? []].sort((a, b) => a.localeCompare(b)).join(',') === sortedKeys);
-        return found ? found.productCode : null;
+        return found ? this.getOptionId(found) : null;
     }
     /**
      * Handles switch interactions and keeps selection in a valid state.
      */
     handleSwitchToggle(key, checked) {
-        const benefit = this.benefits.find(benefit => benefit.toggleKey === key);
+        const toggle = this.toggles.find(toggle => toggle.toggleKey === key);
         let activeKeys = [...this.selectedSwitchKeys];
         if (checked) {
-            if (benefit?.selectAll) {
+            if (toggle?.selectAll) {
                 const fullCombo = this.getFullComboToggleOption();
                 if (fullCombo) {
                     this.selectedSwitchKeys = [...fullCombo.keys ?? []];
-                    this.selectedProductCode = fullCombo.productCode;
+                    this.selectedProductId = this.getOptionId(fullCombo);
                     this.productChanged.emit();
                     return;
                 }
@@ -136,33 +142,33 @@ export class TetCompareCardV3 {
             const newActiveKeys = activeKeys.filter(k => k !== key);
             if (newActiveKeys.length === 0) {
                 this.selectedSwitchKeys = [...this.preselectedKeys];
-                this.selectedProductCode = this.preselectedProductCode;
+                this.selectedProductId = this.preselectedProductId;
                 this.preselectedRemountId++;
                 this.productChanged.emit();
                 return;
             }
-            const validProductCode = this.getToggledProductCode(newActiveKeys);
-            if (validProductCode) {
+            const validProductId = this.getToggledProductId(newActiveKeys);
+            if (validProductId) {
                 this.selectedSwitchKeys = newActiveKeys;
-                this.selectedProductCode = validProductCode;
+                this.selectedProductId = validProductId;
                 this.productChanged.emit();
                 return;
             }
             this.selectedSwitchKeys = [...this.preselectedKeys];
-            this.selectedProductCode = this.preselectedProductCode;
+            this.selectedProductId = this.preselectedProductId;
             this.preselectedRemountId++;
             this.productChanged.emit();
             return;
         }
         activeKeys = activeKeys.sort((a, b) => a.localeCompare(b));
-        const productCode = this.getToggledProductCode(activeKeys);
+        const productId = this.getToggledProductId(activeKeys);
         this.selectedSwitchKeys = activeKeys;
-        if (productCode) {
-            this.selectedProductCode = productCode;
+        if (productId) {
+            this.selectedProductId = productId;
             this.productChanged.emit();
         }
         else {
-            this.selectedProductCode = this.preselectedProductCode;
+            this.selectedProductId = this.preselectedProductId;
             this.selectedSwitchKeys = [...this.preselectedKeys];
             this.preselectedRemountId++;
             this.productChanged.emit();
@@ -178,52 +184,40 @@ export class TetCompareCardV3 {
         return this.options.reduce((max, curr) => (curr.keys ?? []).length > (max.keys ?? []).length ? curr : max, this.options[0]);
     }
     async fetchProductComparison() {
-        const productCodes = this.options.map(option => option.productCode).filter(Boolean);
+        const productCodes = Array.from(new Set(this.options
+            .filter(option => !option.productData)
+            .map(option => option.productCode)
+            .filter(Boolean)));
+        let fetchedProductData = {};
         if (productCodes.length) {
             try {
                 const response = await productComparison(productCodes.join(','));
-                this.allProductData = response['products'] || {};
+                fetchedProductData = response['products'] || {};
             }
             catch (e) {
-                this.allProductData = {};
                 console.error(e);
             }
         }
-        else {
-            this.allProductData = {};
-        }
+        this.allProductData = this.options.reduce((productData, option) => {
+            const productId = this.getOptionId(option);
+            const data = option.productCode ? fetchedProductData[option.productCode] : undefined;
+            if (productId && data) {
+                productData[productId] = data;
+            }
+            return productData;
+        }, {});
         this.showLoader = false;
-        this.cardLoaded.emit();
     }
     /**
      * Returns contract term data matching current `contractTerm` prop.
      */
     selectedContractTerm() {
-        const contractTerms = this.allProductData[this.selectedProductCode]?.contractTerms;
+        const contractTerms = this.allProductData[this.selectedProductId]?.contractTerms;
         if (!contractTerms?.length) {
             return;
         }
         return contractTerms.find((contractTerm) => contractTerm.term === this.contractTerm);
     }
-    currentBonuses() {
-        const option = this.options.find(option => option.productCode === this.selectedProductCode);
-        return option?.bonuses ?? [];
-    }
-    allBonuses() {
-        return this.options.flatMap(option => option.bonuses || []);
-    }
-    /**
-     * Returns a stable ID for each bonus object across renders.
-     */
-    getUniqueBonusId(bonus) {
-        const existingId = this.bonusWeakMap.get(bonus);
-        if (existingId) {
-            return existingId;
-        }
-        const nextId = `bonus-${this.bonusCounter++}`;
-        this.bonusWeakMap.set(bonus, nextId);
-        return nextId;
-    }
     /**
      * Chooses semantic element tag from provided data attributes.
      */
@@ -238,19 +232,8 @@ export class TetCompareCardV3 {
         }
         return 'div';
     }
-    renderBenefit(benefit) {
-        const attributes = Array.isArray(benefit.dataAttributes) ? undefined : benefit.dataAttributes;
-        const isInteractive = Boolean(attributes && Object.keys(attributes).length > 0);
-        const ElementTag = this.getElementTag(attributes);
-        const hasTitle = !!benefit.title;
-        const hasBenefit = !!benefit.icon && !!benefit.name;
-        return (h(Fragment, null, hasTitle && (h("div", { class: "benefits__title" }, benefit.title)), hasBenefit && (h(ElementTag, { class: {
-                'benefit': true,
-                'benefit--interactive': isInteractive,
-            }, key: benefit.toggleKey, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: benefit.icon }), h("span", { class: "benefit__text" }, benefit.name), isInteractive && (h("div", { class: "benefit__chevron-icon-container" }, h("tet-icon", { class: "benefit__icon benefit__icon--chevron", name: "tc-chevron-right-small" })))))));
-    }
-    renderSwitch(benefit) {
-        const { toggleKey } = benefit;
+    renderSwitch(toggle) {
+        const { toggleKey, icon, name } = toggle;
         if (!toggleKey) {
             return null;
         }
@@ -258,85 +241,134 @@ export class TetCompareCardV3 {
         const switchKey = isPreselected
             ? `${toggleKey}-${this.preselectedRemountId}`
             : toggleKey;
-        const hasTitle = !!benefit.title;
-        return (h(Fragment, null, hasTitle && (h("div", { class: "benefits__title" }, benefit.title)), h("div", { class: "switch-wrapper" }, h("tet-switch", { class: "switch", theme: this.theme, key: switchKey, name: toggleKey, checked: this.selectedSwitchKeys.includes(toggleKey), onCheck: (e) => this.handleSwitchToggle(toggleKey, e.detail.checked), labelPosition: "left", focusStyleOnContainer: true }, h("div", { class: "switch-label" }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: benefit.icon }), benefit.name)))));
+        return (h("div", { class: "switch-wrapper" }, h("tet-switch", { class: "switch", theme: this.theme, key: switchKey, name: toggleKey, checked: this.selectedSwitchKeys.includes(toggleKey), onCheck: (e) => this.handleSwitchToggle(toggleKey, e.detail.checked), labelPosition: "left", focusStyleOnContainer: true }, h("div", { class: "switch-label" }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: icon }), name))));
     }
     /**
-     * Renders bonuses and marks bonuses outside current product as inactive.
+     * Renders bonus groups for the selected product.
      */
     renderBonuses() {
-        const currentBonusIds = new Set(this.currentBonuses().map(this.getUniqueBonusId.bind(this)));
-        const allBonuses = this.allBonuses();
-        const bonusTitle = this.options.find(option => option.productCode === this.selectedProductCode)?.bonusTitle;
-        if (allBonuses.length < 1) {
+        const option = this.getOptionById(this.selectedProductId);
+        const groups = option?.bonuses ?? [];
+        if (groups.length < 1) {
             return null;
         }
-        return (h("div", { class: "bonuses" }, !!bonusTitle && (h("div", { class: "bonuses__title" }, bonusTitle)), h("div", { class: "bonuses__bonus-container" }, allBonuses.map((bonus) => {
-            const id = this.getUniqueBonusId(bonus);
-            const isActive = currentBonusIds.has(id);
-            const attributes = Array.isArray(bonus.dataAttributes) ? undefined : bonus.dataAttributes;
-            const isInteractive = Boolean(attributes && Object.keys(attributes).length > 0);
-            const ElementTag = this.getElementTag(attributes);
-            return (h(ElementTag, { key: id, type: isInteractive ? 'button' : undefined, class: {
-                    'bonus': true,
-                    'bonus--inactive': !isActive,
-                    'bonus--interactive': isInteractive,
-                }, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "bonus__icon", name: bonus.iconName }), h("span", { class: "bonus__text" }, bonus.name), isInteractive && (h("div", { class: "bonus__chevron-icon-container" }, h("tet-icon", { class: "bonus__icon bonus__icon--chevron", name: "tc-chevron-right-small" })))));
-        }))));
+        return (h("div", { class: "bonuses" }, groups.map((group) => {
+            const items = group.items ?? [];
+            if (!items.length) {
+                return null;
+            }
+            return (h("div", { class: "bonuses__bonus-container" }, !!group.title && h("div", { class: "section-title" }, group.title), items.map((bonus) => {
+                const attributes = Array.isArray(bonus.dataAttributes) ? undefined : bonus.dataAttributes;
+                const ElementTag = this.getElementTag(attributes);
+                const isInteractive = ['a', 'button'].includes(ElementTag);
+                return (h(ElementTag, { type: ElementTag === 'button' ? 'button' : undefined, class: {
+                        'bonus': true,
+                        'bonus--interactive': isInteractive,
+                    }, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "bonus__icon", name: bonus.iconName }), h("span", { class: "bonus__text" }, bonus.name), isInteractive && (h("div", { class: "bonus__chevron-icon-container" }, h("tet-icon", { class: "bonus__icon bonus__icon--chevron", name: "tc-chevron-right-small" })))));
+            })));
+        })));
     }
     renderRadioOptions() {
         const selectionOptions = this.getSelectionOptions();
-        return (h("div", { class: "radio-container" }, selectionOptions.map((option) => (h("div", { class: "radio-wrapper" }, h("tet-radio", { class: "radio", theme: this.theme, name: "radio-card-options", label: option.label, value: option.value, checked: this.selectedProductCode === option.value, focusStyleOnContainer: true, onCheck: (event) => this.onOptionSelected(event) }))))));
+        return (h("div", { class: "radio-container" }, selectionOptions.map((option) => (h("div", { class: "radio-wrapper" }, h("tet-radio", { class: "radio", theme: this.theme, name: "radio-card-options", label: option.label, value: option.value, checked: this.selectedProductId === option.value, focusStyleOnContainer: true, onCheck: (event) => this.onOptionSelected(event) }))))));
     }
-    renderPrice(price, parsedPrice, priceDescription) {
-        if (!price || Number.isNaN(parsedPrice)) {
+    renderPrice({ contractPrice: price, basePrice, priceDescription, showDiscount }) {
+        const parsedPrice = Number.parseFloat(price.replace(',', '.'));
+        const parsedBasePrice = Number.parseFloat(basePrice.replace(',', '.'));
+        const showStripedPrice = showDiscount && Number.isFinite(parsedBasePrice);
+        if (!price || !Number.isFinite(parsedPrice)) {
             return null;
         }
-        return (h("div", { class: "price-wrapper" }, h("div", { class: "price-container" }, h("div", { class: "price-container__price translation-none" }, parsedPrice.toFixed(2).replace('.', ',')), h("div", { class: "price-container__currency" }, h("span", null, this.currency))), priceDescription && h("span", { class: "price-container__description" }, priceDescription)));
+        return (h("div", { class: "price-wrapper" }, h("div", { class: "price-container" }, h("div", { class: "price-container__price-group" }, h("div", { class: "price-container__price translation-none" }, parsedPrice.toFixed(2).replace('.', ',')), h("div", { class: "price-container__currency" }, h("span", null, this.currency))), showStripedPrice && (h("div", { class: "price-container__base-price translation-none" }, h("span", null, parsedBasePrice.toFixed(2).replace('.', ',')), h("span", null, this.currency)))), priceDescription && h("span", { class: "price-container__description" }, priceDescription)));
     }
-    renderBenefitsSection() {
+    getPriceData(manualProductData, comparisonData, contractTermData) {
+        const contractPrice = (manualProductData?.discountPrice ??
+            manualProductData?.price ??
+            contractTermData?.amount ??
+            '').toString();
+        const basePrice = (manualProductData?.price ?? comparisonData?.amount ?? '').toString();
+        const parsedContractPrice = Number.parseFloat(contractPrice.replace(',', '.'));
+        const parsedBasePrice = Number.parseFloat(basePrice.replace(',', '.'));
+        const showDiscount = Number.isFinite(parsedContractPrice) &&
+            Number.isFinite(parsedBasePrice) &&
+            parsedBasePrice > parsedContractPrice;
+        return {
+            contractPrice,
+            basePrice,
+            priceDescription: manualProductData?.priceDescription ?? contractTermData?.priceDescription?.[this.language] ?? '',
+            showDiscount,
+        };
+    }
+    renderControl(selectionOptions) {
+        switch (this.cardType) {
+            case 'switcher':
+                return (h("div", { class: "benefits" }, h("div", null, this.toggles.map(toggle => this.renderSwitch(toggle)))));
+            case 'dropdown':
+                return (h("tet-dropdown", { id: "dropdown", class: "dropdown", theme: this.theme, "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: selectionOptions }));
+            case 'radio':
+                return this.renderRadioOptions();
+            default:
+                return null;
+        }
+    }
+    renderControls() {
         const selectionOptions = this.getSelectionOptions();
-        if (this.cardType === 'switcher') {
-            return (h("div", { class: "benefits" }, h("div", null, this.benefits.map((benefit) => this.renderSwitch(benefit)))));
+        const renderTitle = !!this.controlsTitle && this.cardType !== 'static';
+        const control = this.renderControl(selectionOptions);
+        if (!control) {
+            return null;
         }
-        const renderedBenefits = this.benefits.map((benefit) => this.renderBenefit(benefit));
-        return (h("div", { class: "benefits" }, h("div", { class: "benefits__benefit-container" }, renderedBenefits, this.cardType === 'dropdown' && (h("tet-dropdown", { id: "dropdown", class: "dropdown", theme: this.theme, "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: selectionOptions })), this.cardType === 'radio' && this.renderRadioOptions())));
+        return (h("div", { class: "controls" }, renderTitle && h("div", { class: "section-title" }, this.controlsTitle), control));
     }
+    buildLinkWithParams(baseUrl, params) {
+        if (!baseUrl) {
+            return '';
+        }
+        const url = new URL(baseUrl);
+        params.forEach((value, key) => {
+            url.searchParams.append(key, value);
+        });
+        return url.toString();
+    }
+    ;
     /**
      * Renders the card body.
      * @returns rendered card body.
      */
     renderCard() {
-        const comparisonData = this.allProductData[this.selectedProductCode];
+        const comparisonData = this.allProductData[this.selectedProductId];
+        const selectedOption = this.getOptionById(this.selectedProductId);
+        const manualProductData = selectedOption?.productData;
         const contractTermData = this.selectedContractTerm();
         const overrideProductName = comparisonData?.attributes?.find(attr => attr.key === 'overrideProductName')?.value;
-        const mainTitle = overrideProductName ?? comparisonData?.name?.[this.language];
-        const price = contractTermData?.amount.toString() ?? '';
-        const parsedPrice = Number.parseFloat(price.replace(',', '.'));
+        const mainTitle = manualProductData?.name ?? overrideProductName ?? comparisonData?.name?.[this.language];
+        const priceData = this.getPriceData(manualProductData, comparisonData, contractTermData);
         const promotionCode = contractTermData?.promotionCode ?? '';
         const term = contractTermData?.term ?? '';
-        const priceDescription = contractTermData?.priceDescription?.[this.language] ?? '';
-        const secondaryLink = this.secondaryLink || contractTermData?.contract || '';
+        const secondaryLink = this.secondaryLink || manualProductData?.contractUrl || contractTermData?.contract || '';
         const shouldRenderSecondaryLink = !!secondaryLink && !!this.secondaryLinkText;
         const secondaryLinkTarget = this.secondaryLinkOpenBlank ? '_blank' : undefined;
         const secondaryLinkRel = this.secondaryLinkOpenBlank ? 'noopener noreferrer' : undefined;
         const baseUrl = comparisonData?.formUrl?.[this.language] || '';
         const params = new URLSearchParams({
             contractTerm: term?.toString() ?? '',
-            product: this.selectedProductCode,
+            product: selectedOption?.productCode ?? '',
             promotion: promotionCode ?? '',
             lang: this.language ?? '',
             from: 'tet.lv'
         });
-        const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
-        const isBestChoice = !!this.options.find(option => option.productCode === this.selectedProductCode)?.bestChoice;
-        return (h("div", { class: { 'card': true, 'best-choice': isBestChoice } }, this.bestChoiceText && (h("div", { class: { 'best-choice-title': true, 'active': isBestChoice } }, this.bestChoiceText)), h("div", { class: "content content__top" }, mainTitle && h("h3", { class: "title" }, mainTitle), this.renderPrice(price, parsedPrice, priceDescription), h("tet-button", { class: "button", type: "primary", theme: "light", size: this.buttonSize, url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle), shouldRenderSecondaryLink && (h("div", { class: "secondary-link" }, h("a", { class: "tet-link", href: secondaryLink, target: secondaryLinkTarget, rel: secondaryLinkRel }, this.secondaryLinkText)))), h("div", { class: "content content__bottom" }, this.renderBonuses(), this.renderBenefitsSection())));
+        const link = manualProductData ? manualProductData.formUrl : this.buildLinkWithParams(baseUrl, params);
+        const isBestChoice = !!selectedOption?.bestChoice;
+        const cardLabel = selectedOption?.cardLabel;
+        return (h("div", { class: { 'card': true, 'best-choice': isBestChoice } }, this.bestChoiceText && (h("div", { class: { 'best-choice-title': true, 'active': isBestChoice } }, !!this.bestChoiceIconName && (h("tet-icon", { class: "best-choice-title__icon ", name: this.bestChoiceIconName })), h("span", null, this.bestChoiceText))), h("div", { class: "content content__top" }, mainTitle && h("h3", { class: "title" }, mainTitle), this.renderPrice(priceData), !!cardLabel && (h("p", { class: "card-label" }, cardLabel)), h("tet-button", { class: "button", type: "primary", theme: "light", size: this.buttonSize, url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle), shouldRenderSecondaryLink && (h("div", { class: "secondary-link" }, h("a", { class: "tet-link", href: secondaryLink, target: secondaryLinkTarget, rel: secondaryLinkRel }, this.secondaryLinkText)))), h("div", { class: "content content__bottom" }, this.showControlsFirst
+            ? [this.renderControls(), this.renderBonuses()]
+            : [this.renderBonuses(), this.renderControls()])));
     }
     /**
      * Renders the loader.
      */
     renderLoader() {
-        return (h("tet-placeholder", { class: "card__placeholder", height: "37rem", width: "100%", darkTheme: this.theme === 'dark' }));
+        return (h("tet-placeholder", { class: "card__placeholder", height: "100%", width: "100%", darkTheme: this.theme === 'dark' }));
     }
     render() {
         if (this.showLoader) {
@@ -394,24 +426,6 @@ export class TetCompareCardV3 {
                 "reflect": false,
                 "defaultValue": "'light'"
             },
-            "bestChoice": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The disabled state of the bestChoice card."
-                },
-                "attribute": "best-choice",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -434,13 +448,13 @@ export class TetCompareCardV3 {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CompareCardInterfaceV3[]",
-                    "resolved": "CompareCardInterfaceV3[]",
+                    "original": "Option[]",
+                    "resolved": "Option[]",
                     "references": {
-                        "CompareCardInterfaceV3": {
+                        "Option": {
                             "location": "local",
                             "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx",
-                            "id": "src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx::CompareCardInterfaceV3"
+                            "id": "src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx::Option"
                         }
                     }
                 },
@@ -448,37 +462,21 @@ export class TetCompareCardV3 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Product variants available in this card.\nUsed as the source for dropdown/radio/switcher selection and to resolve\nthe active variant data (productCode, keys, labels, bonuses, etc.)."
+                    "text": "Product variants available in this card.\nUsed as the source for dropdown/radio/switcher selection and to resolve\nthe active variant data. Provide `productCode` for API-backed data, or an\n`id` with `productData` for a manually supplied product."
                 },
                 "defaultValue": "[]"
             },
-            "bonuses": {
+            "toggles": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Additional bonuses shown on the card.\nBonuses are product-specific."
-                },
-                "defaultValue": "[]"
-            },
-            "benefits": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "BenefitInterfaceV3[]",
-                    "resolved": "BenefitInterfaceV3[]",
+                    "original": "Toggle[]",
+                    "resolved": "Toggle[]",
                     "references": {
-                        "BenefitInterfaceV3": {
+                        "Toggle": {
                             "location": "local",
                             "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx",
-                            "id": "src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx::BenefitInterfaceV3"
+                            "id": "src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx::Toggle"
                         }
                     }
                 },
@@ -486,7 +484,7 @@ export class TetCompareCardV3 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Additional benefits shown on the card.\nBenefits are shared across all products."
+                    "text": "Toggle configuration for the `switcher` card type."
                 },
                 "defaultValue": "[]"
             },
@@ -508,6 +506,23 @@ export class TetCompareCardV3 {
                 "reflect": false,
                 "defaultValue": "0"
             },
+            "controlsTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the title for the controls section."
+                },
+                "attribute": "controls-title",
+                "reflect": false
+            },
             "bestChoiceText": {
                 "type": "string",
                 "mutable": false,
@@ -517,14 +532,30 @@ export class TetCompareCardV3 {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "This prop defines best choice text for the card."
                 },
                 "attribute": "best-choice-text",
-                "reflect": false,
-                "defaultValue": "''"
+                "reflect": false
+            },
+            "bestChoiceIconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines best choice icon name for the card."
+                },
+                "attribute": "best-choice-icon-name",
+                "reflect": false
             },
             "currency": {
                 "type": "string",
@@ -633,16 +664,34 @@ export class TetCompareCardV3 {
                 "attribute": "link-open-blank",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showControlsFirst": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether controls are displayed before bonuses."
+                },
+                "attribute": "show-controls-first",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "showLoader": {},
-            "selectedProductCode": {},
+            "selectedProductId": {},
             "selectedSwitchKeys": {},
             "preselectedKeys": {},
-            "preselectedProductCode": {},
+            "preselectedProductId": {},
             "allProductData": {},
             "preselectedRemountId": {},
             "buttonSize": {}