@hhgtech/hhg-components 1.29.88 → 1.29.90

package/build/careBookingSearchBarV2.js

@@ -0,0 +1,1665 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@mantine/core');
+var utils$1 = require('./utils-a4f75f1f.js');
+var useOutsideClick = require('./useOutsideClick-b5ae0665.js');
+var useTranslations = require('./useTranslations-4fb7a5ac.js');
+var debounce = require('lodash/debounce');
+var constants = require('./constants-f4bb9873.js');
+var styled = require('@emotion/styled');
+var miscTheme = require('./miscTheme.js');
+var utils = require('./utils-97ffdcb1.js');
+var index = require('./index-7a8c6b41.js');
+var core$1 = require('@hhgtech/icons/core');
+var index$1 = require('./index-6266a5df.js');
+var ChevronDown = require('./ChevronDown-c29d0fb5.js');
+var paths = require('./paths-f15bee7b.js');
+require('./index-330e16a8.js');
+require('date-fns/locale');
+require('./index-1b1ac8fe.js');
+require('./Locale-e697d040.js');
+require('./constantsIsProduction.js');
+require('./constantsSite.js');
+require('./constantsDomainLocales.js');
+require('./constantsRiskScreener.js');
+require('./miscCookieHelper.js');
+require('react-loading-skeleton');
+require('string-format');
+require('./translationsContext-9b528bb0.js');
+require('./tslib.es6-5d65f18f.js');
+require('./other-5c1524b3.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledSearchBarWrapper = styled__default["default"].div ``;
+const StyleWrapperContainer = styled__default["default"].div `
+  background-color: ${miscTheme.theme.colors.neutral50};
+  padding-bottom: 1px;
+  ${utils.MediaQueries.mbDown} {
+    padding: 0 16px 10px;
+  }
+`;
+const StyleSearchInputContainer = styled__default["default"](index.Container) `
+  padding: 0 16px;
+
+  ${utils.MediaQueries.mbDown} {
+    padding: 0;
+  }
+`;
+const StyleSearchContent = styled__default["default"].div `
+  padding: 24px 56px;
+  border-radius: 16px;
+  background-color: ${miscTheme.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);
+
+  ${utils.MediaQueries.mbDown} {
+    padding: 16px 16px;
+    border-radius: 0px 0px 12px 12px;
+  }
+
+  .flex-search-input {
+    flex-direction: row;
+    ${utils.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,
+};
+
+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('bookingSearchBar', { 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) === constants.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) === constants.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 });
+        case ActionTypes.SelectSpecialty:
+            return Object.assign(Object.assign({}, state), { focused: 'none', selectedSpecialty: action.payload });
+        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:
+            return Object.assign(Object.assign({}, state), { searchResults: 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__default["default"].div `
+  flex: 1;
+  position: relative;
+
+  ${utils.MediaQueries.mbDown} {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+`;
+const StyleResultWrapper$2 = styled__default["default"].div `
+  position: absolute;
+  top: calc(100% + 2px);
+  width: 100%;
+  border-radius: 4px;
+  background: ${miscTheme.theme.colors.white};
+  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+
+  ${utils.MediaQueries.mbDown} {
+    width: calc(100% + 64px);
+    left: -32px;
+  }
+`;
+
+const StyledSearchResultWrapper = styled__default["default"].div ``;
+const StyleResultHeader = styled__default["default"].div `
+  display: flex;
+  justify-content: space-between;
+  align-item: center;
+  padding: 9px 14px 9px 22px;
+  background: #f7f9fc;
+
+  .title {
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+  }
+
+  .btn-see-all {
+    color: ${miscTheme.theme.colors.blue600};
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+  }
+`;
+const StyleResultBody = styled__default["default"].div `
+  padding: 10px 16px;
+  max-height: 400px;
+  overflow: auto;
+`;
+const StyleResultItem = styled__default["default"].div `
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${miscTheme.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 ${miscTheme.theme.colors.neutral100};
+    .title {
+      color: ${miscTheme.theme.colors.gray800};
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+    .description {
+      overflow: hidden;
+      color: ${miscTheme.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__default["default"].div `
+  padding: 0 16px 16px;
+
+  .search-detail-btn {
+    color: ${miscTheme.theme.colors.blue600};
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+  }
+`;
+
+const SearchResult = ({ state, type, results, location, isLoading, typeInformation, clientSlug = '', dispatch, }) => {
+    const { locale, t } = useTranslations.useTranslations();
+    const { selectedLocation } = state;
+    const typeSlug = React.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 = constants.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 });
+        }
+    };
+    return (React__default["default"].createElement(StyledSearchResultWrapper, null,
+        React__default["default"].createElement(StyleResultHeader, null,
+            React__default["default"].createElement("div", { className: "title" }, t('booking.searchResult.description', {
+                search_type: typeInformation[type].name,
+                search_location: location,
+            })),
+            results.length > 0 && (React__default["default"].createElement("div", { className: "btn-see-all", onClick: handleSeeAll }, t('home.seeAll')))),
+        React__default["default"].createElement(StyleResultBody, null,
+            isLoading &&
+                Array(3)
+                    .fill(undefined)
+                    .map((_, i) => (React__default["default"].createElement(StyleResultItem, { key: type + 'loading' + i, className: i === 2 ? 'last-item' : '' },
+                    React__default["default"].createElement("div", { className: "image-item" },
+                        React__default["default"].createElement(core.Skeleton, { height: 48, circle: true, mb: "xl", animate: true })),
+                    React__default["default"].createElement("div", { className: "infor" },
+                        React__default["default"].createElement("div", { className: "title" },
+                            React__default["default"].createElement(core.Skeleton, { height: 8, mt: 10, radius: "xl", animate: true })),
+                        React__default["default"].createElement("div", { className: "description" },
+                            React__default["default"].createElement("div", { className: "sub-description" },
+                                React__default["default"].createElement(core.Skeleton, { height: 8, mt: 10, radius: "xl", width: "80%", animate: true }))))))),
+            !isLoading && results && results.length > 0 && (React__default["default"].createElement(React__default["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["default"].createElement(React__default["default"].Fragment, null);
+                }
+                return (React__default["default"].createElement(StyleResultItem, { key: item.id, className: isLastItem ? 'last-item' : '', onClick: () => handleOnClick(item) },
+                    React__default["default"].createElement("div", { className: "image-item" },
+                        React__default["default"].createElement("img", { src: item.logo || item.avatar, alt: item.name })),
+                    React__default["default"].createElement("div", { className: "infor" },
+                        React__default["default"].createElement("div", { className: "title" }, item.name),
+                        React__default["default"].createElement("div", { className: "description" },
+                            typeInformation[type].icon,
+                            React__default["default"].createElement("div", { className: "sub-description" }, subDescription)))));
+            }))),
+            !isLoading && (results === null || results === void 0 ? void 0 : results.length) === 0 && (React__default["default"].createElement(index$1.Text, { size: "sm", color: miscTheme.theme.colors.gray400 }, t('booking.searchBar.noResults'))))));
+};
+
+const StyleSearchSpecialtyWrapper = styled__default["default"].div `
+  position: relative;
+
+  ${utils.MediaQueries.mbDown} {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+`;
+const StyleResultWrapper$1 = styled__default["default"].div `
+  position: absolute;
+  top: calc(100% + 2px);
+  width: calc(100% + 100px);
+  border-radius: 4px;
+  background: ${miscTheme.theme.colors.white};
+  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  max-height: 300px;
+  overflow: auto;
+
+  ${utils.MediaQueries.mbDown} {
+    width: calc(100% + 64px);
+    left: -32px;
+  }
+`;
+const StyledSpecialtyItem = styled__default["default"].li `
+  position: relative;
+  cursor: pointer;
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  overflow: hidden;
+
+  .image-item {
+    display: flex;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+
+    img {
+      width: 100%;
+      object-fit: cover;
+    }
+
+    svg {
+      width: 40px;
+    }
+  }
+
+  ${({ isSelected }) => isSelected &&
+    `
+        &::after {
+            content: ${utils$1.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: ${miscTheme.theme.colors.neutral100};
+  }
+
+  &:not([data-is-denied='true']):hover {
+    background-color: ${miscTheme.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 DoctorIcon = () => (React__default["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default["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["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default["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["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default["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["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
+    React__default["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, debouncedFetchSearchResults, selectedLocation, onSpecialtyClick, dispatch, }) => {
+    var _a;
+    const { t, locale } = useTranslations.useTranslations();
+    const inputSpecialtyWrapperRef = React.useRef(null);
+    const slugs = React.useMemo(() => constants.LOCALIZED_SLUGS[locale], [locale]);
+    const styleSpecialties = React.useMemo(() => {
+        return {
+            wrapper: {
+                '&:after': {
+                    content: '""',
+                    width: '1px',
+                    height: '20px',
+                    backgroundColor: '#E4E8EC',
+                    position: 'absolute',
+                    right: 0,
+                    top: '13px',
+                },
+            },
+            input: {
+                border: isMobile ? 'border: 1px solid #d9d9d9' : 'none',
+                height: isMobile ? '40px' : '46px !important',
+                paddingRight: '30px',
+                '&:focus': {
+                    boxShadow: isMobile ? 'box-shadow: 0px 0px 0px 2px #91caff' : 'none',
+                },
+            },
+            rightSection: {
+                width: '30px',
+                svg: {
+                    fontSize: '20px',
+                },
+            },
+        };
+    }, [isMobile]);
+    const handleSearchSpecialtyInputChange = React.useCallback(function handleSearchSpecialtyInputChange(value) {
+        // dispatch({ type: ActionTypes.ChangeInputLocation, payload: value })
+        // if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale]) {
+        //   debouncedFetchSearchResults(value.trim())
+        // } else {
+        //   debouncedFetchSearchResults.cancel()
+        //   dispatch({ type: ActionTypes.DisplayInitialCities })
+        // }
+        console.log(value);
+    }, [debouncedFetchSearchResults, dispatch]);
+    useOutsideClick.useOutsideClick(inputSpecialtyWrapperRef, () => {
+        dispatch({ type: ActionTypes.ClickOutsideInputSpecialty });
+    });
+    return (React__default["default"].createElement(StyleSearchSpecialtyWrapper, { ref: inputSpecialtyWrapperRef },
+        React__default["default"].createElement(core.Input.Wrapper, null,
+            React__default["default"].createElement(core.Input, { size: isMobile ? 'md' : 'lg', placeholder: t('booking.searchPopup.specialties'), value: ((_a = state === null || state === void 0 ? void 0 : state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.name) || '', rightSection: React__default["default"].createElement(ChevronDown.ChevronDown, null), styles: styleSpecialties, onFocus: () => dispatch({ type: ActionTypes.FocusInputSpecialty }), onChange: (event) => {
+                    handleSearchSpecialtyInputChange(event.target.value);
+                } })),
+        state.focused === 'specialty' && (React__default["default"].createElement(StyleResultWrapper$1, null,
+            React__default["default"].createElement(StyledSpecialtyItem, { key: "all-location", role: "button", tabIndex: 0, onClick: () => {
+                    if (onSpecialtyClick) {
+                        onSpecialtyClick({
+                            name: t('booking.searchBar.allSpecialties'),
+                            id: -1,
+                            thumbnail: '',
+                            total_doctor: 0,
+                            slug: slugs.SPECIALTIES,
+                        });
+                    }
+                } },
+                React__default["default"].createElement("div", { className: "image-item" },
+                    React__default["default"].createElement(SpecialtyIcon, null)),
+                React__default["default"].createElement(index$1.Text, { size: "md" }, t('booking.searchBar.allSpecialties'))),
+            state.allSpecialties.map((specialty) => (React__default["default"].createElement(StyledSpecialtyItem, { key: specialty.id, onClick: (evt) => {
+                    evt.nativeEvent.stopImmediatePropagation();
+                    if (onSpecialtyClick) {
+                        onSpecialtyClick(Object.assign(Object.assign({}, specialty), { total_doctor: 0 }));
+                    }
+                }, role: "button", tabIndex: 0, "aria-label": `Select ${specialty.name} as location`, isSelected: (selectedLocation === null || selectedLocation === void 0 ? void 0 : selectedLocation.id) === specialty.id },
+                React__default["default"].createElement("div", { className: "image-item" },
+                    React__default["default"].createElement("img", { src: specialty.thumbnail, alt: specialty.name })),
+                React__default["default"].createElement(index$1.Text, { size: "md" }, specialty.name))))))));
+};
+
+const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', focusSearchInput, onSearch, onEnterSearch, dispatch, }) => {
+    var _a;
+    const { t } = useTranslations.useTranslations();
+    const inputSearchWrapperRef = React.useRef(null);
+    const gaAttributes = React.useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [trackingAttributes]);
+    const placeholderSearch = React.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]);
+    const styleInputWrapper = React.useMemo(() => {
+        return {
+            root: {
+                flex: 1,
+                '&.hide-specialty-selection': {
+                    '.mantine-Input-rightSection': {
+                        display: 'none',
+                    },
+                    input: {
+                        paddingLeft: '48px',
+                    },
+                    '.mantine-Input-icon': {
+                        left: '0',
+                    },
+                },
+            },
+        };
+    }, []);
+    const styleInput = React.useMemo(() => {
+        return {
+            icon: {
+                left: '165px',
+            },
+            input: {
+                color: '#262626',
+                '&[data-with-icon="true"]': {
+                    paddingLeft: '205px',
+                    paddingRight: '16px',
+                },
+            },
+            rightSection: {
+                left: 0,
+                width: '165px',
+                padding: '1px',
+            },
+        };
+    }, []);
+    const styleInputSpecialties = React.useMemo(() => {
+        return {
+            input: {
+                color: '#262626',
+            },
+        };
+    }, []);
+    useOutsideClick.useOutsideClick(inputSearchWrapperRef, () => {
+        dispatch({ type: ActionTypes.ClickOutsideInputSearch });
+    });
+    const handleSearchInputChange = React.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);
+        }
+        else {
+            debouncedFetchSearchResults.cancel();
+            dispatch({ type: ActionTypes.DisplayInitialSearchResults });
+        }
+    }, [dispatch, state, type]);
+    const handleSpecialtyClick = React.useCallback(function handleSpecialtyClick(specialty) {
+        dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
+        focusSearchInput();
+    }, [dispatch]);
+    const inputOnKeyDown = React.useCallback((e) => {
+        if (e.keyCode === 13) {
+            e.stopPropagation();
+            e.preventDefault();
+            onEnterSearch && onEnterSearch();
+        }
+    }, [onEnterSearch]);
+    return (React__default["default"].createElement(StyleSearchInputsWrapper, { ref: inputSearchWrapperRef }, type === 'specialty' ? (React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper },
+        React__default["default"].createElement(core.Input, { icon: React__default["default"].createElement(core$1.Search, null), size: isMobile ? 'md' : 'lg', placeholder: placeholderSearch, styles: styleInputSpecialties, value: state.searchKeywords, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearchSpecialty }), onChange: (event) => {
+                handleSearchInputChange(event.target.value);
+            }, onKeyDown: inputOnKeyDown }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        type === 'service' ? (React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper },
+            React__default["default"].createElement(core.Input, { icon: React__default["default"].createElement(core$1.Search, null), size: isMobile ? 'md' : 'lg', name: "search-results", placeholder: placeholderSearch, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearch }), value: state.searchKeywords, onChange: (event) => {
+                    handleSearchInputChange(event.target.value);
+                }, onKeyDown: inputOnKeyDown }))) : (React__default["default"].createElement(React__default["default"].Fragment, null, isMobile && !hideSpecialtySelection ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick }),
+            React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper },
+                React__default["default"].createElement(core.Input, { icon: React__default["default"].createElement(core$1.Search, null), size: "md", placeholder: placeholderSearch, value: state.searchKeywords, name: "search-results", onFocus: () => dispatch({ type: ActionTypes.FocusInputSearch }), onChange: (event) => {
+                        handleSearchInputChange(event.target.value);
+                    }, onKeyDown: inputOnKeyDown })))) : (React__default["default"].createElement(core.Input.Wrapper, { styles: styleInputWrapper, className: hideSpecialtySelection ? 'hide-specialty-selection' : '' },
+            React__default["default"].createElement(core.Input, Object.assign({ icon: React__default["default"].createElement(core$1.Search, null), size: "lg", placeholder: placeholderSearch, styles: styleInput, name: "search-results", autoComplete: "off", value: state.searchKeywords, onChange: (event) => {
+                    handleSearchInputChange(event.target.value);
+                }, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearch }), onKeyDown: inputOnKeyDown }, gaAttributes, { rightSection: hideSpecialtySelection ? (React__default["default"].createElement(React__default["default"].Fragment, null)) : (React__default["default"].createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick })) })))))),
+        state.focused === 'search' && (React__default["default"].createElement(StyleResultWrapper$2, null,
+            React__default["default"].createElement(SearchResult, { type: type, state: state, results: ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a[type]) || [], location: state.selectedLocation.name, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug })))))));
+};
+
+const StyleSearchLocationWrapper = styled__default["default"].div `
+  position: relative;
+
+  ${utils.MediaQueries.mbDown} {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+`;
+const StyleResultWrapper = styled__default["default"].div `
+  position: absolute;
+  top: calc(100% + 2px);
+  width: 100%;
+  border-radius: 4px;
+  background: ${miscTheme.theme.colors.white};
+  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+
+  ${utils.MediaQueries.mbDown} {
+    width: calc(100% + 64px);
+    left: -32px;
+  }
+`;
+const StyledLocationItem = styled__default["default"].li `
+  position: relative;
+  cursor: pointer;
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  overflow: hidden;
+
+  ${({ isSelected }) => isSelected &&
+    `
+        &::after {
+            content: ${utils$1.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: ${miscTheme.theme.colors.neutral100};
+  }
+
+  &:not([data-is-denied='true']):hover {
+    background-color: ${miscTheme.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__default["default"](utils$1.PinIcon) `
+  width: 12px;
+  height: 18px;
+  flex: 0 0 12px;
+`;
+
+const SearchLocation = ({ state, isMobile, debouncedFetchCitiesByKeyword, selectedLocation, trackingAttributes, onLocationClick, dispatch, }) => {
+    const { t, locale } = useTranslations.useTranslations();
+    const inputLocationWrapperRef = React.useRef(null);
+    const gaAttributes = React.useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [trackingAttributes]);
+    const handleSearchLocationInputChange = React.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]);
+    useOutsideClick.useOutsideClick(inputLocationWrapperRef, () => {
+        dispatch({ type: ActionTypes.ClickOutsideInputLocation });
+    });
+    return (React__default["default"].createElement(StyleSearchLocationWrapper, { ref: inputLocationWrapperRef },
+        React__default["default"].createElement(core.Input.Wrapper, null,
+            React__default["default"].createElement(core.Input, Object.assign({ size: isMobile ? 'md' : 'lg', placeholder: "Search location", value: state.searchLocationKeywords, onFocus: () => dispatch({ type: ActionTypes.FocusInputLocation }), onChange: (event) => {
+                    handleSearchLocationInputChange(event.target.value);
+                } }, gaAttributes))),
+        state.focused === 'location' && (React__default["default"].createElement(StyleResultWrapper, null,
+            React__default["default"].createElement(StyledLocationItem, { key: "all-location", role: "button", tabIndex: 0, onClick: () => {
+                    var _a;
+                    if (onLocationClick) {
+                        onLocationClick({
+                            name: t('booking.searchBar.allLocations'),
+                            id: constants.ID_OPTION_ALL_LOCATION,
+                            slug: (_a = constants.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
+                        });
+                    }
+                } },
+                React__default["default"].createElement(StyledPinIcon, { color: miscTheme.theme.colors.neutral400 }),
+                React__default["default"].createElement(index$1.Text, { size: "md" }, t('booking.searchBar.allLocations'))),
+            state.cities.map((city) => (React__default["default"].createElement(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 === null || selectedLocation === void 0 ? void 0 : selectedLocation.id) === city.id },
+                React__default["default"].createElement(StyledPinIcon, { color: miscTheme.theme.colors.neutral400 }),
+                React__default["default"].createElement(index$1.Text, { size: "md" }, city.name))))))));
+};
+
+const StyleSpecialtiesWrapper = styled__default["default"].div `
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 8px;
+  column-gap: 20px;
+  ${utils.MediaQueries.mbDown} {
+    margin-top: 12px;
+  }
+`;
+const StyleSpecialtyItem = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid ${miscTheme.theme.colors.neutral100};
+  background: ${miscTheme.theme.colors.white};
+  padding: 8px 12px 8px 8px;
+  flex: 0 0 calc(33.3% - 13px);
+  gap: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background: ${miscTheme.theme.colors.blue50};
+  }
+
+  ${utils.MediaQueries.tdDown} {
+    flex: 0 0 calc(50% - 10px);
+  }
+
+  ${utils.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: ${miscTheme.theme.colors.gray800};
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+
+    .description {
+      color: ${miscTheme.theme.colors.gray600};
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+    }
+  }
+`;
+const StyleDivider = styled__default["default"](core.Divider) `
+  margin: 24px 0 !important;
+`;
+const StyleShowMore = styled__default["default"].div `
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+  .show-more {
+    border-radius: 4px;
+    border: 1px solid ${miscTheme.theme.colors.neutral200};
+    padding: 12px 16px;
+    cursor: pointer;
+    display: inline-block;
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+
+    ${utils.MediaQueries.mbDown} {
+      width: 100%;
+      text-align: center;
+    }
+  }
+`;
+
+const SearchResultSpecialties = ({ state, isMobile, specialties, isLoading, dispatch, }) => {
+    const { t, locale } = useTranslations.useTranslations();
+    const { selectedLocation } = state;
+    const slugs = React.useMemo(() => constants.LOCALIZED_SLUGS[locale], [locale]);
+    const handleOnClick = (specialtySlug) => {
+        let url = '';
+        if (specialtySlug === constants.SLUG_VACIN_ID) {
+            url = `/${selectedLocation.slug}/${slugs.HOSPITAL}/${constants.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 = React.useMemo(() => {
+        return (specialties.length >= 9 ||
+            state.searchKeywords.trim().length <=
+                SEARCH_KEYWORD_MIN_LENGTH[state.locale]);
+    }, [state.searchKeywords, specialties]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        !isMobile && React__default["default"].createElement(StyleDivider, { color: "#E4E8EC" }),
+        React__default["default"].createElement(StyleSpecialtiesWrapper, null,
+            specialties.length > 0 && !isLoading && (React__default["default"].createElement(React__default["default"].Fragment, null, specialties.map((specialty, index) => {
+                if (index >= 9) {
+                    return React__default["default"].createElement(React__default["default"].Fragment, null);
+                }
+                return (React__default["default"].createElement(StyleSpecialtyItem, { key: specialty.id, onClick: () => handleOnClick(specialty.slug) },
+                    React__default["default"].createElement("div", { className: "image-item" },
+                        React__default["default"].createElement("img", { src: specialty.thumbnail, alt: specialty.name })),
+                    React__default["default"].createElement("div", { className: "infor" },
+                        React__default["default"].createElement("div", { className: "title" }, specialty.name))));
+            }))),
+            specialties.length === 0 && !isLoading && (React__default["default"].createElement(index$1.Text, { size: "sm", color: miscTheme.theme.colors.gray400 }, t('booking.searchBar.noResults'))),
+            isLoading &&
+                Array(6)
+                    .fill(undefined)
+                    .map((_, i) => (React__default["default"].createElement(StyleSpecialtyItem, { key: 'loading' + i },
+                    React__default["default"].createElement("div", { className: "image-item" },
+                        React__default["default"].createElement(core.Skeleton, { height: 40, animate: true })),
+                    React__default["default"].createElement("div", { className: "infor" },
+                        React__default["default"].createElement("div", { className: "title" },
+                            React__default["default"].createElement(core.Skeleton, { height: 20, radius: "sm", animate: true }))))))),
+        showSeeMore && (React__default["default"].createElement(StyleShowMore, null,
+            React__default["default"].createElement("div", { className: "show-more", onClick: handleShowMore }, t('home.seeAll'))))));
+};
+
+const StyleSearchTagWrapper = styled__default["default"].div `
+  display: flex;
+  gap: 5px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+`;
+const StyleTagItem = styled__default["default"].div `
+  color: ${miscTheme.theme.colors.gray600};
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  padding: 4px 12px;
+  background: ${miscTheme.theme.colors.white};
+  border-radius: 32px;
+  cursor: pointer;
+  border: 1px solid ${miscTheme.theme.colors.white};
+  margin-bottom: 5px;
+  border-color: ${miscTheme.theme.colors.neutral100};
+  background: #f7f9fc;
+
+  &.view-all {
+    border-radius: 32px;
+    border-color: ${miscTheme.theme.colors.blue50};
+    background: ${miscTheme.theme.colors.blue50};
+    color: ${miscTheme.theme.colors.blue600};
+
+    &:hover {
+      border-color: ${miscTheme.theme.colors.blue50};
+      background: ${miscTheme.theme.colors.blue50};
+      color: ${miscTheme.theme.colors.blue600};
+    }
+  }
+
+  &:hover {
+    border-color: ${miscTheme.theme.colors.neutral100};
+    background: #f7f9fc;
+  }
+`;
+const StyleTagLabel = styled__default["default"].div `
+  color: ${miscTheme.theme.colors.gray600};
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  padding: 4px 0;
+  background: ${miscTheme.theme.colors.white};
+  border-radius: 32px;
+  border: 1px solid ${miscTheme.theme.colors.white};
+  margin-bottom: 5px;
+  margin-right: 7px;
+`;
+
+const SearchTag = ({ state, type, typeInformation, dispatch }) => {
+    const { t } = useTranslations.useTranslations();
+    const { selectedLocation } = state;
+    const typeSlug = React.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["default"].createElement(StyleSearchTagWrapper, null,
+        React__default["default"].createElement(StyleTagLabel, null, t('booking.searchBar.popularKey')),
+        state.popularKeys.map((item) => {
+            return (React__default["default"].createElement(StyleTagItem, { key: item.id, onClick: () => handleClickKeyword(item) }, item.keyword));
+        }),
+        React__default["default"].createElement(StyleTagItem, { className: "view-all", onClick: handleViewAll }, t('booking.searchBar.viewAll'))));
+};
+
+const StyledTabWrapper = styled__default["default"].div `
+  background: rgba(255, 255, 255, 0.64);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
+`;
+const StyleTabContainer = styled__default["default"](index.Container) `
+  padding: 0 16px;
+`;
+
+const itemTabs = () => {
+    const { t } = useTranslations.useTranslations();
+    return [
+        {
+            value: 'hospital',
+            label: t('booking.searchPopup.hospitals'),
+        },
+        {
+            value: 'doctor',
+            label: t('booking.searchPopup.doctors'),
+        },
+        {
+            value: 'service',
+            label: t('booking.searchPopup.services'),
+        },
+        {
+            value: 'specialty',
+            label: t('booking.searchPopup.specialties'),
+        },
+    ];
+};
+const TabSearch = ({ currentTab, hideTabBookingSearch = [], isMobile, setCurrentTab, }) => {
+    const stylesTabs = React.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 = itemTabs();
+    const activeTabs = React.useMemo(() => {
+        return (tabConfig.filter((item) => !hideTabBookingSearch.includes(item.value)) ||
+            []);
+    }, [hideTabBookingSearch, tabConfig]);
+    return (React__default["default"].createElement(StyledTabWrapper, { className: "booking-search-tab" },
+        React__default["default"].createElement(StyleTabContainer, null,
+            React__default["default"].createElement(core.Tabs, { value: currentTab, onTabChange: (tab) => {
+                    setCurrentTab(tab);
+                }, styles: stylesTabs },
+                React__default["default"].createElement(core.Tabs.List, null, activeTabs.map((tab) => {
+                    return (React__default["default"].createElement(core.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 = {}));
+
+function useSearchBarApi({ dispatch, careApiDomain, locale = 'vi-VN', client = '', }) {
+    const fetchCitiesApi = React.useCallback(function fetchCitiesApi(path, params = {}) {
+        const url = `${careApiDomain}${path}`;
+        dispatch({ type: ActionTypes.FetchCitiesStart });
+        return fetch(utils$1.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 = React.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.PATHS.GET_CITY_BY_IP, Object.assign(Object.assign(Object.assign({}, params), moreParams), { client: constants.CLIENT_KEY.MSD === client ? '' : client })),
+        ];
+        if (locale === 'zh-TW') {
+            requests.push(fetchCitiesApi(paths.PATHS.GET_CITIES_LIST, {
+                noPaging: 1,
+                client: constants.CLIENT_KEY.MSD === client ? '' : client,
+            }));
+        }
+        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 = React.useCallback(function fetchCitiesByKeyword(keyword) {
+        return fetchCitiesApi(paths.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 = React.useCallback(function fetchSearchResults(searchKeywords, state, searchType, clientSlug, cacheResult) {
+        const url = searchType === 'specialty'
+            ? `${careApiDomain}${paths.PATHS.GET_SEARCH_SPECIALTY}`
+            : `${careApiDomain}${paths.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 === constants.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(utils$1.getApiPath(url, {
+            domain: careApiDomain,
+            searchType: searchType || 'global',
+            keyword: keyword,
+            city: cityId === constants.ID_OPTION_CURRENT_LOCATION ? '' : cityId,
+            lat,
+            lng,
+            specialty_id,
+            client_slug: constants.CLIENT_KEY.MSD === clientSlug ? '' : clientSlug,
+            msd: constants.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) => {
+            let searchesResult = [];
+            if (searchType !== 'specialty') {
+                searchesResult = results.searches;
+            }
+            if (searchType === 'specialty') {
+                if (keyword) {
+                    searchesResult = results.specialties;
+                }
+                else {
+                    searchesResult = 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 = React.useCallback(function fetchSearchSpecialties() {
+        const url = `${careApiDomain}${paths.PATHS.GET_SEARCH_SPECIALTY}`;
+        return fetch(utils$1.getApiPath(url, {
+            domain: careApiDomain,
+            searchType: '',
+            msd: constants.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: results.specialties || [],
+            });
+        })
+            .catch((error) => {
+            console.log('error loading search results', { url, error });
+        });
+    }, [locale, careApiDomain, dispatch]);
+    const fetchPopularKeys = React.useCallback(function fetchPopularKeys(searchType) {
+        const url = `${careApiDomain}${paths.PATHS.GET_SEARCH_POPULAR_KEY}`;
+        return fetch(utils$1.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 BookingSearchBarV2 = ({ 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, hidePopularSearchKeys = false, clientSlug = '', 
+// isOptionAllLocation = false,
+// hideResults = [],
+// isNavResultItem = true,
+routerPush, onGeoLocationPermissionChange, 
+// onSearch,
+onChangeLocation, }) => {
+    const { locale, t } = useTranslations.useTranslations();
+    const wrapperRef = React.useRef(null);
+    const inputSearchSpecialtyWrapperRef = React.useRef(null);
+    const [currentTab, setCurrentTab] = React.useState(initTypeSearch);
+    const { geoLocationPermission: geoLocationPermissionFromHook, geoLocationCoordinates: geoLocationCoordinatesFromHook, } = utils$1.useGeolocation();
+    const [state, dispatch] = React.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 = React.useMemo(() => constants.LOCALIZED_SLUGS[locale], [locale]);
+    const typeInformation = React.useMemo(() => {
+        return {
+            doctor: {
+                name: t('booking.searchPopup.doctors'),
+                icon: React__default["default"].createElement(DoctorIcon, null),
+                slug: slugs.DOCTOR,
+            },
+            service: {
+                name: t('booking.searchPopup.services'),
+                icon: React__default["default"].createElement(ServiceIcon, null),
+                slug: slugs.SERVICE,
+            },
+            hospital: {
+                name: t('booking.searchPopup.hospitals'),
+                icon: React__default["default"].createElement(HospitalIcon, null),
+                slug: slugs.HOSPITAL,
+            },
+            specialty: {
+                name: t('booking.searchPopup.specialties'),
+                icon: React__default["default"].createElement(SpecialtyIcon, null),
+                slug: slugs.SPECIALTIES,
+            },
+        };
+    }, [currentTab]);
+    const debouncedFetchCitiesByKeyword = React.useMemo(() => debounce__default["default"](fetchCitiesByKeyword, 400), [fetchCitiesByKeyword]);
+    const debouncedFetchSearchResults = React.useMemo(() => debounce__default["default"](fetchSearchResults, 400), [fetchSearchResults]);
+    const handleLocationClick = React.useCallback(function handleLocationClick(city) {
+        dispatch({ type: ActionTypes.SelectLocation, payload: city });
+        focusSearchInput();
+        if (onChangeLocation) {
+            onChangeLocation(city);
+        }
+    }, [t, dispatch]);
+    function focusSearchInput() {
+        var _a;
+        if (wrapperRef.current) {
+            (_a = wrapperRef.current
+                .querySelector('input[name="search-results"]')) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    function onClickSearchByKeyword() {
+        let url = '';
+        const { slug: typeSlug } = typeInformation[currentTab];
+        let moreParams = '';
+        const slugClientUrl = constants.MAPPING_CLIENT_WITH_SLUG[locale][clientSlug];
+        if ((currentTab === 'doctor' || currentTab === 'hospital') &&
+            state.selectedSpecialty.id > 0) {
+            moreParams = `&specialtyId=${state.selectedSpecialty.id}`;
+        }
+        if (currentTab === 'specialty') {
+            url = `/${typeSlug}`;
+        }
+        else {
+            url = `/${selectedLocation.slug}/${typeSlug}`;
+        }
+        if (slugClientUrl) {
+            url += `/${slugClientUrl}`;
+        }
+        url += `?q=${searchKeywords}${moreParams}`;
+        if (url) {
+            dispatch({ type: ActionTypes.NavigateTo, payload: url });
+        }
+    }
+    useOutsideClick.useOutsideClick(inputSearchSpecialtyWrapperRef, () => {
+        dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
+    });
+    React.useEffect(() => {
+        var _a;
+        if (geoLocationPermission !== 'denied' && !initialSelectedCity) {
+            dispatch({
+                type: ActionTypes.SelectLocation,
+                payload: {
+                    name: t('booking.searchBar.allLocations'),
+                    id: constants.ID_OPTION_ALL_LOCATION,
+                    slug: (_a = constants.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]);
+    React.useEffect(() => {
+        const defaultSpecialty = initSpecialty
+            ? initSpecialty
+            : {
+                name: t('booking.searchBar.allSpecialties'),
+                id: -1,
+                thumbnail: '',
+                total_doctor: 0,
+                slug: slugs.SPECIALTIES,
+            };
+        if (!state.selectedSpecialty) {
+            dispatch({
+                type: ActionTypes.SelectSpecialty,
+                payload: defaultSpecialty,
+            });
+        }
+    }, [initSpecialty, state.selectedSpecialty]);
+    React.useEffect(() => {
+        fetchAllSpecialties();
+    }, []);
+    React.useEffect(() => {
+        fetchPopularKeys(currentTab);
+    }, [currentTab]);
+    React.useEffect(() => {
+        if (navigateTo) {
+            if (routerPush) {
+                routerPush(navigateTo);
+            }
+            else {
+                window.location.href = `${careFrontDomain}${navigateTo}`;
+            }
+        }
+    }, [navigateTo]);
+    React.useEffect(() => {
+        fetchSearchResults(state.searchKeywords, state, currentTab, clientSlug, true);
+    }, [selectedLocation, selectedSpecialty, currentTab]);
+    return (React__default["default"].createElement(StyledSearchBarWrapper, { ref: wrapperRef },
+        React__default["default"].createElement(TabSearch, { currentTab: currentTab, setCurrentTab: setCurrentTab, isMobile: isMobile, hideTabBookingSearch: hideTabBookingSearch }),
+        React__default["default"].createElement(StyleWrapperContainer, { className: "booking-search-container" },
+            React__default["default"].createElement(StyleSearchInputContainer, null,
+                React__default["default"].createElement(StyleSearchContent, { className: "booking-search-content" },
+                    React__default["default"].createElement("div", { ref: inputSearchSpecialtyWrapperRef },
+                        React__default["default"].createElement(core.Flex, { gap: "12px", justify: "space-between", align: "center", direction: isMobile ? 'column' : 'row', className: "flex-search-input" },
+                            currentTab !== 'specialty' && (React__default["default"].createElement(SearchLocation, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchCitiesByKeyword: debouncedFetchCitiesByKeyword, selectedLocation: selectedLocation, onLocationClick: handleLocationClick, trackingAttributes: gaTrackingLocationSearch })),
+                            React__default["default"].createElement(SearchInputs, { type: currentTab, isMobile: isMobile, state: state, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, initalSearchValue: initialSearchValue, focusSearchInput: focusSearchInput, onEnterSearch: onClickSearchByKeyword, typeInformation: typeInformation, trackingAttributes: gaTrackingSearchBar, isLoading: isLoadingSearchResults, hideSpecialtySelection: hideSpecialtySelection, clientSlug: clientSlug }),
+                            React__default["default"].createElement(core.Button, { size: isMobile ? 'md' : 'lg', color: "#2D87F3", fullWidth: isMobile, variant: "filled", onClick: onClickSearchByKeyword, styles: {
+                                    root: {
+                                        height: isMobile ? '40px' : '48px',
+                                    },
+                                } }, t('booking.searchBar.searchButton'))),
+                        !hidePopularSearchKeys &&
+                            currentTab !== 'specialty' &&
+                            state.popularKeys.length > 0 && (React__default["default"].createElement(SearchTag, { type: currentTab, state: state, typeInformation: typeInformation, dispatch: dispatch })),
+                        currentTab === 'specialty' && focusedSpecialty === 'search' && (React__default["default"].createElement(SearchResultSpecialties, { state: state, isMobile: isMobile, dispatch: dispatch, specialties: (searchResults === null || searchResults === void 0 ? void 0 : searchResults.specialty) || [], isLoading: isLoadingSearchResults }))))))));
+};
+
+exports.BookingSearchBarV2 = BookingSearchBarV2;