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

package/raw/src/components/organisms/navigationLayout/utils.tsx

@@ -1,424 +0,0 @@
-import React, { createContext, useContext } from 'react'
-
-import { LOCALIZED_SLUGS } from 'care/interfaces/constants'
-import { LocaleType } from 'interfaces/types'
-import formatString from 'string-format'
-
-
-import {
-  CARE_PATHS,
-  DISCOVER_PATHS,
-  domainLocales,
-  MARRY_BABY_PATH,
-  TOGETHER_PATHS,
-} from './constants'
-import { defaultTranslation } from './languages/default'
-// import { defaultTranslation } from './languages/default'
-import {
-  CategoryHealthToolApi,
-  Community,
-  CommunityApi,
-  HealthTool,
-  HealthToolApi,
-  HealthToolByCategory,
-  LocalisedSlugsType,
-  NavContext,
-  SpotlightSummary,
-  SpotlightSummaryApi,
-  TopicApi,
-} from './types'
-
-const BREAK_POINT = 768
-
-export const spLayout = () => {
-  return (style: TemplateStringsArray) =>
-    `@media (max-width: ${BREAK_POINT - 1}px) { ${style} }`
-}
-export const pcLayout = () => {
-  return (style: TemplateStringsArray) =>
-    `@media (min-width: ${BREAK_POINT}px) { ${style} }`
-}
-
-export const NaContext = createContext({} as NavContext)
-
-export const useTranslation = () => {
-  const naContext = useContext(NaContext)
-
-  return (key: string, option?: { [key: string]: any }) => {
-    const translation = naContext.translation || {}
-
-    const translationContent = translation[key] || defaultTranslation[key]
-
-    return translationContent
-      ? option
-        ? formatString(translationContent, option)
-        : translationContent
-      : (() => {
-          throw Error('missing translation ' + key)
-        })()
-    // key
-  }
-}
-
-export const formatCommunity = (community: CommunityApi): Community => {
-  if (!community) return {} as Community
-
-  return {
-    title: community?.name || '',
-    thumbnail: community?.thumbnail || '',
-    communitySlug: community?.slug || '',
-    communityId: community?.id,
-    color: community?.color,
-  } as Community
-}
-
-export const formatTogetherTopic = (topic: TopicApi): Community => {
-  if (!topic) return {} as Community
-  return {
-    title: topic?.name || '',
-    thumbnail: topic?.thumbnail || '',
-    communitySlug: `${topic?.community?.slug}/${topic?.slug}`,
-    communityId: topic?.id,
-  }
-}
-
-export const formatSponsor = (sponsor: any): any => {
-  if (!sponsor) return {} as any
-
-  return {
-    title: sponsor.title,
-    logo: sponsor.logo,
-    link: sponsor.link,
-  } as any
-}
-
-export const formatReviewedCategory = (data: any): any => {
-  return {
-    postTitle: data.post_title,
-    permalink: data.permalink,
-  }
-}
-
-export const formatFaqsCategory = (data: any): any => {
-  return {
-    title: data.title,
-    content: data.content,
-  }
-}
-
-export const formatCategory = (category: any): any => {
-  if (!category) return {} as any
-
-  return {
-    termId: category.term_id || null,
-    sponsor: category.sponsor ? formatSponsor(category.sponsor) : null,
-    isSponsored: category.is_sponsored || null,
-    categoryName: category.cat_name || category.name || null,
-    name: category.name || null,
-    iconUrl: category.icon || '',
-    slugName: category.category_nicename || null,
-    description: category.description || null,
-    featureImage: category.thumbnail || category.image || null,
-    displayName: category.name || null,
-    parent: category.parent || null,
-    permalink: category.permalink || null,
-    slug: category.slug || null,
-    childCates:
-      category.child_cates?.map((childCate) => {
-        return formatCategory(childCate)
-      }) || [],
-    thumnailColor:
-      category.thumnail_color ||
-      ['#FFEAF1', '#E0E9FB', '#FFF9EB', '#F2FCF7', '#F3F3F3'][
-        (Math.random() * 5) | 0
-      ],
-    colorFeatureImage: category.color_feature_image || null,
-    imageColor: category.image_color || null,
-    textColor: category.text_color || null,
-    catParent: category.cat_parent?.name
-      ? {
-          name: category.cat_parent.name,
-          permalink: category.cat_parent.permalink,
-        }
-      : {},
-    metaTag: category.meta_tag || '',
-    reviewedBy: category.reviewed_by
-      ? formatReviewedCategory(category.reviewed_by)
-      : null,
-    reviewedDate: category.reviewed_date || '',
-    faqs: category.faqs
-      ? category.faqs.map((faq) => formatFaqsCategory(faq))
-      : null,
-  } as any
-}
-
-export const formatHealthTool = (healthTool: HealthToolApi): HealthTool => {
-  if (!healthTool) return {} as HealthTool
-
-  return {
-    icon: healthTool.icon,
-    link:
-      // healthTool.link.startsWith('http')
-      //   ?
-      healthTool.link,
-    // : '/health-tools' + healthTool.link,
-    subtitle: healthTool.subtitle,
-    title: healthTool.title,
-  }
-}
-export const formatHealthToolTypeCategory = (
-  category: CategoryHealthToolApi,
-): HealthToolByCategory => {
-  if (!category) return {} as HealthToolByCategory
-
-  return {
-    termId: category?.term_id || 0,
-    name: category?.name || '',
-    healthTools:
-      category?.health_tools?.map((tool: HealthTool) =>
-        formatHealthTool(tool),
-      ) ?? [],
-  }
-}
-
-export const getCareDefaultSpecialtiesApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl =
-    apiDomain || 'https://service-health-care.hellohealthgroup.com/'
-  return (
-    apiUrl +
-    formatString(CARE_PATHS.SPECIALTIES, {
-      ...params,
-      domain: domainLocales[locale],
-    })
-  )
-}
-
-export const getDiscoverDefaultCategoriesApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://wp.${domainLocales[locale]}/`
-  return (
-    apiUrl +
-    'wp-json/api/' +
-    formatString(DISCOVER_PATHS.CATEGORIES, { ...params })
-  )
-}
-
-export const getDiscoverDefaultHealthToolsApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://wp.${domainLocales[locale]}/`
-  return (
-    apiUrl +
-    'wp-json/api/' +
-    formatString(DISCOVER_PATHS.HEALTH_TOOLS, { ...params })
-  )
-}
-export const getDiscoverDefaultHealthToolsByCategoryApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://wp.${domainLocales[locale]}/`
-  return (
-    apiUrl +
-    'wp-json/api/' +
-    formatString(DISCOVER_PATHS.HEALTH_TOOLS_BY_CATEGORY, { ...params })
-  )
-}
-
-export const getDiscoverDefaultSpotlightsApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://wp.${domainLocales[locale]}/`
-  return (
-    apiUrl +
-    'wp-json/api/' +
-    formatString(DISCOVER_PATHS.SPOTLIGHTS, {
-      ...params,
-    })
-  )
-}
-
-export const getDiscoverDefaultFooterApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://wp.${domainLocales[locale]}/`
-  return (
-    apiUrl +
-    'wp-json/api/' +
-    formatString(DISCOVER_PATHS.FOOTER, {
-      ...params,
-    })
-  )
-}
-
-export const getTogetherDefaultCommunitiesApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://together.hellohealthgroup.com/`
-  return (
-    apiUrl +
-    'api/v1/' +
-    formatString(TOGETHER_PATHS.COMMUNITIES, {
-      ...params,
-      websiteUrl: `https://${domainLocales[locale]}`,
-    })
-  )
-}
-
-export const getTogetherUserPostsApiPath = (
-  locale: LocaleType,
-  isMarryBaby: boolean,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://together.hellohealthgroup.com/`
-  return (
-    apiUrl +
-    'api/v1/' +
-    formatString(TOGETHER_PATHS.GET_USER_POSTS, {
-      ...params,
-      websiteUrl: isMarryBaby
-        ? 'https://marrybaby.vn'
-        : `https://${domainLocales[locale]}`,
-    })
-  )
-}
-
-export const getTogetherMarryBabyCommunitiesApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://together.hellohealthgroup.com/`
-  return (
-    apiUrl +
-    'api/v1/' +
-    formatString(TOGETHER_PATHS.COMMUNITIES, {
-      ...params,
-      websiteUrl: `https://marrybaby.vn`,
-    })
-  )
-}
-
-export const getTogetherDefaultCommunitiesSubMenuApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://together.hellohealthgroup.com/`
-  return (
-    apiUrl +
-    'api/v1/' +
-    formatString(TOGETHER_PATHS.MENU_TOPIC, {
-      ...params,
-      websiteUrl: `https://${domainLocales[locale]}`,
-    })
-  )
-}
-
-export const getTogetherMarryBabyCommunitiesSubMenuApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://together.hellohealthgroup.com/`
-  return (
-    apiUrl +
-    'api/v1/' +
-    formatString(TOGETHER_PATHS.MENU_TOPIC, {
-      ...params,
-      websiteUrl: `https://marrybaby.vn`,
-    })
-  )
-}
-
-export const getMarryBabyDefaultFooterApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://staging.marrybaby.vn/`
-  return (
-    apiUrl +
-    'wp-json/api/' +
-    formatString(MARRY_BABY_PATH.FOOTER, {
-      ...params,
-    })
-  )
-}
-
-export const getMarryBabyDefaultHealthToolsApiPath = (
-  locale: LocaleType,
-  apiDomain?: string,
-  params?: { [key: string]: string | number },
-) => {
-  const apiUrl = apiDomain || `https://staging.marrybaby.vn/`
-  return (
-    apiUrl +
-    'wp-json/api/' +
-    formatString(MARRY_BABY_PATH.HEALTH_TOOLS, {
-      ...params,
-    })
-  )
-}
-
-export const getCareSearchUrl = ({
-  type,
-  specialtySlug,
-  locale,
-}: {
-  type: LocalisedSlugsType
-  cityId?: string | number
-  specialtySlug: string
-  locale: LocaleType
-}) => {
-  return `/${LOCALIZED_SLUGS[locale].ALL}/${
-    LOCALIZED_SLUGS[locale]?.[type] || 'doctor'
-  }/${specialtySlug ?? ''}`
-}
-
-export const formatSpotlightsList = (
-  spotlight: SpotlightSummaryApi,
-): SpotlightSummary => {
-  if (!spotlight) return {} as SpotlightSummary
-
-  return {
-    id: spotlight.ID,
-    name: spotlight.name,
-    permalink: spotlight.permalink,
-    image: spotlight?.small_banner || spotlight?.image || '',
-    imageMedium: spotlight?.image_medium || null,
-    imageThumbnail: spotlight?.image_thumbnail || null,
-    startDate: spotlight?.start_date,
-    endDate: spotlight?.end_date,
-  }
-}
-
-export const checkAvailableSpotlight = (spotlight: SpotlightSummary) => {
-  const today = new Date()
-  if (spotlight?.startDate) {
-    const startDate = new Date(spotlight.startDate)
-    if (today.getTime() < startDate.getTime()) return false
-  }
-  if (spotlight?.endDate) {
-    const endDate = new Date(spotlight.endDate)
-    if (today.getTime() > endDate.getTime()) return false
-  }
-  return true
-}

package/raw/src/components/organisms/navigationLogoutPopup/index.stories.tsx

@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { NavigationLogoutPopup, Props } from '.'
-import { Button } from '../../atoms'
-
-export default {
-  component: NavigationLogoutPopup,
-  title: 'Organisms/NavigationLogoutPopup',
-}
-
-const Template: Story<Props> = (args) => {
-  const [isOpen, setIsOpen] = useState(false)
-  return (
-    <>
-      <Button size="md" onClick={() => setIsOpen(true)}>
-        Logout
-      </Button>
-      <NavigationLogoutPopup
-        {...args}
-        openLogoutPopup={isOpen}
-        onCloseHandler={() => setIsOpen(false)}
-      />
-    </>
-  )
-}
-
-export const Normal = Template.bind({})
-
-Normal.args = {
-  basePath: '/',
-  siteType: 'helloSites',
-}

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

@@ -1,87 +0,0 @@
-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/src/components/organisms/navigationLogoutPopup/index.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { useEffect } from 'react'
-
-import { ArrowDoorIcon, CloseLightIcon } from 'assets/svg'
-import { Button } from 'components/atoms/button'
-import { Popup } from 'components/molecules/popup'
-import { useTranslations } from 'src/hooks/useTranslations'
-
-import { StyledPopup, StyledButtonGroup } from './index.styled'
-
-export type Props = {
-  openLogoutPopup: boolean
-  onCloseHandler: () => void
-  onLogoutHandler: () => void
-  siteType: 'helloSites' | 'marryBaby'
-}
-
-const NavigationLogoutPopup = ({
-  openLogoutPopup,
-  onCloseHandler,
-  onLogoutHandler,
-  siteType = 'helloSites',
-}: Props) => {
-  const { t } = useTranslations()
-
-  useEffect(() => {
-    document.body.classList.toggle('noscroll', openLogoutPopup)
-  }, [openLogoutPopup])
-
-  return (
-    <Popup
-      type="confirm"
-      isOpen={openLogoutPopup}
-      closeIcon={
-        <img
-          src={CloseLightIcon}
-          style={{ width: 24, height: 24 }}
-          alt="close-icon"
-        />
-      }
-      onClose={onCloseHandler}
-    >
-      <StyledPopup>
-        {siteType === 'helloSites' && (
-          <img src={ArrowDoorIcon} className="cancle-img" alt="close-account" />
-        )}
-        <h2>
-          {t(
-            siteType === 'helloSites'
-              ? 'logout.popup.ask1'
-              : 'logout.popup.ask.mb',
-          )}
-        </h2>
-        <p>{t('logout.popup.ask2')}</p>
-        <StyledButtonGroup siteType={siteType}>
-          <Button
-            className="logout-button"
-            color="tertiary"
-            size="lg"
-            onClick={onLogoutHandler}
-          >
-            {t('logout.popup.button.logout')}
-          </Button>
-          <Button
-            className="cancel-button"
-            color="primary"
-            size="lg"
-            onClick={onCloseHandler}
-          >
-            {t('logout.popup.button.cancel')}
-          </Button>
-        </StyledButtonGroup>
-      </StyledPopup>
-    </Popup>
-  )
-}
-
-export { NavigationLogoutPopup }

package/raw/src/components/organisms/navigationProfileButton/index.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-
-import { NavigationProfileButton, Props } from '.'
-
-export default {
-  component: NavigationProfileButton,
-  title: 'Organisms/NavigationProfileButton',
-}
-
-const Template: Story<Props> = (args) => <NavigationProfileButton {...args} />
-
-const defaultProps = {
-  siteType: 'helloSites',
-  userInfo: {
-    name: 'Lorem Ipsum',
-    username: 'Lorem Ipsum',
-    avatar: '',
-    email: 'loremipsum@gmail.com',
-    role: 'User',
-    id: 1,
-    bookmarks: [],
-    total_bookmark: 0,
-  },
-  isAmp: false,
-  goToLogin: () => false,
-  SSO_URL: '/',
-  locale: 'vi-VN',
-  currentUrl: '/',
-  isMinifyLogin: true,
-
-  ENABLE_CARE_PROFILE_MENU_LOCALES: ['vi-VN'],
-  ENABLE_COMMUNITY_PROFILE_MENU_LOCALES: ['vi-VN'],
-  ENABLE_ECOM_PROFILE_MENU_LOCALES: ['vi-VN'],
-  isUserProfileNavigatorMenuHidden: false,
-  isMyHealthEnabled: true,
-  UP_BASEPATH: '/',
-  togetherApiDomain: '/',
-  dispatchLogout: () => false,
-}
-
-export const LoggedIn = Template.bind({})
-LoggedIn.args = {
-  ...defaultProps,
-}
-export const LoggedOut = Template.bind({})
-LoggedOut.args = {
-  ...defaultProps,
-  userInfo: undefined,
-}