@hhgtech/hhg-components/build/navigationLogoutPopup.js

Hello Health Group common components

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var core = require('@mantine/core');
var index$3 = require('./index-7eca4986.js');
var index$1 = require('./index-2b50e942.js');
var index = require('./index-e9201988.js');
var index$2 = require('./index-034cefcd.js');
var styled = require('@emotion/styled');
var utils = require('./utils-8e23afe2.js');
var miscTheme = require('./miscTheme.js');
require('./tslib.es6-5033cbef.js');
require('./index-f3a410ea.js');
require('./shared-a2f1ce7d.js');
require('./text-af5ab4c9.js');
require('./translationsContext-a73ceb20.js');
require('./constantsDomainLocales.js');
require('./Locale-ad67764b.js');
require('./constantsIsProduction.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledPopup = styled__default["default"].div `
  background-color: white;
  text-align: center;
  .cancle-img {
    margin-top: 24px;
    ${utils.MediaQueries.mbDown} {
      width: 80px;
      height: 80px;
    }

    ${utils.MediaQueries.mbUp} {
      width: 100px;
      height: 100px;
    }
  }

  h2 {
    margin-top: 32px;
    color: ${miscTheme.theme.colors.gray800};
    font-style: normal;
    font-weight: bold;
    ${utils.MediaQueries.mbDown} {
      font-size: 24px;
      line-height: 32px;
    }

    ${utils.MediaQueries.mbUp} {
      font-size: 32px;
      line-height: 42px;
    }
  }

  p {
    margin-top: 8px;
    color: ${miscTheme.theme.colors.gray600};
    font-style: normal;
    font-weight: normal;
    ${utils.MediaQueries.mbDown} {
      font-size: 16px;
      line-height: 24px;
    }

    ${utils.MediaQueries.mbUp} {
      font-size: 16px;
      line-height: 24px;
    }
  }
`;
const StyledButtonGroup = styled__default["default"].div `
  display: flex;

  ${utils.MediaQueries.mbDown} {
    margin-top: 24px;
  }

  ${utils.MediaQueries.mbUp} {
    margin-top: 32px;
  }
  justify-content: space-around;
  button {
    flex: 1;
    margin: 4px;
  }

  ${(props) => props.siteType === 'marryBaby'
    ? `
        .cancel-button {
            background-color: #E55C8A;
        }
        .cancel-button:hover {
          background-color: #E55C8A !important;
        }
        .logout-button {
            border-color: #E55C8A;
            color: #E55C8A;
        }
      `
    : ''}
`;

const NavigationLogoutPopup = ({ openLogoutPopup, onCloseHandler, onLogoutHandler, siteType = 'helloSites', }) => {
    const { t } = index.useTranslations();
    React.useEffect(() => {
        document.body.classList.toggle('noscroll', openLogoutPopup);
    }, [openLogoutPopup]);
    return (React__default["default"].createElement(core.Portal, null,
        React__default["default"].createElement(index$1.Popup, { type: "confirm", isOpen: openLogoutPopup, closeIcon: React__default["default"].createElement("img", { src: index$2.CommonGAssets.getAssetPath('closeLight.svg'), style: { width: 24, height: 24 }, alt: "close-icon", loading: "lazy" }), onClose: onCloseHandler },
            React__default["default"].createElement(StyledPopup, null,
                siteType === 'helloSites' && (React__default["default"].createElement("img", { src: index$2.CommonGAssets.getAssetPath('arrowDoor.svg'), className: "cancle-img", alt: "close-account", loading: "lazy" })),
                React__default["default"].createElement("h2", null, t(siteType === 'helloSites'
                    ? 'logout.popup.ask1'
                    : 'logout.popup.ask.mb')),
                React__default["default"].createElement("p", null, t('logout.popup.ask2')),
                React__default["default"].createElement(StyledButtonGroup, { siteType: siteType },
                    React__default["default"].createElement(index$3.Button, { className: "logout-button", color: "tertiary", size: "lg", onClick: onLogoutHandler }, t('logout.popup.button.logout')),
                    React__default["default"].createElement(index$3.Button, { className: "cancel-button", color: "primary", size: "lg", onClick: onCloseHandler }, t('logout.popup.button.cancel')))))));
};

exports.NavigationLogoutPopup = NavigationLogoutPopup;