@hhgtech/hhg-components 1.29.526-beta-6 → 1.29.526-beta-7

package/build/esm/careBookingSearchBarV2.js

@@ -1,27 +1,27 @@
-import React__default, { useMemo, useRef, useCallback, forwardRef, useImperativeHandle, useState, useReducer, useEffect } from 'react';
+import React__default, { useMemo, forwardRef, useRef, useImperativeHandle, useCallback, useState, useReducer, useEffect } from 'react';
 import { Search } from '@hhgtech/icons/core';
-import { Skeleton, Input, useMantineTheme, rem, Stack, Flex, Box, ScrollArea, Divider, Tabs } from '@mantine/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-d9a38566.js';
-import { a as useOutsideClick } from './useOutsideClick-0b625a06.js';
-import { u as useTranslations } from './index-54b2091a.js';
+import { i as checkMarkIconUrl, P as PinIcon, h as getApiPath, u as useGeolocation } from './utils-5c21d88d.js';
+import { a as useOutsideClick } from './useOutsideClick-c26f06a1.js';
+import { u as useTranslations } from './index-5adc5b30.js';
 import debounce from 'lodash/debounce';
-import { a as ID_OPTION_CURRENT_LOCATION, L as LOCALIZED_SLUGS, I as ID_OPTION_ALL_LOCATION, S as SLUG_VACIN_ID, C as CLIENT_KEY, M as MAPPING_CLIENT_WITH_SLUG } from './constants-55f91cc7.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-b27357f4.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-516259e7.js';
-import { C as Container } from './index-7ca77678.js';
-import { T as Text } from './index-ae275425.js';
-import { C as ChevronDown } from './ChevronDown-80753f54.js';
-import { _ as __rest } from './tslib.es6-b4891307.js';
+import { M as MediaQueries } from './utils-61550af1.js';
+import { C as Container } from './index-50fa3984.js';
+import { T as Text } from './index-6c9ca65d.js';
+import { C as ChevronDown } from './ChevronDown-f017c862.js';
+import { _ as __rest } from './tslib.es6-9b779584.js';
 import { ArrowLeft } from '@hhgtech/icons/arrow';
-import { M as Modal } from './index-9759e119.js';
-import { P as PATHS } from './paths-9d2b8ec1.js';
-import { B as Button } from './index-299e98eb.js';
-import './index-0b90dbc0.js';
+import { M as Modal } from './index-f27fbb2b.js';
+import { P as PATHS } from './paths-d466042e.js';
+import { B as Button } from './index-118cc328.js';
+import './index-3c4c3607.js';
 import 'date-fns/locale';
-import './index-8ba3a859.js';
-import './Locale-46117b4c.js';
+import './index-92444079.js';
+import './Locale-c4bb84ad.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
@@ -29,10 +29,10 @@ import './constantsIsProduction.js';
 import './miscCookieHelper.js';
 import 'react-loading-skeleton';
 import 'string-format';
-import './translationsContext-80dbd93a.js';
-import './index-768ecc86.js';
-import './index.styles-d249dc08.js';
-import './shared-d4f9c647.js';
+import './translationsContext-d6c1456e.js';
+import './index-f90bca1f.js';
+import './index.styles-b6b60a0e.js';
+import './shared-301ab874.js';
 
 const StyledSearchBarWrapper = styled.div ``;
 const StyleWrapperContainer = styled.div `
@@ -301,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%;
@@ -464,18 +464,17 @@ dispatch, }) => {
         return null;
     return (React__default.createElement(StyledSearchResultWrapper, null,
         React__default.createElement(StyleResultBody, { className: "search-results__body" },
-            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 }))))))),
+            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) ||
@@ -493,7 +492,7 @@ dispatch, }) => {
                 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" },
@@ -502,7 +501,7 @@ dispatch, }) => {
                             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, }) => {
@@ -522,7 +521,7 @@ const StyleSearchSpecialtyWrapper = styled.div `
     gap: 12px;
   }
 `;
-const StyleResultWrapper$1 = styled.div `
+styled.div `
   position: absolute;
   top: calc(100% + 2px);
   width: calc(100% + 100px);
@@ -604,91 +603,168 @@ const StyledSpecialtyItem = styled.li `
   }
 `;
 
-const DoctorIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
-    React__default.createElement("path", { d: "M8.983 14.333q-1.666 0-2.833-1.166Q4.983 12 4.983 10.333v-.366a3.48 3.48 0 0 1-2.258-1.2 3.57 3.57 0 0 1-.909-2.434V3.1a.58.58 0 0 1 .175-.425.58.58 0 0 1 .425-.175h1.4v-.167a.486.486 0 0 1 .5-.5q.217 0 .36.142a.5.5 0 0 1 .14.358v1.334a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V3.5h-1v2.833q0 1.1.784 1.884Q4.383 9 5.483 9t1.883-.783.784-1.884V3.5h-1v.167a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V2.333a.486.486 0 0 1 .5-.5q.217 0 .358.142a.5.5 0 0 1 .142.358V2.5h1.4a.58.58 0 0 1 .425.175.58.58 0 0 1 .175.425v3.233q0 1.4-.908 2.434a3.5 3.5 0 0 1-2.259 1.2v.366q0 1.25.875 2.126a2.9 2.9 0 0 0 2.125.874q1.25 0 2.125-.874a2.9 2.9 0 0 0 .875-2.126V9.25a1.74 1.74 0 0 1-.858-.609 1.6 1.6 0 0 1-.342-1.008q0-.716.5-1.216t1.2-.5q.716 0 1.217.5.5.5.5 1.216 0 .567-.342 1.008t-.875.609v1.083q0 1.667-1.167 2.834-1.166 1.166-2.833 1.166m3.5-6q.3 0 .509-.208a.67.67 0 0 0 .208-.492q0-.3-.208-.508a.7.7 0 0 0-.509-.208q-.3 0-.5.208a.7.7 0 0 0-.2.508q0 .284.2.492t.5.208", fill: "#595959" })));
-const ServiceIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
-    React__default.createElement("path", { d: "M6.868 9.265v.974q0 .405.284.69.284.283.69.283t.69-.284.284-.69v-.973h.973q.405 0 .69-.284a.94.94 0 0 0 .284-.689.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284h-.973v-.974a.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284.94.94 0 0 0-.689.284.94.94 0 0 0-.285.69v.974h-.973a.94.94 0 0 0-.69.283.94.94 0 0 0-.284.69q0 .405.284.69.285.284.69.284zm-3.46 4.868q-.581 0-.994-.413A1.36 1.36 0 0 1 2 12.725v-6.65a1.4 1.4 0 0 1 .563-1.127l4.434-3.333q.369-.282.844-.282.474 0 .846.282l4.434 3.333q.264.193.413.493.15.3.15.633v6.651q0 .58-.414.995a1.36 1.36 0 0 1-.994.413zm0-1.168h8.868q.105 0 .172-.068a.23.23 0 0 0 .068-.172v-6.65a.2.2 0 0 0-.027-.11.3.3 0 0 0-.07-.085L7.983 2.554a.2.2 0 0 0-.142-.052.2.2 0 0 0-.142.052L3.266 5.88a.3.3 0 0 0-.071.086.2.2 0 0 0-.027.108v6.651q0 .105.068.172a.23.23 0 0 0 .172.068", fill: "#595959" })));
-const HospitalIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
-    React__default.createElement("path", { d: "M8 8q.55 0 .941-.392.393-.391.392-.941 0-.55-.392-.942A1.28 1.28 0 0 0 8 5.333q-.55 0-.942.392a1.28 1.28 0 0 0-.391.942q0 .55.391.941Q7.45 8 8 8m0 4.9q2.032-1.866 3.017-3.392Q12 7.983 12 6.8q0-1.817-1.158-2.975Q9.682 2.667 8 2.667T5.158 3.825Q4 4.983 4 6.8q0 1.184.983 2.708Q5.966 11.034 8 12.9m0 1.517a.8.8 0 0 1-.5-.183q-2.433-2.151-3.633-3.992T2.667 6.8q0-2.5 1.608-3.983Q5.883 1.332 8 1.333q2.116 0 3.725 1.484T13.333 6.8q0 1.6-1.2 3.442-1.2 1.841-3.633 3.991a.8.8 0 0 1-.5.184", fill: "#8C8C8C" })));
-const SpecialtyIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
-    React__default.createElement("path", { d: "M3.833.5a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667M10.5.5c-.92 0-1.667.746-1.667 1.667V5.5c0 .92.746 1.667 1.667 1.667h3.333c.921 0 1.667-.746 1.667-1.667V2.167C15.5 1.246 14.754.5 13.833.5zM3.833 8.833a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667m8.334 0a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667", fill: "#9AA2AC" })));
-
-const SearchSpecialty = ({ state, isMobile, 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" },
+                React__default.createElement("img", { src: specialty.thumbnail, alt: label })),
+            React__default.createElement(Text$1, { size: "md" }, label))));
+});
+
+const SearchSpecialty = ({ state, 
+// debouncedFetchSearchResults,
+onSpecialtyClick, dispatch, }) => {
+    var _a, _b;
     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 stateValue = (_b = (_a = state === null || state === void 0 ? void 0 : state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+    const defaultValue = stateValue === null ? undefined : String(stateValue);
     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, { key: defaultValue !== null && defaultValue !== void 0 ? defaultValue : 'no-selected-specialty', defaultValue: defaultValue, 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 = forwardRef(({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', onSearch, onFocusInput, onEnterSearch, dispatch, onlyShowSearchBox, onChangeSpecialty, }, ref) => {
@@ -751,18 +827,18 @@ const SearchInputs = forwardRef(({ state, type, isMobile, isLoading, initalSearc
     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',
             },
         };
@@ -800,8 +876,7 @@ const SearchInputs = forwardRef(({ state, type, isMobile, isLoading, initalSearc
         var _a;
         dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
         onChangeSpecialty === null || onChangeSpecialty === void 0 ? void 0 : onChangeSpecialty(specialty);
-        // Sau khi chọn specialty, thường sẽ muốn focus lại vào input search
-        (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        !isMobile && ((_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [dispatch, onChangeSpecialty]);
     const inputOnKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
@@ -835,7 +910,7 @@ const SearchInputs = forwardRef(({ state, type, isMobile, isLoading, initalSearc
                     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,
+        !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';
@@ -848,6 +923,16 @@ const ModalSearchResult = (_a) => {
                 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' },
         } }),
@@ -868,7 +953,7 @@ const StyleSearchLocationWrapper = styled.div `
     gap: 12px;
   }
 `;
-const StyleResultWrapper = styled.div `
+styled.div `
   position: absolute;
   top: calc(100% + 2px);
   width: 100%;
@@ -891,17 +976,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;
@@ -936,9 +1010,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 {
@@ -947,9 +1041,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 });
@@ -960,39 +1052,101 @@ 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 DoctorIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default.createElement("path", { d: "M8.983 14.333q-1.666 0-2.833-1.166Q4.983 12 4.983 10.333v-.366a3.48 3.48 0 0 1-2.258-1.2 3.57 3.57 0 0 1-.909-2.434V3.1a.58.58 0 0 1 .175-.425.58.58 0 0 1 .425-.175h1.4v-.167a.486.486 0 0 1 .5-.5q.217 0 .36.142a.5.5 0 0 1 .14.358v1.334a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V3.5h-1v2.833q0 1.1.784 1.884Q4.383 9 5.483 9t1.883-.783.784-1.884V3.5h-1v.167a.485.485 0 0 1-.5.5.484.484 0 0 1-.5-.5V2.333a.486.486 0 0 1 .5-.5q.217 0 .358.142a.5.5 0 0 1 .142.358V2.5h1.4a.58.58 0 0 1 .425.175.58.58 0 0 1 .175.425v3.233q0 1.4-.908 2.434a3.5 3.5 0 0 1-2.259 1.2v.366q0 1.25.875 2.126a2.9 2.9 0 0 0 2.125.874q1.25 0 2.125-.874a2.9 2.9 0 0 0 .875-2.126V9.25a1.74 1.74 0 0 1-.858-.609 1.6 1.6 0 0 1-.342-1.008q0-.716.5-1.216t1.2-.5q.716 0 1.217.5.5.5.5 1.216 0 .567-.342 1.008t-.875.609v1.083q0 1.667-1.167 2.834-1.166 1.166-2.833 1.166m3.5-6q.3 0 .509-.208a.67.67 0 0 0 .208-.492q0-.3-.208-.508a.7.7 0 0 0-.509-.208q-.3 0-.5.208a.7.7 0 0 0-.2.508q0 .284.2.492t.5.208", fill: "#595959" })));
+const ServiceIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default.createElement("path", { d: "M6.868 9.265v.974q0 .405.284.69.284.283.69.283t.69-.284.284-.69v-.973h.973q.405 0 .69-.284a.94.94 0 0 0 .284-.689.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284h-.973v-.974a.94.94 0 0 0-.284-.69.94.94 0 0 0-.69-.284.94.94 0 0 0-.689.284.94.94 0 0 0-.285.69v.974h-.973a.94.94 0 0 0-.69.283.94.94 0 0 0-.284.69q0 .405.284.69.285.284.69.284zm-3.46 4.868q-.581 0-.994-.413A1.36 1.36 0 0 1 2 12.725v-6.65a1.4 1.4 0 0 1 .563-1.127l4.434-3.333q.369-.282.844-.282.474 0 .846.282l4.434 3.333q.264.193.413.493.15.3.15.633v6.651q0 .58-.414.995a1.36 1.36 0 0 1-.994.413zm0-1.168h8.868q.105 0 .172-.068a.23.23 0 0 0 .068-.172v-6.65a.2.2 0 0 0-.027-.11.3.3 0 0 0-.07-.085L7.983 2.554a.2.2 0 0 0-.142-.052.2.2 0 0 0-.142.052L3.266 5.88a.3.3 0 0 0-.071.086.2.2 0 0 0-.027.108v6.651q0 .105.068.172a.23.23 0 0 0 .172.068", fill: "#595959" })));
+const HospitalIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React__default.createElement("path", { d: "M8 8q.55 0 .941-.392.393-.391.392-.941 0-.55-.392-.942A1.28 1.28 0 0 0 8 5.333q-.55 0-.942.392a1.28 1.28 0 0 0-.391.942q0 .55.391.941Q7.45 8 8 8m0 4.9q2.032-1.866 3.017-3.392Q12 7.983 12 6.8q0-1.817-1.158-2.975Q9.682 2.667 8 2.667T5.158 3.825Q4 4.983 4 6.8q0 1.184.983 2.708Q5.966 11.034 8 12.9m0 1.517a.8.8 0 0 1-.5-.183q-2.433-2.151-3.633-3.992T2.667 6.8q0-2.5 1.608-3.983Q5.883 1.332 8 1.333q2.116 0 3.725 1.484T13.333 6.8q0 1.6-1.2 3.442-1.2 1.841-3.633 3.991a.8.8 0 0 1-.5.184", fill: "#8C8C8C" })));
+const SpecialtyIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
+    React__default.createElement("path", { d: "M3.833.5a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667M10.5.5c-.92 0-1.667.746-1.667 1.667V5.5c0 .92.746 1.667 1.667 1.667h3.333c.921 0 1.667-.746 1.667-1.667V2.167C15.5 1.246 14.754.5 13.833.5zM3.833 8.833a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667m8.334 0a3.333 3.333 0 1 0 0 6.667 3.333 3.333 0 0 0 0-6.667", fill: "#9AA2AC" })));
+
 const StyleSpecialtiesWrapper = styled.div `
   display: flex;
   flex-wrap: wrap;
@@ -1558,6 +1712,7 @@ gaTrackingSearchBar, gaTrackingLocationSearch, autoCompleteDisabled = false, inp
 triggerSearchWhenChangeFilter, routerPush, onGeoLocationPermissionChange, 
 // onSearch,
 onChangeLocation, }) => {
+    var _a, _b;
     const { locale, t } = useTranslations();
     const wrapperRef = useRef(null);
     const searchInputDesktopRef = useRef(null);
@@ -1616,17 +1771,6 @@ onChangeLocation, }) => {
     }, [currentTab]);
     const debouncedFetchCitiesByKeyword = useMemo(() => debounce(fetchCitiesByKeyword, 400), [fetchCitiesByKeyword]);
     const debouncedFetchSearchResults = useMemo(() => debounce(fetchSearchResults, 400), [fetchSearchResults]);
-    const handleLocationClick = useCallback(function handleLocationClick(city) {
-        var _a;
-        triggerSearchWhenChangeFilter &&
-            onClickSearchByKeyword({ locationSlug: city.slug });
-        dispatch({ type: ActionTypes.SelectLocation, payload: city });
-        // focusSearchInput()
-        !isMobile && ((_a = searchInputDesktopRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-        if (onChangeLocation) {
-            onChangeLocation(city);
-        }
-    }, [t, dispatch]);
     // function focusSearchInput() {
     //   if (wrapperRef.current) {
     //     wrapperRef.current
@@ -1634,7 +1778,7 @@ onChangeLocation, }) => {
     //       ?.focus()
     //   }
     // }
-    function onClickSearchByKeyword({ locationSlug, specialtyId, } = {}) {
+    const onClickSearchByKeyword = useCallback(function onClickSearchByKeyword({ locationSlug, specialtyId, } = {}) {
         var _a;
         close();
         let url = '';
@@ -1660,7 +1804,31 @@ 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, () => {
         !isMobile &&
             dispatch({ type: ActionTypes.ClickOutsideInputSearchSpecialty });
@@ -1686,6 +1854,7 @@ onChangeLocation, }) => {
         fetchCitiesByLocation({ coordinates: state.geoLocationCoordinates });
     }, [geoLocationPermission]);
     useEffect(() => {
+        var _a;
         const defaultSpecialty = initSpecialty
             ? initSpecialty
             : {
@@ -1695,13 +1864,22 @@ onChangeLocation, }) => {
                 total_doctor: 0,
                 slug: slugs.SPECIALTIES,
             };
+        if (initSpecialty) {
+            if (((_a = state.selectedSpecialty) === null || _a === void 0 ? void 0 : _a.id) !== initSpecialty.id) {
+                dispatch({
+                    type: ActionTypes.SelectSpecialty,
+                    payload: initSpecialty,
+                });
+            }
+            return;
+        }
         if (!state.selectedSpecialty) {
             dispatch({
                 type: ActionTypes.SelectSpecialty,
                 payload: defaultSpecialty,
             });
         }
-    }, [initSpecialty, state.selectedSpecialty]);
+    }, [initSpecialty, (_b = state.selectedSpecialty) === null || _b === void 0 ? void 0 : _b.id, slugs.SPECIALTIES, t]);
     useEffect(() => {
         fetchAllSpecialties();
     }, []);
@@ -1771,7 +1949,11 @@ onChangeLocation, }) => {
         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(SearchResultContent, { type: currentTab, state: state, dispatch: dispatch, isLoading: isLoadingSearchResults, typeInformation: typeInformation, clientSlug: clientSlug })))));
+            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 };