@hhgtech/hhg-components 1.29.528 → 1.29.529-beta-2

package/build/esm/index-b3066d7a.js

@@ -0,0 +1,1942 @@
+import React__default, { useMemo, useRef, useState, useCallback, forwardRef, useImperativeHandle, useReducer, useEffect } from 'react';
+import { Search } from '@hhgtech/icons/core';
+import { Skeleton, clsx, Box, Input, rem, ScrollArea, useMantineTheme, Stack, Flex, Text as Text$1, Select, Divider, Tabs } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { P as PinIcon, i as checkMarkIconUrl, h as getApiPath, u as useGeolocation } from './utils-e8fd9273.js';
+import { a as useOutsideClick } from './useOutsideClick-82ed3e36.js';
+import { u as useTranslations } from './index-b8257c21.js';
+import debounce from 'lodash/debounce';
+import { a as ID_OPTION_CURRENT_LOCATION, L as LOCALIZED_SLUGS, I as ID_OPTION_ALL_LOCATION, S as SLUG_VACIN_ID, C as CLIENT_KEY, M as MAPPING_CLIENT_WITH_SLUG } from './constants-9af47b1e.js';
+import styled from '@emotion/styled';
+import { theme } from './miscTheme.js';
+import { M as MediaQueries } from './utils-d5381d49.js';
+import { C as Container } from './index-500df0ee.js';
+import { T as Text } from './index-b32b0f9c.js';
+import { C as ChevronDown } from './ChevronDown-daaa091a.js';
+import { _ as __rest } from './tslib.es6-7594be27.js';
+import { ArrowLeft } from '@hhgtech/icons/arrow';
+import { M as Modal } from './index-d4adbb94.js';
+import { P as PATHS } from './paths-5c22a210.js';
+import { B as Button } from './index-9f33d631.js';
+
+const StyledSearchBarWrapper = styled.div ``;
+const StyleWrapperContainer = styled.div `
+  background-color: ${theme.colors.neutral50};
+  padding-bottom: 1px;
+  ${MediaQueries.mbDown} {
+    padding: 0;
+  }
+`;
+const StyleSearchInputContainer = styled(Container) `
+  padding: 0 16px;
+
+  ${MediaQueries.mbDown} {
+    padding: 0;
+  }
+`;
+const StyleSearchContent = styled.div `
+  padding: 24px 56px;
+  border-radius: 16px;
+  background-color: ${theme.colors.white};
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.04),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+
+  ${MediaQueries.mbDown} {
+    padding: 16px;
+    border-radius: 0;
+  }
+
+  .flex-search-input {
+    flex-direction: row;
+    ${MediaQueries.mbDown} {
+      flex-direction: column;
+    }
+  }
+`;
+
+const SEARCH_KEYWORD_MIN_LENGTH = {
+    'en-PH': 3,
+    'tl-PH': 2,
+    'id-ID': 3,
+    'vi-VN': 2,
+    'zh-TW': 0,
+    'ms-MY': 2,
+    'th-TH': 2,
+};
+
+const initialState = {
+    isMobile: false,
+    isDebug: false,
+    navigateTo: null,
+    geoLocationPermission: 'unset',
+    geoLocationCoordinates: null,
+    focused: 'none',
+    focusedSpecialty: 'none',
+    searchLocationKeywords: '',
+    searchSpecialtyKeywords: '',
+    searchKeywords: '',
+    selectedLocation: null,
+    selectedSpecialty: null,
+    defaultCity: null,
+    initialCities: [],
+    cities: [],
+    searchResults: {},
+    initialSearchResults: {},
+    isLoadingCities: false,
+    isLoadingSearchResults: false,
+    isMobileModalOpened: false,
+    initialSelectedCity: null,
+    autoCompleteDisabled: false,
+    inputSearchPlaceholder: '',
+    locale: 'vi-VN',
+    allSpecialties: [],
+    popularKeys: [],
+};
+var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes["NavigateTo"] = "navigate to url";
+    ActionTypes["ClickOutsideInputLocation"] = "click outside input location";
+    ActionTypes["ClickOutsideInputSearch"] = "click outside input search";
+    ActionTypes["ClickOutsideInputSearchSpecialty"] = "click outside input search specialty";
+    ActionTypes["ClickOutsideInputSpecialty"] = "click outside input specialty";
+    ActionTypes["SelectCurrentLocation"] = "select current location";
+    ActionTypes["FocusInputLocation"] = "focus input location";
+    ActionTypes["FocusInputSearch"] = "focus input search";
+    ActionTypes["FocusInputSearchSpecialty"] = "focus input search specialty";
+    ActionTypes["ChangeInputLocation"] = "change input location";
+    ActionTypes["ChangeInputSearch"] = "change input search";
+    ActionTypes["ClearInputLocation"] = "clear input location";
+    ActionTypes["ClearInputSearch"] = "clear input search";
+    ActionTypes["SelectLocation"] = "select location";
+    ActionTypes["SelectSpecialty"] = "select specialty";
+    ActionTypes["FetchCitiesStart"] = "fetch cities start";
+    ActionTypes["FetchCitiesFinish"] = "fetch cities finish";
+    ActionTypes["FetchSearchResultsStart"] = "fetch search results start";
+    ActionTypes["FetchSearchResultsComplete"] = "fetch search results complete";
+    ActionTypes["FetchSearchResultsFinish"] = "fetch search results finish";
+    ActionTypes["FetchCitiesByGeoIpComplete"] = "fetch cities by geo IP finish";
+    ActionTypes["FetchCitiesByKeywordComplete"] = "fetch cities by keyword finish";
+    ActionTypes["DisplayInitialCities"] = "display initial cities";
+    ActionTypes["DisplayInitialSearchResults"] = "display initial search results";
+    ActionTypes["UpdateInitialSearchResults"] = "update initial search results";
+    ActionTypes["GrantGeoLocationPermission"] = "grant geolocation permission";
+    ActionTypes["DenyGeoLocationPermission"] = "deny geolocation permission";
+    ActionTypes["OpenMobileModal"] = "open mobile modal";
+    ActionTypes["CloseMobileModal"] = "close mobile modal";
+    ActionTypes["UpdateInitialSearchValue"] = "update initial search value";
+    ActionTypes["SelectSearchResult"] = "select search result";
+    ActionTypes["SetInputSearchPlaceholder"] = "set input search placeholder";
+    ActionTypes["FocusInputSpecialty"] = "focus input specialty";
+    ActionTypes["FetchAllSpecialties"] = "fetch all specialty";
+    ActionTypes["FetchPopularKeys"] = "fetch popular key by type";
+})(ActionTypes || (ActionTypes = {}));
+function resetSearchLocationKeywords(state) {
+    const { selectedLocation, searchLocationKeywords } = state;
+    if (selectedLocation && searchLocationKeywords !== selectedLocation.name) {
+        return Object.assign(Object.assign({}, state), { searchLocationKeywords: selectedLocation.name });
+    }
+    return state;
+}
+function reducer(state, action) {
+    var _a, _b;
+    if (state.isDebug) {
+        console.log('bookingSearchBarV3', { action, state });
+    }
+    switch (action.type) {
+        case ActionTypes.NavigateTo:
+            return Object.assign(Object.assign({}, state), { navigateTo: action.payload, focused: 'none', isMobileModalOpened: false });
+        case ActionTypes.ClickOutsideInputLocation: {
+            if (state.focused !== 'location') {
+                return state;
+            }
+            return resetSearchLocationKeywords(Object.assign(Object.assign({}, state), { focused: 'none' }));
+        }
+        case ActionTypes.ClickOutsideInputSpecialty: {
+            if (state.focused !== 'specialty') {
+                return state;
+            }
+            return resetSearchLocationKeywords(Object.assign(Object.assign({}, state), { focused: 'none' }));
+        }
+        case ActionTypes.ClickOutsideInputSearch: {
+            if (state.focused !== 'search') {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { focused: 'none' });
+        }
+        case ActionTypes.ClickOutsideInputSearchSpecialty: {
+            if (state.focusedSpecialty !== 'search') {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { focusedSpecialty: 'none' });
+        }
+        case ActionTypes.FocusInputLocation: {
+            const nextState = Object.assign(Object.assign({}, state), { focused: 'location' });
+            if (((_a = state.selectedLocation) === null || _a === void 0 ? void 0 : _a.id) === ID_OPTION_CURRENT_LOCATION) {
+                nextState.searchLocationKeywords = '';
+            }
+            return nextState;
+        }
+        case ActionTypes.FocusInputSpecialty: {
+            const nextState = Object.assign(Object.assign({}, state), { focused: 'specialty' });
+            if (((_b = state.selectedLocation) === null || _b === void 0 ? void 0 : _b.id) === ID_OPTION_CURRENT_LOCATION) {
+                nextState.searchLocationKeywords = '';
+            }
+            return nextState;
+        }
+        case ActionTypes.FocusInputSearch:
+            const nextState = Object.assign(Object.assign({}, state), { focused: 'search' });
+            if (state.isMobile) {
+                return resetSearchLocationKeywords(nextState);
+            }
+            return nextState;
+        case ActionTypes.FocusInputSearchSpecialty: {
+            const nextState = Object.assign(Object.assign({}, state), { focusedSpecialty: 'search' });
+            return nextState;
+        }
+        case ActionTypes.ChangeInputLocation:
+            return Object.assign(Object.assign({}, state), { searchLocationKeywords: action.payload });
+        case ActionTypes.ChangeInputSearch: {
+            const keyword = action.payload;
+            return Object.assign(Object.assign({}, state), { searchKeywords: keyword, isLoadingSearchResults: keyword.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale] });
+        }
+        case ActionTypes.SelectCurrentLocation:
+            return Object.assign(Object.assign({}, state), { focused: 'none', selectedLocation: action.payload, searchLocationKeywords: action.payload.name });
+        case ActionTypes.ClearInputLocation:
+            return Object.assign(Object.assign({}, state), { focused: 'location', cities: state.initialCities, searchLocationKeywords: '' });
+        case ActionTypes.ClearInputSearch:
+            return Object.assign(Object.assign({}, state), { focused: 'search', searchKeywords: '' });
+        case ActionTypes.SelectLocation:
+            return Object.assign(Object.assign({}, state), { focused: 'none', selectedLocation: action.payload, searchLocationKeywords: action.payload.name, searchResults: {} });
+        case ActionTypes.SelectSpecialty:
+            return Object.assign(Object.assign({}, state), { focused: 'none', selectedSpecialty: action.payload, searchResults: {} });
+        case ActionTypes.SelectSearchResult:
+            return Object.assign(Object.assign({}, state), { searchKeywords: action.payload.name, isMobileModalOpened: false, focused: 'none', navigateTo: action.payload.url });
+        case ActionTypes.FetchCitiesStart:
+            return Object.assign(Object.assign({}, state), { isLoadingCities: true });
+        case ActionTypes.FetchCitiesFinish:
+            return Object.assign(Object.assign({}, state), { isLoadingCities: false });
+        case ActionTypes.FetchSearchResultsStart:
+            return Object.assign(Object.assign({}, state), { isLoadingSearchResults: true });
+        case ActionTypes.FetchSearchResultsFinish:
+            return Object.assign(Object.assign({}, state), { isLoadingSearchResults: false });
+        case ActionTypes.FetchSearchResultsComplete: {
+            const nextState = Object.assign(Object.assign({}, state), { searchResults: Object.assign(Object.assign({}, state.searchResults), { [action.payload.key]: action.payload.searches }) });
+            return nextState;
+        }
+        case ActionTypes.FetchCitiesByGeoIpComplete: {
+            let { cities } = action.payload;
+            const { default: defaultCity } = action.payload;
+            cities = cities.filter((c) => c.id !== defaultCity.id);
+            if (defaultCity) {
+                cities.unshift(defaultCity);
+            }
+            if (state.initialSelectedCity &&
+                !cities.find((c) => c.id === state.initialSelectedCity.id)) {
+                cities.unshift(state.initialSelectedCity);
+            }
+            const nextState = Object.assign(Object.assign({}, state), { defaultCity, initialCities: cities, cities });
+            if (state.geoLocationPermission === 'denied' &&
+                !state.initialSelectedCity) {
+                nextState.selectedLocation = defaultCity;
+                nextState.searchLocationKeywords = defaultCity.name;
+            }
+            return nextState;
+        }
+        case ActionTypes.FetchCitiesByKeywordComplete:
+            return Object.assign(Object.assign({}, state), { cities: action.payload });
+        case ActionTypes.DisplayInitialCities:
+            return Object.assign(Object.assign({}, state), { cities: state.initialCities });
+        case ActionTypes.DisplayInitialSearchResults: {
+            const trimmed = state.searchKeywords.trim();
+            const minLen = SEARCH_KEYWORD_MIN_LENGTH[state.locale];
+            const shouldShowEmpty = trimmed.length > 0 && trimmed.length <= minLen;
+            return Object.assign(Object.assign({}, state), { searchResults: shouldShowEmpty ? {} : state.initialSearchResults, isLoadingSearchResults: false });
+        }
+        case ActionTypes.UpdateInitialSearchResults:
+            return Object.assign(Object.assign({}, state), { initialSearchResults: Object.assign(Object.assign({}, state.initialSearchResults), { [action.payload.key]: action.payload.searches }) });
+        case ActionTypes.GrantGeoLocationPermission:
+            return Object.assign(Object.assign({}, state), { geoLocationPermission: 'granted', geoLocationCoordinates: action.payload });
+        case ActionTypes.DenyGeoLocationPermission:
+            return Object.assign(Object.assign({}, state), { geoLocationPermission: 'denied', geoLocationCoordinates: null });
+        case ActionTypes.OpenMobileModal:
+            return Object.assign(Object.assign({}, state), { isMobileModalOpened: true });
+        case ActionTypes.CloseMobileModal:
+            return Object.assign(Object.assign({}, state), { isMobileModalOpened: false });
+        case ActionTypes.UpdateInitialSearchValue:
+            return Object.assign(Object.assign({}, state), { searchKeywords: action.payload });
+        case ActionTypes.SetInputSearchPlaceholder:
+            return Object.assign(Object.assign({}, state), { inputSearchPlaceholder: action.payload });
+        case ActionTypes.FetchAllSpecialties:
+            return Object.assign(Object.assign({}, state), { allSpecialties: action.payload });
+        case ActionTypes.FetchPopularKeys:
+            return Object.assign(Object.assign({}, state), { popularKeys: action.payload });
+        default:
+            return state;
+    }
+}
+
+const StyleSearchInputsWrapper = styled.div `
+  flex: 1;
+  position: relative;
+
+  ${MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+const StyleSearchBarContainer = styled.div `
+  background: #f7f9fc;
+  border-radius: 12px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 4px 12px 4px 4px;
+  gap: 16px;
+
+  ${MediaQueries.mbDown} {
+    height: 48px;
+    width: 100%;
+  }
+`;
+const StyleSearchIconWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: #8c8c8c;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const StyleResultWrapper = styled.div `
+  position: absolute;
+  top: calc(100% + 2px);
+  width: 100%;
+  border-radius: 4px;
+  background: ${theme.colors.white};
+  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+
+  ${MediaQueries.mbDown} {
+    width: calc(100% + 64px);
+    left: -32px;
+  }
+`;
+
+const StyledSearchResultWrapper = styled.div ``;
+styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-item: center;
+  padding: 9px 14px 9px 22px;
+  background: #f7f9fc;
+
+  .title {
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+  }
+
+  .btn-see-all {
+    color: ${theme.colors.blue600};
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+  }
+`;
+const StyleResultBody = styled.div `
+  padding: 10px 16px;
+  max-height: 400px;
+  overflow: auto;
+`;
+const StyleResultItem = styled.div `
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  cursor: pointer;
+
+  ${MediaQueries.mbUp} {
+    &:hover {
+      background-color: ${theme.colors.blue50};
+    }
+  }
+
+  .image-item {
+    flex: 0 0 48px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  .infor {
+    overflow: hidden;
+    padding: 12px 0;
+    flex: 1;
+    border-bottom: 1px solid ${theme.colors.neutral100};
+    .title {
+      color: ${theme.colors.gray800};
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+    .description {
+      overflow: hidden;
+      color: ${theme.colors.gray600};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+      line-height: 18px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-top: 5px;
+
+      svg {
+        flex: 0 0 16px;
+      }
+
+      .sub-description {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        flex: 1;
+      }
+    }
+  }
+
+  &.last-item {
+    .infor {
+      border-bottom: none;
+    }
+  }
+`;
+styled.div `
+  padding: 0 16px 16px;
+
+  .search-detail-btn {
+    color: ${theme.colors.blue600};
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+  }
+`;
+
+const SearchResult = ({ state, type, results, 
+// location,
+isLoading, typeInformation, 
+// clientSlug = '',
+dispatch, }) => {
+    const { t } = useTranslations();
+    const { selectedLocation } = state;
+    const typeSlug = useMemo(() => typeInformation[type].slug, [typeInformation, type]);
+    const handleOnClick = (item) => {
+        let url = '';
+        switch (type) {
+            case 'service':
+                url = `/${selectedLocation.slug}/${typeSlug}/${item.slug}`;
+                break;
+            case 'doctor':
+            case 'hospital':
+                url = `/${typeSlug}/${item.slug}-${item.id}`;
+                break;
+        }
+        if (url) {
+            dispatch({
+                type: ActionTypes.NavigateTo,
+                payload: url,
+            });
+        }
+    };
+    // const handleSeeAll = () => {
+    //   let url = `/${selectedLocation.slug}/${typeSlug}`
+    //   const slugClientUrl = MAPPING_CLIENT_WITH_SLUG[locale][clientSlug]
+    //   if (slugClientUrl) {
+    //     url += `/${slugClientUrl}`
+    //   }
+    //   if (
+    //     (type === 'doctor' || type === 'hospital') &&
+    //     state.selectedSpecialty.id > 0
+    //   ) {
+    //     url += `?specialtyId=${state.selectedSpecialty.id}`
+    //   }
+    //   if (url) {
+    //     dispatch({ type: ActionTypes.NavigateTo, payload: url })
+    //   }
+    // }
+    if (results === null)
+        return null;
+    return (React__default.createElement(StyledSearchResultWrapper, null,
+        React__default.createElement(StyleResultBody, { className: "search-results__body" },
+            isLoading && (React__default.createElement("div", { className: "skeleton-result" }, Array(3)
+                .fill(undefined)
+                .map((_, i) => (React__default.createElement(StyleResultItem, { key: type + 'loading' + i, className: i === 2 ? 'last-item' : '' },
+                React__default.createElement("div", { className: "image-item" },
+                    React__default.createElement(Skeleton, { height: 48, circle: true, mb: "xl", animate: true })),
+                React__default.createElement("div", { className: "infor" },
+                    React__default.createElement("div", { className: "title" },
+                        React__default.createElement(Skeleton, { height: 8, mt: 10, radius: "xl", animate: true })),
+                    React__default.createElement("div", { className: "description" },
+                        React__default.createElement("div", { className: "sub-description" },
+                            React__default.createElement(Skeleton, { height: 8, mt: 10, radius: "xl", width: "80%", animate: true }))))))))),
+            !isLoading && results && results.length > 0 && (React__default.createElement(React__default.Fragment, null, results.map((item, index) => {
+                var _a, _b;
+                const isLastItem = (results.length > 4 && index === 3) ||
+                    (results.length <= 4 && index === results.length - 1);
+                let subDescription = '';
+                if (type === 'hospital') {
+                    subDescription = (item === null || item === void 0 ? void 0 : item.address) || '';
+                }
+                if (type === 'doctor') {
+                    subDescription = ((_a = item === null || item === void 0 ? void 0 : item.specialties) === null || _a === void 0 ? void 0 : _a.join(', ')) || '';
+                }
+                if (type === 'service') {
+                    subDescription = ((_b = item === null || item === void 0 ? void 0 : item.hospital_branch) === null || _b === void 0 ? void 0 : _b.name) || '';
+                }
+                if (index >= 4) {
+                    return React__default.createElement(React__default.Fragment, null);
+                }
+                return (React__default.createElement(StyleResultItem, { key: item.id, className: clsx(isLastItem ? 'last-item' : '', 'result-item'), onClick: () => handleOnClick(item) },
+                    React__default.createElement("div", { className: "image-item" },
+                        React__default.createElement("img", { src: item.logo || item.avatar, alt: item.name })),
+                    React__default.createElement("div", { className: "infor" },
+                        React__default.createElement("div", { className: "title" }, item.name),
+                        React__default.createElement("div", { className: "description" },
+                            typeInformation[type].icon,
+                            React__default.createElement("div", { className: "sub-description" }, subDescription)))));
+            }))),
+            !isLoading && (results === null || results === void 0 ? void 0 : results.length) === 0 && (React__default.createElement(Text, { size: "sm", color: theme.colors.gray400, className: "noresult-block" }, t('booking.searchBar.noResults'))))));
+};
+
+const SearchResultContent = ({ state, type, isLoading, clientSlug, typeInformation, dispatch, }) => {
+    var _a;
+    if (state.focused !== 'search')
+        return null;
+    return (React__default.createElement(SearchResult, { type: type, state: state, results: ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a[type]) || null, location: state.selectedLocation.name, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug }));
+};
+
+const StyleSearchSpecialtyWrapper = styled.div `
+  position: relative;
+  flex-shrink: 0;
+
+  ${MediaQueries.mbDown} {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &.compact {
+    ${MediaQueries.mbDown} {
+      width: auto;
+      display: block;
+    }
+  }
+`;
+const StyleDropdownPanel = styled.div `
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 264px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.04),
+    0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 10px 16px 0px rgba(0, 0, 0, 0.04);
+  z-index: 10;
+  overflow: hidden;
+
+  &.mobile {
+    min-width: 280px;
+  }
+`;
+const StyledSpecialtyItem = styled.div `
+  cursor: pointer;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  outline: none;
+
+  .image-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .item-label {
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+    color: ${theme.colors.gray800};
+  }
+
+  &:hover {
+    background-color: ${theme.colors.neutral50};
+  }
+
+  &.selected {
+    background-color: ${theme.colors.neutral50};
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+`;
+
+const DoctorIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default.createElement("path", { d: "M8.983 14.333q-1.666 0-2.833-1.166Q4.983 12 4.983 10.333v-.366a3.48 3.48 0 0 1-2.258-1.2 3.57 3.57 0 0 1-.909-2.434V3.1a.58.58 0 0 1 .175-.425.58.58 0 0 1 .425-.175h1.4v-.167a.486.486 0 0 1 .5-.5q.217 0 .36.142a.5.5 0 0 1 .14.358v1.334a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V3.5h-1v2.833q0 1.1.784 1.884Q4.383 9 5.483 9t1.883-.783.784-1.884V3.5h-1v.167a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V2.333a.486.486 0 0 1 .5-.5q.217 0 .358.142a.5.5 0 0 1 .142.358V2.5h1.4a.58.58 0 0 1 .425.175.58.58 0 0 1 .175.425v3.233q0 1.4-.908 2.434a3.5 3.5 0 0 1-2.259 1.2v.366q0 1.25.875 2.126a2.9 2.9 0 0 0 2.125.874q1.25 0 2.125-.874a2.9 2.9 0 0 0 .875-2.126V9.25a1.74 1.74 0 0 1-.858-.609 1.6 1.6 0 0 1-.342-1.008q0-.716.5-1.216t1.2-.5q.716 0 1.217.5.5.5.5 1.216 0 .567-.342 1.008t-.875.609v1.083q0 1.667-1.167 2.834-1.166 1.166-2.833 1.166m3.5-6q.3 0 .509-.208a.67.67 0 0 0 .208-.492q0-.3-.208-.508a.7.7 0 0 0-.509-.208q-.3 0-.5.208a.7.7 0 0 0-.2.508q0 .284.2.492t.5.208", fill: "#595959" })));
+const ServiceIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default.createElement("path", { d: "M6.868 9.265v.974q0 .405.284.69.284.283.69.283t.69-.284.284-.69v-.973h.973q.405 0 .69-.284a.94.94 0 0 0 .284-.689.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284h-.973v-.974a.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284.94.94 0 0 0-.689.284.94.94 0 0 0-.285.69v.974h-.973a.94.94 0 0 0-.69.283.94.94 0 0 0-.284.69q0 .405.284.69.285.284.69.284zm-3.46 4.868q-.581 0-.994-.413A1.36 1.36 0 0 1 2 12.725v-6.65a1.4 1.4 0 0 1 .563-1.127l4.434-3.333q.369-.282.844-.282.474 0 .846.282l4.434 3.333q.264.193.413.493.15.3.15.633v6.651q0 .58-.414.995a1.36 1.36 0 0 1-.994.413zm0-1.168h8.868q.105 0 .172-.068a.23.23 0 0 0 .068-.172v-6.65a.2.2 0 0 0-.027-.11.3.3 0 0 0-.07-.085L7.983 2.554a.2.2 0 0 0-.142-.052.2.2 0 0 0-.142.052L3.266 5.88a.3.3 0 0 0-.071.086.2.2 0 0 0-.027.108v6.651q0 .105.068.172a.23.23 0 0 0 .172.068", fill: "#595959" })));
+const HospitalIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default.createElement("path", { d: "M8 8q.55 0 .941-.392.393-.391.392-.941 0-.55-.392-.942A1.28 1.28 0 0 0 8 5.333q-.55 0-.942.392a1.28 1.28 0 0 0-.391.942q0 .55.391.941Q7.45 8 8 8m0 4.9q2.032-1.866 3.017-3.392Q12 7.983 12 6.8q0-1.817-1.158-2.975Q9.682 2.667 8 2.667T5.158 3.825Q4 4.983 4 6.8q0 1.184.983 2.708Q5.966 11.034 8 12.9m0 1.517a.8.8 0 0 1-.5-.183q-2.433-2.151-3.633-3.992T2.667 6.8q0-2.5 1.608-3.983Q5.883 1.332 8 1.333q2.116 0 3.725 1.484T13.333 6.8q0 1.6-1.2 3.442-1.2 1.841-3.633 3.991a.8.8 0 0 1-.5.184", fill: "#8C8C8C" })));
+const SpecialtyIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
+    React__default.createElement("path", { d: "M3.833.5a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667M10.5.5c-.92 0-1.667.746-1.667 1.667V5.5c0 .92.746 1.667 1.667 1.667h3.333c.921 0 1.667-.746 1.667-1.667V2.167C15.5 1.246 14.754.5 13.833.5zM3.833 8.833a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667m8.334 0a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667", fill: "#9AA2AC" })));
+
+const SearchSpecialty = ({ state, isMobile, onSpecialtyClick, dispatch, isCompact = false, }) => {
+    const { t, locale } = useTranslations();
+    const inputSpecialtyWrapperRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
+    const [searchValue, setSearchValue] = useState('');
+    const [opened, { close, toggle }] = useDisclosure(false);
+    useOutsideClick(inputSpecialtyWrapperRef, () => {
+        close();
+        setSearchValue('');
+        dispatch({ type: ActionTypes.ClickOutsideInputSpecialty });
+    });
+    const specialtyData = useMemo(() => [
+        {
+            name: t('booking.searchBar.allSpecialties'),
+            id: -1,
+            thumbnail: '',
+            total_doctor: 0,
+            slug: slugs.SPECIALTIES,
+        },
+        ...state.allSpecialties,
+    ], [state.allSpecialties, t, slugs.SPECIALTIES]);
+    const filteredData = useMemo(() => {
+        if (!searchValue.trim())
+            return specialtyData;
+        return specialtyData.filter((s) => s.name.toLowerCase().includes(searchValue.toLowerCase().trim()));
+    }, [specialtyData, searchValue]);
+    const selectedLabel = useMemo(() => {
+        if (!state.selectedSpecialty)
+            return '';
+        return state.selectedSpecialty.name;
+    }, [state.selectedSpecialty]);
+    const handleSelect = useCallback((item) => {
+        onSpecialtyClick({
+            id: item.id,
+            name: item.name,
+            slug: item.slug,
+            thumbnail: item.thumbnail || '',
+            total_doctor: 0,
+        });
+        close();
+        setSearchValue('');
+    }, [onSpecialtyClick, close]);
+    const handleToggle = useCallback(() => {
+        toggle();
+        if (opened) {
+            setSearchValue('');
+        }
+    }, [toggle, opened]);
+    return (React__default.createElement(StyleSearchSpecialtyWrapper, { ref: inputSpecialtyWrapperRef, className: isCompact ? 'compact' : '' },
+        React__default.createElement(Box, { onClick: handleToggle, className: opened ? 'dropdown-trigger-open' : '', sx: {
+                cursor: 'pointer',
+                position: 'relative',
+                width: isCompact ? (isMobile ? 96 : 160) : '100%',
+                flexShrink: 0,
+            } },
+            React__default.createElement(Input, { readOnly: true, value: selectedLabel, placeholder: t('booking.searchPopup.specialties'), rightSection: React__default.createElement(ChevronDown, { style: { width: 20, height: 20 } }), styles: Object.assign({ input: {
+                        cursor: 'pointer',
+                        outline: 'none',
+                        '&:focus': {
+                            outline: 'none',
+                        },
+                        '&:not(.mantine-Textarea-input)': {
+                            height: isCompact ? 40 : isMobile ? 40 : 46,
+                            fontSize: isCompact ? rem(14) : isMobile ? rem(14) : rem(16),
+                            paddingLeft: isCompact ? 12 : 16,
+                            paddingRight: 30,
+                            background: isCompact ? 'white' : 'transparent',
+                            border: isCompact
+                                ? `1px solid ${theme.colors.gray200}`
+                                : 'none',
+                            borderRadius: 8,
+                            letterSpacing: '-0.2px',
+                            color: theme.colors.gray800,
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                        },
+                    }, rightSection: {
+                        width: 30,
+                        pointerEvents: 'none',
+                    } }, (!isCompact && {
+                    wrapper: {
+                        position: 'relative',
+                        '&:after': {
+                            content: '""',
+                            width: '1px',
+                            height: '20px',
+                            backgroundColor: theme.colors.neutral100,
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                        },
+                    },
+                })) })),
+        opened && (React__default.createElement(StyleDropdownPanel, { className: isMobile ? 'mobile' : '' },
+            React__default.createElement(Box, { sx: { padding: '12px 12px 8px' } },
+                React__default.createElement(Input, { ref: searchInputRef, icon: React__default.createElement(Search, { size: 18, color: theme.colors.gray300 }), placeholder: t('booking.searchBar.placeholder.specialty'), value: searchValue, onChange: (e) => setSearchValue(e.target.value), size: "md", styles: {
+                        input: {
+                            height: 40,
+                            fontSize: rem(15),
+                            paddingLeft: 36,
+                            '&::placeholder': {
+                                color: theme.colors.gray400,
+                            },
+                        },
+                        icon: {
+                            width: 36,
+                        },
+                    } })),
+            React__default.createElement(ScrollArea.Autosize, { mah: 300 }, filteredData.length === 0 ? (React__default.createElement(Box, { sx: {
+                    padding: '12px 16px',
+                    color: theme.colors.gray400,
+                    fontSize: 14,
+                } }, t('common.noResult'))) : (filteredData.map((specialty) => {
+                var _a, _b;
+                return (React__default.createElement(StyledSpecialtyItem, { key: specialty.id, tabIndex: 0, role: "option", "aria-selected": ((_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) === specialty.id, className: ((_b = state.selectedSpecialty) === null || _b === void 0 ? void 0 : _b.id) === specialty.id
+                        ? 'selected'
+                        : '', onClick: () => handleSelect(specialty), onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            handleSelect(specialty);
+                        }
+                    } },
+                    React__default.createElement("div", { className: "image-item" }, specialty.thumbnail ? (React__default.createElement("img", { src: specialty.thumbnail, alt: specialty.name })) : (React__default.createElement(SpecialtyIcon, null))),
+                    React__default.createElement("span", { className: "item-label" }, specialty.name)));
+            })))))));
+};
+
+const SearchInputs = forwardRef(({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', onSearch, onFocusInput, onEnterSearch, dispatch, onlyShowSearchBox, onChangeSpecialty, }, ref) => {
+    const { t } = useTranslations();
+    const inputSearchWrapperRef = useRef(null);
+    const internalInputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            var _a;
+            (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+    }));
+    const gaAttributes = useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [trackingAttributes]);
+    const placeholderSearch = useMemo(() => {
+        if (type === 'doctor')
+            return t('booking.searchBar.placeholder.doctor');
+        if (type === 'service')
+            return t('booking.searchBar.placeholder.service');
+        if (type === 'hospital')
+            return t('booking.searchBar.placeholder.hospital');
+        if (type === 'specialty')
+            return t('booking.searchBar.placeholder.specialty');
+        return '';
+    }, [type, t]);
+    const showSpecialtyInSearchBar = type !== 'specialty' &&
+        type !== 'service' &&
+        !hideSpecialtySelection &&
+        !onlyShowSearchBox;
+    const styleInputUnstyled = useMemo(() => ({
+        input: {
+            border: 'none',
+            background: 'transparent',
+            height: '100%',
+            fontSize: rem(16),
+            color: theme.colors.gray800,
+            padding: '0',
+            '&::placeholder': {
+                color: theme.colors.gray400,
+            },
+            '&:focus': {
+                outline: 'none',
+                boxShadow: 'none',
+            },
+            [isMobile ? '@media (max-width: 767px)' : '']: isMobile
+                ? {
+                    fontSize: rem(16),
+                }
+                : {},
+        },
+        wrapper: {
+            flex: 1,
+        },
+    }), [isMobile]);
+    useOutsideClick(inputSearchWrapperRef, () => {
+        !isMobile && dispatch({ type: ActionTypes.ClickOutsideInputSearch });
+    });
+    const handleSearchInputChange = useCallback(function handleSearchInputChange(value) {
+        dispatch({ type: ActionTypes.ChangeInputSearch, payload: value });
+        if (typeof onSearch === 'function') {
+            return;
+        }
+        if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale] ||
+            initalSearchValue ||
+            value.trim().length === 0) {
+            debouncedFetchSearchResults(value.trim(), state, type, clientSlug);
+        }
+    }, [
+        dispatch,
+        state,
+        type,
+        initalSearchValue,
+        debouncedFetchSearchResults,
+        clientSlug,
+        onSearch,
+    ]);
+    const handleSpecialtyClick = useCallback(function handleSpecialtyClick(specialty) {
+        var _a;
+        dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
+        onChangeSpecialty === null || onChangeSpecialty === void 0 ? void 0 : onChangeSpecialty(specialty);
+        !isMobile && ((_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [dispatch, onChangeSpecialty]);
+    const inputOnKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.stopPropagation();
+            e.preventDefault();
+            onEnterSearch && onEnterSearch();
+        }
+    }, [onEnterSearch]);
+    return (React__default.createElement(StyleSearchInputsWrapper, { ref: inputSearchWrapperRef },
+        React__default.createElement(StyleSearchBarContainer, null,
+            showSpecialtyInSearchBar && (React__default.createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick, isCompact: true })),
+            React__default.createElement(StyleSearchIconWrapper, null,
+                React__default.createElement(Search, null)),
+            React__default.createElement(Input, Object.assign({ ref: internalInputRef, variant: "unstyled", size: isMobile ? 'md' : 'lg', placeholder: placeholderSearch, styles: styleInputUnstyled, value: state.searchKeywords, name: "search-results", autoComplete: "off", onFocus: () => {
+                    dispatch({ type: ActionTypes.FocusInputSearch });
+                    onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
+                }, onChange: (event) => {
+                    handleSearchInputChange(event.target.value);
+                }, onKeyDown: inputOnKeyDown }, gaAttributes))),
+        !isMobile && type !== 'specialty' && (React__default.createElement(StyleResultWrapper, null,
+            React__default.createElement(SearchResultContent, { type: type, state: state, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug })))));
+});
+SearchInputs.displayName = 'SearchInputs';
+
+const ModalSearchResult = (_a) => {
+    var { searchInputEle, closeModal, children } = _a, props = __rest(_a, ["searchInputEle", "closeModal", "children"]);
+    const theme = useMantineTheme();
+    return (React__default.createElement(Modal, Object.assign({}, props, { zIndex: 310, fullScreen: true, styles: {
+            content: {
+                borderRadius: 0,
+                height: '100%',
+                '.search-results__body': { padding: 0 },
+                '.result-item': {
+                    paddingLeft: 16,
+                    paddingRight: 16,
+                },
+                '.noresult-block': {
+                    padding: 16,
+                },
+                '.skeleton-result': {
+                    padding: 16,
+                },
+            },
+            header: { display: 'none' },
+        } }),
+        React__default.createElement(Stack, { spacing: 16, sx: { paddingTop: 16 } },
+            React__default.createElement(Flex, { align: 'center', gap: 12 },
+                React__default.createElement(ArrowLeft, { size: 28, onClick: closeModal, color: theme.fn.primaryColor() }),
+                React__default.createElement(Box, { sx: { width: '100%' } }, searchInputEle)),
+            children)));
+};
+
+const StyleSearchLocationWrapper = styled.div `
+  position: relative;
+  width: 240px;
+  flex-shrink: 0;
+
+  ${MediaQueries.mbDown} {
+    width: 100%;
+  }
+`;
+styled.div `
+  position: absolute;
+  top: calc(100% + 2px);
+  width: 100%;
+  border-radius: 4px;
+  background: ${theme.colors.white};
+  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+
+  ${MediaQueries.mbDown} {
+    width: calc(100% + 64px);
+    left: -32px;
+  }
+`;
+const StyledLocationItem = styled.div `
+  position: relative;
+  cursor: pointer;
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  overflow: hidden;
+
+  & + 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;
+  }
+`;
+const StyledPinIcon = styled(PinIcon) `
+  width: 12px;
+  height: 18px;
+  flex: 0 0 12px;
+`;
+
+const CustomSelectItem = forwardRef((_a, ref) => {
+    var { label, value } = _a, others = __rest(_a, ["label", "value"]);
+    return (React__default.createElement("div", Object.assign({ ref: ref }, others),
+        React__default.createElement(StyledLocationItem, { key: value, role: "button", tabIndex: 0, "aria-label": `Select ${label} as location`, className: "location-item" },
+            React__default.createElement(StyledPinIcon, { color: theme.colors.neutral400 }),
+            React__default.createElement(Text$1, { size: "md" }, label))));
+});
+
+const SearchLocation = ({ state, debouncedFetchCitiesByKeyword, selectedLocation, trackingAttributes, onLocationClick, dispatch, }) => {
+    var _a;
+    const { t, locale } = useTranslations();
+    const inputLocationWrapperRef = useRef(null);
+    const citiesData = useMemo(() => {
+        var _a;
+        return [
+            {
+                name: t('booking.searchBar.allLocations'),
+                id: ID_OPTION_ALL_LOCATION,
+                slug: (_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
+            },
+            ...state.cities,
+        ];
+    }, [state.cities, t, locale]);
+    const gaAttributes = useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        return {};
+    }, [trackingAttributes]);
+    const handleSearchLocationInputChange = useCallback(function handleSearchLocationInputChange(value) {
+        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, state.locale]);
+    useOutsideClick(inputLocationWrapperRef, () => {
+        dispatch({ type: ActionTypes.ClickOutsideInputLocation });
+    });
+    const stateValue = (_a = selectedLocation === null || selectedLocation === void 0 ? void 0 : selectedLocation.id) !== null && _a !== void 0 ? _a : null;
+    const defaultValue = stateValue === null ? undefined : String(stateValue);
+    return (React__default.createElement(StyleSearchLocationWrapper, { ref: inputLocationWrapperRef },
+        React__default.createElement(Select, Object.assign({ key: defaultValue !== null && defaultValue !== void 0 ? defaultValue : 'no-selected-location', defaultValue: defaultValue, placeholder: t('booking.searchBar.allLocations'), searchable: true, onSearchChange: (value) => {
+                handleSearchLocationInputChange(value);
+            }, onFocus: () => {
+                dispatch({ type: ActionTypes.DisplayInitialCities });
+            }, onDropdownClose: () => {
+                debouncedFetchCitiesByKeyword.cancel();
+                dispatch({ type: ActionTypes.DisplayInitialCities });
+            }, nothingFound: t('common.noResult'), maxDropdownHeight: 340, dropdownPosition: "bottom", icon: React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React__default.createElement("path", { d: "M9.99908 10.8332C11.2264 10.8332 12.2213 9.83764 12.2213 8.61097C12.2213 7.3843 11.2264 6.38875 9.99908 6.38875C8.77174 6.38875 7.77686 7.3843 7.77686 8.61097C7.77686 9.83764 8.77174 10.8332 9.99908 10.8332Z", stroke: "#111111", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+                React__default.createElement("path", { d: "M9.99919 18.0554C11.7584 17.4999 16.6659 13.611 16.6659 8.61097C16.6659 4.93097 13.6811 1.94431 9.99919 1.94431C6.3173 1.94431 3.33252 4.93097 3.33252 8.61097C3.33252 13.611 8.23996 17.4999 9.99919 18.0554Z", stroke: "#111111", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), rightSection: React__default.createElement(ChevronDown, { style: { width: 20, height: 20 } }) }, gaAttributes, { styles: () => ({
+                item: {
+                    padding: 0,
+                    '&[data-selected]': {
+                        '&, &:hover': {
+                            backgroundColor: '#F7F9FC',
+                            color: 'inherit',
+                        },
+                        '.location-item': {
+                            '&::after': {
+                                content: checkMarkIconUrl,
+                                top: '50%',
+                                right: 19,
+                                position: 'absolute',
+                                transform: 'translateY(-50%)',
+                            },
+                        },
+                    },
+                    '&[data-hovered]': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+                root: {
+                    width: '100%',
+                },
+                wrapper: {
+                    width: '100%',
+                },
+                input: {
+                    '&:not(.mantine-Textarea-input)': {
+                        height: 48,
+                        fontSize: rem(15),
+                        fontWeight: 400,
+                        letterSpacing: '-0.3px',
+                        color: theme.colors.gray1000,
+                        paddingLeft: 44,
+                        paddingRight: 40,
+                        background: 'white',
+                        border: `1px solid ${theme.colors.gray200}`,
+                        borderRadius: 12,
+                    },
+                },
+                icon: {
+                    width: 44,
+                    paddingLeft: 12,
+                },
+                rightSection: {
+                    width: 40,
+                    paddingRight: 12,
+                },
+                itemsWrapper: {
+                    padding: 0,
+                },
+                dropdown: {
+                    left: '0 !important',
+                    border: 0,
+                    marginTop: 4,
+                    borderRadius: 12,
+                    overflow: 'hidden',
+                    boxShadow: '0px 0px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 10px 16px 0px rgba(0, 0, 0, 0.04)',
+                    '& ::-webkit-scrollbar': {
+                        width: '6px',
+                        height: '6px',
+                    },
+                },
+            }), itemComponent: CustomSelectItem, filter: () => true, onChange: (value) => {
+                if (value == null)
+                    return;
+                const city = citiesData.find((i) => String(i.id) === value);
+                if (!city)
+                    return;
+                onLocationClick(city);
+                debouncedFetchCitiesByKeyword.cancel();
+                dispatch({ type: ActionTypes.DisplayInitialCities });
+                setTimeout(() => {
+                    var _a, _b;
+                    (_b = (_a = inputLocationWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.blur();
+                }, 0);
+            }, data: citiesData.map((city) => ({
+                value: String(city.id),
+                label: city.name,
+                city,
+            })) }))));
+};
+
+const StyleSpecialtiesWrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 8px;
+  column-gap: 20px;
+  ${MediaQueries.mbDown} {
+    margin-top: 12px;
+  }
+`;
+const StyleSpecialtyItem = styled.div `
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid ${theme.colors.neutral100};
+  background: ${theme.colors.white};
+  padding: 8px 12px 8px 8px;
+  flex: 0 0 calc(33.3% - 13px);
+  gap: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background: ${theme.colors.blue50};
+  }
+
+  ${MediaQueries.tdDown} {
+    flex: 0 0 calc(50% - 10px);
+  }
+
+  ${MediaQueries.mbDown} {
+    flex: 0 0 100%;
+    border: none;
+  }
+
+  .image-item {
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .infor {
+    flex: 1;
+    .title {
+      color: ${theme.colors.gray800};
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+
+    .description {
+      color: ${theme.colors.gray600};
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+    }
+  }
+`;
+const StyleDivider = styled(Divider) `
+  margin: 24px 0 !important;
+`;
+const StyleShowMore = styled.div `
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+  .show-more {
+    border-radius: 4px;
+    border: 1px solid ${theme.colors.neutral200};
+    padding: 12px 16px;
+    cursor: pointer;
+    display: inline-block;
+    color: ${theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+
+    ${MediaQueries.mbDown} {
+      width: 100%;
+      text-align: center;
+    }
+  }
+`;
+
+const SearchResultSpecialties = ({ state, isMobile, specialties, isLoading, dispatch, }) => {
+    const { t, locale } = useTranslations();
+    const { selectedLocation } = state;
+    const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
+    const handleOnClick = (specialtySlug) => {
+        let url = '';
+        if (specialtySlug === SLUG_VACIN_ID) {
+            url = `/${selectedLocation.slug}/${slugs.HOSPITAL}/${CLIENT_KEY.GSK}/`;
+            dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
+        }
+        else {
+            url = `/${selectedLocation.slug}/${slugs.DOCTOR}/${specialtySlug}`;
+        }
+        dispatch({ type: ActionTypes.NavigateTo, payload: url });
+    };
+    const handleShowMore = () => {
+        const url = `/${slugs.SPECIALTIES}`;
+        dispatch({ type: ActionTypes.NavigateTo, payload: url });
+    };
+    const showSeeMore = useMemo(() => {
+        return (specialties.length >= 9 ||
+            state.searchKeywords.trim().length <=
+                SEARCH_KEYWORD_MIN_LENGTH[state.locale]);
+    }, [state.searchKeywords, specialties]);
+    return (React__default.createElement(React__default.Fragment, null,
+        !isMobile && React__default.createElement(StyleDivider, { color: "#E4E8EC" }),
+        React__default.createElement(StyleSpecialtiesWrapper, null,
+            specialties.length > 0 && !isLoading && (React__default.createElement(React__default.Fragment, null, specialties.map((specialty, index) => {
+                if (index >= 9) {
+                    return React__default.createElement(React__default.Fragment, null);
+                }
+                return (React__default.createElement(StyleSpecialtyItem, { key: specialty.id, onClick: () => handleOnClick(specialty.slug) },
+                    React__default.createElement("div", { className: "image-item" },
+                        React__default.createElement("img", { src: specialty.thumbnail, alt: specialty.name })),
+                    React__default.createElement("div", { className: "infor" },
+                        React__default.createElement("div", { className: "title" }, specialty.name))));
+            }))),
+            specialties.length === 0 && !isLoading && (React__default.createElement(Text, { size: "sm", color: theme.colors.gray400 }, t('booking.searchBar.noResults'))),
+            isLoading &&
+                Array(6)
+                    .fill(undefined)
+                    .map((_, i) => (React__default.createElement(StyleSpecialtyItem, { key: 'loading' + i },
+                    React__default.createElement("div", { className: "image-item" },
+                        React__default.createElement(Skeleton, { height: 40, animate: true })),
+                    React__default.createElement("div", { className: "infor" },
+                        React__default.createElement("div", { className: "title" },
+                            React__default.createElement(Skeleton, { height: 20, radius: "sm", animate: true }))))))),
+        showSeeMore && (React__default.createElement(StyleShowMore, null,
+            React__default.createElement("div", { className: "show-more", onClick: handleShowMore }, t('home.seeAll'))))));
+};
+
+const StyleSearchTagWrapper = styled.div `
+  display: flex;
+  gap: 5px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+`;
+const StyleTagItem = styled.div `
+  color: ${theme.colors.gray600};
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  padding: 4px 12px;
+  background: ${theme.colors.white};
+  border-radius: 32px;
+  cursor: pointer;
+  border: 1px solid ${theme.colors.white};
+  margin-bottom: 5px;
+  border-color: ${theme.colors.neutral100};
+  background: #f7f9fc;
+
+  &.view-all {
+    border-radius: 32px;
+    border-color: ${theme.colors.blue50};
+    background: ${theme.colors.blue50};
+    color: ${theme.colors.blue600};
+
+    &:hover {
+      border-color: ${theme.colors.blue50};
+      background: ${theme.colors.blue50};
+      color: ${theme.colors.blue600};
+    }
+  }
+
+  &:hover {
+    border-color: ${theme.colors.neutral100};
+    background: #f7f9fc;
+  }
+`;
+const StyleTagLabel = styled.div `
+  color: ${theme.colors.gray600};
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  padding: 4px 0;
+  background: ${theme.colors.white};
+  border-radius: 32px;
+  border: 1px solid ${theme.colors.white};
+  margin-bottom: 5px;
+  margin-right: 7px;
+`;
+
+const SearchTag = ({ state, type, typeInformation, dispatch }) => {
+    const { t } = useTranslations();
+    const { selectedLocation } = state;
+    const typeSlug = useMemo(() => typeInformation[type].slug, [typeInformation, type]);
+    const handleViewAll = () => {
+        const url = `/${selectedLocation.slug}/${typeSlug}`;
+        if (url) {
+            dispatch({ type: ActionTypes.NavigateTo, payload: url });
+        }
+    };
+    const handleClickKeyword = (keyword) => {
+        if (keyword.url) {
+            window.location.href = keyword.url;
+        }
+    };
+    return (React__default.createElement(StyleSearchTagWrapper, null,
+        React__default.createElement(StyleTagLabel, null, t('booking.searchBar.popularKey')),
+        state.popularKeys.map((item) => {
+            return (React__default.createElement(StyleTagItem, { key: item.id, onClick: () => handleClickKeyword(item) }, item.keyword));
+        }),
+        React__default.createElement(StyleTagItem, { className: "view-all", onClick: handleViewAll }, t('booking.searchBar.viewAll'))));
+};
+
+const StyledTabWrapper = styled.div `
+  background: rgba(255, 255, 255, 0.64);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid ${theme.colors.neutral100};
+`;
+const StyleTabContainer = styled(Container) `
+  padding: 0 16px;
+`;
+
+const TabSearch = ({ currentTab, hideTabBookingSearch = [], hideSpecialtyTab, isMobile, setCurrentTab, }) => {
+    const { t } = useTranslations();
+    const stylesTabs = useMemo(() => {
+        return {
+            root: {
+                overflowY: isMobile ? 'hidden' : 'initial',
+                overflowX: isMobile ? 'auto' : 'initial',
+            },
+            tabsList: {
+                background: 'rgba(255, 255, 255, 0)',
+                borderBottom: 'none',
+                flexWrap: 'nowrap',
+                '.mantine-Tabs-tab': {
+                    '&:last-child': {
+                        '&:after': {
+                            display: 'none',
+                        },
+                    },
+                },
+            },
+            tab: {
+                padding: isMobile ? '12px 16px 12px 16px' : '15px 40px 15px 40px',
+                borderTop: '2px solid transparent',
+                borderBottom: 'none',
+                margin: 0,
+                borderRadius: 0,
+                position: 'relative',
+                width: 'auto',
+                '&[data-active="true"]': {
+                    borderColor: '#2d87f3',
+                    backgroundColor: '#ffffff',
+                    '&:after': {
+                        display: 'none',
+                    },
+                    '&:before': {
+                        content: '""',
+                        width: '100%',
+                        height: '1px',
+                        position: 'absolute',
+                        backgroundColor: '#ffffff',
+                        bottom: '-1px',
+                    },
+                },
+                '&:hover': {
+                    borderColor: '#2d87f3',
+                    backgroundColor: '#ffffff',
+                    '&:before': {
+                        content: '""',
+                        width: '100%',
+                        height: '1px',
+                        position: 'absolute',
+                        backgroundColor: '#ffffff',
+                        bottom: '-1px',
+                    },
+                },
+                '&:after': {
+                    content: '""',
+                    width: '1px',
+                    height: '24px',
+                    backgroundColor: '#E4E8EC',
+                    position: 'absolute',
+                    right: '-1px',
+                },
+            },
+            tabLabel: {
+                color: '#595959',
+                fontSize: isMobile ? '14px' : '16px',
+                fontWeight: 600,
+                lineHeight: isMobile ? '22px' : '24px',
+            },
+        };
+    }, [isMobile]);
+    const tabConfig = useMemo(() => [
+        {
+            value: 'hospital',
+            label: t('booking.searchPopup.hospitals'),
+        },
+        {
+            value: 'doctor',
+            label: t('booking.searchPopup.doctors'),
+        },
+        {
+            value: 'service',
+            label: t('booking.searchPopup.services'),
+        },
+        ...(!hideSpecialtyTab
+            ? [
+                {
+                    value: 'specialty',
+                    label: t('booking.searchPopup.specialties'),
+                },
+            ]
+            : []),
+    ], [hideSpecialtyTab]);
+    const activeTabs = useMemo(() => {
+        return (tabConfig.filter((item) => !hideTabBookingSearch.includes(item.value)) ||
+            []);
+    }, [hideTabBookingSearch, tabConfig]);
+    return (React__default.createElement(StyledTabWrapper, { className: "booking-search-tab" },
+        React__default.createElement(StyleTabContainer, null,
+            React__default.createElement(Tabs, { value: currentTab, onTabChange: (tab) => {
+                    setCurrentTab(tab);
+                }, styles: stylesTabs },
+                React__default.createElement(Tabs.List, null, activeTabs.map((tab) => {
+                    return (React__default.createElement(Tabs.Tab, { value: tab.value, key: tab.value }, tab.label));
+                }))))));
+};
+
+var TypePopularKeySearch;
+(function (TypePopularKeySearch) {
+    TypePopularKeySearch["doctor"] = "doctor";
+    TypePopularKeySearch["service"] = "hospital_service";
+    TypePopularKeySearch["hospital"] = "hospital_branch";
+})(TypePopularKeySearch || (TypePopularKeySearch = {}));
+
+const ignoreCacarSpecialty = (specialties) => {
+    return specialties.filter((item) => {
+        if (typeof item === 'string') {
+            return item !== 'cacar-api';
+        }
+        return (item === null || item === void 0 ? void 0 : item.id) !== 232;
+    });
+};
+function useSearchBarApi({ dispatch, careApiDomain, locale = 'vi-VN', client = '', }) {
+    const fetchCitiesApi = useCallback(function fetchCitiesApi(path, params = {}) {
+        const url = `${careApiDomain}${path}`;
+        dispatch({ type: ActionTypes.FetchCitiesStart });
+        return fetch(getApiPath(url, params, locale), { method: 'GET' })
+            .then((res) => res.json())
+            .then((data) => {
+            if (data._status !== 1 || !data._data) {
+                console.log('error loading cities', data);
+                return Promise.reject(data);
+            }
+            return data === null || data === void 0 ? void 0 : data._data;
+        })
+            .finally(() => dispatch({ type: ActionTypes.FetchCitiesFinish }));
+    }, [locale]);
+    const fetchCitiesByLocation = useCallback(function fetchCitiesByLocation({ coordinates }) {
+        let params = {};
+        const moreParams = {};
+        if (coordinates) {
+            params = {
+                lat: coordinates.lat,
+                lng: coordinates.lng,
+            };
+        }
+        if (locale === 'ms-MY') {
+            moreParams.noPaging = 1;
+        }
+        const requests = [
+            fetchCitiesApi(PATHS.GET_CITY_BY_IP, Object.assign(Object.assign(Object.assign({}, params), moreParams), { hospitalActive: 1, client: CLIENT_KEY.MSD === client ? '' : client })),
+        ];
+        if (locale === 'zh-TW') {
+            requests.push(fetchCitiesApi(PATHS.GET_CITIES_LIST, {
+                noPaging: 1,
+                hospitalActive: 1,
+                client: CLIENT_KEY.MSD === client ? '' : client,
+            }));
+        }
+        else {
+            requests.push(fetchCitiesApi(PATHS.GET_CITIES_LIST, {
+                noPaging: 1,
+                hospitalActive: 1,
+            }));
+        }
+        return Promise.all(requests)
+            .then(([data1, data2]) => {
+            const data = Object.assign({}, data1);
+            if (data2) {
+                const citiesIds = data.cities.map((c) => c.id);
+                data.cities = data.cities.concat(data2.cities.filter((c) => !citiesIds.includes(c.id)));
+            }
+            dispatch({
+                type: ActionTypes.FetchCitiesByGeoIpComplete,
+                payload: data,
+            });
+        })
+            .catch((err) => console.error('error loading cities by location', err));
+    }, [locale, careApiDomain, dispatch]);
+    const fetchCitiesByKeyword = useCallback(function fetchCitiesByKeyword(keyword) {
+        return fetchCitiesApi(PATHS.GET_CITIES_LIST, {
+            keyword,
+            client,
+        })
+            .then((data) => {
+            dispatch({
+                type: ActionTypes.FetchCitiesByKeywordComplete,
+                payload: data.cities,
+            });
+        })
+            .catch((err) => console.error('error loading cities by keyword', err));
+    }, [locale, careApiDomain, dispatch]);
+    const fetchSearchResults = useCallback(function fetchSearchResults(searchKeywords, state, searchType, clientSlug, cacheResult) {
+        const url = searchType === 'specialty'
+            ? `${careApiDomain}${PATHS.GET_SEARCH_SPECIALTY}`
+            : `${careApiDomain}${PATHS.GET_SEARCH_V2}`;
+        dispatch({ type: ActionTypes.FetchSearchResultsStart });
+        const { selectedLocation, geoLocationCoordinates, selectedSpecialty } = state;
+        let cityId = '';
+        if (!selectedLocation) {
+            dispatch({ type: ActionTypes.FetchSearchResultsFinish });
+            return;
+        }
+        if (selectedLocation.id === ID_OPTION_ALL_LOCATION) {
+            cityId = '';
+        }
+        else {
+            cityId = selectedLocation.id;
+        }
+        const lat = (geoLocationCoordinates === null || geoLocationCoordinates === void 0 ? void 0 : geoLocationCoordinates.lat) || '';
+        const lng = (geoLocationCoordinates === null || geoLocationCoordinates === void 0 ? void 0 : geoLocationCoordinates.lng) || '';
+        const specialty_id = (selectedSpecialty === null || selectedSpecialty === void 0 ? void 0 : selectedSpecialty.id) > 0 ? selectedSpecialty === null || selectedSpecialty === void 0 ? void 0 : selectedSpecialty.id : '';
+        const keyword = searchKeywords.trim().length > SEARCH_KEYWORD_MIN_LENGTH[locale]
+            ? searchKeywords.trim()
+            : '';
+        return fetch(getApiPath(url, Object.assign({ domain: careApiDomain, searchType: searchType || 'global', keyword: keyword, city: cityId === ID_OPTION_CURRENT_LOCATION ? '' : cityId, lat,
+            lng,
+            specialty_id, client_slug: CLIENT_KEY.MSD === clientSlug ? '' : clientSlug, msd: CLIENT_KEY.MSD === client ? 1 : '' }, (searchType === 'doctor' && {
+            skipBooking: 1,
+        })), locale), {
+            method: 'GET',
+            headers: {
+                accept: 'version=2.0.0.0',
+            },
+        })
+            .then((res) => res.json())
+            .then((data) => {
+            if (data._status !== 1 || !data._data) {
+                return Promise.reject(data);
+            }
+            return data === null || data === void 0 ? void 0 : data._data;
+        })
+            .then((results) => {
+            let searchesResult = [];
+            if (searchType !== 'specialty') {
+                if (searchType === 'doctor') {
+                    searchesResult = results.searches.map((item) => {
+                        return Object.assign(Object.assign({}, item), { specialties: ignoreCacarSpecialty((item === null || item === void 0 ? void 0 : item.specialties) || []) });
+                    });
+                }
+                else {
+                    searchesResult = results.searches;
+                }
+            }
+            if (searchType === 'specialty') {
+                if (keyword) {
+                    searchesResult = ignoreCacarSpecialty((results === null || results === void 0 ? void 0 : results.specialties) || []);
+                }
+                else {
+                    searchesResult = ignoreCacarSpecialty((results === null || results === void 0 ? void 0 : results.default) || []);
+                }
+            }
+            dispatch({
+                type: ActionTypes.FetchSearchResultsComplete,
+                payload: {
+                    key: searchType,
+                    searches: searchesResult || [],
+                },
+            });
+            if (cacheResult) {
+                dispatch({
+                    type: ActionTypes.UpdateInitialSearchResults,
+                    payload: {
+                        key: searchType,
+                        searches: searchesResult || [],
+                    },
+                });
+            }
+        })
+            .catch((error) => {
+            console.log('error loading search results', { url, error });
+        })
+            .finally(() => dispatch({ type: ActionTypes.FetchSearchResultsFinish }));
+    }, [locale, careApiDomain, dispatch]);
+    const fetchAllSpecialties = useCallback(function fetchSearchSpecialties() {
+        const url = `${careApiDomain}${PATHS.GET_SEARCH_SPECIALTY}`;
+        return fetch(getApiPath(url, {
+            domain: careApiDomain,
+            searchType: '',
+            msd: CLIENT_KEY.MSD === client ? 1 : '',
+        }, locale), {
+            method: 'GET',
+            headers: {
+                accept: 'version=2.0.0.0',
+            },
+        })
+            .then((res) => res.json())
+            .then((data) => {
+            if (data._status !== 1 || !data._data) {
+                return Promise.reject(data);
+            }
+            return data === null || data === void 0 ? void 0 : data._data;
+        })
+            .then((results) => {
+            dispatch({
+                type: ActionTypes.FetchAllSpecialties,
+                payload: ignoreCacarSpecialty(results.specialties || []),
+            });
+        })
+            .catch((error) => {
+            console.log('error loading search results', { url, error });
+        });
+    }, [locale, careApiDomain, dispatch]);
+    const fetchPopularKeys = useCallback(function fetchPopularKeys(searchType) {
+        const url = `${careApiDomain}${PATHS.GET_SEARCH_POPULAR_KEY}`;
+        return fetch(getApiPath(url, {
+            domain: careApiDomain,
+            searchType: TypePopularKeySearch[searchType],
+            sort_by: 'display_order',
+            sort_order: 'asc',
+        }, locale))
+            .then((res) => res.json())
+            .then((data) => {
+            if (data._status !== 1 || !data._data) {
+                return Promise.reject(data);
+            }
+            return data === null || data === void 0 ? void 0 : data._data;
+        })
+            .then((results) => {
+            dispatch({
+                type: ActionTypes.FetchPopularKeys,
+                payload: results.popular_searches || [],
+            });
+        })
+            .catch((error) => {
+            console.log('error loading search results', { url, error });
+        });
+    }, [locale, careApiDomain, dispatch]);
+    return {
+        fetchCitiesByLocation,
+        fetchCitiesByKeyword,
+        fetchSearchResults,
+        fetchAllSpecialties,
+        fetchPopularKeys,
+    };
+}
+
+const BookingSearchBarV3 = ({ isMobile, careApiDomain, geoLocationPermission: geoLocationPermissionFromProps, geoLocationCoordinates: geoLocationCoordinatesFromProps, initialSelectedCity: initialSelectedCityFromProps, initialSearchValue = '', initTypeSearch = 'hospital', initSpecialty, careFrontDomain = '/care', isDebug = false, 
+// askForGeolocationPermission = false,
+gaTrackingSearchBar, gaTrackingLocationSearch, autoCompleteDisabled = false, inputSearchPlaceholder = '', hideTabBookingSearch = [], hideSpecialtySelection = false, hideSpecialtyTab = false, hidePopularSearchKeys = false, clientSlug = '', 
+// isOptionAllLocation = false,
+// hideResults = [],
+// isNavResultItem = true,
+triggerSearchWhenChangeFilter, routerPush, onGeoLocationPermissionChange, 
+// onSearch,
+onChangeLocation, }) => {
+    var _a;
+    const { locale, t } = useTranslations();
+    const wrapperRef = useRef(null);
+    const searchInputDesktopRef = useRef(null);
+    const searchInputMobileRef = useRef(null);
+    const inputSearchSpecialtyWrapperRef = useRef(null);
+    const [currentTab, setCurrentTab] = useState(initTypeSearch);
+    const { geoLocationPermission: geoLocationPermissionFromHook, geoLocationCoordinates: geoLocationCoordinatesFromHook, } = useGeolocation();
+    const [state, dispatch] = useReducer(reducer, initialState, (s) => (Object.assign(Object.assign({}, s), { isDebug,
+        isMobile, geoLocationPermission: geoLocationPermissionFromProps ||
+            geoLocationPermissionFromHook ||
+            'unset', geoLocationCoordinates: geoLocationCoordinatesFromProps ||
+            geoLocationCoordinatesFromHook ||
+            null, searchKeywords: initialSearchValue, initialSelectedCity: initialSelectedCityFromProps || null, selectedLocation: initialSelectedCityFromProps || s.selectedLocation || null, searchLocationKeywords: (initialSelectedCityFromProps === null || initialSelectedCityFromProps === void 0 ? void 0 : initialSelectedCityFromProps.name) || s.searchLocationKeywords, autoCompleteDisabled,
+        inputSearchPlaceholder,
+        locale })));
+    const { navigateTo, focusedSpecialty, 
+    // isLoadingCities,
+    // cities,
+    searchKeywords, geoLocationPermission, selectedLocation, 
+    // selectedSpecialty,
+    initialSelectedCity, 
+    // defaultCity,
+    searchResults, isLoadingSearchResults,
+    // isMobileModalOpened,
+    // inputSearchPlaceholder,
+    // allSpecialties,
+     } = state;
+    const { fetchCitiesByLocation, fetchCitiesByKeyword, fetchSearchResults, fetchAllSpecialties, fetchPopularKeys, } = useSearchBarApi({
+        dispatch,
+        locale,
+        careApiDomain,
+        client: clientSlug,
+    });
+    const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
+    const [opened, { close, open }] = useDisclosure(false);
+    const typeInformation = useMemo(() => {
+        return Object.assign({ doctor: {
+                name: t('booking.searchPopup.doctors'),
+                icon: React__default.createElement(DoctorIcon, null),
+                slug: slugs.DOCTOR,
+            }, service: {
+                name: t('booking.searchPopup.services'),
+                icon: React__default.createElement(ServiceIcon, null),
+                slug: slugs.SERVICE,
+            }, hospital: {
+                name: t('booking.searchPopup.hospitals'),
+                icon: React__default.createElement(HospitalIcon, null),
+                slug: slugs.HOSPITAL,
+            } }, (!hideSpecialtyTab && {
+            specialty: {
+                name: t('booking.searchPopup.specialties'),
+                icon: React__default.createElement(SpecialtyIcon, null),
+                slug: slugs.SPECIALTIES,
+            },
+        }));
+    }, [currentTab]);
+    const debouncedFetchCitiesByKeyword = useMemo(() => debounce(fetchCitiesByKeyword, 400), [fetchCitiesByKeyword]);
+    const debouncedFetchSearchResults = useMemo(() => debounce(fetchSearchResults, 400), [fetchSearchResults]);
+    // function focusSearchInput() {
+    //   if (wrapperRef.current) {
+    //     wrapperRef.current
+    //       .querySelector<HTMLInputElement>('input[name="search-results"]')
+    //       ?.focus()
+    //   }
+    // }
+    const onClickSearchByKeyword = useCallback(function onClickSearchByKeyword({ locationSlug, specialtyId, } = {}) {
+        var _a;
+        close();
+        let url = '';
+        const { slug: typeSlug } = typeInformation[currentTab];
+        let moreParams = '';
+        const slugClientUrl = MAPPING_CLIENT_WITH_SLUG[locale][clientSlug];
+        const selectedSpecialtyId = specialtyId || ((_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) || -1;
+        const selectedLocationSlug = locationSlug || (selectedLocation === null || selectedLocation === void 0 ? void 0 : selectedLocation.slug) || '';
+        if ((currentTab === 'doctor' || currentTab === 'hospital') &&
+            selectedSpecialtyId > 0) {
+            moreParams = `&specialtyId=${selectedSpecialtyId}`;
+        }
+        if (currentTab === 'specialty') {
+            url = `/${typeSlug}`;
+        }
+        else {
+            url = `/${selectedLocationSlug}/${typeSlug}`;
+        }
+        if (slugClientUrl) {
+            url += `/${slugClientUrl}`;
+        }
+        url += `?q=${searchKeywords}${moreParams}`;
+        if (url) {
+            dispatch({ type: ActionTypes.NavigateTo, payload: url });
+        }
+    }, [
+        clientSlug,
+        close,
+        currentTab,
+        dispatch,
+        locale,
+        searchKeywords,
+        selectedLocation === null || selectedLocation === void 0 ? void 0 : selectedLocation.slug,
+        (_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id,
+        typeInformation,
+    ]);
+    const handleLocationClick = useCallback(function handleLocationClick(city) {
+        triggerSearchWhenChangeFilter &&
+            onClickSearchByKeyword({ locationSlug: city.slug });
+        dispatch({ type: ActionTypes.SelectLocation, payload: city });
+        if (onChangeLocation) {
+            onChangeLocation(city);
+        }
+    }, [
+        dispatch,
+        isMobile,
+        onChangeLocation,
+        onClickSearchByKeyword,
+        triggerSearchWhenChangeFilter,
+    ]);
+    useOutsideClick(inputSearchSpecialtyWrapperRef, () => {
+        !isMobile &&
+            dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
+    });
+    useEffect(() => {
+        var _a;
+        if (geoLocationPermission !== 'denied' && !initialSelectedCity) {
+            dispatch({
+                type: ActionTypes.SelectLocation,
+                payload: {
+                    name: t('booking.searchBar.allLocations'),
+                    id: ID_OPTION_ALL_LOCATION,
+                    slug: (_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
+                },
+            });
+        }
+        if (onGeoLocationPermissionChange) {
+            onGeoLocationPermissionChange(geoLocationPermission, state.geoLocationCoordinates);
+        }
+        if (isMobile && geoLocationPermission === 'granted' && selectedLocation) {
+            dispatch({ type: ActionTypes.FocusInputSearch });
+        }
+        fetchCitiesByLocation({ coordinates: state.geoLocationCoordinates });
+    }, [geoLocationPermission]);
+    useEffect(() => {
+        var _a;
+        const defaultSpecialty = initSpecialty
+            ? initSpecialty
+            : {
+                name: t('booking.searchBar.allSpecialties'),
+                id: -1,
+                thumbnail: '',
+                total_doctor: 0,
+                slug: slugs.SPECIALTIES,
+            };
+        if (initSpecialty) {
+            if (((_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) !== initSpecialty.id) {
+                dispatch({
+                    type: ActionTypes.SelectSpecialty,
+                    payload: initSpecialty,
+                });
+            }
+            return;
+        }
+        if (!state.selectedSpecialty ||
+            state.selectedSpecialty.id !== defaultSpecialty.id) {
+            dispatch({
+                type: ActionTypes.SelectSpecialty,
+                payload: defaultSpecialty,
+            });
+        }
+    }, [initSpecialty, slugs.SPECIALTIES, t]);
+    useEffect(() => {
+        fetchAllSpecialties();
+    }, []);
+    useEffect(() => {
+        fetchPopularKeys(currentTab);
+    }, [currentTab]);
+    useEffect(() => {
+        if (navigateTo) {
+            if (routerPush) {
+                routerPush(navigateTo);
+            }
+            else {
+                window.location.href = `${careFrontDomain}${navigateTo}`;
+            }
+        }
+    }, [navigateTo]);
+    useEffect(() => {
+        fetchSearchResults(state.searchKeywords, state, currentTab, clientSlug, true);
+    }, [currentTab]);
+    useEffect(() => {
+        if (opened && isMobile) {
+            const timer = setTimeout(() => {
+                var _a;
+                (_a = searchInputMobileRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 150);
+            return () => clearTimeout(timer);
+        }
+    }, [opened, isMobile]);
+    const searchInputsProps = {
+        type: currentTab,
+        isMobile: isMobile,
+        state: state,
+        dispatch: dispatch,
+        debouncedFetchSearchResults: debouncedFetchSearchResults,
+        initalSearchValue: initialSearchValue,
+        // focusSearchInput: focusSearchInput,
+        onEnterSearch: onClickSearchByKeyword,
+        typeInformation: typeInformation,
+        trackingAttributes: gaTrackingSearchBar,
+        isLoading: isLoadingSearchResults,
+        hideSpecialtySelection: hideSpecialtySelection || hideSpecialtyTab,
+        clientSlug: clientSlug,
+        triggerSearchWhenChangeFilter,
+        onChangeSpecialty: (specialty) => triggerSearchWhenChangeFilter &&
+            onClickSearchByKeyword({ specialtyId: specialty.id }),
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(StyledSearchBarWrapper, { ref: wrapperRef },
+            React__default.createElement(TabSearch, { currentTab: currentTab, setCurrentTab: setCurrentTab, isMobile: isMobile, hideTabBookingSearch: hideTabBookingSearch, hideSpecialtyTab: hideSpecialtyTab }),
+            React__default.createElement(StyleWrapperContainer, { className: "booking-search-container" },
+                React__default.createElement(StyleSearchInputContainer, null,
+                    React__default.createElement(StyleSearchContent, { className: "booking-search-content" },
+                        React__default.createElement("div", { ref: inputSearchSpecialtyWrapperRef },
+                            React__default.createElement(Flex, { gap: "12px", align: "center", className: "flex-search-input" },
+                                React__default.createElement(SearchInputs, Object.assign({}, searchInputsProps, { ref: searchInputDesktopRef, onFocusInput: () => isMobile && open() })),
+                                currentTab !== 'specialty' && (React__default.createElement(SearchLocation, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchCitiesByKeyword: debouncedFetchCitiesByKeyword, selectedLocation: selectedLocation, onLocationClick: handleLocationClick, trackingAttributes: gaTrackingLocationSearch })),
+                                !isMobile && (React__default.createElement(Button, { size: "lg", variant: "primary", onClick: () => onClickSearchByKeyword(), styles: {
+                                        root: {
+                                            height: '48px',
+                                            minWidth: '120px',
+                                            borderRadius: '12px',
+                                        },
+                                    } }, t('booking.searchBar.searchButton')))),
+                            !hidePopularSearchKeys &&
+                                currentTab !== 'specialty' &&
+                                state.popularKeys.length > 0 && (React__default.createElement(SearchTag, { type: currentTab, state: state, typeInformation: typeInformation, dispatch: dispatch })),
+                            currentTab === 'specialty' &&
+                                focusedSpecialty === 'search' && (React__default.createElement(SearchResultSpecialties, { state: state, isMobile: isMobile, dispatch: dispatch, specialties: (searchResults === null || searchResults === void 0 ? void 0 : searchResults.specialty) || [], isLoading: isLoadingSearchResults }))))))),
+        isMobile && (React__default.createElement(ModalSearchResult, { keepMounted: true, opened: opened, onClose: close, closeModal: close, searchInputEle: React__default.createElement(Flex, { align: 'center', gap: 8 },
+                React__default.createElement(SearchInputs, Object.assign({}, searchInputsProps, { onlyShowSearchBox: true, ref: searchInputMobileRef })),
+                React__default.createElement(Button, { variant: "primary", leftIcon: React__default.createElement(Search, { size: 20, color: '#fff' }), onClick: () => onClickSearchByKeyword(), styles: {
+                        root: {
+                            borderRadius: '12px',
+                        },
+                    } })) },
+            React__default.createElement(Box, { sx: {
+                    marginLeft: -16,
+                    marginRight: -16,
+                } },
+                React__default.createElement(SearchResultContent, { type: currentTab, state: state, dispatch: dispatch, isLoading: isLoadingSearchResults, typeInformation: typeInformation, clientSlug: clientSlug }))))));
+};
+
+const StyledTextDivider = styled.div `
+  background-color: var(--neutral50);
+  padding: 12px 0;
+  box-shadow: inset 0px 1px 0px #e4e8ec;
+
+  > * {
+    display: grid;
+    grid-template-columns: 32px 1fr;
+    align-content: center;
+
+    p {
+      font-weight: 600;
+    }
+  }
+
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+  }
+`;
+const TextDivider = ({ children, icon, className, style }) => (React__default.createElement(StyledTextDivider, { style: style, className: className },
+    React__default.createElement(Container, null,
+        React__default.createElement("div", { className: "icon-wrapper" }, icon),
+        React__default.createElement(Text, { size: "c1", color: "var(--neutral800)" }, children))));
+
+export { BookingSearchBarV3 as B, TextDivider as T };