@tet/tet-components 1.3.115-staging → 1.3.116-testing

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

@@ -7,6 +7,7 @@ import { productComparison } from "../../../../services/api/index";
  */
 export class TetCompareCardV2 {
     constructor() {
+        this.cardHasEmitted = false;
         /**
          * Renders the loader.
          */
@@ -38,10 +39,10 @@ export class TetCompareCardV2 {
         this.dropdownOptions = [];
         this.showLoader = true;
         this.selectedProductCode = '';
-        this.comparisonData = null;
         this.selectedSwitchKeys = [];
         this.preselectedKeys = [];
         this.preselectedProductCode = '';
+        this.allProductData = {};
     }
     /**
      * @param event
@@ -49,16 +50,17 @@ export class TetCompareCardV2 {
     onOptionSelected(event) {
         const productCode = event.detail.value;
         this.selectedProductCode = productCode;
-        this.fetchProductComparison(productCode);
+        this.productChanged.emit();
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         var _a;
+        await this.fetchProductComparison();
         if (this.cardType === 'dropdown') {
             this.pushDataToDropdownOptions();
             const preselected = this.options.find(option => option.preselected);
             if (preselected) {
                 this.selectedProductCode = preselected.productCode;
-                this.fetchProductComparison(preselected.productCode);
+                this.productChanged.emit();
             }
         }
         if (this.cardType === "switcher") {
@@ -68,13 +70,13 @@ export class TetCompareCardV2 {
                 this.preselectedProductCode = preselected.productCode;
                 this.selectedSwitchKeys = [...preselected.keys];
                 this.selectedProductCode = preselected.productCode;
-                this.fetchProductComparison(preselected.productCode);
+                this.productChanged.emit();
             }
             return;
         }
         if (this.cardType === 'static') {
             this.selectedProductCode = ((_a = this.options.find(option => option.productCode)) === null || _a === void 0 ? void 0 : _a.productCode) || '';
-            this.fetchProductComparison(this.selectedProductCode);
+            this.productChanged.emit();
         }
     }
     pushDataToDropdownOptions() {
@@ -100,8 +102,8 @@ export class TetCompareCardV2 {
                 if (fullComboOption) {
                     this.selectedSwitchKeys = [...fullComboOption.keys];
                     this.selectedProductCode = fullComboOption.productCode;
+                    this.productChanged.emit();
                     this.showLoader = true;
-                    this.fetchProductComparison(fullComboOption.productCode);
                     return;
                 }
             }
@@ -120,8 +122,8 @@ export class TetCompareCardV2 {
             if (isFullComboActive && key !== selectAllKey) {
                 this.selectedSwitchKeys = [...this.preselectedKeys];
                 this.selectedProductCode = this.preselectedProductCode;
+                this.productChanged.emit();
                 this.showLoader = true;
-                this.fetchProductComparison(this.preselectedProductCode);
                 return;
             }
             if (activeKeys.length === 1 &&
@@ -140,8 +142,8 @@ export class TetCompareCardV2 {
             if (activeKeys.length === 0) {
                 this.selectedSwitchKeys = [...this.preselectedKeys];
                 this.selectedProductCode = this.preselectedProductCode;
+                this.productChanged.emit();
                 this.showLoader = true;
-                this.fetchProductComparison(this.preselectedProductCode);
                 return;
             }
         }
@@ -150,12 +152,12 @@ export class TetCompareCardV2 {
         this.selectedSwitchKeys = activeKeys;
         if (productCode) {
             this.selectedProductCode = productCode;
+            this.productChanged.emit();
             this.showLoader = true;
-            this.fetchProductComparison(productCode);
         }
         else {
             this.selectedProductCode = '';
-            this.comparisonData = null;
+            this.productChanged.emit();
             this.showLoader = false;
         }
     }
@@ -165,25 +167,28 @@ export class TetCompareCardV2 {
         }
         return this.options.reduce((max, curr) => curr.keys.length > max.keys.length ? curr : max, this.options[0]);
     }
-    async fetchProductComparison(productCode) {
-        try {
-            const response = await productComparison(productCode);
-            this.comparisonData = response['products'][productCode];
-            this.showLoader = false;
-        }
-        catch (e) {
-            console.error(e);
-            this.comparisonData = null;
+    async fetchProductComparison() {
+        const productCodes = this.options.map(option => option.productCode).filter(Boolean);
+        if (productCodes.length) {
+            this.showLoader = true;
+            try {
+                const response = await productComparison(productCodes.join(','));
+                this.allProductData = response['products'] || {};
+            }
+            catch (e) {
+                this.allProductData = {};
+                console.error(e);
+            }
             this.showLoader = false;
         }
     }
     selectedContractTerm() {
         var _a;
-        if (!((_a = this.comparisonData) === null || _a === void 0 ? void 0 : _a.contractTerms)) {
+        if (!((_a = this.allProductData[this.selectedProductCode]) === null || _a === void 0 ? void 0 : _a.contractTerms)) {
             return;
         }
         if (this.contractTerm !== undefined) {
-            const contractTerm = this.comparisonData.contractTerms.find(contractTerm => contractTerm.term === this.contractTerm);
+            const contractTerm = this.allProductData[this.selectedProductCode].contractTerms.find(contractTerm => contractTerm.term === this.contractTerm);
             if (contractTerm) {
                 return contractTerm;
             }
@@ -213,31 +218,36 @@ export class TetCompareCardV2 {
      * @returns rendered card body.
      */
     renderCard() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        if (!this.comparisonData) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const comparisonData = this.allProductData[this.selectedProductCode];
+        if (!comparisonData) {
             return this.renderLoader();
         }
+        if (!this.cardHasEmitted) {
+            this.cardLoaded.emit();
+            this.cardHasEmitted = true;
+        }
         // Get data for rendering
         const contractTermData = this.selectedContractTerm();
-        const overridePoductAttribute = (_a = this.comparisonData) === null || _a === void 0 ? void 0 : _a.attributes.find(attr => attr.key === 'overrideProductName');
+        const overridePoductAttribute = comparisonData === null || comparisonData === void 0 ? void 0 : comparisonData.attributes.find(attr => attr.key === 'overrideProductName');
         const overridePoductName = overridePoductAttribute === null || overridePoductAttribute === void 0 ? void 0 : overridePoductAttribute.value;
-        const mainTitle = overridePoductName !== null && overridePoductName !== void 0 ? overridePoductName : (_c = (_b = this.comparisonData) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c[this.language];
+        const mainTitle = overridePoductName !== null && overridePoductName !== void 0 ? overridePoductName : (_a = comparisonData === null || comparisonData === void 0 ? void 0 : comparisonData.name) === null || _a === void 0 ? void 0 : _a[this.language];
         const price = contractTermData.amount.toString();
-        const promotionCode = (_d = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.promotionCode) !== null && _d !== void 0 ? _d : '';
-        const term = (_e = contractTermData.term) !== null && _e !== void 0 ? _e : '';
-        const priceDescription = (_f = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.priceDescription) !== null && _f !== void 0 ? _f : 'Īpašā cena spēkā jauniem klientiem pirmos 24 mēnešus, pēc tam - tā brīža standarta cena.';
-        const secondaryLink = (_g = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.contract) !== null && _g !== void 0 ? _g : '';
-        const baseUrl = ((_j = (_h = this.comparisonData) === null || _h === void 0 ? void 0 : _h.formUrl) === null || _j === void 0 ? void 0 : _j[this.language]) || '';
+        const promotionCode = (_b = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.promotionCode) !== null && _b !== void 0 ? _b : '';
+        const term = (_c = contractTermData.term) !== null && _c !== void 0 ? _c : '';
+        const priceDescription = (contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.priceDescription) !== undefined ? contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.priceDescription : '';
+        const secondaryLink = (_d = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.contract) !== null && _d !== void 0 ? _d : '';
+        const baseUrl = ((_e = comparisonData === null || comparisonData === void 0 ? void 0 : comparisonData.formUrl) === null || _e === void 0 ? void 0 : _e[this.language]) || '';
         const params = new URLSearchParams({
-            contractTerm: (_k = term === null || term === void 0 ? void 0 : term.toString()) !== null && _k !== void 0 ? _k : '',
+            contractTerm: (_f = term === null || term === void 0 ? void 0 : term.toString()) !== null && _f !== void 0 ? _f : '',
             product: this.selectedProductCode,
             promotion: promotionCode !== null && promotionCode !== void 0 ? promotionCode : '',
-            lang: (_l = this.language) !== null && _l !== void 0 ? _l : '',
+            lang: (_g = this.language) !== null && _g !== void 0 ? _g : '',
             from: 'tet.lv'
         });
         const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
         const currentBonuses = this.currentBonuses();
-        const isBestChoice = ((_m = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _m === void 0 ? void 0 : _m.bestChoice) || false;
+        const isBestChoice = ((_h = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _h === void 0 ? void 0 : _h.bestChoice) || false;
         return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
                 'card': true,
                 [`${this.cardType}`]: true,
@@ -253,8 +263,8 @@ export class TetCompareCardV2 {
                 'js-resize-title': true
             }, part: "compare-card-title-wrapper" }, h("h3", { class: "main-title" }, mainTitle))) : (''), h("div", { class: "price js-resize-price" }, price && !isNaN(parseFloat(price)) ? (h("div", { class: {
                 'price-wrapper': true
-            } }, h("div", { class: "price-container" }, h("div", { class: "new-price translation-none" }, parseFloat(price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.currency))), priceDescription ? (h("span", { class: "price-description" }, priceDescription)) : (''))) : ('')), currentBonuses.length > 0 && (h("div", { class: "bonuses-wrapper" }, currentBonuses.map(bonus => (h("div", { class: "bonuss" }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), h("span", { class: "bonuss__text" }, bonus.name)))))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_o = this === null || this === void 0 ? void 0 : this.benefits) === null || _o === void 0 ? void 0 :
-            _o.map((benefit) => (this.benefitHandler(benefit))), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
+            } }, h("div", { class: "price-container" }, h("div", { class: "new-price translation-none" }, parseFloat(price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.currency))), priceDescription ? (h("span", { class: "price-description" }, priceDescription)) : (''))) : ('')), currentBonuses.length > 0 && (h("div", { class: "bonuses-wrapper" }, currentBonuses.map(bonus => (h("div", { class: "bonuss", key: bonus.modalId }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), bonus.modalId ? (h("a", { "data-modal-screen-key": bonus.modalId, "tab-index": "0", role: "button", class: "bonuss__text bonuss__link" }, bonus.name)) : (h("span", { class: "bonuss__text" }, bonus.name))))))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_j = this === null || this === void 0 ? void 0 : this.benefits) === null || _j === void 0 ? void 0 :
+            _j.map((benefit) => (this.benefitHandler(benefit))), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
             const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
             const benefitAsImg = !!benefit.img;
             // Is this switch the only active one and preselected?
@@ -270,8 +280,8 @@ export class TetCompareCardV2 {
             const shouldDisableSwitch = isOnlyActivePreselected ||
                 (isMultiPreselected && this.selectedSwitchKeys.includes(benefit.toggleKey));
             return (h("div", { class: "benefit", key: benefit.toggleKey }, benefitAsImg ? (h("img", { src: benefit.img, class: "benefit__icon benefit__img" })) : (h("tet-icon", { class: "benefit__icon icon", name: benefit.icon })), benefitAsLink ? (h("a", Object.assign({ class: "benefit__name benefit__link" }, (benefit.dataAttributes || {})), benefit.name)) : (h("span", { class: "benefit__name" }, benefit.name)), h("tet-switch", { name: benefit.toggleKey, checked: this.selectedSwitchKeys.includes(benefit.toggleKey), disabled: shouldDisableSwitch, onCheck: e => this.handleSwitchToggle(benefit.toggleKey, e.detail.checked) })));
-        }))), this.cardType === 'static' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_p = this === null || this === void 0 ? void 0 : this.benefits) === null || _p === void 0 ? void 0 :
-            _p.map((benefit) => (this.benefitHandler(benefit))))) : (''), h("div", { class: "button-wrapper" }, secondaryLink && this.secondaryLinkText && (h("div", { class: {
+        }))), this.cardType === 'static' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_k = this === null || this === void 0 ? void 0 : this.benefits) === null || _k === void 0 ? void 0 :
+            _k.map((benefit) => (this.benefitHandler(benefit))))) : (''), h("div", { class: "button-wrapper" }, secondaryLink && this.secondaryLinkText && (h("div", { class: {
                 'secondary-link': true
             } }, this.secondaryLinkOpenBlank ? (h("a", { target: "_blank", href: secondaryLink }, this.secondaryLinkText)) : (h("a", { href: secondaryLink }, this.secondaryLinkText))))))), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : ''));
     }
@@ -717,12 +727,45 @@ export class TetCompareCardV2 {
         return {
             "showLoader": {},
             "selectedProductCode": {},
-            "comparisonData": {},
             "selectedSwitchKeys": {},
             "preselectedKeys": {},
-            "preselectedProductCode": {}
+            "preselectedProductCode": {},
+            "allProductData": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "cardLoaded",
+                "name": "cardLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the card has loaded."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "productChanged",
+                "name": "productChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected product has changed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{

package/dist/components/index.js

@@ -92,7 +92,7 @@ import { TetThankYouViewV3 } from './tet-thank-you-view-v3.js';
 import { TetTooltip } from './tet-tooltip.js';
 import { TetTvGiftBlock } from './tet-tv-gift-block.js';
 import { TetTvGiftList } from './tet-tv-gift-list.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-5749376d.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-37ed3ebb.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {