@crystaldesign/diva-web-planner-react 26.7.0-rc.8 → 26.7.0

package/build/esm/index-6d056da3.js

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

package/build/esm/index-6d6393b4.js

@@ -0,0 +1,85 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-55508962.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var _excluded = ["className"];
+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 buttonBase = {
+  padding: '4px 15px',
+  borderRadius: 6,
+  border: '1px solid #d9d9d9',
+  cursor: 'pointer',
+  fontSize: 14,
+  lineHeight: '22px',
+  background: '#fff',
+  color: 'rgba(0,0,0,0.88)'
+};
+var primaryButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  background: 'var(--primaryColor, #1677ff)',
+  borderColor: 'var(--primaryColor, #1677ff)',
+  color: '#fff'
+});
+var ActionNavigation = function ActionNavigation(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _viewHandler$actionBu = viewHandler.actionButtonState,
+    isOnFirstStep = _viewHandler$actionBu.isOnFirstStep,
+    isOnFirstStepDisabled = _viewHandler$actionBu.isOnFirstStepDisabled,
+    isOnLastStep = _viewHandler$actionBu.isOnLastStep;
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(className),
+    children: /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        gap: 8,
+        flexWrap: 'wrap'
+      },
+      children: [!isOnFirstStep && /*#__PURE__*/jsx("button", {
+        style: buttonBase,
+        onClick: function onClick() {
+          window.lastNavigationType = 'NAVIGATION_STANDARD_BACK_BUTTON';
+          viewHandler.actionButtonState.onClickConfiguratorSettingsBack();
+        },
+        children: t('configurator.Back')
+      }), !isOnLastStep && /*#__PURE__*/jsx("button", {
+        id: "wcConfigurator-action-next",
+        style: _objectSpread(_objectSpread({}, primaryButton), {}, {
+          opacity: isOnFirstStepDisabled ? 0.5 : 1
+        }),
+        disabled: isOnFirstStepDisabled,
+        onClick: function onClick() {
+          window.lastNavigationType = 'NAVIGATION_STANDARD_FORWARD_BUTTON';
+          viewHandler.actionButtonState.onClickConfiguratorSettingsForth();
+        },
+        children: t('configurator.Next')
+      })]
+    })
+  }));
+};
+var index = observer(ActionNavigation);
+
+export { index as default };

package/build/esm/index-71d3327d.js

@@ -0,0 +1,76 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { u as useViewHandler } from './index-55508962.js';
+import { observer } from 'mobx-react-lite';
+import { useCallback } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+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/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var TabGroupItemHorizontal = function TabGroupItemHorizontal(_ref) {
+  var _tabGroupsArray$;
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var allTabGroups = viewHandler.tabGroupState.allTabGroups;
+  var tabGroupsArray = _toConsumableArray(allTabGroups.values());
+  var firstTabKey = (_tabGroupsArray$ = tabGroupsArray[0]) === null || _tabGroupsArray$ === void 0 ? void 0 : _tabGroupsArray$.key;
+  var isFirstItem = firstTabKey === tabGroup.key;
+  var onTabGroupClick = useCallback(function (tg) {
+    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tg.posNr);
+  }, [viewHandler.tabGroupState]);
+  var setTabRef = useCallback(function (key) {
+    return function (el) {
+      if (el) viewHandler.tabGroupState.setTabGroupItems(key, el);
+    };
+  }, [viewHandler.tabGroupState]);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  var activeKey = curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.key;
+  if (!isFirstItem || tabGroupsArray.length === 0) return null;
+  return /*#__PURE__*/jsx("div", {
+    className: "wysiwyg-tab-group-tabs",
+    style: {
+      display: 'flex',
+      gap: 0,
+      borderBottom: '1px solid #d9d9d9'
+    },
+    children: tabGroupsArray.map(function (tg) {
+      return /*#__PURE__*/jsx("button", {
+        ref: setTabRef(tg.key),
+        onClick: function onClick() {
+          return onTabGroupClick(tg);
+        },
+        style: {
+          padding: '8px 16px',
+          border: 'none',
+          borderBottom: tg.key === activeKey ? '2px solid var(--primaryColor, #1677ff)' : '2px solid transparent',
+          background: 'none',
+          cursor: 'pointer',
+          fontWeight: tg.key === activeKey ? 600 : 400,
+          color: tg.key === activeKey ? 'var(--primaryColor, #1677ff)' : 'inherit'
+        },
+        children: t('configurator.' + tg.title, tg.title)
+      }, tg.key);
+    })
+  });
+};
+var index = observer(TabGroupItemHorizontal);
+
+export { index as default };