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

package/dist/esm/tet-b2b-configurator.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7f1e2a22.js';
-import { e as endpoints, A as ApiRequest } from './http-codes-7faa9f6e.js';
-import { c as createStore } from './index-1bf36cb9.js';
-import { t as translate } from './translations-eff34607.js';
-import './typecheck-31fd6c02.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-950abbb7.js';
+import { e as endpoints, A as ApiRequest } from './http-codes-eb08ff6f.js';
+import { c as createStore } from './index-8ebb7ad1.js';
+import { t as translate } from './translations-baabae60.js';
+import './typecheck-4abf0258.js';
 
 const b2bConfigurator = () => {
     let apiUrl;
@@ -93,376 +93,6 @@ const TetB2bConfigurator = class {
         this.compareLinkClick = createEvent(this, "compareLinkClick", 7);
         this.b2bConfiguratorSubmit = createEvent(this, "b2bConfiguratorSubmit", 7);
         this.successCloseClick = createEvent(this, "successCloseClick", 7);
-        /** @private The suffix for the price displayed - "€/mēn."). */
-        this.priceSuffix = '€/mēn.';
-        /** Syncs desktop resolution with state variable */
-        this.checkDesktopResolution = () => {
-            this.isDesktopResolution = window.innerWidth >= DESKTOP_BREAKPOINT;
-        };
-        /** Fetches the data and passes it to Stencil store */
-        this.fetchData = async () => {
-            const data = await b2bConfigurator();
-            initData(data);
-        };
-        /** Renders the placeholdes/skeleton */
-        this.renderPlaceholder = () => {
-            const darkTheme = this.theme === 'dark';
-            return [
-                h("div", { class: "offer placeholder" }, h("div", { style: { padding: this.isDesktopResolution ? '1.5rem' : '1rem' } }, h("tet-placeholder", { class: "placeholder", height: this.isDesktopResolution ? '2rem' : '1.5rem', darkTheme: darkTheme })), h("div", { class: "offer__content" }, h("tet-placeholder", { class: "placeholder offer__navigation", height: this.isDesktopResolution ? '48rem' : ' 2.25rem', darkTheme: darkTheme, style: { margin: '0' } }), h("div", { class: "offer__cards" }, h("div", { class: "offer__cards-list" }, h("tet-placeholder", { class: "placeholder", height: "3rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }))))),
-                h("div", { class: "cart cart--empty", style: {
-                        'padding': '1.5rem 1rem 1rem',
-                        'background-color': `var(--b2b-background-color)`
-                    } }, h("tet-placeholder", { class: "placeholder", height: "12.75rem", darkTheme: darkTheme }))
-            ];
-        };
-        /**
-         * Handles event form navigation and sets currently active categories
-         * @param e
-         * @returns
-         */
-        this.categoryClickHandler = (e) => {
-            const { id } = e.detail;
-            const category = this.getCategoryById(id);
-            if (!category) {
-                return;
-            }
-            if (category.type === 'primary') {
-                this.activePrimaryCategoryId = id;
-            }
-            else {
-                this.activeSecondaryCategoryId = id;
-            }
-        };
-        /** Renders the offer section */
-        this.renderOffer = () => {
-            const blocks = [
-                { name: translate('components-b2b-offer-primary-title'), type: 'primary' },
-                { name: translate('components-b2b-offer-secondary-title'), type: 'secondary' }
-            ];
-            return (h("div", { class: { offer: true, [`offer--${this.theme}`]: true } }, blocks.map((block) => {
-                const menuItems = state.data
-                    .filter((item) => item.type === block.type)
-                    .map((category) => {
-                    const { id, name, icon } = category;
-                    const selected = id === this.activePrimaryCategoryId || id === this.activeSecondaryCategoryId;
-                    return { id, name, icon, selected };
-                });
-                const accRefCallback = (el) => {
-                    if (block.type === 'primary') {
-                        this.primaryAccordionEl = el;
-                    }
-                    else {
-                        this.secondaryAccordionEl = el;
-                    }
-                };
-                const navRefCallback = (el) => {
-                    if (block.type === 'primary') {
-                        this.primaryNavEl = el;
-                    }
-                    else {
-                        this.secondaryNavEl = el;
-                    }
-                };
-                return (h("tet-accordion", { ref: accRefCallback, key: block.type, class: "offer__block", isOpen: block.type === 'primary', header: block.name, withBorder: true, theme: this.theme, transparentBackground: true }, h("div", { class: "offer__content" }, h("div", { class: "offer__navigation" }, h("tet-business-navigation", { ref: navRefCallback, menuItems: menuItems, theme: this.theme, "onMenu-click-event": this.categoryClickHandler })), this.renderCards(block.type))));
-            })));
-        };
-        /**
-         * Finds category by id. Returns category or undefined.
-         * @param categoryId
-         * @returns
-         */
-        this.getCategoryById = (categoryId) => {
-            return state.data.find((category) => category.id === categoryId);
-        };
-        /**
-         * Event, emitted on compare link click with the relevant modal Id
-         * @param categoryId
-         * @returns
-         */
-        this.onCompareLinkClick = (categoryId) => {
-            const category = this.getCategoryById(categoryId);
-            if (!category || !category.modalScreenId) {
-                return;
-            }
-            this.compareLinkClick.emit(category.modalScreenId);
-        };
-        /**
-         * Handles card selection (aka. oepen state). Checks for single|multi choice
-         * @param cardId
-         * @param categoryId
-         * @returns
-         */
-        this.handleCardSelected = (cardId, categoryId) => {
-            const category = this.getCategoryById(categoryId);
-            if (!category) {
-                return;
-            }
-            const { type, allowMultipleChoice } = category;
-            if (type === 'primary') {
-                if (this.selectedPrimaryCards.includes(cardId)) {
-                    return;
-                }
-                this.selectedPrimaryCards = allowMultipleChoice ? [...this.selectedPrimaryCards, cardId] : [cardId];
-            }
-            else {
-                if (this.selectedSecondaryCards.includes(cardId)) {
-                    return;
-                }
-                this.selectedSecondaryCards = allowMultipleChoice ? [...this.selectedSecondaryCards, cardId] : [cardId];
-            }
-        };
-        /**
-         * Updates product in cart (add, edit, remove)
-         * In desktop mode - changes state of summary cart's accordions
-         * @param e
-         * @param categoryId
-         */
-        this.handleProductCountChanged = async (e, categoryId) => {
-            const { cardId, count } = e.detail;
-            const productCategory = this.getCategoryById(categoryId);
-            if (!productCategory || state.cart.get(cardId) === count) {
-                return;
-            }
-            if (!count) {
-                this.itemToRemove = cardId;
-                this.confirmationDialogEl.open();
-                return;
-            }
-            if (!productCategory.allowMultipleChoice) {
-                productCategory.products.forEach((product) => product.productCode !== cardId && removeFromCart(product.productCode));
-            }
-            addToCart(cardId, count);
-            if (this.isDesktopResolution) {
-                this.cartEl.changeBlockState(productCategory.type, 'open');
-                this.cartEl.changeBlockState(productCategory.type === 'primary' ? 'secondary' : 'primary', 'close');
-            }
-        };
-        /** Resets itemId to be removed when confirmation dialog is closed */
-        this.onConfirmationClose = () => {
-            this.itemToRemove = null;
-        };
-        /** Renders confirmation dialog, shown on product removal action */
-        this.renderConfirmationDialog = () => {
-            return (h("tet-dialog", { ref: (el) => (this.confirmationDialogEl = el), class: this.theme, closeOnOverlayClick: false, onCloseDialog: this.onConfirmationClose, theme: this.theme }, h("div", { class: "action-dialog" }, h("tet-icon", { class: "action-dialog__icon action-dialog__attention-icon", name: "attention" }), h("div", { class: "action-dialog__title" }, translate('components-b2b-item-remove-confirmation-title'))), h("div", { slot: "footer", class: "action-dialog__footer" }, h("tet-button", { class: "action-dialog__button", type: "secondary", theme: this.theme, size: "large", onClick: () => this.confirmationDialogEl.close() }, translate('components-b2b-item-remove-confirmation-decline')), h("tet-button", { class: "action-dialog__button", type: "primary", theme: this.theme, size: "large", iconName: "tc-trash", iconPosition: "left", onClick: () => {
-                    removeFromCart(this.itemToRemove);
-                    this.confirmationDialogEl.close();
-                } }, translate('components-b2b-item-remove-confirmation-accept')))));
-        };
-        /** Performs action to start again */
-        this.resetState = () => {
-            resetCart();
-            this.checkoutAttempted = false;
-            this.primaryAccordionEl.open();
-            this.secondaryAccordionEl.close();
-        };
-        /** Renders dialog, shown after form submit */
-        this.renderSubmissionStateDialog = () => {
-            const isFormSubmitLoading = this.formState === 'loading';
-            const successClose = () => {
-                this.resetState();
-                this.successCloseClick.emit();
-                this.submissionStateDialogEl.close();
-            };
-            const content = isFormSubmitLoading ? (h("div", { class: "action-dialog" }, h("tet-spinner", { theme: this.theme }), h("div", { class: "action-dialog__title" }, translate('components-b2b-loading-dialog-title')), h("div", { class: "action-dialog__description" }, translate('components-b2b-loading-dialog-description')))) : ([
-                h("div", { class: "action-dialog" }, h("tet-icon", { class: "action-dialog__icon action-dialog__success-icon", name: "tc-check-circle" }), h("div", { class: "action-dialog__title" }, translate('components-b2b-success-dialog-title')), h("div", { class: "action-dialog__description" }, translate('components-b2b-success-dialog-description'))),
-                h("div", { slot: "footer", class: "action-dialog__footer" }, h("tet-button", { class: "action-dialog__button", type: "secondary", theme: this.theme, size: "large", onClick: successClose }, h("div", { class: "action-dialog__button-text" }, translate('components-b2b-success-dialog-close'))), h("tet-button", { class: "action-dialog__button", type: "primary", theme: this.theme, size: "large", onClick: () => {
-                        this.resetState();
-                        this.submissionStateDialogEl.close();
-                    } }, h("div", { class: "action-dialog__button-text" }, translate('components-b2b-success-dialog-start-again'))))
-            ]);
-            return (h("tet-dialog", { ref: (el) => (this.submissionStateDialogEl = el), class: { [this.theme]: true, 'action-dialog--loading': isFormSubmitLoading }, closeOnOverlayClick: false, closeOnEscape: !isFormSubmitLoading, hideCloseButton: isFormSubmitLoading, theme: this.theme, onCloseDialog: this.formState === 'success' ? successClose : this.submissionStateDialogEl.close }, content));
-        };
-        /**
-         * Renders offer section cards for the given category type
-         * @param categoryType The type of category block to render
-         * @returns
-         */
-        this.renderCards = (categoryType) => {
-            var _a;
-            const activeCategoryId = categoryType === 'primary' ? this.activePrimaryCategoryId : this.activeSecondaryCategoryId;
-            const selectedCards = categoryType === 'primary' ? this.selectedPrimaryCards : this.selectedSecondaryCards;
-            const products = ((_a = this.getCategoryById(activeCategoryId)) === null || _a === void 0 ? void 0 : _a.products) || [];
-            const cards = products.map((product) => {
-                var _a, _b;
-                const { productCode: id, name: { lv: title }, description: { lv: subtitle }, amount: price, b2bConfiguratorProduct: { discountAmount: discountPrice, selectionType, defaultValue, minValue, maxValue, translationKey: label }, benefits: { lv: benefits }, contracts } = product;
-                const isBestChoice = !!((_a = product.attributes.find((attribute) => attribute.key === 'isBestChoice')) === null || _a === void 0 ? void 0 : _a.value);
-                const counterOptions = selectionType === 'single'
-                    ? undefined
-                    : {
-                        defaultValue,
-                        minValue,
-                        maxValue,
-                        label
-                    };
-                const options = {
-                    id,
-                    title,
-                    subtitle,
-                    isBestChoice,
-                    price,
-                    discountPrice,
-                    benefits: benefits.split('\n'),
-                    contract: (_b = contracts[0]) === null || _b === void 0 ? void 0 : _b.contract,
-                    counterOptions
-                };
-                const isSelected = selectedCards.includes(id);
-                return (h("tet-b2b-compare-card", { options: options, theme: this.theme, key: id, isSelected: isSelected, onSelectedChange: () => this.handleCardSelected(id, activeCategoryId), count: state.cart.get(id), onCountChange: (e) => this.handleProductCountChanged(e, activeCategoryId) }));
-            });
-            return (h("div", { class: "offer__cards" }, h("div", { class: "offer__cards-header" }, h("div", { class: "offer__cards-title" }, translate('components-b2b-offer-product-list-title')), h("button", { class: { 'button-reset': true, 'compare__button': true, [`${this.theme}`]: true }, onClick: () => {
-                    this.onCompareLinkClick(activeCategoryId);
-                } }, h("span", { class: { 'compare__text': true, 'tet-link': true, [`${this.theme}`]: true } }, translate('components-b2b-offer-compare-link-text')), h("div", { class: "compare__icon-wrapper" }, h("tet-icon", { class: "compare__icon", name: "tc-info-circle-outline", theme: this.theme })))), h("div", { class: "offer__cards-list" }, cards)));
-        };
-        /**
-         * Translates Cart "count change" event and uses in the general "count change" handler
-         * @param cardId
-         * @param count
-         * @param categoryId
-         */
-        this.handleCartProductCountChange = (cardId, count, categoryId) => {
-            const updateEvent = { detail: { cardId, count } };
-            this.handleProductCountChanged(updateEvent, categoryId);
-        };
-        /**
-         * Navigates user in offer section by opening accordion and selecting the specific product which was clicked in cart component
-         * @param categoryId
-         * @param productCode
-         * @returns
-         */
-        this.goToProduct = async (categoryId, productCode) => {
-            const category = this.getCategoryById(categoryId);
-            if (!category) {
-                return;
-            }
-            if (category.type === 'primary') {
-                await this.primaryAccordionEl.open();
-                await this.primaryNavEl.selectMenuItem(categoryId);
-                this.primaryAccordionEl.scrollIntoView({ behavior: 'smooth' });
-            }
-            else if (category.type === 'secondary') {
-                await this.secondaryAccordionEl.open();
-                await this.secondaryNavEl.selectMenuItem(categoryId);
-                this.secondaryAccordionEl.scrollIntoView({ behavior: 'smooth' });
-            }
-            setTimeout(() => {
-                this.handleCardSelected(productCode, categoryId);
-            }, 0);
-        };
-        /**
-         * Renders list of Cards in Cart depending on context
-         * @param context
-         * @returns
-         */
-        this.renderCartCardsList = (context) => {
-            const categoryTypes = ['primary', 'secondary'];
-            const productCodeToSummaryCard = (productCode) => {
-                const count = state.cart.get(productCode);
-                const details = state.productDetails.get(productCode);
-                if (count === undefined || !details) {
-                    return null;
-                }
-                const { name, amount, description, discountAmount, categoryName, categoryType, categoryId, b2bConfiguratorProduct } = details;
-                const productDescription = categoryType === 'primary' ? description : categoryName;
-                const { selectionType, term, minValue, maxValue, translationKey } = b2bConfiguratorProduct;
-                return (h("tet-business-summary-card", { key: productCode, productName: name, price: amount, productDescription: productDescription, discountPrice: discountAmount, currency: this.priceSuffix, contractTerm: term, theme: this.theme, withStepper: selectionType === 'number', value: count, minValue: minValue, maxValue: maxValue, stepperLabel: translate(translationKey || ''), context: context, onAmountChange: (e) => this.handleCartProductCountChange(productCode, e.detail, categoryId), onDeleteButtonClick: () => this.handleCartProductCountChange(productCode, 0, categoryId), onEditButtonClick: () => this.goToProduct(categoryId, productCode) }));
-            };
-            return categoryTypes.map((type) => {
-                const summaryCards = [...state.cart]
-                    .filter(([productCode]) => {
-                    const details = state.productDetails.get(productCode);
-                    return details && details.categoryType === type;
-                })
-                    .map(([productCode]) => productCodeToSummaryCard(productCode));
-                return summaryCards.length ? (h("div", { class: "cart__card-list", slot: type }, summaryCards)) : null;
-            });
-        };
-        /** Adjusts the top position variable for the sticky cart element */
-        this.positionStickyCartEl = () => {
-            if (this.referenceElement) {
-                if (this.isDesktopResolution) {
-                    this.hostElement.style.setProperty('--b2b-cart-sticky-top', `${this.referenceElement.offsetTop}px`);
-                }
-                else {
-                    this.hostElement.style.removeProperty('--b2b-cart-sticky-top');
-                }
-            }
-        };
-        /**
-         * Renders Cart content depending on context
-         * @param context
-         * @returns
-         */
-        this.renderCart = (context = 'edit') => {
-            var _a;
-            const isCartEmpty = !state.cart.size;
-            let summaryAmounts = { primary: 0, secondary: 0 };
-            let summaryCounts = { primary: 0, secondary: 0 };
-            let summaryWouldBeAmount = 0;
-            for (const [key, count] of state.cart) {
-                const details = state.productDetails.get(key);
-                if (!details) {
-                    continue;
-                }
-                summaryAmounts[details.categoryType] += ((_a = details.discountAmount) !== null && _a !== void 0 ? _a : details.amount) * count;
-                summaryCounts[details.categoryType] += 1;
-                summaryWouldBeAmount += details.amount * count;
-            }
-            const { primary: primaryAmount, secondary: secondaryAmount } = summaryAmounts;
-            const summaryAmount = primaryAmount + secondaryAmount;
-            const summarySavings = summaryWouldBeAmount - summaryAmount;
-            const { primary, secondary } = this.areProductsAddedToCart();
-            const hasPrimaryNotification = context === 'edit' && this.checkoutAttempted && !primary;
-            const hasSecondaryNotification = context === 'edit' && this.checkoutAttempted && !secondary;
-            const data = {
-                summaryAmount: summaryAmount.toFixed(2),
-                primaryAmount: primaryAmount.toFixed(2),
-                secondaryAmount: secondaryAmount.toFixed(2),
-                primaryCount: summaryCounts.primary,
-                secondaryCount: summaryCounts.secondary,
-                summarySavings: summarySavings.toFixed(2),
-                hasPrimaryNotification,
-                hasSecondaryNotification
-            };
-            const ctaButton = context === 'edit' ? (h("tet-button", { onClick: this.checkout, slot: "cta", class: "cart__cta", type: "primary", size: this.isDesktopResolution ? 'large' : 'medium', theme: this.theme }, translate('components-b2b-cart-cta-button-title'))) : null;
-            return (h("tet-b2b-configurator-cart", { ref: (el) => (context === 'edit' ? (this.cartEl = el) : null), context: context, class: { 'cart': true, 'cart--empty': isCartEmpty, [`cart--${context}`]: true }, data: data, theme: this.theme, isCartEmpty: isCartEmpty, isDesktopResolution: this.isDesktopResolution }, this.renderCartCardsList(context), ctaButton));
-        };
-        /** Checks if both primary and secondary products are currently in cart */
-        this.areProductsAddedToCart = () => {
-            const productsInCart = { primary: false, secondary: false };
-            for (const [key, _] of state.cart) {
-                const details = state.productDetails.get(key);
-                if (!details) {
-                    continue;
-                }
-                productsInCart[details.categoryType] = true;
-            }
-            return productsInCart;
-        };
-        /** Cart checkout handler. Opens Checkout component*/
-        this.checkout = () => {
-            this.checkoutAttempted = true;
-            const { primary, secondary } = this.areProductsAddedToCart();
-            if (primary && secondary) {
-                this.checkoutFormEl.open();
-            }
-        };
-        /**
-         * Catches emitted checkout form data
-         * Combines with cart data and re-emits
-         * @param e
-         */
-        this.submit = ({ detail }) => {
-            const data = {
-                cart: getCart(),
-                contactInfo: detail
-            };
-            this.formState = 'loading';
-            this.b2bConfiguratorSubmit.emit(data);
-            this.checkoutFormEl.close();
-            this.submissionStateDialogEl.open();
-        };
-        this.renderCheckoutForm = () => {
-            return (h("tet-b2b-check-out-form", { ref: (el) => (this.checkoutFormEl = el), theme: this.theme, "onSubmit-check-out-form": this.submit }, h("div", { slot: "cart" }, this.renderCart('checkout'))));
-        };
         this.referenceElement = undefined;
         this.isLoading = true;
         this.itemToRemove = null;
@@ -476,6 +106,25 @@ const TetB2bConfigurator = class {
         this.theme = 'light';
         this.stickyRefEl = '';
     }
+    get hostElement() { return getElement(this); }
+    /** @private The suffix for the price displayed - "€/mēn."). */
+    priceSuffix = '€/mēn.';
+    /**The reference to cart element. */
+    cartEl;
+    /**The reference to confirmation Modal, shown on delete events. */
+    confirmationDialogEl;
+    /**The reference to submission state Modal, shown after form submit action. */
+    submissionStateDialogEl;
+    /**The reference to checkout Modal Form. */
+    checkoutFormEl;
+    /** @private Reference to 1st inner accordion element*/
+    primaryAccordionEl;
+    /** @private Reference to 2nd inner accordion element*/
+    secondaryAccordionEl;
+    /** @private Reference to 1st inner accordion element*/
+    primaryNavEl;
+    /** @private Reference to 2nd inner accordion element*/
+    secondaryNavEl;
     /** Resets selected (open) primary cards on category change */
     resetSelectedPrimaryCards() {
         this.selectedPrimaryCards = [];
@@ -484,6 +133,12 @@ const TetB2bConfigurator = class {
     resetSelectedSecondaryCards() {
         this.selectedSecondaryCards = [];
     }
+    /** Emitted when the compare link for a category is clicked. */
+    compareLinkClick;
+    /** The submit event of the B2B configurator. */
+    b2bConfiguratorSubmit;
+    /** Emitted when the close button of success modal is clicked. */
+    successCloseClick;
     /** Checks for desktop resolution and intializes the sticky element's reference using the provided prop or the host's parent */
     async componentWillLoad() {
         this.checkDesktopResolution();
@@ -498,12 +153,11 @@ const TetB2bConfigurator = class {
      * - sticky elements position
      */
     async componentDidLoad() {
-        var _a, _b;
         this.isLoading = true;
         await ensureMinDuration(this.fetchData, MIN_LOAD_TIME);
         this.isLoading = false;
-        this.activePrimaryCategoryId = ((_a = state.data.find((category) => category.type === 'primary')) === null || _a === void 0 ? void 0 : _a.id) || null;
-        this.activeSecondaryCategoryId = ((_b = state.data.find((category) => category.type === 'secondary')) === null || _b === void 0 ? void 0 : _b.id) || null;
+        this.activePrimaryCategoryId = state.data.find((category) => category.type === 'primary')?.id || null;
+        this.activeSecondaryCategoryId = state.data.find((category) => category.type === 'secondary')?.id || null;
         this.positionStickyCartEl();
     }
     /**
@@ -517,10 +171,374 @@ const TetB2bConfigurator = class {
     async setSubmitFormState(value) {
         this.formState = value;
     }
+    /** Syncs desktop resolution with state variable */
+    checkDesktopResolution = () => {
+        this.isDesktopResolution = window.innerWidth >= DESKTOP_BREAKPOINT;
+    };
+    /** Fetches the data and passes it to Stencil store */
+    fetchData = async () => {
+        const data = await b2bConfigurator();
+        initData(data);
+    };
+    /** Renders the placeholdes/skeleton */
+    renderPlaceholder = () => {
+        const darkTheme = this.theme === 'dark';
+        return [
+            h("div", { class: "offer placeholder" }, h("div", { style: { padding: this.isDesktopResolution ? '1.5rem' : '1rem' } }, h("tet-placeholder", { class: "placeholder", height: this.isDesktopResolution ? '2rem' : '1.5rem', darkTheme: darkTheme })), h("div", { class: "offer__content" }, h("tet-placeholder", { class: "placeholder offer__navigation", height: this.isDesktopResolution ? '48rem' : ' 2.25rem', darkTheme: darkTheme, style: { margin: '0' } }), h("div", { class: "offer__cards" }, h("div", { class: "offer__cards-list" }, h("tet-placeholder", { class: "placeholder", height: "3rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }))))),
+            h("div", { class: "cart cart--empty", style: {
+                    'padding': '1.5rem 1rem 1rem',
+                    'background-color': `var(--b2b-background-color)`
+                } }, h("tet-placeholder", { class: "placeholder", height: "12.75rem", darkTheme: darkTheme }))
+        ];
+    };
+    /**
+     * Handles event form navigation and sets currently active categories
+     * @param e
+     * @returns
+     */
+    categoryClickHandler = (e) => {
+        const { id } = e.detail;
+        const category = this.getCategoryById(id);
+        if (!category) {
+            return;
+        }
+        if (category.type === 'primary') {
+            this.activePrimaryCategoryId = id;
+        }
+        else {
+            this.activeSecondaryCategoryId = id;
+        }
+    };
+    /** Renders the offer section */
+    renderOffer = () => {
+        const blocks = [
+            { name: translate('components-b2b-offer-primary-title'), type: 'primary' },
+            { name: translate('components-b2b-offer-secondary-title'), type: 'secondary' }
+        ];
+        return (h("div", { class: { offer: true, [`offer--${this.theme}`]: true } }, blocks.map((block) => {
+            const menuItems = state.data
+                .filter((item) => item.type === block.type)
+                .map((category) => {
+                const { id, name, icon } = category;
+                const selected = id === this.activePrimaryCategoryId || id === this.activeSecondaryCategoryId;
+                return { id, name, icon, selected };
+            });
+            const accRefCallback = (el) => {
+                if (block.type === 'primary') {
+                    this.primaryAccordionEl = el;
+                }
+                else {
+                    this.secondaryAccordionEl = el;
+                }
+            };
+            const navRefCallback = (el) => {
+                if (block.type === 'primary') {
+                    this.primaryNavEl = el;
+                }
+                else {
+                    this.secondaryNavEl = el;
+                }
+            };
+            return (h("tet-accordion", { ref: accRefCallback, key: block.type, class: "offer__block", isOpen: block.type === 'primary', header: block.name, withBorder: true, theme: this.theme, transparentBackground: true }, h("div", { class: "offer__content" }, h("div", { class: "offer__navigation" }, h("tet-business-navigation", { ref: navRefCallback, menuItems: menuItems, theme: this.theme, "onMenu-click-event": this.categoryClickHandler })), this.renderCards(block.type))));
+        })));
+    };
+    /**
+     * Finds category by id. Returns category or undefined.
+     * @param categoryId
+     * @returns
+     */
+    getCategoryById = (categoryId) => {
+        return state.data.find((category) => category.id === categoryId);
+    };
+    /**
+     * Event, emitted on compare link click with the relevant modal Id
+     * @param categoryId
+     * @returns
+     */
+    onCompareLinkClick = (categoryId) => {
+        const category = this.getCategoryById(categoryId);
+        if (!category || !category.modalScreenId) {
+            return;
+        }
+        this.compareLinkClick.emit(category.modalScreenId);
+    };
+    /**
+     * Handles card selection (aka. oepen state). Checks for single|multi choice
+     * @param cardId
+     * @param categoryId
+     * @returns
+     */
+    handleCardSelected = (cardId, categoryId) => {
+        const category = this.getCategoryById(categoryId);
+        if (!category) {
+            return;
+        }
+        const { type, allowMultipleChoice } = category;
+        if (type === 'primary') {
+            if (this.selectedPrimaryCards.includes(cardId)) {
+                return;
+            }
+            this.selectedPrimaryCards = allowMultipleChoice ? [...this.selectedPrimaryCards, cardId] : [cardId];
+        }
+        else {
+            if (this.selectedSecondaryCards.includes(cardId)) {
+                return;
+            }
+            this.selectedSecondaryCards = allowMultipleChoice ? [...this.selectedSecondaryCards, cardId] : [cardId];
+        }
+    };
+    /**
+     * Updates product in cart (add, edit, remove)
+     * In desktop mode - changes state of summary cart's accordions
+     * @param e
+     * @param categoryId
+     */
+    handleProductCountChanged = async (e, categoryId) => {
+        const { cardId, count } = e.detail;
+        const productCategory = this.getCategoryById(categoryId);
+        if (!productCategory || state.cart.get(cardId) === count) {
+            return;
+        }
+        if (!count) {
+            this.itemToRemove = cardId;
+            this.confirmationDialogEl.open();
+            return;
+        }
+        if (!productCategory.allowMultipleChoice) {
+            productCategory.products.forEach((product) => product.productCode !== cardId && removeFromCart(product.productCode));
+        }
+        addToCart(cardId, count);
+        if (this.isDesktopResolution) {
+            this.cartEl.changeBlockState(productCategory.type, 'open');
+            this.cartEl.changeBlockState(productCategory.type === 'primary' ? 'secondary' : 'primary', 'close');
+        }
+    };
+    /** Resets itemId to be removed when confirmation dialog is closed */
+    onConfirmationClose = () => {
+        this.itemToRemove = null;
+    };
+    /** Renders confirmation dialog, shown on product removal action */
+    renderConfirmationDialog = () => {
+        return (h("tet-dialog", { ref: (el) => (this.confirmationDialogEl = el), class: this.theme, closeOnOverlayClick: false, onCloseDialog: this.onConfirmationClose, theme: this.theme }, h("div", { class: "action-dialog" }, h("tet-icon", { class: "action-dialog__icon action-dialog__attention-icon", name: "attention" }), h("div", { class: "action-dialog__title" }, translate('components-b2b-item-remove-confirmation-title'))), h("div", { slot: "footer", class: "action-dialog__footer" }, h("tet-button", { class: "action-dialog__button", type: "secondary", theme: this.theme, size: "large", onClick: () => this.confirmationDialogEl.close() }, translate('components-b2b-item-remove-confirmation-decline')), h("tet-button", { class: "action-dialog__button", type: "primary", theme: this.theme, size: "large", iconName: "tc-trash", iconPosition: "left", onClick: () => {
+                removeFromCart(this.itemToRemove);
+                this.confirmationDialogEl.close();
+            } }, translate('components-b2b-item-remove-confirmation-accept')))));
+    };
+    /** Performs action to start again */
+    resetState = () => {
+        resetCart();
+        this.checkoutAttempted = false;
+        this.primaryAccordionEl.open();
+        this.secondaryAccordionEl.close();
+    };
+    /** Renders dialog, shown after form submit */
+    renderSubmissionStateDialog = () => {
+        const isFormSubmitLoading = this.formState === 'loading';
+        const successClose = () => {
+            this.resetState();
+            this.successCloseClick.emit();
+            this.submissionStateDialogEl.close();
+        };
+        const content = isFormSubmitLoading ? (h("div", { class: "action-dialog" }, h("tet-spinner", { theme: this.theme }), h("div", { class: "action-dialog__title" }, translate('components-b2b-loading-dialog-title')), h("div", { class: "action-dialog__description" }, translate('components-b2b-loading-dialog-description')))) : ([
+            h("div", { class: "action-dialog" }, h("tet-icon", { class: "action-dialog__icon action-dialog__success-icon", name: "tc-check-circle" }), h("div", { class: "action-dialog__title" }, translate('components-b2b-success-dialog-title')), h("div", { class: "action-dialog__description" }, translate('components-b2b-success-dialog-description'))),
+            h("div", { slot: "footer", class: "action-dialog__footer" }, h("tet-button", { class: "action-dialog__button", type: "secondary", theme: this.theme, size: "large", onClick: successClose }, h("div", { class: "action-dialog__button-text" }, translate('components-b2b-success-dialog-close'))), h("tet-button", { class: "action-dialog__button", type: "primary", theme: this.theme, size: "large", onClick: () => {
+                    this.resetState();
+                    this.submissionStateDialogEl.close();
+                } }, h("div", { class: "action-dialog__button-text" }, translate('components-b2b-success-dialog-start-again'))))
+        ]);
+        return (h("tet-dialog", { ref: (el) => (this.submissionStateDialogEl = el), class: { [this.theme]: true, 'action-dialog--loading': isFormSubmitLoading }, closeOnOverlayClick: false, closeOnEscape: !isFormSubmitLoading, hideCloseButton: isFormSubmitLoading, theme: this.theme, onCloseDialog: this.formState === 'success' ? successClose : this.submissionStateDialogEl.close }, content));
+    };
+    /**
+     * Renders offer section cards for the given category type
+     * @param categoryType The type of category block to render
+     * @returns
+     */
+    renderCards = (categoryType) => {
+        const activeCategoryId = categoryType === 'primary' ? this.activePrimaryCategoryId : this.activeSecondaryCategoryId;
+        const selectedCards = categoryType === 'primary' ? this.selectedPrimaryCards : this.selectedSecondaryCards;
+        const products = this.getCategoryById(activeCategoryId)?.products || [];
+        const cards = products.map((product) => {
+            const { productCode: id, name: { lv: title }, description: { lv: subtitle }, amount: price, b2bConfiguratorProduct: { discountAmount: discountPrice, selectionType, defaultValue, minValue, maxValue, translationKey: label }, benefits: { lv: benefits }, contracts } = product;
+            const isBestChoice = !!product.attributes.find((attribute) => attribute.key === 'isBestChoice')?.value;
+            const counterOptions = selectionType === 'single'
+                ? undefined
+                : {
+                    defaultValue,
+                    minValue,
+                    maxValue,
+                    label
+                };
+            const options = {
+                id,
+                title,
+                subtitle,
+                isBestChoice,
+                price,
+                discountPrice,
+                benefits: benefits.split('\n'),
+                contract: contracts[0]?.contract,
+                counterOptions
+            };
+            const isSelected = selectedCards.includes(id);
+            return (h("tet-b2b-compare-card", { options: options, theme: this.theme, key: id, isSelected: isSelected, onSelectedChange: () => this.handleCardSelected(id, activeCategoryId), count: state.cart.get(id), onCountChange: (e) => this.handleProductCountChanged(e, activeCategoryId) }));
+        });
+        return (h("div", { class: "offer__cards" }, h("div", { class: "offer__cards-header" }, h("div", { class: "offer__cards-title" }, translate('components-b2b-offer-product-list-title')), h("button", { class: { 'button-reset': true, 'compare__button': true, [`${this.theme}`]: true }, onClick: () => {
+                this.onCompareLinkClick(activeCategoryId);
+            } }, h("span", { class: { 'compare__text': true, 'tet-link': true, [`${this.theme}`]: true } }, translate('components-b2b-offer-compare-link-text')), h("div", { class: "compare__icon-wrapper" }, h("tet-icon", { class: "compare__icon", name: "tc-info-circle-outline", theme: this.theme })))), h("div", { class: "offer__cards-list" }, cards)));
+    };
+    /**
+     * Translates Cart "count change" event and uses in the general "count change" handler
+     * @param cardId
+     * @param count
+     * @param categoryId
+     */
+    handleCartProductCountChange = (cardId, count, categoryId) => {
+        const updateEvent = { detail: { cardId, count } };
+        this.handleProductCountChanged(updateEvent, categoryId);
+    };
+    /**
+     * Navigates user in offer section by opening accordion and selecting the specific product which was clicked in cart component
+     * @param categoryId
+     * @param productCode
+     * @returns
+     */
+    goToProduct = async (categoryId, productCode) => {
+        const category = this.getCategoryById(categoryId);
+        if (!category) {
+            return;
+        }
+        if (category.type === 'primary') {
+            await this.primaryAccordionEl.open();
+            await this.primaryNavEl.selectMenuItem(categoryId);
+            this.primaryAccordionEl.scrollIntoView({ behavior: 'smooth' });
+        }
+        else if (category.type === 'secondary') {
+            await this.secondaryAccordionEl.open();
+            await this.secondaryNavEl.selectMenuItem(categoryId);
+            this.secondaryAccordionEl.scrollIntoView({ behavior: 'smooth' });
+        }
+        setTimeout(() => {
+            this.handleCardSelected(productCode, categoryId);
+        }, 0);
+    };
+    /**
+     * Renders list of Cards in Cart depending on context
+     * @param context
+     * @returns
+     */
+    renderCartCardsList = (context) => {
+        const categoryTypes = ['primary', 'secondary'];
+        const productCodeToSummaryCard = (productCode) => {
+            const count = state.cart.get(productCode);
+            const details = state.productDetails.get(productCode);
+            if (count === undefined || !details) {
+                return null;
+            }
+            const { name, amount, description, discountAmount, categoryName, categoryType, categoryId, b2bConfiguratorProduct } = details;
+            const productDescription = categoryType === 'primary' ? description : categoryName;
+            const { selectionType, term, minValue, maxValue, translationKey } = b2bConfiguratorProduct;
+            return (h("tet-business-summary-card", { key: productCode, productName: name, price: amount, productDescription: productDescription, discountPrice: discountAmount, currency: this.priceSuffix, contractTerm: term, theme: this.theme, withStepper: selectionType === 'number', value: count, minValue: minValue, maxValue: maxValue, stepperLabel: translate(translationKey || ''), context: context, onAmountChange: (e) => this.handleCartProductCountChange(productCode, e.detail, categoryId), onDeleteButtonClick: () => this.handleCartProductCountChange(productCode, 0, categoryId), onEditButtonClick: () => this.goToProduct(categoryId, productCode) }));
+        };
+        return categoryTypes.map((type) => {
+            const summaryCards = [...state.cart]
+                .filter(([productCode]) => {
+                const details = state.productDetails.get(productCode);
+                return details && details.categoryType === type;
+            })
+                .map(([productCode]) => productCodeToSummaryCard(productCode));
+            return summaryCards.length ? (h("div", { class: "cart__card-list", slot: type }, summaryCards)) : null;
+        });
+    };
+    /** Adjusts the top position variable for the sticky cart element */
+    positionStickyCartEl = () => {
+        if (this.referenceElement) {
+            if (this.isDesktopResolution) {
+                this.hostElement.style.setProperty('--b2b-cart-sticky-top', `${this.referenceElement.offsetTop}px`);
+            }
+            else {
+                this.hostElement.style.removeProperty('--b2b-cart-sticky-top');
+            }
+        }
+    };
+    /**
+     * Renders Cart content depending on context
+     * @param context
+     * @returns
+     */
+    renderCart = (context = 'edit') => {
+        const isCartEmpty = !state.cart.size;
+        let summaryAmounts = { primary: 0, secondary: 0 };
+        let summaryCounts = { primary: 0, secondary: 0 };
+        let summaryWouldBeAmount = 0;
+        for (const [key, count] of state.cart) {
+            const details = state.productDetails.get(key);
+            if (!details) {
+                continue;
+            }
+            summaryAmounts[details.categoryType] += (details.discountAmount ?? details.amount) * count;
+            summaryCounts[details.categoryType] += 1;
+            summaryWouldBeAmount += details.amount * count;
+        }
+        const { primary: primaryAmount, secondary: secondaryAmount } = summaryAmounts;
+        const summaryAmount = primaryAmount + secondaryAmount;
+        const summarySavings = summaryWouldBeAmount - summaryAmount;
+        const { primary, secondary } = this.areProductsAddedToCart();
+        const hasPrimaryNotification = context === 'edit' && this.checkoutAttempted && !primary;
+        const hasSecondaryNotification = context === 'edit' && this.checkoutAttempted && !secondary;
+        const data = {
+            summaryAmount: summaryAmount.toFixed(2),
+            primaryAmount: primaryAmount.toFixed(2),
+            secondaryAmount: secondaryAmount.toFixed(2),
+            primaryCount: summaryCounts.primary,
+            secondaryCount: summaryCounts.secondary,
+            summarySavings: summarySavings.toFixed(2),
+            hasPrimaryNotification,
+            hasSecondaryNotification
+        };
+        const ctaButton = context === 'edit' ? (h("tet-button", { onClick: this.checkout, slot: "cta", class: "cart__cta", type: "primary", size: this.isDesktopResolution ? 'large' : 'medium', theme: this.theme }, translate('components-b2b-cart-cta-button-title'))) : null;
+        return (h("tet-b2b-configurator-cart", { ref: (el) => (context === 'edit' ? (this.cartEl = el) : null), context: context, class: { 'cart': true, 'cart--empty': isCartEmpty, [`cart--${context}`]: true }, data: data, theme: this.theme, isCartEmpty: isCartEmpty, isDesktopResolution: this.isDesktopResolution }, this.renderCartCardsList(context), ctaButton));
+    };
+    /** Checks if both primary and secondary products are currently in cart */
+    areProductsAddedToCart = () => {
+        const productsInCart = { primary: false, secondary: false };
+        for (const [key, _] of state.cart) {
+            const details = state.productDetails.get(key);
+            if (!details) {
+                continue;
+            }
+            productsInCart[details.categoryType] = true;
+        }
+        return productsInCart;
+    };
+    /** Cart checkout handler. Opens Checkout component*/
+    checkout = () => {
+        this.checkoutAttempted = true;
+        const { primary, secondary } = this.areProductsAddedToCart();
+        if (primary && secondary) {
+            this.checkoutFormEl.open();
+        }
+    };
+    /**
+     * Catches emitted checkout form data
+     * Combines with cart data and re-emits
+     * @param e
+     */
+    submit = ({ detail }) => {
+        const data = {
+            cart: getCart(),
+            contactInfo: detail
+        };
+        this.formState = 'loading';
+        this.b2bConfiguratorSubmit.emit(data);
+        this.checkoutFormEl.close();
+        this.submissionStateDialogEl.open();
+    };
+    renderCheckoutForm = () => {
+        return (h("tet-b2b-check-out-form", { ref: (el) => (this.checkoutFormEl = el), theme: this.theme, "onSubmit-check-out-form": this.submit }, h("div", { slot: "cart" }, this.renderCart('checkout'))));
+    };
     render() {
         return (h(Host, { key: '1e097cec9901e3772f4dbff047f1a28aee8630c7' }, h("div", { key: 'c2b15b14deea0b7973dd7fee59d48a3ce4a60f40', class: { configurator: true, [`${this.theme}`]: true } }, this.isLoading ? this.renderPlaceholder() : state.data && [this.renderOffer(), this.renderCart()]), this.renderCheckoutForm(), this.renderConfirmationDialog(), this.renderSubmissionStateDialog()));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "activePrimaryCategoryId": ["resetSelectedPrimaryCards"],
         "activeSecondaryCategoryId": ["resetSelectedSecondaryCards"]