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

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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,110 @@
+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;
+  }
+`