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

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

@@ -0,0 +1,448 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useReducer,
+  useState,
+  CSSProperties,
+} from 'react'
+
+import {
+  ID_OPTION_CURRENT_LOCATION,
+  LOCALIZED_SLUGS,
+} from 'care/interfaces/constants'
+import { CareLocaleType, City } from 'care/interfaces/types'
+import { useGeolocation } from 'hooks/useGeolocation'
+import { useTranslations } from 'hooks/useTranslations'
+import { GeoLocationPermission, GPSType } from 'interfaces/types'
+import debounce from 'lodash/debounce'
+
+import {
+  StyledHiddenInputMobile,
+  StyledSearchBarWrapper,
+  StyledSearchBarMobileWrapper,
+  StyledSearchBarMobileModalHeader,
+  CareSearchGlobalStyles,
+} from './index.styled'
+import LocationResults from './locationResults'
+import { MobileFakeInput } from './mobileFakeInput'
+import { MobileTopBar } from './mobileTopbar'
+import { reducer, initialState, ActionTypes, ReducerState } from './reducer'
+import { SearchInputs } from './searchInputs'
+import { SearchResults } from './searchResults'
+import { SearchButton } from './searchSubmitIcon'
+import { GATrackingCode, SearchClick } from './types'
+import useSearchBarApi from './useSearchBarApi'
+
+export type Props = {
+  isMobile: boolean
+  careApiDomain: string
+  careFrontDomain?: string
+  initialSearchValue?: string
+  initialSelectedCity?: City
+  geoLocationPermission?: GeoLocationPermission
+  geoLocationCoordinates?: GPSType
+  isDebug?: boolean
+  askForGeolocationPermission?: boolean
+  gaTrackingSearchBar?: GATrackingCode
+  autoCompleteDisabled?: boolean
+  inputSearchPlaceholder?: string
+  routerPush?: (s: string) => void
+  onGeoLocationPermissionChange?: (
+    perm: GeoLocationPermission,
+    coordinates: GPSType,
+  ) => void
+  onSearch?: (data: SearchClick) => void
+  onChangeLocation?: (city: City) => void
+}
+
+const BookingSearchBar = ({
+  isMobile,
+  careApiDomain,
+  geoLocationPermission: geoLocationPermissionFromProps,
+  geoLocationCoordinates: geoLocationCoordinatesFromProps,
+  initialSelectedCity: initialSelectedCityFromProps,
+  initialSearchValue = '',
+  careFrontDomain = '/care',
+  isDebug = false,
+  askForGeolocationPermission = false,
+  gaTrackingSearchBar,
+  autoCompleteDisabled = false,
+  inputSearchPlaceholder = '',
+  routerPush,
+  onGeoLocationPermissionChange,
+  onSearch,
+  onChangeLocation,
+}: Props) => {
+  const { t, locale } = useTranslations<CareLocaleType>()
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const hiddenInputRef = useRef<HTMLInputElement>(null)
+  const [viewportHeight, setViewportHeight] = useState<number | void>(undefined)
+  const {
+    geoLocationPermission: geoLocationPermissionFromHook,
+    geoLocationCoordinates: geoLocationCoordinatesFromHook,
+    requestGeoLocation,
+  } = useGeolocation()
+
+  const [state, dispatch] = useReducer(
+    reducer,
+    initialState,
+    (s: ReducerState) => ({
+      ...s,
+      isDebug,
+      isMobile,
+      geoLocationPermission:
+        geoLocationPermissionFromProps ||
+        geoLocationPermissionFromHook ||
+        'unset',
+      geoLocationCoordinates:
+        geoLocationCoordinatesFromProps ||
+        geoLocationCoordinatesFromHook ||
+        null,
+      searchKeywords: initialSearchValue,
+      initialSelectedCity: initialSelectedCityFromProps || null,
+      selectedLocation:
+        initialSelectedCityFromProps || s.selectedLocation || null,
+      searchLocationKeywords:
+        initialSelectedCityFromProps?.name || s.searchLocationKeywords,
+      autoCompleteDisabled,
+      inputSearchPlaceholder,
+      locale,
+    }),
+  )
+
+  const {
+    navigateTo,
+    focused,
+    isLoadingCities,
+    cities,
+    searchKeywords,
+    geoLocationPermission,
+    selectedLocation,
+    initialSelectedCity,
+    defaultCity,
+    searchResults,
+    isLoadingSearchResults,
+    isMobileModalOpened,
+    inputSearchPlaceholder: inputSearchPlaceholderState,
+  } = state
+
+  const { fetchCitiesByLocation, fetchCitiesByKeyword, fetchSearchResults } =
+    useSearchBarApi({
+      dispatch,
+      locale,
+      careApiDomain,
+    })
+
+  const currentLocationCityItem = useMemo<City>(
+    () => ({
+      id: ID_OPTION_CURRENT_LOCATION,
+      name: t('booking.searchBar.currentLocation'),
+      slug: LOCALIZED_SLUGS[locale]?.CURRENT,
+    }),
+    [t, locale],
+  )
+
+  const debouncedFetchCitiesByKeyword = useMemo(
+    () => debounce(fetchCitiesByKeyword, 400),
+    [fetchCitiesByKeyword],
+  )
+
+  const debouncedFetchSearchResults = useMemo(
+    () => debounce(fetchSearchResults, 400),
+    [fetchSearchResults],
+  )
+
+  useEffect(() => {
+    if (
+      initialSearchValue !== '' &&
+      initialSearchValue !== state.searchKeywords
+    ) {
+      dispatch({
+        type: ActionTypes.UpdateInitialSearchValue,
+        payload: initialSearchValue,
+      })
+    }
+  }, [initialSearchValue])
+
+  useEffect(() => {
+    if (
+      askForGeolocationPermission &&
+      selectedLocation?.id === ID_OPTION_CURRENT_LOCATION &&
+      geoLocationPermission === 'unset'
+    ) {
+      requestGeoLocation()
+    }
+  }, [askForGeolocationPermission, selectedLocation, geoLocationPermission])
+
+  useEffect(() => {
+    if (
+      !geoLocationPermissionFromProps &&
+      geoLocationPermission !== geoLocationPermissionFromHook
+    ) {
+      if (
+        geoLocationPermissionFromHook === 'granted' &&
+        geoLocationCoordinatesFromHook
+      ) {
+        dispatch({
+          type: ActionTypes.GrantGeoLocationPermission,
+          payload: geoLocationCoordinatesFromHook,
+        })
+      } else if (geoLocationPermissionFromHook === 'denied') {
+        dispatch({ type: ActionTypes.DenyGeoLocationPermission })
+      }
+    }
+  }, [
+    geoLocationPermission,
+    geoLocationPermissionFromHook,
+    geoLocationCoordinatesFromHook,
+    geoLocationPermissionFromProps,
+  ])
+
+  useEffect(() => {
+    if (navigateTo) {
+      if (routerPush) {
+        routerPush(navigateTo)
+      } else {
+        window.location.href = `${careFrontDomain}${navigateTo}`
+      }
+    }
+  }, [navigateTo])
+
+  const selectCurrentLocation = useCallback(
+    function selectCurrentLocation() {
+      dispatch({
+        type: ActionTypes.SelectCurrentLocation,
+        payload: currentLocationCityItem,
+      })
+    },
+    [t, dispatch],
+  )
+
+  useEffect(() => {
+    if (geoLocationPermission !== 'denied' && !initialSelectedCity) {
+      selectCurrentLocation()
+    }
+    if (onGeoLocationPermissionChange) {
+      onGeoLocationPermissionChange(
+        geoLocationPermission,
+        state.geoLocationCoordinates,
+      )
+    }
+    if (isMobile && geoLocationPermission === 'granted' && selectedLocation) {
+      dispatch({ type: ActionTypes.FocusInputSearch })
+    }
+    fetchCitiesByLocation({ coordinates: state.geoLocationCoordinates })
+  }, [geoLocationPermission])
+
+  useEffect(() => {
+    if (selectedLocation && defaultCity) {
+      fetchSearchResults(state.searchKeywords, state)
+    }
+  }, [selectedLocation, defaultCity])
+
+  useEffect(() => {
+    if (inputSearchPlaceholder !== inputSearchPlaceholderState) {
+      dispatch({
+        type: ActionTypes.SetInputSearchPlaceholder,
+        payload: inputSearchPlaceholder,
+      })
+    }
+  }, [inputSearchPlaceholder, inputSearchPlaceholderState])
+
+  useEffect(() => {
+    if (isMobileModalOpened) {
+      document.body.classList.add('care-popup-open')
+    } else {
+      document.body.classList.remove('care-popup-open')
+    }
+  }, [isMobileModalOpened])
+
+  const handleLocationClick = useCallback(
+    function handleLocationClick(city: City) {
+      dispatch({ type: ActionTypes.SelectLocation, payload: city })
+      focusSearchInput()
+      if (onChangeLocation) {
+        onChangeLocation(city)
+      }
+    },
+    [t, dispatch],
+  )
+
+  function handleCurrentLocationClick() {
+    if (isMobile && state.geoLocationPermission !== 'granted') {
+      requestGeoLocation()
+    } else {
+      selectCurrentLocation()
+      focusSearchInput()
+    }
+  }
+
+  async function handleMobileFakeInputClick() {
+    if (hiddenInputRef.current) {
+      hiddenInputRef.current.focus()
+    }
+    dispatch({ type: ActionTypes.OpenMobileModal })
+    await Promise.resolve()
+    if (wrapperRef.current) {
+      wrapperRef.current
+        .querySelector<HTMLInputElement>('input[name="search-location"]')
+        ?.focus()
+    }
+  }
+
+  function focusLocationInput() {
+    if (wrapperRef.current) {
+      wrapperRef.current
+        .querySelector<HTMLInputElement>('input[name="search-location"]')
+        ?.focus()
+    }
+  }
+
+  function focusSearchInput() {
+    if (wrapperRef.current) {
+      wrapperRef.current
+        .querySelector<HTMLInputElement>('input[name="search-results"]')
+        ?.focus()
+    }
+  }
+
+  function handleMobileTopBarClose() {
+    dispatch({ type: ActionTypes.CloseMobileModal })
+  }
+
+  function renderLocationResults() {
+    if (focused !== 'location') {
+      return null
+    }
+    return (
+      <LocationResults
+        isLoading={isLoadingCities}
+        cities={cities}
+        onLocationClick={handleLocationClick}
+        onCurrentLocationClick={handleCurrentLocationClick}
+        isLocationLoading={isLoadingCities}
+        geoLocationPermission={geoLocationPermission}
+        selectedLocation={selectedLocation}
+      />
+    )
+  }
+
+  function renderSearchResults() {
+    if (focused !== 'search') {
+      return null
+    }
+
+    if (state.autoCompleteDisabled) {
+      if (!isMobile) {
+        return null
+      }
+
+      return (
+        <SearchButton
+          onClick={() => {
+            onSearch({
+              cityId: state.selectedLocation.id,
+              keyword: searchKeywords,
+            })
+          }}
+        />
+      )
+    }
+
+    return (
+      <SearchResults
+        data={searchResults}
+        state={state}
+        dispatch={dispatch}
+        isMobile={false}
+        keyword={searchKeywords}
+        isLoading={isLoadingSearchResults}
+      />
+    )
+  }
+
+  function renderSearchInputs() {
+    return (
+      <SearchInputs
+        isMobile={isMobile}
+        state={state}
+        dispatch={dispatch}
+        debouncedFetchCitiesByKeyword={debouncedFetchCitiesByKeyword}
+        debouncedFetchSearchResults={debouncedFetchSearchResults}
+        focusLocationInput={focusLocationInput}
+        focusSearchInput={focusSearchInput}
+        renderLocationResults={renderLocationResults}
+        renderSearchResults={renderSearchResults}
+        trackingAttributes={gaTrackingSearchBar}
+        onSearch={onSearch}
+        initalSearchValue={initialSearchValue}
+      />
+    )
+  }
+
+  useEffect(() => {
+    if (window.visualViewport) {
+      const resizeHandler = (evt) => {
+        const viewport = evt.target
+        setViewportHeight(viewport?.height)
+      }
+      window.visualViewport.addEventListener('resize', resizeHandler)
+      return () => {
+        window.visualViewport.removeEventListener('resize', resizeHandler)
+      }
+    }
+  }, [setViewportHeight])
+
+  if (isMobile) {
+    return (
+      <>
+        <CareSearchGlobalStyles />
+        {<StyledHiddenInputMobile ref={hiddenInputRef} />}
+        <StyledSearchBarMobileWrapper
+          id="booking-search-bar"
+          ref={wrapperRef}
+          data-is-modal={isMobile && isMobileModalOpened}
+          style={
+            {
+              '--mobile-care-searchbar-height':
+                isMobileModalOpened && viewportHeight
+                  ? `${viewportHeight}px`
+                  : '100%',
+            } as CSSProperties
+          }
+        >
+          {!isMobileModalOpened ? (
+            <MobileFakeInput
+              onClick={handleMobileFakeInputClick}
+              focused={focused}
+              value={searchKeywords}
+              trackingAttributes={gaTrackingSearchBar}
+              inputSearchPlaceholder={inputSearchPlaceholder}
+            />
+          ) : (
+            <>
+              <StyledSearchBarMobileModalHeader>
+                <MobileTopBar
+                  headingText="Search"
+                  onLeftClick={handleMobileTopBarClose}
+                />
+                {renderSearchInputs()}
+              </StyledSearchBarMobileModalHeader>
+              {renderLocationResults()}
+              {renderSearchResults()}
+            </>
+          )}
+        </StyledSearchBarMobileWrapper>
+      </>
+    )
+  }
+
+  return (
+    <StyledSearchBarWrapper id="booking-search-bar" ref={wrapperRef}>
+      {renderSearchInputs()}
+    </StyledSearchBarWrapper>
+  )
+}
+export { BookingSearchBar }

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

@@ -0,0 +1,94 @@
+import { PinIcon } from 'care/components/atoms/icons'
+import { theme } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+import LiSkeleton from './liSkeleton'
+
+const checkMarkIconUrl = `url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.9803 0.990669C16.7205 0.99841 16.4739 1.10699 16.2928 1.2934L5.99984 11.5864L2.70687 8.2934C2.61473 8.19743 2.50436 8.12081 2.38223 8.06802C2.2601 8.01524 2.12867 7.98735 1.99563 7.986C1.86259 7.98464 1.73061 8.00985 1.60743 8.06014C1.48426 8.11043 1.37235 8.18479 1.27827 8.27887C1.1842 8.37295 1.10983 8.48485 1.05954 8.60803C1.00926 8.73121 0.98405 8.86318 0.985403 8.99622C0.986757 9.12926 1.01464 9.26069 1.06743 9.38282C1.12021 9.50495 1.19684 9.61532 1.29281 9.70747L5.29281 13.7075C5.48035 13.8949 5.73467 14.0002 5.99984 14.0002C6.26501 14.0002 6.51933 13.8949 6.70687 13.7075L17.7069 2.70747C17.8514 2.567 17.9501 2.38616 17.99 2.18864C18.03 1.99112 18.0093 1.78614 17.9308 1.60055C17.8523 1.41497 17.7195 1.25744 17.5499 1.14861C17.3803 1.03978 17.1817 0.984729 16.9803 0.990669Z' fill='%232685F1'/%3E%3C/svg%3E%0A")`
+
+export const StyledLocationResultsWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  top: 48px;
+  min-width: 100%;
+  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);
+  border-radius: 6px;
+  background-color: white;
+  z-index: 30;
+
+  ${MediaQueries.mbDown} {
+    position: relative;
+    top: 0;
+    box-shadow: initial;
+  }
+`
+
+export const StyledLocationResultsList = styled.ul`
+  width: 100%;
+  max-height: 600px;
+  overflow-y: auto;
+`
+
+export const StyledPinIcon = styled(PinIcon)`
+  width: 12px;
+  height: 18px;
+`
+
+export const StyledLocationItem = styled.li<{ isSelected?: boolean }>`
+  position: relative;
+  cursor: pointer;
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  overflow: hidden;
+
+  ${({ isSelected }) =>
+    isSelected &&
+    `
+        &::after {
+            content: ${checkMarkIconUrl};
+            top: 50%;
+            right: 18px;
+            position: absolute;
+            transform: translateY(-50%);
+        }
+    `}
+
+  & + li::before {
+    content: '';
+    position: absolute;
+    left: 18px;
+    right: 18px;
+    top: 0;
+    height: 1px;
+    background-color: ${theme.colors.neutral100};
+  }
+
+  &:not([data-is-denied='true']):hover {
+    background-color: ${theme.colors.neutral50};
+  }
+
+  &:last-child:hover {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+
+  &:first-child:hover {
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+
+  &[data-is-denied='true'] {
+    cursor: not-allowed;
+  }
+`
+
+export const StyledLiSkeleton = styled(LiSkeleton)`
+  &:first-child {
+    padding-top: 18px;
+  }
+`

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

@@ -0,0 +1,132 @@
+import React from 'react'
+
+import { GetLocationIcon } from 'care/components/atoms/icons'
+import { City } from 'care/interfaces/types'
+import { Text } from 'components/atoms/text'
+import { useTranslations } from 'hooks/useTranslations'
+import { GeoLocationPermission } from 'interfaces/types'
+import { theme } from 'misc/theme'
+import Skeleton from 'react-loading-skeleton'
+
+import {
+  StyledLocationItem,
+  StyledLocationResultsList,
+  StyledLocationResultsWrapper,
+  StyledPinIcon,
+  StyledLiSkeleton,
+} from './index.styled'
+
+type Props = {
+  cities?: Array<City>
+  isLoading: boolean
+  onLocationClick: (c: City) => void
+  onCurrentLocationClick: () => void
+  isMobile?: boolean
+  geoLocationPermission: GeoLocationPermission
+  isLocationLoading?: boolean
+  selectedLocation?: City | null
+}
+
+const LocationResults = ({
+  cities,
+  isLoading,
+  onLocationClick,
+  onCurrentLocationClick,
+  geoLocationPermission = 'unset',
+  isLocationLoading,
+  selectedLocation,
+}: Props) => {
+  const { t } = useTranslations()
+
+  const isGeoPermissionDenied = geoLocationPermission === 'denied'
+
+  const renderCurrentLocationItem = () => (
+    <StyledLocationItem
+      role="button"
+      tabIndex={0}
+      onClick={(evt) => {
+        if (isGeoPermissionDenied) {
+          return
+        }
+        evt.nativeEvent.stopImmediatePropagation()
+        if (!isLocationLoading) {
+          onCurrentLocationClick()
+        }
+      }}
+      data-is-denied={isGeoPermissionDenied}
+    >
+      {isGeoPermissionDenied ? (
+        <Text color="var(--gray600)" size="md">
+          x
+        </Text>
+      ) : isLocationLoading ? (
+        <Skeleton height={20} width={20} />
+      ) : (
+        <GetLocationIcon color={theme.colors.primaryBase} />
+      )}
+
+      <div>
+        {isGeoPermissionDenied ? (
+          <Text color="var(--gray600)" size="sm" style={{ lineHeight: 1.5 }}>
+            {t('booking.searchBar.grantLocation')}
+          </Text>
+        ) : isLocationLoading ? (
+          <Skeleton height={20} style={{ width: 'calc(100% - 16px)' }} />
+        ) : (
+          <Text size="md">{t('booking.searchBar.useCurrentLocation')}</Text>
+        )}
+      </div>
+    </StyledLocationItem>
+  )
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <StyledLiSkeleton count={5} />
+    }
+
+    if (!cities || cities.length < 1) {
+      return (
+        <>
+          {renderCurrentLocationItem()}
+          <StyledLocationItem data-is-denied="true">
+            <Text size="sm" color="#ccc">
+              {t('booking.searchBar.noResults')}
+            </Text>
+          </StyledLocationItem>
+        </>
+      )
+    }
+
+    return (
+      <>
+        {renderCurrentLocationItem()}
+        {cities.map((city: City) => (
+          <StyledLocationItem
+            key={city.id}
+            onClick={(evt) => {
+              evt.nativeEvent.stopImmediatePropagation()
+              if (onLocationClick) {
+                onLocationClick(city)
+              }
+            }}
+            role="button"
+            tabIndex={0}
+            aria-label={`Select ${city.name} as location`}
+            isSelected={selectedLocation?.id === city.id}
+          >
+            <StyledPinIcon color={theme.colors.neutral400} />
+            <Text size="md">{city.name}</Text>
+          </StyledLocationItem>
+        ))}
+      </>
+    )
+  }
+
+  return (
+    <StyledLocationResultsWrapper data-testid="location-search-results">
+      <StyledLocationResultsList>{renderContent()}</StyledLocationResultsList>
+    </StyledLocationResultsWrapper>
+  )
+}
+
+export default LocationResults