https://spn-sta.spinny.com/spinny-web/2.0.287/assets/js/7106.ea87b5536c5786c78b1b.desktop.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[7106],{69187:function(e,a,t){var i=t(12957),r=t(85893);a.Z=({fill:e=i.Z.alertOrange100,stroke:a=i.Z.alertOrange100,width:t="24",height:n="24",fillOpacity:s="0.08",strokeWidth:l="1"})=>(0,r.jsxs)("svg",{width:t,height:n,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,r.jsx)("rect",{width:"24",height:"24",rx:"12",fill:e,fillOpacity:s}),(0,r.jsx)("path",{d:"M16 8L8 16",stroke:a,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:l}),(0,r.jsx)("path",{d:"M8 8L16 16",stroke:a,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:l})]})},31036:function(e,a,t){t.d(a,{Z:function(){return C}});var i=t(67294),r=t(17861),n=t(48712),s=t(98746),l=t(39746),o=t(73957),c=t(78734),d=t(85893);let u=i.lazy(()=>Promise.all([t.e(74765),t.e(45819),t.e(16291),t.e(9604),t.e(19760)]).then(t.bind(t,76672)));var p=e=>(0,d.jsx)(c.Z,{fallback:(0,d.jsx)(d.Fragment,{}),children:(0,d.jsx)(u,{...e})}),m=t(45004),x=t(92095),h=t(76908);let g=`${t(75142).Sp}CarFeature/assets/`;var f=(0,o.P)(({onClick:e,image:a,imageView:t=!1,fill:i,className:r="",inline:s=!1,isDesktop:l=!1})=>{let o=l?"20px":"28px",c=!s&&a?(0,d.jsx)(n.Ee,{src:`${g}gallery-icon.svg`,alt:"",width:"auto",height:"auto"}):(0,d.jsx)(n.ie,{icon:x.l1U,size:"medium",color:i??"#6300a3"});return t&&a?(0,d.jsxs)("div",{"data-componentName":"FeatureDescriptionIcon",style:{display:"block",marginTop:"8px",marginLeft:"-4px",overflow:"hidden",position:"relative",width:"max-content"},className:r,children:[(0,d.jsx)(h.Z,{onClick:e}),(0,d.jsx)("div",{style:{borderRadius:"6px",overflow:"hidden"},children:(0,d.jsx)(n.Ee,{src:a,alt:"",width:"128px",height:"76px"})})]}):s?(0,d.jsx)("i",{role:"none",onClick:e,"data-componentName":"FeatureDescriptionIcon",style:{position:"relative",marginLeft:"4px",verticalAlign:"middle",display:"inline-flex",cursor:"pointer",bottom:"1px"},className:r,children:c}):(0,d.jsxs)(n.xu,{"data-componentName":"FeatureDescriptionIcon",onClick:e,display:"flex",justifyContent:"center",alignItems:"center",position:"relative",borderRadius:"xsmall",borderWidth:l?"thinner":"thin",borderStyle:"solid",borderColor:"#f1f1f1",backgroundColor:"#f6f6f6",minWidth:o,minHeight:o,maxWidth:o,maxHeight:o,cursor:"pointer",children:[(0,d.jsx)(h.Z,{onClick:e}),c]})},"FeatureDescriptionIcon"),_=t(99528),v=t(95939),y=t(69187),j=(0,o.P)(({isDesktop:e=!1,...a})=>{let{data:t,onClose:i}=a,{description:s,display_name:l,lead_image_url:o}=t,c=(0,r.s0)(),u=()=>(0,d.jsxs)(n.xu,{"data-componentName":"FeatureDescriptionModal",position:"relative",backgroundColor:"surface.background.gray.subtle",borderRadius:e?"xlarge":void 0,overflow:e?"hidden":void 0,maxWidth:e?"250px":void 0,children:[o&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.xu,{"data-componentName":"FeatureDescriptionModal",minHeight:"100px",margin:e?"spacing.3":void 0,marginBottom:e?"spacing.0":void 0,children:e?(0,d.jsx)("div",{style:{borderRadius:"6px",overflow:"hidden"},children:(0,d.jsx)(n.Ee,{src:o??"",alt:"",width:"100%",height:"auto"})}):(0,d.jsx)(n.Ee,{src:o??"",alt:"",width:"100%",height:"auto"})}),!e&&(0,d.jsx)(n.xu,{"data-componentName":"FeatureDescriptionModal",position:"absolute",top:"spacing.5",right:"spacing.5",cursor:"pointer",role:"none",onClick:()=>c(-1),children:(0,d.jsx)(y.Z,{fillOpacity:"0.15",stroke:"#fff",fill:"#000"})})]}),(0,d.jsxs)(n.xu,{"data-componentName":"FeatureDescriptionModal",padding:e?"spacing.4":"spacing.5",paddingBottom:e?"spacing.4":"48px",children:[(0,d.jsx)(n.xu,{"data-componentName":"FeatureDescriptionModal",marginBottom:e?"spacing.1":"spacing.2",children:(0,d.jsx)(n.X6,{"data-componentName":"FeatureDescriptionModal",as:"span",size:"small",weight:"semibold",color:"surface.text.gray.normal",children:l})}),(0,d.jsx)(n.xv,{"data-componentName":"FeatureDescriptionModal",variant:"body",size:"medium",color:"surface.text.gray.normal",children:s})]})]});return e?u():(0,d.jsx)(v.Z,{rootId:"react-view",children:(0,d.jsx)(_.default,{hideClose:!0,hideBottomSheetOverlay:i,bottomSheetType:"FeatureDescriptionModal",background:"#fff",forceHideLine:!!o,children:u()})})},"FeatureDescriptionModal"),C=(0,o.P)(({isDesktop:e=!1,parentRef:a=null,inline:t=!1,fill:o,source:c="",className:u="",fullView:x=!1,showGallery:h=!1,imageIndex:g=0,iconClass:_="",onClick:v,...y})=>{let{data:C,category:k,label:F,navTabName:b}=y,{lead_image_url:w}=C,[N,T]=(0,i.useState)(!1),[G,I]=(0,i.useState)(!1),D=(0,r.s0)(),L=(0,i.useRef)(C),A=(0,i.useRef)(null),S=l.Z.isIpad(),Z=()=>T(!1),E=()=>{L.current=C,(0,s.pushIntoGA4)({eventName:`${k}_${c||"overlay"}_tooltip_click`,eventCategory:"tooltip_click",componentTitle:`${k}`,componentSubTitle:b?.toLowerCase()?.split(" ")?.join("_"),eventValue:F?.toLowerCase()?.split(" ")?.join("_")},"genericProductGA4Event"),T(!0),v?.()},R=()=>{(0,s.pushIntoGA4)({eventName:`${k}_${c||"overlay"}_tooltip_click`,eventCategory:"image_click",componentTitle:`${k}`,componentSubTitle:b?.toLowerCase()?.split(" ")?.join("_"),eventValue:F?.toLowerCase()?.split(" ")?.join("_")},"genericProductGA4Event"),I(!0)},$=()=>(0,d.jsx)(f,{inline:t,isDesktop:e,className:u,fill:o,image:w,imageView:x,onClick:h&&L.current.lead_image_url?R:E}),M=()=>(0,d.jsx)(j,{data:L.current,onClose:Z,isDesktop:e});return(0,d.jsxs)(d.Fragment,{children:[e&&(0,d.jsx)(m.Z,{parentRef:a,arrowColor:"#fafafa",icon:(0,d.jsx)(n.xu,{"data-componentName":"DescriptionModal",dis

1play:"block",position:"relative",bottom:"1px",marginLeft:"4px",width:"max-content",cursor:"pointer",children:$()}),iconClassName:_,direction:x?"left":void 0,children:M()}),!e&&(0,d.jsxs)(d.Fragment,{children:[$(),N&&M()]}),G&&(0,d.jsx)(p,{close:()=>D(-1),bodyRef:A,stateProps:{isIpad:S,showThreesixty:!1,newGalleryDesign:!0,setShowGalleryView:I,activateGalleryCTAForGalleryImages:!1,activeItemIndex:g}})]})},"DescriptionModal")},57473:function(e,a,t){t.d(a,{Z:function(){return l}});var i=t(67294),r=t(28700),n=t(73957),s=t(85893),l=(0,n.P)(e=>{let{active:a,max:t,autoSlideTime:n=4e3,onChange:l,clsName:o,pause:c}=e,d=void 0!==n,u=(0,i.useRef)(null);return(0,i.useEffect)(()=>(d&&!c&&(u.current=window.setInterval(()=>l?.((a+1)%t),n)),()=>{u.current&&clearInterval(u.current)}),[d,t,a,c]),(0,s.jsx)("div",{className:(0,r.Y1)("CarouselIndicatorFadeinout__carouselIndicatorFadeinoutContainer",o&&o),children:Array.from(Array(t)).map((e,t)=>(0,s.jsx)("div",{className:"CarouselIndicatorFadeinout__slide",children:t<=a&&(0,s.jsx)("div",{style:{animationDuration:`${n}ms`,animationPlayState:c?"paused":"running"},className:(0,r.Y1)("CarouselIndicatorFadeinout__progress",a===t?"CarouselIndicatorFadeinout__active":"CarouselIndicatorFadeinout__filled")})},`CarouselIndicatorFadeinout${t}`))})},"CarouselIndicatorFadeinout")},7106:function(e,a,t){t.r(a),t.d(a,{default:function(){return C}});var i=t(67294),r=t(17861),n=t(48712),s=t(96503),l=t(98746),o=t(73957),c=t(31036),d=t(66535),u=t(30540),p=t(12957),m=t(64730),x=t(85893),h=(0,o.P)(({isGalleryView:e=!1,...a})=>{let{data:t,name:i}=a,r=e=>(0,x.jsx)(c.Z,{data:e,inline:!1,fill:void 0,category:"top_features",label:e.display_name,source:"outside",navTabName:i});return(0,x.jsxs)(n.xu,{marginBottom:"14px","data-scroll-anchor":(0,d.IJ)(i),children:[(0,x.jsxs)(n.xu,{display:"flex",alignItems:"center",children:[(0,x.jsx)(n.xv,{as:"span",size:"small",weight:"medium",textTransform:"uppercase",letterSpacing:"1px",color:"surface.text.gray.muted",children:i}),e&&(0,x.jsx)(n.xu,{flex:"1",height:"1px",marginLeft:"spacing.4",alignSelf:"center",backgroundColor:"interactive.background.gray.fadedhighlighted"})]}),(0,x.jsx)(n.xu,{display:"grid",rowGap:"spacing.3",marginTop:"spacing.4",children:t.map((e,a)=>(0,x.jsxs)(n.xu,{display:"flex",alignItems:"center",height:"28px","data-scroll-anchor":(0,d.IJ)(e.display_name),children:[(0,x.jsx)(n.xu,{as:"i",width:"16px",height:"16px",display:"flex",justifyContent:"center",alignItems:"center",children:(0,x.jsx)(u.Z,{width:"14px",stroke:p.Z.grey10})}),(0,x.jsx)(n.xu,{flex:"1",marginLeft:"spacing.3",children:(0,x.jsxs)(n.xv,{as:"span",size:"medium",weight:"medium",color:"surface.text.gray.normal",children:[e.display_name,(0,m.mu)(e.value,e.unit),e.description&&!1]})}),e.description&&r(e)]},a))})]})},"TopFeatureList"),g=t(48707),f=t(57473),_=t(98899),v="TopFeaturesGallery__actionArea",y="TopFeaturesGallery__animate",j=((0,o.P)(e=>{let{data:a}=e,[t,r]=(0,i.useState)(0),n=(0,i.useRef)(0),s=(0,i.useRef)(null),o=(0,i.useRef)(null),d=(0,i.useRef)({});(0,i.useEffect)(()=>{d.current[t]||((0,l.sendGAEvent)("images_seen","section_seen","top_car_features"),d.current[t]=!0)},[]),(0,i.useEffect)(()=>{o.current?.classList.add(y),setTimeout(()=>{o.current?.classList.remove(y)},500),s.current&&o.current&&(o.current.style.minWidth=`${s.current.scrollWidth}px`,o.current.style.maxWidth=`${s.current.scrollWidth}px`)},[t]);let u=a[t];return(0,x.jsxs)("div",{className:"TopFeaturesGallery__topFeaturesGallery",children:[(0,x.jsx)(g.Z,{data:a,hideIndicator:!0,hideSlideCount:!0,renderItem:e=>{let{item:a}=e;return(0,x.jsx)("div",{className:"TopFeaturesGallery__topFeature",children:(0,x.jsx)(_.Z,{src:a.lead_image_url??"",alt:"",imgClass:"TopFeaturesGallery__img"})})},active:t,onChange:e=>{n.current=t,r(e)},gap:0,visibleCard:0,disabled:!0}),(0,x.jsx)("div",{className:"TopFeaturesGallery__background"}),(0,x.jsxs)("div",{className:"TopFeaturesGallery__carouselActionArea",children:[(0,x.jsx)("div",{role:"none",onClick:()=>{r(e=>e-1<0?a.length-1:e-1),(0,l.sendGAEvent)("images_scrolled","button_click","top_car_features")},className:v}),(0,x.jsx)("div",{role:"none",onClick:()=>{r(e=>e+1>=a.length?0:e+1),(0,l.sendGAEvent)("images_scrolled","button_click","top_car_features")},className:v})]}),(0,x.jsxs)("div",{className:"TopFeaturesGallery__footer",children:[(0,x.jsxs)("div",{className:"TopFeaturesGallery__heading",children:[(0,x.jsxs)("div",{className:"TopFeaturesGallery__featureDisplayName",ref:o,children:[(0,x.jsx)("span",{className:"TopFeaturesGallery__prevHeading",children:a[n.current].display_name}),(0,x.jsx)("span",{className:"TopFeaturesGallery__currentHeading",ref:s,children:u.display_name})]}),(0,x.jsx)(c.Z,{inline:!0,data:u,fill:"#fff",className:"TopFeaturesGallery__icon",category:"top_features",source:"outside",navTabName:a[n.current]?.display_name,label:"attribute-information-click"})]}),(0,x.jsx)(f.Z,{autoSlideTime:5e3,onChange:r,max:a.length,active:t})]})]})},"TopFeaturesGallery"),t(4652)),C=(0,i.memo)((0,o.P)(({addTBMargin:e=!1,...a})=>{let{productDetail:t,productId:o}=a,c=(0,r.s0)(),[d,u]=(0,i.useState)({}),p=(0,s.Z)("genericProductGA4Event",{eventName:"top_features_section_seen",eventCategory:"section_seen"},.5,[],!0,{sendToClarity:!0}),{features:g}=((0,m.cU)(d),t?.technicalSpecification??{}),{hasTechnicalSpecification:f}=t??{};if((0,i.useEffect)(()=>{u((0,m.DA)(g?.top_features))},[g?.top_features]),!(f&&g?.availability&&g?.top_features&&g?.top_features?.length))return null;let _=()=>{(0,l.pushIntoGA4)({eventName:"top_features_view_all_click",eventCategory:"footer_cta_click",componentTitle:"top_features"},"genericProductGA4Event"),(0,j.aR)(+o,"activity"),c(`/car-feature/${o}${(0,l.getReferrelUrl)(!0)}`)},v=()=>(0,x.jsx)(n.xu,{display:"flex",justifyContent:"center",children:(0,x.jsx)(n.zx,{variant:"secondary",color:"primary",size:"medium",isFullWidth:!0,onClick:_,"aria-label":"view all feature",children:"View all Features"})});return(0,x.jsxs)(n.xu,{ref:p,"data-id":"pdp-top-features",backgroundColor:"interactive.background.staticwhite.default",borderRadius:e?void 0:"xsmall",margin:e?"spacing.0":"spacing.5",padding:"spacing.5",children:[(0,x.jsx)(n.xu,{display:"inline-block","data-scroll-title":!0,children:(0,x.jsx)(n.X6,{as:"h2",size:"medium",weight:"semibold",color:"surface.text.gray.normal",marginBottom:e?"spacing.5":void 0,children:"Top Features"})}),!1,(0,x.jsxs)(n.xu,{display:"flex",flexDirection:"column",children:[Object.keys(d).map((a,t)=>(0,x.jsx)(h,{name:a,data:d[a],isGalleryView:e},`${a}${t}`)),e&&v()]}),!e&&v()]})},"CarFeatures"))}}]);