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

package/raw/ecom/interfaces/types.ts

@@ -0,0 +1,194 @@
+// 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/raw/hooks/useCSSFocusPopupHelper.ts

@@ -0,0 +1,32 @@
+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/raw/hooks/useDragScroll.ts

@@ -0,0 +1,55 @@
+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/raw/hooks/useDropdownSearch.tsx

@@ -0,0 +1,52 @@
+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/raw/hooks/useFbDataLayer.tsx

@@ -0,0 +1,49 @@
+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/raw/hooks/useGeolocation.ts

@@ -0,0 +1,86 @@
+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/raw/hooks/useGetIsMobile.ts

@@ -0,0 +1,20 @@
+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/raw/hooks/useImagesPicker.ts

@@ -0,0 +1,56 @@
+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/raw/hooks/useIsInit.ts

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

package/raw/hooks/useOutsideClick.ts

@@ -0,0 +1,20 @@
+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/raw/hooks/useScreenSize.ts

@@ -0,0 +1,35 @@
+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/raw/hooks/useScrollbarSize.ts

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