https://mywheels.nl/_next/static/chunks/3928-4c2a01ab628fc316.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3928],{73928:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return z}});var n=a(91674),o=a(84851),r=a.n(o);a(60808);var l=a(39615),c=a(50122),i=a.n(c),s=a(86655),p=a(99131),d=a(53086);let _=e=>{let t=new Date(e),a=t.getFullYear(),n=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getDate()).padStart(2,"0"),r=String(t.getHours()).padStart(2,"0"),l=String(t.getMinutes()).padStart(2,"0");return"".concat(a,"-").concat(n,"-").concat(o," ").concat(r,":").concat(l)},u=Date.now(),m={jsonrpc:"2.0",id:1717154606184.339,method:"search.map",params:{filter:{onlyFavorites:!1,onlyAvailable:!1},timeFrame:{startDate:_(u),endDate:_(u+288e5),adjusted:!1,namedPrediction:"today"},locationPoint:{latitudeMin:48,latitudeMax:56,longitudeMin:1,longitudeMax:9}}},C=()=>d.Z.post("https://prod-api.mywheels.nl/api/",{...m}),h=(e,t)=>d.Z.get("".concat("https://api.mapbox.com/geocoding/v5/mapbox.places","/").concat(e,".json?access_token=").concat(t,"&country=NL"));var v=a(75453),g=a.n(v),f=a(9343),x=a(63768),y=a(54603),j=a(39524),b=a(5854),w=a(40331),S=a(78618),M=a(27454),N=a(52326),k=a(22981);function A(e){var t;let{carName:a,carLocation:o,carType:r,price:l,CTA:c,disclaimer:i,function:p,hasCustomPricing:d}=e,_=(0,y.usePathname)(),u=(null==_?void 0:_.split("/")[1])==="en"?"en":"nl",m=(0,y.useSearchParams)(),C=null!==(t=null==m?void 0:m.get("client"))&&void 0!==t?t:"",h=null==a?void 0:a.toLowerCase().replace("\xeb","e").replace(/\s/g,"-"),[v,A]=(0,s.useState)(),[P,D]=(0,s.use

1State)();return(0,s.useEffect)(()=>{if(!l)return;let e=JSON.parse(l),t=e.kilometerRate,a=e.hourRate,n="zakelijk"===C?d?1:.826:"zzp"===C?d?1:.75*.826:d?1:.75;A(t*n),D(a*n)},[l,C,d]),(0,n.jsxs)("div",{className:g().mapCard,children:[(0,n.jsxs)("div",{className:g().mapCard__top,children:[(0,n.jsx)("span",{className:g().mapCard__span}),(0,n.jsx)(S.default,{className:g().mapCard__media,src:"/images/cars/".concat(h,"/default.png"),alt:w.a[u].mapComponent.imageAlt,style:{width:"180px",height:"auto"},width:180,height:180,unoptimized:!0}),(0,n.jsx)(N.Z,{className:g().mapCard__button,"aria-label":"Close popper",id:"basic-button",onClick:()=>{null==p||p()},sx:{border:"2px solid var(--primary-mw-lt-grey, #EDF2F3)"},children:(0,n.jsx)(M.Z,{className:g().mapCard__button__icon,sx:{fill:"var(--primary-mw-black, #212529)"}})})]}),(0,n.jsxs)("div",{className:g().mapCard__content,children:[(0,n.jsxs)("div",{className:g().mapCard__content__carDetails,children:[(0,n.jsx)("h3",{className:g().name,children:a}),(0,n.jsx)("p",{className:g().location,children:o})]}),"elektrisch"===r&&(0,n.jsxs)("span",{className:g().mapCard__content__carType__electric,children:[(0,n.jsx)(j.Z,{})," ","nl"===u?r:"electric"]}),"benzine"===r&&(0,n.jsxs)("span",{className:g().mapCard__content__carType__gas,children:[(0,n.jsx)(b.Z,{})," ","nl"===u?r:"gasoline"]}),(0,n.jsxs)("div",{className:g().mapCard__content__pricingwrapper,children:[(0,n.jsx)("span",{children:w.a[u].mapComponent.startingFrom}),(0,n.jsxs)("div",{className:g().mapCard__content__pricing,children:[P&&(0,n.jsxs)("span",{className:g().mapCard__content__pricing__amount,children:[(0,n.jsx)("span",{className:g().hour__price,children:(0,k.W)(P)}),(0,n.jsxs)("span",{children:[" /",w.a[u].mapComponent.hour]})]}),(0,n.jsx)("span",{className:g().mapCard__content__pricing__divider,children:"|"}),v&&(0,n.jsxs)("span",{className:g().mapCard__content__pricing__amount,children:[(0,k.W)(v),(0,n.jsx)("span",{children:" /km"})]})]})]}),(0,n.jsx)("div",{className:g().mapCard__content__CTA,children:(0,x.U)(c)}),(0,n.jsx)("div",{className:g().mapCard__content__disclaimer,children:(0,f.K)(i)})]})]})}var P=a(57161),D=a(85142),T=a(99915),B=a(25606),E=a(17015),F=a(64645);async function Z(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:500;try{return await e()}catch(n){if(0===t)throw n;return await new Promise(e=>setTimeout(e,a)),Z(e,t-1,2*a)}}let R=(0,T.default)(()=>Promise.all([a.e(6516),a.e(9881),a.e(2597)]).then(a.bind(a,52597)),{loadableGenerated:{webpack:()=>[52597]},ssr:!1});function z(e){var t;let{title:a,initialZoom:o=8,CTA:c,disclaimer:d,redirectOnSearch:_,SSR_CTX:u,searchParams:m,locale:v,base:g,subscription:f}=e,x=(0,s.useRef)(null),[j,b]=(0,s.useState)(""),[w,S]=(0,s.useState)(0),M=(0,s.useRef)(),[N,k]=(0,s.useState)(!1),{width:T}=(0,l.Z)(),[z,L]=(0,s.useState)(0),[O,W]=(0,s.useState)(),[H,I]=(0,s.useState)(null),[K,U]=(0,s.useState)(""),[q,G]=(0,s.useState)(null),[X,J]=(0,s.useState)(),[Q,V]=(0,s.useState)({type:"FeatureCollection",features:[]}),Y=(0,y.usePathname)(),[$,ee]=(0,s.useState)(!0),{mapRef:et,isMapLoaded:ea}=function(e){let{containerRef:t,accessToken:a,initialCenter:n=[5.118906,52.091908],initialZoom:o=12,geojsonData:l}

1=e,c=(0,s.useRef)(),[i,p]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{let e=t.current;if(!e||!(e.clientWidth>0&&e.clientHeight>0)||c.current)return;r().accessToken=a;let l=new(r()).Map({container:e,style:"mapbox://styles/mywheelscode/ckbw705ad0u7q1ips16o3pvpf",center:n,zoom:o,cooperativeGestures:!0,minZoom:6.5,maxZoom:18,bearing:0,pitch:0,minPitch:0,maxPitch:0,pitchWithRotate:!0,touchPitch:!1,dragRotate:!1,attributionControl:!1});c.current=l,l.on("load",()=>{p(!0)})},[t,a,o,n]),(0,s.useEffect)(()=>{let e=c.current;if(!e||!i||!l)return;let t=e.getSource("cars");if(t){t.setData(l);return}e.addSource("cars",{type:"geojson",data:l,cluster:!0,clusterMaxZoom:16,clusterRadius:40,clusterMinPoints:3}),e.addLayer({id:"clusters",type:"circle",source:"cars",filter:["has","point_count"],paint:{"circle-color":"#32AF4B","circle-radius":["step",["get","point_count"],20,100,30,750,40],"circle-stroke-width":3,"circle-stroke-color":"#ffffff"}}),e.addLayer({id:"cluster-count",type:"symbol",source:"cars",filter:["has","point_count"],layout:{"text-field":"{point_count_abbreviated}","text-font":["DIN Offc Pro Medium","Arial Unicode MS Bold"],"text-size":["interpolate",["exponential",1.5],["get","point_count"],0,14,10,17,20,20],"text-allow-overlap":!1,"text-ignore-placement":!0,"icon-allow-overlap":!1,"icon-ignore-placement":!0},paint:{"text-color":"#FFFFFF"}}),e.loadImage("/images/carAvailable.png",(t,a)=>{if(t)throw t;a&&e.addImage("car_available",a)}),e.loadImage("/images/carSelected.png",(t,a)=>{if(t)throw t;a&&e.addImage("car_selected",a)}),e.addLayer({id:"unclustered_car_point",type:"symbol",source:"cars",filter:["!",["has","point_count"]],layout:{"symbol-placement":"point","icon-image":"car_available","icon-size":.55,"icon-allow-overlap":!0,"icon-ignore-placement":!0,"text-allow-overlap":!0,"text-ignore-placement":!0}})},[i,l]),{mapRef:c,isMapLoaded:i}}({containerRef:x,accessToken:p.O.MAPBOX_ACCESS_TOKEN,initialZoom:o||8,geojsonData:Q});(0,s.useEffect)(()=>{(async()=>{k(!0);try{let e=(await Z(()=>C(),3)).data.result.results.map(e=>{let{latitude:t,longitude:a,...n}=e.resource;return{type:"Feature",id:n.id,geometry:{type:"Point",coordinates:[parseFloat(a),parseFloat(t),0]},properties:n}});V({type:"FeatureCollection",features:e})}catch(e){}finally{k(!1)}})()},[]);let en=async(e,t)=>await h(e,t),eo=()=>{var e;null===(e=M.current)||void 0===e||e.trigger()};(0,s.useEffect)(()=>{if(!ea||!et.current)return;let e=et.current;M.current=new(r()).GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0,showUserHeading:!0}),e.addControl(M.current),e.on("click","clusters",t=>{var a;let n=e.queryRenderedFeatures(t.point,{layers:["clusters"]}),o=null===(a=n[0].properties)||void 0===a?void 0:a.cluster_id;e.getSource("cars").getClusterExpansionZoom(o,(t,a)=>{t||e.easeTo({center:n[0].geometry.coordinates,zoom:a})})}),e.on("click",t=>{let a=e.queryRenderedFeatures(t.point,{layers:["unclustered_car_point"]});if(a.length>0&&event){var n,o,r;let t=a[0],l=e.getBounds(),c=l.getNorth()-l.getSouth();e.easeTo({center:[t.geometry.coordinates[0],t.geometry.coordinates[1]-c/5]});let i=null==f?void 0:null===(n=f.data)||void 0===n?void 0:n.attributes;er(event);let s=null==i?void 0:null===(o=i.packages)||void 0===o?void 0:o.find(e=>{var a,n;return(null==e?void 0:null===(a=e.name)||void 0===a?void 0:a.toLowerCase())===(null===(n=t.properties)||void 0===n?void 0:n.category.toLowerCase())}),p=(null===(r=t.properties)||void 0===r?void 0:r.price)?JSON.parse(t.properties.price):{};J({...t.properties,hasCustomPricing:!!s,price:JSON.stringify({id:p.id,hourRate:(null==s?void 0:s.pricePerHour)?s.pricePerHour:p.hourRate,kilometerRate:(null==s?void 0:s.pricePerKm)?s.pricePerKm:p.kilometerRate,fuelPerKilometer:p.fuelPerKilometer,dayRateTotal:(null==s?void 0:s.pricePerDay)?s.pricePerDay:p.dayRateTotal})})}else e.setLayoutProperty("unclustered_car_point","icon-image","car_available"),G(null)}),e.on("click","unclustered_car_point",t=>{e.setLayoutProperty("unclustered_car_point","icon-image",["match",["get","id"],t.features[0].properties.id,"car_selected","car_available"])}),e.on("click","clusters",()=>{e.setLayoutProperty("unclustered_car_point","icon-image","car_available")}),e.on("mouseenter","unclustered_car_point",()=>{e.getCanvas().style.cursor="pointer"}),e.on("mouseleave","unclustered_car_point",()=>{e.getCanvas().style.cursor=""})},[ea,et,null==f?void 0:null===(t=f.data)||void 0===t?void 0:t.attributes]),(0,s.useEffect)(()=>{let e=et.current;T<P.xz?(L(200),e.dragPan.disable()):(L(290),e.dragPan.enable()),void 0===O&&W(T)},[O,et,T]),(0,s.useEffect)(()=>{let e=et.current;e&&e.getSource("cars")&&(e.getSource("cars").setData(Q),S(Q.features.length))},[Q,et]),(0,s.useEffect)(()=>{G(null)},[j]),(0,s.useEffect)(()=>{let e="";(null==m?void 0:m.location)&&(null==Y?void 0:Y.includes("auto-huren"))&&U(e=decodeURIComponent(String(m.location)).trim().split(/[\s_-]+/).filter(

1Boolean).map(e=>e[0].toUpperCase()+e.slice(1)).join(" ")),e&&en(e,p.O.MAPBOX_ACCESS_TOKEN).then(e=>{I(e.data.features[0].center)})},[null==m?void 0:m.location]),(0,s.useEffect)(()=>{ee(!1)},[]),(0,s.useEffect)(()=>{let e=et.current;H&&e&&requestAnimationFrame(()=>{e.flyTo({center:H,zoom:11,essential:!0}),new(r()).Marker({color:"#1b70de"}).setLngLat(H).addTo(e)})},[H,et]);let er=e=>{G(q?null:e.currentTarget)};$||addEventListener("keydown",e=>{"Enter"===e.key&&e.preventDefault()});let el=!!q;return(0,n.jsxs)("div",{id:"".concat(null==g?void 0:g.anchor),className:i().componentWrapper,children:[a&&K&&(0,n.jsx)("h2",{className:i().componentTitle,children:a.replace("%location%",K).replace("%amount%",String(w))}),!(null==a?void 0:a.includes("%location%"))&&!K&&(0,n.jsx)("h2",{className:i().componentTitle,children:null==a?void 0:a.replace("%amount%",String(w))}),(null==a?void 0:a.includes("%location%"))&&!K&&(0,n.jsx)("h2",{className:i().componentTitle,children:"en"===v?"Always a car nearby":"Altijd een deelauto in jouw buurt"}),(0,n.jsxs)("div",{className:i().componentBody,children:[(0,n.jsx)(R,{mapInstanceRef:et,locale:v,inputValue:j,setInputValue:b,redirectOnSearch:_}),(0,n.jsx)("div",{id:"map-container",ref:x,className:i().deelautoMap}),(0,n.jsxs)("div",{className:i().overlayContainer,children:[N&&(0,n.jsx)("div",{className:i().loadingOverlay,children:(0,n.jsx)("div",{className:i().spinner})}),(0,n.jsxs)("div",{className:i().controlsWrapper,children:[(0,n.jsx)("div",{className:i().geoControl,children:(0,n.jsx)("button",{className:i().controlButton,onClick:()=>eo(),"aria-label":"Geolocate",children:(0,n.jsx)(F.Z,{})})}),(0,n.jsxs)("div",{className:i().zoomControls,children:[(0,n.jsx)("button",{className:i().controlButton,onClick:()=>et.current.zoomIn(),"aria-label":"Zoom In",children:(0,n.jsx)(B.Z,{})}),(0,n.jsx)("button",{className:i().controlButton,onClick:()=>et.current.zoomOut(),"aria-label":"Zoom Out",children:(0,n.jsx)(E.Z,{})})]})]})]})]}),(0,n.jsx)("div",{className:i().popper,children:(0,n.jsx)(D.Z,{id:el?"simple-popover":void 0,open:el,anchorEl:q,modifiers:[{name:"offset",options:{offset:[0,z]}}],children:(0,n.jsx)(A,{SSR_CTX:u,carName:(null==X?void 0:X.brand)+" "+(null==X?void 0:X.model),carLocation:null==X?void 0:X.location,carType:null==X?void 0:X.fuelType,price:null==X?void 0:X.price,hasCustomPricing:null==X?void 0:X.hasCustomPricing,CTA:c,disclaimer:d,function:()=>{G(null)}})})})]})}},57161:function(e,t,a){"use strict";a.d(t,{Op:function(){return o},hp:function(){return r},xz:function(){return n}});let n=768,o=1200,r=1800},39615:function(e,t,a){"use strict";var n=a(86655);t.Z=()=>{let[e,t]=(0,n.useState)({width:void 0,height:void 0});return(0,n.useEffect)(()=>{function e(){t({width:window.innerWidth,height:window.innerHeight})}return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),e}},75453:function(e){e.exports={mapCard:"ComponentAtomMapCard_mapCard__SFAzS",mapCard__top:"ComponentAtomMapCard_mapCard__top__xNgKP",mapCard__span:"ComponentAtomMapCard_mapCard__span__Zj8Kl",mapCard__button:"ComponentAtomMapCard_mapCard__button__wBZPa",mapCard__content:"ComponentAtomMapCard_mapCard__content__wQxmg",mapCard__content__carDetails:"ComponentAtomMapCard_mapCard__content__carDetails__AWFW4",name:"ComponentAtomMapCard_name__8Q35e",location:"ComponentAtomMapCard_location__EEZpD",mapCard__content__carType__gas:"ComponentAtomMapCard_mapCard__content__carType__gas__ozVGZ",mapCard__content__carType__electric:"ComponentAtomMapCard_mapCard__content__carType__electric__vnxbU",mapCard__content__pricingwrapper:"ComponentAtomMapCard_mapCard__content__pricingwrapper__IXRQM",mapCard__content__pricing:"ComponentAtomMapCard_mapCard__content__pricing__pnLqs",mapCard__content__pricing__amount:"ComponentAtomMapCard_mapCard__content__pricing__amount__dp45w",mapCard__content__pricing__divider:"ComponentAtomMapCard_mapCard__content__pricing__divider__gFo_r",mapCard__content__CTA:"ComponentAtomMapCard_mapCard__content__CTA__dHbE1",mapCard__content__disclaimer:"ComponentAtomMapCard_mapCard__content__disclaimer__2Rd0O"}}

1,50122:function(e){e.exports={componentWrapper:"ComponentBlockDeelautoMap_componentWrapper__j1SAe",componentTitle:"ComponentBlockDeelautoMap_componentTitle__HF4h7",controlsWrapper:"ComponentBlockDeelautoMap_controlsWrapper__HwNCl",geoControl:"ComponentBlockDeelautoMap_geoControl__noXtH",zoomControls:"ComponentBlockDeelautoMap_zoomControls__hDf_J",controlButton:"ComponentBlockDeelautoMap_controlButton__6I_EH",overlayContainer:"ComponentBlockDeelautoMap_overlayContainer__Rem06",loadingOverlay:"ComponentBlockDeelautoMap_loadingOverlay__MQw9T",spinner:"ComponentBlockDeelautoMap_spinner__W4q_M",spin:"ComponentBlockDeelautoMap_spin__GFrZ2",componentBody:"ComponentBlockDeelautoMap_componentBody__4uNdv",componentSearchboxWrapper:"ComponentBlockDeelautoMap_componentSearchboxWrapper__LKyeZ",componentSearchbox:"ComponentBlockDeelautoMap_componentSearchbox__eDhWK",deelautoMap:"ComponentBlockDeelautoMap_deelautoMap__1l0Xi"}}}]);