https://qoets.nl/_next/static/chunks/9716-94d0bf14f8c49f66.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9716],{19716:function(e,s,n){n.d(s,{D:function(){return M},useModalContext:function(){return z}});var a=n(57437),t=n(2265),l=n(16463),o=n(62418),r=n(36281),i=n(66633),m=n(71406),d=n(86697),c=n(43041),u=n(10600);let x=()=>{let[e,s]=t.useState(!1);return{isOpen:e,open:()=>s(!0),close:()=>s(!1)}},p=e=>{let{isOpen:s,onClose:n,title:t,content:l,children:o,buttons:r,className:i,overlayClassName:m}=e,x=r&&r.length>0;return(0,a.jsx)(d.ModalBase,{isOpen:s,onClose:n,className:i,overlayClassName:m,children:(0,a.jsxs)("div",{className:"flex flex-col gap-6",children:[t&&(0,a.jsx)("h2",{className:"text-xl font-medium",children:t}),l&&(0,a.jsx)("div",{className:"text-sm text-neutrals-700",children:"string"==typeof l?(0,a.jsx)("p",{children:l}):l}),o&&(0,a.jsx)("div",{children:o}),(0,a.jsx)("button",{type:"button",onClick:n,className:(0,u.LI)({variant:"secondary"}),children:"Sluiten"}),x&&(0,a.jsx)("div",{className:"flex flex-col gap-4 sm:flex-row sm:justify-end",children:r.map((e,s)=>{let n="primary"===e.variant||!e.variant&&s===r.length-1;return(0,a.jsx)("button",{type:"button",onClick:e.onClick,disabled:e.disabled,className:(0,c.cn)((0,u.LI)({variant:n?void 0:"secondary"}),e.className),children:e.label},s)})})]})})},h=()=>{let[e,s]=t.useState(!1);return{isOpen:e,open:()=>s(!0),close:()=>s(!1)}},b=e=>{let{isOpen:s,onClose:n,subject:l,carId:c}=e,[u,h]=t.useState({firstName:"",lastName:"",email:"",phoneNumber:"",message:"",recaptcha:""}),b=(0,r.uu)(),j=x(),{modalProps:f,setModalProps:v}=z(),g=()=>{h({firstName:"",lastName:"",email:"",phoneNumber:"",message:"",recaptcha:""}),n()},N=e=>s=>{h(n=>({...n,[e]:s.target.value}))};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d.ModalBase,{isOpen:s&&!j.isOpen,onClose:g,className:"max-w-2xl",children:(0,a.jsx)(m.$2,{onSubmit:e=>{if(e.preventDefault(),!u.recaptcha)return;let s=(0,i.q)(f.leaseData);b.mutate({firstName:u.firstName,lastName:u.lastName,email:u.email,phoneNumber:u.phoneNumber,message:u.message,recaptcha:u.recaptcha,title:l,carId:c,...s?{lease:s}:{}},{onSuccess:()=>{(f.leaseSummary||f.leaseData)&&v({...f,leaseSummary:void 0,leaseData:void 0}),j.open()}})},children:(0,a.jsxs)("div",{className:"flex flex-col gap-6",children:[(0,a.jsx)("h2",{className:"text-xl font-medium",children:"Neem contact op"}),(0,a.jsx)("p",{className:"text-sm text-neutrals-700",children:"Wanneer u onderstaande gegevens invult nemen wij binnen 60 minuten contact op."}),(0,a.jsxs)(m.LV,{direction:"horizontal",children:[(0,a.jsx)(m.II,{name:"firstName",label:"Voornaam",value:u.firstName,onChange:N("firstName")}),(0,a.jsx)(m.II,{name:"lastName",label:"Achternaam",value:u.lastName,onChange:N("lastName")})]}),(0,a.jsx)(m.II,{name:"email",type:"email",label:"E-mailadres",required:!0,value:u.email,onChange:N("email")}),(0,a.jsx)(m.II,{name:"phoneNumber",label:"Telefoonnummer",value:u.phoneNumber,onChange:N("phoneNumber")}),(0,a.jsx)(m.gx,{name:"message",label:"Bericht",rows:4,value:u.message,onChange:N("message")}),(0,a.jsx)(o.gN,{name:"recaptcha",children:(0,a.jsx)(m.v6,{onChange:e=>{h(s=>({...s,recaptcha:e||""}))},value:u.recaptcha})}),b.isError&&(0,a.jsx)("p",{className:"text-sm text-qoets-red-500",children:"Er is iets misgegaan. Probeer het opnieuw."}),(0,a.jsxs)("div",{className:"flex flex-col gap-4 sm:flex-row sm:justify-end",children:[(0,a.jsx)(o.k4,{asChild:!0,children:(0,a.jsx)("button",{type:"submit",disabled:!u.recaptcha||b.isPending,className:"w-full rounded-sm bg-qoets-red-500 px-6 py-3 text-sm font-medium text-white hover:bg-qoets-red-600 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto",children:b.isPending?"Verzenden...":"Versturen"})}),(0,a.jsx)("button",{type:"button",onClick:g,className:"hover:bg-neutrals-50 w-full rounded-sm border border-neutrals-200 bg-white px-6 py-3 text-sm font-medium text-black sm:w-auto",children:"Annuleren"})]})]})})}),(0,a.jsx)(p,{isOpen:j.isOpen,onClose:()=>{j.close(),g()},title:"Bedankt, we hebben je bericht ontvangen",content:"We nemen zo snel mogelijk contact met je op. Meestal is dat binnen 60 minuten tijdens onze openingstijden."})]})};var j=n(5242),f=n(63285);let v=()=>{let[e,s]=t.useState(!1);return{isOpen:e,open:()=>s(!0),close:()=>s(!1)}},g=e=>{let{isOpen:s,onClose:n,currentAppointment:l,proposalHash:i}=e,[d,c]=t.useState({newDate:(0,j.L9)(l),newTime:(0,j.NF)(l),message:""}),u=(0,r.dW)(),h=x(),b=()=>{c({newDate:(0,j.L9)(l),newTime:(0,j.NF)(l),message:""}),n()},v=e=>s=>{c(n=>({...n,[e]:s.target.value}))},g=(0,j.L9)(new Date().toISOString());return t.useEffect(()=>{let e=document.getElementById("newDate");e&&(e.min=g)},[g,s]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(f.eX,{isOpen:s&&!h.isOpen,onClose:b,className:"max-w-2xl",children:(0,a.jsx)(m.$2,{onSubmit:e=>{if(e.preventDefault(),!d.newDate||!d.newTime)return;let s=new Date("".concat(d.newDate,"T").concat(d.newTime,":00")).toISOString();u.mutate({formData:{newDate:s,message:d.message},hash:i},{onSuccess:()=>h.open()})},children:(0,a.jsxs)("div",{className:"flex flex-col gap-6",children:[(0,a.jsx)("h2",{className:"text-xl font-medium",children:"Maak een nieuwe afspraak"}),(0,a.jsxs)("p",{className:"text-sm text-neutrals-700",children:["Uw huidige afspraak staat op ",(0,j.p6)(l)," om"," ",(0,j.B2)(l)]}),(0,a.jsxs)(m.LV,{direction:"horizontal",children:[(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)(m.II,{name:"newDate",type:"date",label:"Nieuwe afspraak datum",value:d.newDate,onChange:v("newDate"),required:!0})}),(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)(m.II,{name:"newTime",type:"time",label:"Nieuwe afspraak tijd",value:d.newTime,onChange:v("newTime"),required:!0})})]}),(0,a.jsx)(m.gx,{name:"message",label:"Opmerkingen",rows:4,placeholder:"Optionele opmerkingen...",value:d.message,onChange:v("message")}),u.isError&&(0,a.jsx)("p",{className:"text-sm text-qoets-red-500",children:"Er is iets misgegaan. Probeer het opnieuw."}),(0,a.jsxs)("div",{className:"flex flex-col gap-4 sm:flex-row sm:justify-end",children:[(0,a.jsx)("button",{type:"button",onClick:b,className:"hover:bg-neutrals-50 w-full rounded-sm border border-neutrals-200 bg-white px-6 py-3 text-sm font-medium text-black sm:w-auto",children:"Annuleren"}),(0,a.jsx)(o.k4,{asChild:!0,children:(0,a.jsx)("button",{type:"submit",disabled:!d.newDate||!d.newTime||u.isPending,className:"w-full rounded-sm bg-qoets-red-500 px-6 py-3 text-sm font-medium text-white hover:bg-qoets-red-600 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto",children:u.isPending?"Verzenden...":"Versturen"})})]})]})})}),(0,a.jsx)(p,{isOpen:h.isOpen,onClose:()=>{h.close(),b()},title:"Bedankt, we hebben je afspraak ontvangen",content:"We hebben je nieuwe voorkeursdatum en -tijd voor het bespreken van het voorstel ontvangen. We nemen zo snel mogelijk contact met je op om de afspraak te bevestigen."})]})};var N=n(28827);let w=()=>{let[e,s]=t.useState(!1);return{isOpen:e,open:()=>s(!0),close:()=>s(!1)}},C=e=>{let{isOpen:s,onClose:n,onWithoutTradeIn:t,onWithTradeIn:l}=e;return(0,a.jsx)(d.ModalBase,{isOpen:s,onClose:n,children:(0,a.jsxs)("div",{className:"flex flex-col gap-6",children:[(0,a.jsx)("h2",{className:"text-xl font-medium",children:"Voorstelkeuze"}),(0,a.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,a.jsx)(N.W,{title:"Zonder inruil",onClick:()=>{n(),t()},variant:"white",className:"w-full"}),(0,a.jsx)(N.W,{title:"Met inruil",onClick:()=>{n(),l()},variant:"white",className:"w-full"})]})]})})},y=()=>{let[e,s]=t.useState(!1);return{isOpen:e,open:()=>s(!0),close:()=>s(!1)}},k=e=>{var s;let{isOpen:n,onClose:l}=e,{modalProps:c,setModalProps:u}=z(),x=(0,r.uu)(),[p,h]=t.useState(""),[b,j]=t.useState(null),[f,v]=t.useState(!1),g=c.leaseConfirmCustomer,N=c.leaseConfirmCarDisplayName,w=e=>"string"==typeof e&&e.includes("@"),C=null!==(s=[null==g?void 0:g.primary_email,null==g?void 0:g.email,null==g?void 0:g.private_email,null==g?void 0:g.work_email].find(w))&&void 0!==s?s:"",[y,k]=t.useState(""),O=w(C),S=O?C:y,I=(null==g?void 0:g.mobile_phone_number)||(null==g?void 0:g.phone_number)||(null==g?void 0:g.private_phone_number)||(null==g?void 0:g.work_phone_number)||"",D=()=>{h(""),k(""),j(null),v(!1),l()};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d.ModalBase,{isOpen:n&&!f,onClose:D,size:"lg",children:(0,a.jsx)(m.$2,{onSubmit:e=>{if(null==e||e.preventDefault(),!g||!p)return;j(null);let s=(0,i.q)(c.leaseData),n=c.subject||"Leasevoorstel aanvraag voor ".concat(N||"auto"),a={firstName:g.first_name,lastName:g.last_name,email:S,phoneNumber:I,recaptcha:p,title:n,carId:c.carId,...s?{lease:s}:{}};x.mutate(a,{onSuccess:()=>{(c.leaseSummary||c.leaseData)&&u({...c,leaseSummary:void 0,leaseData:void 0}),v(!0)},onError:e=>{console.error("[LeaseProposalConfirmModal] submit failed – response body:",null==e?void 0:e.data),j("Er is iets misgegaan. Probeer het opnieuw.")}})},children:(0,a.jsxs)("div",{className:"flex flex-col gap-6",children:[(0,a.jsx)("h2",{className:"text-xl font-medium",children:"Leasevoorstel aanvragen"}),(0,a.jsxs)("p",{className:"text-sm text-neutrals-700",children:["U dient hiermee een leasevoorstel in voor de"," ",(0,a.jsx)("strong",{children:N||"deze auto"}),". Wilt u doorgaan?"]}),!O&&(0,a.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,a.jsx)("label",{htmlFor:"lease-email",className:"text-sm font-medium text-black",children:"E-mailadres"}),(0,a.jsx)("input",{id:"lease-email",type:"email",required:!0,autoComplete:"email",value:y,onChange:e=>k(e.target.value),placeholder:"[email protected]",className:"h-[42px] rounded-sm border border-neutrals-200 bg-white px-3 text-sm text-black placeholder:text-neutrals-400 focus:border-qoets-red-500 focus:outline-none"})]}),(0,a.jsx)(o.gN,{name:"recaptcha",children:(0,a.jsx)(m.v6,{onChange:e=>h(e||""),value:p})}),b&&(0,a.jsx)("p",{className:"text-sm text-qoets-red-500",children:b}),(0,a.jsxs)("div",{className:"flex flex-col gap-4 sm:flex-row sm:justify-end",children:[(0,a.jsx)("button",{type:"button",onClick:D,className:"hover:bg-neutrals-50 w-full rounded-sm border border-neutrals-200 bg-white px-6 py-3 text-sm font-medium text-black sm:w-auto",children:"Annuleren"}),(0,a.jsx)(o.k4,{asChild:!0,children:(0,a.jsx)("button",{type:"submit",disabled:!p||x.isPending||!w(S),className:"w-full rounded-sm bg-qoets-red-500 px-6 py-3 text-sm font-medium text-white hover:bg-qoets-red-600 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto",children:x.isPending?"Verzenden...":"Vraag voorstel aan"})})]})]})})}),(0,a.jsx)(d.ModalBase,{isOpen:f,onClose:D,size:"sm",children:(0,a.jsxs)("div",{className:"flex flex-col gap-6",children:[(0,a.jsx)("h2",{className:"text-xl font-medium",children:"Aanvraag verzonden"}),(0,a.jsx)("p",{className:"text-sm text-neutrals-700",children:"We hebben je leasevoorstel aanvraag ontvangen en nemen zo snel mogelijk contact met je op."}),(0,a.jsx)("div",{className:"flex justify-end",children:(0,a.jsx)("button",{type:"button",onClick:D,className:"rounded-sm bg-qoets-red-500 px-6 py-3 text-sm font-medium text-white hover:bg-qoets-red-600",children:"Sluiten"})})]})})]})};var O=n(4189);let S=()=>{let[e,s]=t.useState(!1);return{isOpen:e,open:()=>s(!0),close:()=>s(!1)}},I=e=>{let{isOpen:s,onClose:n,carId:t}=e;return(0,a.jsx)(d.ModalBase,{isOpen:s,onClose:n,children:(0,a.jsx)(O.Q,{selectedInventoryCarId:t,showSubmitButton:!0,buttonVariant:"arrow"})})};var D=n(30922);let _=()=>{let[e,s]=t.useState(!1);return{isOpen:e,open:()=>s(!0),close:()=>s(!1)}},q=e=>{let{isOpen:s,onClose:n,videoLink:t,title:l}=e;return(0,a.jsx)(d.ModalBase,{isOpen:s,onClose:n,size:"xl",children:(0,a.jsxs)("div",{className:"flex flex-col gap-6",children:[l&&(0,a.jsx)("h2",{className:"text-xl font-medium",children:l}),(0,a.jsx)(D.VideoBlock,{videoCode:t})]})})},P=t.createContext(null),M=e=>{let{children:s}=e,n=(0,l.usePathname)(),o=w(),r=S(),i=h(),m=v(),d=_(),c=y(),[u,x]=t.useState({});t.useEffect(()=>{o.close(),r.close(),i.close(),m.close(),d.close(),c.close()},[n]);let p=t.useMemo(()=>({proposalChoice:o,tradeIn:r,contactForm:i,proposalAppointmentEdit:m,videoModal:d,leaseProposalConfirm:c,setModalProps:x,modalProps:u}),[o,r,i,m,d,c,u]);return(0,a.jsxs)(P.Provider,{value:p,children:[s,o.isOpen&&(0,a.jsx)(C,{isOpen:o.isOpen,onClose:o.close,onWithoutTradeIn:()=>i.open(),onWithTradeIn:()=>r.open()}),r.isOpen&&(0,a.jsx)(I,{isOpen:r.isOpen,onClose:r.close,carId:u.carId}),i.isOpen&&(0,a.jsx)(b,{isOpen:i.isOpen,onClose:i.close,subject:u.subject||"Contact",carId:u.carId}),m.isOpen&&u.currentAppointment&&u.proposalHash&&(0,a.jsx)(g,{isOpen:m.isOpen,onClose:m.close,currentAppointment:u.currentAppointment,proposalHash:u.proposalHash}),d.isOpen&&u.videoLink&&(0,a.jsx)(q,{isOpen:d.isOpen,onClose:d.close,videoLink:u.videoLink,title:u.videoTitle}),c.isOpen&&(0,a.jsx)(k,{isOpen:c.isOpen,onClose:c.close})]})},z=()=>{let e=t.useContext(P);if(!e)throw Error("useModalContext must be used within ModalProvider");return e}},66633:function(e,s,n){n.d(s,{q:function(){return t}});var a=n(5242);let t=e=>{if(e&&"number"==typeof e.monthlyPayment)return{type:e.type,car_price:(0,a.Yk)(e.carPrice,2),car_vat:(0,a.Yk)(e.vat,2),finance_amount:(0,a.Yk)(e.financeAmount,2),own_contribution:(0,a.Yk)(e.ownContribution,2),final_payment:(0,a.Yk)(e.finalPayment,2),duration:String(e.durationMonths),monthly_payment:e.monthlyPayment.toLocaleStr

1ing("nl-NL",{minimumFractionDigits:2,maximumFractionDigits:2})}}}}]);