@crystaldesign/diva-web-planner-react 26.13.0-beta.33 → 26.13.0-beta.35

package/build/esm/index-8ddbb7f3.js

@@ -0,0 +1,201 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-3b485c37.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ToolContainer from './index-6be231e6.js';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import 'react-dom';
+import './index-4f20300f.js';
+import 'react-rnd';
+
+var container = "container-43rJg";
+var item = "item-JRY9h";
+var itemActive = "itemActive-t605y";
+var badge = "badge-5hKWt";
+var badgeError = "badgeError-9Bm52";
+var badgeWarning = "badgeWarning-OJfXJ";
+var css_248z = ".container-43rJg {\n  display: flex;\n  height: 42px;\n  gap: 12px;\n  justify-content: flex-start;\n  align-items: center;\n  overflow-x: auto;\n  overflow-y: hidden;\n  min-width: 0;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1500;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n  border-top: 1px solid #e6e6e6;\n  background-color: #f3f3f3;\n}\n\n.item-JRY9h {\n  cursor: pointer;\n  min-width: 80px;\n  flex-shrink: 0;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  text-align: center;\n  border-radius: 4px;\n  border-radius: var(--globalBorderRadius, 4px);\n  transition: background-color 0.15s ease;\n}\n\n.item-JRY9h:hover {\n  background-color: #e8e8e8;\n}\n\n.item-JRY9h.focus-visible-3dEl- {\n  outline: 2px solid #df2927;\n  outline: 2px solid var(--primaryColor, #df2927);\n  outline-offset: 2px;\n}\n\n.item-JRY9h.focus-visible-3dEl- {\n  outline: 2px solid #df2927;\n  outline: 2px solid #df2927;\n  outline: 2px solid var(--primaryColor, #df2927);\n  outline-offset: 2px;\n}\n\n.item-JRY9h:focus-visible {\n  outline: 2px solid #df2927;\n  outline: 2px solid var(--primaryColor, #df2927);\n  outline-offset: 2px;\n}\n\n.itemActive-t605y {\n  background-color: #e0e0e0;\n  font-weight: 600;\n}\n\n.itemActive-t605y:hover {\n  background-color: #d5d5d5;\n}\n\n.badge-5hKWt {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  margin-left: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  border-radius: 9px;\n}\n\n.badgeError-9Bm52 {\n  background-color: #e53e3e;\n}\n\n.badgeWarning-OJfXJ {\n  background-color: #d69e2e;\n}\n\n/* Dark mode – matches backoffice */\n.darkmode .container-43rJg,\nbody.darkmode .container-43rJg {\n  background-color: rgb(20, 20, 20);\n  border-top-color: rgba(255, 255, 255, 0.12);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n  color: rgb(255, 255, 255);\n}\n\n.darkmode .item-JRY9h:hover,\nbody.darkmode .item-JRY9h:hover {\n  background-color: rgba(255, 255, 255, 0.08);\n}\n\n.darkmode .itemActive-t605y,\nbody.darkmode .itemActive-t605y {\n  background-color: rgba(255, 255, 255, 0.12);\n}\n\n.darkmode .itemActive-t605y:hover,\nbody.darkmode .itemActive-t605y:hover {\n  background-color: rgba(255, 255, 255, 0.16);\n}\n";
+styleInject(css_248z);
+
+var Toolbar = function Toolbar(_props) {
+  var _viewHandler$divaWebP, _viewHandler$divaWebP2, _viewHandler$divaWebP3, _viewHandler$productS;
+  var viewHandler = useViewHandler();
+  var articles = (_viewHandler$divaWebP = (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner) === null || _viewHandler$divaWebP2 === void 0 || (_viewHandler$divaWebP3 = _viewHandler$divaWebP2.getDivaArticles) === null || _viewHandler$divaWebP3 === void 0 ? void 0 : _viewHandler$divaWebP3.call(_viewHandler$divaWebP2, undefined, true)) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {};
+  var dataCreationIssues = Object.values(articles).flatMap(function (a) {
+    var _a$dataCreationErrors;
+    return (_a$dataCreationErrors = a.dataCreationErrors) !== null && _a$dataCreationErrors !== void 0 ? _a$dataCreationErrors : [];
+  });
+  var errorCount = dataCreationIssues.filter(function (e) {
+    var _e$severity;
+    return ((_e$severity = e.severity) !== null && _e$severity !== void 0 ? _e$severity : 'error') === 'error';
+  }).length;
+  var warningCount = dataCreationIssues.filter(function (e) {
+    return e.severity === 'warning';
+  }).length + viewHandler.productState.plannerMessagesArr.filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      item = _ref2[1];
+    return item.type === 'WARNING';
+  }).length;
+  var infoCount = viewHandler.productState.plannerMessagesArr.filter(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      item = _ref4[1];
+    return item.type === 'INFO';
+  }).length;
+  var _useDivaCore = useDivaCore(),
+    wwsClient = _useDivaCore.state.organization.settings.wwsClient;
+  var toggleWindow = function toggleWindow(type) {
+    if (viewHandler.wysiwygDebugState.activeWysiwygWindows.has(type)) {
+      viewHandler.wysiwygDebugState.removeWysiwygWindow(type);
+    } else {
+      viewHandler.wysiwygDebugState.addWysiwygWindow(type);
+    }
+  };
+  var isActive = function isActive(type) {
+    return viewHandler.wysiwygDebugState.activeWysiwygWindows.has(type);
+  };
+  var handleInspectViewChange = function handleInspectViewChange() {
+    var newValue = !viewHandler.wysiwygDebugState.wysiwygInspectView;
+    viewHandler.wysiwygDebugState.setWysiwygInspectView(newValue);
+    var actSet = viewHandler.divaWebPlanner.actSet();
+    if (actSet) actSet.inspectMode = newValue;
+    viewHandler.divaWebPlanner.updateConfiguratorStructureOfActSet();
+    viewHandler.paletteViewHandler.updateCurPaletteData(true);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ToolContainer, {}), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/jsx("div", {
+        className: item,
+        children: DivaUtils.formatPrice((_viewHandler$productS = viewHandler.productState.formatedTotalPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0, viewHandler.productState.priceFormat)
+      }), /*#__PURE__*/jsx("div", {
+        className: viewHandler.wysiwygDebugState.wysiwygInspectView ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: handleInspectViewChange,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && handleInspectViewChange();
+        },
+        children: "Inspect"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('PartList') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('PartList');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('PartList');
+        },
+        children: "St\xFCckliste"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('PriceAnalyzer') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('PriceAnalyzer');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('PriceAnalyzer');
+        },
+        children: "Preise"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('PriceList') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('PriceList');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('PriceList');
+        },
+        children: "Preisliste"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('DecisionAnalyzer') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('DecisionAnalyzer');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('DecisionAnalyzer');
+        },
+        children: "Decisions"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('OptionTreeTable') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('OptionTreeTable');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('OptionTreeTable');
+        },
+        children: "Option Tree"
+      }), /*#__PURE__*/jsx("div", {
+        className: isActive('PropertiesTable') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('PropertiesTable');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('PropertiesTable');
+        },
+        children: "Properties"
+      }), /*#__PURE__*/jsxs("div", {
+        className: isActive('ErrorWarningOverview') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('ErrorWarningOverview');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('ErrorWarningOverview');
+        },
+        children: ["Errors & Warnings", errorCount > 0 && /*#__PURE__*/jsx("span", {
+          className: "".concat(badge, " ").concat(badgeError),
+          children: errorCount
+        }), warningCount > 0 && /*#__PURE__*/jsx("span", {
+          className: "".concat(badge, " ").concat(badgeWarning),
+          children: warningCount
+        }), errorCount === 0 && warningCount === 0 && infoCount > 0 && /*#__PURE__*/jsx("span", {
+          className: "".concat(badge, " ").concat(badgeWarning),
+          children: infoCount
+        })]
+      }), wwsClient === 'Pfister' && /*#__PURE__*/jsx("div", {
+        className: isActive('ekText') ? "".concat(item, " ").concat(itemActive) : item,
+        onClick: function onClick() {
+          return toggleWindow('ekText');
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && toggleWindow('ekText');
+        },
+        children: "Ek Text"
+      })]
+    })]
+  });
+};
+var Toolbar$1 = observer(Toolbar);
+
+export { Toolbar$1 as default };

package/build/esm/index-8e855288.js

@@ -0,0 +1,60 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-3b485c37.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-XC5WL";
+var doneBar = "doneBar-xosJY";
+var todoBar = "todoBar-sVQM-";
+var css_248z = ".wrapper-XC5WL {\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  bottom: 0;\n  left: 0;\n  z-index: 2000;\n}\n\n.doneBar-xosJY {\n  background: #ccc;\n  border-radius: 0 1px 1px 0;\n  transition: width 0.35s ease-in-out;\n  height: 100%;\n}\n\n.todoBar-sVQM- {\n  background: #eee;\n  transition: width 0.35s ease-in-out;\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var ProgressBar = function ProgressBar(_ref) {
+  var _viewHandler$configur;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var lastStep = (_viewHandler$configur = viewHandler.configuratorStructureHandler) === null || _viewHandler$configur === void 0 ? void 0 : _viewHandler$configur.lastConfigStep;
+  var currentStep = viewHandler.tabGroupState.curConfigStep;
+  if (!lastStep || !currentStep) return /*#__PURE__*/jsx(Fragment, {});
+  var current = currentStep.posNr;
+  var total = lastStep.posNr;
+  var doneInPercent = total == 1 ? 0 : Math.round(current / total * 100);
+  var todoInPercent = 100 - doneInPercent;
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      className: doneBar,
+      style: {
+        width: doneInPercent + '%'
+      }
+    }), /*#__PURE__*/jsx("div", {
+      className: todoBar,
+      style: {
+        width: todoInPercent + '%'
+      }
+    })]
+  });
+};
+var ProgressBar$1 = observer(ProgressBar);
+
+export { ProgressBar$1 as default };

package/build/esm/index-8fcc3384.js

@@ -0,0 +1,186 @@
+import { s as styleInject, u as useViewHandler, _ as _onClickCheckout } from './index-3b485c37.js';
+import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var container = "container-jVXha";
+var headline = "headline-wXulF";
+var subheadline = "subheadline-dAJ7Z";
+var dealerCard = "dealerCard-WsUAS";
+var dealerImage = "dealerImage-Wd3ix";
+var dealerContent = "dealerContent-Se-R3";
+var dealerName = "dealerName-z85PP";
+var dealerDescription = "dealerDescription-wPDsN";
+var infoBlock = "infoBlock-i-S-s";
+var contactList = "contactList-vdVHd";
+var contactItem = "contactItem-g32vy";
+var contactIcon = "contactIcon-gLhAV";
+var ctaButton = "ctaButton-0BeyQ";
+var ctaSubtext = "ctaSubtext-ScjcP";
+var css_248z = ".container-jVXha {\n  padding: 16px 0;\n  border-top: 1px solid #e8e3da;\n  border-top: 1px solid var(--galleryItemBorderColor, #e8e3da);\n}\n\n.headline-wXulF {\n  font-size: 18px;\n  font-weight: 300;\n  line-height: 1.3;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0 0 8px;\n}\n\n.subheadline-dAJ7Z {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 16px;\n}\n\n.dealerCard-WsUAS {\n  overflow: hidden;\n  border-radius: var(--buttons-border-radius);\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  background: var(--settingsBackgroundColor);\n  margin-bottom: 16px;\n}\n\n.dealerImage-Wd3ix {\n  overflow: hidden;\n  aspect-ratio: 16 / 8;\n}\n\n.dealerImage-Wd3ix img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  -o-object-position: top center;\n     object-position: top center;\n}\n\n.dealerContent-Se-R3 {\n  padding: 8px 16px;\n}\n\n.dealerName-z85PP {\n  font-size: 16px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0 0 4px;\n}\n\n.dealerDescription-wPDsN {\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 12px;\n}\n\n.infoBlock-i-S-s {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin-bottom: 12px;\n  white-space: pre-line;\n}\n\n.contactList-vdVHd {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  border-top: 1px solid #e8e3da;\n  border-top: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  padding-top: 12px;\n}\n\n.contactItem-g32vy {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n}\n\n.contactItem-g32vy a {\n  color: var(--diva-theme-palette-text-secondary);\n  text-decoration: none;\n}\n\n.contactItem-g32vy a:hover {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.contactIcon-gLhAV {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: 2px;\n  opacity: 0.6;\n}\n\n.ctaButton-0BeyQ {\n  width: calc(100% - 48px);\n  padding: 14px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #fff;\n  color: var(--diva-theme-palette-primary-contrast-text, #fff);\n  background: var(--diva-theme-palette-primary-main);\n  border: none;\n  border-radius: var(--buttons-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition:\n    background 0.2s,\n    box-shadow 0.2s;\n}\n\n.ctaButton-0BeyQ:hover {\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.ctaSubtext-ScjcP {\n  font-size: 12px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  text-align: center;\n  margin: 8px 0 0;\n}\n";
+styleInject(css_248z);
+
+var AppointmentPreview = function AppointmentPreview() {
+  var _contactData$contactP, _contactData$contactP2;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var organization = viewHandler.uiState.organization;
+  var contactData = useMemo(function () {
+    var data = organization === null || organization === void 0 ? void 0 : organization.additionalContactData;
+    if (!data) return undefined;
+    var arr = Array.isArray(data) ? data : [data];
+    return arr[0];
+  }, [organization === null || organization === void 0 ? void 0 : organization.additionalContactData]);
+  var appointmentButton = useMemo(function () {
+    var config = viewHandler.uiState.checkoutConfig;
+    if (!(config !== null && config !== void 0 && config.buttons)) return undefined;
+    return config.buttons.find(function (b) {
+      return b.type === 'APPOINTMENT';
+    });
+  }, [viewHandler.uiState.checkoutConfig]);
+  var handleCtaClick = function handleCtaClick() {
+    if (appointmentButton) {
+      var _appointmentButton$in;
+      _onClickCheckout(appointmentButton, viewHandler, (_appointmentButton$in = appointmentButton.index) !== null && _appointmentButton$in !== void 0 ? _appointmentButton$in : 0, t, undefined, undefined);
+    }
+  };
+  if (!contactData) return null;
+  var hasContactInfo = contactData.street || contactData.zipCode || contactData.city || contactData.phone || contactData.email;
+  if (!hasContactInfo && !contactData.description && !contactData.info && !contactData.contactPersonName && !contactData.contactPersonImage) return null;
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/jsx("h3", {
+      className: headline,
+      children: t('checkout.appointment.preview.headline', 'Persönliche Beratung vereinbaren')
+    }), /*#__PURE__*/jsx("p", {
+      className: subheadline,
+      children: t('checkout.appointment.preview.subheadline')
+    }), /*#__PURE__*/jsxs("div", {
+      className: dealerCard,
+      children: [((_contactData$contactP = contactData.contactPersonImage) === null || _contactData$contactP === void 0 ? void 0 : _contactData$contactP.url) && /*#__PURE__*/jsx("div", {
+        className: dealerImage,
+        children: /*#__PURE__*/jsx("img", {
+          src: contactData.contactPersonImage.url,
+          alt: (_contactData$contactP2 = contactData.contactPersonName) !== null && _contactData$contactP2 !== void 0 ? _contactData$contactP2 : ''
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: dealerContent,
+        children: [(contactData.contactPersonName || contactData.description) && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("h4", {
+            className: dealerName,
+            children: contactData.contactPersonName
+          }), contactData.description && /*#__PURE__*/jsx("p", {
+            className: dealerDescription,
+            children: contactData.description
+          })]
+        }), contactData.info && /*#__PURE__*/jsx("div", {
+          className: infoBlock,
+          children: contactData.info
+        }), /*#__PURE__*/jsxs("div", {
+          className: contactList,
+          children: [(contactData.street || contactData.zipCode || contactData.city) && /*#__PURE__*/jsxs("a", {
+            className: contactItem,
+            href: "https://www.google.com/maps/search/?api=1&query=".concat(encodeURIComponent([contactData.street, contactData.zipCode, contactData.city].filter(Boolean).join(', '))),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [/*#__PURE__*/jsxs("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [/*#__PURE__*/jsx("path", {
+                d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
+              }), /*#__PURE__*/jsx("circle", {
+                cx: "12",
+                cy: "10",
+                r: "3"
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              children: [contactData.street && /*#__PURE__*/jsx("div", {
+                children: contactData.street
+              }), (contactData.zipCode || contactData.city) && /*#__PURE__*/jsx("div", {
+                children: [contactData.zipCode, contactData.city].filter(Boolean).join(' ')
+              })]
+            })]
+          }), contactData.phone && /*#__PURE__*/jsxs("div", {
+            className: contactItem,
+            children: [/*#__PURE__*/jsx("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /*#__PURE__*/jsx("path", {
+                d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+              })
+            }), /*#__PURE__*/jsx("a", {
+              href: "tel:".concat(contactData.phone.replace(/\s/g, '')),
+              children: contactData.phone
+            })]
+          }), contactData.email && /*#__PURE__*/jsxs("div", {
+            className: contactItem,
+            children: [/*#__PURE__*/jsxs("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [/*#__PURE__*/jsx("path", {
+                d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+              }), /*#__PURE__*/jsx("path", {
+                d: "M22 6l-10 7L2 6"
+              })]
+            }), /*#__PURE__*/jsx("a", {
+              href: "mailto:".concat(contactData.email),
+              children: contactData.email
+            })]
+          })]
+        })]
+      })]
+    }), appointmentButton && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("button", {
+        type: "button",
+        className: ctaButton,
+        onClick: handleCtaClick,
+        children: [t('checkout.appointment.preview.cta', 'Persönliche Beratung vereinbaren'), /*#__PURE__*/jsx("svg", {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M5 12h14M12 5l7 7-7 7"
+          })
+        })]
+      }), /*#__PURE__*/jsx("p", {
+        className: ctaSubtext,
+        children: t('checkout.appointment.preview.ctaSubtext')
+      })]
+    })]
+  });
+};
+var AppointmentPreview$1 = observer(AppointmentPreview);
+
+export { AppointmentPreview$1 as default };

package/build/esm/index-90b6fed5.js

@@ -0,0 +1,39 @@
+import { s as styleInject } from './index-3b485c37.js';
+import 'react';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var isActive = "is-active-bp70x";
+var listenToVariablesOptionClass = "listen-to-variables-option-class-rPBBX";
+var listenToVariablesGalleryClass = "listen-to-variables-gallery-class-dRVC6";
+var css_248z = ".is-active-bp70x {\n  position: absolute;\n  left: 4px;\n  top: 4px;\n  height: 19.2px;\n  width: 19.2px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2221%22 height%3D%2221%22 viewBox%3D%220 0 21 21%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2210.3408%22 cy%3D%2210.781%22 r%3D%2210%22 fill%3D%22%234A4A4A%22%2F%3E%3Cpath d%3D%22M5.68848 10.7237L9.86816 15.3262L14.9932 8.18604%22 stroke%3D%22white%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  border-radius: 20px;\n  border: 1px solid #d5d5d5;\n  background-position: center;\n  z-index: 100;\n}\n.listen-to-variables-option-class-rPBBX {\n  opacity: 1;\n  opacity: var(--hideOptionSelActive, 1);\n}\n\n.listen-to-variables-gallery-class-dRVC6 {\n  opacity: 1;\n  opacity: var(--hideGallerySelActive, 1);\n}\n";
+styleInject(css_248z);
+
+var IsActive = function IsActive(_ref) {
+  var listenToGalleryVariables = _ref.listenToGalleryVariables,
+    listenToOptionVariables = _ref.listenToOptionVariables;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(isActive, listenToOptionVariables ? listenToVariablesOptionClass : undefined, listenToGalleryVariables ? listenToVariablesGalleryClass : undefined)
+  });
+};
+
+export { IsActive as default };

package/build/esm/index-90f95aee.js

@@ -0,0 +1,52 @@
+import { u as useViewHandler } from './index-3b485c37.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import RoomGallery from './index-365dddcd.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-57d33669.js';
+import './index.module-bac37b1e.js';
+import './index-7a76bd25.js';
+import './index-0b47bc99.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-bc992185.js';
+import './index-c8dbc46a.js';
+
+var AiRoomsSelection = function AiRoomsSelection(props) {
+  var _viewHandler$aiState$, _organization$setting;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    user = _useDivaCore$state.user,
+    organization = _useDivaCore$state.organization;
+  if (!viewHandler.aiState.showAiRoomRenderingInSummary || !viewHandler.viewPlannerHandler.isAny3DVisualization() || (!user ? !viewHandler.aiState.shouldShowAiForAnonymous : !viewHandler.aiState.isAnyLimitDefined) || !((_viewHandler$aiState$ = viewHandler.aiState.enrichedAiRoomRenderings()) !== null && _viewHandler$aiState$ !== void 0 && _viewHandler$aiState$.length) || (_organization$setting = organization.settings) !== null && _organization$setting !== void 0 && (_organization$setting = _organization$setting.aiSettings) !== null && _organization$setting !== void 0 && _organization$setting.checkForDivaKiReady && !viewHandler.aiState.catalogDataKiReady()) return /*#__PURE__*/jsx(Fragment, {});
+
+  // Use enriched items from AI state (computed property with all callbacks and current state)
+  return /*#__PURE__*/jsx(RoomGallery, {
+    roomItems: viewHandler.aiState.enrichedAiRoomRenderings(true),
+    selectedRoom: viewHandler.aiState.selectedRoom
+  });
+};
+var AiRoomsSelection$1 = observer(AiRoomsSelection);
+
+export { AiRoomsSelection$1 as default };

package/build/esm/index-922a6f8f.js

@@ -0,0 +1,96 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-3b485c37.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import InfoIcon from './index-7a76bd25.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-Y-d99";
+var toggleSwitch = "toggle-switch-Mhnmc";
+var switchSelection = "switch-selection-WpDtT";
+var switchLabel = "switch-label-KDRkk";
+var sel = "sel-0rh79";
+var css_248z = ".wrapper-Y-d99 {\n  height: 36px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #eaeaea;\n  border-radius: 6px;\n}\n.toggle-switch-Mhnmc {\n  height: calc(100% - 6px);\n  width: calc(100% - 6px);\n  border-radius: 3px;\n  box-sizing: content-box;\n  box-sizing: initial;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.switch-selection-WpDtT {\n  display: block;\n  position: absolute;\n  z-index: 1;\n  height: 30px;\n  background-color: #fff;\n  border-radius: 3px;\n  transition: left 0.25s ease-out;\n}\n\n.switch-label-KDRkk {\n  position: relative;\n  display: flex;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n  line-height: 22px;\n  height: 20px;\n  width: calc(100% - 8px);\n  padding: 6px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.6);\n  text-align: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  transition:\n    color 0.2s ease-out,\n    font-weight 0.2s ease-out;\n}\n\n.sel-0rh79 {\n  font-weight: 300;\n  color: #000;\n}\n";
+styleInject(css_248z);
+
+var MultiToggleSwitch = function MultiToggleSwitch(_ref) {
+  var values = _ref.values,
+    items = _ref.items,
+    _ref$state = _slicedToArray(_ref.state, 2),
+    selected = _ref$state[0],
+    setSelected = _ref$state[1],
+    round = _ref.round;
+  var widthPercentage = 100 / values.length;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    texts = _useState2[0],
+    setTexts = _useState2[1];
+  useEffect(function () {
+    if (!values.some(function (v) {
+      return !v.endsWith('cm');
+    })) {
+      setTexts(values.map(function (v, i) {
+        return v.replace('cm', '') + (i == values.length - 1 ? 'cm' : '');
+      }));
+    } else {
+      setTexts(values);
+    }
+  }, [values]);
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    style: {
+      borderRadius: round ? '100px' : undefined
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: toggleSwitch,
+      children: [texts.map(function (val, index) {
+        var _items$index;
+        return /*#__PURE__*/jsx("div", {
+          style: {
+            width: widthPercentage + '%'
+          },
+          children: /*#__PURE__*/jsxs("label", {
+            onClick: function onClick() {
+              return setSelected(index);
+            },
+            className: classnames(switchLabel, selected === index && sel),
+            children: [val, ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+              item: items[index],
+              style: {
+                top: -4
+              }
+            }, items[index].codex)]
+          })
+        }, index);
+      }), /*#__PURE__*/jsx("div", {
+        className: switchSelection,
+        style: {
+          left: selected / values.length * 100 + '%',
+          width: widthPercentage + '%',
+          borderRadius: round ? '100px' : undefined
+        }
+      })]
+    })
+  });
+};
+var MultiToggleSwitch$1 = observer(MultiToggleSwitch);
+
+export { MultiToggleSwitch$1 as default };