https://ev.com/_next/static/chunks/9213-955f07e0b98cc269.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},l=(new e.Error).stack;l&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[l]="b3db7509-6267-4edf-96bc-48b104f2e87a",e._sentryDebugIdIdentifier="sentry-dbid-b3db7509-6267-4edf-96bc-48b104f2e87a")}catch(e){}}();"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9213],{32496:(e,l,t)=>{t.d(l,{L:()=>s});var a=t(88017),r=t(83743);let s=e=>{let{make:l,handleMakeClick:t,selected:s,needChange:c=!1,handleChange:n}=e;return(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)("div",{className:"inline-flex h-14 w-full cursor-pointer items-center justify-between gap-4 rounded border bg-white py-2.5 pl-2.5 pr-5 ".concat(s?"border-2 border-black":"border-gray-300"),onClick:t,children:[(0,a.jsxs)("div",{className:"flex items-center justify-start gap-4",children:[(0,a.jsx)("div",{className:"flex h-10 w-10 items-center justify-center gap-2.5 rounded bg-gray-50 p-1",children:(0,a.jsx)("div",{className:"relative h-6 w-6",children:(0,a.jsx)(r.F,{make:l,className:"m-auto mb-s size-[25.5px]"})})}),(0,a.jsx)("div",{className:"shrink grow basis-0 text-base font-medium leading-snug tracking-tight text-neutral-800",children:l})]}),c&&(0,a.jsx)("div",{className:"mr-[6px] border-b-2 border-b-brandElectric text-bodyBold4 text-neutral-800",onClick:n,children:(0,a.jsx)("span",{children:"Change"})})]},l)})}},49213:(e,l,t)=>{t.d(l,{N:()=>i});var a=t(88017),r=t(26263),s=t(14278),c=t(44109),n=t(81197);let i=e=>{let{firstChoice:l,modalStep:t,goToNextModal:i,makes:o,onSubmit:d,onClose:m}=e,[x,u]=(0,c.useState)({}),[h,f]=(0,c.useState)(s.xG),[p,b]=(0,c.useState)(),[g,j]=(0,c.useState)(s.xG),v=(0,c.useMemo)(()=>p||l||s.xG,[l,p]),[y,k]=(0,c.useState)(-1),[w,N]=(0,c.useState)(-1),[S,E]=(0,c.useState)([]),[M,C]=(0,c.useState)([]),[V,R]=(0,c.useState)(!1),[I,A]=(0,c.useState)(!1),[D,G]=(0,c.useState)("");async function F(e){let{innerText:l}=e.target;A(!0),G(""),f(e=>({...e,make:l}));let t=await fetch("/api/model/".concat(l));if(t.ok){let e=await t.json();u(e);let l=Object.keys(e).reverse().slice(0,2);E(l),f(e=>({...e,year:l[0]}))}}async function L(e,l,t){f(t=>({...t,model:e,imageURL:l,trim:"",MSRP:0})),k(t),G("");let a=await fetch("/api/compare/getTrims/".concat(h.year,"/").concat(h.make,"/").concat(e));a.ok&&(C((await a.json()).map(l=>({...l,Year:h.year,Model:e,Make:h.make}))),N(-1))}let T=(0,c.useCallback)((e,l,t)=>{N(t),G(""),f(t=>({...t,trim:e,MSRP:l})),V?j(()=>({...h,trim:e,MSRP:l})):b(()=>({...h,trim:e,MSRP:l}))},[h,V]),P=(0,c.useCallback)(()=>{R(!0),k(-1),N(1),b(l||h),f(s.xG),G("")},[h,l]),_=(0,c.useCallback)(async()=>{(await fetch("/api/compare/getVehicleStylesData/?year=".concat(h.year,"&make=").concat(h.make,"&model=").concat(h.model,"&trim=").concat(encodeURIComponent(h.trim)))).ok?P():G(s.NQ)},[h,P]),B=(0,c.useCallback)(()=>{k(-1),N(1),l||R(!1),f(s.xG),l||b(s.xG),j(s.xG),A(!1),G("")},[l]),Y=(0,c.useCallback)(async()=>{await d({selectedDefaultDetails:h,firstEV:v,secondEV:g})?(G(""),m&&m()):G(s.NQ)},[v,h,g,d,m]);return(0,c.useEffect)(()=>{l&&1===t&&(i(2),P())},[t,l,P,i]),(0,c.useEffect)(()=>{M.length&&w<0&&T(M[0].Trim,M[0].MSRP,0)},[M,w,T]),(0,a.jsx)(r.A,{open:t>0,onClose:function(){i(-1),B()},className:"h-full w-full overflow-hidden !bg-white !px-[16px] !pb-[10px] !pt-[20px] m:h-[95%] l:!px-[32px] l:!pb-[20px]",children:(0,a.jsx)(n.c,{modelHeader:V?s.sf:s.oA,modelButtonLabel:V?s.Vr:s.sf,selectedFirstEVStyle:V?s.u:s.Y_,selectedSecondEVStyle:V?s.Y_:s.u,firstEVIconStyle:V?s.WK:s.iI,secondEVIconStyle:V?s.iI:s.WK,showComparisonDetailPage:V,selectedFirstEVDetails:v,selectedSecondEVDetails:g,selectedEVDefaultDetails:h,makes:o,makeEVOptions:x,yearList:S,activeModelIndex:y,trimList:M,activeTrimIndex:w,showReset:I,handleMakeClick:F,handleMakeChange:function(){f(s.xG),V?j(s.xG):b(s.xG),k(-1),N(1),A(!1),G("")},handleBadgeClick:function(e){f(l=>({...l,year:e,model:""})),k(-1),N(-1),G("")},handleModelClick:L,handleReset:B,handleTrimClick:T,onCompleteFlow:Y,editEVAlertMessage:D,handleSelectEVClick:_})})}},55515:(e,l,t)=>{t.d(l,{o:()=>c,A:()=>n});var a=t(88017),r=t(71623),s=t(44109),c=function(e){return e.Blue="Blue",e.Gray="Gray",e.Green="Green",e.Yellow="Yellow",e.Red="Red",e.Dark="Dark",e}({});let n=e=>{let{className:l="",variant:t="Gray",label:c,size:n="Regular",onClick:i,icon:o=null,iconPosition:d="left",secondaryIcon:m=null}=e,x="",u="";return x="bg-neutral-200 text-neutral-800 hover:text-neutral-900","Blue"===t?(x="bg-blue-light text-blue-medium ".concat(i?"hover:text-blue-dark":""),u="text-neutral-900/40 ".concat(i?"group-hover:text-blue-medium":"")):"Green"===t?x="bg-green-light text-green-medium ".concat(i?"hover:text-green-dark":""):"Yellow"===t?x="bg-yellow-light text-yellow-medium ".concat(i?"hover:text-yellow-dark":""):"Red"===t?(x="bg-red-light text-red-medium ".concat(i?"hover:text-red-dark":""),u="text-neutral-900/40 ".concat(i?"group-hover:text-red-medium/40":"")):"Dark"===t&&(x="bg-brandMidnight text-neutral-0 ".concat(i?"hover:bg-brandMidnight-hover":"")),(0,a.jsxs)("div",{className:(0,r.A)("group inline-flex h-fit-content items-center justify-center space-x-[6px] rounded-full px-m py-xs",{"flex-row-reverse":"right"===d},{"cursor-pointer":i},x,l),onClick:i,children:[o&&s.cloneElement(o,{className:u}),o&&(0,a.jsx)("div",{className:"!mr-[2px] h-[20px] border-[0.5px] border-neutral-900/10"}),(0,a.jsx)("span",{className:(0,r.A)("text-nowrap text-body2Regular",{"text-microMedium":"Small"===n}),children:c}),m]})}},73199:(e,l,t)=>{t.d(l,{H:()=>a});function a(e){let l=Number(e);

1return Number.isNaN(l)||""===e?"":l.toLocaleString()}},81197:(e,l,t)=>{t.d(l,{c:()=>S});var a=t(88017),r=t(15704),s=t(14278),c=t(99162),n=t(32496);let i=e=>{let{makes:l,selectedMake:t,handleMakeClick:r,handleMakeChange:i}=e;return(0,a.jsxs)("section",{className:"mb-[60px] flex flex-col overflow-scroll",children:[(0,a.jsx)(c.A,{className:"mb-[12px] ml-[4px] text-[clamp(1rem,1vw,1.25rem)] l:mb-[24px]",level:c.k.H4,children:s.ND}),(0,a.jsx)("div",{className:"flex flex-col gap-[10px]",children:""===t?(0,a.jsx)("div",{className:"flex flex-col gap-[10px] pb-[60px]",children:l.filter(e=>!s.LD.includes(e)).map(e=>(0,a.jsx)(n.L,{make:e,selected:!1,handleMakeClick:r},e))}):(0,a.jsx)(n.L,{make:t,needChange:!0,selected:!1,handleChange:i})})]})};var o=t(93513),d=t(51604),m=t(12020),x=t(5252);let u=e=>{let{modelHeader:l,selectedFirstEVStyle:t="",firstEVIconStyle:r="",selectedSecondEVStyle:n="",secondEVIconStyle:i="",selectedFirstEVDetails:u,selectedSecondEVDetails:h}=e;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(c.A,{className:"mb-m mt-[12px] text-[clamp(1.25rem,1.5vw,1.75rem)] l:mb-xl",level:c.k.H4,children:l}),(0,a.jsx)("section",{className:"mb-[20px] hidden w-full justify-between m:flex",children:[{selectedEV:u,selectedEVStyle:t,selectedIconStyle:r},{selectedEV:h,selectedEVStyle:n,selectedIconStyle:i}].map((e,l)=>{let{selectedEV:t,selectedEVStyle:r,selectedIconStyle:c}=e;return(0,a.jsx)("div",{className:"".concat(t.trim?"!border-solid":""," ").concat(r),children:t.trim?(0,a.jsxs)("div",{className:"fadeIn flex h-full w-full transform justify-between px-s",children:[t.imageURL&&(0,a.jsx)(o.A,{src:t.imageURL,alt:"model_image",className:"!relative ".concat(0===l?"-scale-x-100":""," object-contain"),dynamicClassName:"flex",width:150,height:150}),(0,a.jsxs)("div",{className:"align-start flex flex-col justify-center",children:[(0,a.jsx)(d.A,{className:"whitespace-nowrap text-microNormal text-neutral-600",children:t.make}),(0,a.jsx)("p",{className:"text-microNormal",children:t.model}),(0,a.jsx)(d.A,{className:"overflow-ellipsis whitespace-nowrap text-microNormal text-neutral-600",children:t.trim}),(0,a.jsx)(d.A,{className:"whitespace-nowrap text-microNormal text-neutral-600",children:(null==t?void 0:t.MSRP)?"".concat(s.xo," ").concat(s.VB," $").concat(t.MSRP.toLocaleString()):(0,m.M)(0,s.OF)})]})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:c,children:0===l?(0,a.jsx)(x.Z3,{className:"size-[20px]"}):(0,a.jsx)(x.G_,{className:"size-[20px]"})}),(0,a.jsx)("span",{className:"text-[clamp(0.6rem,1vw,0.75rem)]",children:0===l?s.xY:s.jL})]})},l)})})]})};var h=t(55515),f=t(96871),p=t(73199);let b=e=>{var l;let{makeEVOptions:t,selectedYear:r,activeModelIndex:n,yearList:i,handleBadgeClick:o,handleModelClick:x,showComparisonDetailPage:u,selectedEditEVIndex:b,selectedMake:g}=e;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(c.A,{className:"mb-m ml-s text-[clamp(1rem,1vw,1.25rem)] l:mb-xl",level:c.k.H4,children:s.Wz}),(0,a.jsxs)("section",{children:[i.map(e=>(0,a.jsx)(h.A,{label:e,className:"mb-m mr-s cursor-pointer text-microMedium",onClick:()=>o(e),variant:r.toString()===e?h.o.Blue:h.o.Gray},e)),(0,a.jsx)("section",{className:"grid grid-cols-2 overflow-scroll pb-[60px] l:grid-cols-4",children:null==(l=t[Number(r)])?void 0:l.map((e,l)=>{var t;return(0,a.jsxs)("div",{className:"align-center rounded-xs m-xs flex cursor-pointer flex-col justify-center border-[1px] border-solid pb-m ".concat(l===n?"border-brandElectric bg-green-light":"border-neutral-300"),onClick:()=>{var t;return x(e.Model,null!=(t=null==e?void 0:e.MainImage)?t:"",l)},children:[(0,a.jsx)(f.w,{make:g,className:"w-full rounded-t-lg !object-cover ".concat(u||!e.MainImage||1===b?"":"-scale-x-100"),src:null!=(t=null==e?void 0:e.MainImage)?t:void 0,alt:"model_image",priority:!0,ratio:.7}),(0,a.jsxs)("div",{className:"px-m pt-m",children:[(0,a.jsx)("p",{className:"text-microMedium",children:e.Model}),(0,a.jsx)(d.A,{className:"text-microLight",children:0===e.MSRP?(0,m.M)(e.MSRP,s.OF):"".concat(s.xo," ").concat(s.VB," $").concat((0,p.H)(e.MSRP))})]})]},e.ModelId)})})]})]})};

1var g=t(98605),j=t(75880),v=t(25546),y=t(49638);let k=()=>(0,v.n)({mutationFn:async e=>{let{year:l,make:t,model:a,trim:r}=e;if(!(await fetch("/api/compare/getVehicleStylesData/?year=".concat(l,"&make=").concat(t,"&model=").concat(a,"&trim=").concat(encodeURIComponent(r)),{headers:{Accept:"application/json","Content-Type":"application/json"}})).ok)throw Error("This trim data is unavailable");return{Year:l,Make:t,Model:a,Trim:r}},onError:e=>{(0,y.P)(e.message,{type:"error"})}});var w=t(44109);let N=e=>{let{trimList:l,activeTrimIndex:t,handleTrimClick:r}=e,{isMobile:n}=(0,j.A)(),i=(0,w.useRef)(null),[o,x]=(0,w.useState)(null),{mutate:u,isPending:h}=k(),f=(0,w.useCallback)((e,l)=>{x(l),u({year:e.Year,make:e.Make,model:e.Model,trim:e.Trim},{onSuccess:()=>{r(e.Trim,e.MSRP,l),x(null)},onError:()=>{x(null)}})},[u,r]);return(0,w.useEffect)(()=>{i.current&&l.length>0&&i.current.scrollIntoView({behavior:"smooth"})},[l.length]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(c.A,{className:"mx-xs ml-xs text-h4Regular l:mb-l",level:c.k.H4,children:s.NY}),(0,a.jsx)("section",{children:(0,a.jsx)("div",{className:"mb-[64px] grid overflow-scroll pb-xl ".concat(n?"grid-cols-2":"grid-cols-3"),ref:i,children:0===l.length?(0,a.jsx)(a.Fragment,{children:Array.from({length:n?4:8}).map((e,l)=>(0,a.jsxs)("div",{className:"m-xs flex h-fit-content flex-col justify-center p-l",children:[(0,a.jsx)(g.E,{className:"mb-xs h-l w-full rounded-xsmall"}),(0,a.jsx)(g.E,{className:"h-l w-3/4 rounded-xsmall"})]},"skeleton-".concat(l)))}):l.map((e,l)=>(0,a.jsxs)("div",{className:"align-center relative m-xs flex h-fit-content cursor-pointer flex-col justify-center rounded-xsmall border border-solid p-l ".concat(l===t?"border-brandElectric bg-green-light":"border-neutral-300"),onClick:()=>{h||null!==o||f(e,l)},children:[o===l&&(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-white bg-opacity-70",children:(0,a.jsx)("div",{className:"size-l animate-spin rounded-full border-[8px] border-t-[8px] border-neutral-300 border-t-brandElectric"})}),(0,a.jsx)("p",{className:"whitespace-nowrap text-body2Regular l:text-body1Regular",children:e.Trim}),(0,a.jsx)(d.A,{className:"text-body2Regular text-neutral-600 l:text-body1Regular",children:0===e.MSRP?(0,m.M)(e.MSRP,s.OF):"".concat(s.xo," ").concat(s.VB," $").concat((0,p.H)(e.MSRP))})]},l))})})]})},S=e=>{let{makes:l,selectedEVDefaultDetails:t,handleMakeClick:c,handleMakeChange:n,handleBadgeClick:o,handleModelClick:d,makeEVOptions:m,yearList:x,activeModelIndex:h,trimList:f,handleTrimClick:p,activeTrimIndex:g,handleSelectEVClick:j,handleReset:v,modelHeader:y,modelButtonLabel:k,selectedFirstEVStyle:w="",selectedSecondEVStyle:S="",secondEVIconStyle:E="",firstEVIconStyle:M="",showComparisonDetailPage:C,selectedFirstEVDetails:V=s.xG,selectedSecondEVDetails:R=s.xG,onCompleteFlow:I,showReset:A,editEVAlertMessage:D="",selectedEditEVIndex:G,showHeader:F=!0}=e,L=C||void 0!==G;return(0,a.jsxs)(a.Fragment,{children:[F&&(0,a.jsx)(u,{modelHeader:y,selectedFirstEVStyle:w,selectedSecondEVStyle:S,firstEVIconStyle:M,secondEVIconStyle:E,showComparisonDetailPage:C,selectedFirstEVDetails:V,selectedSecondEVDetails:R}),(0,a.jsxs)("section",{className:"item-start h-full w-full overflow-scroll pb-xl",children:[(0,a.jsx)(i,{makes:l,selectedMake:t.make,handleMakeClick:c,handleMakeChange:n}),""!==t.make&&(0,a.jsx)(b,{yearList:x,handleBadgeClick:o,makeEVOptions:m,selectedYear:t.year,selectedMake:t.make,activeModelIndex:h,handleModelClick:d,showComparisonDetailPage:C,selectedEditEVIndex:G}),""!==t.model&&(0,a.jsx)(N,{trimList:f,handleTrimClick:p,activeTrimIndex:g})]}),(0,a.jsxs)("section",{className:"absolute bottom-0 flex w-full items-center justify-between overflow-hidden border-t border-neutral-300 bg-white pr-[30px] l:pr-[60px]",children:[A&&(0,a.jsx)("div",{className:"cursor-pointer text-body1Medium text-neutral-800 hover:underline",onClick:v,children:s.Ut}),(0,a.jsx)("div",{className:"flex w-[30%] items-center text-[clamp(0.5rem,1vw,0.75rem)] text-red-500 m:w-[40%]",children:D}),(0,a.jsx)("div",{className:"my-l",children:(0,a.jsx)(r.A,{variant:r.h.Tertiary,onClick:L?I:j,disabled:""===t.trim,"aria-label":"select compare evs",children:k})})]})]})}},96871:(e,l,t)=>{t.d(l,{w:()=>o});var a=t(88017),r=t(93513),s=t(20188),c=t(71623),n=t(44109),i=t(92935);let o=e=>{let{src:l=null,alt:t,make:o,className:d,noImageWrapperVariant:m="blue",priority:x,isColumnLayout:u=!0,ratio:h=.7,href:f,analyticsEvent:p,onClick:b,ariaLabel:g,needNoImageText:j}

1=e,v=(0,n.useRef)(null),[y,k]=(0,n.useState)(258),[w,N]=(0,n.useState)(368),[S,E]=(0,n.useState)(!1),M=(0,n.useCallback)(()=>{if(v.current){let e=v.current.offsetWidth*h,l=v.current.offsetWidth;k(Math.round(e)),N(Math.round(l))}},[h]);(0,n.useEffect)(()=>{M()},[M,u]),(0,n.useEffect)(()=>(window.addEventListener("resize",M),()=>{window.removeEventListener("resize",M)}),[M]);let C=S||!l?(0,a.jsx)(i.i,{make:o,className:"m-auto mb-s flex-col items-center justify-center opacity-40",makeIconClassName:"size-[64px]",variant:m,needNoImageText:j}):(0,a.jsx)(r.A,{className:"relative h-full w-full object-fill object-center ".concat(u?"":"scale-120"," ").concat(d),src:l,alt:t,priority:x,fill:!0,sizes:"".concat(w,"px"),onError:()=>{E(!0)}});return(0,a.jsx)("div",{className:(0,c.A)("relative flex h-full w-full items-center justify-center",{"bg-gradient-to-r from-lightTheme-start to-lightTheme-end":(S||!l)&&"blue"===m,"bg-neutral-200":(S||!l)&&"gray"===m}),ref:v,onClick:b,style:{height:"".concat(y,"px")},children:f?(0,a.jsx)(s.Ay,{href:f,"aria-label":g,analyticsEvent:p,className:"h-full w-full",childrenStyle:"w-full flex items-center",prefetch:x,children:C}):C})}},98605:(e,l,t)=>{t.d(l,{E:()=>r});var a=t(88017);let r=e=>{let{className:l,...t}=e;return(0,a.jsx)("div",{className:"animate-pulse rounded-md bg-neutral-400 ".concat(l),...t})}}}]);
2//# sourceMappingURL=9213-955f07e0b98cc269.js.map