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

package/src/ecom/interfaces/types.ts

@@ -1,194 +0,0 @@
-// You can include shared interfaces/types in a separate file
-// and then use them in any component by importing them. For
-// example, to import the interface below do:
-//
-
-// import User from 'path/to/interfaces';
-
-import { UserRole } from 'interfaces/types'
-
-import {
-  basePath,
-  CARE_BASE_PATH,
-  COMMUNITY_BASE_PATH,
-  HEALTH_TOOLs_BASE_PATH,
-  SSO_USER_BASE_PATH,
-} from './constants'
-
-export type LocaleType =
-  | 'vi-VN'
-  | 'id-ID'
-  | 'ms-MY'
-  | 'km-KH'
-  | 'en-PH'
-  | 'th-TH'
-  | 'my-MM'
-  | 'zh-TW'
-  | 'hi-IN'
-
-export type PushNotificationPayloadType = {
-  message: string
-  type: 'success' | 'danger' | 'info' | 'warning'
-  title?: string
-}
-
-export type LogoType =
-  | 'hellobacsi'
-  | 'hellosehat'
-  | 'hellohealth'
-  | 'hellotogether'
-  | 'hellocare'
-  | 'logomark'
-  | 'hellodoctor'
-  | 'hellokrupet'
-  | 'hellswasthya'
-  | 'hellokhunmor'
-  | 'hellodoktor'
-
-export type CategoriesLayout = 'short' | 'long'
-
-export type CountryInitial =
-  | 'VN'
-  | 'ID'
-  | 'TH'
-  | 'KH'
-  | 'MY'
-  | 'MM'
-  | 'PH'
-  | 'IN'
-  | 'TW'
-
-export type Flag = {
-  country: CountryInitial
-  link: string
-}
-
-export type Role = UserRole | ('branch' | 'facility' | 'doctor')
-
-export type UserInfo = {
-  name?: string
-  phone?: string
-  username?: string
-  avatar?: string
-  email?: string
-  role?: Role
-  phone_verified_at?: string
-  birthday?: string
-  gender?: number
-  id?: number
-  bookmarks?: Array<string | number>
-  coralToken?: {
-    token?: string
-    isTemp?: boolean
-  }
-  total_bookmark?: number
-  first_time_bookmark?: boolean
-  phone_verified?: boolean
-  provider?: string
-  verify_phone_code?: string
-  city_id?: string
-  type_of_pass?: string
-  is_new?: 0 | 1
-  communities_interacted?: 0 | 1
-}
-
-export enum GenderLabel {
-  MALE = 'gender.male',
-  FEMALE = 'gender.female',
-  OTHER = 'gender.other',
-}
-
-export type DesktopMenuPopup =
-  | 'categories'
-  | 'tools'
-  | 'care'
-  | 'communities'
-  | 'profile'
-  | 'none'
-
-export type MobileMenuPopup = 'categories' | 'profile' | 'none'
-
-export type HealthTool = {
-  title: string
-  subtitle: string
-  icon: string
-  link: string
-}
-
-export type UrlSourceType =
-  | 'first_login'
-  | 'welcome_back'
-  | 'comment'
-  | 'care_phone'
-  | 'care_onboarding'
-  | 'new_admin'
-  | 'ecom'
-
-export type UrlPostActionType = 'call' | 'redirect'
-
-export type UrlQueryType = 'source' | 'post_action' | 'params'
-
-export type Coordinate = {
-  lat: number
-  lng: number
-}
-
-/**
- * default props types
- */
-export type ElementDataProps = 'data-event-action' | 'data-event-label'
-
-export type ExtendingDataProps<K> = {
-  [key in K extends string ? K | ElementDataProps : ElementDataProps]?:
-    | string
-    | number
-    | boolean
-    | ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void)
-    | React.CSSProperties
-} & {
-  style?: React.CSSProperties
-}
-
-/**
- * localised slugs
- */
-export type LocalisedSlugsType =
-  | 'PRODUCT'
-  | 'CATEGORY'
-  | 'BRAND'
-  | 'SEARCH'
-  | 'BRANDS'
-  | 'PROFILE'
-  | 'PROFILE_MANAGE_ORDERS'
-  | 'PROFILE_MANAGE_ADDRESS'
-  | 'PROFILE_VOUCHER'
-  | 'PROFILE_MEMBER_CARD'
-  | 'CART'
-  | 'CART_CHECKOUT'
-  | 'PROMOTION'
-  | 'PROMOTION_DETAIL'
-  | 'ORDER_CONFIRMATION'
-
-/**
- * base path type
- */
-export type BasePathType =
-  | typeof basePath
-  | typeof SSO_USER_BASE_PATH
-  | typeof CARE_BASE_PATH
-  | typeof COMMUNITY_BASE_PATH
-  | typeof HEALTH_TOOLs_BASE_PATH
-
-export type SortType = 'price' | 'updated_at'
-export type SortOrder = 'asc' | 'desc'
-
-// xác nhận, đang giao, đã giao, hoàn thành, huỷ
-export type OrderStatus =
-  | 'pending'
-  | 'processing'
-  | 'delivering'
-  | 'complete'
-  | 'canceled'
-
-export const DATE_FORMAT_API = 'yyyy-MM-dd'
-export const DATE_FORMAT = 'dd-MM-yyyy'

package/src/hooks/useCSSFocusPopupHelper.ts

@@ -1,32 +0,0 @@
-import { MouseEvent, useRef } from 'react'
-
-export const useCSSFocusPopupHelper = <
-  T = HTMLDivElement,
-  ButtonType = HTMLDivElement,
->(configs?: {
-  allowBgScroll?: boolean
-}) => {
-  const { allowBgScroll } = configs || {}
-  const ref = useRef<T & HTMLElement>()
-
-  return {
-    containerRef: ref,
-    onContainerFocus: () => {
-      if (!allowBgScroll) document.documentElement.style.overflow = 'hidden'
-    },
-    onContainerBlur: () => {
-      if (!allowBgScroll) document.documentElement.style.overflow = ''
-    },
-    onButtonMouseDown: (e: MouseEvent<ButtonType>) => {
-      // this close popup when click, run after REact init
-      if (
-        document.activeElement === ref.current ||
-        ref.current.contains(document.activeElement)
-      ) {
-        ref.current.blur()
-        e.preventDefault()
-      }
-    },
-    onClose: () => ref.current.blur(),
-  }
-}

package/src/hooks/useDragScroll.ts

@@ -1,55 +0,0 @@
-import { useState, useRef } from 'react'
-
-export const useDragScroll = () => {
-  const [sliding, setSliding] = useState(false)
-  const slider = useRef<HTMLDivElement>(null)
-  const pos = useRef<{
-    left: number
-    x: number
-  } | null>(null)
-  const timeoutRef = useRef<NodeJS.Timeout>()
-
-  const mouseDownHandler = function (e: React.MouseEvent<HTMLDivElement>) {
-    // Change the cursor and prevent user from selecting the text
-    if (slider.current) {
-      timeoutRef.current = setTimeout(() => {
-        setSliding(true)
-      }, 500)
-      pos.current = {
-        left: slider.current.scrollLeft,
-        x: e.clientX,
-      }
-
-      const mouseMoveHandler = function (e: MouseEvent) {
-        // How far the mouse has been moved
-        const currentPos = pos.current
-        if (currentPos) {
-          const dx = e.clientX - currentPos.x
-          // const dy = e.clientY - pos.y;
-
-          // Scroll the element
-          // ele.scrollTop = pos.top - dy;
-          if (slider.current) slider.current.scrollLeft = currentPos.left - dx
-        }
-      }
-      const mouseUpHandler = function () {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current)
-          timeoutRef.current = undefined
-        }
-        setSliding(false)
-        document.removeEventListener('mousemove', mouseMoveHandler)
-        document.removeEventListener('mouseup', mouseUpHandler)
-      }
-      document.addEventListener('mousemove', mouseMoveHandler)
-      document.addEventListener('mouseup', mouseUpHandler)
-    }
-  }
-
-  return {
-    sliding,
-    mouseDownHandler,
-    sliderRef: slider,
-    pos,
-  }
-}

package/src/hooks/useDropdownSearch.tsx

@@ -1,52 +0,0 @@
-import { useMemo } from 'react'
-
-export type SearchOption = {
-  label: JSX.Element | string
-  value: string | number
-  icon?: JSX.Element | string
-}
-
-const normalizeAccents = (str: string) =>
-  str
-    .toLocaleLowerCase()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .replace(/đ/g, 'd')
-
-export function useDropDownSearch<T, K extends keyof T = any>(
-  keyword: string,
-  key: K,
-  options: Array<T>,
-  mapFunction: (item: T) => T & SearchOption,
-) {
-  const normalizedOptions = useMemo(() => {
-    if (!Array.isArray(options)) {
-      return []
-    }
-    return options.map((item) => ({
-      ...item,
-      //@ts-ignore
-      normalized: normalizeAccents(item[key]),
-    }))
-  }, [options])
-
-  const matchingOptions = useMemo(() => {
-    if (!keyword) {
-      return normalizedOptions
-    }
-    return normalizedOptions.filter((s) =>
-      s.normalized.includes(normalizeAccents(keyword)),
-    )
-  }, [normalizedOptions, keyword])
-
-  const normalizedDropdownOptions = useMemo(
-    () => matchingOptions.map(mapFunction),
-    [matchingOptions],
-  )
-
-  return {
-    options: normalizedOptions,
-    matched: matchingOptions,
-    dropDownOptions: normalizedDropdownOptions,
-  }
-}

package/src/hooks/useFbDataLayer.tsx

@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { UserInfo } from 'interfaces/types'
-
-export const useFbDataLayer = (userInfo?: UserInfo | null) => {
-  const [userIp, setUserIp] = useState('')
-  useEffect(() => {
-    fetch('https://api.ipify.org')
-      .then((res) => res.text())
-      .then((ip) => {
-        if (ip) setUserIp(ip)
-        else
-          fetch('https://icanhazip.com')
-            .then((res) => res.text())
-            .then((ip) => {
-              if (ip) setUserIp(ip)
-            })
-      })
-  }, [])
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout> | null = null
-    if (userInfo && userIp) {
-      ;(function waitFbq() {
-        // check for the generic script
-        // easiest check to prevent race condition
-        if (window.fbq) {
-          window.fbq('track', 'FB Conversion', {
-            user_data: [
-              {
-                em: userInfo.email || '',
-                fn: '',
-                ln: '',
-                ph: userInfo.phone || '',
-                client_ip_address: userIp || '',
-              },
-            ],
-          })
-        } else {
-          timeout = setTimeout(waitFbq, 2000)
-        }
-      })()
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout)
-      }
-    }
-  }, [userInfo, userIp])
-}

package/src/hooks/useGeolocation.ts

@@ -1,86 +0,0 @@
-import { useCallback, useMemo, useState } from 'react'
-
-import { USER_GEOLOCATION_COORDINATES_COOKIE } from 'interfaces/constants'
-import { GPSType, GeoLocationPermission } from 'interfaces/types'
-import { getCookie, setCookie, deleteCookie } from 'misc/cookieHelper'
-
-export type UseGeolocationReturn = {
-  geoLocationPermission: GeoLocationPermission
-  geoLocationCoordinates: GPSType | null
-  requestGeoLocation: () => void
-}
-
-export function useGeolocation(): UseGeolocationReturn {
-  const [permission, setPermission] = useState<
-    UseGeolocationReturn['geoLocationPermission']
-  >(() => {
-    if (typeof window === 'undefined') {
-      return 'unset'
-    }
-    if (getCookie(USER_GEOLOCATION_COORDINATES_COOKIE)) {
-      return 'granted'
-    }
-    const blocked =
-      !location.protocol.includes('https') && location.hostname !== 'localhost'
-    if (!navigator.geolocation || blocked) {
-      return 'denied'
-    }
-    return 'unset'
-  })
-
-  const [coordinates, setCoordinates] = useState<
-    UseGeolocationReturn['geoLocationCoordinates']
-  >(() => {
-    if (typeof window === 'undefined') {
-      return null
-    }
-    const cookie = getCookie(USER_GEOLOCATION_COORDINATES_COOKIE)
-    if (cookie) {
-      try {
-        return JSON.parse(cookie)
-      } catch (err) {
-        console.log(err)
-      }
-    }
-    return null
-  })
-
-  const request = useCallback(function request() {
-    // setPermission()
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          const gps: GPSType = {
-            lat: `${
-              Math.round(position.coords.latitude * 10000000) / 10000000
-            }`,
-            lng: `${
-              Math.round(position.coords.longitude * 10000000) / 10000000
-            }`,
-          }
-          setCookie(
-            USER_GEOLOCATION_COORDINATES_COOKIE,
-            JSON.stringify(gps),
-            0,
-            15,
-          )
-          setCoordinates(gps)
-          setPermission('granted')
-        },
-        () => {
-          deleteCookie(USER_GEOLOCATION_COORDINATES_COOKIE)
-          setPermission('denied')
-        },
-      )
-    }
-  }, [])
-
-  return useMemo(
-    () => ({
-      geoLocationPermission: permission,
-      geoLocationCoordinates: coordinates,
-      requestGeoLocation: request,
-    }),
-    [permission, coordinates],
-  )
-}

package/src/hooks/useGetIsMobile.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { useScreenSize } from './useScreenSize'
-
-const useGetIsMobile = (isMobileSsr: boolean) => {
-  const [isMobile, setIsMobile] = useState(isMobileSsr)
-  const { isMobile: isMobileCsr } = useScreenSize()
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setIsMobile(isMobileCsr)
-    } else {
-      setIsMobile(isMobileSsr)
-    }
-  }, [isMobileCsr, isMobileSsr])
-
-  return isMobile
-}
-
-export { useGetIsMobile }

package/src/hooks/useImagesPicker.ts

@@ -1,56 +0,0 @@
-import { ChangeEvent, useMemo, useState } from 'react'
-export const useImagePicker = (
-  imageFilesProp?: (File | string)[],
-  onImageFilesChange?: (f: (File | string)[]) => void,
-) => {
-  const [imageFiles, setImageFiles] = useState<(File | string)[]>(
-    imageFilesProp || [],
-  )
-  const imageSrcs = useMemo(
-    () =>
-      (imageFilesProp || imageFiles).map((file) =>
-        typeof file === 'string' ? file : URL.createObjectURL(file),
-      ),
-    [imageFilesProp, imageFiles],
-  )
-  const onSelectImages = (e: ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files
-    if (files) {
-      if (onImageFilesChange && imageFilesProp) {
-        const _files = imageFilesProp || imageFiles
-        onImageFilesChange(_files.concat(Array.from(files)))
-      } else
-        setImageFiles((imgs) => {
-          const _imgs = imageFilesProp || imgs
-          onImageFilesChange &&
-            onImageFilesChange(_imgs.concat(Array.from(files)))
-          return _imgs.concat(Array.from(files))
-        })
-    }
-  }
-  const onRemoveImage = (index: number) => {
-    if (onImageFilesChange && imageFilesProp) {
-      const _files = imageFilesProp
-      _files.splice(index, 1)
-      onImageFilesChange(_files.slice())
-    } else {
-      setImageFiles((imgs) => {
-        const _imgs = imageFilesProp || imgs
-        _imgs.splice(index, 1)
-        onImageFilesChange && onImageFilesChange(_imgs.slice())
-        return _imgs.slice()
-      })
-    }
-  }
-  const onRemoveAllImages = () => {
-    onImageFilesChange ? onImageFilesChange([]) : setImageFiles([])
-  }
-
-  return {
-    onSelectImages,
-    onRemoveImage,
-    onRemoveAllImages,
-    imageSrcs,
-    imageFiles: imageFilesProp || imageFiles,
-  }
-}

package/src/hooks/useIsInit.ts

@@ -1,9 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export const useIsInit = () => {
-  const [isInit, setIsInit] = useState(true)
-  useEffect(() => {
-    setIsInit(false)
-  }, [])
-  return isInit
-}

package/src/hooks/useOutsideClick.ts

@@ -1,20 +0,0 @@
-import { useCallback, useEffect } from 'react'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useOutsideClick = (ref: any, callback: any) => {
-  const handleClick = useCallback((e: MouseEvent) => {
-    if (ref.current && !ref.current.contains(e.target)) {
-      callback(e.target)
-    }
-  }, [])
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClick)
-
-    return () => {
-      document.removeEventListener('mousedown', handleClick)
-    }
-  })
-}
-
-export { useOutsideClick }

package/src/hooks/useScreenSize.ts

@@ -1,35 +0,0 @@
-import { useState, useEffect } from 'react'
-
-const getIsMobile = () => {
-  return typeof window !== 'undefined' && window.innerWidth < 768
-}
-
-const getIsLargeMobile = () => {
-  return (
-    typeof window !== 'undefined' &&
-    window.innerWidth >= 768 &&
-    window.innerWidth < 1112
-  )
-}
-
-const useScreenSize = () => {
-  const [isMobile, setIsMobile] = useState(getIsMobile())
-  const [isLargeMobile, setIsLargeMobile] = useState(getIsLargeMobile())
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(getIsMobile())
-      setIsLargeMobile(getIsLargeMobile())
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
-  return { isMobile, isLargeMobile }
-}
-
-export { useScreenSize }

package/src/hooks/useScrollbarSize.ts

@@ -1,74 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-import debounce from 'lodash/debounce'
-
-export interface ScrollbarMeasurements {
-  /** Current height of the scrollbar */
-  height: number
-  /** Current width of the scrollbar */
-  width: number
-}
-export const MEASURE_ELEMENT_CLASS = 'measure-scrollbar-size'
-const useScrollbarSize = (trigger = true): ScrollbarMeasurements => {
-  const [dimensions, setDimensions] = useState({ height: 0, width: 0 })
-  const element = useRef<HTMLDivElement | null>(null)
-
-  // initialize resize event handler and state when mounted
-  useEffect(() => {
-    if (!trigger || typeof window === 'undefined') {
-      return
-    }
-    const getElement = () => {
-      if (!element.current) {
-        // element was not created yet -- initialize
-        element.current = document.createElement('div')
-        element.current.classList.add(MEASURE_ELEMENT_CLASS)
-        element.current.style.width = '99px'
-        element.current.style.height = '99px'
-        element.current.style.overflow = 'scroll'
-        element.current.style.position = 'absolute'
-        element.current.style.top = '-9999px'
-        element.current.setAttribute('aria-hidden', 'true')
-        element.current.setAttribute('role', 'presentation')
-      }
-      return element.current
-    }
-
-    const updateState = () => {
-      const {
-        offsetHeight,
-        clientHeight,
-        offsetWidth,
-        clientWidth,
-      } = getElement()
-      const scrollbarHeight = offsetHeight - clientHeight
-      const scrollbarWidth = offsetWidth - clientWidth
-
-      setDimensions((currentDimensions) => {
-        const { height, width } = currentDimensions
-        return height !== scrollbarHeight || width !== scrollbarWidth
-          ? { height: scrollbarHeight, width: scrollbarWidth }
-          : currentDimensions
-      })
-    }
-
-    const handleResize = debounce(updateState, 100)
-
-    // initialize
-    window.addEventListener('resize', handleResize)
-    document.body.appendChild(getElement())
-    updateState()
-
-    const elementToRemove = getElement()
-    // cleanup
-    return () => {
-      handleResize.cancel()
-      window.removeEventListener('resize', handleResize)
-      document.body.removeChild(elementToRemove)
-    }
-  }, [trigger])
-
-  return dimensions
-}
-
-export { useScrollbarSize }