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

package/src/care/components/organisms/bookingSearchBar/searchInputs/index.styled.ts

@@ -0,0 +1,42 @@
+import { ClearIcon } from 'care/components/atoms/icons'
+import { theme } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledSearchBarInputsWrapper = styled.div`
+  display: flex;
+  gap: 16px;
+  ${MediaQueries.mbDown} {
+    flex-direction: column;
+    padding: 14px;
+    background-color: ${theme.colors.blue50};
+
+    input {
+      filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.04))
+        drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.06))
+        drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
+    }
+  }
+
+  input {
+    background-color: white;
+  }
+`
+
+export const StyledInputWrapper = styled.div`
+  position: relative;
+`
+
+export const StyledInputLocationWrapper = styled(StyledInputWrapper)`
+  flex: 1;
+`
+
+export const StyledInputSearchWrapper = styled(StyledInputWrapper)`
+  flex: 2;
+`
+export const StyledClearIcon = styled(ClearIcon)`
+  display: none;
+  &.shown {
+    display: block;
+  }
+`

package/src/care/components/organisms/bookingSearchBar/searchInputs/index.tsx

@@ -0,0 +1,219 @@
+import React, {
+  Dispatch,
+  useRef,
+  useMemo,
+  useCallback,
+  KeyboardEvent,
+} from 'react'
+
+import { PinIcon } from 'care/components/atoms/icons'
+import { ID_OPTION_CURRENT_LOCATION } from 'care/interfaces/constants'
+import { useOutsideClick } from 'hooks/useOutsideClick'
+import { useTranslations } from 'hooks/useTranslations'
+import { DebouncedFunc } from 'lodash'
+import { theme } from 'misc/theme'
+
+import { SEARCH_KEYWORD_MIN_LENGTH } from '../constants'
+import { StyledInput } from '../index.styled'
+import { ReducerState, Action, ActionTypes } from '../reducer'
+import { SearchButton } from '../searchSubmitIcon'
+import { GATrackingCode, SearchClick } from '../types'
+import { useAnimatedPlaceholder } from '../useAnimatedPlaceholder'
+import {
+  StyledSearchBarInputsWrapper,
+  StyledInputLocationWrapper,
+  StyledInputSearchWrapper,
+  StyledClearIcon,
+} from './index.styled'
+
+export type Props = {
+  isMobile: boolean
+  state: ReducerState
+  dispatch: Dispatch<Action>
+  debouncedFetchCitiesByKeyword: DebouncedFunc<
+    (keyword: string) => Promise<void>
+  >
+  debouncedFetchSearchResults: DebouncedFunc<
+    (keyword: string, state: ReducerState) => Promise<void>
+  >
+  focusLocationInput: () => void
+  focusSearchInput: () => void
+  renderLocationResults: () => React.ReactNode
+  renderSearchResults: () => React.ReactNode
+  trackingAttributes?: GATrackingCode
+  onSearch?: (info: SearchClick) => void
+  initalSearchValue?: string
+}
+
+export function SearchInputs({
+  isMobile,
+  state,
+  dispatch,
+  debouncedFetchCitiesByKeyword,
+  debouncedFetchSearchResults,
+  focusLocationInput,
+  focusSearchInput,
+  renderLocationResults,
+  renderSearchResults,
+  trackingAttributes,
+  onSearch,
+  initalSearchValue,
+}: Props) {
+  const inputLocationWrapperRef = useRef<HTMLDivElement>(null)
+  const inputSearchWrapperRef = useRef<HTMLDivElement>(null)
+
+  const {
+    focused,
+    searchLocationKeywords,
+    geoLocationPermission,
+    selectedLocation,
+    searchKeywords,
+    inputSearchPlaceholder,
+  } = state
+  const { t } = useTranslations()
+
+  useAnimatedPlaceholder({
+    wrapperRef: inputSearchWrapperRef,
+    disabled: !!inputSearchPlaceholder,
+  })
+
+  useOutsideClick(inputLocationWrapperRef, () => {
+    dispatch({ type: ActionTypes.ClickOutsideInputLocation })
+  })
+
+  useOutsideClick(inputSearchWrapperRef, () => {
+    dispatch({ type: ActionTypes.ClickOutsideInputSearch })
+  })
+
+  function handleLocationInputClear() {
+    dispatch({ type: ActionTypes.ClearInputLocation })
+    debouncedFetchCitiesByKeyword.cancel()
+    focusLocationInput()
+  }
+
+  function handleSearchInputClear() {
+    dispatch({ type: ActionTypes.ClearInputSearch })
+    debouncedFetchSearchResults.cancel()
+    debouncedFetchSearchResults('', state)
+    focusSearchInput()
+  }
+
+  const searchInputPinIconColor = useMemo(() => {
+    if (
+      geoLocationPermission === 'granted' &&
+      selectedLocation?.id === ID_OPTION_CURRENT_LOCATION
+    ) {
+      return theme.colors.primaryBase
+    } else {
+      return theme.colors.gray400
+    }
+  }, [geoLocationPermission, selectedLocation])
+
+  const handleSearchInputChange = useCallback(
+    function handleSearchInputChange(value: string) {
+      dispatch({ type: ActionTypes.ChangeInputSearch, payload: value })
+      if (typeof onSearch === 'function') {
+        return
+      }
+      if (
+        value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale] ||
+        initalSearchValue
+      ) {
+        debouncedFetchSearchResults(value.trim(), state)
+      } else {
+        debouncedFetchSearchResults.cancel()
+        dispatch({ type: ActionTypes.DisplayInitialSearchResults })
+      }
+    },
+    [dispatch, state],
+  )
+
+  const handleSearchLocationInputChange = useCallback(
+    function handleSearchLocationInputChange(value: string) {
+      dispatch({ type: ActionTypes.ChangeInputLocation, payload: value })
+      if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale]) {
+        debouncedFetchCitiesByKeyword(value.trim())
+      } else {
+        debouncedFetchCitiesByKeyword.cancel()
+        dispatch({ type: ActionTypes.DisplayInitialCities })
+      }
+    },
+    [debouncedFetchCitiesByKeyword, dispatch],
+  )
+
+  const handleKeyPress = (e: KeyboardEvent<Element>) => {
+    if (state.autoCompleteDisabled && e.key === 'Enter' && onSearch) {
+      onSearch({
+        cityId: state.selectedLocation.id,
+        keyword: searchKeywords,
+      })
+    }
+  }
+
+  return (
+    <StyledSearchBarInputsWrapper>
+      <StyledInputLocationWrapper ref={inputLocationWrapperRef}>
+        <StyledInput
+          inputClassName={focused === 'location' ? 'focused' : undefined}
+          placeholder={t('booking.searchBar.locationPlaceholder')}
+          autoComplete="off"
+          name="search-location"
+          displayIcon={
+            <PinIcon
+              className="location-pin-icon"
+              color={searchInputPinIconColor}
+            />
+          }
+          actionIcon={
+            <StyledClearIcon
+              color={theme.colors.gray300}
+              className={searchLocationKeywords !== '' ? 'shown' : ''}
+            />
+          }
+          onActionClick={handleLocationInputClear}
+          value={searchLocationKeywords}
+          onChange={handleSearchLocationInputChange}
+          onFocus={() => dispatch({ type: ActionTypes.FocusInputLocation })}
+          size="md"
+        />
+        {!isMobile && renderLocationResults()}
+      </StyledInputLocationWrapper>
+      <StyledInputSearchWrapper ref={inputSearchWrapperRef}>
+        <StyledInput
+          placeholder={
+            inputSearchPlaceholder ||
+            t('booking.searchBar.searchInput.placeholder')
+          }
+          autoComplete="off"
+          name="search-results"
+          actionIcon={
+            <StyledClearIcon
+              color={theme.colors.gray300}
+              className={searchKeywords !== '' ? 'shown' : ''}
+            />
+          }
+          onActionClick={handleSearchInputClear}
+          value={searchKeywords}
+          onChange={handleSearchInputChange}
+          onFocus={() => dispatch({ type: ActionTypes.FocusInputSearch })}
+          inputClassName={focused === 'search' ? 'focused' : undefined}
+          size="md"
+          trackingAttributes={trackingAttributes}
+          onKeyPress={handleKeyPress}
+          enterKeyHint={state.autoCompleteDisabled ? 'search' : undefined}
+        />
+        {!isMobile && renderSearchResults()}
+      </StyledInputSearchWrapper>
+      {state.autoCompleteDisabled && !state.isMobile && (
+        <SearchButton
+          onClick={() => {
+            onSearch({
+              cityId: state.selectedLocation.id,
+              keyword: searchKeywords,
+            })
+          }}
+        />
+      )}
+    </StyledSearchBarInputsWrapper>
+  )
+}

package/src/care/components/organisms/bookingSearchBar/searchResults/index.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { Story } from '@storybook/react/types-6-0'
+
+import { TranslationsProvider } from '../../../../../i18n/translationsProvider'
+import { SearchResults, Props } from './index'
+import { mockData } from './mockData'
+
+export default {
+  component: SearchResults,
+  title: 'Projects/Care/Molecules/SearchResults',
+}
+
+const Template: Story<Props> = (args) => (
+  <TranslationsProvider>
+    <SearchResults {...args} />
+  </TranslationsProvider>
+)
+
+export const SearchResultsMobile = Template.bind({})
+SearchResultsMobile.args = {
+  data: mockData,
+  isMobile: true,
+  locale: 'en-PH',
+  keyword: 'Nguy',
+}
+
+SearchResultsMobile.parameters = {
+  //👇 The viewports object from the Essentials addon
+  viewport: {
+    //👇 The viewports you want to use
+    viewports: INITIAL_VIEWPORTS,
+    //👇 Your own default viewport
+    defaultViewport: 'iphone6',
+  },
+}
+
+export const SearchResultsDesktop = Template.bind({})
+SearchResultsDesktop.args = {
+  data: mockData,
+  isMobile: false,
+  locale: 'en-PH',
+  keyword: 'Nguy',
+}
+
+SearchResultsDesktop.parameters = {
+  //👇 The viewports object from the Essentials addon
+  viewport: {
+    //👇 The viewports you want to use
+    viewports: INITIAL_VIEWPORTS,
+    //👇 Your own default viewport
+    defaultViewport: 'ipad12p',
+  },
+}

package/src/care/components/organisms/bookingSearchBar/searchResults/index.tsx

@@ -0,0 +1,62 @@
+import React, { Dispatch } from 'react'
+
+import { SearchBarSectionApi } from 'care/interfaces/types'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+import { Action, ReducerState } from '../reducer'
+import { ResultSection } from '../resultSection'
+
+export type Props = {
+  data: SearchBarSectionApi[]
+  state: ReducerState
+  dispatch: Dispatch<Action>
+  isMobile: boolean
+  isLoading?: boolean
+  keyword?: string
+}
+
+const StyledSection = styled.section`
+  background-color: white;
+  border-radius: 4px;
+  position: absolute;
+  width: 100%;
+  z-index: 30;
+
+  ${MediaQueries.tdUp} {
+    box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04),
+      0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
+      0px 0px 1px rgba(0, 0, 0, 0.04);
+  }
+`
+
+const SearchResults = ({
+  data,
+  state,
+  dispatch,
+  isMobile,
+  isLoading,
+  keyword,
+}: Props) => {
+  return (
+    <StyledSection>
+      {data &&
+        data.map((data) => (
+          <ResultSection
+            type={data.type}
+            state={state}
+            dispatch={dispatch}
+            itemsToShow={2}
+            itemsToShowDesktop={4}
+            key={data.type}
+            data={data.results}
+            isMobile={isMobile}
+            isLoading={isLoading}
+            keyword={keyword}
+          />
+        ))}
+    </StyledSection>
+  )
+}
+
+export { SearchResults }

package/src/care/components/organisms/bookingSearchBar/searchResults/mockData.ts

@@ -0,0 +1,169 @@
+import { SearchBarSectionApi } from 'care/interfaces/types'
+
+export const mockData: SearchBarSectionApi[] = [
+  {
+    type: 'doctors',
+    results: [
+      {
+        id: 347,
+        name: 'BS.CKI Nguyễn Thị Hồng Thê',
+        slug: 'bscki-nguyen-thi-hong-the',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/bscki-nguyen-thi-hong-the-phong-kham-da-khoa-quoc-te-golden-healthcare.png',
+      },
+      {
+        id: 348,
+        name: 'BS.CKI Nguyễn Thị Kim Trân',
+        slug: 'bscki-nguyen-thi-kim-tran',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/bscki-nguyen-thi-kim-tran-phong-kham-da-khoa-quoc-te-golden-healthcare.png',
+      },
+      {
+        id: 343,
+        name: 'ThS.BS Nguyễn Chí Thành',
+        slug: 'thsbs-nguyen-chi-thanh',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/thsbs-nguyen-chi-thanh-phong-kham-da-khoa-quoc-te-golden-healthcare.png',
+      },
+      {
+        id: 340,
+        name: 'BS.CKI Nguyễn Thành Đông',
+        slug: 'bscki-nguyen-thanh-dong',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/bscki-nguyen-thanh-dong-phong-kham-tai-mui-hong-thanh-dong.png',
+      },
+      {
+        id: 531,
+        name: 'BS Nguyễn Đăng Khoa',
+        slug: 'bs-nguyen-dang-khoa',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/2022/04/1649737737_62550009db10d8.18672651.jpg',
+      },
+      {
+        id: 563,
+        name: 'BS.CKI. Nguyễn Khánh Linh',
+        slug: 'bscki-nguyen-khanh-linh',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/1RAAeslLKFnhShV8Y4Tac7CzAvZjCa7OD.png',
+      },
+      {
+        id: 564,
+        name: 'BS. CKI. Nguyễn Thị Ngọc Phương ',
+        slug: 'bs-cki-nguyen-thi-ngoc-phuong',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/1bNgKTTh9GT-uN3nunfatfSAHpA3GSqrj.png',
+      },
+      {
+        id: 559,
+        name: 'TS. BS Nguyễn Ánh Đạt ',
+        slug: 'ts-bs-nguyen-anh-dat',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/1QeR_g_kwWqWQM7GjIYKfGZ-givANNRpb.png',
+      },
+      {
+        id: 557,
+        name: 'BS.CKI Nguyễn Thị Ngọc Ánh ',
+        slug: 'bscki-nguyen-thi-ngoc-anh',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/123ekxF158538OI75wEkMsFZiDw7ZIIrj.png',
+      },
+      {
+        id: 555,
+        name: 'BS.CKI Trần Nguyễn Phương An',
+        slug: 'bscki-tran-nguyen-phuong-an',
+        avatar:
+          'https://cdn-healthcare.hellohealthgroup.com/doctors/vn/1zZf3JYk80gAbCkevqrFSXyTdkkXPp4P0.png',
+      },
+    ],
+  },
+  {
+    type: 'specialties',
+    results: [
+      {
+        id: 2,
+        name: 'Nha khoa',
+        slug: 'nha-khoa',
+        thumbnail:
+          'https://cdn-healthcare.hellohealthgroup.com/specialties/nha-khoa.png',
+      },
+      {
+        id: 1,
+        name: 'Nhãn khoa',
+        slug: 'nhan-khoa',
+        thumbnail:
+          'https://cdn-healthcare.hellohealthgroup.com/2022/03/1648192921_623d6d99099d03.94959451.jpg',
+      },
+      {
+        id: 98,
+        name: 'Khúc xạ nhãn khoa',
+        slug: 'khuc-xa-nhan-khoa',
+        thumbnail:
+          'https://cdn-healthcare.hellohealthgroup.com/2022/03/1648192991_623d6ddf3f98c1.71038960.jpg',
+      },
+    ],
+  },
+  {
+    type: 'services',
+    results: [
+      {
+        id: 201,
+        name: 'Lấy nhân mụn chuẩn y khoa',
+        slug: 'lay-nhan-mun-chuan-y-khoa',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2022/04/1648805403_6246c61be70816.59945136.jpg',
+      },
+      {
+        id: 80,
+        name: 'Khám TV chỉnh nha toàn diện ',
+        slug: 'kham-tv-chinh-nha-toan-dien',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2021/11/1636963243_619213ab2d91e3.52220855.png',
+      },
+      {
+        id: 87,
+        name: 'Nội nha ',
+        slug: 'noi-nha',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2021/11/1636963243_619213ab2d91e3.52220855.png',
+      },
+      {
+        id: 92,
+        name: 'Điều trị răng lệch lạc (chỉnh nha) - 2 hàm',
+        slug: 'dieu-tri-rang-lech-lac-chinh-nha-2-ham',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2021/11/1636963243_619213ab2d91e3.52220855.png',
+      },
+      {
+        id: 95,
+        name: 'Nha chu',
+        slug: 'nha-chu',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2021/11/1636963243_619213ab2d91e3.52220855.png',
+      },
+      {
+        id: 20,
+        name: 'Phẫu thuật đục thủy tinh thể Phaco (tán nhuyễn thể thủy tinh bằng sóng siêu âm) đặt IOL (thủy tinh thể nhân tạo) đơn tiêu',
+        slug: 'phau-thuat-duc-thuy-tinh-the-phaco-tan-nhuyen-the-thuy-tinh-bang-song-sieu-am-dat-iol-thuy-tinh-the-nhan-tao-don-tieu',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2021/11/1636963243_619213ab2d91e3.52220855.png',
+      },
+      {
+        id: 30,
+        name: 'Tiêm nội nhãn (Avastin)',
+        slug: 'tiem-noi-nhan-avastin',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2021/11/1636963243_619213ab2d91e3.52220855.png',
+      },
+    ],
+  },
+  {
+    type: 'hospitals',
+    results: [
+      {
+        id: 1577,
+        name: 'Phòng khám Nhi Bác sĩ Nguyễn Đăng Khoa',
+        slug: 'phong-kham-nhi-bac-si-nguyen-dang-khoa',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/2022/04/1649756671_625549ff05bdc0.74433512.jpg',
+      },
+      {
+        id: 71,
+        name: 'Bệnh viện Nguyễn Tri Phương',
+        slug: 'benh-vien-nguyen-tri-phuong',
+        logo: 'https://cdn-healthcare.hellohealthgroup.com/hospitals/vn/benh-vien-nguyen-tri-phuong.png',
+      },
+    ],
+  },
+]

package/src/care/components/organisms/bookingSearchBar/searchSubmitIcon/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+
+import { Text } from 'components/atoms'
+import { useTranslations } from 'hooks/useTranslations'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+type Props = {
+  onClick: () => void
+}
+
+const SearchIcon = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.97887 8.15493C2.97887 5.29627 5.29627 2.97887 8.15493 2.97887C11.0136 2.97887 13.331 5.29627 13.331 8.15493C13.331 11.0136 11.0136 13.331 8.15493 13.331C5.29627 13.331 2.97887 11.0136 2.97887 8.15493ZM8.15493 1.5C4.47951 1.5 1.5 4.47951 1.5 8.15493C1.5 11.8303 4.47951 14.8099 8.15493 14.8099C9.72624 14.8099 11.1704 14.2653 12.3089 13.3546L15.2377 16.2834C15.5265 16.5722 15.9947 16.5722 16.2834 16.2834C16.5722 15.9947 16.5722 15.5265 16.2834 15.2377L13.3546 12.3089C14.2653 11.1704 14.8099 9.72624 14.8099 8.15493C14.8099 4.47951 11.8303 1.5 8.15493 1.5Z"
+      fill="white"
+    />
+  </svg>
+)
+
+const StyledSearchIcon = styled.button`
+  min-height: 100%;
+  border-radius: 6px;
+  background-color: ${({ theme }) => theme.colors.primaryBase};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 11px;
+  cursor: pointer;
+  flex: 0.3;
+
+  ${MediaQueries.mbDown} {
+    --margin: 16px;
+    min-height: 32px;
+    margin: var(--margin);
+    width: calc(100% - var(--margin) * 2);
+    position: absolute;
+    bottom: 0;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.primaryActive};
+  }
+
+  &:focus-visible {
+    outline: 1px solid black;
+  }
+`
+
+const StyledText = styled(Text)`
+  font-weight: ${({ theme }) => theme.sizes.fwSemiBold};
+`
+
+const SearchButton = ({ onClick }: Props) => {
+  const { t } = useTranslations()
+  const title = t('booking.searchBar.searchButton')
+  return (
+    <StyledSearchIcon onClick={onClick} title={title}>
+      <SearchIcon />
+      <StyledText size="s3" color="white">
+        {title}
+      </StyledText>
+    </StyledSearchIcon>
+  )
+}
+
+export { SearchButton }

package/src/care/components/organisms/bookingSearchBar/types.ts

@@ -0,0 +1,12 @@
+export type FocusedType = 'location' | 'search' | 'none'
+
+export type GATrackingCode = {
+  dataEventCategory: string
+  dataEventAction: string
+  dataEventLabel: string
+}
+
+export type SearchClick = {
+  cityId: number
+  keyword: string
+}