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

Hello Health Group common components

import React__default, { useEffect } from 'react';
import { Portal } from '@mantine/core';
import { B as Button } from './index-67429eb2.js';
import { P as Popup } from './index-953963c1.js';
import { u as useTranslations } from './index-09d9e570.js';
import { C as CommonGAssets } from './index-7adf994c.js';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-538169b3.js';
import { theme } from './miscTheme.js';
import './tslib.es6-00ab44b2.js';
import './index-2d25b0f0.js';
import './shared-b07d1eb2.js';
import './index-17c85f76.js';
import './translationsContext-18f7b7e0.js';
import './constantsDomainLocales.js';
import './Locale-dc1237b9.js';
import './constantsIsProduction.js';

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

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

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

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

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

    ${MediaQueries.mbUp} {
      font-size: 16px;
      line-height: 24px;
    }
  }
`;
const StyledButtonGroup = styled.div `
  display: flex;

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

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

export { NavigationLogoutPopup };