@hhgtech/hhg-components 1.19.0-beta-4 → 1.19.0-beta-6

package/raw/components/organisms/navigationLayout/navigationLogoutPopup/index.styled.tsx

@@ -0,0 +1,87 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export 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: ${(props: ThemeProps) => props.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: ${(props: ThemeProps) => props.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;
+    }
+  }
+`
+type StyledButtonGroupProps = {
+  siteType: 'helloSites' | 'marryBaby'
+}
+export const StyledButtonGroup = styled.div<StyledButtonGroupProps>`
+  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;
+        }
+      `
+      : ''}
+`

package/raw/components/organisms/navigationLayout/navigationLogoutPopup/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { useEffect } from 'react'
+
+import { Button } from 'components/atoms/button'
+import { Popup } from 'components/molecules/popup'
+
+import { CloseLightIcon } from '../assets'
+import { useTranslation } from '../utils'
+import { StyledPopup, StyledButtonGroup } from './index.styled'
+
+type Props = {
+  // locale: LocaleType
+  callPostLogOutApi: () => void
+  openLogoutPopup: boolean
+  onCloseHandler: () => void
+  onLogoutHandler: () => void
+  basePath: string
+  siteType: 'helloSites' | 'marryBaby'
+}
+
+const NavigationLogoutPopup = ({
+  callPostLogOutApi,
+  openLogoutPopup,
+  onCloseHandler,
+  onLogoutHandler,
+  basePath,
+  siteType = 'helloSites',
+}: Props) => {
+  const f = useTranslation()
+
+  useEffect(() => {
+    document.body.classList.toggle('noscroll', openLogoutPopup)
+  }, [openLogoutPopup])
+
+  const logout = () => {
+    ;(async () => {
+      await callPostLogOutApi?.()
+      onLogoutHandler?.()
+      window.location.reload()
+    })()
+  }
+
+  return (
+    <Popup
+      type="confirm"
+      isOpen={openLogoutPopup}
+      closeIcon={
+        <img
+          src={CloseLightIcon}
+          style={{ width: 24, height: 24 }}
+          alt="close-icon"
+        />
+      }
+      onClose={onCloseHandler}
+    >
+      <StyledPopup>
+        {siteType === 'helloSites' && (
+          <img
+            className="cancle-img"
+            src={`${basePath}/images/arrowDoor.svg`}
+            alt="close-account"
+          />
+        )}
+        <h2>
+          {f(
+            siteType === 'helloSites'
+              ? 'logout.popup.ask1'
+              : 'logout.popup.ask.mb',
+          )}
+        </h2>
+        <p>{f('logout.popup.ask2')}</p>
+        <StyledButtonGroup siteType={siteType}>
+          <Button
+            className="logout-button"
+            color="tertiary"
+            size="lg"
+            onClick={logout}
+          >
+            {f('logout.popup.button.logout')}
+          </Button>
+          <Button
+            className="cancel-button"
+            color="primary"
+            size="lg"
+            onClick={onCloseHandler}
+          >
+            {f('logout.popup.button.cancel')}
+          </Button>
+        </StyledButtonGroup>
+      </StyledPopup>
+    </Popup>
+  )
+}
+
+export { NavigationLogoutPopup }

package/raw/components/organisms/navigationLayout/profilePopup/index.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+
+import { TranslationsProvider } from 'i18n/translationsProvider'
+import { LocaleType } from 'interfaces/types'
+
+import { UserProfileNavigation } from '../../userProfileNavigation'
+import { Popup } from '../profilePopupWrapper'
+import { UserInfo } from '../types'
+
+export type Props = {
+  SSO_URL?: string
+  UP_BASEPATH?: string
+  isOpen: boolean
+  locale: LocaleType
+  targetAvatar?: string
+  userInfo?: UserInfo
+  ENABLE_COMMUNITY_PROFILE_MENU_LOCALES: LocaleType[]
+  ENABLE_CARE_PROFILE_MENU_LOCALES: LocaleType[]
+  closePopup: () => void
+  dispatchLogout: () => void
+  userProfileRouterPush?: (s: string) => void
+  siteType: 'marryBaby' | 'helloSites'
+  isUserProfileNavigatorMenuHidden?: boolean
+  isMyHealthEnabled?: boolean
+  togetherApiDomain?: string
+}
+
+const ProfilePopup = ({
+  SSO_URL,
+  UP_BASEPATH,
+  isOpen,
+  locale,
+  targetAvatar,
+  userInfo,
+  ENABLE_CARE_PROFILE_MENU_LOCALES,
+  ENABLE_COMMUNITY_PROFILE_MENU_LOCALES,
+  closePopup,
+  siteType = 'helloSites',
+  dispatchLogout,
+  userProfileRouterPush,
+  isUserProfileNavigatorMenuHidden,
+  isMyHealthEnabled = false,
+  togetherApiDomain,
+}: Props) => {
+  const push = (link: string) => {
+    if (userProfileRouterPush) {
+      userProfileRouterPush(`/${link}`)
+    } else if (SSO_URL) {
+      window.location.href = `${SSO_URL}${UP_BASEPATH}/${link}`
+    }
+  }
+
+  const handleClickOnMenu = (link: string) => {
+    push(link)
+    closePopup()
+  }
+
+  const handleClickMyProfileButton = () => {
+    push('profile')
+    closePopup()
+  }
+
+  const handleClickLogout = () => {
+    if (dispatchLogout) {
+      dispatchLogout()
+      closePopup()
+    }
+  }
+
+  return (
+    <Popup
+      isOpen={isOpen}
+      type="profile"
+      enableAnimation={false}
+      targetAvatar={targetAvatar}
+      onClose={closePopup}
+    >
+      <TranslationsProvider locale={locale}>
+        <UserProfileNavigation
+          SSO_URL={SSO_URL}
+          UP_BASEPATH={UP_BASEPATH}
+          themeName={siteType}
+          userInfo={userInfo}
+          ENABLE_COMMUNITY_PROFILE_MENU_LOCALES={
+            ENABLE_COMMUNITY_PROFILE_MENU_LOCALES
+          }
+          ENABLE_CARE_PROFILE_MENU_LOCALES={ENABLE_CARE_PROFILE_MENU_LOCALES}
+          onClickLogout={handleClickLogout}
+          onClickMenuItem={handleClickOnMenu}
+          onClickNavigationCard={handleClickOnMenu}
+          onClickMyProfileButton={handleClickMyProfileButton}
+          userProfileRouterPush={userProfileRouterPush}
+          isUserProfileNavigatorMenuHidden={isUserProfileNavigatorMenuHidden}
+          isMyHealthEnabled={isMyHealthEnabled}
+          togetherApiDomain={togetherApiDomain}
+        />
+      </TranslationsProvider>
+    </Popup>
+  )
+}
+
+export { ProfilePopup }

package/raw/components/organisms/navigationLayout/profilePopupWrapper/index.styled.tsx

@@ -0,0 +1,164 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledPopup = styled.div`
+  position: absolute;
+  right: 0;
+  background-color: ${(props: ThemeProps) => props.theme.colors.white};
+
+  &[data-animation='true'] {
+    transition: all 0.5s ease-in-out;
+  }
+
+  &[data-open='true'] {
+    z-index: 200;
+    top: 120%;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &[data-open='false'] {
+    display: none;
+  }
+
+  &[data-type='lead'] {
+    width: 332px;
+    height: 460px;
+
+    div {
+      top: -15px;
+      right: -15px;
+    }
+  }
+
+  &[data-type='welcome'] {
+    position: fixed;
+    ${MediaQueries.mbDown} {
+      width: 100%;
+      height: 424px;
+      bottom: 0;
+      top: unset;
+    }
+    ${MediaQueries.mbUp} {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      min-height: 445px;
+      max-width: 407px;
+    }
+  }
+
+  &[data-type='due-date'] {
+    position: fixed;
+    ${MediaQueries.mbDown} {
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+      bottom: 0;
+      top: unset;
+    }
+    ${MediaQueries.mbUp} {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100vw;
+      height: 55vw;
+      max-height: 598px;
+      max-width: 1080px;
+    }
+  }
+
+  .popup-content {
+    z-index: 111;
+    height: 100%;
+  }
+
+  &[data-type='form'] {
+    width: 496px;
+    height: 548px;
+  }
+
+  &[data-type='confirm'] {
+    width: 380px;
+    height: 252px;
+  }
+
+  &[data-type='profile'] {
+    /* min-height: 415px; */
+    ${MediaQueries.mbUp} {
+      border-radius: 6px;
+      box-shadow: 0px 4px 8px
+        ${(props: ThemeProps) => props.theme.colors.gray200};
+      &:before {
+        position: absolute;
+        right: 11px;
+        bottom: 100%;
+        width: 0;
+        height: 0;
+        border: 0.5rem solid transparent;
+        border-top: none;
+        border-bottom-color: #fff;
+        content: '';
+        filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
+      }
+    }
+    ${MediaQueries.mbDown} {
+      position: fixed;
+      left: 0;
+      top: 64px;
+      width: 100%;
+    }
+    ${MediaQueries.mbUp} {
+      width: 368px;
+    }
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+`
+
+export const StyledPopupWrapper = styled.div`
+  position: fixed;
+  z-index: 150;
+  top: 69px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+
+  ${MediaQueries.mbUp} {
+    background-color: transparent;
+    &[data-type='welcome'] {
+      background: rgba(38, 38, 38, 0.3);
+    }
+    &[data-type='due-date'] {
+      background: rgba(38, 38, 38, 0.3);
+    }
+  }
+
+  ${MediaQueries.mbDown} {
+    background: rgba(38, 38, 38, 0.3);
+  }
+
+  &[data-type='welcome'] {
+    top: 0;
+  }
+
+  &[data-open='false'] {
+    display: none;
+  }
+`

package/raw/components/organisms/navigationLayout/profilePopupWrapper/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { StyledPopup, StyledPopupWrapper } from './index.styled'
+
+export type Props = {
+  type: 'lead' | 'form' | 'confirm' | 'profile' | 'welcome' | 'due-date'
+  closeIcon?: JSX.Element
+  onClose?: () => void
+  isOpen?: boolean
+  children?: any
+  enableAnimation?: boolean
+  targetAvatar?: string
+  id?: string
+  className?: string
+}
+
+const Popup = ({
+  type = 'lead',
+  closeIcon,
+  isOpen = true,
+  onClose,
+  children,
+  enableAnimation = true,
+  targetAvatar,
+  id,
+  className,
+}: Props) => {
+  return (
+    <>
+      <StyledPopup
+        data-open={isOpen}
+        data-type={type}
+        data-animation={enableAnimation}
+        data-target={targetAvatar}
+        id={id}
+        className={className}
+      >
+        <div className="popup-content">
+          {!!closeIcon && (
+            <div className="close-button" onClick={onClose}>
+              {closeIcon}
+            </div>
+          )}
+          {children}
+        </div>
+      </StyledPopup>
+      <StyledPopupWrapper
+        data-type={type}
+        data-open={isOpen}
+        onClick={onClose}
+        id={id ? `wrapper-${id}` : undefined}
+        className={`${className || ''}-wrapper`}
+      />
+    </>
+  )
+}
+
+export { Popup }

package/raw/components/organisms/navigationLayout/siteWide/index.styled.tsx

@@ -0,0 +1,116 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledSiteWideContainer = styled.div`
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  background-position: center;
+  background-size: cover;
+  transition: height 0.3s;
+  background-color: ${(props: ThemeProps) => props.theme.colors.secondaryBase};
+
+  &[data-is-marrybaby='true'] {
+    background-color: ${(props: ThemeProps) => props.theme.mbColors.cobalt};
+  }
+
+  &[data-is-mobile='true'] {
+    &[data-is-marrybaby='false'] {
+      justify-content: flex-start;
+    }
+  }
+  &[data-is-mobile='false'] {
+    justify-content: center;
+  }
+
+  &[data-is-collapse='false'] {
+    height: 64px;
+    &[data-is-marrybaby='true'] {
+      &[data-is-mobile='true'] {
+        height: 120px;
+      }
+    }
+  }
+  &[data-is-collapse='true'] {
+    height: 0;
+  }
+
+  .amp-close-banner * {
+    pointer-events: none;
+  }
+
+  .content {
+    display: -webkit-box;
+    overflow: hidden;
+    padding-right: 48px;
+    -webkit-box-orient: vertical;
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+    -webkit-line-clamp: 2;
+    line-height: 24px;
+    text-overflow: ellipsis;
+    a {
+      color: white;
+    }
+    &[data-is-mobile='true'] {
+      font-size: 14px;
+    }
+  }
+`
+
+export const StyledIcon = styled.div`
+  max-width: 100px;
+  margin-right: 16px;
+  height: 100%;
+  img {
+    width: 64px;
+    height: 64px;
+    object-fit: contain;
+  }
+  &[data-is-marrybaby='true'] {
+    height: unset;
+    max-height: 100%;
+  }
+  &[data-is-mobile='true'] {
+    img {
+      width: 52px;
+      height: 52px;
+    }
+  }
+`
+
+export const StyledCloseIconWrapper = styled.div`
+  position: absolute;
+  right: 20px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  &[data-is-marrybaby='true'] {
+    background-color: ${(props: ThemeProps) => props.theme.colors.white};
+    border-radius: 50%;
+    top: 12px;
+    right: 32px;
+    padding: 10px;
+    height: 40px;
+    width: 40px;
+    .close-icon {
+      width: 20px;
+      height: 20px;
+    }
+    &[data-is-mobile='true'] {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      padding: 8px;
+      height: 32px;
+      width: 32px;
+      .close-icon {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+`