@hhgtech/hhg-components
Version:
Hello Health Group common components
1,092 lines (1,044 loc) • 89 kB
JavaScript
import React__default, { useMemo, forwardRef, useRef, useImperativeHandle, useCallback, useState, useReducer, useEffect } from 'react';
import { Search } from '@hhgtech/icons/core';
import { Skeleton, clsx, Text as Text$1, Select, rem, useMantineTheme, Input, Stack, Flex, Box, Divider, Tabs } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { i as checkMarkIconUrl, P as PinIcon, h as getApiPath, u as useGeolocation } from './utils-5d9a60df.js';
import { a as useOutsideClick } from './useOutsideClick-5ac585f9.js';
import { u as useTranslations } from './index-09d9e570.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-ce67620e.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { M as MediaQueries } from './utils-538169b3.js';
import { C as Container } from './index-f0dc4a09.js';
import { T as Text } from './index-0b67696c.js';
import { C as ChevronDown } from './ChevronDown-0a2a63a3.js';
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import { ArrowLeft } from '@hhgtech/icons/arrow';
import { M as Modal } from './index-3b8592c9.js';
import { P as PATHS } from './paths-4a2d3f94.js';
import { B as Button } from './index-2d25b0f0.js';
import './index-8c40504a.js';
import 'date-fns/locale';
import './index-fe4471f4.js';
import './Locale-dc1237b9.js';
import './constantsSite.js';
import './constantsDomainLocales.js';
import './constantsRiskScreener.js';
import './constantsIsProduction.js';
import './miscCookieHelper.js';
import 'react-loading-skeleton';
import 'string-format';
import './translationsContext-18f7b7e0.js';
import './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import './shared-b07d1eb2.js';
const StyledSearchBarWrapper = styled.div ``;
const StyleWrapperContainer = styled.div `
background-color: ${theme.colors.neutral50};
padding-bottom: 1px;
${MediaQueries.mbDown} {
padding: 0 16px 10px;
}
`;
const StyleSearchInputContainer = styled(Container) `
padding: 0 16px;
${MediaQueries.mbDown} {
padding: 0;
}
`;
const StyleSearchContent = styled.div `
padding: 24px 56px;
border-radius: 16px;
background-color: ${theme.colors.white};
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.04),
0px 0px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
${MediaQueries.mbDown} {
padding: 16px 16px;
border-radius: 0px 0px 12px 12px;
}
.flex-search-input {
flex-direction: row;
${MediaQueries.mbDown} {
flex-direction: column;
}
}
`;
const SEARCH_KEYWORD_MIN_LENGTH = {
'en-PH': 3,
'tl-PH': 2,
'id-ID': 3,
'vi-VN': 2,
'zh-TW': 0,
'ms-MY': 2,
'th-TH': 2,
};
const initialState = {
isMobile: false,
isDebug: false,
navigateTo: null,
geoLocationPermission: 'unset',
geoLocationCoordinates: null,
focused: 'none',
focusedSpecialty: 'none',
searchLocationKeywords: '',
searchSpecialtyKeywords: '',
searchKeywords: '',
selectedLocation: null,
selectedSpecialty: null,
defaultCity: null,
initialCities: [],
cities: [],
searchResults: {},
initialSearchResults: {},
isLoadingCities: false,
isLoadingSearchResults: false,
isMobileModalOpened: false,
initialSelectedCity: null,
autoCompleteDisabled: false,
inputSearchPlaceholder: '',
locale: 'vi-VN',
allSpecialties: [],
popularKeys: [],
};
var ActionTypes;
(function (ActionTypes) {
ActionTypes["NavigateTo"] = "navigate to url";
ActionTypes["ClickOutsideInputLocation"] = "click outside input location";
ActionTypes["ClickOutsideInputSearch"] = "click outside input search";
ActionTypes["ClickOutsideInputSearchSpecialty"] = "click outside input search specialty";
ActionTypes["ClickOutsideInputSpecialty"] = "click outside input specialty";
ActionTypes["SelectCurrentLocation"] = "select current location";
ActionTypes["FocusInputLocation"] = "focus input location";
ActionTypes["FocusInputSearch"] = "focus input search";
ActionTypes["FocusInputSearchSpecialty"] = "focus input search specialty";
ActionTypes["ChangeInputLocation"] = "change input location";
ActionTypes["ChangeInputSearch"] = "change input search";
ActionTypes["ClearInputLocation"] = "clear input location";
ActionTypes["ClearInputSearch"] = "clear input search";
ActionTypes["SelectLocation"] = "select location";
ActionTypes["SelectSpecialty"] = "select specialty";
ActionTypes["FetchCitiesStart"] = "fetch cities start";
ActionTypes["FetchCitiesFinish"] = "fetch cities finish";
ActionTypes["FetchSearchResultsStart"] = "fetch search results start";
ActionTypes["FetchSearchResultsComplete"] = "fetch search results complete";
ActionTypes["FetchSearchResultsFinish"] = "fetch search results finish";
ActionTypes["FetchCitiesByGeoIpComplete"] = "fetch cities by geo IP finish";
ActionTypes["FetchCitiesByDefaultComplete"] = "fetch cities by default finish";
ActionTypes["FetchCitiesByKeywordComplete"] = "fetch cities by keyword finish";
ActionTypes["DisplayInitialCities"] = "display initial cities";
ActionTypes["DisplayInitialSearchResults"] = "display initial search results";
ActionTypes["UpdateInitialSearchResults"] = "update initial search results";
ActionTypes["GrantGeoLocationPermission"] = "grant geolocation permission";
ActionTypes["DenyGeoLocationPermission"] = "deny geolocation permission";
ActionTypes["OpenMobileModal"] = "open mobile modal";
ActionTypes["CloseMobileModal"] = "close mobile modal";
ActionTypes["UpdateInitialSearchValue"] = "update initial search value";
ActionTypes["SelectSearchResult"] = "select search result";
ActionTypes["SetInputSearchPlaceholder"] = "set input search placeholder";
ActionTypes["FocusInputSpecialty"] = "focus input specialty";
ActionTypes["FetchAllSpecialties"] = "fetch all specialty";
ActionTypes["FetchPopularKeys"] = "fetch popular key by type";
})(ActionTypes || (ActionTypes = {}));
function resetSearchLocationKeywords(state) {
const { selectedLocation, searchLocationKeywords } = state;
if (selectedLocation && searchLocationKeywords !== selectedLocation.name) {
return Object.assign(Object.assign({}, state), { searchLocationKeywords: selectedLocation.name });
}
return state;
}
function reducer(state, action) {
var _a, _b;
if (state.isDebug) {
console.log('bookingSearchBar', { action, state });
}
switch (action.type) {
case ActionTypes.NavigateTo:
return Object.assign(Object.assign({}, state), { navigateTo: action.payload, focused: 'none', isMobileModalOpened: false });
case ActionTypes.ClickOutsideInputLocation: {
if (state.focused !== 'location') {
return state;
}
return resetSearchLocationKeywords(Object.assign(Object.assign({}, state), { focused: 'none' }));
}
case ActionTypes.ClickOutsideInputSpecialty: {
if (state.focused !== 'specialty') {
return state;
}
return resetSearchLocationKeywords(Object.assign(Object.assign({}, state), { focused: 'none' }));
}
case ActionTypes.ClickOutsideInputSearch: {
if (state.focused !== 'search') {
return state;
}
return Object.assign(Object.assign({}, state), { focused: 'none' });
}
case ActionTypes.ClickOutsideInputSearchSpecialty: {
if (state.focusedSpecialty !== 'search') {
return state;
}
return Object.assign(Object.assign({}, state), { focusedSpecialty: 'none' });
}
case ActionTypes.FocusInputLocation: {
const nextState = Object.assign(Object.assign({}, state), { focused: 'location' });
if (((_a = state.selectedLocation) === null || _a === void 0 ? void 0 : _a.id) === ID_OPTION_CURRENT_LOCATION) {
nextState.searchLocationKeywords = '';
}
return nextState;
}
case ActionTypes.FocusInputSpecialty: {
const nextState = Object.assign(Object.assign({}, state), { focused: 'specialty' });
if (((_b = state.selectedLocation) === null || _b === void 0 ? void 0 : _b.id) === ID_OPTION_CURRENT_LOCATION) {
nextState.searchLocationKeywords = '';
}
return nextState;
}
case ActionTypes.FocusInputSearch:
const nextState = Object.assign(Object.assign({}, state), { focused: 'search' });
if (state.isMobile) {
return resetSearchLocationKeywords(nextState);
}
return nextState;
case ActionTypes.FocusInputSearchSpecialty: {
const nextState = Object.assign(Object.assign({}, state), { focusedSpecialty: 'search' });
return nextState;
}
case ActionTypes.ChangeInputLocation:
return Object.assign(Object.assign({}, state), { searchLocationKeywords: action.payload });
case ActionTypes.ChangeInputSearch: {
const keyword = action.payload;
return Object.assign(Object.assign({}, state), { searchKeywords: keyword, isLoadingSearchResults: keyword.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale] });
}
case ActionTypes.SelectCurrentLocation:
return Object.assign(Object.assign({}, state), { focused: 'none', selectedLocation: action.payload, searchLocationKeywords: action.payload.name });
case ActionTypes.ClearInputLocation:
return Object.assign(Object.assign({}, state), { focused: 'location', cities: state.initialCities, searchLocationKeywords: '' });
case ActionTypes.ClearInputSearch:
return Object.assign(Object.assign({}, state), { focused: 'search', searchKeywords: '' });
case ActionTypes.SelectLocation:
return Object.assign(Object.assign({}, state), { focused: 'none', selectedLocation: action.payload, searchLocationKeywords: action.payload.name, searchResults: {} });
case ActionTypes.SelectSpecialty:
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:
return Object.assign(Object.assign({}, state), { isLoadingCities: true });
case ActionTypes.FetchCitiesFinish:
return Object.assign(Object.assign({}, state), { isLoadingCities: false });
case ActionTypes.FetchSearchResultsStart:
return Object.assign(Object.assign({}, state), { isLoadingSearchResults: true });
case ActionTypes.FetchSearchResultsFinish:
return Object.assign(Object.assign({}, state), { isLoadingSearchResults: false });
case ActionTypes.FetchSearchResultsComplete: {
const nextState = Object.assign(Object.assign({}, state), { searchResults: Object.assign(Object.assign({}, state.searchResults), { [action.payload.key]: action.payload.searches }) });
return nextState;
}
case ActionTypes.FetchCitiesByGeoIpComplete: {
let { cities } = action.payload;
const { default: defaultCity } = action.payload;
cities = cities.filter((c) => c.id !== defaultCity.id);
if (defaultCity) {
cities.unshift(defaultCity);
}
if (state.initialSelectedCity &&
!cities.find((c) => c.id === state.initialSelectedCity.id)) {
cities.unshift(state.initialSelectedCity);
}
const nextState = Object.assign(Object.assign({}, state), { defaultCity, initialCities: cities, cities });
if (state.geoLocationPermission === 'denied' &&
!state.initialSelectedCity) {
nextState.selectedLocation = defaultCity;
nextState.searchLocationKeywords = defaultCity.name;
}
return nextState;
}
case ActionTypes.FetchCitiesByDefaultComplete: {
return Object.assign(Object.assign({}, state), { defaultCity: null, initialCities: action.payload, cities: action.payload });
}
case ActionTypes.FetchCitiesByKeywordComplete:
return Object.assign(Object.assign({}, state), { cities: action.payload });
case ActionTypes.DisplayInitialCities:
return Object.assign(Object.assign({}, state), { cities: state.initialCities });
case ActionTypes.DisplayInitialSearchResults: {
const trimmed = state.searchKeywords.trim();
const minLen = SEARCH_KEYWORD_MIN_LENGTH[state.locale];
const shouldShowEmpty = trimmed.length > 0 && trimmed.length <= minLen;
return Object.assign(Object.assign({}, state), { searchResults: shouldShowEmpty ? {} : state.initialSearchResults, isLoadingSearchResults: false });
}
case ActionTypes.UpdateInitialSearchResults:
return Object.assign(Object.assign({}, state), { initialSearchResults: Object.assign(Object.assign({}, state.initialSearchResults), { [action.payload.key]: action.payload.searches }) });
case ActionTypes.GrantGeoLocationPermission:
return Object.assign(Object.assign({}, state), { geoLocationPermission: 'granted', geoLocationCoordinates: action.payload });
case ActionTypes.DenyGeoLocationPermission:
return Object.assign(Object.assign({}, state), { geoLocationPermission: 'denied', geoLocationCoordinates: null });
case ActionTypes.OpenMobileModal:
return Object.assign(Object.assign({}, state), { isMobileModalOpened: true });
case ActionTypes.CloseMobileModal:
return Object.assign(Object.assign({}, state), { isMobileModalOpened: false });
case ActionTypes.UpdateInitialSearchValue:
return Object.assign(Object.assign({}, state), { searchKeywords: action.payload });
case ActionTypes.SetInputSearchPlaceholder:
return Object.assign(Object.assign({}, state), { inputSearchPlaceholder: action.payload });
case ActionTypes.FetchAllSpecialties:
return Object.assign(Object.assign({}, state), { allSpecialties: action.payload });
case ActionTypes.FetchPopularKeys:
return Object.assign(Object.assign({}, state), { popularKeys: action.payload });
default:
return state;
}
}
const StyleSearchInputsWrapper = styled.div `
flex: 1;
position: relative;
${MediaQueries.mbDown} {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
`;
const StyleResultWrapper = styled.div `
position: absolute;
top: calc(100% + 2px);
width: 100%;
border-radius: 4px;
background: ${theme.colors.white};
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
${MediaQueries.mbDown} {
width: calc(100% + 64px);
left: -32px;
}
`;
const StyledSearchResultWrapper = styled.div ``;
styled.div `
display: flex;
justify-content: space-between;
align-item: center;
padding: 9px 14px 9px 22px;
background: #f7f9fc;
.title {
color: ${theme.colors.gray800};
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
.btn-see-all {
color: ${theme.colors.blue600};
font-size: 14px;
line-height: 22px;
cursor: pointer;
}
`;
const StyleResultBody = styled.div `
padding: 10px 16px;
max-height: 400px;
overflow: auto;
`;
const StyleResultItem = styled.div `
display: flex;
gap: 12px;
align-items: center;
cursor: pointer;
${MediaQueries.mbUp} {
&:hover {
background-color: ${theme.colors.blue50};
}
}
.image-item {
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 50%;
img {
object-fit: contain;
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.infor {
overflow: hidden;
padding: 12px 0;
flex: 1;
border-bottom: 1px solid ${theme.colors.neutral100};
.title {
color: ${theme.colors.gray800};
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.description {
overflow: hidden;
color: ${theme.colors.gray600};
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
line-height: 18px;
display: flex;
gap: 8px;
align-items: center;
margin-top: 5px;
svg {
flex: 0 0 16px;
}
.sub-description {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
}
}
}
&.last-item {
.infor {
border-bottom: none;
}
}
`;
styled.div `
padding: 0 16px 16px;
.search-detail-btn {
color: ${theme.colors.blue600};
font-size: 14px;
line-height: 22px;
cursor: pointer;
}
`;
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) => {
let url = '';
switch (type) {
case 'service':
url = `/${selectedLocation.slug}/${typeSlug}/${item.slug}`;
break;
case 'doctor':
case 'hospital':
url = `/${typeSlug}/${item.slug}-${item.id}`;
break;
}
if (url) {
dispatch({
type: ActionTypes.NavigateTo,
payload: url,
});
}
};
// const handleSeeAll = () => {
// let url = `/${selectedLocation.slug}/${typeSlug}`
// const slugClientUrl = 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(StyleResultBody, { className: "search-results__body" },
isLoading && (React__default.createElement("div", { className: "skeleton-result" }, Array(3)
.fill(undefined)
.map((_, i) => (React__default.createElement(StyleResultItem, { key: type + 'loading' + i, className: i === 2 ? 'last-item' : '' },
React__default.createElement("div", { className: "image-item" },
React__default.createElement(Skeleton, { height: 48, circle: true, mb: "xl", animate: true })),
React__default.createElement("div", { className: "infor" },
React__default.createElement("div", { className: "title" },
React__default.createElement(Skeleton, { height: 8, mt: 10, radius: "xl", animate: true })),
React__default.createElement("div", { className: "description" },
React__default.createElement("div", { className: "sub-description" },
React__default.createElement(Skeleton, { height: 8, mt: 10, radius: "xl", width: "80%", animate: true }))))))))),
!isLoading && results && results.length > 0 && (React__default.createElement(React__default.Fragment, null, results.map((item, index) => {
var _a, _b;
const isLastItem = (results.length > 4 && index === 3) ||
(results.length <= 4 && index === results.length - 1);
let subDescription = '';
if (type === 'hospital') {
subDescription = (item === null || item === void 0 ? void 0 : item.address) || '';
}
if (type === 'doctor') {
subDescription = ((_a = item === null || item === void 0 ? void 0 : item.specialties) === null || _a === void 0 ? void 0 : _a.join(', ')) || '';
}
if (type === 'service') {
subDescription = ((_b = item === null || item === void 0 ? void 0 : item.hospital_branch) === null || _b === void 0 ? void 0 : _b.name) || '';
}
if (index >= 4) {
return React__default.createElement(React__default.Fragment, null);
}
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" },
React__default.createElement("div", { className: "title" }, item.name),
React__default.createElement("div", { className: "description" },
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, className: "noresult-block" }, t('booking.searchBar.noResults'))))));
};
const SearchResultContent = ({ state, type, isLoading, clientSlug, typeInformation, dispatch, }) => {
var _a;
if (state.focused !== 'search')
return null;
return (React__default.createElement(SearchResult, { type: type, state: state, results: ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a[type]) || null, location: state.selectedLocation.name, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug }));
};
const StyleSearchSpecialtyWrapper = styled.div `
position: relative;
${MediaQueries.mbDown} {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
`;
styled.div `
position: absolute;
top: calc(100% + 2px);
width: calc(100% + 100px);
border-radius: 4px;
background: ${theme.colors.white};
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
max-height: 300px;
overflow: auto;
${MediaQueries.mbDown} {
width: calc(100% + 64px);
left: -32px;
}
`;
const StyledSpecialtyItem = styled.li `
position: relative;
cursor: pointer;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 14px;
overflow: hidden;
.image-item {
display: flex;
align-items: center;
width: 40px;
height: 40px;
flex-shrink: 0;
img {
width: 100%;
object-fit: cover;
}
svg {
width: 40px;
}
}
${({ isSelected }) => isSelected &&
`
&::after {
content: ${checkMarkIconUrl};
top: 50%;
right: 18px;
position: absolute;
transform: translateY(-50%);
}
`}
& + li::before {
content: '';
position: absolute;
left: 18px;
right: 18px;
top: 0;
height: 1px;
background-color: ${theme.colors.neutral100};
}
&:not([data-is-denied='true']):hover {
background-color: ${theme.colors.neutral50};
}
&:last-child:hover {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
&:first-child:hover {
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
&[data-is-denied='true'] {
cursor: not-allowed;
}
`;
const DoctorIcon = () => (React__default.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 CustomSelectItem$1 = forwardRef((_a, ref) => {
var { label, value, specialty } = _a, others = __rest(_a, ["label", "value", "specialty"]);
return (React__default.createElement("div", Object.assign({ ref: ref }, others),
React__default.createElement(StyledSpecialtyItem, { key: value,
// onClick={(evt) => {
// evt.nativeEvent.stopImmediatePropagation()
// if (onSpecialtyClick) {
// onSpecialtyClick({
// ...specialty,
// total_doctor: 0,
// })
// }
// }}
role: "button", tabIndex: 0, "aria-label": `Select ${label} as location` },
React__default.createElement("div", { className: "image-item" }, specialty.thumbnail ? (React__default.createElement("img", { src: specialty.thumbnail, alt: label })) : (React__default.createElement(SpecialtyIcon, null))),
React__default.createElement(Text$1, { size: "md" }, label))));
});
const SearchSpecialty = ({ state,
// debouncedFetchSearchResults,
onSpecialtyClick, dispatch, }) => {
const { t, locale } = useTranslations();
const inputSpecialtyWrapperRef = useRef(null);
const slugs = useMemo(() => LOCALIZED_SLUGS[locale], [locale]);
// const styleSpecialties = useMemo(() => {
// return {
// wrapper: {
// '&:after': {
// content: '""',
// width: '1px',
// height: '20px',
// backgroundColor: '#E4E8EC',
// position: 'absolute',
// right: 0,
// top: '13px',
// },
// },
// input: {
// border: isMobile ? 'border: 1px solid #d9d9d9' : 'none',
// height: isMobile ? '40px' : '46px !important',
// paddingRight: '30px',
// '&:focus': {
// boxShadow: isMobile ? 'box-shadow: 0px 0px 0px 2px #91caff' : 'none',
// },
// },
// rightSection: {
// width: '30px',
// svg: {
// fontSize: '20px',
// },
// },
// } as any
// }, [isMobile])
// const handleSearchSpecialtyInputChange = useCallback(
// function handleSearchSpecialtyInputChange(value: string) {
// // dispatch({ type: ActionTypes.ChangeInputLocation, payload: value })
// // if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale]) {
// // debouncedFetchSearchResults(value.trim())
// // } else {
// // debouncedFetchSearchResults.cancel()
// // dispatch({ type: ActionTypes.DisplayInitialCities })
// // }
// console.log(value)
// },
// [debouncedFetchSearchResults, dispatch],
// )
useOutsideClick(inputSpecialtyWrapperRef, () => {
dispatch({ type: ActionTypes.ClickOutsideInputSpecialty });
});
const specialtyData = [
{
name: t('booking.searchBar.allSpecialties'),
id: -1,
thumbnail: '',
total_doctor: 0,
slug: slugs.SPECIALTIES,
},
...state.allSpecialties,
];
const selectValue = state.selectedSpecialty && typeof state.selectedSpecialty.id === 'number'
? String(state.selectedSpecialty.id)
: null;
return (React__default.createElement(StyleSearchSpecialtyWrapper, { ref: inputSpecialtyWrapperRef },
React__default.createElement(Select, { value: selectValue, placeholder: t('booking.searchPopup.specialties'), searchable: true, nothingFound: t('common.noResult'), maxDropdownHeight: 340, dropdownPosition: "bottom", data: specialtyData.map((specialty) => ({
value: String(specialty.id),
label: specialty.name,
specialty,
})), rightSection: React__default.createElement(ChevronDown, { style: { width: 20, height: 20 } }), styles: (theme) => ({
dropdown: {
left: '0 !important',
border: 0,
marginTop: -7,
borderRadius: 0,
'& [data-mantine-scrollbar]': {
'&[data-orientation="vertical"]': {
width: '6px',
},
},
[theme.fn.largerThan('sm')]: {
minWidth: 264,
width: `264px !important`,
},
},
item: {
padding: 0,
'&[data-selected]': {
'&, &:hover': {
backgroundColor: 'transparent',
color: 'inherit',
},
},
'&[data-hovered]': {
backgroundColor: 'transparent',
},
},
input: {
'&:not(.mantine-Textarea-input)': {
height: 40,
fontSize: rem(14),
paddingLeft: 14,
paddingRight: 14,
[theme.fn.largerThan('sm')]: {
height: 46,
fontSize: rem(16),
paddingLeft: 16,
paddingRight: 16,
borderColor: 'transparent',
},
'&:focus, &:focus-within': {
outline: 'none',
boxShadow: 'none',
},
},
},
itemsWrapper: {
padding: 0,
},
wrapper: {
[theme.fn.largerThan('sm')]: {
position: 'relative',
'&:after': {
content: '""',
width: '1px',
height: '20px',
backgroundColor: '#E4E8EC',
position: 'absolute',
right: 0,
top: '13px',
},
},
},
}), itemComponent: CustomSelectItem$1, filter: (value, item) => item.label.toLowerCase().includes(value.toLowerCase().trim()), onChange: (value) => {
if (value == null)
return;
const specialty = specialtyData.find((i) => String(i.id) === value);
if (!specialty)
return;
onSpecialtyClick(Object.assign(Object.assign(Object.assign({}, specialty), { thumbnail: specialty.thumbnail || '' }), (Number(value) !== -1 && {
total_doctor: 0,
})));
} })));
};
const SearchInputs = forwardRef(({ state, type, isMobile, isLoading, initalSearchValue, typeInformation, debouncedFetchSearchResults, trackingAttributes, hideSpecialtySelection = false, clientSlug = '', onSearch, onFocusInput, onEnterSearch, dispatch, onlyShowSearchBox, onChangeSpecialty, }, ref) => {
const { t } = useTranslations();
const theme = useMantineTheme();
const inputSearchWrapperRef = useRef(null);
const internalInputRef = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => {
var _a;
(_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
},
}));
const hasSearchIcon = !onlyShowSearchBox;
const gaAttributes = useMemo(() => {
if (trackingAttributes) {
return {
'data-event-category': trackingAttributes.dataEventCategory,
'data-event-action': trackingAttributes.dataEventAction,
'data-event-label': trackingAttributes.dataEventLabel,
};
}
else {
return {};
}
}, [trackingAttributes]);
const placeholderSearch = useMemo(() => {
if (type === 'doctor')
return t('booking.searchBar.placeholder.doctor');
if (type === 'service')
return t('booking.searchBar.placeholder.service');
if (type === 'hospital')
return t('booking.searchBar.placeholder.hospital');
if (type === 'specialty')
return t('booking.searchBar.placeholder.specialty');
return '';
}, [type, t]);
const styleInputWrapper = useMemo(() => {
return {
root: {
flex: 1,
'&.hide-specialty-selection': {
'.mantine-Input-rightSection': {
display: 'none',
},
input: {
paddingLeft: hasSearchIcon ? 48 : 16,
[theme.fn.smallerThan('sm')]: {
height: 40,
fontSize: rem(14),
},
},
'.mantine-Input-icon': {
left: '0',
},
},
},
};
}, [hasSearchIcon, theme]);
const styleInput = useMemo(() => {
return {
icon: {
left: '205px',
},
input: {
color: '#262626',
'&[data-with-icon="true"]': {
paddingLeft: '245px',
paddingRight: '16px',
},
},
rightSection: {
left: 0,
width: '205px',
padding: '1px',
},
};
}, []);
const styleInputSpecialties = useMemo(() => {
return {
input: {
color: '#262626',
},
};
}, []);
useOutsideClick(inputSearchWrapperRef, () => {
!isMobile && dispatch({ type: ActionTypes.ClickOutsideInputSearch });
});
const handleSearchInputChange = useCallback(function handleSearchInputChange(value) {
dispatch({ type: ActionTypes.ChangeInputSearch, payload: value });
if (typeof onSearch === 'function') {
return;
}
if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale] ||
initalSearchValue ||
value.trim().length === 0) {
debouncedFetchSearchResults(value.trim(), state, type, clientSlug);
}
}, [
dispatch,
state,
type,
initalSearchValue,
debouncedFetchSearchResults,
clientSlug,
onSearch,
]);
const handleSpecialtyClick = useCallback(function handleSpecialtyClick(specialty) {
var _a;
dispatch({ type: ActionTypes.SelectSpecialty, payload: specialty });
onChangeSpecialty === null || onChangeSpecialty === void 0 ? void 0 : onChangeSpecialty(specialty);
!isMobile && ((_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
}, [dispatch, onChangeSpecialty]);
const inputOnKeyDown = useCallback((e) => {
if (e.key === 'Enter') {
e.stopPropagation();
e.preventDefault();
onEnterSearch && onEnterSearch();
}
}, [onEnterSearch]);
return (React__default.createElement(StyleSearchInputsWrapper, { ref: inputSearchWrapperRef }, type === 'specialty' ? (React__default.createElement(Input.Wrapper, { styles: styleInputWrapper },
React__default.createElement(Input, { ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(Search, null), size: isMobile ? 'md' : 'lg', placeholder: placeholderSearch, styles: styleInputSpecialties, value: state.searchKeywords, onFocus: () => dispatch({ type: ActionTypes.FocusInputSearchSpecialty }), onChange: (event) => {
handleSearchInputChange(event.target.value);
}, onKeyDown: inputOnKeyDown }))) : (React__default.createElement(React__default.Fragment, null,
type === 'service' ? (React__default.createElement(Input.Wrapper, { styles: styleInputWrapper },
React__default.createElement(Input, { ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(Search, null), size: isMobile ? 'md' : 'lg', name: "search-results", placeholder: placeholderSearch, onFocus: () => {
dispatch({ type: ActionTypes.FocusInputSearch });
onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
}, value: state.searchKeywords, onChange: (event) => {
handleSearchInputChange(event.target.value);
}, onKeyDown: inputOnKeyDown }))) : (React__default.createElement(React__default.Fragment, null, isMobile && !hideSpecialtySelection ? (React__default.createElement(React__default.Fragment, null,
!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, { ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(Search, null), size: "md", placeholder: placeholderSearch, value: state.searchKeywords, name: "search-results", onFocus: () => {
dispatch({ type: ActionTypes.FocusInputSearch });
onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
}, onChange: (event) => {
handleSearchInputChange(event.target.value);
}, onKeyDown: inputOnKeyDown })))) : (React__default.createElement(Input.Wrapper, { styles: styleInputWrapper, className: hideSpecialtySelection ? 'hide-specialty-selection' : '' },
React__default.createElement(Input, Object.assign({ ref: internalInputRef, icon: hasSearchIcon && React__default.createElement(Search, null), size: "lg", placeholder: placeholderSearch, styles: styleInput, name: "search-results", autoComplete: "off", value: state.searchKeywords, onChange: (event) => {
handleSearchInputChange(event.target.value);
}, onFocus: () => {
dispatch({ type: ActionTypes.FocusInputSearch });
onFocusInput === null || onFocusInput === void 0 ? void 0 : onFocusInput();
}, onKeyDown: inputOnKeyDown }, gaAttributes, { rightSection: hideSpecialtySelection ? (React__default.createElement(React__default.Fragment, null)) : (!onlyShowSearchBox && (React__default.createElement(SearchSpecialty, { state: state, isMobile: isMobile, dispatch: dispatch, debouncedFetchSearchResults: debouncedFetchSearchResults, onSpecialtyClick: handleSpecialtyClick }))) })))))),
!isMobile && (React__default.createElement(StyleResultWrapper, null,
React__default.createElement(SearchResultContent, { type: type, state: state, dispatch: dispatch, isLoading: isLoading, typeInformation: typeInformation, clientSlug: clientSlug })))))));
});
SearchInputs.displayName = 'SearchInputs';
const ModalSearchResult = (_a) => {
var { searchInputEle, closeModal, children } = _a, props = __rest(_a, ["searchInputEle", "closeModal", "children"]);
const theme = useMantineTheme();
return (React__default.createElement(Modal, Object.assign({}, props, { zIndex: 310, fullScreen: true, styles: {
content: {
borderRadius: 0,
height: '100%',
'.search-results__body': { padding: 0 },
'.result-item': {
paddingLeft: 16,
paddingRight: 16,
},
'.noresult-block': {
padding: 16,
},
'.skeleton-result': {
padding: 16,
},
},
header: { display: 'none' },
} }),
React__default.createElement(Stack, { spacing: 16, sx: { paddingTop: 16 } },
React__default.createElement(Flex, { align: 'center', gap: 12 },
React__default.createElement(ArrowLeft, { size: 28, onClick: closeModal, color: theme.fn.primaryColor() }),
React__default.createElement(Box, { sx: { width: '100%' } }, searchInputEle)),
children)));
};
const StyleSearchLocationWrapper = styled.div `
position: relative;
${MediaQueries.mbDown} {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
`;
styled.div `
position: absolute;
top: calc(100% + 2px);
width: 100%;
border-radius: 4px;
background: ${theme.colors.white};
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
${MediaQueries.mbDown} {
width: calc(100% + 64px);
left: -32px;
}
`;
const StyledLocationItem = styled.div `
position: relative;
cursor: pointer;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 14px;
overflow: hidden;
& + li::before {
content: '';
position: absolute;
left: 18px;
right: 18px;
top: 0;
height: 1px;
background-color: ${theme.colors.neutral100};
}
&:not([data-is-denied='true']):hover {
background-color: ${theme.colors.neutral50};
}
&:last-child:hover {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
&:first-child:hover {
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
&[data-is-denied='true'] {
cursor: not-allowed;
}
`;
const StyledPinIcon = styled(PinIcon) `
width: 12px;
height: 18px;
flex: 0 0 12px;
`;
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 {
'data-event-category': trackingAttributes.dataEventCategory,
'data-event-action': trackingAttributes.dataEventAction,
'data-event-label': trackingAttributes.dataEventLabel,
};
}
return {};
}, [trackingAttributes]);
const handleSearchLocationInputChange = useCallback(function handleSearchLocationInputChange(value) {
dispatch({ type: ActionTypes.ChangeInputLocation, payload: value });
if (value.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale]) {
debouncedFetchCitiesByKeyword(value.trim());
}
else {
debouncedFetchCitiesByKeyword.cancel();
dispatch({ type: ActionTypes.DisplayInitialCities });
}
}, [debouncedFetchCitiesByKeyword, dispatch, 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(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]': {
'&