@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/components/organisms/userProfileNavigation/navHeader/index.styled.ts

@@ -1,76 +0,0 @@
-import { Avatar } from 'components/atoms'
-import styled from 'styled-components'
-
-import chevronRightIcon from '../assets/helloSites/icon-chevronRight.svg'
-import arrowRightIcon from '../assets/marryBaby/icon-arrowRight.svg'
-
-const chevronRightIconBg = `url("${chevronRightIcon}")`
-const arrowRightIconBg = `url("${arrowRightIcon}")`
-
-export const StyledNavHeader = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`
-
-export const StyledNavAvatar = styled(Avatar)`
-  flex-shrink: 0;
-`
-
-export const StyledNavHeaderUserInfos = styled.div`
-  flex-grow: 0;
-  margin-left: 12px;
-`
-
-export const StyledNavHeaderUserName = styled.div`
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  color: ${(props) => props.theme.colors.text_black};
-  font-weight: 700;
-  -webkit-line-clamp: 1;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  [data-theme='helloSites'] & {
-    font-size: 16px;
-    font-weight: 600;
-  }
-  [data-theme='marryBaby'] & {
-    font-size: 14px;
-    font-weight: 600;
-  }
-`
-
-export const StyledNavHeaderMyProfileButton = styled.div`
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  padding-top: 0;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: normal;
-  [data-theme='helloSites'] & {
-    padding-right: 15px;
-    background-image: ${chevronRightIconBg};
-    background-position: right 5px;
-    background-size: 5px 8px;
-    color: ${(props) => props.theme.colors.gray600};
-  }
-  [data-theme='marryBaby'] & {
-    padding-right: 25px;
-    margin-top: 2px;
-    background-image: ${arrowRightIconBg};
-    background-position: right -2px;
-    background-size: 20px 20px;
-    color: ${(props) => props.theme.mbColors.midGray};
-    font-weight: 600;
-  }
-`
-
-export const StyledNavHeaderMenuItems = styled.div`
-  display: flex;
-  flex: 1;
-  justify-content: flex-end;
-`

package/src/components/organisms/userProfileNavigation/navHeader/index.tsx

@@ -1,68 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { UserInfo } from 'components/organisms/navigationLayout/types'
-import { useTranslations } from 'hooks/useTranslations'
-import { theme } from 'misc/theme'
-
-import { UserProfileTheme } from '../types'
-import {
-  StyledNavHeaderMyProfileButton,
-  StyledNavHeader,
-  StyledNavHeaderUserInfos,
-  StyledNavHeaderUserName,
-  StyledNavAvatar,
-} from './index.styled'
-
-export type NavHeaderProps = {
-  userInfo?: UserInfo
-  userDisplayName?: string
-  onClickMyProfileButton?: () => void
-  themeName?: UserProfileTheme
-}
-
-export function NavHeader({
-  userInfo,
-  onClickMyProfileButton,
-  themeName = 'helloSites',
-}: NavHeaderProps) {
-  const { t } = useTranslations()
-
-  const nameFirstLetter = useMemo(() => {
-    const name = userInfo?.name || userInfo?.username
-    if (name && name.length) {
-      return name[0].toUpperCase()
-    }
-    return 'A'
-  }, [userInfo?.username, userInfo?.name])
-
-  const handleClickMyProfileButton = () => {
-    if (onClickMyProfileButton) {
-      onClickMyProfileButton()
-    }
-  }
-
-  return (
-    <StyledNavHeader onClick={handleClickMyProfileButton}>
-      <StyledNavAvatar
-        type="rounded"
-        size="xl"
-        avatarUrl={userInfo?.avatar}
-        firstLetter={nameFirstLetter}
-        backgroundColor={
-          themeName === 'marryBaby'
-            ? theme.mbColors.pink
-            : theme.colors.secondaryBase
-        }
-      />
-      <StyledNavHeaderUserInfos>
-        <StyledNavHeaderUserName>
-          {userInfo?.name || userInfo?.username}
-        </StyledNavHeaderUserName>
-
-        <StyledNavHeaderMyProfileButton>
-          {t('userProfile.nav.header.viewProfile')}
-        </StyledNavHeaderMyProfileButton>
-      </StyledNavHeaderUserInfos>
-    </StyledNavHeader>
-  )
-}

package/src/components/organisms/userProfileNavigation/navMenu/index.styled.ts

@@ -1,115 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import iconDropdown from '../assets/helloSites/icon-chevronDown.svg'
-
-const iconDropdownBg = `url("${iconDropdown}")`
-
-export const StyledNavMenu = styled.div`
-  user-select: none;
-  overflow: hidden;
-  font-size: 14px;
-  color: ${({ theme }) => theme.colors.gray800};
-  [data-theme='helloSites'] & {
-    padding: 8px 0;
-    background-color: ${({ theme }) => theme.colors.neutral50};
-  }
-  margin: 0 -16px;
-`
-
-type StyledNavMenuItemProps = {
-  hasSubmenu: boolean
-}
-
-export const StyledNavMenuItem = styled.div<StyledNavMenuItemProps>`
-  background-color: white;
-  border: 1px solid transparent;
-  transition: margin 0.3 linear;
-  cursor: pointer;
-
-  ${(props) =>
-    props.hasSubmenu &&
-    css`
-      cursor: pointer;
-    `}
-
-  margin-top: 0;
-  transition: margin 200ms;
-
-  &[data-is-open='true'] {
-    & > div:first-child {
-      border-bottom-color: ${({ theme }) => theme.colors.neutral100};
-    }
-    & + div {
-      margin-top: 8px;
-    }
-    & + .nav-menu-item {
-      border-top-color: transparent;
-    }
-  }
-
-  [data-theme='helloSites'] & {
-    & + .nav-menu-item {
-      border-top-color: ${({ theme }) => theme.colors.neutral100};
-    }
-  }
-
-  [data-theme='marryBaby'] & {
-    & + .nav-menu-item::before {
-      content: '';
-      display: block;
-      height: 1px;
-      background-color: ${({ theme }) => theme.mbColors.lightGray};
-      margin: 0 50px;
-    }
-  }
-
-  .nav-menu-item {
-    padding-left: 33px;
-  }
-`
-
-export const StyledNavMenuItemContent = styled.div`
-  display: flex;
-  align-items: center;
-  height: 48px;
-  padding: 0 18px;
-  border: 1px solid transparent;
-  transition: border-color 300ms;
-`
-
-export const StyledNavMenuItemIcon = styled.div`
-  width: 20px;
-  height: 20px;
-  margin-right: 14px;
-  background-repeat: no-repeat;
-  background-position: center;
-`
-
-export const StyledNavMenuItemDropdown = styled.div`
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  &::after {
-    content: '';
-    display: block;
-    width: 12px;
-    height: 10px;
-    background-image: ${iconDropdownBg};
-    background-repeat: no-repeat;
-    background-position: center;
-    [data-is-open='true'] & {
-      transform: rotate(-180deg);
-    }
-  }
-`
-
-export const StyledNavFooterSubMenu = styled.div`
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.3s ease-out;
-
-  [data-is-open='true'] & {
-    max-height: 100px;
-    transition-timing-function: ease-in;
-  }
-`

package/src/components/organisms/userProfileNavigation/navMenu/index.tsx

@@ -1,79 +0,0 @@
-import React, { useMemo, useState } from 'react'
-
-import { useTranslations } from 'hooks/useTranslations'
-
-import { LocaleType } from '../../navigationLayout/types'
-import { UserProfileNavMenuItem, UserProfileTheme } from '../types'
-import {
-  StyledNavMenu,
-  StyledNavMenuItem,
-  StyledNavMenuItemContent,
-  StyledNavMenuItemDropdown,
-  StyledNavMenuItemIcon,
-  StyledNavFooterSubMenu,
-} from './index.styled'
-import { navMenuItemsHelloSites, navMenuItemsMarryBaby } from './items'
-
-export type NavMenuProps = {
-  themeName: UserProfileTheme
-  locale: LocaleType
-  onClickItem?: (item: UserProfileNavMenuItem) => void
-}
-
-export const NavMenu = ({ themeName, locale, onClickItem }: NavMenuProps) => {
-  const [isOpen, setIsOpen] = useState('')
-  const { t } = useTranslations()
-
-  const navMenuItems = useMemo(
-    () =>
-      themeName === 'marryBaby'
-        ? navMenuItemsMarryBaby
-        : navMenuItemsHelloSites,
-    [themeName],
-  )
-
-  function handleParentItemClick(item: UserProfileNavMenuItem) {
-    if (item.subMenu) {
-      setIsOpen((k) => {
-        if (k) {
-          return ''
-        }
-        return item.key
-      })
-    } else if (onClickItem) {
-      onClickItem(item)
-    }
-  }
-
-  function renderItem(item: UserProfileNavMenuItem) {
-    if (item.disableLocale?.includes(locale)) {
-      return null
-    }
-
-    return (
-      <StyledNavMenuItem
-        className="nav-menu-item"
-        data-is-open={isOpen === item.key}
-        key={item.key}
-        hasSubmenu={!!item.subMenu}
-      >
-        <StyledNavMenuItemContent onClick={() => handleParentItemClick(item)}>
-          {item.icon && (
-            <StyledNavMenuItemIcon
-              style={{ backgroundImage: `url("${item.icon}")` }}
-            />
-          )}
-          {t(item.key)}
-          {item.subMenu && <StyledNavMenuItemDropdown />}
-        </StyledNavMenuItemContent>
-        {item.subMenu && (
-          <StyledNavFooterSubMenu>
-            {item.subMenu.map(renderItem)}
-          </StyledNavFooterSubMenu>
-        )}
-      </StyledNavMenuItem>
-    )
-  }
-
-  return <StyledNavMenu>{navMenuItems.map(renderItem)}</StyledNavMenu>
-}

package/src/components/organisms/userProfileNavigation/navMenu/items.ts

@@ -1,38 +0,0 @@
-import iconHelp from '../assets/helloSites/icon-helpCircle.svg'
-import iconSettings from '../assets/helloSites/icon-settingsWheel.svg'
-import iconLock from '../assets/marryBaby/icon-lock.svg'
-import iconLogout from '../assets/marryBaby/icon-logOut.svg'
-import { UserProfileNavMenuItem } from '../types'
-
-export const navMenuItemsHelloSites: UserProfileNavMenuItem[] = [
-  {
-    key: 'userProfile.nav.menu.accountSettings',
-    icon: iconSettings,
-    subMenu: [
-      { key: 'userProfile.nav.menu.password', link: 'password' },
-      {
-        key: 'userProfile.nav.menu.disableAccount',
-        link: 'disable-account',
-        disableLocale: ['hi-IN'],
-      },
-    ],
-  },
-  {
-    key: 'userProfile.nav.menu.help',
-    icon: iconHelp,
-    link: 'help',
-  },
-]
-
-export const navMenuItemsMarryBaby: UserProfileNavMenuItem[] = [
-  {
-    key: 'userProfile.nav.menu.password',
-    icon: iconLock,
-    link: 'password',
-  },
-  {
-    key: 'userProfile.nav.menu.logout',
-    icon: iconLogout,
-    link: 'logout',
-  },
-]

package/src/components/organisms/userProfileNavigation/navigationCard/index.styled.ts

@@ -1,51 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledNavigationCard = styled.div`
-  cursor: pointer;
-  [data-theme='helloSites'] & {
-    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.04),
-      0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
-    border-radius: 6px;
-    padding: 12px 16px;
-  }
-  [data-theme='marryBaby'] & {
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
-    min-width: 80px;
-    height: 100px;
-    border-radius: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-`
-
-export const StyledNavigationCardLabel = styled.h3`
-  white-space: nowrap;
-  [data-theme='helloSites'] & {
-    font-size: 14px;
-    color: ${({ theme }) => theme.colors.gray800};
-    margin-top: 6px;
-  }
-  [data-theme='marryBaby'] & {
-    font-size: 12px;
-    color: ${({ theme }) => theme.colors.text_default};
-    margin-top: 8px;
-  }
-`
-
-export const StyledNavigationCardIconWrapper = styled.div`
-  background-repeat: no-repeat;
-  [data-theme='helloSites'] & {
-    height: 28px;
-  }
-  [data-theme='marryBaby'] & {
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-position: center;
-  }
-`

package/src/components/organisms/userProfileNavigation/navigationCard/index.tsx

@@ -1,96 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { useTranslations } from 'hooks/useTranslations'
-import { TranslationsKey } from 'i18n/translations'
-import { theme } from 'misc/theme'
-
-import iconEComHelloSites from '../assets/helloSites/icon-eCom.svg'
-import iconMyBookingHelloSites from '../assets/helloSites/icon-myBooking.svg'
-import iconMyCommunityHelloSites from '../assets/helloSites/icon-myCommunity.svg'
-import iconMyFamilyHelloSites from '../assets/helloSites/icon-myFamily.svg'
-import iconMyHealthHelloSites from '../assets/helloSites/icon-myHealth.svg'
-import iconMySavedHelloSites from '../assets/helloSites/icon-mySaved.svg'
-import iconMyCommunityMarryBaby from '../assets/marryBaby/icon-myCommunity.svg'
-import iconMyHealthMarryBaby from '../assets/marryBaby/icon-myHealth.svg'
-import iconMySavedMarryBaby from '../assets/marryBaby/icon-mySaved.svg'
-import { IconUrlMap, UserProfileMenuCard, UserProfileTheme } from '../types'
-import {
-  StyledNavigationCard,
-  StyledNavigationCardIconWrapper,
-  StyledNavigationCardLabel,
-} from './index.styled'
-
-export type NavigationCardProps = {
-  type: UserProfileMenuCard
-  themeName: UserProfileTheme
-  onClick?: (type: UserProfileMenuCard) => void
-  className?: string
-}
-
-type IconBgColorMap = {
-  [cardKey in UserProfileMenuCard]?: string
-}
-
-const iconBgColorMap: IconBgColorMap = {
-  myHealth: theme.mbColors.toneYellow,
-  myCommunity: theme.mbColors.toneBlue,
-  mySaved: theme.mbColors.toneGreen,
-}
-
-type CardIconUrlMap = IconUrlMap<UserProfileMenuCard>
-
-const cardIconUrlMap: CardIconUrlMap = {
-  helloSites: {
-    myBooking: iconMyBookingHelloSites,
-    myCommunity: iconMyCommunityHelloSites,
-    myFamily: iconMyFamilyHelloSites,
-    myHealth: iconMyHealthHelloSites,
-    mySaved: iconMySavedHelloSites,
-    eCom: iconEComHelloSites,
-  },
-  marryBaby: {
-    mySaved: iconMySavedMarryBaby,
-    myCommunity: iconMyCommunityMarryBaby,
-    myHealth: iconMyHealthMarryBaby,
-  },
-}
-
-const NavigationCard = ({
-  type,
-  themeName,
-  className,
-  onClick = () => undefined,
-}: NavigationCardProps) => {
-  const { t } = useTranslations()
-
-  const iconUrl = useMemo(() => {
-    return cardIconUrlMap[themeName][type]
-  }, [type, themeName])
-
-  const iconBgColor = useMemo(() => {
-    if (themeName !== 'marryBaby') {
-      return 'transparent'
-    }
-    return iconBgColorMap[type]
-  }, [type, themeName])
-
-  function handleCardClick() {
-    onClick(type)
-  }
-
-  return (
-    <StyledNavigationCard onClick={handleCardClick} className={className}>
-      <StyledNavigationCardIconWrapper
-        style={{
-          backgroundColor: iconBgColor,
-          backgroundImage: `url("${iconUrl}")`,
-        }}
-      />
-      <StyledNavigationCardLabel>
-        {t(`userProfile.nav.card.${type}` as TranslationsKey)}
-      </StyledNavigationCardLabel>
-    </StyledNavigationCard>
-  )
-}
-
-export { NavigationCard }

package/src/components/organisms/userProfileNavigation/types.ts

@@ -1,35 +0,0 @@
-import { TranslationsKey } from 'i18n/translations'
-
-import { LocaleType } from '../navigationLayout/types'
-
-export type UserProfileTheme = 'helloSites' | 'marryBaby'
-
-export type UserProfileRank =
-  | 'member'
-  | 'ambassador'
-  | 'influencer'
-  | 'expert'
-  | 'doctor'
-
-export type UserProfileMenuCard =
-  | 'mySaved'
-  | 'myBooking'
-  | 'myCommunity'
-  | 'myHealth'
-  | 'myFamily'
-  | 'eCom'
-
-export type UserProfileNavMenuItem = {
-  key: TranslationsKey
-  link?: string
-  icon?: string
-  subMenu?: UserProfileNavMenuItem[]
-  disableLocale?: LocaleType[]
-}
-
-export type IconUrlMap<T> = {
-  [t in UserProfileTheme]: {
-    // @ts-ignore
-    [k in T]?: string
-  }
-}

package/src/components/organisms/userProfileNavigation/userStats/index.styled.ts

@@ -1,110 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledUserStats = styled.div`
-  [data-theme='marryBaby'] & {
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
-    border-radius: 8px;
-    overflow: hidden;
-  }
-`
-
-export const StyledWrapper = styled.div`
-  [data-theme='helloSites'] & {
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
-      0px 0px 1px rgba(0, 0, 0, 0.04);
-    border-radius: 6px;
-    overflow: hidden;
-  }
-`
-
-export const StyledHeader = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  font-size: 14px;
-  [data-theme='helloSites'] & {
-    height: 42px;
-  }
-  [data-theme='marryBaby'] & {
-    height: 52px;
-  }
-
-  [data-theme='helloSites'] [data-user-rank='member'] & {
-    color: ${(props) => props.theme.colors.blue600};
-    background-color: ${(props) => props.theme.colors.blue50};
-  }
-  [data-theme='marryBaby'] [data-user-rank='member'] & {
-    color: ${(props) => props.theme.mbColors.blue};
-    background-color: ${(props) => props.theme.mbColors.toneBlue};
-  }
-`
-
-export const StyledHeaderIcon = styled.div`
-  background-repeat: no-repeat;
-  background-position: center;
-  [data-theme='helloSites'] & {
-    height: 18px;
-    width: 18px;
-  }
-  [data-theme='marryBaby'] & {
-    height: 24px;
-    width: 24px;
-  }
-`
-
-export const StyledHeaderTitle = styled.h3`
-  font-size: 14px;
-  [data-theme='helloSites'] & {
-    margin-left: 6px;
-    font-weight: 600;
-  }
-  [data-theme='marryBaby'] & {
-    margin-left: 8px;
-    font-weight: 500;
-  }
-`
-
-export const StyledHeaderPoints = styled.p`
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  font-weight: 600;
-  [data-theme='helloSites'] & {
-    font-size: 14px;
-  }
-  [data-theme='marryBaby'] & {
-    font-size: 12px;
-    color: ${(props) => props.theme.mbColors.gray};
-  }
-`
-
-export const StyledPointsInfos = styled.div`
-  display: flex;
-  font-size: 12px;
-  margin-top: 6px;
-  [data-theme='helloSites'] & {
-    color: ${(props) => props.theme.color.gray500};
-  }
-  [data-theme='marryBaby'] & {
-    color: ${(props) => props.theme.mbColors.midGray};
-  }
-`
-
-export const StyledUserCounterValue = styled.div`
-  .theme--hb & {
-    font-weight: bold;
-    color: ${({ theme }) => theme.colors.gray600};
-  }
-  .theme--mb & {
-    margin-left: 6px;
-  }
-`
-
-export const StyledUserCounterLabel = styled.div`
-  .theme--hb & {
-    color: ${({ theme }) => theme.colors.gray500};
-  }
-  .theme--mb & {
-    margin-left: 3px;
-  }
-`