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

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

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

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

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

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