https://www.transurban.com/etc.clientlibs/digitalcms/clientlibs/di…/js/RetailOutletFinder.2583d631.chunk.js

1"use strict";(self.webpackChunkui_frontend=self.webpackChunkui_frontend||[]).push([[1946],{86930:(e,t,s)=>{s.r(t),s.d(t,{default:()=>l});var n=s(47313),r=s(24499),a=s(82984),o=s(46417);const i=e=>{const t=e,{assetFilePath:s,eachBusinessTypeObj:r,handleStoreClick:a,outlet:i,index:l}=t,[c,u]=(0,n.useState)(!1);return(0,o.jsxs)("li",{className:"store",id:"store-".concat(l),children:[(0,o.jsxs)("a",{href:"#",onClick:()=>a(i,l),className:"fn_highlight-store store-highlight-link",children:[(0,o.jsx)("img",{src:s+"ico_"+(null===r||void 0===r?void 0:r.outletValue)+".png",alt:"store icon",className:"store-icon fn_highlight-store"}),(0,o.jsx)("div",{className:"title",children:i.businessName}),(0,o.jsxs)("div",{className:"address",children:[i.streetAddress,",",(0,o.jsx)("br",{})," ",i.suburb,", ",i.state," ",i.postcode]})]},l),(0,o.jsxs)("div",{className:"features-container",children:[(0,o.jsxs)("a",{href:"#store-".concat(l,"-ec"),className:"js-ec-link expandcollapse","aria-controls":"store-".concat(l,"-ec"),onClick:()=>{u(!c)},children:[t.seeAvlServices,(0,o.jsx)("div",{className:"ec"})]}),(0,o.jsx)("div",{className:"js-ec expandcollapse-content ".concat(c?"is-expanded animate-show":""),role:"region",tabIndex:-1,"aria-expanded":"false",style:c?{opacity:"1"}:{opacity:"0"},children:(0,o.jsxs)("ul",{className:"features",children:["yes"===i.account&&(0,o.jsx)("li",{children:t.accountTopupLabel}),"yes"===i.pass&&(0,o.jsx)("li",{children:t.buyPrepaidPass}),"yes"===i.toll&&(0,o.jsx)("li",{children:t.payTollInvoice})]})})]}),(0,o.jsxs)("a",{href:"https://maps.google.com?saddr=my+location&daddr=".concat(i.streetAddress,",").concat(i.suburb,",").concat(i.state,",").concat(i.postcode),target:"_blank",className:"btn btn--link","data-grunticon-embed":"true",children:[t.getDirections,(0,o.jsx)("span",{className:"icon icon--arrow-right","data-grunticon-embed":"true"})]})]})},l=e=>{const t=e,{assetFilePath:s,outlets:l,defaultMapCenter:u,apiKey:d,mapId:p,zoomLevel:h,businessTypes:m}=t,g=m[0].outletValue,[f,b]=(0,n.useState)([]),[x,w]=(0,n.useState)(!0),[v,y]=(0,n.useState)("list"),[j,N]=(0,n.useState)(g),[_,P]=(0,n.useState)(!0),k=(0,n.useRef)(null),T=(0,n.useRef)(null);let M=(0,n.useRef)(null),L=(0,n.useRef)([]);const I=(0,n.useRef)([]),[C,S]=(0,n.useState)([]),F=(0,n.useRef)(null),E=(0,n.useRef)(null),A=(0,n.useRef)(null),V=(0,n.useRef)(null);let B=[],R=[],Z=[],z=[],X=[];const O=[{textColor:"white",url:s+"clustSmall_"+m[1].outletValue+".png",height:50,width:50},{textColor:"white",url:s+"clustSmall_"+m[2].outletValue+".png",height:50,width:50},{textColor:"white",url:s+"clustLarge_"+m[3].outletValue+".png",height:50,width:50},{textColor:"white",url:s+"clustSmall_"+m[4].outletValue+".png",height:50,width:50}],D=(e,t,s,n)=>{s=s*Math.PI/180,n=n*Math.PI/180,e=e*Math.PI/180;let r=n-s,a=(t=t*Math.PI/180)-e,o=Math.pow(Math.sin(a/2),2)+Math.cos(e)*Math.cos(t)*Math.pow(Math.sin(r/2),2);return 6371*(2*Math.asin(Math.sqrt(o)))},U=()=>l.sort(((e,t)=>{let s=D(parseFloat(u.latPosition),e.latitude,parseFloat(u.lngPosition),e.longitude),n=D(parseFloat(u.latPosition),t.latitude,parseFloat(u.lngPosition),t.longitude);return s>n?1:s<n?-1:0})).filter(((e,t)=>t<10)),K=()=>{R.length>0&&(F.current=new a.XL({markers:R,map:M.current,renderer:new c(O[0],T.current,M.current)})),Z.length>0&&(E.current=new a.XL({markers:Z,map:M.current,renderer:new c(O[1],T.current,M.current)})),z.length>0&&(A.current=new a.XL({markers:z,map:M.current,renderer:new c(O[2],T.current,M.current)})),X.length>0&&(V.current=new a.XL({markers:X,map:M.current,renderer:new c(O[3],T.current,M.current)}))};(0,n.useEffect)((()=>{(()=>{let e=[],t=[],s=[],n=[],r=[],a=[];l.forEach((t=>{t.businessName.includes(C[0])||t.addressPrefix.includes(C[0])||t.streetAddress.includes(C[0])||t.markerAddress.includes(C[0])||t.suburb.includes(C[0])||t.state.includes(C[0])||t.postcode==C[0]?e.push(t):r.push(t)})),r.forEach((e=>{e.businessName.includes(C[1])||e.addressPrefix.includes(C[1])||e.streetAddress.includes(C[1])||e.markerAddress.includes(C[1])||e.suburb.includes(C[1])||e.state.includes(C[1])||e.postcode==C[1]?t.push(e):a.push(e)})),a.forEach((e=>{e.businessName.includes(C[2])||e.addressPrefix.includes(C[2])||e.streetAddress.includes(C[2])||e.markerAddress.includes(C[2])||e.suburb.includes(C[2])||e.state.includes(C[2])||e.postcode==C[2]?s.push(e):n.push(e)}));let o=[...e,...t,...s].filter(((e,t)=>t<10));b(o)})()}),[C]),(0,n.useEffect)((()=>{window.grunticon&&window.grunticon.embedIcons(window.grunticon.getIcons(window.grunticon.getCSS(window.grunticon.href))),window.outletFinderInitAnalytics&&window.outletFinderInitAnalytics(),(async()=>{new r.aN({apiKey:d,version:"weekly",libraries:["places"]}).load().then((async e=>{k.current=e;const{AdvancedMarkerElement:t}=await k.current.maps.importLibrary("marker");T.current=t,P(!1)}))})(),b(U())}),[]),(0,n.useEffect)((()=>

1{if(!1===_){const e={center:{lat:parseFloat(u.latPosition),lng:parseFloat(u.lngPosition)},zoom:h,zoomControl:!0,streetViewControl:!0,mapId:p};M.current=new google.maps.Map(document.getElementById("maps"),e);const t={fields:["formatted_address","geometry","name"],strictBounds:!1},s=document.getElementById("outlet-finder__inputs"),n=new google.maps.places.Autocomplete(s,t);n.bindTo("bounds",M.current),n.addListener("place_changed",(()=>{const e=n.getPlace(),t=e.formatted_address?e.formatted_address.split(" "):"";S(t),e.geometry&&e.geometry.location?e.geometry.viewport?(M.current.fitBounds(e.geometry.viewport),M.current.setZoom(12)):(M.current.setCenter(e.geometry.location),M.current.setZoom(17)):console.log("No details available for input: '"+e.name+"'")})),l.forEach((e=>{let t=q(e,M.current);t.setMap(M.current),"UP"===e.businessType?R.push(t):"Other"===e.businessType?Z.push(t):"FF"===e.businessType?z.push(t):"BP"===e.businessType?X.push(t):B.push(t)})),T.current&&K()}}),[_]),(0,n.useEffect)((()=>{if(M.current){if(W(),F.current.clearMarkers(),E.current.clearMarkers(),A.current.clearMarkers(),V.current.clearMarkers(),I.current=[],j!==g){l.filter((e=>e.businessType==j)).forEach((e=>{let t=q(e,M.current);t.setMap(M.current),"UP"===e.businessType?R.push(t):"Other"===e.businessType?Z.push(t):"FF"===e.businessType?z.push(t):"BP"===e.businessType?X.push(t):B.push(t)}))}else l.forEach((e=>{let t=q(e,M.current);t.setMap(M.current),"UP"===e.businessType?R.push(t):"Other"===e.businessType?Z.push(t):"FF"===e.businessType?z.push(t):"BP"===e.businessType?X.push(t):B.push(t)}));T.current&&K()}}),[f]);const W=()=>{L.current.forEach((e=>{e.setMap(null)})),L.current=[]},q=(e,t)=>{let n=m.find((t=>t.outletValue===e.businessType)),r={url:s+"ico_"+(null===n||void 0===n?void 0:n.outletValue)+".png",scaledSize:new google.maps.Size(35,35)},a=new google.maps.Marker({position:{lat:e.latitude,lng:e.longitude},map:t,title:e.businessName,icon:r}),o=new google.maps.InfoWindow({content:G(e),maxWidth:250,disableAutoPan:!0,ariaLabel:e.businessName});return I.current.push(o),L.current.push(a),a.addListener("click",(()=>{H(),o.open({anchor:a,map:t}),t.setZoom(18),void 0===t.getProjection()?t.addListener("projection_changed",(()=>{Q(t,a.getPosition(),0,-200)})):Q(t,a.getPosition(),0,-200)})),a},G=e=>{let s=e;var n="";"yes"==s.account&&(n+="<span>- "+t.accountTopupLabel+"</span><br>"),"yes"==s.pass&&(n+="<span>- "+t.buyPrepaidPass+"</span><br>"),"yes"==s.toll&&(n+="<span>- "+t.payTollInvoice+"</span><br>");var r='<div class="store">';return r+='<div class="title"><h3>'+s.businessName+"</h3></div>",r+="<p>"+s.streetAddress+s.suburb+s.state+s.postcode+"</p>",r+="<h4>Services Available</h4>",r+='<ul class="features"><li>'+n+"</li></ul>",r+="</div>"},H=()=>{I.current.forEach((e=>{e.close()}))},J=(e,t)=>{H(),y("map"),(e=>{let t=new google.maps.LatLng(parseFloat(e.latitude),parseFloat(e.longitude));M.current.setCenter(t),M.current.setZoom(18)})(e);let s=I.current.find((t=>t.ariaLabel===e.businessName)),n=L.current.findIndex((e=>s.ariaLabel===e.title));s.open({anchor:L.current[n],map:M.current}),void 0===M.current.getProjection()?M.current.addListener("projection_changed",(()=>{Q(M.current,L.current[n].getPosition(),0,-200)})):Q(M.current,L.current[n].getPosition(),0,-200)},Q=(e,t,s,n)=>{let r=e.getProjection().fromLatLngToPoint(t instanceof google.maps.LatLng?t:e.getCenter()),a=new google.maps.Point(("number"==typeof s?s:0)/Math.pow(2,e.getZoom())||0,("number"==typeof n?n:0)/Math.pow(2,e.getZoom())||0);e.setCenter(e.getProjection().fromPointToLatLng(new google.maps.Point(r.x-a.x,r.y+a.y)))},Y=e=>{y(e)};return setTimeout((()=>{window.grunticon&&window.grunticon.embedIcons(window.grunticon.getIcons(window.grunticon.getCSS(window.grunticon.href)))}),10),(0,o.jsx)("div",{className:"tu-retail-outlet-finder",children:(0,o.jsx)("div",{className:"module module--outlet-finder module--flat-top",children:(0,o.jsxs)("div",{className:"module__content l-padding",children:[(0,o.jsx)("div",{className:"outlet-finder fn_outlet-finder js-loading",children:(0,o.jsxs)("div",{className:"outlet-finder__inputs",children:[(0,o.jsx)("div",{className:"outlet-finder__inputs__location",children:(0,o.jsxs)("div",{className:"ctrl-holder storelocator-searchholder fn_outlet-finder-input-container",children:[(0,o.jsx)("label",{className:"vh",htmlFor:"",children:"Enter location to search for outlets"}),(0,o.jsx)("input",{name:"",id:"outlet-finder__inputs",className:"text",type:"text",placeholder:t.promptText?t.promptText:"Enter a location"})]})}),(0,o.jsx)("div",{className:"outlet-finder__inputs__type",children:(0,o.jsxs)("div",{className:"ctrl-holder",children:[(0,o.jsx)("label",{className:"vh is-empty",htmlFor:"",children:"\xa0"}),(0,o.jsxs)("span",{className:"simple-select full fn_business-type",children:[(0,o.jsx)("span",{className:"simple-label",children:"All Stores"}),(0,o.jsx)("select",{onChange:e=>{const{value:t}=e.target;if(t!=g){const e=l.filter(((e,s)=>e.businessType===t)).filter(((e,t)=>t<10));b(e)}else b(U());setTimeout((()=>{const e=M.current.getBounds(),t=[];L.current.forEach((s=>

1{e.contains(s.getPosition())&&t.push(s)})),w(!!t.length)}),10),N(t)},name:"",id:"",className:"full fn_business-type",children:m.map(((e,t)=>(0,o.jsx)("option",{value:e.outletValue,children:e.outletName},t)))})]})]})}),(0,o.jsx)("div",{className:"outlet-finder__inputs__cta",children:(0,o.jsx)("a",{href:"#",className:"btn btn--primary fn_outlet-finder-search-cta ",children:(0,o.jsx)("span",{children:t.searchButton})})})]})}),(0,o.jsxs)("div",{className:"storelocator-toggle-holder clearfix outlet-finder__toggle-holder",children:[(0,o.jsxs)("a",{href:"#",className:"store-view-toggle store-list-view ".concat("list"===v?"active":""),onClick:()=>Y("list"),children:[(0,o.jsx)("span",{className:"icon ".concat(t.listViewIcon),"data-grunticon-embed":"true"}),t.listViewLabel]}),(0,o.jsxs)("a",{href:"#",className:"store-view-toggle store-map-view ".concat("map"===v?"active":""),onClick:()=>Y("map"),children:[(0,o.jsx)("span",{className:"icon ".concat(t.mapViewIcon),"data-grunticon-embed":"true"}),t.mapViewLabel]})]}),(0,o.jsxs)("div",{className:"storelocator-holder clearfix",children:[(0,o.jsxs)("div",{className:"store-panel outlet-finder__list-view fn_outlet-finder-panel storelocator-panel",children:[!x&&(0,o.jsx)("div",{className:"no-stores-message",children:(0,o.jsx)("p",{children:t.nostoresMsg})}),(0,o.jsx)("ul",{className:"store-list storelocator-mobile-tab-content ".concat("list"===v?"active":""),children:f.map(((e,n)=>{let r=m.find((t=>t.outletValue===e.businessType));return(0,o.jsx)(i,{assetFilePath:s,seeAvlServices:t.seeAvlServices,accountTopupLabel:t.accountTopupLabel,buyPrepaidPass:t.buyPrepaidPass,payTollInvoice:t.payTollInvoice,getDirections:t.getDirections,eachBusinessTypeObj:r,handleStoreClick:J,outlet:e,index:n},e.businessName)}))}),(0,o.jsxs)("div",{className:"directions-panel",style:{display:"none"},children:[(0,o.jsxs)("form",{children:[(0,o.jsx)("input",{className:"directions-to"}),(0,o.jsx)("input",{type:"submit",value:"Find directions"}),(0,o.jsx)("a",{href:"#",className:"close-directions",children:"Close"})]}),(0,o.jsx)("div",{className:"rendered-directions"})]})]}),(0,o.jsx)("div",{className:"store-map outlet-finder__map-view fn_outlet-finder-map-canvas storelocator-mobile-tab-content ".concat("map"===v?"active":""),children:(0,o.jsx)("div",{className:"store_map__view",id:"maps"})}),(0,o.jsxs)("div",{className:"storelocator-loading outlet-finder__loading-container",children:[(0,o.jsx)("img",{src:t.loadingImgPath,alt:""}),"Loading"]})]})]})})})};class c{constructor(e,t,s){this.options=e,this.advanceMarker=t,this.map=s,this.render=this.render.bind(this)}render(e){let{position:t,count:s}=e;const n=document.createElement("div");n.className="marker--cluster",n.style.backgroundImage="url("+this.options.url+")",n.style.width=this.options.width+"px",n.style.height=this.options.height+"px";const r=document.createElement("div");return r.className="marker--cluster--count",r.style.color=this.options.textColor,r.textContent=String(s),n.appendChild(r),new this.advanceMarker({position:t,map:this.map,title:String(s),zIndex:Number(google.maps.Marker.MAX_ZINDEX)+s,content:n})}}}}]);