@crystaldesign/diva-web-planner-react 25.4.0-beta.3 → 25.4.0-beta.30

package/build/esm/index-13892626.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-273b10aa.js';
+import { getLogger, useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import CreateAppointment from './index-ee181ed9.js';
+import { w as wrapper, i as inModalClass, b as button, a as inverted } from './index.module-498a463d.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import Share from './index-5977f6f5.js';
+import Save from './index-344294c0.js';
+import _typeof from '@babel/runtime/helpers/typeof';
+import { flatten } from 'flat';
+import Header from './index-53726249.js';
+import Icon from './index-7326be3f.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-2b62291e.js';
+import './index.module-af50b1be.js';
+import './index-3906f607.js';
+import 'qrcode.react';
+import './index-5c17855d.js';
+import './index-1bb2277d.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 };

package/build/esm/index-1510669b.js

@@ -0,0 +1,168 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.js';
+import { observer } from 'mobx-react-lite';
+import { getLogger, useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { useRef, useState, useEffect } from 'react';
+import { ContentItemComponent } from '@crystaldesign/content-item';
+import Draggable from 'react-draggable';
+import classnames from 'classnames';
+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/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 wrapper = "wrapper-epfZs";
+var header = "header-GXHlA";
+var handle = "handle-wTliC";
+var closeIcon = "close-icon-L0FOF";
+var mobile = "mobile-3mXgj";
+var css_248z = ".wrapper-epfZs {\n  z-index: 1000;\n  position: absolute;\n  display: flex;\n  background: white;\n  width: 450px;\n  flex-direction: column;\n\n  color: #4f4f4f;\n  font-size: 15px;\n  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25098);\n  border-radius: 5px;\n  top: 0;\n  margin: 4px;\n}\n\n.header-GXHlA {\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  position: absolute;\n  z-index: 1100;\n}\n\n.handle-wTliC {\n  cursor: move;\n  flex-grow: 1;\n}\n\n.close-icon-L0FOF {\n  padding: 12px;\n  z-index: 1002;\n  width: -moz-max-content;\n  width: max-content;\n  width: 36px;\n  height: 36px;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 28%;\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.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 100ms ease-in;\n  cursor: pointer;\n}\n\n.close-icon-L0FOF:hover {\n  background-size: 36%;\n  cursor: pointer;\n}\n\n.mobile-3mXgj {\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var LOG = getLogger('Planner', 'InfoBox');
+var ContentItemWrapper = function ContentItemWrapper(_ref) {
+  var _viewHandler$productS;
+  var id = _ref.id,
+    _ref$startPos = _ref.startPos,
+    startPos = _ref$startPos === void 0 ? 'left' : _ref$startPos,
+    noWrapper = _ref.noWrapper;
+  var _useDivaCore = useDivaCore(),
+    contentItemHandler = _useDivaCore.handler.contentItemHandler,
+    _useDivaCore$actions = _useDivaCore.actions,
+    openSideMenu = _useDivaCore$actions.openSideMenu,
+    closeSideMenu = _useDivaCore$actions.closeSideMenu;
+  var _useTranslation = useTranslation(),
+    language = _useTranslation.i18n.language;
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  useEffect(function () {
+    if (!id) return;
+    loadData();
+  }, [id]);
+  var loadData = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _infoBoxTitle$;
+      var data, infoBoxTitle;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return contentItemHandler.getContentItem(id, language);
+          case 2:
+            data = _context.sent;
+            infoBoxTitle = data.content.filter(function (item) {
+              return item.type === 'Title' && item.text;
+            }).map(function (item) {
+              return item.text;
+            });
+            LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+              id: data._id,
+              title: (_infoBoxTitle$ = infoBoxTitle[0]) !== null && _infoBoxTitle$ !== void 0 ? _infoBoxTitle$ : undefined
+            });
+            setData(data);
+            if (viewHandler.getIsInMobileView()) {
+              openSideMenu({
+                side: 'left',
+                onClose: function onClose() {
+                  viewHandler.settingsState.setContentItemId();
+                  closeSideMenu();
+                },
+                open: true,
+                content: /*#__PURE__*/jsx("div", {
+                  className: classnames(mobile),
+                  children: /*#__PURE__*/jsx(ContentItemComponent, {
+                    settings: {
+                      contentItems: data.content,
+                      wrapperStyle: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%'
+                      }
+                    }
+                  })
+                })
+              });
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function loadData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (id === undefined) setData(undefined);
+  }, [id]);
+  if (!data) return /*#__PURE__*/jsx(Fragment, {});
+  if (viewHandler.getIsInMobileView()) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  if (noWrapper) {
+    return /*#__PURE__*/jsx(ContentItemComponent, {
+      settings: {
+        contentItems: data.content,
+        wrapperStyle: {
+          display: 'flex',
+          flexDirection: 'column',
+          maxHeight: 'inherit'
+        }
+      }
+    });
+  }
+  var parentSizes = (_viewHandler$productS = viewHandler.productState.productElement) === null || _viewHandler$productS === void 0 ? void 0 : _viewHandler$productS.getBoundingClientRect();
+  return /*#__PURE__*/jsx(Draggable, {
+    nodeRef: draggable,
+    handle: ".handle",
+    bounds: "parent",
+    defaultPosition: startPos == 'right' ? {
+      x: parentSizes !== null && parentSizes !== void 0 && parentSizes.width ? (parentSizes === null || parentSizes === void 0 ? void 0 : parentSizes.width) - 508 : 0,
+      y: 0
+    } : undefined,
+    children: /*#__PURE__*/jsxs("div", {
+      ref: draggable,
+      className: wrapper,
+      style: {
+        maxHeight: parentSizes !== null && parentSizes !== void 0 && parentSizes.height && parentSizes.height < 700 + 20 ? (parentSizes === null || parentSizes === void 0 ? void 0 : parentSizes.height) - 20 : 700
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: header,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames('handle', handle)
+        }), /*#__PURE__*/jsx("div", {
+          className: closeIcon,
+          onClick: function onClick() {
+            return viewHandler.settingsState.setContentItemId();
+          }
+        })]
+      }), /*#__PURE__*/jsx(ContentItemComponent, {
+        settings: {
+          contentItems: data.content,
+          wrapperStyle: {
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: 'inherit'
+          }
+        }
+      })]
+    })
+  });
+};
+var ContentItemWrapper$1 = observer(ContentItemWrapper);
+
+export { ContentItemWrapper$1 as default };

package/build/esm/index-15236a9e.js

@@ -0,0 +1,100 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.js';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { useState, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
+import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
+import SettingsHeader from './index-0b9c6dcf.js';
+import classnames from 'classnames';
+import Search from './index-de869a6a.js';
+import { jsxs, Fragment, 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/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 pdpOverlay = "pdp-overlay-2gWQq";
+var navigationVisible = "navigation-visible-goqGH";
+var pdpBackground = "pdp-background-1tl-9";
+var pdpContainer = "pdp-container-EljBO";
+var isMobileClass = "is-mobile-class-eOYXj";
+var closeButton = "close-button-tHReC";
+var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  position: relative;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n\n.close-button-tHReC {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n  z-index: 100;\n}\n.close-button-tHReC:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n";
+styleInject(css_248z);
+
+var ProductList = function ProductList(_ref) {
+  var _viewHandler$settings, _viewHandler$getViewC;
+  var item = _ref.item;
+  var _useDivaCore = useDivaCore();
+    _useDivaCore.actions.openComponent;
+    var _useDivaCore$state = _useDivaCore.state,
+    HeaderElement = _useDivaCore$state.headerInfos.HeaderElement,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    height = _useDivaCore$state$di.height,
+    isPortrait = _useDivaCore$state$di.isPortrait,
+    organization = _useDivaCore$state.organization;
+  var _useTranslation = useTranslation();
+    _useTranslation.t;
+  var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
+  var currentlyMobile = isMobile && isPortrait || height < 500;
+  var viewHandler = useViewHandler();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentProductId = _useState2[0],
+    setCurrentProductId = _useState2[1];
+  var productState = useProductState({
+    parameters: {
+      'customFlags.variantsList.organizations': organization._id
+    },
+    sort: '{-created}',
+    scroller: (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : undefined
+  });
+  var closePDP = useCallback(function () {
+    setCurrentProductId(undefined);
+  }, []);
+  var openPDP = useCallback(function (_ref2) {
+    var _id = _ref2._id;
+    setCurrentProductId(_id);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: false,
+      isSettingsHeader: true,
+      item: item,
+      specialElement1: /*#__PURE__*/jsx(Search, {
+        searchState: productState.search
+      })
+    }), viewHandler.settingsState.settingsScrollerElement && /*#__PURE__*/jsx(ProductsComponent, {
+      productState: productState,
+      onClickFunction: openPDP
+    }), currentProductId && /*#__PURE__*/jsxs("div", {
+      className: classnames(pdpOverlay, currentlyMobile ? isMobileClass : undefined, !!portalHeaderHeight ? navigationVisible : undefined),
+      children: [!currentlyMobile && /*#__PURE__*/jsx("div", {
+        onClick: closePDP,
+        className: pdpBackground
+      }), /*#__PURE__*/jsxs("div", {
+        className: pdpContainer,
+        children: [/*#__PURE__*/jsx("div", {
+          onClick: closePDP,
+          className: closeButton
+        }), /*#__PURE__*/jsx(ProductDetailPageComponent, {
+          settings: (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.productDetailPageConfig,
+          productId: currentProductId
+        })]
+      })]
+    })]
+  });
+};
+var index = observer(ProductList);
+
+export { index as default };

package/build/esm/index-15601524.js

@@ -0,0 +1,43 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-273b10aa.js';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import { jsx, Fragment } 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 'mobx-react-lite';
+
+var checkoutButtonOne = "checkout-button-one-qwQE0";
+var checkoutButtonTwo = "checkout-button-two-PbR3L";
+var checkoutButtonThree = "checkout-button-three-oLcWo";
+var css_248z = ".checkout-button-one-qwQE0 {\n  background-color: #0e2e5b;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 enable-background%3D%22new 0 0 24 24%22 height%3D%2224px%22 viewBox%3D%220 0 24 24%22 width%3D%2224px%22 fill%3D%22%23FFFFFF%22%3E%3Cg%3E%3Cpath d%3D%22M0%2C0h24v24H0V0z%22 fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpolygon points%3D%226.23%2C20.23 8%2C22 18%2C12 8%2C2 6.23%2C3.77 14.46%2C12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  padding-left: 20px;\n  text-align: left;\n  background-position: 97% 50%;\n  background-size: 30px;\n  border-radius: 0;\n  border-radius: initial;\n}\n.checkout-button-two-PbR3L {\n  background-color: #f6a000;\n  background-repeat: no-repeat;\n  text-align: left;\n  padding-left: 20px;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 27.891 24%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1 %7B        fill%3A %23fff%3B      %7D    %3C%2Fstyle%3E  %3C%2Fdefs%3E  %3Cg id%3D%22Gruppe_1481%22 data-name%3D%22Gruppe 1481%22 transform%3D%22translate(-610 -3077)%22%3E    %3Cpath id%3D%22Pfad_1150%22 data-name%3D%22Pfad 1150%22 class%3D%22cls-1%22 d%3D%22M27.734%2C3.881a.755.755%2C0%2C0%2C0-.591-.288H6.467L5.69.562A.743.743%2C0%2C0%2C0%2C4.966%2C0H.748a.748.748%2C0%2C0%2C0%2C0%2C1.5H4.389L8.911%2C19.161a.743.743%2C0%2C0%2C0%2C.723.562h14.1a.748.748%2C0%2C1%2C0%2C0-1.5H10.216l-.7-2.723H24.538a.747.747%2C0%2C0%2C0%2C.723-.567L27.866%2C4.521a.733.733%2C0%2C0%2C0-.132-.64M23.956%2C14H9.136L6.853%2C5.084H26.19Z%22 transform%3D%22translate(610 3077)%22%2F%3E    %3Cpath id%3D%22Pfad_1151%22 data-name%3D%22Pfad 1151%22 class%3D%22cls-1%22 d%3D%22M195.712%2C422.906a1.706%2C1.706%2C0%2C1%2C1-1.706-1.706%2C1.7%2C1.7%2C0%2C0%2C1%2C1.706%2C1.706%22 transform%3D%22translate(427.1 2676.388)%22%2F%3E    %3Cpath id%3D%22Pfad_1152%22 data-name%3D%22Pfad 1152%22 class%3D%22cls-1%22 d%3D%22M416.112%2C422.906a1.706%2C1.706%2C0%2C1%2C1-1.706-1.706%2C1.7%2C1.7%2C0%2C0%2C1%2C1.706%2C1.706%22 transform%3D%22translate(217.473 2676.388)%22%2F%3E  %3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-position: 97% 50%;\n  background-size: 30px;\n  border-radius: 0;\n  border-radius: initial;\n}\n.checkout-button-three-oLcWo {\n  background-color: #00787f;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 27.67 24%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1 %7B        fill%3A %23fff%3B      %7D    %3C%2Fstyle%3E  %3C%2Fdefs%3E  %3Cpath id%3D%22Pfad_1783%22 data-name%3D%22Pfad 1783%22 class%3D%22cls-1%22 d%3D%22M27.509%2C9.046%2C25.048.431A.611.611%2C0%2C0%2C0%2C24.432%2C0H3.2a.741.741%2C0%2C0%2C0-.615.431L.124%2C9.046a3.042%2C3.042%2C0%2C0%2C0%2C.431%2C2.646%2C3.215%2C3.215%2C0%2C0%2C0%2C2.215%2C1.231v9.846A1.234%2C1.234%2C0%2C0%2C0%2C4%2C24H9.54a1.234%2C1.234%2C0%2C0%2C0%2C1.231-1.231V16.615h6.154v6.154A1.234%2C1.234%2C0%2C0%2C0%2C18.155%2C24h5.538a1.234%2C1.234%2C0%2C0%2C0%2C1.231-1.231V12.862a3.215%2C3.215%2C0%2C0%2C0%2C2.215-1.231A2.7%2C2.7%2C0%2C0%2C0%2C27.509%2C9.046Zm-7.754.246h0a1.917%2C1.917%2C0%2C0%2C1-.431%2C1.538%2C2.475%2C2.475%2C0%2C0%2C1-2.031.8%2C3.116%2C3.116%2C0%2C0%2C1-2.215-.862%2C2.235%2C2.235%2C0%2C0%2C1-.677-1.6V1.231h4.185l1.169%2C8Zm-6.523-.062a2.465%2C2.465%2C0%2C0%2C1-.677%2C1.6%2C3.116%2C3.116%2C0%2C0%2C1-2.215.862%2C2.68%2C2.68%2C0%2C0%2C1-2.031-.8%2C1.983%2C1.983%2C0%2C0%2C1-.431-1.538L9.048%2C1.231h4.185ZM1.54%2C10.954a1.658%2C1.658%2C0%2C0%2C1-.185-1.538L3.632%2C1.231H7.755L6.648%2C9.169a3.254%2C3.254%2C0%2C0%2C1-3.323%2C2.523A2.3%2C2.3%2C0%2C0%2C1%2C1.54%2C10.954ZM18.155%2C22.769V16.615a1.234%2C1.234%2C0%2C0%2C0-1.231-1.231H10.771A1.234%2C1.234%2C0%2C0%2C0%2C9.54%2C16.615v6.154H4V12.862A5.066%2C5.066%2C0%2C0%2C0%2C7.078%2C11.2c.123.185.185.308.308.492a3.849%2C3.849%2C0%2C0%2C0%2C2.954%2C1.231%2C4.222%2C4.222%2C0%2C0%2C0%2C3.077-1.231%2C3.518%2C3.518%2C0%2C0%2C0%2C.431-.492%2C3.082%2C3.082%2C0%2C0%2C0%2C.431.492%2C4.325%2C4.325%2C0%2C0%2C0%2C3.077%2C1.231%2C3.849%2C3.849%2C0%2C0%2C0%2C2.954-1.231%2C1.34%2C1.34%2C0%2C0%2C0%2C.308-.492%2C4.777%2C4.777%2C0%2C0%2C0%2C3.077%2C1.662v9.908Zm8-11.815a2.239%2C2.239%2C0%2C0%2C1-1.846.738%2C3.3%2C3.3%2C0%2C0%2C1-3.323-2.523L19.878%2C1.231H24L26.34%2C9.415A1.683%2C1.683%2C0%2C0%2C1%2C26.155%2C10.954Z%22 transform%3D%22translate(-0.004)%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  text-align: left;\n  padding-left: 20px;\n  background-position: 97% 50%;\n  background-size: 30px;\n  border-radius: 0;\n  border-radius: initial;\n}\n";
+styleInject(css_248z);
+
+var index = function index(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.uiState.setBarrierActions([{
+      className: classnames(checkoutButtonOne)
+    }, {
+      className: classnames(checkoutButtonTwo)
+    }, {
+      className: classnames(checkoutButtonThree)
+    }]);
+  }, []);
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+
+export { index as default };