@crystaldesign/diva-web-planner-react 25.5.0-beta.9 → 25.5.0-rc.0

package/build/esm/index-09e9051e.js

@@ -0,0 +1,314 @@
+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-50519ff7.js';
+import { getLogger, useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import CreateAppointment from './index-0cb85e84.js';
+import { w as wrapper, i as inModalClass, b as button, a as inverted } from './index.module-49f5aab7.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import Share from './index-aa7b234a.js';
+import Save from './index-68195666.js';
+import _typeof from '@babel/runtime/helpers/typeof';
+import { flatten } from 'flat';
+import Header from './index-70a2d7ea.js';
+import Icon from './index-05866f04.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+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 './index-5f1cd827.js';
+import './index-3eb8ba9e.js';
+import './index.module-f9f27b59.js';
+import './index-7cf6bc96.js';
+import 'qrcode.react';
+import './index-ee84d904.js';
+import './index-465f2c36.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 c = viewHandler.uiState.config.viewConfig.checkout;
+  var _useState = useState(basket ? replaceTemplateStrings(c, {
+      basket: basket === null || basket === void 0 ? void 0 : basket.getAsJson(),
+      organization: organization
+    }, i18n.language) : undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    config = _useState2[0],
+    setConfig = _useState2[1];
+  useEffect(function () {
+    setConfig(replaceTemplateStrings(c, {
+      organization: organization,
+      basket: basket
+    }, i18n.language));
+  }, [basket]);
+  var url = config === null || config === void 0 ? void 0 : config.url;
+  var currentConfig = config === null || config === void 0 ? void 0 : 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
+      });
+  }
+  if (!c) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, inModal ? inModalClass : undefined),
+    children: c.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, t);
+        },
+        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, t, dontCheckForModal) {
+    var _viewHandler$actions2, _viewHandler$actions5;
+    var returnTo, _viewHandler$actions, _buttonConfig$openMod, _viewHandler$actions3, _buttonConfig$event, result, savedBasket, _viewHandler$actions4;
+    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: t((_buttonConfig$openMod = buttonConfig.openModal.text) !== null && _buttonConfig$openMod !== void 0 ? _buttonConfig$openMod : ''),
+            title: t(buttonConfig.openModal.title),
+            callback: function callback(accept) {
+              if (accept) _onClickCheckout(buttonConfig, viewHandler, index, t, 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:
+          _context.next = 14;
+          return viewHandler.divaWebPlanner.getCurrentBasket(buttonConfig.event, true, returnTo, true);
+        case 14:
+          result = _context.sent;
+          if (result) {
+            _context.next = 17;
+            break;
+          }
+          return _context.abrupt("return");
+        case 17:
+          savedBasket = viewHandler.divaWebPlanner.getBasket(); //open PDF
+          if (!(buttonConfig.returnTo == 'OPEN_PDF')) {
+            _context.next = 21;
+            break;
+          }
+          (_viewHandler$actions4 = viewHandler.actions) === null || _viewHandler$actions4 === void 0 || _viewHandler$actions4.openModal({
+            text: t('modal.open_leaflet_pdf_now'),
+            accept: t('modals.open_now'),
+            callback: function callback() {
+              window.open(savedBasket.PDFDocumentURL, '_blank');
+            }
+          });
+          return _context.abrupt("return");
+        case 21:
+          if (!(buttonConfig.type == 'EVENT')) {
+            _context.next = 23;
+            break;
+          }
+          return _context.abrupt("return");
+        case 23:
+          (_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 24:
+        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-0cb85e84.js

@@ -0,0 +1,273 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import './index-50519ff7.js';
+import { useState } from 'react';
+import { s as subWrapper, c as scrollWrapper, t as textWrapper, d as boldText, e as icon, f as checkGreen, g as inputWrapper2, h as inputWrapper, j as input, k as errorText, l as checkboxWrapper, m as checkbox, n as text, b as button, a as inverted, o as disabled } from './index.module-49f5aab7.js';
+import classnames from 'classnames';
+import { getLogger, useDivaCore, useTranslation, DivaUtils } from '@crystaldesign/diva-core';
+import AcceptTerms from './index-5f1cd827.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+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';
+
+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 CreateAppointment = function CreateAppointment(_ref) {
+  var basket = _ref.basket,
+    _ref$config = _ref.config,
+    _ref$config$showDSGVO = _ref$config.showDSGVO,
+    showDSGVO = _ref$config$showDSGVO === void 0 ? true : _ref$config$showDSGVO,
+    emailConfig = _ref$config.emailConfig,
+    showSubscription = _ref$config.showSubscription;
+  var _useDivaCore = useDivaCore(),
+    navigationConfiguration = _useDivaCore.state.navigationConfiguration,
+    analyticsHandler = _useDivaCore.handler.analyticsHandler,
+    sendEmail = _useDivaCore.actions.sendEmail;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n,
+    t = _useTranslation.t;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    ableToSend = _useState2[0],
+    setAbleToSend = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showWarningEmail = _useState4[0],
+    setShowWarningEmail = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mail = _useState6[0],
+    setMail = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    name = _useState8[0],
+    setName = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    surName = _useState10[0],
+    setSurName = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    telNumber = _useState12[0],
+    setTelNumber = _useState12[1];
+  var _useState13 = useState(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    note = _useState14[0],
+    setNote = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    checkDSGVO = _useState16[0],
+    setCheckDSGVO = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    checkSubscriptionToNewsletter = _useState18[0],
+    setCheckSubscriptionToNewsletter = _useState18[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    showWarningDSGVO = _useState20[0],
+    setShowWarningDSGVO = _useState20[1];
+  var sendMail = function sendMail() {
+    var returnAfter = false;
+    if (!DivaUtils.validateEmail(mail)) {
+      setAbleToSend(false);
+      setShowWarningEmail(true);
+      returnAfter = true;
+    }
+    if (showDSGVO && !checkDSGVO) {
+      setAbleToSend(false);
+      setShowWarningDSGVO(true);
+      returnAfter = true;
+    }
+    if (returnAfter) return;
+    LOG.businessEvent('onPlannerCreateAppointment', 'Planner', "Es wurde eine Terminanfrage gesendet", {
+      hasAcceptedMarketing: checkSubscriptionToNewsletter
+    });
+    emailConfig === null || emailConfig === void 0 || emailConfig.map(function (c) {
+      return sendEmail({
+        showDialog: false,
+        content: _objectSpread(_objectSpread({}, c), {}, {
+          to: mail,
+          divaNr: basket.DivaNr,
+          type: 'basket',
+          language: i18n.language
+        })
+      });
+    });
+    analyticsHandler.createLead({
+      organizationId: basket.OrganizationId,
+      divaNr: basket.DivaNr,
+      email: mail,
+      firstName: name,
+      lastName: surName,
+      phone: telNumber,
+      message: note,
+      marketingAccepted: checkSubscriptionToNewsletter,
+      type: 'CREATE_APPOINTMENT'
+    });
+  };
+  var onChangeMail = function onChangeMail(input) {
+    var validMail = DivaUtils.validateEmail(input);
+    setAbleToSend(validMail);
+    if (validMail) setShowWarningEmail(false);
+    setMail(input);
+  };
+  var onChangeDSGVO = function onChangeDSGVO(val) {
+    setCheckDSGVO(val);
+    if (val) setShowWarningDSGVO(false);
+    if (!showWarningEmail) setAbleToSend(true);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: subWrapper,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: scrollWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(textWrapper, boldText),
+        children: t('checkout.appointment.advanteges')
+      }), /*#__PURE__*/jsxs("div", {
+        className: textWrapper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(icon, checkGreen)
+        }), t('checkout.appointment.advanteges_one')]
+      }), /*#__PURE__*/jsxs("div", {
+        className: textWrapper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(icon, checkGreen)
+        }), t('checkout.appointment.advanteges_two')]
+      }), /*#__PURE__*/jsxs("div", {
+        className: textWrapper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(icon, checkGreen)
+        }), t('checkout.appointment.advanteges_three')]
+      }), /*#__PURE__*/jsxs("div", {
+        className: inputWrapper2,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: inputWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(boldText),
+            children: t('checkout.save.firstname')
+          }), /*#__PURE__*/jsx("input", {
+            className: input,
+            type: "text",
+            value: name,
+            onChange: function onChange(e) {
+              return setName(e.target.value);
+            }
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: inputWrapper,
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(boldText),
+            children: t('checkout.surname')
+          }), /*#__PURE__*/jsx("input", {
+            className: input,
+            type: "text",
+            value: surName,
+            onChange: function onChange(e) {
+              return setSurName(e.target.value);
+            }
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: inputWrapper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(boldText),
+          children: t('checkout.save.email')
+        }), /*#__PURE__*/jsx("input", {
+          className: input,
+          type: "email",
+          value: mail,
+          onChange: function onChange(e) {
+            return onChangeMail(e.target.value);
+          }
+        }), showWarningEmail && /*#__PURE__*/jsx("div", {
+          className: errorText,
+          children: t('checkout.share_mail.mail_error')
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: inputWrapper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(boldText),
+          children: t('telephoneSwitchBoard')
+        }), /*#__PURE__*/jsx("input", {
+          className: input,
+          type: "text",
+          value: telNumber,
+          onChange: function onChange(e) {
+            return setTelNumber(e.target.value);
+          }
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: inputWrapper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(boldText),
+          children: t('checkout.appointment.note')
+        }), /*#__PURE__*/jsx("textarea", {
+          id: "message",
+          placeholder: t('checkout.appointment.note_placehoder'),
+          style: {
+            height: 100,
+            maxWidth: 350
+          },
+          onChange: function onChange(e) {
+            return setNote(e.target.value);
+          },
+          value: note
+        })]
+      })]
+    }), (!!showSubscription || !!showDSGVO) && /*#__PURE__*/jsxs("div", {
+      className: inputWrapper,
+      children: [!!showDSGVO && /*#__PURE__*/jsxs("div", {
+        className: checkboxWrapper,
+        children: [/*#__PURE__*/jsx("input", {
+          type: "checkbox",
+          className: checkbox,
+          defaultChecked: checkDSGVO,
+          onChange: function onChange(e) {
+            return onChangeDSGVO(e.target.checked);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(text),
+          children: /*#__PURE__*/jsx(AcceptTerms, {
+            agbUrl: navigationConfiguration.tosUrl,
+            privacyUrl: navigationConfiguration.privacyUrl
+          })
+        })]
+      }), !!showSubscription && /*#__PURE__*/jsxs("div", {
+        className: checkboxWrapper,
+        children: [/*#__PURE__*/jsx("input", {
+          type: "checkbox",
+          className: checkbox,
+          defaultChecked: checkSubscriptionToNewsletter,
+          onChange: function onChange(e) {
+            return setCheckSubscriptionToNewsletter(e.target.checked);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(text),
+          children: t('checkout.appointment.subscription')
+        })]
+      }), showWarningDSGVO && /*#__PURE__*/jsx("div", {
+        className: errorText,
+        children: t('checkout.dsgvo_error')
+      })]
+    }), /*#__PURE__*/jsx("button", {
+      className: classnames(button, inverted, !ableToSend ? disabled : undefined),
+      onClick: function onClick() {
+        return sendMail();
+      },
+      children: t('checkout.appointment.create')
+    })]
+  });
+};
+
+export { CreateAppointment as default };

package/build/esm/index-11e9d805.js

@@ -0,0 +1,63 @@
+import { s as styleInject, u as useViewHandler } from './index-50519ff7.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import SettingsHeader from './index-51a087b6.js';
+import SettingsConfigSingle from './index-159951d1.js';
+import SettingsPosNr from './index-cf39bd26.js';
+import classnames from 'classnames';
+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/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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@crystaldesign/widget-contact-form';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-a8e7de72.js';
+import 'react-laag';
+import './index-e5e8d118.js';
+
+var wcConfiguratorSettingsFoldConfSettings = "wcConfigurator-settings-FoldConfSettings-hZych";
+var landscape = "landscape-LFbXM";
+var css_248z = ".wcConfigurator-settings-header-9tt3R .wcConfigurator-settings-header-act-elements-38jiy {\n  max-width: 80%;\n  margin-left: 16px;\n  margin-right: 0px;\n  -webkit-line-clamp: 1;\n  display: -webkit-inline-box;\n  float: left;\n}\n\n.wcConfigurator-settings-FoldConfSettings-hZych {\n  display: block;\n  position: absolute;\n  right: 0px;\n  z-index: 700;\n  width: 16px;\n  height: 32px;\n  padding-top: 9.6px;\n  margin-right: var(--foldArrowMarginRight);\n\n  transition: all 0.35s ease;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2210%22 viewBox%3D%220 0 16 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M14.729 1.25L8.30043 9.25L1.229 1.25%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-position: center center;\n  background-size: contain;\n}\n\n.wcConfigurator-settings-header-9tt3R .wcConfigurator-settings-header-act-elements-38jiy {\n  max-width: 83%;\n  margin-right: 24px;\n  margin-left: 0px;\n  margin-top: 14.4px;\n  -webkit-line-clamp: 1;\n  display: -webkit-inline-box;\n  float: right;\n}\n\n.landscape-LFbXM .wcConfigurator-settings-FoldConfSettings-hZych {\n  display: block;\n  position: absolute;\n  width: 16px;\n  right: 0px;\n  height: 32px;\n  padding-top: 9.6px;\n  margin-right: 16px;\n  transition: all 0.35s ease;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2210%22 viewBox%3D%220 0 16 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M14.729 1.25L8.30043 9.25L1.229 1.25%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-position: center center;\n  background-size: contain;\n  cursor: pointer;\n  z-index: 700;\n}\n";
+styleInject(css_248z);
+
+var SettingsHeaderContainer = function SettingsHeaderContainer(_ref) {
+  var _headerPalette$type, _headerPalette$type2;
+  var _ref$isScroller = _ref.isScroller,
+    isScroller = _ref$isScroller === void 0 ? false : _ref$isScroller;
+  var viewHandler = useViewHandler();
+  var headerPalette = viewHandler.settingsState.itemPalettes.get(1);
+  if (!headerPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var showHeader = viewHandler.uiState.ViewConfig.headerInConfigPalette !== 'Hidden' && !((_headerPalette$type = headerPalette.type) !== null && _headerPalette$type !== void 0 && _headerPalette$type.startsWith('PRODUCTS')) && !((_headerPalette$type2 = headerPalette.type) !== null && _headerPalette$type2 !== void 0 && _headerPalette$type2.startsWith('PROMOTED')) && (!viewHandler.getIsInMobileView() || !viewHandler.uiState.ViewConfig.hideTopHeaderInMobile);
+  return /*#__PURE__*/jsxs("header", {
+    ref: function ref(_ref2) {
+      return viewHandler.settingsState.setHeaderElement(_ref2);
+    },
+    className: classnames(viewHandler.uiState.isMobileLandscape ? landscape : undefined),
+    children: [!viewHandler.uiState.ViewConfig.hideMobileFolder && !viewHandler.uiState.configSettingsIsHidden && viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
+      className: wcConfiguratorSettingsFoldConfSettings,
+      id: "btnFoldDown",
+      onClick: function onClick() {
+        return viewHandler.uiState.onClickHideConfigSettings();
+      }
+    }), showHeader && /*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: isScroller,
+      isSettingsHeader: !headerPalette.isHeader,
+      item: headerPalette,
+      specialElement1: viewHandler.settingsState.doShowActElementInfo && !viewHandler.uiState.ViewConfig.hideElementInfo ? /*#__PURE__*/jsx(SettingsPosNr, {}) : undefined,
+      specialElement2: viewHandler.settingsState.doShowConfigSingle ? /*#__PURE__*/jsx(SettingsConfigSingle, {}) : undefined
+    })]
+  });
+};
+var SettingsHeaderContainer$1 = observer(SettingsHeaderContainer);
+
+export { SettingsHeaderContainer$1 as default };