@hhgtech/hhg-components 1.29.527 → 1.29.529

package/build/esm/careBookingSearchBarV2.js

@@ -1,22 +1,27 @@
-import React__default, { useMemo, useRef, useCallback, useState, useReducer, useEffect } from 'react';
-import { Skeleton, Input, ScrollArea, Divider, Tabs, Flex, Button } from '@mantine/core';
-import { i as checkMarkIconUrl, P as PinIcon, h as getApiPath, u as useGeolocation } from './utils-5e210f54.js';
-import { a as useOutsideClick } from './useOutsideClick-8288aa4e.js';
-import { u as useTranslations } from './index-78e91f91.js';
+import React__default, { useMemo, forwardRef, useRef, useImperativeHandle, useCallback, useState, useReducer, useEffect } from 'react';
+import { Search } from '@hhgtech/icons/core';
+import { Skeleton, clsx, Text as Text$1, Select, rem, useMantineTheme, Input, Stack, Flex, Box, Divider, Tabs } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { i as checkMarkIconUrl, P as PinIcon, h as getApiPath, u as useGeolocation } from './utils-ab3b27b1.js';
+import { a as useOutsideClick } from './useOutsideClick-bbf3c9ae.js';
+import { u as useTranslations } from './index-82ea6b51.js';
 import debounce from 'lodash/debounce';
-import { a as ID_OPTION_CURRENT_LOCATION, M as MAPPING_CLIENT_WITH_SLUG, L as LOCALIZED_SLUGS, I as ID_OPTION_ALL_LOCATION, S as SLUG_VACIN_ID, C as CLIENT_KEY } from './constants-1da5a50a.js';
+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-ea552f1d.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-308ca058.js';
-import { C as Container } from './index-a131e0d4.js';
-import { Search } from '@hhgtech/icons/core';
-import { T as Text } from './index-6562a540.js';
-import { C as ChevronDown } from './ChevronDown-13f6a5cf.js';
-import { P as PATHS } from './paths-28205e0f.js';
-import './index-2b33f487.js';
+import { M as MediaQueries } from './utils-23c578aa.js';
+import { C as Container } from './index-fc6409b1.js';
+import { T as Text } from './index-273f9554.js';
+import { C as ChevronDown } from './ChevronDown-fb1a6473.js';
+import { _ as __rest } from './tslib.es6-cad84cc0.js';
+import { ArrowLeft } from '@hhgtech/icons/arrow';
+import { M as Modal } from './index-9123f2b2.js';
+import { P as PATHS } from './paths-8f866678.js';
+import { B as Button } from './index-8884c688.js';
+import './index-cfaad2c1.js';
 import 'date-fns/locale';
-import './index-6d341978.js';
-import './Locale-adfd207f.js';
+import './index-5c287948.js';
+import './Locale-f3ce6f4a.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
@@ -24,9 +29,10 @@ import './constantsIsProduction.js';
 import './miscCookieHelper.js';
 import 'react-loading-skeleton';
 import 'string-format';
-import './translationsContext-f5f75ec5.js';
-import './tslib.es6-88ed8ad1.js';
-import './index-56e4d976.js';
+import './translationsContext-5536e910.js';
+import './index-7eb710d8.js';
+import './index.styles-57582498.js';
+import './shared-d6ce481f.js';
 
 const StyledSearchBarWrapper = styled.div ``;
 const StyleWrapperContainer = styled.div `
@@ -215,9 +221,9 @@ function reducer(state, action) {
         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 });
+            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 });
+            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:
@@ -295,7 +301,7 @@ const StyleSearchInputsWrapper = styled.div `
     gap: 12px;
   }
 `;
-const StyleResultWrapper$2 = styled.div `
+const StyleResultWrapper = styled.div `
   position: absolute;
   top: calc(100% + 2px);
   width: 100%;
@@ -311,7 +317,7 @@ const StyleResultWrapper$2 = styled.div `
 `;
 
 const StyledSearchResultWrapper = styled.div ``;
-const StyleResultHeader = styled.div `
+styled.div `
   display: flex;
   justify-content: space-between;
   align-item: center;
@@ -343,9 +349,12 @@ const StyleResultItem = styled.div `
   align-items: center;
   cursor: pointer;
 
-  &:hover {
-    background-color: ${theme.colors.blue50};
+  ${MediaQueries.mbUp} {
+    &:hover {
+      background-color: ${theme.colors.blue50};
+    }
   }
+
   .image-item {
     flex: 0 0 48px;
     width: 48px;
@@ -412,8 +421,12 @@ styled.div `
   }
 `;
 
-const SearchResult = ({ state, type, results, location, isLoading, typeInformation, clientSlug = '', dispatch, }) => {
-    const { locale, t } = useTranslations();
+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) => {
@@ -434,40 +447,37 @@ const SearchResult = ({ state, type, results, location, isLoading, typeInformati
             });
         }
     };
-    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 });
-        }
-    };
+    // 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(StyleResultHeader, null,
-            React__default.createElement("div", { className: "title" }, t('booking.searchResult.description', {
-                search_type: typeInformation[type].name,
-                search_location: location,
-            })),
-            results.length > 0 && (React__default.createElement("div", { className: "btn-see-all", onClick: handleSeeAll }, t('home.seeAll')))),
-        React__default.createElement(StyleResultBody, null,
-            isLoading &&
-                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 }))))))),
+        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) ||
@@ -485,7 +495,7 @@ const SearchResult = ({ state, type, results, location, isLoading, typeInformati
                 if (index >= 4) {
                     return React__default.createElement(React__default.Fragment, null);
                 }
-                return (React__default.createElement(StyleResultItem, { key: item.id, className: isLastItem ? 'last-item' : '', onClick: () => handleOnClick(item) },
+                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" },
@@ -494,7 +504,14 @@ const SearchResult = ({ state, type, results, location, isLoading, typeInformati
                             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 }, t('booking.searchBar.noResults'))))));
+            !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 `
@@ -507,7 +524,7 @@ const StyleSearchSpecialtyWrapper = styled.div `
     gap: 12px;
   }
 `;
-const StyleResultWrapper$1 = styled.div `
+styled.div `
   position: absolute;
   top: calc(100% + 2px);
   width: calc(100% + 100px);
@@ -598,88 +615,181 @@ const HospitalIcon = () => (React__default.createElement("svg", { width: "16", h
 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, debouncedFetchSearchResults, selectedLocation, onSpecialtyClick, dispatch, }) => {
-    var _a;
+const CustomSelectItem$1 = forwardRef((_a, ref) => {
+    var { label, value, specialty } = _a, others = __rest(_a, ["label", "value", "specialty"]);
+    return (React__default.createElement("div", Object.assign({ ref: ref }, others),
+        React__default.createElement(StyledSpecialtyItem, { key: value, 
+            // onClick={(evt) => {
+            //   evt.nativeEvent.stopImmediatePropagation()
+            //   if (onSpecialtyClick) {
+            //     onSpecialtyClick({
+            //       ...specialty,
+            //       total_doctor: 0,
+            //     })
+            //   }
+            // }}
+            role: "button", tabIndex: 0, "aria-label": `Select ${label} as location` },
+            React__default.createElement("div", { className: "image-item" }, specialty.thumbnail ? (React__default.createElement("img", { src: specialty.thumbnail, alt: label })) : (React__default.createElement(SpecialtyIcon, null))),
+            React__default.createElement(Text$1, { size: "md" }, label))));
+});
+
+const SearchSpecialty = ({ state, 
+// debouncedFetchSearchResults,
+onSpecialtyClick, dispatch, }) => {
     const { t, locale } = useTranslations();
     const inputSpecialtyWrapperRef = useRef(null);
     const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
-    const styleSpecialties = 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 = 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]);
+    // const styleSpecialties = 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',
+    //       },
+    //     },
+    //   } as any
+    // }, [isMobile])
+    // const handleSearchSpecialtyInputChange = useCallback(
+    //   function handleSearchSpecialtyInputChange(value: string) {
+    //     // 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(inputSpecialtyWrapperRef, () => {
         dispatch({ type: ActionTypes.ClickOutsideInputSpecialty });
     });
+    const specialtyData = [
+        {
+            name: t('booking.searchBar.allSpecialties'),
+            id: -1,
+            thumbnail: '',
+            total_doctor: 0,
+            slug: slugs.SPECIALTIES,
+        },
+        ...state.allSpecialties,
+    ];
+    const selectValue = state.selectedSpecialty && typeof state.selectedSpecialty.id === 'number'
+        ? String(state.selectedSpecialty.id)
+        : null;
     return (React__default.createElement(StyleSearchSpecialtyWrapper, { ref: inputSpecialtyWrapperRef },
-        React__default.createElement(Input.Wrapper, null,
-            React__default.createElement(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.createElement(ChevronDown, null), styles: styleSpecialties, onFocus: () => dispatch({ type: ActionTypes.FocusInputSpecialty }), onChange: (event) => {
-                    handleSearchSpecialtyInputChange(event.target.value);
-                } })),
-        state.focused === 'specialty' && (React__default.createElement(StyleResultWrapper$1, null,
-            React__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.createElement("div", { className: "image-item" },
-                    React__default.createElement(SpecialtyIcon, null)),
-                React__default.createElement(Text, { size: "md" }, t('booking.searchBar.allSpecialties'))),
-            state.allSpecialties.map((specialty) => (React__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.createElement("div", { className: "image-item" },
-                    React__default.createElement("img", { src: specialty.thumbnail, alt: specialty.name })),
-                React__default.createElement(Text, { size: "md" }, specialty.name))))))));
+        React__default.createElement(Select, { value: selectValue, placeholder: t('booking.searchPopup.specialties'), searchable: true, nothingFound: t('common.noResult'), maxDropdownHeight: 340, dropdownPosition: "bottom", data: specialtyData.map((specialty) => ({
+                value: String(specialty.id),
+                label: specialty.name,
+                specialty,
+            })), rightSection: React__default.createElement(ChevronDown, { style: { width: 20, height: 20 } }), styles: (theme) => ({
+                dropdown: {
+                    left: '0 !important',
+                    border: 0,
+                    marginTop: -7,
+                    borderRadius: 0,
+                    '& [data-mantine-scrollbar]': {
+                        '&[data-orientation="vertical"]': {
+                            width: '6px',
+                        },
+                    },
+                    [theme.fn.largerThan('sm')]: {
+                        minWidth: 264,
+                        width: `264px !important`,
+                    },
+                },
+                item: {
+                    padding: 0,
+                    '&[data-selected]': {
+                        '&, &:hover': {
+                            backgroundColor: 'transparent',
+                            color: 'inherit',
+                        },
+                    },
+                    '&[data-hovered]': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+                input: {
+                    '&:not(.mantine-Textarea-input)': {
+                        height: 40,
+                        fontSize: rem(14),
+                        paddingLeft: 14,
+                        paddingRight: 14,
+                        [theme.fn.largerThan('sm')]: {
+                            height: 46,
+                            fontSize: rem(16),
+                            paddingLeft: 16,
+                            paddingRight: 16,
+                            borderColor: 'transparent',
+                        },
+                        '&:focus, &:focus-within': {
+                            outline: 'none',
+                            boxShadow: 'none',
+                        },
+                    },
+                },
+                itemsWrapper: {
+                    padding: 0,
+                },
+                wrapper: {
+                    [theme.fn.largerThan('sm')]: {
+                        position: 'relative',
+                        '&:after': {
+                            content: '""',
+                            width: '1px',
+                            height: '20px',
+                            backgroundColor: '#E4E8EC',
+                            position: 'absolute',
+                            right: 0,
+                            top: '13px',
+                        },
+                    },
+                },
+            }), itemComponent: CustomSelectItem$1, filter: (value, item) => item.label.toLowerCase().includes(value.toLowerCase().trim()), onChange: (value) => {
+                if (value == null)
+                    return;
+                const specialty = specialtyData.find((i) => String(i.id) === value);
+                if (!specialty)
+                    return;
+                onSpecialtyClick(Object.assign(Object.assign(Object.assign({}, specialty), { thumbnail: specialty.thumbnail || '' }), (Number(value) !== -1 && {
+                    total_doctor: 0,
+                })));
+            } })));
 };
 
-const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', focusSearchInput, onSearch, onEnterSearch, dispatch, }) => {
-    var _a;
+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 theme = useMantineTheme();
     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 hasSearchIcon = !onlyShowSearchBox;
     const gaAttributes = useMemo(() => {
         if (trackingAttributes) {
             return {
@@ -693,20 +803,16 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
         }
     }, [trackingAttributes]);
     const placeholderSearch = useMemo(() => {
-        if (type === 'doctor') {
+        if (type === 'doctor')
             return t('booking.searchBar.placeholder.doctor');
-        }
-        if (type === 'service') {
+        if (type === 'service')
             return t('booking.searchBar.placeholder.service');
-        }
-        if (type === 'hospital') {
+        if (type === 'hospital')
             return t('booking.searchBar.placeholder.hospital');
-        }
-        if (type === 'specialty') {
+        if (type === 'specialty')
             return t('booking.searchBar.placeholder.specialty');
-        }
         return '';
-    }, [type]);
+    }, [type, t]);
     const styleInputWrapper = useMemo(() => {
         return {
             root: {
@@ -716,7 +822,11 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
                         display: 'none',
                     },
                     input: {
-                        paddingLeft: '48px',
+                        paddingLeft: hasSearchIcon ? 48 : 16,
+                        [theme.fn.smallerThan('sm')]: {
+                            height: 40,
+                            fontSize: rem(14),
+                        },
                     },
                     '.mantine-Input-icon': {
                         left: '0',
@@ -724,22 +834,22 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
                 },
             },
         };
-    }, []);
+    }, [hasSearchIcon, theme]);
     const styleInput = useMemo(() => {
         return {
             icon: {
-                left: '165px',
+                left: '205px',
             },
             input: {
                 color: '#262626',
                 '&[data-with-icon="true"]': {
-                    paddingLeft: '205px',
+                    paddingLeft: '245px',
                     paddingRight: '16px',
                 },
             },
             rightSection: {
                 left: 0,
-                width: '165px',
+                width: '205px',
                 padding: '1px',
             },
         };
@@ -752,7 +862,7 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
         };
     }, []);
     useOutsideClick(inputSearchWrapperRef, () => {
-        dispatch({ type: ActionTypes.ClickOutsideInputSearch });
+        !isMobile && dispatch({ type: ActionTypes.ClickOutsideInputSearch });
     });
     const handleSearchInputChange = useCallback(function handleSearchInputChange(value) {
         dispatch({ type: ActionTypes.ChangeInputSearch, payload: value });
@@ -764,40 +874,84 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
             value.trim().length === 0) {
             debouncedFetchSearchResults(value.trim(), state, type, clientSlug);
         }
-        else {
-            debouncedFetchSearchResults.cancel();
-            dispatch({ type: ActionTypes.DisplayInitialSearchResults });
-        }
-    }, [dispatch, state, type]);
+    }, [
+        dispatch,
+        state,
+        type,
+        initalSearchValue,
+        debouncedFetchSearchResults,
+        clientSlug,
+        onSearch,
+    ]);
     const handleSpecialtyClick = useCallback(function handleSpecialtyClick(specialty) {
+        var _a;
         dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
-        focusSearchInput();
-    }, [dispatch]);
+        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.keyCode === 13) {
+        if (e.key === 'Enter') {
             e.stopPropagation();
             e.preventDefault();
             onEnterSearch && onEnterSearch();
         }
     }, [onEnterSearch]);
     return (React__default.createElement(StyleSearchInputsWrapper, { ref: inputSearchWrapperRef }, type === 'specialty' ? (React__default.createElement(Input.Wrapper, { styles: styleInputWrapper },
-        React__default.createElement(Input, { icon: React__default.createElement(Search, null), size: isMobile ? 'md' : 'lg', placeholder: placeholderSearch, styles: styleInputSpecialties, value: state.searchKeywords, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearchSpecialty }), onChange: (event) => {
+        React__default.createElement(Input, { ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(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.createElement(React__default.Fragment, null,
         type === 'service' ? (React__default.createElement(Input.Wrapper, { styles: styleInputWrapper },
-            React__default.createElement(Input, { icon: React__default.createElement(Search, null), size: isMobile ? 'md' : 'lg', name: "search-results", placeholder: placeholderSearch, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearch }), value: state.searchKeywords, onChange: (event) => {
+            React__default.createElement(Input, { ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(Search, null), size: isMobile ? 'md' : 'lg', name: "search-results", placeholder: placeholderSearch, onFocus: () => {
+                    dispatch({ type: ActionTypes.FocusInputSearch });
+                    onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
+                }, value: state.searchKeywords, onChange: (event) => {
                     handleSearchInputChange(event.target.value);
                 }, onKeyDown: inputOnKeyDown }))) : (React__default.createElement(React__default.Fragment, null, isMobile && !hideSpecialtySelection ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick }),
+            !onlyShowSearchBox && (React__default.createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick })),
             React__default.createElement(Input.Wrapper, { styles: styleInputWrapper },
-                React__default.createElement(Input, { icon: React__default.createElement(Search, null), size: "md", placeholder: placeholderSearch, value: state.searchKeywords, name: "search-results", onFocus: () => dispatch({ type: ActionTypes.FocusInputSearch }), onChange: (event) => {
+                React__default.createElement(Input, { ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(Search, null), size: "md", placeholder: placeholderSearch, value: state.searchKeywords, name: "search-results", onFocus: () => {
+                        dispatch({ type: ActionTypes.FocusInputSearch });
+                        onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
+                    }, onChange: (event) => {
                         handleSearchInputChange(event.target.value);
                     }, onKeyDown: inputOnKeyDown })))) : (React__default.createElement(Input.Wrapper, { styles: styleInputWrapper, className: hideSpecialtySelection ? 'hide-specialty-selection' : '' },
-            React__default.createElement(Input, Object.assign({ icon: React__default.createElement(Search, null), size: "lg", placeholder: placeholderSearch, styles: styleInput, name: "search-results", autoComplete: "off", value: state.searchKeywords, onChange: (event) => {
+            React__default.createElement(Input, Object.assign({ ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(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.createElement(React__default.Fragment, null)) : (React__default.createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick })) })))))),
-        state.focused === 'search' && (React__default.createElement(StyleResultWrapper$2, null,
-            React__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 })))))));
+                }, onFocus: () => {
+                    dispatch({ type: ActionTypes.FocusInputSearch });
+                    onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
+                }, onKeyDown: inputOnKeyDown }, gaAttributes, { rightSection: hideSpecialtySelection ? (React__default.createElement(React__default.Fragment, null)) : (!onlyShowSearchBox && (React__default.createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick }))) })))))),
+        !isMobile && (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 `
@@ -810,7 +964,7 @@ const StyleSearchLocationWrapper = styled.div `
     gap: 12px;
   }
 `;
-const StyleResultWrapper = styled.div `
+styled.div `
   position: absolute;
   top: calc(100% + 2px);
   width: 100%;
@@ -833,17 +987,6 @@ const StyledLocationItem = styled.div `
   gap: 14px;
   overflow: hidden;
 
-  ${({ isSelected }) => isSelected &&
-    `
-        &::after {
-            content: ${checkMarkIconUrl};
-            top: 50%;
-            right: 18px;
-            position: absolute;
-            transform: translateY(-50%);
-        }
-    `}
-
   & + li::before {
     content: '';
     position: absolute;
@@ -878,9 +1021,29 @@ const StyledPinIcon = styled(PinIcon) `
   flex: 0 0 12px;
 `;
 
-const SearchLocation = ({ state, isMobile, debouncedFetchCitiesByKeyword, selectedLocation, trackingAttributes, onLocationClick, dispatch, }) => {
+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 {
@@ -889,9 +1052,7 @@ const SearchLocation = ({ state, isMobile, debouncedFetchCitiesByKeyword, select
                 'data-event-label': trackingAttributes.dataEventLabel,
             };
         }
-        else {
-            return {};
-        }
+        return {};
     }, [trackingAttributes]);
     const handleSearchLocationInputChange = useCallback(function handleSearchLocationInputChange(value) {
         dispatch({ type: ActionTypes.ChangeInputLocation, payload: value });
@@ -902,37 +1063,90 @@ const SearchLocation = ({ state, isMobile, debouncedFetchCitiesByKeyword, select
             debouncedFetchCitiesByKeyword.cancel();
             dispatch({ type: ActionTypes.DisplayInitialCities });
         }
-    }, [debouncedFetchCitiesByKeyword, dispatch]);
+    }, [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(Input.Wrapper, null,
-            React__default.createElement(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.createElement(StyleResultWrapper, null,
-            React__default.createElement(ScrollArea, { scrollbarSize: 6, styles: { viewport: { maxHeight: 400 } } },
-                React__default.createElement(StyledLocationItem, { key: "all-location", role: "button", tabIndex: 0, onClick: () => {
-                        var _a;
-                        if (onLocationClick) {
-                            onLocationClick({
-                                name: t('booking.searchBar.allLocations'),
-                                id: ID_OPTION_ALL_LOCATION,
-                                slug: (_a = LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.ALL,
-                            });
-                        }
-                    } },
-                    React__default.createElement(StyledPinIcon, { color: theme.colors.neutral400 }),
-                    React__default.createElement(Text, { size: "md" }, t('booking.searchBar.allLocations'))),
-                state.cities.map((city) => (React__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.createElement(StyledPinIcon, { color: theme.colors.neutral400 }),
-                    React__default.createElement(Text, { size: "md" }, city.name)))))))));
+        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", data: citiesData.map((city) => ({
+                value: String(city.id),
+                label: city.name,
+                city,
+            })), rightSection: React__default.createElement(React__default.Fragment, null) }, gaAttributes, { styles: (theme) => ({
+                item: {
+                    padding: 0,
+                    '&[data-selected]': {
+                        '&, &:hover': {
+                            backgroundColor: 'transparent',
+                            color: 'inherit',
+                        },
+                        '.location-item': {
+                            '&::after': {
+                                content: checkMarkIconUrl,
+                                top: '50%',
+                                right: 19,
+                                position: 'absolute',
+                                transform: 'translateY(-50%)',
+                            },
+                        },
+                    },
+                    '&[data-hovered]': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+                input: {
+                    '&:not(.mantine-Textarea-input)': {
+                        height: 48,
+                        fontSize: rem(16),
+                        paddingLeft: 16,
+                        paddingRight: 16,
+                        [theme.fn.smallerThan('sm')]: {
+                            height: 40,
+                            fontSize: rem(14),
+                            paddingLeft: 14,
+                            paddingRight: 14,
+                        },
+                    },
+                },
+                itemsWrapper: {
+                    padding: 0,
+                },
+                dropdown: {
+                    left: '0 !important',
+                    border: 0,
+                    marginTop: -7,
+                    borderRadius: 0,
+                    '& ::-webkit-scrollbar': {
+                        width: '6px',
+                        height: '6px',
+                    },
+                },
+            }), itemComponent: CustomSelectItem, 
+            // 3. Logic quan trọng nhất: Luôn trả về true để bỏ qua bộ lọc mặc định của Mantine
+            // Vì chúng ta fetch data từ API hoặc dùng toàn bộ list ban đầu
+            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);
+            } }))));
 };
 
 const StyleSpecialtiesWrapper = styled.div `
@@ -1308,16 +1522,20 @@ function useSearchBarApi({ dispatch, careApiDomain, locale = 'vi-VN', client = '
             moreParams.noPaging = 1;
         }
         const requests = [
-            fetchCitiesApi(PATHS.GET_CITY_BY_IP, Object.assign(Object.assign(Object.assign({}, params), moreParams), { client: CLIENT_KEY.MSD === client ? '' : client })),
+            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));
+            requests.push(fetchCitiesApi(PATHS.GET_CITIES_LIST, {
+                noPaging: 1,
+                hospitalActive: 1,
+            }));
         }
         return Promise.all(requests)
             .then(([data1, data2]) => {
@@ -1497,11 +1715,14 @@ gaTrackingSearchBar, gaTrackingLocationSearch, autoCompleteDisabled = false, inp
 // isOptionAllLocation = false,
 // hideResults = [],
 // isNavResultItem = true,
-routerPush, onGeoLocationPermissionChange, 
+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();
@@ -1516,7 +1737,9 @@ onChangeLocation, }) => {
     const { navigateTo, focusedSpecialty, 
     // isLoadingCities,
     // cities,
-    searchKeywords, geoLocationPermission, selectedLocation, selectedSpecialty, initialSelectedCity, 
+    searchKeywords, geoLocationPermission, selectedLocation, 
+    // selectedSpecialty,
+    initialSelectedCity, 
     // defaultCity,
     searchResults, isLoadingSearchResults,
     // isMobileModalOpened,
@@ -1530,6 +1753,7 @@ onChangeLocation, }) => {
         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'),
@@ -1553,34 +1777,31 @@ onChangeLocation, }) => {
     }, [currentTab]);
     const debouncedFetchCitiesByKeyword = useMemo(() => debounce(fetchCitiesByKeyword, 400), [fetchCitiesByKeyword]);
     const debouncedFetchSearchResults = useMemo(() => debounce(fetchSearchResults, 400), [fetchSearchResults]);
-    const handleLocationClick = useCallback(function handleLocationClick(city) {
-        dispatch({ type: ActionTypes.SelectLocation, payload: city });
-        focusSearchInput();
-        if (onChangeLocation) {
-            onChangeLocation(city);
-        }
-    }, [t, dispatch]);
-    function focusSearchInput() {
+    // function focusSearchInput() {
+    //   if (wrapperRef.current) {
+    //     wrapperRef.current
+    //       .querySelector<HTMLInputElement>('input[name="search-results"]')
+    //       ?.focus()
+    //   }
+    // }
+    const onClickSearchByKeyword = useCallback(function onClickSearchByKeyword({ locationSlug, specialtyId, } = {}) {
         var _a;
-        if (wrapperRef.current) {
-            (_a = wrapperRef.current
-                .querySelector('input[name="search-results"]')) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
-    function onClickSearchByKeyword() {
+        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') &&
-            state.selectedSpecialty.id > 0) {
-            moreParams = `&specialtyId=${state.selectedSpecialty.id}`;
+            selectedSpecialtyId > 0) {
+            moreParams = `&specialtyId=${selectedSpecialtyId}`;
         }
         if (currentTab === 'specialty') {
             url = `/${typeSlug}`;
         }
         else {
-            url = `/${selectedLocation.slug}/${typeSlug}`;
+            url = `/${selectedLocationSlug}/${typeSlug}`;
         }
         if (slugClientUrl) {
             url += `/${slugClientUrl}`;
@@ -1589,9 +1810,34 @@ onChangeLocation, }) => {
         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, () => {
-        dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
+        !isMobile &&
+            dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
     });
     useEffect(() => {
         var _a;
@@ -1614,6 +1860,7 @@ onChangeLocation, }) => {
         fetchCitiesByLocation({ coordinates: state.geoLocationCoordinates });
     }, [geoLocationPermission]);
     useEffect(() => {
+        var _a;
         const defaultSpecialty = initSpecialty
             ? initSpecialty
             : {
@@ -1623,13 +1870,23 @@ onChangeLocation, }) => {
                 total_doctor: 0,
                 slug: slugs.SPECIALTIES,
             };
-        if (!state.selectedSpecialty) {
+        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, state.selectedSpecialty]);
+    }, [initSpecialty, slugs.SPECIALTIES, t]);
     useEffect(() => {
         fetchAllSpecialties();
     }, []);
@@ -1648,25 +1905,62 @@ onChangeLocation, }) => {
     }, [navigateTo]);
     useEffect(() => {
         fetchSearchResults(state.searchKeywords, state, currentTab, clientSlug, true);
-    }, [selectedLocation, selectedSpecialty, currentTab]);
-    return (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", justify: "space-between", align: "center", direction: isMobile ? 'column' : 'row', className: "flex-search-input" },
-                            currentTab !== 'specialty' && (React__default.createElement(SearchLocation, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchCitiesByKeyword: debouncedFetchCitiesByKeyword, selectedLocation: selectedLocation, onLocationClick: handleLocationClick, trackingAttributes: gaTrackingLocationSearch })),
-                            React__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 || hideSpecialtyTab, clientSlug: clientSlug }),
-                            React__default.createElement(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.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 }))))))));
+    }, [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", justify: "space-between", align: "center", direction: isMobile ? 'column' : 'row', className: "flex-search-input" },
+                                currentTab !== 'specialty' && (React__default.createElement(SearchLocation, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchCitiesByKeyword: debouncedFetchCitiesByKeyword, selectedLocation: selectedLocation, onLocationClick: handleLocationClick, trackingAttributes: gaTrackingLocationSearch })),
+                                React__default.createElement(SearchInputs, Object.assign({}, searchInputsProps, { ref: searchInputDesktopRef, onFocusInput: () => isMobile && open() })),
+                                React__default.createElement(Button, { size: isMobile ? 'md' : 'lg', fullWidth: isMobile, variant: "primary", onClick: () => onClickSearchByKeyword(), styles: {
+                                        root: {
+                                            height: isMobile ? '40px' : '48px',
+                                        },
+                                    } }, 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() })) },
+            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 }))))));
 };
 
 export { BookingSearchBarV2 };