@hhgtech/hhg-components 1.29.525 → 1.29.526-beta-1

package/build/care/components/organisms/bookingSearchBarV2/searchInputs/index.d.ts

@@ -1,4 +1,5 @@
 import React, { Dispatch } from 'react';
+import { Specialty } from "../../../../interfaces/types";
 import type { DebouncedFunc } from 'lodash';
 import { ReducerState, Action } from "../reducer";
 import { TypeSearch, SearchClick, GATrackingCode } from "../types";
@@ -18,11 +19,14 @@ type Props = {
         };
     };
     trackingAttributes?: GATrackingCode;
+    onlyShowSearchBox?: boolean;
     dispatch: Dispatch<Action>;
     onSearch?: (info: SearchClick) => void;
     onEnterSearch?: () => void;
+    onFocusInput?: () => void;
     focusSearchInput?: () => void;
+    onChangeSpecialty?: (specialty: Specialty) => void;
     debouncedFetchSearchResults: DebouncedFunc<(keyword: string, state: ReducerState, searchType: TypeSearch, clientSlug?: string) => Promise<void>>;
 };
-declare const SearchInputs: ({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection, clientSlug, focusSearchInput, onSearch, onEnterSearch, dispatch, }: Props) => React.JSX.Element;
+declare const SearchInputs: ({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection, clientSlug, onSearch, onFocusInput, onEnterSearch, dispatch, onlyShowSearchBox, onChangeSpecialty, }: Props) => React.JSX.Element;
 export default SearchInputs;

package/build/care/components/organisms/bookingSearchBarV2/searchResult/index.d.ts

@@ -5,7 +5,7 @@ import { TypeSearch } from "../types";
 type SearchResultProps = {
     state: ReducerState;
     type: TypeSearch;
-    results: SearchBarSectionItemApi[];
+    results: SearchBarSectionItemApi[] | null;
     location: string;
     isLoading: boolean;
     clientSlug?: string;
@@ -18,5 +18,5 @@ type SearchResultProps = {
     };
     dispatch: Dispatch<Action>;
 };
-declare const SearchResult: ({ state, type, results, location, isLoading, typeInformation, clientSlug, dispatch, }: SearchResultProps) => React.JSX.Element;
+declare const SearchResult: ({ state, type, results, isLoading, typeInformation, dispatch, }: SearchResultProps) => React.JSX.Element;
 export default SearchResult;

package/build/care.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var careBookingSearchBar = require('./careBookingSearchBar.js');
 var careBookingSearchBarV2 = require('./careBookingSearchBarV2.js');
-var index = require('./index-8e26f9b1.js');
-var constants = require('./constants-e80b8346.js');
-var types = require('./types-eed43f90.js');
-require('./tslib.es6-2eaf44fd.js');
+var index = require('./index-362ee362.js');
+var constants = require('./constants-a2884034.js');
+var types = require('./types-a861e375.js');
+require('./tslib.es6-2ff86dd0.js');
 require('react');
 require('@emotion/react');
-require('./utils-354b6c48.js');
-require('./index-1362f6dd.js');
+require('./utils-12ba0313.js');
+require('./index-606fbb69.js');
 require('date-fns/locale');
-require('./index-9c232d90.js');
-require('./Locale-c7aa0348.js');
+require('./index-b6d93e37.js');
+require('./Locale-a2c0c047.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
@@ -22,22 +22,28 @@ require('./constantsIsProduction.js');
 require('./miscCookieHelper.js');
 require('@emotion/styled');
 require('./miscTheme.js');
-require('./utils-dce24a80.js');
+require('./utils-cf2e5c26.js');
 require('react-loading-skeleton');
 require('string-format');
-require('./index-50b2cbd1.js');
-require('./translationsContext-5ed79623.js');
+require('./index-87806d4b.js');
+require('./translationsContext-d015d0ca.js');
 require('lodash/debounce');
-require('./index-6150928f.js');
+require('./index-2e8558cb.js');
 require('@mantine/core');
-require('./index-1e573fd0.js');
-require('./index-91c21c69.js');
+require('./index-503a4ce1.js');
+require('./index-6610efa2.js');
 require('lodash/shuffle');
-require('./useOutsideClick-6705b369.js');
-require('./paths-17aeebed.js');
-require('./index-ca2514cf.js');
+require('./useOutsideClick-39509a18.js');
+require('./paths-5b08eba6.js');
 require('@hhgtech/icons/core');
-require('./ChevronDown-785aac28.js');
+require('@mantine/hooks');
+require('./index-44f08f13.js');
+require('./ChevronDown-77dc3752.js');
+require('@hhgtech/icons/arrow');
+require('./index-fa106077.js');
+require('./index.styles-5bb3a7ff.js');
+require('./index-f7a4ad09.js');
+require('./shared-64db2a18.js');
 
 
 

package/build/careBookingSearchBar.js

@@ -2,35 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-2eaf44fd.js');
+var tslib_es6 = require('./tslib.es6-2ff86dd0.js');
 var React = require('react');
 var react = require('@emotion/react');
-var utils = require('./utils-354b6c48.js');
-var index$1 = require('./index-50b2cbd1.js');
+var utils = require('./utils-12ba0313.js');
+var index$1 = require('./index-87806d4b.js');
 var debounce = require('lodash/debounce');
-var constants = require('./constants-e80b8346.js');
+var constants = require('./constants-a2884034.js');
 var styled = require('@emotion/styled');
-var index = require('./index-6150928f.js');
-var index$2 = require('./index-1e573fd0.js');
+var index = require('./index-2e8558cb.js');
+var index$2 = require('./index-503a4ce1.js');
 var miscTheme = require('./miscTheme.js');
 var shuffle = require('lodash/shuffle');
-var useOutsideClick = require('./useOutsideClick-6705b369.js');
-var utils$1 = require('./utils-dce24a80.js');
+var useOutsideClick = require('./useOutsideClick-39509a18.js');
+var utils$1 = require('./utils-cf2e5c26.js');
 var Skeleton = require('react-loading-skeleton');
-var paths = require('./paths-17aeebed.js');
-require('./index-1362f6dd.js');
+var paths = require('./paths-5b08eba6.js');
+require('./index-606fbb69.js');
 require('date-fns/locale');
-require('./index-9c232d90.js');
-require('./Locale-c7aa0348.js');
+require('./index-b6d93e37.js');
+require('./Locale-a2c0c047.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('./miscCookieHelper.js');
 require('string-format');
-require('./translationsContext-5ed79623.js');
+require('./translationsContext-d015d0ca.js');
 require('@mantine/core');
-require('./index-91c21c69.js');
+require('./index-6610efa2.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/careBookingSearchBarV2.js

@@ -3,24 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var core$1 = require('@hhgtech/icons/core');
 var core = require('@mantine/core');
-var utils$1 = require('./utils-354b6c48.js');
-var useOutsideClick = require('./useOutsideClick-6705b369.js');
-var index$1 = require('./index-50b2cbd1.js');
+var hooks = require('@mantine/hooks');
+var utils$1 = require('./utils-12ba0313.js');
+var useOutsideClick = require('./useOutsideClick-39509a18.js');
+var index$1 = require('./index-87806d4b.js');
 var debounce = require('lodash/debounce');
-var constants = require('./constants-e80b8346.js');
+var constants = require('./constants-a2884034.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-dce24a80.js');
-var index = require('./index-ca2514cf.js');
-var core$1 = require('@hhgtech/icons/core');
-var index$2 = require('./index-1e573fd0.js');
-var ChevronDown = require('./ChevronDown-785aac28.js');
-var paths = require('./paths-17aeebed.js');
-require('./index-1362f6dd.js');
+var utils = require('./utils-cf2e5c26.js');
+var index = require('./index-44f08f13.js');
+var index$2 = require('./index-503a4ce1.js');
+var ChevronDown = require('./ChevronDown-77dc3752.js');
+var tslib_es6 = require('./tslib.es6-2ff86dd0.js');
+var arrow = require('@hhgtech/icons/arrow');
+var index$3 = require('./index-fa106077.js');
+var paths = require('./paths-5b08eba6.js');
+var index$4 = require('./index-f7a4ad09.js');
+require('./index-606fbb69.js');
 require('date-fns/locale');
-require('./index-9c232d90.js');
-require('./Locale-c7aa0348.js');
+require('./index-b6d93e37.js');
+require('./Locale-a2c0c047.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
@@ -28,9 +33,10 @@ require('./constantsIsProduction.js');
 require('./miscCookieHelper.js');
 require('react-loading-skeleton');
 require('string-format');
-require('./translationsContext-5ed79623.js');
-require('./tslib.es6-2eaf44fd.js');
-require('./index-91c21c69.js');
+require('./translationsContext-d015d0ca.js');
+require('./index-6610efa2.js');
+require('./index.styles-5bb3a7ff.js');
+require('./shared-64db2a18.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -225,9 +231,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:
@@ -317,7 +323,7 @@ const StyleResultWrapper$2 = styled__default["default"].div `
 `;
 
 const StyledSearchResultWrapper = styled__default["default"].div ``;
-const StyleResultHeader = styled__default["default"].div `
+styled__default["default"].div `
   display: flex;
   justify-content: space-between;
   align-item: center;
@@ -418,8 +424,12 @@ styled__default["default"].div `
   }
 `;
 
-const SearchResult = ({ state, type, results, location, isLoading, typeInformation, clientSlug = '', dispatch, }) => {
-    const { locale, t } = index$1.useTranslations();
+const SearchResult = ({ state, type, results, 
+// location,
+isLoading, typeInformation, 
+// clientSlug = '',
+dispatch, }) => {
+    const { t } = index$1.useTranslations();
     const { selectedLocation } = state;
     const typeSlug = React.useMemo(() => typeInformation[type].slug, [typeInformation, type]);
     const handleOnClick = (item) => {
@@ -440,28 +450,26 @@ const SearchResult = ({ state, type, results, location, isLoading, typeInformati
             });
         }
     };
-    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 });
-        }
-    };
+    // 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["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,
+        React__default["default"].createElement(StyleResultBody, { className: "search-results__body" },
             isLoading &&
                 Array(3)
                     .fill(undefined)
@@ -503,6 +511,13 @@ const SearchResult = ({ state, type, results, location, isLoading, typeInformati
             !isLoading && (results === null || results === void 0 ? void 0 : results.length) === 0 && (React__default["default"].createElement(index$2.Text, { size: "sm", color: miscTheme.theme.colors.gray400 }, t('booking.searchBar.noResults'))))));
 };
 
+const SearchResultContent = ({ state, type, isLoading, clientSlug, typeInformation, dispatch, }) => {
+    var _a;
+    if (state.focused !== 'search')
+        return null;
+    return (React__default["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__default["default"].div `
   position: relative;
 
@@ -543,6 +558,7 @@ const StyledSpecialtyItem = styled__default["default"].li `
     align-items: center;
     width: 40px;
     height: 40px;
+    flex-shrink: 0;
 
     img {
       width: 100%;
@@ -681,8 +697,9 @@ const SearchSpecialty = ({ state, isMobile, debouncedFetchSearchResults, selecte
                 React__default["default"].createElement(index$2.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 SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', 
+// focusSearchInput,
+onSearch, onFocusInput, onEnterSearch, dispatch, onlyShowSearchBox, onChangeSpecialty, }) => {
     const { t } = index$1.useTranslations();
     const inputSearchWrapperRef = React.useRef(null);
     const gaAttributes = React.useMemo(() => {
@@ -757,7 +774,7 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
         };
     }, []);
     useOutsideClick.useOutsideClick(inputSearchWrapperRef, () => {
-        dispatch({ type: ActionTypes.ClickOutsideInputSearch });
+        !isMobile && dispatch({ type: ActionTypes.ClickOutsideInputSearch });
     });
     const handleSearchInputChange = React.useCallback(function handleSearchInputChange(value) {
         dispatch({ type: ActionTypes.ChangeInputSearch, payload: value });
@@ -776,7 +793,8 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
     }, [dispatch, state, type]);
     const handleSpecialtyClick = React.useCallback(function handleSpecialtyClick(specialty) {
         dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
-        focusSearchInput();
+        // focusSearchInput()
+        onChangeSpecialty === null || onChangeSpecialty === void 0 ? void 0 : onChangeSpecialty(specialty);
     }, [dispatch]);
     const inputOnKeyDown = React.useCallback((e) => {
         if (e.keyCode === 13) {
@@ -786,23 +804,44 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
         }
     }, [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) => {
+        React__default["default"].createElement(core.Input, { icon: !onlyShowSearchBox && 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) => {
+            React__default["default"].createElement(core.Input, { icon: !onlyShowSearchBox && 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 }),
+            !onlyShowSearchBox && (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) => {
+                React__default["default"].createElement(core.Input, { icon: !onlyShowSearchBox && React__default["default"].createElement(core$1.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["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) => {
+            React__default["default"].createElement(core.Input, Object.assign({ icon: !onlyShowSearchBox && 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 })))))));
+                }, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearch }), onKeyDown: inputOnKeyDown }, gaAttributes, { rightSection: hideSpecialtySelection ? (React__default["default"].createElement(React__default["default"].Fragment, null)) : (!onlyShowSearchBox && (React__default["default"].createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick }))) })))))),
+        !isMobile && (React__default["default"].createElement(StyleResultWrapper$2, null,
+            React__default["default"].createElement(SearchResultContent, { type: type, state: state, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug })))))));
+};
+
+const ModalSearchResult = (_a) => {
+    var { searchInputEle, closeModal, children } = _a, props = tslib_es6.__rest(_a, ["searchInputEle", "closeModal", "children"]);
+    const theme = core.useMantineTheme();
+    return (React__default["default"].createElement(index$3.Modal, Object.assign({}, props, { zIndex: 310, fullScreen: true, styles: {
+            content: {
+                borderRadius: 0,
+                height: '100%',
+                '.search-results__body': { padding: 0 },
+            },
+            header: { display: 'none' },
+        } }),
+        React__default["default"].createElement(core.Stack, { spacing: 16, sx: { paddingTop: 16 } },
+            React__default["default"].createElement(core.Flex, { align: 'center', gap: 12 },
+                React__default["default"].createElement(arrow.ArrowLeft, { size: 28, onClick: closeModal, color: theme.fn.primaryColor() }),
+                React__default["default"].createElement(core.Box, { sx: { width: '100%' } }, searchInputEle)),
+            children)));
 };
 
 const StyleSearchLocationWrapper = styled__default["default"].div `
@@ -1504,7 +1543,7 @@ gaTrackingSearchBar, gaTrackingLocationSearch, autoCompleteDisabled = false, inp
 // isNavResultItem = true,
 routerPush, onGeoLocationPermissionChange, 
 // onSearch,
-onChangeLocation, }) => {
+onChangeLocation, onChangeSpecialty, }) => {
     const { locale, t } = index$1.useTranslations();
     const wrapperRef = React.useRef(null);
     const inputSearchSpecialtyWrapperRef = React.useRef(null);
@@ -1521,7 +1560,9 @@ onChangeLocation, }) => {
     const { navigateTo, focusedSpecialty, 
     // isLoadingCities,
     // cities,
-    searchKeywords, geoLocationPermission, selectedLocation, selectedSpecialty, initialSelectedCity, 
+    searchKeywords, geoLocationPermission, selectedLocation, 
+    // selectedSpecialty,
+    initialSelectedCity, 
     // defaultCity,
     searchResults, isLoadingSearchResults,
     // isMobileModalOpened,
@@ -1535,6 +1576,7 @@ onChangeLocation, }) => {
         client: clientSlug,
     });
     const slugs = React.useMemo(() => constants.LOCALIZED_SLUGS[locale], [locale]);
+    const [opened, { close, open }] = hooks.useDisclosure(false);
     const typeInformation = React.useMemo(() => {
         return Object.assign({ doctor: {
                 name: t('booking.searchPopup.doctors'),
@@ -1560,7 +1602,7 @@ onChangeLocation, }) => {
     const debouncedFetchSearchResults = React.useMemo(() => debounce__default["default"](fetchSearchResults, 400), [fetchSearchResults]);
     const handleLocationClick = React.useCallback(function handleLocationClick(city) {
         dispatch({ type: ActionTypes.SelectLocation, payload: city });
-        focusSearchInput();
+        // focusSearchInput()
         if (onChangeLocation) {
             onChangeLocation(city);
         }
@@ -1653,25 +1695,47 @@ onChangeLocation, }) => {
     }, [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, hideSpecialtyTab: hideSpecialtyTab }),
-        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 || hideSpecialtyTab, 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 }))))))));
+    }, [currentTab]);
+    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,
+        onChangeSpecialty,
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(StyledSearchBarWrapper, { ref: wrapperRef },
+            React__default["default"].createElement(TabSearch, { currentTab: currentTab, setCurrentTab: setCurrentTab, isMobile: isMobile, hideTabBookingSearch: hideTabBookingSearch, hideSpecialtyTab: hideSpecialtyTab }),
+            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, Object.assign({}, searchInputsProps, { onFocusInput: () => isMobile && open() })),
+                                React__default["default"].createElement(index$4.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["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 }))))))),
+        isMobile && (React__default["default"].createElement(ModalSearchResult, { opened: opened, onClose: close, closeModal: close, searchInputEle: React__default["default"].createElement(core.Flex, { align: 'center', gap: 8 },
+                React__default["default"].createElement(SearchInputs, Object.assign({}, searchInputsProps, { onlyShowSearchBox: true })),
+                React__default["default"].createElement(index$4.Button, { variant: "primary", leftIcon: React__default["default"].createElement(core$1.Search, { size: 20, color: '#fff' }), onClick: onClickSearchByKeyword })) },
+            React__default["default"].createElement(SearchResultContent, { type: currentTab, state: state, dispatch: dispatch, isLoading: isLoadingSearchResults, typeInformation: typeInformation, clientSlug: clientSlug })))));
 };
 
 exports.BookingSearchBarV2 = BookingSearchBarV2;