@crystaldesign/diva-web-planner-react 25.4.0-beta.4 → 25.4.0-beta.40

package/build/esm/index-704a1e3c.js

@@ -0,0 +1,107 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import './index-8b51bdc0.js';
+import { useState, useEffect } from 'react';
+import MultiToggleSwitch from './index-3805097a.js';
+import { w as wrapper, i as icon } from './index.module-0a951770.js';
+import { u as url, m as message, n as mail } from './index.module-7a835097.js';
+import classnames from 'classnames';
+import ShareViaUrl from './index-5852cd2f.js';
+import ShareViaSocialMedias from './index-641932f4.js';
+import ShareViaEmail from './index-99afa0a8.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+import 'qrcode.react';
+
+var Share = function Share(_ref) {
+  var config = _ref.config,
+    basket = _ref.basket,
+    url$1 = _ref.url;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    possibleTypes = _useState2[0],
+    setPossibleTypes = _useState2[1];
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile,
+    _useDivaCore$actions = _useDivaCore.actions,
+    closeModal = _useDivaCore$actions.closeModal,
+    openModal = _useDivaCore$actions.openModal;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  useEffect(function () {
+    var _config$emailConfig, _config$default;
+    if (isMobile) {
+      if (navigator.share) {
+        openModal({
+          accept: true,
+          text: t('share.now_text'),
+          title: t('share.now_title'),
+          callback: function callback(a) {
+            if (a) {
+              var _config$socialMedia, _config$socialMedia2, _config$socialMedia3, _config$socialMedia4;
+              navigator.share({
+                title: (_config$socialMedia = config.socialMedia) !== null && _config$socialMedia !== void 0 && _config$socialMedia.title ? t((_config$socialMedia2 = config.socialMedia) === null || _config$socialMedia2 === void 0 ? void 0 : _config$socialMedia2.title) : undefined,
+                text: (_config$socialMedia3 = config.socialMedia) !== null && _config$socialMedia3 !== void 0 && _config$socialMedia3.text ? t((_config$socialMedia4 = config.socialMedia) === null || _config$socialMedia4 === void 0 ? void 0 : _config$socialMedia4.text) : undefined,
+                url: url$1
+              });
+            }
+            closeModal();
+          }
+        });
+      }
+    }
+    var newPossibleTypes = [];
+    if (config.url) newPossibleTypes.push('SHARE_URL');
+    if (config.socialMedia) newPossibleTypes.push('SHARE_WHATSAPP');
+    if ((_config$emailConfig = config.emailConfig) !== null && _config$emailConfig !== void 0 && _config$emailConfig.length) newPossibleTypes.push('SHARE_EMAIL');
+    setIndex(newPossibleTypes.indexOf((_config$default = config["default"]) !== null && _config$default !== void 0 ? _config$default : newPossibleTypes[0]));
+    setPossibleTypes(newPossibleTypes);
+  }, [config]);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    index = _useState4[0],
+    setIndex = _useState4[1];
+  if (!possibleTypes.length || index === undefined) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx(MultiToggleSwitch, {
+      state: [index, setIndex],
+      values: [].concat(_toConsumableArray(config.url ? [/*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(icon, url)
+        }), " ", t('checkout.share.title.url')]
+      })] : []), _toConsumableArray(config.socialMedia ? [/*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(icon, message)
+        }), " ", t('checkout.share.title.socials')]
+      })] : []), _toConsumableArray(config.emailConfig ? [/*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(icon, mail)
+        }), " ", t('checkout.share.title.mail')]
+      })] : []))
+    }), possibleTypes[index] == 'SHARE_URL' && /*#__PURE__*/jsx(ShareViaUrl, {
+      url: url$1
+    }), possibleTypes[index] == 'SHARE_WHATSAPP' && /*#__PURE__*/jsx(ShareViaSocialMedias, {
+      config: config.socialMedia,
+      url: url$1
+    }), possibleTypes[index] == 'SHARE_EMAIL' && /*#__PURE__*/jsx(ShareViaEmail, {
+      config: config.emailConfig,
+      basket: basket,
+      url: url$1
+    })]
+  });
+};
+
+export { Share as default };

package/build/esm/index-70d4d90c.js

@@ -0,0 +1,56 @@
+import { s as styleInject } from './index-8b51bdc0.js';
+import { observer } from 'mobx-react-lite';
+import Arrow from './index-73c9ca42.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'classnames';
+
+var selectContainer = "select-container-IwjJt";
+var select = "select-ftXa-";
+var arrow = "arrow-vRzWc";
+var css_248z = ".select-container-IwjJt {\n  position: relative;\n}\n\n.select-ftXa- {\n  outline: none !important;\n}\n\n.select-ftXa- {\n  position: relative;\n  font-size: 16px;\n  color: #111;\n  line-height: 20px;\n  height: 30px;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  width: 100%;\n  border: 1px solid var(--select-border);\n  border-radius: 3px;\n  padding: 4px 8px;\n  cursor: pointer;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n\n.arrow-vRzWc {\n  position: absolute;\n  top: 10px;\n  right: 12px;\n  z-index: 10;\n  pointer-events: none;\n}\n";
+styleInject(css_248z);
+
+var MobileDropdown = function MobileDropdown(_ref) {
+  var onChange = _ref.onChange,
+    mobileOptions = _ref.mobileOptions,
+    selectedOption = _ref.selectedOption,
+    id = _ref.id;
+  return /*#__PURE__*/jsxs("div", {
+    className: selectContainer,
+    id: id,
+    children: [/*#__PURE__*/jsx(Arrow, {
+      open: false,
+      className: arrow
+    }), /*#__PURE__*/jsx("select", {
+      className: select,
+      onChange: onChange,
+      value: selectedOption,
+      children: mobileOptions.map(function (option) {
+        return /*#__PURE__*/jsx("option", {
+          value: option.codex,
+          dangerouslySetInnerHTML: {
+            __html: option.text + (!!option.price ? '  -  ' + option.price : '')
+          }
+        }, option.codex);
+      })
+    })]
+  });
+};
+var MobileDropdown$1 = observer(MobileDropdown);
+
+export { MobileDropdown$1 as default };

package/build/esm/index-711a3393.js

@@ -0,0 +1,134 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-8b51bdc0.js';
+import classnames from 'classnames';
+import { useHover, useLayer } from 'react-laag';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import MetaData from './index-d18ba822.js';
+import GenericToolTip from './index-84852a92.js';
+import InfoIcon from './index-fdebd928.js';
+import PricePreview from './index-4463273f.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+
+var articleItem = "ArticleItem-2xa9z";
+var sel = "sel-3vhEw";
+var replacemode = "replacemode-XssaJ";
+var wcArticleInfoContainer = "wcArticleInfoContainer-6umFd";
+var pricesAreHiddenClass = "pricesAreHiddenClass-5i5mY";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-C-sNn";
+var wcConfiguratorSettingsTitleSingleLine = "wcConfigurator-settings-title-single-line-xIggU";
+var wcSize = "wcSize-DKVv4";
+var wcSizeNormal = "wcSize-normal-H7PI-";
+var wcImage = "wcImage-bSQnw";
+var wcArticleSize = "wcArticleSize-FGDRM";
+var css_248z = "/*Planner*/\n\n.ArticleItem-2xa9z {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  transition: 0.35s ease;\n  cursor: pointer;\n  white-space: pre-line;\n  border: 3px solid transparent;\n  border: 3px solid var(--optionItemBorderColor, transparent);\n}\n.sel-3vhEw {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderSelColor, var(--primaryColor));\n}\n\n.ArticleItem-2xa9z:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.ArticleItem-2xa9z.replacemode-XssaJ:hover {\n  border: 3px solid var(--primaryColor);\n  border: 3px solid var(--optionItemBorderHoverColor, var(--primaryColor));\n}\n\n.ArticleItem-2xa9z:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n}\n\n.wcArticleInfoContainer-6umFd {\n  display: flex;\n  float: left;\n  margin-top: 8px;\n  margin-left: 8px;\n  height: calc(100% - 14px);\n  max-width: calc(100% - 171.2px);\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.pricesAreHiddenClass-5i5mY .wcArticleInfoContainer-6umFd {\n  max-width: calc(100% - 100px);\n}\n\n.ArticleItem-2xa9z .wcConfigurator-settings-title-C-sNn {\n  display: -webkit-box;\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.ArticleItem-2xa9z .wcConfigurator-settings-title-single-line-xIggU {\n  -webkit-line-clamp: 1;\n}\n.ArticleItem-2xa9z .wcSize-DKVv4 {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.ArticleItem-2xa9z .wcSize-DKVv4.wcSize-normal-H7PI- {\n  max-height: 74px;\n}\n\n.ArticleItem-2xa9z .wcImagePlaceHolder-KQO1T {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.ArticleItem-2xa9z .wcImage-bSQnw {\n  width: 74px;\n  height: 74px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  margin-left: 3.2px;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.ArticleItem-2xa9z .wcArticleSize-FGDRM {\n  bottom: 8px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  z-index: 50;\n\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ArticleItem-2xa9z .wcArticleSize-FGDRM:hover {\n  overflow: visible;\n}\n@media all and (max-width: 1100px) {\n  .ArticleItem-2xa9z .wcSize-normal-H7PI- {\n    height: 96px;\n  }\n\n  .ArticleItem-2xa9z .wcConfigurator-settings-title-C-sNn {\n    -webkit-line-clamp: 2;\n  }\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Article = function Article(_ref) {
+  var _renderLayer;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet,
+    hidePrices = _useDivaCore$state.hidePrices;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || !item.price;
+  var isInReplaceMode = viewHandler.settingsState.plannerReplaceMode && !(paletteId == 1 && viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    className: classnames(articleItem, pricesAreHidden ? pricesAreHiddenClass : undefined, 'wcConfigurator_Article', item.sel ? sel : undefined, isInReplaceMode ? replacemode : undefined),
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnPlannerPalette(item, paletteId);
+    }
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundImage: "url(".concat(item.imgSrc, ")")
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: classnames(wcArticleInfoContainer),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcConfiguratorSettingsTitle, metaDataVisible ? wcConfiguratorSettingsTitleSingleLine : undefined),
+          dangerouslySetInnerHTML: {
+            __html: item.title
+          }
+        }), /*#__PURE__*/jsx(MetaData, {
+          metaData: item.metaData,
+          visible: [metaDataVisible, setMetaDataVisible]
+        }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+          text: item.title,
+          desciption: metaDataVisible,
+          codex: item.articleCodex,
+          image: item.imgSrc,
+          layerProps: layerProps
+        }, item.codex))), /*#__PURE__*/jsx("div", {
+          className: classnames(wcArticleSize),
+          children: item.sizeInfo
+        })]
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item,
+        style: {
+          bottom: 8
+        }
+      }, item.articleCodex)]
+    }), !pricesAreHidden && /*#__PURE__*/jsx(PricePreview, {
+      price: item.price,
+      style: {
+        right: -3,
+        top: -3,
+        paddingTop: 6
+      }
+    })]
+  }));
+};
+var Article$1 = observer(Article);
+
+export { Article$1 as default };

package/build/esm/index-73c9ca42.js

@@ -0,0 +1,41 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject } from './index-8b51bdc0.js';
+import 'react';
+import classnames from 'classnames';
+import { jsx } 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/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+
+var wcFoldArrow = "wcFoldArrow-sIgSx";
+var wcCancelArrow = "wcCancelArrow-PZ86-";
+var wcOpenArrow = "wcOpenArrow-TZzZy";
+var wcClosedArrow = "wcClosedArrow-fWMiX";
+var css_248z = ".wcFoldArrow-sIgSx {\n  transition: transform 0.35s ease, width 0.5s ease, height 0.5s ease;\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  background-size: contain;\n  right: 10px;\n  top: 8px;\n  width: 12px;\n  height: 12px;\n  transform: rotateZ(0deg);\n}\n.wcCancelArrow-PZ86- {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1L9 9M9 1L1 9%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcCancelArrow-PZ86-:hover {\n  transform: rotateZ(90deg);\n}\n\n.wcOpenArrow-TZzZy {\n  transform: rotateZ(180deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcClosedArrow-fWMiX {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["onClick", "iconAsDelete", "open"];
+var Arrow = function Arrow(_ref) {
+  var onClick = _ref.onClick,
+    iconAsDelete = _ref.iconAsDelete,
+    open = _ref.open,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("span", {
+    onClick: onClick,
+    onTouchEnd: onClick,
+    className: classnames(wcFoldArrow, iconAsDelete ? wcCancelArrow : undefined, !iconAsDelete ? open ? wcOpenArrow : wcClosedArrow : undefined, props.className)
+  });
+};
+
+export { Arrow as default };

package/build/esm/index-73eea01d.js

@@ -0,0 +1,317 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import './index-8b51bdc0.js';
+import { getLogger, useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import CreateAppointment from './index-cb2259fa.js';
+import { w as wrapper, i as inModalClass, b as button, a as inverted } from './index.module-7a835097.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import Share from './index-704a1e3c.js';
+import Save from './index-001d6d25.js';
+import _typeof from '@babel/runtime/helpers/typeof';
+import { flatten } from 'flat';
+import Header from './index-a20fa50b.js';
+import Icon from './index-1620e340.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import 'mobx-react-lite';
+import 'react-select';
+import './index-3805097a.js';
+import './index.module-0a951770.js';
+import './index-5852cd2f.js';
+import 'qrcode.react';
+import './index-641932f4.js';
+import './index-99afa0a8.js';
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+/**
+ *  Replaces the template strings in the content with the actual basket data
+ *
+ * @param content the content to parse
+
+ * @param language the language to use
+ */
+function replaceTemplateStrings (content, data, language) {
+  if (!data || !content) return content;
+  if (typeof content == 'string') return content;
+  var flatBasket = flatten(_objectSpread$1(_objectSpread$1({}, data.organization), data.basket));
+  return recursiveReplaceTemplates(content, flatBasket, language);
+}
+
+/**
+ * Replaces the template string in all fields of the content object with the actual basket data
+ *
+ * @param content the content to parse
+ * @param basket the flattend version of the basket data
+ */
+function recursiveReplaceTemplates(content, basket, language) {
+  for (var _i = 0, _Object$entries = Object.entries(content); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    if (typeof content[key] === 'string' && key != 'link') {
+      content[key] = replaceTemplateString(value, basket, language);
+    } else if (_typeof(content[key]) === 'object') {
+      //check if the object is a language dictionary, if so replace it with the value for the current language
+      var keys = Object.keys(content[key]);
+      if (keys.includes(language) || keys.includes('de')) {
+        var _content$key$language;
+        content[key] = replaceTemplateString((_content$key$language = content[key][language]) !== null && _content$key$language !== void 0 ? _content$key$language : content[key].de, basket, language);
+      } else {
+        content[key] = recursiveReplaceTemplates(content[key], basket, language);
+      }
+    }
+  }
+  return content;
+}
+
+/**
+ * replaces the templates in on string with the actual basket data
+ *
+ * @param template the templatestring to parse
+ * @param basket the flattend version of the basket data
+ * @param locale the locale to use, if any
+ */
+function replaceTemplateString(template, basket, locale) {
+  var matches = checkForTemplateStrings(template);
+  for (var _i2 = 0, _matches = matches; _i2 < _matches.length; _i2++) {
+    var _basket$locale, _basket, _basket2;
+    var match = _matches[_i2];
+    //if a locale is provided, check if there is a locale version of the field (fallback is 'de'), if not use the default
+    var basketField = match.replace('basket.', '').replace('organization.', '');
+    var value = void 0;
+    if (locale) value = (_basket$locale = (_basket = basket[basketField + '_locales']) === null || _basket === void 0 ? void 0 : _basket[locale]) !== null && _basket$locale !== void 0 ? _basket$locale : (_basket2 = basket[basketField + '_locales']) === null || _basket2 === void 0 ? void 0 : _basket2.de;
+    if (!value) value = basket[basketField];
+    if (value != undefined) template = template.replace('${' + match + '}', value);
+  }
+  return template;
+}
+
+/**
+ *  Extracts all substrings that are inside ${...}
+ *
+ * @param input the template to parse
+ * @returns a list of values extracted form the template
+ */
+function checkForTemplateStrings(input) {
+  // Regular expression to match ${...}
+  var regex = /\$\{([^}]+)\}/g;
+  var matches = [];
+  var match;
+
+  // Find all matches
+  while ((match = regex.exec(input)) !== null) {
+    // Extract the content inside ${...}
+    matches.push(match[1]);
+  }
+  return matches;
+}
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LOG = getLogger('Planner', 'WEB-PLANNER-REACT');
+var Checkout = function Checkout(_ref) {
+  var inModal = _ref.inModal,
+    index = _ref.index,
+    viewHandler = _ref.viewHandler,
+    basket = _ref.basket;
+  var _useDivaCore = useDivaCore(),
+    organization = _useDivaCore.state.organization;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var _useState = useState(replaceTemplateStrings(viewHandler.uiState.config.viewConfig.checkout, {
+      basket: basket === null || basket === void 0 ? void 0 : basket.getAsJson(),
+      organization: organization
+    }, i18n.language)),
+    _useState2 = _slicedToArray(_useState, 2),
+    config = _useState2[0],
+    setConfig = _useState2[1];
+  useEffect(function () {
+    setConfig(replaceTemplateStrings(viewHandler.uiState.config.viewConfig.checkout, {
+      organization: organization,
+      basket: basket
+    }, i18n.language));
+  }, [basket]);
+  if (!config) return /*#__PURE__*/jsx(Fragment, {});
+  var url = config.url;
+  var currentConfig = config.buttons[index !== null && index !== void 0 ? index : -1];
+  if (currentConfig && basket) switch (currentConfig.type) {
+    case 'APPOINTMENT':
+      return /*#__PURE__*/jsx(CreateAppointment, {
+        config: currentConfig,
+        basket: basket,
+        url: url
+      });
+    case 'SHARE':
+      return /*#__PURE__*/jsx(Share, {
+        config: currentConfig,
+        basket: basket,
+        url: url
+      });
+    case 'SAVE':
+      return /*#__PURE__*/jsx(Save, {
+        config: currentConfig,
+        basket: basket,
+        url: url,
+        viewHandler: viewHandler
+      });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, inModal ? inModalClass : undefined),
+    children: config.buttons.map(function (c, index) {
+      if (c.visibleInOverview === false) return /*#__PURE__*/jsx(Fragment, {});
+      return /*#__PURE__*/jsxs("button", {
+        className: classnames(button, c.isPrimary ? inverted : undefined),
+        onClick: function onClick() {
+          return _onClickCheckout(c, viewHandler, index, basket);
+        },
+        children: [/*#__PURE__*/jsx(Icon, {
+          cheoutButton: c
+        }), c.label && /*#__PURE__*/jsx("div", {
+          children: t(c.label)
+        })]
+      }, index);
+    })
+  });
+};
+var _onClickCheckout = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(buttonConfig, viewHandler, index, basket, dontCheckForModal) {
+    var _viewHandler$actions2, _viewHandler$actions5;
+    var returnTo, _viewHandler$actions, _viewHandler$getI18nI, _buttonConfig$openMod, _viewHandler$getI18nI2, _viewHandler$actions3, _buttonConfig$event, _viewHandler$divaWebP, _viewHandler$divaWebP2, result, savedBasket, _viewHandler$actions4, _viewHandler$getI18nI3, _viewHandler$getI18nI4;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          returnTo = buttonConfig.returnTo; //open modal first to ask if sure
+          if (!(buttonConfig.openModal && !dontCheckForModal)) {
+            _context.next = 4;
+            break;
+          }
+          (_viewHandler$actions = viewHandler.actions) === null || _viewHandler$actions === void 0 || _viewHandler$actions.openModal(_objectSpread(_objectSpread({}, buttonConfig.openModal), {}, {
+            text: (_viewHandler$getI18nI = viewHandler.getI18nInstance()) === null || _viewHandler$getI18nI === void 0 ? void 0 : _viewHandler$getI18nI.t((_buttonConfig$openMod = buttonConfig.openModal.text) !== null && _buttonConfig$openMod !== void 0 ? _buttonConfig$openMod : ''),
+            title: (_viewHandler$getI18nI2 = viewHandler.getI18nInstance()) === null || _viewHandler$getI18nI2 === void 0 ? void 0 : _viewHandler$getI18nI2.t(buttonConfig.openModal.title),
+            callback: function callback(accept) {
+              if (accept) _onClickCheckout(buttonConfig, viewHandler, index, basket, true);
+            }
+          }));
+          return _context.abrupt("return");
+        case 4:
+          LOG.businessEvent('onPlannerCheckoutAction', 'Planner', "Eine Checkout Action wurde geklickt", {
+            checkoutType: buttonConfig.type,
+            checkoutEvent: buttonConfig.event
+          });
+          (_viewHandler$actions2 = viewHandler.actions) === null || _viewHandler$actions2 === void 0 || _viewHandler$actions2.closeModal();
+
+          //check if it is reset usecase
+          if (!(buttonConfig.event == 'RESET')) {
+            _context.next = 9;
+            break;
+          }
+          viewHandler.productState.onClickReset();
+          return _context.abrupt("return");
+        case 9:
+          if (!(buttonConfig.type == 'EVENT' && buttonConfig.onlyCallEvent)) {
+            _context.next = 12;
+            break;
+          }
+          (_viewHandler$actions3 = viewHandler.actions) === null || _viewHandler$actions3 === void 0 || _viewHandler$actions3.onEvent({
+            type: (_buttonConfig$event = buttonConfig.event) !== null && _buttonConfig$event !== void 0 ? _buttonConfig$event : ''
+          });
+          return _context.abrupt("return");
+        case 12:
+          if (!((!basket || returnTo && basket.ReturnTo !== returnTo) && buttonConfig.type !== 'SAVE')) {
+            _context.next = 18;
+            break;
+          }
+          _context.next = 15;
+          return (_viewHandler$divaWebP = (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner).onClickAddToBasket) === null || _viewHandler$divaWebP === void 0 ? void 0 : _viewHandler$divaWebP.call(_viewHandler$divaWebP2, buttonConfig.event, true, returnTo, true);
+        case 15:
+          result = _context.sent;
+          if (result) {
+            _context.next = 18;
+            break;
+          }
+          return _context.abrupt("return");
+        case 18:
+          savedBasket = viewHandler.divaWebPlanner.getBasket(); //open PDF
+          if (!(buttonConfig.returnTo == 'OPEN_PDF')) {
+            _context.next = 22;
+            break;
+          }
+          if (!basket) (_viewHandler$actions4 = viewHandler.actions) === null || _viewHandler$actions4 === void 0 || _viewHandler$actions4.openModal({
+            text: (_viewHandler$getI18nI3 = viewHandler.getI18nInstance()) === null || _viewHandler$getI18nI3 === void 0 ? void 0 : _viewHandler$getI18nI3.t('modal.open_leaflet_pdf_now'),
+            accept: (_viewHandler$getI18nI4 = viewHandler.getI18nInstance()) === null || _viewHandler$getI18nI4 === void 0 ? void 0 : _viewHandler$getI18nI4.t('modals.open_now'),
+            callback: function callback() {
+              window.open(savedBasket.PDFDocumentURL, '_blank');
+            }
+          });
+          return _context.abrupt("return");
+        case 22:
+          if (!(buttonConfig.type == 'EVENT')) {
+            _context.next = 24;
+            break;
+          }
+          return _context.abrupt("return");
+        case 24:
+          (_viewHandler$actions5 = viewHandler.actions) === null || _viewHandler$actions5 === void 0 || _viewHandler$actions5.openModal({
+            accept: false,
+            rejectByIcon: true,
+            title: /*#__PURE__*/jsx(Header, {
+              config: viewHandler.uiState.config.viewConfig.checkout,
+              index: index,
+              goBack: function goBack() {
+                return _goBack2(viewHandler, savedBasket);
+              }
+            }),
+            content: /*#__PURE__*/jsx(Checkout, {
+              index: index,
+              basket: savedBasket,
+              viewHandler: viewHandler,
+              inModal: true
+            }),
+            dontRenderForm: true
+          });
+        case 25:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function onClickCheckout(_x, _x2, _x3, _x4, _x5) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var _goBack2 = function _goBack(viewHandler, basket) {
+  var _viewHandler$actions6;
+  (_viewHandler$actions6 = viewHandler.actions) === null || _viewHandler$actions6 === void 0 || _viewHandler$actions6.openModal({
+    accept: false,
+    rejectByIcon: true,
+    title: /*#__PURE__*/jsx(Header, {
+      config: viewHandler.uiState.config.viewConfig.checkout,
+      index: undefined,
+      goBack: function goBack() {
+        return _goBack2(viewHandler, basket);
+      }
+    }),
+    content: /*#__PURE__*/jsx(Checkout, {
+      inModal: true,
+      basket: basket,
+      viewHandler: viewHandler
+    }),
+    dontRenderForm: true
+  });
+};
+
+export { Checkout as default, _goBack2 as goBack, _onClickCheckout as onClickCheckout };