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

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

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

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

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