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

package/build/esm/care.js

@@ -1,16 +1,16 @@
 export { BookingSearchBar } from './careBookingSearchBar.js';
 export { BookingSearchBarV2 } from './careBookingSearchBarV2.js';
-export { T as TextDivider } from './index-8eff5c9f.js';
-export { c as CareConstants } from './constants-049df8d3.js';
-export { t as CareTypes } from './types-a07565fd.js';
-import './tslib.es6-18531dd0.js';
+export { T as TextDivider } from './index-828d5625.js';
+export { c as CareConstants } from './constants-d62d7d60.js';
+export { t as CareTypes } from './types-770ff56e.js';
+import './tslib.es6-92483664.js';
 import 'react';
 import '@emotion/react';
-import './utils-1710fcd0.js';
-import './index-9ce329c4.js';
+import './utils-2b748923.js';
+import './index-2fdd4d60.js';
 import 'date-fns/locale';
-import './index-3878ad9a.js';
-import './Locale-31033741.js';
+import './index-ce0be063.js';
+import './Locale-b0c9a8e4.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
@@ -18,19 +18,25 @@ import './constantsIsProduction.js';
 import './miscCookieHelper.js';
 import '@emotion/styled';
 import './miscTheme.js';
-import './utils-a370ce73.js';
+import './utils-ff370e03.js';
 import 'react-loading-skeleton';
 import 'string-format';
-import './index-43ba5a61.js';
-import './translationsContext-ab5e7a29.js';
+import './index-6407f430.js';
+import './translationsContext-78d3f8a6.js';
 import 'lodash/debounce';
-import './index-de982e01.js';
+import './index-6e8ef1c0.js';
 import '@mantine/core';
-import './index-093903c3.js';
-import './index-88d0d798.js';
+import './index-854754c9.js';
+import './index-28c91101.js';
 import 'lodash/shuffle';
-import './useOutsideClick-933ec28a.js';
-import './paths-ab1a2184.js';
-import './index-4a36ebee.js';
+import './useOutsideClick-d1e37218.js';
+import './paths-3afdd94d.js';
 import '@hhgtech/icons/core';
-import './ChevronDown-c160a163.js';
+import '@mantine/hooks';
+import './index-d296eae1.js';
+import './ChevronDown-848fd41b.js';
+import '@hhgtech/icons/arrow';
+import './index-51e2478d.js';
+import './index.styles-1a706e1e.js';
+import './index-cbc045f0.js';
+import './shared-8d048ab6.js';

package/build/esm/careBookingSearchBar.js

@@ -1,32 +1,32 @@
-import { a as __awaiter } from './tslib.es6-18531dd0.js';
+import { a as __awaiter } from './tslib.es6-92483664.js';
 import React__default, { useMemo, useEffect, useRef, useCallback, useState, useReducer } from 'react';
 import { Global, css } from '@emotion/react';
-import { S as StyledLocationResultsWrapper, a as StyledLocationResultsList, b as StyledLiSkeleton, c as StyledLocationItem, d as StyledPinIcon, M as MagnifierIcon, C as CloseIcon, e as ClearIcon, P as PinIcon, D as DefaultThumbnailAny, f as DefaultThumbnailDoctor, g as DefaultThumbnailService, h as getApiPath, u as useGeolocation } from './utils-1710fcd0.js';
-import { u as useTranslations } from './index-43ba5a61.js';
+import { S as StyledLocationResultsWrapper, a as StyledLocationResultsList, b as StyledLiSkeleton, c as StyledLocationItem, d as StyledPinIcon, M as MagnifierIcon, C as CloseIcon, e as ClearIcon, P as PinIcon, D as DefaultThumbnailAny, f as DefaultThumbnailDoctor, g as DefaultThumbnailService, h as getApiPath, u as useGeolocation } from './utils-2b748923.js';
+import { u as useTranslations } from './index-6407f430.js';
 import debounce from 'lodash/debounce';
-import { I as ID_OPTION_ALL_LOCATION, L as LOCALIZED_SLUGS, a as ID_OPTION_CURRENT_LOCATION } from './constants-049df8d3.js';
+import { I as ID_OPTION_ALL_LOCATION, L as LOCALIZED_SLUGS, a as ID_OPTION_CURRENT_LOCATION } from './constants-d62d7d60.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-de982e01.js';
-import { T as Text } from './index-093903c3.js';
+import { I as Input } from './index-6e8ef1c0.js';
+import { T as Text } from './index-854754c9.js';
 import { theme } from './miscTheme.js';
 import shuffle from 'lodash/shuffle';
-import { a as useOutsideClick } from './useOutsideClick-933ec28a.js';
-import { M as MediaQueries } from './utils-a370ce73.js';
+import { a as useOutsideClick } from './useOutsideClick-d1e37218.js';
+import { M as MediaQueries } from './utils-ff370e03.js';
 import Skeleton from 'react-loading-skeleton';
-import { P as PATHS } from './paths-ab1a2184.js';
-import './index-9ce329c4.js';
+import { P as PATHS } from './paths-3afdd94d.js';
+import './index-2fdd4d60.js';
 import 'date-fns/locale';
-import './index-3878ad9a.js';
-import './Locale-31033741.js';
+import './index-ce0be063.js';
+import './Locale-b0c9a8e4.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
 import './miscCookieHelper.js';
 import 'string-format';
-import './translationsContext-ab5e7a29.js';
+import './translationsContext-78d3f8a6.js';
 import '@mantine/core';
-import './index-88d0d798.js';
+import './index-28c91101.js';
 
 const StyledSearchBarWrapper = styled.div ``;
 const StyledSearchBarMobileWrapper = styled.div `

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-1710fcd0.js';
-import { a as useOutsideClick } from './useOutsideClick-933ec28a.js';
-import { u as useTranslations } from './index-43ba5a61.js';
+import { Search } from '@hhgtech/icons/core';
+import { Skeleton, Input, useMantineTheme, rem, Stack, Flex, Box, ScrollArea, 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-2b748923.js';
+import { a as useOutsideClick } from './useOutsideClick-d1e37218.js';
+import { u as useTranslations } from './index-6407f430.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-049df8d3.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-d62d7d60.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-a370ce73.js';
-import { C as Container } from './index-4a36ebee.js';
-import { Search } from '@hhgtech/icons/core';
-import { T as Text } from './index-093903c3.js';
-import { C as ChevronDown } from './ChevronDown-c160a163.js';
-import { P as PATHS } from './paths-ab1a2184.js';
-import './index-9ce329c4.js';
+import { M as MediaQueries } from './utils-ff370e03.js';
+import { C as Container } from './index-d296eae1.js';
+import { T as Text } from './index-854754c9.js';
+import { C as ChevronDown } from './ChevronDown-848fd41b.js';
+import { _ as __rest } from './tslib.es6-92483664.js';
+import { ArrowLeft } from '@hhgtech/icons/arrow';
+import { M as Modal } from './index-51e2478d.js';
+import { P as PATHS } from './paths-3afdd94d.js';
+import { B as Button } from './index-cbc045f0.js';
+import './index-2fdd4d60.js';
 import 'date-fns/locale';
-import './index-3878ad9a.js';
-import './Locale-31033741.js';
+import './index-ce0be063.js';
+import './Locale-b0c9a8e4.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-ab5e7a29.js';
-import './tslib.es6-18531dd0.js';
-import './index-88d0d798.js';
+import './translationsContext-78d3f8a6.js';
+import './index-28c91101.js';
+import './index.styles-1a706e1e.js';
+import './shared-8d048ab6.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:
@@ -307,7 +313,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;
@@ -408,8 +414,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) => {
@@ -430,28 +440,26 @@ 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,
+        React__default.createElement(StyleResultBody, { className: "search-results__body" },
             isLoading &&
                 Array(3)
                     .fill(undefined)
@@ -493,6 +501,13 @@ const SearchResult = ({ state, type, results, location, isLoading, typeInformati
             !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'))))));
 };
 
+const SearchResultContent = ({ state, type, isLoading, clientSlug, typeInformation, dispatch, }) => {
+    var _a;
+    if (state.focused !== 'search')
+        return null;
+    return (React__default.createElement(SearchResult, { type: type, state: state, results: ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a[type]) || null, location: state.selectedLocation.name, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug }));
+};
+
 const StyleSearchSpecialtyWrapper = styled.div `
   position: relative;
 
@@ -533,6 +548,7 @@ const StyledSpecialtyItem = styled.li `
     align-items: center;
     width: 40px;
     height: 40px;
+    flex-shrink: 0;
 
     img {
       width: 100%;
@@ -671,10 +687,13 @@ const SearchSpecialty = ({ state, isMobile, debouncedFetchSearchResults, selecte
                 React__default.createElement(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 } = useTranslations();
+    const theme = useMantineTheme();
     const inputSearchWrapperRef = useRef(null);
+    const hasSearchIcon = !onlyShowSearchBox;
     const gaAttributes = useMemo(() => {
         if (trackingAttributes) {
             return {
@@ -711,7 +730,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',
@@ -747,7 +770,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 });
@@ -766,7 +789,8 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
     }, [dispatch, state, type]);
     const handleSpecialtyClick = useCallback(function handleSpecialtyClick(specialty) {
         dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
-        focusSearchInput();
+        // focusSearchInput()
+        onChangeSpecialty === null || onChangeSpecialty === void 0 ? void 0 : onChangeSpecialty(specialty);
     }, [dispatch]);
     const inputOnKeyDown = useCallback((e) => {
         if (e.keyCode === 13) {
@@ -776,23 +800,50 @@ const SearchInputs = ({ state, type, isMobile, isLoading, initalSearchValue, typ
         }
     }, [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, { 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, { 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, { 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({ 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$2, null,
+            React__default.createElement(SearchResultContent, { type: type, state: state, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug })))))));
+};
+
+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 },
+            },
+            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 `
@@ -1494,7 +1545,7 @@ gaTrackingSearchBar, gaTrackingLocationSearch, autoCompleteDisabled = false, inp
 // isNavResultItem = true,
 routerPush, onGeoLocationPermissionChange, 
 // onSearch,
-onChangeLocation, }) => {
+onChangeLocation, onChangeSpecialty, }) => {
     const { locale, t } = useTranslations();
     const wrapperRef = useRef(null);
     const inputSearchSpecialtyWrapperRef = useRef(null);
@@ -1511,7 +1562,9 @@ onChangeLocation, }) => {
     const { navigateTo, focusedSpecialty, 
     // isLoadingCities,
     // cities,
-    searchKeywords, geoLocationPermission, selectedLocation, selectedSpecialty, initialSelectedCity, 
+    searchKeywords, geoLocationPermission, selectedLocation, 
+    // selectedSpecialty,
+    initialSelectedCity, 
     // defaultCity,
     searchResults, isLoadingSearchResults,
     // isMobileModalOpened,
@@ -1525,6 +1578,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'),
@@ -1550,7 +1604,7 @@ onChangeLocation, }) => {
     const debouncedFetchSearchResults = useMemo(() => debounce(fetchSearchResults, 400), [fetchSearchResults]);
     const handleLocationClick = useCallback(function handleLocationClick(city) {
         dispatch({ type: ActionTypes.SelectLocation, payload: city });
-        focusSearchInput();
+        // focusSearchInput()
         if (onChangeLocation) {
             onChangeLocation(city);
         }
@@ -1643,25 +1697,47 @@ 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]);
+    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.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, { 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, { opened: opened, onClose: close, closeModal: close, searchInputEle: React__default.createElement(Flex, { align: 'center', gap: 8 },
+                React__default.createElement(SearchInputs, Object.assign({}, searchInputsProps, { onlyShowSearchBox: true })),
+                React__default.createElement(Button, { variant: "primary", leftIcon: React__default.createElement(Search, { size: 20, color: '#fff' }), onClick: onClickSearchByKeyword })) },
+            React__default.createElement(SearchResultContent, { type: currentTab, state: state, dispatch: dispatch, isLoading: isLoadingSearchResults, typeInformation: typeInformation, clientSlug: clientSlug })))));
 };
 
 export { BookingSearchBarV2 };