import { s as styleInject, u as useViewHandler, _ as _onClickCheckout } from './index-bbdfb97a.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 };
