"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5454],{"0Tio":function(e,t,a){a.d(t,{J:function(){return BookingSearchBar}});var i,o,n=a("FRPj"),s=a("q1tI"),l=a("AeFk"),r=a("Bd2T"),c=a("Gx+P"),d=a("sEfC"),u=a.n(d),p=a("w8Dv"),h=a("rBCA"),g=a("l9Yf"),m=a("wp0n"),b=a("iBNF"),y=a("9WAK"),f=a.n(y),v=a("BUnU"),E=a("uuQu"),S=a("ECoa"),C=a("e4F3");a("gY0P");let x=h.Z.div``,w=h.Z.div` --searchbar-z-index: 305; &[data-is-modal='true'] { position: fixed; left: 0; right: 0; top: 0; height: var(--mobile-care-searchbar-height, 100%); overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: white; z-index: var(--searchbar-z-index); } `,L=h.Z.section``,k=h.Z.input` position: fixed; left: -100%; top: -100%; `,I=(0,h.Z)(g.I)` #booking-search-bar & { input { font-size: 16px; } } `,LocationResults=({cities:e,isLoading:t,onLocationClick:a,selectedLocation:i})=>{let{t:o,locale:n}=(0,c.u)();return s.createElement(r.S,{"data-testid":"location-search-results"},s.createElement(r.a,null,t?s.createElement(r.b,{count:5}):!e||e.length<1?s.createElement(s.Fragment,null,s.createElement(r.c,{"data-is-denied":"true"},s.createElement(m.T,{size:"sm",color:"#ccc"},o("booking.searchBar.noResults")))):s.createElement(s.Fragment,null,s.createElement(r.c,{key:"all-location",role:"button",tabIndex:0,onClick:()=>{var e;a&&a({name:o("booking.searchBar.allLocations"),id:p.I,slug:null===(e=p.L[n])||void 0===e?void 0:e.ALL})}},s.createElement(r.d,{color:b.r.colors.neutral400}),s.createElement(m.T,{size:"md"},o("booking.searchBar.allLocations"))),e.map(e=>s.createElement(r.c,{key:e.id,onClick:t=>{t.nativeEvent.stopImmediatePropagation(),a&&a(e)},role:"button",tabIndex:0,"aria-label":`Select ${e.name} as location`,isSelected:(null==i?void 0:i.id)===e.id},s.createElement(r.d,{color:b.r.colors.neutral400}),s.createElement(m.T,{size:"md"},e.name))))))},O={TYPE_CHARACTER:"TYPE_CHARACTER",REMOVE_CHARACTER:"REMOVE_CHARACTER",REMOVE_ALL:"REMOVE_ALL",REMOVE_LAST_VISIBLE_NODE:"REMOVE_LAST_VISIBLE_NODE",PAUSE_FOR:"PAUSE_FOR",CHANGE_DELETE_SPEED:"CHANGE_DELETE_SPEED",CHANGE_DELAY:"CHANGE_DELAY",PASTE_STRING:"PASTE_STRING"},getRandomInteger=(e,t)=>Math.floor(Math.random()*(t-e+1))+e,R={TEXT_NODE:"TEXT_NODE"};let Typewriter=class Typewriter{constructor(e){this.state={lastFrameTime:null,pauseUntil:null,eventQueue:[],eventLoop:null,eventLoopPaused:!1,reverseCalledEvents:[],calledEvents:[],visibleNodes:[],initialOptions:null},this.options={strings:null,delay:"natural",pauseFor:1500,deleteSpeed:"natural",loop:!1,autoStart:!1,stringSplitter:null,onCreateTextNode:null,onRemoveNode:null},this.start=()=>(this.state.eventLoopPaused=!1,this.runEventLoop(),this),this.pause=()=>(this.state.eventLoopPaused=!0,this),this.stop=()=>(this.state.eventLoop&&(window.cancelAnimationFrame(this.state.eventLoop),this.state.eventLoop=null),this),this.pauseFor=e=>(this.addEventToQueue(O.PAUSE_FOR,{ms:e}),this),this.typeOutAllStrings=()=>("string"==typeof this.options.strings?this.typeString(this.options.strings).pauseFor(this.options.pauseFor):this.options.strings.forEach(e=>{this.typeString(e).pauseFor(this.options.pauseFor).deleteAll(this.options.deleteSpeed)}),this),this.typeString=(e,t=null)=>{if(e){let{stringSplitter:a}=this.options||{},i="function"==typeof a?a(e):e.split("");this.typeCharacters(i,t)}return this},this.pasteString=(e,t=null)=>(e&&this.addEventToQueue(O.PASTE_STRING,{character:e,node:t}),this),this.deleteAll=(e="natural")=>(this.addEventToQueue(O.REMOVE_ALL,{speed:e}),this),this.changeDeleteSpeed=e=>{if(!e)throw Error("Must provide new delete speed");return this.addEventToQueue(O.CHANGE_DELETE_SPEED,{speed:e}),this},this.changeDelay=e=>{if(!e)throw Error("Must provide new delay");return this.addEventToQueue(O.CHANGE_DELAY,{delay:e}),this},this.deleteChars=e=>{if(!e)throw Error("Must provide amount of characters to delete");for(let t=0;t{if(!e||!Array.isArray(e))throw Error("Characters must be an array");return e.forEach(e=>{this.addEventToQueue(O.TYPE_CHARACTER,{character:e,node:t})}),this},this.removeCharacters=e=>{if(!e||!Array.isArray(e))throw Error("Characters must be an array");return e.forEach(()=>{this.addEventToQueue(O.REMOVE_CHARACTER)}),this},this.addEventToQueue=(e,t,a=!1)=>this.addEventToStateProperty(e,t,a,"eventQueue"),this.addReverseCalledEvent=(e,t,a=!1)=>{let{loop:i}=this.options;return i?this.addEventToStateProperty(e,t,a,"reverseCalledEvents"):this},this.addEventToStateProperty=(e,t,a=!1,i)=>{let o={eventName:e,eventArgs:t||{}};return a?this.state[i]=[o,...this.state[i]]:this.state[i]=[...this.state[i],o],this},this.runEventLoop=()=>{this.state.lastFrameTime||(this.state.lastFrameTime=Date.now());let e=Date.now(),t=e-this.state.lastFrameTime;if(!this.state.eventQueue.length){if(!this.options.loop)return;this.state.eventQueue=[...this.state.calledEvents],this.state.calledEvents=[],this.options=Object.assign({},this.state.initialOptions)}if(this.state.eventLoop=window.requestAnimationFrame(this.runEventLoop),this.state.eventLoopPaused)return;if(this.state.pauseUntil){if(e{if(a)return[];let e=["booking.searchBar.placeholder.hospital","booking.searchBar.placeholder.doctor"];return"zh-TW"!==o&&e.push("booking.searchBar.placeholder.specialty","booking.searchBar.placeholder.service"),f()(e).map(e=>i(e))},[i,o]);function customNodeCreator(e){let t=getInput();return t&&(t.placeholder=t.placeholder+e),null}function onRemoveNode(){let e=getInput();e&&(e.placeholder=e.placeholder.slice(0,-1))}function getInput(){return e&&e.current?e.current:t&&t.current&&t.current.querySelector("input")||null}(0,s.useEffect)(()=>{if(a)return;let e=getInput();e&&(e.placeholder="",new Typewriter({strings:n,autoStart:!0,loop:!0,delay:32,deleteSpeed:32,pauseFor:1500,onCreateTextNode:customNodeCreator,onRemoveNode:onRemoveNode}))},[e,t])}let j=h.Z.div` user-select: none; input { pointer-events: none; background-color: white; } `;function MobileFakeInput({focused:e,value:t="",onClick:a,trackingAttributes:i,inputSearchPlaceholder:o}){let{t:n}=(0,c.u)(),l=(0,s.useRef)(null);useAnimatedPlaceholder({wrapperRef:l,disabled:!!o});let d=(0,s.useMemo)(()=>i?{"data-event-category":i.dataEventCategory,"data-event-action":i.dataEventAction,"data-event-label":i.dataEventLabel}:{},[i]);return s.createElement(j,Object.assign({onClick:()=>a&&a(),ref:l},d),s.createElement(I,{inputClassName:"location"===e?"focused":void 0,name:"booking-search-placeholder",displayIcon:s.createElement(r.M,{color:b.r.colors.gray400}),placeholder:n("booking.searchBar.searchInput.placeholder"),value:t,size:"md"}))}let T=h.Z.header` display: flex; height: 64px; align-items: center; justify-content: space-between; margin: 0 auto; position: sticky; z-index: 99; background-color: white; top: 0; left: 0; `,M=h.Z.div` display: inline-flex; flex: 1; justify-content: flex-end; cursor: pointer; text-decoration: underline; `,A=h.Z.div` display: flex; align-items: center; margin-left: 16px; cursor: pointer; `,P=h.Z.div` width: 100%; margin-left: 24px; `,$=(0,h.Z)(m.T)` color: ${b.r.colors.secondaryDark}; text-align: start; `,MobileTopBar=({className:e,onLeftClick:t,headingText:a,onRightClick:i,iconLeft:o,textRight:n})=>s.createElement(T,{className:e},s.createElement(A,{onClick:t},o||s.createElement(r.C,{color:b.r.colors.gray800})),s.createElement(P,null,s.createElement($,{size:"md",weight:"bold"},a)),s.createElement(M,{onClick:i},n&&s.createElement("p",null,n))),F={"en-PH":3,"tl-PH":2,"id-ID":3,"vi-VN":2,"zh-TW":0,"ms-MY":2,"th-TH":2},_={isMobile:!1,isDebug:!1,navigateTo:null,geoLocationPermission:"unset",geoLocationCoordinates:null,focused:"none",searchLocationKeywords:"",searchKeywords:"",selectedLocation:null,defaultCity:null,initialCities:[],cities:[],searchResults:[],initialSearchResults:[],isLoadingCities:!1,isLoadingSearchResults:!1,isMobileModalOpened:!1,initialSelectedCity:null,autoCompleteDisabled:!1,inputSearchPlaceholder:"",locale:"vi-VN"};function resetSearchLocationKeywords(e){let{selectedLocation:t,searchLocationKeywords:a}=e;return t&&a!==t.name?Object.assign(Object.assign({},e),{searchLocationKeywords:t.name}):e}function reducer(e,t){var a;switch(e.isDebug&&console.log("bookingSearchBar",{action:t,state:e}),t.type){case o.NavigateTo:return Object.assign(Object.assign({},e),{navigateTo:t.payload,focused:"none",isMobileModalOpened:!1});case o.ClickOutsideInputLocation:if(e.isMobile||"location"!==e.focused)return e;return resetSearchLocationKeywords(Object.assign(Object.assign({},e),{focused:"none"}));case o.ClickOutsideInputSearch:if(e.isMobile||"search"!==e.focused)return e;return Object.assign(Object.assign({},e),{focused:"none"});case o.FocusInputLocation:{let t=Object.assign(Object.assign({},e),{focused:"location"});return(null===(a=e.selectedLocation)||void 0===a?void 0:a.id)===p.a&&(t.searchLocationKeywords=""),t}case o.FocusInputSearch:let i=Object.assign(Object.assign({},e),{focused:"search"});if(e.isMobile)return resetSearchLocationKeywords(i);return i;case o.ChangeInputLocation:return Object.assign(Object.assign({},e),{searchLocationKeywords:t.payload});case o.ChangeInputSearch:{let a=t.payload;return Object.assign(Object.assign({},e),{searchKeywords:a,isLoadingSearchResults:a.trim().length>F[e.locale]})}case o.SelectCurrentLocation:return Object.assign(Object.assign({},e),{focused:"none",selectedLocation:t.payload,searchLocationKeywords:t.payload.name});case o.ClearInputLocation:return Object.assign(Object.assign({},e),{focused:"location",cities:e.initialCities,searchLocationKeywords:""});case o.ClearInputSearch:return Object.assign(Object.assign({},e),{focused:"search",searchKeywords:""});case o.SelectLocation:return Object.assign(Object.assign({},e),{focused:"none",selectedLocation:t.payload,searchLocationKeywords:t.payload.name});case o.SelectSearchResult:return Object.assign(Object.assign({},e),{searchKeywords:t.payload.name,isMobileModalOpened:!1,focused:"none",navigateTo:t.payload.url});case o.FetchCitiesStart:return Object.assign(Object.assign({},e),{isLoadingCities:!0});case o.FetchCitiesFinish:return Object.assign(Object.assign({},e),{isLoadingCities:!1});case o.FetchSearchResultsStart:return Object.assign(Object.assign({},e),{isLoadingSearchResults:!0});case o.FetchSearchResultsFinish:return Object.assign(Object.assign({},e),{isLoadingSearchResults:!1});case o.FetchSearchResultsComplete:{let a=Object.assign(Object.assign({},e),{searchResults:t.payload});return 0===e.initialSearchResults.length&&(a.initialSearchResults=t.payload),a}case o.FetchCitiesByGeoIpComplete:{let{cities:a}=t.payload,{default:i}=t.payload;(a=a.filter(e=>e.id!==i.id)).unshift(i),e.initialSelectedCity&&!a.find(t=>t.id===e.initialSelectedCity.id)&&a.unshift(e.initialSelectedCity);let o=Object.assign(Object.assign({},e),{defaultCity:i,initialCities:a,cities:a});return"denied"!==e.geoLocationPermission||e.initialSelectedCity||(o.selectedLocation=i,o.searchLocationKeywords=i.name),o}case o.FetchCitiesByKeywordComplete:return Object.assign(Object.assign({},e),{cities:t.payload});case o.DisplayInitialCities:return Object.assign(Object.assign({},e),{cities:e.initialCities});case o.DisplayInitialSearchResults:return Object.assign(Object.assign({},e),{searchResults:e.initialSearchResults,isLoadingSearchResults:!1});case o.GrantGeoLocationPermission:return Object.assign(Object.assign({},e),{geoLocationPermission:"granted",geoLocationCoordinates:t.payload});case o.DenyGeoLocationPermission:return Object.assign(Object.assign({},e),{geoLocationPermission:"denied",geoLocationCoordinates:null});case o.OpenMobileModal:return Object.assign(Object.assign({},e),{isMobileModalOpened:!0});case o.CloseMobileModal:return Object.assign(Object.assign({},e),{isMobileModalOpened:!1});case o.UpdateInitialSearchValue:return Object.assign(Object.assign({},e),{searchKeywords:t.payload});case o.SetInputSearchPlaceholder:return Object.assign(Object.assign({},e),{inputSearchPlaceholder:t.payload});default:return e}}(i=o||(o={})).NavigateTo="navigate to url",i.ClickOutsideInputLocation="click outside input location",i.ClickOutsideInputSearch="click outside input search",i.SelectCurrentLocation="select current location",i.FocusInputLocation="focus input location",i.FocusInputSearch="focus input search",i.ChangeInputLocation="change input location",i.ChangeInputSearch="change input search",i.ClearInputLocation="clear input location",i.ClearInputSearch="clear input search",i.SelectLocation="select location",i.FetchCitiesStart="fetch cities start",i.FetchCitiesFinish="fetch cities finish",i.FetchSearchResultsStart="fetch search results start",i.FetchSearchResultsComplete="fetch search results complete",i.FetchSearchResultsFinish="fetch search results finish",i.FetchCitiesByGeoIpComplete="fetch cities by geo IP finish",i.FetchCitiesByKeywordComplete="fetch cities by keyword finish",i.DisplayInitialCities="display initial cities",i.DisplayInitialSearchResults="display initial search results",i.GrantGeoLocationPermission="grant geolocation permission",i.DenyGeoLocationPermission="deny geolocation permission",i.OpenMobileModal="open mobile modal",i.CloseMobileModal="close mobile modal",i.UpdateInitialSearchValue="update initial search value",i.SelectSearchResult="select search result",i.SetInputSearchPlaceholder="set input search placeholder";let N=h.Z.div` display: flex; gap: 16px; ${E.M.mbDown} { flex-direction: column; padding: 14px; background-color: ${b.r.colors.primary50}; input { filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04)); } } input { background-color: white; } `,B=h.Z.div` position: relative; `,D=(0,h.Z)(B)` flex: 1; `,z=(0,h.Z)(B)` flex: 2; `,K=(0,h.Z)(r.e)` display: none; &.shown { display: block; } `,SearchIcon=()=>s.createElement("svg",{width:"18",height:"18",viewBox:"0 0 18 18"},s.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M2.97887 8.15493C2.97887 5.29627 5.29627 2.97887 8.15493 2.97887C11.0136 2.97887 13.331 5.29627 13.331 8.15493C13.331 11.0136 11.0136 13.331 8.15493 13.331C5.29627 13.331 2.97887 11.0136 2.97887 8.15493ZM8.15493 1.5C4.47951 1.5 1.5 4.47951 1.5 8.15493C1.5 11.8303 4.47951 14.8099 8.15493 14.8099C9.72624 14.8099 11.1704 14.2653 12.3089 13.3546L15.2377 16.2834C15.5265 16.5722 15.9947 16.5722 16.2834 16.2834C16.5722 15.9947 16.5722 15.5265 16.2834 15.2377L13.3546 12.3089C14.2653 11.1704 14.8099 9.72624 14.8099 8.15493C14.8099 4.47951 11.8303 1.5 8.15493 1.5Z",fill:"white"})),Z=h.Z.button` min-height: 100%; border-radius: 6px; background-color: ${b.r.colors.primaryBase}; display: flex; justify-content: center; align-items: center; gap: 11px; cursor: pointer; flex: 0.3; ${E.M.mbDown} { --margin: 16px; min-height: 44px; margin: var(--margin); width: calc(100% - var(--margin) * 2); position: absolute; bottom: 0; } &:hover { background-color: ${b.r.colors.primaryHover}; } &:active { background-color: ${b.r.colors.primaryActive}; } &:focus-visible { outline: 1px solid black; } `,V=(0,h.Z)(m.T)` font-weight: ${b.r.sizes.fwSemiBold}; `,SearchButton=({onClick:e})=>{let{t}=(0,c.u)(),a=t("booking.searchBar.searchButton");return s.createElement(Z,{onClick:e,title:a},s.createElement(SearchIcon,null),s.createElement(V,{size:"s3",color:"white"},a))};function SearchInputs({isMobile:e,state:t,dispatch:a,debouncedFetchCitiesByKeyword:i,debouncedFetchSearchResults:n,focusLocationInput:l,focusSearchInput:d,renderLocationResults:u,renderSearchResults:h,locationTrackingAttributes:g,trackingAttributes:m,onSearch:y,initalSearchValue:f}){let E=(0,s.useRef)(null),S=(0,s.useRef)(null),{focused:C,searchLocationKeywords:x,geoLocationPermission:w,selectedLocation:L,searchKeywords:k,inputSearchPlaceholder:O}=t,{t:R}=(0,c.u)();useAnimatedPlaceholder({wrapperRef:S,disabled:!!O}),(0,v.a)(E,()=>{e||a({type:o.ClickOutsideInputLocation})}),(0,v.a)(S,()=>{e||a({type:o.ClickOutsideInputSearch})});let j=(0,s.useMemo)(()=>"granted"===w&&(null==L?void 0:L.id)===p.a?b.r.colors.primaryBase:b.r.colors.gray400,[w,L]),T=(0,s.useCallback)(function(e){a({type:o.ChangeInputSearch,payload:e}),"function"!=typeof y&&(e.trim().length>F[t.locale]||f?n(e.trim(),t):(n.cancel(),a({type:o.DisplayInitialSearchResults})))},[a,t]),M=(0,s.useCallback)(function(e){a({type:o.ChangeInputLocation,payload:e}),e.trim().length>F[t.locale]?i(e.trim()):(i.cancel(),a({type:o.DisplayInitialCities}))},[i,a]);return s.createElement(N,null,s.createElement(D,{ref:E},s.createElement(I,{inputClassName:"location"===C?"focused":void 0,placeholder:R("booking.searchBar.locationPlaceholder"),autoComplete:"off",name:"search-location",displayIcon:s.createElement(r.P,{className:"location-pin-icon",color:j}),actionIcon:s.createElement(K,{color:b.r.colors.gray300,className:""!==x?"shown":""}),onActionClick:function(){a({type:o.ClearInputLocation}),i.cancel(),l()},value:x,onChange:M,onFocus:()=>a({type:o.FocusInputLocation}),size:"md",trackingAttributes:g}),!e&&u()),s.createElement(z,{ref:S},s.createElement(I,{placeholder:O||R("booking.searchBar.searchInput.placeholder"),autoComplete:"off",name:"search-results",actionIcon:s.createElement(K,{color:b.r.colors.gray300,className:""!==k?"shown":""}),onActionClick:function(){a({type:o.ClearInputSearch}),n.cancel(),n("",t),d()},value:k,onChange:T,onFocus:()=>a({type:o.FocusInputSearch}),inputClassName:"search"===C?"focused":void 0,size:"md",trackingAttributes:m,onKeyPress:e=>{t.autoCompleteDisabled&&"Enter"===e.key&&y&&y({cityId:t.selectedLocation.id,keyword:k})},enterKeyHint:t.autoCompleteDisabled?"search":void 0}),!e&&h()),t.autoCompleteDisabled&&!t.isMobile&&s.createElement(SearchButton,{onClick:()=>{y({cityId:t.selectedLocation.id,keyword:k})}}))}let DoctorIcon=()=>s.createElement("svg",{width:"14",height:"18",viewBox:"0 0 14 18"},s.createElement("path",{d:"M7 .667c-1.702 0-3.36.146-4.48.365a1.67 1.67 0 0 0-1.353 1.64v2.162c0 .459.374.833.833.833h10a.835.835 0 0 0 .833-.833V2.698c0-.804-.566-1.487-1.354-1.64C10.356.84 8.693.667 7 .667m-.833.833h1.666v.834h.834V4h-.834v.834H6.167V4h-.834V2.334h.834zm-4.74 5a8 8 0 0 0-.234 1.276c-.046.404-.137 1.478-.13 1.589a1.94 1.94 0 0 0-.73 1.536c0 .935.645 1.735 1.51 1.928.902 2.19 2.71 4.505 5.157 4.505s4.255-2.338 5.156-4.532a1.935 1.935 0 0 0 1.51-1.9 1.94 1.94 0 0 0-.729-1.537c.007-.11-.08-1.205-.13-1.615a8.4 8.4 0 0 0-.234-1.25H5.359c1.169 1.706 3.916.687 5.678 1.12.537 1.172.13 2.813.13 2.813l.65.208c.095.03.183.114.183.26 0 .157-.114.293-.312.287l-.678-.104-.234.65C9.966 14.05 8.413 15.668 7 15.668s-2.965-1.618-3.776-3.932l-.26-.651-.704.104c-.143 0-.26-.13-.26-.287a.26.26 0 0 1 .182-.26l.651-.208c-.1.12-.423-1.729 0-2.396.759-.524 1.394-.16 2.292-1.537zm3.75 2.552c-.605 0-1.094.502-1.094 1.12s.489 1.12 1.094 1.12 1.094-.501 1.094-1.12c0-.618-.488-1.12-1.094-1.12m3.646 0c-.606 0-1.094.502-1.094 1.12s.488 1.12 1.094 1.12c.605 0 1.094-.501 1.094-1.12 0-.618-.489-1.12-1.094-1.12",fill:"#9AA2AC"})),ServiceIcon=()=>s.createElement("svg",{width:"18",height:"18",viewBox:"0 0 18 18"},s.createElement("path",{d:"M9 .667A8.33 8.33 0 0 0 2.333 4H4.6A6.7 6.7 0 0 1 9 2.334c1.637 0 3.2.612 4.401 1.666h2.266A8.33 8.33 0 0 0 9 .667M1.786 4.834c-.71 2.207-1.12 4.765-1.12 7.5 0 1.751.16 3.434.47 5h15.729c.309-1.566.468-3.249.468-5 0-2.735-.41-5.293-1.12-7.5zM9 7.334a4.166 4.166 0 1 1 0 8.332 4.166 4.166 0 0 1 0-8.332M8.167 9v1.667H6.5v1.667h1.667V14h1.666v-1.666H11.5v-1.667H9.833V9z",fill:"#9AA2AC"})),HospitalIcon=()=>s.createElement("svg",{width:"16",height:"17",viewBox:"0 0 16 17"},s.createElement("path",{d:"M8 .667.5 5.635v9.199c0 .92.746 1.666 1.667 1.666h11.666c.921 0 1.667-.745 1.667-1.666V5.635zm3.333 10h-2.5v2.5H7.167v-2.5h-2.5V9h2.5V6.5h1.666V9h2.5z",fill:"#9AA2AC"})),SpecialtyIcon=()=>s.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16"},s.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"})),G=h.Z.header` display: flex; justify-content: space-between; padding: 12px 24px; background-color: ${b.r.colors.neutral50}; box-shadow: inset 0px 1px 0px #e4e8ec; `,H=h.Z.div` display: grid; flex: 2; align-items: center; gap: 16px; grid-template-columns: 16px 1fr; `,q=h.Z.p` color: ${b.r.colors.neutral800}; font-size: 14px; font-weight: ${b.r.sizes.fwSemiBold}; letter-spacing: -0.2px; line-height: 22px; `,U=h.Z.button` flex: 1; cursor: pointer; text-align: end; `,Y=h.Z.section` padding: 12px 16px; --rowGap: 16px; --graphicSize: 32px; ${E.M.tdUp} { --rowGap: 8px; } `,Q=h.Z.ul` --gap: 16px; ${E.M.tdUp} { --gap: 8px; } display: grid; overflow: hidden; gap: var(--gap); transition: max-height 0.8s ease-out; ${({isMore:e})=>e&&` height: auto; max-height: 0; margin-top: var(--gap); `} ${({isShown:e})=>e&&` max-height: 600px; `} @media (prefers-reduced-motion) { transition: none; } ${E.M.tdUp} { grid-template-columns: 1fr 1fr; } `,W=(0,h.Z)(m.T)` margin-top: 12px; margin-bottom: 8px; cursor: pointer; text-align: start; text-transform: capitalize; `,X=h.Z.li` display: flex; align-items: center; gap: var(--rowGap); cursor: pointer; &.not-nav { cursor: default; } `,J=h.Z.div` --wrapper-size: var(--graphicSize); border-radius: calc(var(--wrapper-size) / 2); background-color: var(--neutral50); width: var(--wrapper-size); height: var(--wrapper-size); aspect-ratio: 1/1; overflow: hidden; ${({type:e})=>e&&"doctors"===e&&` border-radius: calc(var(--graphicSize) / 2); `} img { width: var(--graphicSize); height: var(--graphicSize); ${({type:e})=>e&&"doctors"===e?` object-fit: cover; `:` object-fit: contain; `} } &:focus-visible { outline: 1px solid ${b.r.colors.gray600}; } `,ee=(0,h.Z)(m.T)` line-height: 22px; letter-spacing: -0.2px; ${E.M.tdUp} { &[data-size='p3'] { font-size: 14px; } } `,et=h.Z.figure` max-width: var(--graphicSize); min-width: var(--graphicSize); `,ea=h.Z.svg` margin: 0 auto; display: block; `,ei=h.Z.div` display: grid; place-items: center; `,eo={doctors:r.f,services:r.g},ResultSectionItem=({type:e,item:t,imageUrl:a,className:i,onClickItem:o})=>{let n=(0,s.useMemo)(()=>{let t=eo[e]||r.D;return s.createElement(t,{width:32,height:"services"===e?32:24})},[e]);return s.createElement(X,{onClick:()=>o&&o(t),onKeyDown:e=>{("Enter"===e.key||"Space"===e.key)&&o&&o(t)},tabIndex:0,role:"button",className:i},s.createElement(et,null,"hospitals"===e?s.createElement(ea,{width:"12",height:"16",viewBox:"0 0 12 16"},s.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.75 5.94873C0.75 3.04623 3.0975 0.69873 6 0.69873C8.9025 0.69873 11.25 3.04623 11.25 5.94873C11.25 9.07623 7.935 13.3887 6.5775 15.0312C6.2775 15.3912 5.73 15.3912 5.43 15.0312C4.065 13.3887 0.75 9.07623 0.75 5.94873ZM4.125 5.94873C4.125 6.98373 4.965 7.82373 6 7.82373C7.035 7.82373 7.875 6.98373 7.875 5.94873C7.875 4.91373 7.035 4.07373 6 4.07373C4.965 4.07373 4.125 4.91373 4.125 5.94873Z",fill:"#9AA2AC"})):s.createElement(J,{type:e},a?s.createElement("img",{src:a,width:32,height:"services"===e?32:24,loading:"lazy"}):n)),s.createElement(ee,{color:b.r.colors.gray800,size:"p3"},t.name))},ResultSection=({type:e,data:t,state:a,dispatch:i,itemsToShow:n,itemsToShowDesktop:l,isMobile:r,isLoading:d,keyword:u,isNavResultItem:h})=>{let[g,y]=(0,s.useState)(!1),{t:f,locale:v}=(0,c.u)(),{selectedLocation:E,searchKeywords:C}=a,x=(0,s.useMemo)(()=>p.L[v],[v]),w="ms-MY"===v,L=(0,s.useMemo)(()=>({doctors:{name:f("booking.searchPopup.doctors"),icon:s.createElement(DoctorIcon,null),slug:x.DOCTOR},services:{name:f("booking.searchPopup.services"),icon:s.createElement(ServiceIcon,null),slug:x.SERVICE},hospitals:{name:f("booking.searchPopup.hospitals"),icon:s.createElement(HospitalIcon,null),slug:x.HOSPITAL},specialties:{name:f("booking.searchPopup.specialties"),icon:s.createElement(SpecialtyIcon,null),slug:x.SPECIALTIES}}),[e,x]),k=(0,s.useMemo)(()=>L[e].slug,[L]),I=r?n:l;function onClickItem(t){let a="";switch(e){case"specialties":a=`/${E.slug}/${L.doctors.slug}/${t.slug}`;break;case"services":a=`/${E.slug}/${k}/${t.slug}`;break;case"doctors":case"hospitals":a=`/${k}/${t.slug}-${t.id}`}a&&i({type:o.SelectSearchResult,payload:{name:t.name,url:a}})}function renderItem(t){return s.createElement(ResultSectionItem,{key:t.id,item:t,type:e,imageUrl:t.logo||t.avatar||t.thumbnail,className:h?"":"not-nav",onClickItem:h&&onClickItem})}return s.createElement("section",null,s.createElement(G,null,s.createElement(H,null,L[e].icon,s.createElement(q,null,L[e].name)),(u.trim().length<=F[v]||w)&&s.createElement(U,{onClick:function(){let t="";switch(e){case"specialties":t=`/${k}`;break;case"services":case"doctors":case"hospitals":t=`/${E.slug}/${k}`}t&&i({type:o.NavigateTo,payload:t})}},s.createElement(m.T,{size:"p3",color:b.r.colors.primaryBase},f("booking.searchPopup.seeAll")))),(d||t&&t.length>0)&&s.createElement(Y,null,s.createElement(Q,null,d&&[,,].fill(void 0).map((t,a)=>s.createElement(X,{key:e+"loading"+a},s.createElement(et,null,s.createElement(ei,null,s.createElement(S.Z,{height:14,width:"hospitals"===e?12:32,style:{maxWidth:"var(--graphicSize)",minHeight:"var(--graphicSize)"}}))),s.createElement(S.Z,{width:120,height:24}))),!d&&t&&t.length>0&&t.slice(0,I).map(renderItem)),s.createElement(Q,{isShown:g,isMore:!0},t.slice(I,-1).map(renderItem)),"specialties"===e&&Iy(!g)},s.createElement(W,{size:"p3",color:b.r.colors.primaryBase},g?f("booking.searchPopup.seeLessSpecialties"):f("booking.searchPopup.seeMoreSpecialties"))),"specialties"!==e&&(IF[v]&&s.createElement("button",{onClick:function(){let{slug:t}=L[e],a=`/${E.slug}/${t}?q=${C}`;i({type:o.NavigateTo,payload:a})}},s.createElement(W,{size:"p3",color:b.r.colors.primaryBase},f(`booking.searchPopup.searchIn.${e}`,{name:u})))),!d&&(null==t?void 0:t.length)===0&&s.createElement(Y,null,s.createElement(m.T,{size:"sm",color:b.r.colors.gray400},f("booking.searchBar.noResults"))))},en=h.Z.section` background-color: white; border-radius: 4px; position: absolute; width: 100%; z-index: 30; ${E.M.tdUp} { box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); } `,SearchResults=({data:e,state:t,dispatch:a,isMobile:i,isLoading:o,keyword:n,hideResults:l,isNavResultItem:r})=>s.createElement(en,null,e&&e.map(e=>l&&l.includes(e.type)?s.createElement(s.Fragment,null):s.createElement(ResultSection,{type:e.type,state:t,dispatch:a,itemsToShow:2,itemsToShowDesktop:4,key:e.type,data:e.results,isMobile:i,isLoading:o,keyword:n,isNavResultItem:r}))),BookingSearchBar=({isMobile:e,careApiDomain:t,geoLocationPermission:a,geoLocationCoordinates:i,initialSelectedCity:d,initialSearchValue:h="",careFrontDomain:g="/care",isDebug:m=!1,askForGeolocationPermission:b=!1,gaTrackingSearchBar:y,gaTrackingLocationSearch:f,autoCompleteDisabled:v=!1,inputSearchPlaceholder:E="",isOptionAllLocation:S=!1,hideResults:I=[],isNavResultItem:O=!0,routerPush:R,onGeoLocationPermissionChange:j,onSearch:T,onChangeLocation:M})=>{let{t:A,locale:P}=(0,c.u)(),$=(0,s.useRef)(null),N=(0,s.useRef)(null),[B,D]=(0,s.useState)(void 0),[z,K]=(0,s.useState)(!1),{geoLocationPermission:Z,geoLocationCoordinates:V,requestGeoLocation:G}=(0,r.u)(),[H,q]=(0,s.useReducer)(reducer,_,t=>Object.assign(Object.assign({},t),{isDebug:m,isMobile:e,geoLocationPermission:a||Z||"unset",geoLocationCoordinates:i||V||null,searchKeywords:h,initialSelectedCity:d||null,selectedLocation:d||t.selectedLocation||null,searchLocationKeywords:(null==d?void 0:d.name)||t.searchLocationKeywords,autoCompleteDisabled:v,inputSearchPlaceholder:E,locale:P})),{navigateTo:U,focused:Y,isLoadingCities:Q,cities:W,searchKeywords:X,geoLocationPermission:J,selectedLocation:ee,initialSelectedCity:et,defaultCity:ea,searchResults:ei,isLoadingSearchResults:eo,isMobileModalOpened:en,inputSearchPlaceholder:es}=H,{fetchCitiesByLocation:el,fetchCitiesByKeyword:er,fetchSearchResults:ec}=function({dispatch:e,careApiDomain:t,locale:a="vi-VN"}){let i=(0,s.useCallback)(function(i,n={}){let s=`${t}${i}`;return e({type:o.FetchCitiesStart}),fetch((0,r.h)(s,n,a),{method:"GET"}).then(e=>e.json()).then(e=>1===e._status&&e._data?null==e?void 0:e._data:(console.log("error loading cities",e),Promise.reject(e))).finally(()=>e({type:o.FetchCitiesFinish}))},[a]),n=(0,s.useCallback)(function({coordinates:t}){let n={},s={};t&&(n={lat:t.lat,lng:t.lng}),"ms-MY"===a&&(s.noPaging=1);let l=[i(C.P.GET_CITY_BY_IP,Object.assign(Object.assign({},n),s))];return"zh-TW"===a&&l.push(i(C.P.GET_CITIES_LIST,{noPaging:1})),Promise.all(l).then(([t,a])=>{let i=Object.assign({},t);if(a){let e=i.cities.map(e=>e.id);i.cities=i.cities.concat(a.cities.filter(t=>!e.includes(t.id)))}e({type:o.FetchCitiesByGeoIpComplete,payload:i})}).catch(e=>console.error("error loading cities by location",e))},[a,t,e]),l=(0,s.useCallback)(function(t){return i(C.P.GET_CITIES_LIST,{keyword:t}).then(t=>{e({type:o.FetchCitiesByKeywordComplete,payload:t.cities})}).catch(e=>console.error("error loading cities by keyword",e))},[a,t,e]),c=(0,s.useCallback)(function(i,n){let s=`${t}${C.P.GET_SEARCH_V2}`;e({type:o.FetchSearchResultsStart});let{defaultCity:l,selectedLocation:c,geoLocationCoordinates:d}=n,u="";if(!c||!l){e({type:o.FetchSearchResultsFinish});return}let h=c.id===p.a;h?d||(u=l.id):u=c.id===p.I?"":c.id;let g=(null==d?void 0:d.lat)||"",m=(null==d?void 0:d.lng)||"";return fetch((0,r.h)(s,{domain:t,searchType:"global",keyword:i.trim().length>F[a]?i.trim():"",city:u===p.a?"":u,lat:g,lng:m},a),{method:"GET",headers:{accept:"version=2.0.0.0"}}).then(e=>e.json()).then(e=>1===e._status&&e._data?null==e?void 0:e._data:Promise.reject(e)).then(t=>e({type:o.FetchSearchResultsComplete,payload:t})).catch(e=>{console.log("error loading search results",{url:s,error:e})}).finally(()=>e({type:o.FetchSearchResultsFinish}))},[a,t,e]);return{fetchCitiesByLocation:n,fetchCitiesByKeyword:l,fetchSearchResults:c}}({dispatch:q,locale:P,careApiDomain:t}),ed=(0,s.useMemo)(()=>{var e;return{id:p.a,name:A("booking.searchBar.currentLocation"),slug:null===(e=p.L[P])||void 0===e?void 0:e.CURRENT}},[A,P]),eu=(0,s.useMemo)(()=>u()(er,400),[er]),ep=(0,s.useMemo)(()=>u()(ec,400),[ec]);(0,s.useEffect)(()=>{""!==h&&h!==H.searchKeywords&&q({type:o.UpdateInitialSearchValue,payload:h})},[h]),(0,s.useEffect)(()=>{b&&(null==ee?void 0:ee.id)===p.a&&"unset"===J&&G()},[b,ee,J]),(0,s.useEffect)(()=>{a||J===Z||("granted"===Z&&V?q({type:o.GrantGeoLocationPermission,payload:V}):"denied"===Z&&q({type:o.DenyGeoLocationPermission}))},[J,Z,V,a]),(0,s.useEffect)(()=>{U&&(R?R(U):window.location.href=`${g}${U}`)},[U]);let eh=(0,s.useCallback)(function(){q({type:o.SelectCurrentLocation,payload:ed})},[A,q]);(0,s.useEffect)(()=>{var t;"denied"===J||et||q({type:o.SelectLocation,payload:{name:A("booking.searchBar.allLocations"),id:p.I,slug:null===(t=p.L[P])||void 0===t?void 0:t.ALL}}),j&&j(J,H.geoLocationCoordinates),e&&"granted"===J&&ee&&q({type:o.FocusInputSearch}),el({coordinates:H.geoLocationCoordinates})},[J]),(0,s.useEffect)(()=>{ee&&ea&&ec(H.searchKeywords,H)},[ee,ea]),(0,s.useEffect)(()=>{E!==es&&q({type:o.SetInputSearchPlaceholder,payload:E})},[E,es]),(0,s.useEffect)(()=>{en?document.body.classList.add("care-popup-open"):document.body.classList.remove("care-popup-open")},[en]);let eg=(0,s.useCallback)(function(e){"ms-MY"===P&&K(!0),q({type:o.SelectLocation,payload:e}),"ms-MY"!==P&&focusSearchInput(),M&&M(e)},[A,q]);function handleCurrentLocationClick(){"ms-MY"===P&&K(!0),e&&"granted"!==H.geoLocationPermission?G():(eh(),"ms-MY"!==P&&focusSearchInput())}function focusLocationInput(){var e;$.current&&(null===(e=$.current.querySelector('input[name="search-location"]'))||void 0===e||e.focus())}function focusSearchInput(){var e;$.current&&(null===(e=$.current.querySelector('input[name="search-results"]'))||void 0===e||e.focus())}function handleMobileTopBarClose(){q({type:o.CloseMobileModal})}function renderLocationResults(){return"location"!==Y?null:s.createElement(LocationResults,{isLoading:Q,cities:W,onLocationClick:eg,onCurrentLocationClick:handleCurrentLocationClick,isLocationLoading:Q,geoLocationPermission:J,selectedLocation:ee,isOptionAllLocation:S})}function renderSearchResults(){return"search"!==Y?null:H.autoCompleteDisabled?e?s.createElement(SearchButton,{onClick:()=>{T({cityId:H.selectedLocation.id,keyword:X}),handleMobileTopBarClose()}}):null:s.createElement(SearchResults,{data:ei,state:H,dispatch:q,isMobile:!1,keyword:X,isLoading:eo,hideResults:I,isNavResultItem:O})}function renderSearchInputs(){return s.createElement(SearchInputs,{isMobile:e,state:H,dispatch:q,debouncedFetchCitiesByKeyword:eu,debouncedFetchSearchResults:ep,focusLocationInput:focusLocationInput,focusSearchInput:focusSearchInput,renderLocationResults:renderLocationResults,renderSearchResults:renderSearchResults,trackingAttributes:y,locationTrackingAttributes:f,onSearch:T,initalSearchValue:h})}return((0,s.useEffect)(()=>{if(window.visualViewport){let resizeHandler=e=>{let t=e.target;D(null==t?void 0:t.height)};return window.visualViewport.addEventListener("resize",resizeHandler,{passive:!0}),()=>{window.visualViewport.removeEventListener("resize",resizeHandler)}}},[D]),(0,s.useEffect)(()=>{if(ee&&z&&"ms-MY"===P){let e=`/${ee.slug}/hospital`;q({type:o.NavigateTo,payload:e}),K(!1)}},[z,P,ee]),e)?s.createElement(s.Fragment,null,s.createElement(l.xB,{styles:l.iv` .care-popup-open { overflow: hidden; position: fixed; &::before { content: ''; inset: 0; position: absolute; background-color: white; min-height: 100vh; min-width: 100vw; z-index: 2; } } `}),s.createElement(k,{ref:N}),s.createElement(w,{id:"booking-search-bar",ref:$,"data-is-modal":e&&en,style:{"--mobile-care-searchbar-height":en&&B?`${B}px`:"100%"}},en?s.createElement(s.Fragment,null,s.createElement(L,null,s.createElement(MobileTopBar,{headingText:A("booking.searchBar.searchButton"),onLeftClick:handleMobileTopBarClose}),renderSearchInputs()),renderLocationResults(),renderSearchResults()):s.createElement(MobileFakeInput,{onClick:function(){var e;return(0,n.a)(this,void 0,void 0,function*(){N.current&&N.current.focus(),q({type:o.OpenMobileModal}),yield Promise.resolve(),$.current&&(null===(e=$.current.querySelector('input[name="search-location"]'))||void 0===e||e.focus())})},focused:Y,value:X,trackingAttributes:y,inputSearchPlaceholder:E}))):s.createElement(x,{id:"booking-search-bar",ref:$},renderSearchInputs())}},UMsb:function(e,t,a){a.d(t,{u:function(){return BookingSearchBarV2}});var i,o,n,s,l=a("q1tI"),r=a("0D4Z"),c=a("aDCK"),d=a("NEaA"),u=a("rlLN"),p=a("SPK5"),h=a("mAfZ"),g=a("Bd2T"),m=a("BUnU"),b=a("Gx+P"),y=a("sEfC"),f=a.n(y),v=a("w8Dv"),E=a("rBCA"),S=a("iBNF"),C=a("uuQu"),x=a("LaLE"),w=a("VZtU"),L=a("wp0n"),k=a("M5ex"),I=a("e4F3");a("gY0P");let O=E.Z.div``,R=E.Z.div` background-color: ${S.r.colors.neutral50}; padding-bottom: 1px; ${C.M.mbDown} { padding: 0 16px 10px; } `,j=(0,E.Z)(x.C)` padding: 0 16px; ${C.M.mbDown} { padding: 0; } `,T=E.Z.div` padding: 24px 56px; border-radius: 16px; background-color: ${S.r.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); ${C.M.mbDown} { padding: 16px 16px; border-radius: 0px 0px 12px 12px; } .flex-search-input { flex-direction: row; ${C.M.mbDown} { flex-direction: column; } } `,M={"en-PH":3,"tl-PH":2,"id-ID":3,"vi-VN":2,"zh-TW":0,"ms-MY":2,"th-TH":2},A={isMobile:!1,isDebug:!1,navigateTo:null,geoLocationPermission:"unset",geoLocationCoordinates:null,focused:"none",focusedSpecialty:"none",searchLocationKeywords:"",searchSpecialtyKeywords:"",searchKeywords:"",selectedLocation:null,selectedSpecialty:null,defaultCity:null,initialCities:[],cities:[],searchResults:{},initialSearchResults:{},isLoadingCities:!1,isLoadingSearchResults:!1,isMobileModalOpened:!1,initialSelectedCity:null,autoCompleteDisabled:!1,inputSearchPlaceholder:"",locale:"vi-VN",allSpecialties:[],popularKeys:[]};function resetSearchLocationKeywords(e){let{selectedLocation:t,searchLocationKeywords:a}=e;return t&&a!==t.name?Object.assign(Object.assign({},e),{searchLocationKeywords:t.name}):e}function reducer(e,t){var a,i;switch(e.isDebug&&console.log("bookingSearchBar",{action:t,state:e}),t.type){case n.NavigateTo:return Object.assign(Object.assign({},e),{navigateTo:t.payload,focused:"none",isMobileModalOpened:!1});case n.ClickOutsideInputLocation:if("location"!==e.focused)return e;return resetSearchLocationKeywords(Object.assign(Object.assign({},e),{focused:"none"}));case n.ClickOutsideInputSpecialty:if("specialty"!==e.focused)return e;return resetSearchLocationKeywords(Object.assign(Object.assign({},e),{focused:"none"}));case n.ClickOutsideInputSearch:if("search"!==e.focused)return e;return Object.assign(Object.assign({},e),{focused:"none"});case n.ClickOutsideInputSearchSpecialty:if("search"!==e.focusedSpecialty)return e;return Object.assign(Object.assign({},e),{focusedSpecialty:"none"});case n.FocusInputLocation:{let t=Object.assign(Object.assign({},e),{focused:"location"});return(null===(a=e.selectedLocation)||void 0===a?void 0:a.id)===v.a&&(t.searchLocationKeywords=""),t}case n.FocusInputSpecialty:{let t=Object.assign(Object.assign({},e),{focused:"specialty"});return(null===(i=e.selectedLocation)||void 0===i?void 0:i.id)===v.a&&(t.searchLocationKeywords=""),t}case n.FocusInputSearch:let o=Object.assign(Object.assign({},e),{focused:"search"});if(e.isMobile)return resetSearchLocationKeywords(o);return o;case n.FocusInputSearchSpecialty:{let t=Object.assign(Object.assign({},e),{focusedSpecialty:"search"});return t}case n.ChangeInputLocation:return Object.assign(Object.assign({},e),{searchLocationKeywords:t.payload});case n.ChangeInputSearch:{let a=t.payload;return Object.assign(Object.assign({},e),{searchKeywords:a,isLoadingSearchResults:a.trim().length>M[e.locale]})}case n.SelectCurrentLocation:return Object.assign(Object.assign({},e),{focused:"none",selectedLocation:t.payload,searchLocationKeywords:t.payload.name});case n.ClearInputLocation:return Object.assign(Object.assign({},e),{focused:"location",cities:e.initialCities,searchLocationKeywords:""});case n.ClearInputSearch:return Object.assign(Object.assign({},e),{focused:"search",searchKeywords:""});case n.SelectLocation:return Object.assign(Object.assign({},e),{focused:"none",selectedLocation:t.payload,searchLocationKeywords:t.payload.name});case n.SelectSpecialty:return Object.assign(Object.assign({},e),{focused:"none",selectedSpecialty:t.payload});case n.SelectSearchResult:return Object.assign(Object.assign({},e),{searchKeywords:t.payload.name,isMobileModalOpened:!1,focused:"none",navigateTo:t.payload.url});case n.FetchCitiesStart:return Object.assign(Object.assign({},e),{isLoadingCities:!0});case n.FetchCitiesFinish:return Object.assign(Object.assign({},e),{isLoadingCities:!1});case n.FetchSearchResultsStart:return Object.assign(Object.assign({},e),{isLoadingSearchResults:!0});case n.FetchSearchResultsFinish:return Object.assign(Object.assign({},e),{isLoadingSearchResults:!1});case n.FetchSearchResultsComplete:{let a=Object.assign(Object.assign({},e),{searchResults:Object.assign(Object.assign({},e.searchResults),{[t.payload.key]:t.payload.searches})});return a}case n.FetchCitiesByGeoIpComplete:{let{cities:a}=t.payload,{default:i}=t.payload;a=a.filter(e=>e.id!==i.id),i&&a.unshift(i),e.initialSelectedCity&&!a.find(t=>t.id===e.initialSelectedCity.id)&&a.unshift(e.initialSelectedCity);let o=Object.assign(Object.assign({},e),{defaultCity:i,initialCities:a,cities:a});return"denied"!==e.geoLocationPermission||e.initialSelectedCity||(o.selectedLocation=i,o.searchLocationKeywords=i.name),o}case n.FetchCitiesByKeywordComplete:return Object.assign(Object.assign({},e),{cities:t.payload});case n.DisplayInitialCities:return Object.assign(Object.assign({},e),{cities:e.initialCities});case n.DisplayInitialSearchResults:return Object.assign(Object.assign({},e),{searchResults:e.initialSearchResults,isLoadingSearchResults:!1});case n.UpdateInitialSearchResults:return Object.assign(Object.assign({},e),{initialSearchResults:Object.assign(Object.assign({},e.initialSearchResults),{[t.payload.key]:t.payload.searches})});case n.GrantGeoLocationPermission:return Object.assign(Object.assign({},e),{geoLocationPermission:"granted",geoLocationCoordinates:t.payload});case n.DenyGeoLocationPermission:return Object.assign(Object.assign({},e),{geoLocationPermission:"denied",geoLocationCoordinates:null});case n.OpenMobileModal:return Object.assign(Object.assign({},e),{isMobileModalOpened:!0});case n.CloseMobileModal:return Object.assign(Object.assign({},e),{isMobileModalOpened:!1});case n.UpdateInitialSearchValue:return Object.assign(Object.assign({},e),{searchKeywords:t.payload});case n.SetInputSearchPlaceholder:return Object.assign(Object.assign({},e),{inputSearchPlaceholder:t.payload});case n.FetchAllSpecialties:return Object.assign(Object.assign({},e),{allSpecialties:t.payload});case n.FetchPopularKeys:return Object.assign(Object.assign({},e),{popularKeys:t.payload});default:return e}}(i=n||(n={})).NavigateTo="navigate to url",i.ClickOutsideInputLocation="click outside input location",i.ClickOutsideInputSearch="click outside input search",i.ClickOutsideInputSearchSpecialty="click outside input search specialty",i.ClickOutsideInputSpecialty="click outside input specialty",i.SelectCurrentLocation="select current location",i.FocusInputLocation="focus input location",i.FocusInputSearch="focus input search",i.FocusInputSearchSpecialty="focus input search specialty",i.ChangeInputLocation="change input location",i.ChangeInputSearch="change input search",i.ClearInputLocation="clear input location",i.ClearInputSearch="clear input search",i.SelectLocation="select location",i.SelectSpecialty="select specialty",i.FetchCitiesStart="fetch cities start",i.FetchCitiesFinish="fetch cities finish",i.FetchSearchResultsStart="fetch search results start",i.FetchSearchResultsComplete="fetch search results complete",i.FetchSearchResultsFinish="fetch search results finish",i.FetchCitiesByGeoIpComplete="fetch cities by geo IP finish",i.FetchCitiesByKeywordComplete="fetch cities by keyword finish",i.DisplayInitialCities="display initial cities",i.DisplayInitialSearchResults="display initial search results",i.UpdateInitialSearchResults="update initial search results",i.GrantGeoLocationPermission="grant geolocation permission",i.DenyGeoLocationPermission="deny geolocation permission",i.OpenMobileModal="open mobile modal",i.CloseMobileModal="close mobile modal",i.UpdateInitialSearchValue="update initial search value",i.SelectSearchResult="select search result",i.SetInputSearchPlaceholder="set input search placeholder",i.FocusInputSpecialty="focus input specialty",i.FetchAllSpecialties="fetch all specialty",i.FetchPopularKeys="fetch popular key by type";let P=E.Z.div` flex: 1; position: relative; ${C.M.mbDown} { width: 100%; display: flex; flex-direction: column; gap: 12px; } `,$=E.Z.div` position: absolute; top: calc(100% + 2px); width: 100%; border-radius: 4px; background: ${S.r.colors.white}; box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1); z-index: 10; ${C.M.mbDown} { width: calc(100% + 64px); left: -32px; } `,F=E.Z.div``,_=E.Z.div` display: flex; justify-content: space-between; align-item: center; padding: 9px 14px 9px 22px; background: #f7f9fc; .title { color: ${S.r.colors.gray800}; font-size: 14px; font-weight: 600; line-height: 22px; } .btn-see-all { color: ${S.r.colors.blue600}; font-size: 14px; line-height: 22px; cursor: pointer; } `,N=E.Z.div` padding: 10px 16px; max-height: 400px; overflow: auto; `,B=E.Z.div` display: flex; gap: 12px; align-items: center; cursor: pointer; &:hover { background-color: ${S.r.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 ${S.r.colors.neutral100}; .title { color: ${S.r.colors.gray800}; font-size: 16px; font-weight: 600; line-height: 24px; } .description { overflow: hidden; color: ${S.r.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; } } `;E.Z.div` padding: 0 16px 16px; .search-detail-btn { color: ${S.r.colors.blue600}; font-size: 14px; line-height: 22px; cursor: pointer; } `;let SearchResult=({state:e,type:t,results:a,location:i,isLoading:o,typeInformation:s,clientSlug:c="",dispatch:d})=>{let{locale:u,t:p}=(0,b.u)(),{selectedLocation:h}=e,g=(0,l.useMemo)(()=>s[t].slug,[s,t]),handleOnClick=e=>{let a="";switch(t){case"service":a=`/${h.slug}/${g}/${e.slug}`;break;case"doctor":case"hospital":a=`/${g}/${e.slug}-${e.id}`}a&&d({type:n.NavigateTo,payload:a})};return l.createElement(F,null,l.createElement(_,null,l.createElement("div",{className:"title"},p("booking.searchResult.description",{search_type:s[t].name,search_location:i})),a.length>0&&l.createElement("div",{className:"btn-see-all",onClick:()=>{let a=`/${h.slug}/${g}`,i=v.M[u][c];i&&(a+=`/${i}`),("doctor"===t||"hospital"===t)&&e.selectedSpecialty.id>0&&(a+=`?specialtyId=${e.selectedSpecialty.id}`),a&&d({type:n.NavigateTo,payload:a})}},p("home.seeAll"))),l.createElement(N,null,o&&[,,,].fill(void 0).map((e,a)=>l.createElement(B,{key:t+"loading"+a,className:2===a?"last-item":""},l.createElement("div",{className:"image-item"},l.createElement(r.O,{height:48,circle:!0,mb:"xl",animate:!0})),l.createElement("div",{className:"infor"},l.createElement("div",{className:"title"},l.createElement(r.O,{height:8,mt:10,radius:"xl",animate:!0})),l.createElement("div",{className:"description"},l.createElement("div",{className:"sub-description"},l.createElement(r.O,{height:8,mt:10,radius:"xl",width:"80%",animate:!0})))))),!o&&a&&a.length>0&&l.createElement(l.Fragment,null,a.map((e,i)=>{var o,n;let r=a.length>4&&3===i||a.length<=4&&i===a.length-1,c="";return("hospital"===t&&(c=(null==e?void 0:e.address)||""),"doctor"===t&&(c=(null===(o=null==e?void 0:e.specialties)||void 0===o?void 0:o.join(", "))||""),"service"===t&&(c=(null===(n=null==e?void 0:e.hospital_branch)||void 0===n?void 0:n.name)||""),i>=4)?l.createElement(l.Fragment,null):l.createElement(B,{key:e.id,className:r?"last-item":"",onClick:()=>handleOnClick(e)},l.createElement("div",{className:"image-item"},l.createElement("img",{src:e.logo||e.avatar,alt:e.name})),l.createElement("div",{className:"infor"},l.createElement("div",{className:"title"},e.name),l.createElement("div",{className:"description"},s[t].icon,l.createElement("div",{className:"sub-description"},c))))})),!o&&(null==a?void 0:a.length)===0&&l.createElement(L.T,{size:"sm",color:S.r.colors.gray400},p("booking.searchBar.noResults"))))},D=E.Z.div` position: relative; ${C.M.mbDown} { width: 100%; display: flex; flex-direction: column; gap: 12px; } `,z=E.Z.div` position: absolute; top: calc(100% + 2px); width: calc(100% + 100px); border-radius: 4px; background: ${S.r.colors.white}; box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1); z-index: 10; max-height: 300px; overflow: auto; ${C.M.mbDown} { width: calc(100% + 64px); left: -32px; } `,K=E.Z.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; img { width: 100%; object-fit: cover; } svg { width: 40px; } } ${({isSelected:e})=>e&&` &::after { content: ${g.i}; top: 50%; right: 18px; position: absolute; transform: translateY(-50%); } `} & + li::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background-color: ${S.r.colors.neutral100}; } &:not([data-is-denied='true']):hover { background-color: ${S.r.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; } `,DoctorIcon=()=>l.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},l.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"})),ServiceIcon=()=>l.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},l.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"})),HospitalIcon=()=>l.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},l.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"})),SpecialtyIcon=()=>l.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16"},l.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"})),SearchSpecialty=({state:e,isMobile:t,debouncedFetchSearchResults:a,selectedLocation:i,onSpecialtyClick:o,dispatch:s})=>{var r;let{t:d,locale:u}=(0,b.u)(),p=(0,l.useRef)(null),h=(0,l.useMemo)(()=>v.L[u],[u]),g=(0,l.useMemo)(()=>({wrapper:{"&:after":{content:'""',width:"1px",height:"20px",backgroundColor:"#E4E8EC",position:"absolute",right:0,top:"13px"}},input:{border:t?"border: 1px solid #d9d9d9":"none",height:t?"40px":"46px !important",paddingRight:"30px","&:focus":{boxShadow:t?"box-shadow: 0px 0px 0px 2px #91caff":"none"}},rightSection:{width:"30px",svg:{fontSize:"20px"}}}),[t]),y=(0,l.useCallback)(function(e){console.log(e)},[a,s]);return(0,m.a)(p,()=>{s({type:n.ClickOutsideInputSpecialty})}),l.createElement(D,{ref:p},l.createElement(c.I.Wrapper,null,l.createElement(c.I,{size:t?"md":"lg",placeholder:d("booking.searchPopup.specialties"),value:(null===(r=null==e?void 0:e.selectedSpecialty)||void 0===r?void 0:r.name)||"",rightSection:l.createElement(k.C,null),styles:g,onFocus:()=>s({type:n.FocusInputSpecialty}),onChange:e=>{y(e.target.value)}})),"specialty"===e.focused&&l.createElement(z,null,l.createElement(K,{key:"all-location",role:"button",tabIndex:0,onClick:()=>{o&&o({name:d("booking.searchBar.allSpecialties"),id:-1,thumbnail:"",total_doctor:0,slug:h.SPECIALTIES})}},l.createElement("div",{className:"image-item"},l.createElement(SpecialtyIcon,null)),l.createElement(L.T,{size:"md"},d("booking.searchBar.allSpecialties"))),e.allSpecialties.map(e=>l.createElement(K,{key:e.id,onClick:t=>{t.nativeEvent.stopImmediatePropagation(),o&&o(Object.assign(Object.assign({},e),{total_doctor:0}))},role:"button",tabIndex:0,"aria-label":`Select ${e.name} as location`,isSelected:(null==i?void 0:i.id)===e.id},l.createElement("div",{className:"image-item"},l.createElement("img",{src:e.thumbnail,alt:e.name})),l.createElement(L.T,{size:"md"},e.name)))))},SearchInputs=({state:e,type:t,isMobile:a,isLoading:i,initalSearchValue:o,typeInformation:s,debouncedFetchSearchResults:r,trackingAttributes:d,hideSpecialtySelection:u=!1,clientSlug:p="",focusSearchInput:h,onSearch:g,onEnterSearch:y,dispatch:f})=>{var v;let{t:E}=(0,b.u)(),S=(0,l.useRef)(null),C=(0,l.useMemo)(()=>d?{"data-event-category":d.dataEventCategory,"data-event-action":d.dataEventAction,"data-event-label":d.dataEventLabel}:{},[d]),x=(0,l.useMemo)(()=>"doctor"===t?E("booking.searchBar.placeholder.doctor"):"service"===t?E("booking.searchBar.placeholder.service"):"hospital"===t?E("booking.searchBar.placeholder.hospital"):"specialty"===t?E("booking.searchBar.placeholder.specialty"):"",[t]),L=(0,l.useMemo)(()=>({root:{flex:1,"&.hide-specialty-selection":{".mantine-Input-rightSection":{display:"none"},input:{paddingLeft:"48px"},".mantine-Input-icon":{left:"0"}}}}),[]),k=(0,l.useMemo)(()=>({icon:{left:"165px"},input:{color:"#262626",'&[data-with-icon="true"]':{paddingLeft:"205px",paddingRight:"16px"}},rightSection:{left:0,width:"165px",padding:"1px"}}),[]),I=(0,l.useMemo)(()=>({input:{color:"#262626"}}),[]);(0,m.a)(S,()=>{f({type:n.ClickOutsideInputSearch})});let O=(0,l.useCallback)(function(a){f({type:n.ChangeInputSearch,payload:a}),"function"!=typeof g&&(a.trim().length>M[e.locale]||o||0===a.trim().length?r(a.trim(),e,t,p):(r.cancel(),f({type:n.DisplayInitialSearchResults})))},[f,e,t]),R=(0,l.useCallback)(function(e){f({type:n.SelectSpecialty,payload:e}),h()},[f]),j=(0,l.useCallback)(e=>{13===e.keyCode&&(e.stopPropagation(),e.preventDefault(),y&&y())},[y]);return l.createElement(P,{ref:S},"specialty"===t?l.createElement(c.I.Wrapper,{styles:L},l.createElement(c.I,{icon:l.createElement(w.Z,null),size:a?"md":"lg",placeholder:x,styles:I,value:e.searchKeywords,onFocus:()=>f({type:n.FocusInputSearchSpecialty}),onChange:e=>{O(e.target.value)},onKeyDown:j})):l.createElement(l.Fragment,null,"service"===t?l.createElement(c.I.Wrapper,{styles:L},l.createElement(c.I,{icon:l.createElement(w.Z,null),size:a?"md":"lg",name:"search-results",placeholder:x,onFocus:()=>f({type:n.FocusInputSearch}),value:e.searchKeywords,onChange:e=>{O(e.target.value)},onKeyDown:j})):l.createElement(l.Fragment,null,a&&!u?l.createElement(l.Fragment,null,l.createElement(SearchSpecialty,{state:e,isMobile:a,dispatch:f,debouncedFetchSearchResults:r,onSpecialtyClick:R}),l.createElement(c.I.Wrapper,{styles:L},l.createElement(c.I,{icon:l.createElement(w.Z,null),size:"md",placeholder:x,value:e.searchKeywords,name:"search-results",onFocus:()=>f({type:n.FocusInputSearch}),onChange:e=>{O(e.target.value)},onKeyDown:j}))):l.createElement(c.I.Wrapper,{styles:L,className:u?"hide-specialty-selection":""},l.createElement(c.I,Object.assign({icon:l.createElement(w.Z,null),size:"lg",placeholder:x,styles:k,name:"search-results",autoComplete:"off",value:e.searchKeywords,onChange:e=>{O(e.target.value)},onFocus:()=>f({type:n.FocusInputSearch}),onKeyDown:j},C,{rightSection:u?l.createElement(l.Fragment,null):l.createElement(SearchSpecialty,{state:e,isMobile:a,dispatch:f,debouncedFetchSearchResults:r,onSpecialtyClick:R})})))),"search"===e.focused&&l.createElement($,null,l.createElement(SearchResult,{type:t,state:e,results:(null===(v=e.searchResults)||void 0===v?void 0:v[t])||[],location:e.selectedLocation.name,dispatch:f,isLoading:i,typeInformation:s,clientSlug:p}))))},Z=E.Z.div` position: relative; ${C.M.mbDown} { width: 100%; display: flex; flex-direction: column; gap: 12px; } `,V=E.Z.div` position: absolute; top: calc(100% + 2px); width: 100%; border-radius: 4px; background: ${S.r.colors.white}; box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1); z-index: 10; ${C.M.mbDown} { width: calc(100% + 64px); left: -32px; } `,G=E.Z.li` position: relative; cursor: pointer; padding: 12px 18px; display: flex; align-items: center; gap: 14px; overflow: hidden; ${({isSelected:e})=>e&&` &::after { content: ${g.i}; top: 50%; right: 18px; position: absolute; transform: translateY(-50%); } `} & + li::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background-color: ${S.r.colors.neutral100}; } &:not([data-is-denied='true']):hover { background-color: ${S.r.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; } `,H=(0,E.Z)(g.P)` width: 12px; height: 18px; flex: 0 0 12px; `,SearchLocation=({state:e,isMobile:t,debouncedFetchCitiesByKeyword:a,selectedLocation:i,trackingAttributes:o,onLocationClick:s,dispatch:r})=>{let{t:d,locale:u}=(0,b.u)(),p=(0,l.useRef)(null),h=(0,l.useMemo)(()=>o?{"data-event-category":o.dataEventCategory,"data-event-action":o.dataEventAction,"data-event-label":o.dataEventLabel}:{},[o]),g=(0,l.useCallback)(function(t){r({type:n.ChangeInputLocation,payload:t}),t.trim().length>M[e.locale]?a(t.trim()):(a.cancel(),r({type:n.DisplayInitialCities}))},[a,r]);return(0,m.a)(p,()=>{r({type:n.ClickOutsideInputLocation})}),l.createElement(Z,{ref:p},l.createElement(c.I.Wrapper,null,l.createElement(c.I,Object.assign({size:t?"md":"lg",placeholder:"Search location",value:e.searchLocationKeywords,onFocus:()=>r({type:n.FocusInputLocation}),onChange:e=>{g(e.target.value)}},h))),"location"===e.focused&&l.createElement(V,null,l.createElement(G,{key:"all-location",role:"button",tabIndex:0,onClick:()=>{var e;s&&s({name:d("booking.searchBar.allLocations"),id:v.I,slug:null===(e=v.L[u])||void 0===e?void 0:e.ALL})}},l.createElement(H,{color:S.r.colors.neutral400}),l.createElement(L.T,{size:"md"},d("booking.searchBar.allLocations"))),e.cities.map(e=>l.createElement(G,{key:e.id,onClick:t=>{t.nativeEvent.stopImmediatePropagation(),s&&s(e)},role:"button",tabIndex:0,"aria-label":`Select ${e.name} as location`,isSelected:(null==i?void 0:i.id)===e.id},l.createElement(H,{color:S.r.colors.neutral400}),l.createElement(L.T,{size:"md"},e.name)))))},q=E.Z.div` display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 20px; ${C.M.mbDown} { margin-top: 12px; } `,U=E.Z.div` display: flex; align-items: center; border-radius: 8px; border: 1px solid ${S.r.colors.neutral100}; background: ${S.r.colors.white}; padding: 8px 12px 8px 8px; flex: 0 0 calc(33.3% - 13px); gap: 12px; cursor: pointer; &:hover { background: ${S.r.colors.blue50}; } ${C.M.tdDown} { flex: 0 0 calc(50% - 10px); } ${C.M.mbDown} { flex: 0 0 100%; border: none; } .image-item { display: flex; align-items: center; width: 40px; height: 40px; img { width: 100%; object-fit: cover; } } .infor { flex: 1; .title { color: ${S.r.colors.gray800}; font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; } .description { color: ${S.r.colors.gray600}; font-size: 12px; font-weight: 400; line-height: 18px; } } `,Y=(0,E.Z)(d.i)` margin: 24px 0 !important; `,Q=E.Z.div` display: flex; justify-content: center; margin-top: 24px; .show-more { border-radius: 4px; border: 1px solid ${S.r.colors.neutral200}; padding: 12px 16px; cursor: pointer; display: inline-block; color: ${S.r.colors.gray800}; font-size: 16px; font-weight: 600; line-height: 24px; ${C.M.mbDown} { width: 100%; text-align: center; } } `,SearchResultSpecialties=({state:e,isMobile:t,specialties:a,isLoading:i,dispatch:o})=>{let{t:s,locale:c}=(0,b.u)(),{selectedLocation:d}=e,u=(0,l.useMemo)(()=>v.L[c],[c]),handleOnClick=e=>{let t="";e===v.S?(t=`/${d.slug}/${u.HOSPITAL}/${v.C.GSK}/`,o({type:n.ClickOutsideInputSearchSpecialty})):t=`/${d.slug}/${u.DOCTOR}/${e}`,o({type:n.NavigateTo,payload:t})},p=(0,l.useMemo)(()=>a.length>=9||e.searchKeywords.trim().length<=M[e.locale],[e.searchKeywords,a]);return l.createElement(l.Fragment,null,!t&&l.createElement(Y,{color:"#E4E8EC"}),l.createElement(q,null,a.length>0&&!i&&l.createElement(l.Fragment,null,a.map((e,t)=>t>=9?l.createElement(l.Fragment,null):l.createElement(U,{key:e.id,onClick:()=>handleOnClick(e.slug)},l.createElement("div",{className:"image-item"},l.createElement("img",{src:e.thumbnail,alt:e.name})),l.createElement("div",{className:"infor"},l.createElement("div",{className:"title"},e.name))))),0===a.length&&!i&&l.createElement(L.T,{size:"sm",color:S.r.colors.gray400},s("booking.searchBar.noResults")),i&&Array(6).fill(void 0).map((e,t)=>l.createElement(U,{key:"loading"+t},l.createElement("div",{className:"image-item"},l.createElement(r.O,{height:40,animate:!0})),l.createElement("div",{className:"infor"},l.createElement("div",{className:"title"},l.createElement(r.O,{height:20,radius:"sm",animate:!0})))))),p&&l.createElement(Q,null,l.createElement("div",{className:"show-more",onClick:()=>{let e=`/${u.SPECIALTIES}`;o({type:n.NavigateTo,payload:e})}},s("home.seeAll"))))},W=E.Z.div` display: flex; gap: 5px; margin-top: 16px; flex-wrap: wrap; `,X=E.Z.div` color: ${S.r.colors.gray600}; font-size: 14px; font-weight: 600; line-height: 22px; padding: 4px 12px; background: ${S.r.colors.white}; border-radius: 32px; cursor: pointer; border: 1px solid ${S.r.colors.white}; margin-bottom: 5px; border-color: ${S.r.colors.neutral100}; background: #f7f9fc; &.view-all { border-radius: 32px; border-color: ${S.r.colors.blue50}; background: ${S.r.colors.blue50}; color: ${S.r.colors.blue600}; &:hover { border-color: ${S.r.colors.blue50}; background: ${S.r.colors.blue50}; color: ${S.r.colors.blue600}; } } &:hover { border-color: ${S.r.colors.neutral100}; background: #f7f9fc; } `,J=E.Z.div` color: ${S.r.colors.gray600}; font-size: 14px; font-weight: 600; line-height: 22px; padding: 4px 0; background: ${S.r.colors.white}; border-radius: 32px; border: 1px solid ${S.r.colors.white}; margin-bottom: 5px; margin-right: 7px; `,SearchTag=({state:e,type:t,typeInformation:a,dispatch:i})=>{let{t:o}=(0,b.u)(),{selectedLocation:s}=e,r=(0,l.useMemo)(()=>a[t].slug,[a,t]),handleClickKeyword=e=>{e.url&&(window.location.href=e.url)};return l.createElement(W,null,l.createElement(J,null,o("booking.searchBar.popularKey")),e.popularKeys.map(e=>l.createElement(X,{key:e.id,onClick:()=>handleClickKeyword(e)},e.keyword)),l.createElement(X,{className:"view-all",onClick:()=>{let e=`/${s.slug}/${r}`;e&&i({type:n.NavigateTo,payload:e})}},o("booking.searchBar.viewAll")))},ee=E.Z.div` background: rgba(255, 255, 255, 0.64); backdrop-filter: blur(12px); border-bottom: 1px solid ${S.r.colors.neutral100}; `,et=(0,E.Z)(x.C)` padding: 0 16px; `,TabSearch=({currentTab:e,hideTabBookingSearch:t=[],hideSpecialtyTab:a,isMobile:i,setCurrentTab:o})=>{let{t:n}=(0,b.u)(),s=(0,l.useMemo)(()=>({root:{overflowY:i?"hidden":"initial",overflowX:i?"auto":"initial"},tabsList:{background:"rgba(255, 255, 255, 0)",borderBottom:"none",flexWrap:"nowrap",".mantine-Tabs-tab":{"&:last-child":{"&:after":{display:"none"}}}},tab:{padding:i?"12px 16px 12px 16px":"15px 40px 15px 40px",borderTop:"2px solid transparent",borderBottom:"none",margin:0,borderRadius:0,position:"relative",width:"auto",'&[data-active="true"]':{borderColor:"#2d87f3",backgroundColor:"#ffffff","&:after":{display:"none"},"&:before":{content:'""',width:"100%",height:"1px",position:"absolute",backgroundColor:"#ffffff",bottom:"-1px"}},"&:hover":{borderColor:"#2d87f3",backgroundColor:"#ffffff","&:before":{content:'""',width:"100%",height:"1px",position:"absolute",backgroundColor:"#ffffff",bottom:"-1px"}},"&:after":{content:'""',width:"1px",height:"24px",backgroundColor:"#E4E8EC",position:"absolute",right:"-1px"}},tabLabel:{color:"#595959",fontSize:i?"14px":"16px",fontWeight:600,lineHeight:i?"22px":"24px"}}),[i]),r=(0,l.useMemo)(()=>[{value:"hospital",label:n("booking.searchPopup.hospitals")},{value:"doctor",label:n("booking.searchPopup.doctors")},{value:"service",label:n("booking.searchPopup.services")},...a?[]:[{value:"specialty",label:n("booking.searchPopup.specialties")}]],[a]),c=(0,l.useMemo)(()=>r.filter(e=>!t.includes(e.value))||[],[t,r]);return l.createElement(ee,{className:"booking-search-tab"},l.createElement(et,null,l.createElement(u.m,{value:e,onTabChange:e=>{o(e)},styles:s},l.createElement(u.m.List,null,c.map(e=>l.createElement(u.m.Tab,{value:e.value,key:e.value},e.label))))))};(o=s||(s={})).doctor="doctor",o.service="hospital_service",o.hospital="hospital_branch";let ignoreCacarSpecialty=e=>e.filter(e=>"string"==typeof e?"cacar-api"!==e:(null==e?void 0:e.id)!==232),BookingSearchBarV2=({isMobile:e,careApiDomain:t,geoLocationPermission:a,geoLocationCoordinates:i,initialSelectedCity:o,initialSearchValue:r="",initTypeSearch:c="hospital",initSpecialty:d,careFrontDomain:u="/care",isDebug:y=!1,gaTrackingSearchBar:E,gaTrackingLocationSearch:S,autoCompleteDisabled:C=!1,inputSearchPlaceholder:x="",hideTabBookingSearch:w=[],hideSpecialtySelection:L=!1,hideSpecialtyTab:k=!1,hidePopularSearchKeys:P=!1,clientSlug:$="",routerPush:F,onGeoLocationPermissionChange:_,onChangeLocation:N})=>{let{locale:B,t:D}=(0,b.u)(),z=(0,l.useRef)(null),K=(0,l.useRef)(null),[Z,V]=(0,l.useState)(c),{geoLocationPermission:G,geoLocationCoordinates:H}=(0,g.u)(),[q,U]=(0,l.useReducer)(reducer,A,t=>Object.assign(Object.assign({},t),{isDebug:y,isMobile:e,geoLocationPermission:a||G||"unset",geoLocationCoordinates:i||H||null,searchKeywords:r,initialSelectedCity:o||null,selectedLocation:o||t.selectedLocation||null,searchLocationKeywords:(null==o?void 0:o.name)||t.searchLocationKeywords,autoCompleteDisabled:C,inputSearchPlaceholder:x,locale:B})),{navigateTo:Y,focusedSpecialty:Q,searchKeywords:W,geoLocationPermission:X,selectedLocation:J,selectedSpecialty:ee,initialSelectedCity:et,searchResults:ea,isLoadingSearchResults:ei}=q,{fetchCitiesByLocation:eo,fetchCitiesByKeyword:en,fetchSearchResults:es,fetchAllSpecialties:el,fetchPopularKeys:er}=function({dispatch:e,careApiDomain:t,locale:a="vi-VN",client:i=""}){let o=(0,l.useCallback)(function(i,o={}){let s=`${t}${i}`;return e({type:n.FetchCitiesStart}),fetch((0,g.h)(s,o,a),{method:"GET"}).then(e=>e.json()).then(e=>1===e._status&&e._data?null==e?void 0:e._data:(console.log("error loading cities",e),Promise.reject(e))).finally(()=>e({type:n.FetchCitiesFinish}))},[a]),r=(0,l.useCallback)(function({coordinates:t}){let s={},l={};t&&(s={lat:t.lat,lng:t.lng}),"ms-MY"===a&&(l.noPaging=1);let r=[o(I.P.GET_CITY_BY_IP,Object.assign(Object.assign(Object.assign({},s),l),{client:v.C.MSD===i?"":i}))];return"zh-TW"===a&&r.push(o(I.P.GET_CITIES_LIST,{noPaging:1,client:v.C.MSD===i?"":i})),Promise.all(r).then(([t,a])=>{let i=Object.assign({},t);if(a){let e=i.cities.map(e=>e.id);i.cities=i.cities.concat(a.cities.filter(t=>!e.includes(t.id)))}e({type:n.FetchCitiesByGeoIpComplete,payload:i})}).catch(e=>console.error("error loading cities by location",e))},[a,t,e]),c=(0,l.useCallback)(function(t){return o(I.P.GET_CITIES_LIST,{keyword:t,client:i}).then(t=>{e({type:n.FetchCitiesByKeywordComplete,payload:t.cities})}).catch(e=>console.error("error loading cities by keyword",e))},[a,t,e]),d=(0,l.useCallback)(function(o,s,l,r,c){let d="specialty"===l?`${t}${I.P.GET_SEARCH_SPECIALTY}`:`${t}${I.P.GET_SEARCH_V2}`;e({type:n.FetchSearchResultsStart});let{selectedLocation:u,geoLocationCoordinates:p,selectedSpecialty:h}=s,m="";if(!u){e({type:n.FetchSearchResultsFinish});return}m=u.id===v.I?"":u.id;let b=(null==p?void 0:p.lat)||"",y=(null==p?void 0:p.lng)||"",f=(null==h?void 0:h.id)>0?null==h?void 0:h.id:"",E=o.trim().length>M[a]?o.trim():"";return fetch((0,g.h)(d,{domain:t,searchType:l||"global",keyword:E,city:m===v.a?"":m,lat:b,lng:y,specialty_id:f,client_slug:v.C.MSD===r?"":r,msd:v.C.MSD===i?1:""},a),{method:"GET",headers:{accept:"version=2.0.0.0"}}).then(e=>e.json()).then(e=>1===e._status&&e._data?null==e?void 0:e._data:Promise.reject(e)).then(t=>{let a=[];"specialty"!==l&&(a="doctor"===l?t.searches.map(e=>Object.assign(Object.assign({},e),{specialties:ignoreCacarSpecialty((null==e?void 0:e.specialties)||[])})):t.searches),"specialty"===l&&(a=E?ignoreCacarSpecialty((null==t?void 0:t.specialties)||[]):ignoreCacarSpecialty((null==t?void 0:t.default)||[])),e({type:n.FetchSearchResultsComplete,payload:{key:l,searches:a||[]}}),c&&e({type:n.UpdateInitialSearchResults,payload:{key:l,searches:a||[]}})}).catch(e=>{console.log("error loading search results",{url:d,error:e})}).finally(()=>e({type:n.FetchSearchResultsFinish}))},[a,t,e]),u=(0,l.useCallback)(function(){let o=`${t}${I.P.GET_SEARCH_SPECIALTY}`;return fetch((0,g.h)(o,{domain:t,searchType:"",msd:v.C.MSD===i?1:""},a),{method:"GET",headers:{accept:"version=2.0.0.0"}}).then(e=>e.json()).then(e=>1===e._status&&e._data?null==e?void 0:e._data:Promise.reject(e)).then(t=>{e({type:n.FetchAllSpecialties,payload:ignoreCacarSpecialty(t.specialties||[])})}).catch(e=>{console.log("error loading search results",{url:o,error:e})})},[a,t,e]),p=(0,l.useCallback)(function(i){let o=`${t}${I.P.GET_SEARCH_POPULAR_KEY}`;return fetch((0,g.h)(o,{domain:t,searchType:s[i],sort_by:"display_order",sort_order:"asc"},a)).then(e=>e.json()).then(e=>1===e._status&&e._data?null==e?void 0:e._data:Promise.reject(e)).then(t=>{e({type:n.FetchPopularKeys,payload:t.popular_searches||[]})}).catch(e=>{console.log("error loading search results",{url:o,error:e})})},[a,t,e]);return{fetchCitiesByLocation:r,fetchCitiesByKeyword:c,fetchSearchResults:d,fetchAllSpecialties:u,fetchPopularKeys:p}}({dispatch:U,locale:B,careApiDomain:t,client:$}),ec=(0,l.useMemo)(()=>v.L[B],[B]),ed=(0,l.useMemo)(()=>Object.assign({doctor:{name:D("booking.searchPopup.doctors"),icon:l.createElement(DoctorIcon,null),slug:ec.DOCTOR},service:{name:D("booking.searchPopup.services"),icon:l.createElement(ServiceIcon,null),slug:ec.SERVICE},hospital:{name:D("booking.searchPopup.hospitals"),icon:l.createElement(HospitalIcon,null),slug:ec.HOSPITAL}},!k&&{specialty:{name:D("booking.searchPopup.specialties"),icon:l.createElement(SpecialtyIcon,null),slug:ec.SPECIALTIES}}),[Z]),eu=(0,l.useMemo)(()=>f()(en,400),[en]),ep=(0,l.useMemo)(()=>f()(es,400),[es]),eh=(0,l.useCallback)(function(e){U({type:n.SelectLocation,payload:e}),focusSearchInput(),N&&N(e)},[D,U]);function focusSearchInput(){var e;z.current&&(null===(e=z.current.querySelector('input[name="search-results"]'))||void 0===e||e.focus())}function onClickSearchByKeyword(){let e="",{slug:t}=ed[Z],a="",i=v.M[B][$];("doctor"===Z||"hospital"===Z)&&q.selectedSpecialty.id>0&&(a=`&specialtyId=${q.selectedSpecialty.id}`),e="specialty"===Z?`/${t}`:`/${J.slug}/${t}`,i&&(e+=`/${i}`),(e+=`?q=${W}${a}`)&&U({type:n.NavigateTo,payload:e})}return(0,m.a)(K,()=>{U({type:n.ClickOutsideInputSearchSpecialty})}),(0,l.useEffect)(()=>{var t;"denied"===X||et||U({type:n.SelectLocation,payload:{name:D("booking.searchBar.allLocations"),id:v.I,slug:null===(t=v.L[B])||void 0===t?void 0:t.ALL}}),_&&_(X,q.geoLocationCoordinates),e&&"granted"===X&&J&&U({type:n.FocusInputSearch}),eo({coordinates:q.geoLocationCoordinates})},[X]),(0,l.useEffect)(()=>{let e=d||{name:D("booking.searchBar.allSpecialties"),id:-1,thumbnail:"",total_doctor:0,slug:ec.SPECIALTIES};q.selectedSpecialty||U({type:n.SelectSpecialty,payload:e})},[d,q.selectedSpecialty]),(0,l.useEffect)(()=>{el()},[]),(0,l.useEffect)(()=>{er(Z)},[Z]),(0,l.useEffect)(()=>{Y&&(F?F(Y):window.location.href=`${u}${Y}`)},[Y]),(0,l.useEffect)(()=>{es(q.searchKeywords,q,Z,$,!0)},[J,ee,Z]),l.createElement(O,{ref:z},l.createElement(TabSearch,{currentTab:Z,setCurrentTab:V,isMobile:e,hideTabBookingSearch:w,hideSpecialtyTab:k}),l.createElement(R,{className:"booking-search-container"},l.createElement(j,null,l.createElement(T,{className:"booking-search-content"},l.createElement("div",{ref:K},l.createElement(p.k,{gap:"12px",justify:"space-between",align:"center",direction:e?"column":"row",className:"flex-search-input"},"specialty"!==Z&&l.createElement(SearchLocation,{state:q,isMobile:e,dispatch:U,debouncedFetchCitiesByKeyword:eu,selectedLocation:J,onLocationClick:eh,trackingAttributes:S}),l.createElement(SearchInputs,{type:Z,isMobile:e,state:q,dispatch:U,debouncedFetchSearchResults:ep,initalSearchValue:r,focusSearchInput:focusSearchInput,onEnterSearch:onClickSearchByKeyword,typeInformation:ed,trackingAttributes:E,isLoading:ei,hideSpecialtySelection:L||k,clientSlug:$}),l.createElement(h.z,{size:e?"md":"lg",color:"#2D87F3",fullWidth:e,variant:"filled",onClick:onClickSearchByKeyword,styles:{root:{height:e?"40px":"48px"}}},D("booking.searchBar.searchButton"))),!P&&"specialty"!==Z&&q.popularKeys.length>0&&l.createElement(SearchTag,{type:Z,state:q,typeInformation:ed,dispatch:U}),"specialty"===Z&&"search"===Q&&l.createElement(SearchResultSpecialties,{state:q,isMobile:e,dispatch:U,specialties:(null==ea?void 0:ea.specialty)||[],isLoading:ei}))))))}}}]);