https://www.6pm.com/marty-assets/marty-6pm.components-landing-ZapposHero.c17a1fff9213d6adde20.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[5669],{49409:(e,t,a)=>{a.d(t,{Z:()=>I});var n=a(67294),o=a(86706),l=a(34506),s=a(99257),i=a(8259),r=a(78848),d=a(41487),c=a(64585),m=a(91145),u=a(72138),h=a(26927),p=a(43909);const y="PZ-z",g="QZ-z",b="RZ-z",E="SZ-z",f="TZ-z",P="XZ-z",z="YZ-z";function C(){return C=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},C.apply(this,arguments)}const v={left:"flex-start",center:"center",right:"flex-end"},k={left:"UZ-z",center:"VZ-z",right:"WZ-z"},I=(0,d.P)("ContentBox",(({heading:e,styles:t,HeadingTag:a="h2",copy:d,subCopy:I,className:L,children:N,imageData:V,links:x=[],onClick:w,eventLabel:D,useImageAsHeading:S,shouldLazyLoad:T,backgroundColor:Z,color:A,mobileColor:H,textAlign:O,contentWidth:_,isFullWidth:R,pageName:W,pageInfo:j={}})=>{const{testId:M}=(0,s.Z)(),{containerStyle:U,headingStyle:$,copyStyle:F,linksStyle:B}=(0,p.rq)(t)||{},K=(0,o.v9)(h.kS),Y=(0,m.U)(W),q=e=>Y&&u.$v.test(e)&&j.packageLabelUrl;if(e||d||I||V||x?.[0]?.text){const t=!e&&!d&&!I&&x?.[0]?.text,o={textAlign:O,backgroundColor:Z,"--desktop-text-color":A,"--mobile-text-color":H||A,borderColor:A,alignItems:v[O],width:_,...U},s={...$},m=S&&V?.alt,u=m?a:n.Fragment,h=m?{style:$}:{};return n.createElement("div",{style:o,className:(0,l.cn)(y,L,{[z]:t}),"data-test-id":M(`contentBox:${D||e}`)},n.createElement(u,h,n.createElement(r.Z,C({},V,{shouldLazyLoad:T,isFullWidth:R}))),e&&!m&&n.createElement(a,{className:g,style:s},e),d&&n.createElement(c.Z,{style:F,className:E},d),I&&n.createElement(c.Z,{className:f},I),N,!!x.length&&n.createElement("div",{className:(0,l.cn)(b,k[O])},x.map((({href:e,text:t,newWindow:a,gae:o})=>{return n.createElement(i.Z,{style:B,className:(0,l.cn)("text-small z-10 box-border inline-flex cursor-pointer items-center border-none bg-button-transparent font-button font-semibold text-link-default underline underline-offset-4 antialiased outline-2 outline-offset-2 outline-active transition focus-visible:outline disabled:cursor-not-allowed disabled:text-link-disabled sm:text-base",P),onClick:w,newWindow:a,url:(s=e,q(s)?j.packageLabelUrl?j.packageLabelUrl:K:s),key:e+t+o,"data-eventvalue":o||t,"data-eventlabel":D,target:q(e)?"_blank":"_self"},n.createElement("span",{className:"flex items-center gap-x-2 py-px"},((e,t)=>q(t)&&!j.packageLabelUrl?"Failed to create label. Please try again.":e)(t,e)));var s}))))}return null}))},30626:(e,t,a)=>{a.d(t,{Z:()=>s});var n=a(67294),o=a(70131);const l={triggerOnce:!0,rootMargin:a(13679).lL},s=({forceLoad:e,children:t,makePlaceholder:a,placeholder:s,options:i})=>{const[r,d]=(0,o.YD)({...l,...i});return d||e?n.createElement(n.Fragment,null,t):a?a(r):n.createElement("div",{ref:r},s)}},8838:(e,t,a)=>{a.r(t),a.d(t,{MelodyVideoPlayer:()=>x,default:()=>D});var n=a(67294),o=a(60356),l=a(86706),s=a(91296),i=a.n(s),r=a(70131),d=a(34506),c=a(41487),m=a(13679),u=a(42446),h=a(60950),p=a(70363),y=a(66874);const g="m1-z",b="n1-z",E=({showPlaceholder:e,children:t,widthValue:a="100%",heightValue:o="100%"}={})=>{const[l,s]=(0,n.useState)(!1),i=()=>{s(!0)};return e?n.createElement(n.Fragment,null,l?t:n.createElement("div",{style:{width:a,height:o},className:g},n.createElement("button",{type:"button",className:b,"aria-label":"Play Product Video",onClick:i}))):t};var f=a(12488),P=a(49279),z=a(30626);

1const C="rK-z",v="sK-z",k="tK-z",I="uK-z",L="vK-z",N="wK-z",V="xK-z";class x extends n.Component{state={isPlaying:!1,intervals:[],source:""};componentDidMount(){const{slotDetails:e,slotName:t,slotIndex:a,isAutoplaying:n,trackInView:o}=this.props,{autoplay:l}=e;this.buildResponsiveVideo(),(0,y.Vl)(window,"resize",this.handleResize,null,this),l&&this.setIsPlaying(n??!0),o||(0,p.j)((()=>[h.Mo,{slotDetails:e,slotName:t,slotIndex:a}]))}componentWillUnmount(){this.handleResize.cancel(),window.removeEventListener("resize",this.handleResize)}buildResponsiveVideo=()=>{const{slotDetails:{mobileVideoSrc:e,tabletVideoSrc:t,src:a}}=this.props,n=(0,f.tE)();e&&"mobile"===n?this.setState({source:e}):t&&"tablet"===n?this.setState({source:t}):this.setState({source:a})};handleResize=i()(this.buildResponsiveVideo,250);onVideoEnded=()=>{this.sendVideoAnalytics("ENDED"),this.setState({ended:!0,isPlaying:!1,lastPlayedTime:void 0,intervals:[]})};onVideoPause=()=>{this.state.isPlaying&&(this.setIsPlaying(!1),this.sendVideoAnalytics("PAUSED"),this.setState({intervals:[]}),(0,p.j)((()=>[h.CV,{...this.props,interactionType:"PAUSE"}])))};onVideoPlay=()=>{const{isPlaying:e}=this.state,t=this.melodyVideoElement,a=this.youTubeVideoElement;e||(this.setIsPlaying(!0),(0,p.j)((()=>[h.CV,{...this.props,interactionType:"PLAY"}]))),t?(t.controls=!0,this.trackVideoPlay(t.currentTime,t.duration)):a&&this.trackVideoPlay(a.getCurrentTime(),a.getDuration())};handlePlayerClick=e=>{e.preventDefault();const t=this.melodyVideoElement,{isPlaying:a}=this.state;t&&(t.muted=!1,a?t.pause():t.play())};onVideoTimeUpdate=()=>{const{isPlaying:e}=this.state;if(e){const e=this.melodyVideoElement,t=this.youTubeVideoElement;e?this.trackCurrentTime(e.currentTime):t&&this.trackCurrentTime(t.getCurrentTime())}};setIsPlaying=e=>{this.setState({isPlaying:e})};makeTextHeading(e){return e&&n.createElement("h2",null,e)}sendVideoAnalytics=(e,t)=>{const{slotDetails:{heading:a,productId:n}}=this.props;n?(0,u.L9)(`TE_PRODUCTVIDEO_${e}`,`${n}${t?`:${t}`:""}`):(0,u.L9)(`TE_MELODYVIDEO_${e}`,`${a}${t?`:${t}`:""}`),this.setState({lastEventName:e})};trackCurrentTime=e=>{const{intervals:t,lastPlayedTime:a}=this.state,n=Math.floor(e);Math.abs(n-a)>1&&(this.sendVideoAnalytics("SOUGHT",`${a}:${n}`),(0,p.j)((()=>[h.CV,{...this.props,interactionType:"SEEKED"}]))),n&&n%5==0&&!t.includes(n)?(this.setState({intervals:t.concat([n]),lastPlayedTime:n}),this.sendVideoAnalytics("TIMEUPDATED",n)):this.setState({lastPlayedTime:n})};trackVideoPlay=(e,t)=>{const{ended:a,lastEventName:n}=this.state,o=!a||0!==Math.floor(e)&&e!==t?"PLAYED":"REPLAYED";"REPLAYED"!==n&&this.sendVideoAnalytics(o)};onInViewChange=e=>{const{slotDetails:t,trackInView:a,slotName:n,slotIndex:o}=this.props;a&&e&&(0,p.j)((()=>[h.Mo,{slotDetails:t,slotName:n,slotIndex:o}]))};render(){const{isPlaying:e,source:t}=this.state,{slotName:a,slotDetails:{className:l,poster:s,heading:i,alt:c,isEmbedded:u,componentName:h,embeddedRatio:p,autoplay:y,type:g,loop:b=!1,tracks:f=[]},heightValue:x,isYouTubeVideo:w,widthValue:D,showPlaceholder:S,isAutoplaying:T,isFullWidth:Z,shouldLazyLoad:A}=this.props,H=h===m.Fb,O=T??y,_=s||"",R={file:{attributes:{poster:_,preload:"none"}},youtube:{playerVars:{cc_load_policy:1,cc_lang_pref:"en"}}},W=(0,d.cn)(C,{[k]:"melodyVideoPlayer"===h,[V]:"fullwidth"===g,[v]:Z},l),j=Z?"100%":D;if(o.ZP.canPlay(t)&&w)return n.createElement(z.Z,{forceLoad:!A},n.createElement(P.E.Consumer,null,(e=>{const{testId:l}=e;return n.createElement(r.df,{onChange:this.onInViewChange,className:W,"data-slot-id":a,"data-test-id":l("youtubeVideoPlayer")},this.makeTextHeading(i),n.createElement(E,{showPlaceholder:S,widthValue:j,heightValue:x},n.createElement(o.ZP,{url:t,playing:!!O,onPlay:this.onVideoPlay,onPause:this.onVideoPause,onEnded:this.onVideoEnded,onProgress:this.onVideoTimeUpdate,playsinline:!0,controls:!0,width:j,height:x,config:R,loop:b,ref:e=>this.youTubeVideoElement=e})))})));if(u){const e={};return p&&(e.paddingBottom=p.endsWith("%")?p:`calc(${p} * 100%)`),n.createElement(z.Z,{forceLoad:!A},n.createElement(r.df,{onChange:this.onInViewChange,className:(0,d.cn)(L,l),"data-slot-id":a,style:e},this.makeTextHeading(i),n.createElement("iframe",{src:t,title:i?`${i} video`:c||"Video Content",allowFullScreen:!0})))}return n.createElement(z.Z,{forceLoad:!A},n.createElement(P.E.Consumer,null,(o=>{const{testId:l}=o;return n.createElement(r.df,{onChange:this.onInViewChange,className:W,"data-slot-id":a,"data-test-id":l("melodyVideoPlayer")},this.makeTextHeading(i),n.createElement("video",{onClick:this.handlePlayerClick,ref:e=>this.melodyVideoElement=e,src:t,poster:_,autoPlay:!!O,preload:O?"auto":"metadata",muted:O&&!H,"data-test-muted":O&&!H,height:x,controls:!1,playsInl

1ine:!0,onPlay:this.onVideoPlay,onPause:this.onVideoPause,onEnded:this.onVideoEnded,loop:b,crossOrigin:"anonymous",onTimeUpdate:this.onVideoTimeUpdate},f.map((({src:e,label:t,kind:a,srclang:o="en",default:l})=>n.createElement("track",{key:e,src:e,kind:a,label:t,srcLang:o,default:l})))),n.createElement("button",{type:"button",onClick:this.handlePlayerClick,className:(0,d.cn)(I,{[N]:e})},"Play Video"))})))}}x.defaultProps={isYouTubeVideo:!1,heightValue:"auto",showPlaceholder:!1,shouldLazyLoad:!1};const w=(0,l.$j)((e=>({product:e.product})),{})(x),D=(0,c.P)("ConnectedMelodyVideoPlayer",w)},8259:(e,t,a)=>{a.d(t,{Z:()=>i});var n=a(67294),o=a(73727),l=a(41487),s=a(45803);const i=(0,l.P)("LandingPageLink",(({url:e,newWindow:t,children:a,fallbackNode:l,...i})=>{if(e){let l=o.rU;return(0,s.n_)(e)?i.to=e:(l="a",i.href=e),t&&(i.target="_blank",i.rel="noopener noreferrer"),n.createElement(l,i,a)}return l?n.createElement(l,i,a):null}))},78848:(e,t,a)=>{a.d(t,{Z:()=>i});var n=a(67294),o=a(23699),l=a(8838);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},s.apply(this,arguments)}const i=({type:e,sources:t,src:a,srcset:i,alt:r,poster:d,autoplay:c,loop:m,embeddedRatio:u,shouldLazyLoad:h,isEmbedded:p,tracks:y,isFullWidth:g,slotIndex:b,...E})=>{const f=b<2;if("image"===e)return n.createElement(o.Z,s({},E,{sources:t,src:a,srcset:i,alt:r,shouldLazyLoad:!f&&h,isFullWidth:g,fetchPriority:f?"high":void 0}));if("video"===e){const e={src:a,poster:d,isEmbedded:p,autoplay:c,loop:m,embeddedRatio:u,tracks:y};return n.createElement(l.default,s({},E,{slotDetails:e,shouldLazyLoad:!f&&h}))}return null}},56545:(e,t,a)=>{a.r(t),a.d(t,{ZapposHero:()=>H,default:()=>O});var n=a(67294),o=a(34506),l=a(49409),s=a(99257),i=a(8259),r=a(78848),d=a(41487),c=a(60950),m=a(70363),u=a(42446),h=a(1270),p=a(91145),y=a(43909);const g="YH-z",b="eI-z",E="fI-z",f="gI-z",P="hI-z",z="jI-z",C="kI-z",v="lI-z",k="mI-z",I="nI-z",L="uI-z",N="vI-z",V="zI-z",x="AI-z",w="BI-z",D="CI-z";function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},S.apply(this,arguments)}const T={left:"oI-z",center:"pI-z",right:"qI-z"},Z={top:"rI-z",center:"sI-z",bottom:"tI-z"},A={top:"xI-z",left:"wI-z",bottom:"yI-z"},H=({slotName:e,slotIndex:t,slotDetails:a={},onComponentClick:d,shouldLazyLoad:H,isFullWidth:O,containerStyle:_,contentBoxContainerStyle:R,contentBoxHeadingStyle:W,contentBoxCopyStyle:j,contentBoxLinksStyle:M,pageName:U,pageInfo:$})=>{const{testId:F}=(0,s.Z)(),{componentName:B,heading:K,containerBreak:Y=!1,copy:q,subCopy:G,links:Q=[],eventLabel:X,media:J={},content:ee={}}=a,te=X||B,ae=Q.length>0?Q[0]:null,{primary:ne,secondary:oe,content:le}=J,se=ne&&oe?2:1,{position:ie="outside-left",useImageAsHeading:re,backgroundColor:de,offImageColor:ce="",color:me,textAlign:ue,contentWidth:he,widthFitContent:pe,containerStyle:ye,contentBoxContainerStyle:ge,contentBoxHeadingStyle:be,contentBoxCopyStyle:Ee,contentBoxLinksStyle:fe}=ee,Pe=Y||O;(0,n.useEffect)((()=>{(0,m.j)((()=>[c.wN,{slotDetails:a,slotIndex:t,slotName:e,heroCount:se}]))}),[se,a,t,e]);const ze=(0,n.useCallback)((n=>{d?.(n);const{target:{dataset:{eventvalue:o}}}=n;(0,m.j)((()=>[c.qm,{slotDetails:a,slotIndex:t,slotName:e,heroCount:se,identifier:o}])),(0,u.L9)("TE_LANDING_HERO_CLICK",o||B)}),[B,se,d,a,t,e]);let Ce,ve;const[ke,...Ie]=ie?.split("-")||[];if("inside"===ke){const[e,t]=Ie;Ce=L,ve=(0,o.cn)(T[e],Z[t])}else if("outside"===ke){const[e]=Ie;Ce=A[e]}else"between"===ke&&2===se&&(Ce=x);const Le=ne&&!oe&&"video"===ne.type&&ne.isEmbedded&&K,Ne={...(0,h.PM)(ye),...(0,h.PM)(_)};Le&&(ne.embeddedRatio&&(Ne["--iframe-video-ratio"]=ne.embeddedRatio.endsWith("%")?parseFloat(ne.embeddedRatio)/100:ne.embeddedRatio),he&&(Ne["--hero-content-width"]=he));const Ve={containerStyle:{...(0,h.PM)(ge),...(0,h.PM)(R)},headingStyle:{...(0,h.PM)(be),...(0,h.PM)(W)},copyStyle:{...(0,h.PM)(Ee),...(0,h.PM)(j)},linksStyle:{...(0,h.PM)(fe),...(0,h.PM)(M)}};return n.createElement("div",{className:(0,o.cn)(b,{[z]:Y}),"data-slot-id":e,"data-slotindex":t,"data-test-id":F(`${B}${ie?`:${ie}`:""}`)},n.createElement("div",{className:C},n.createElement("div",{className:P},n.createElement("article",{className:(0,o.cn)(E,{[g]:Pe},"heroComponent",Ce,{[V]:2===se,[k]:pe,[D]:Le}),style:(0,y.rq)(Ne)},n.createElement(r.Z,S({},ne,{className:(0,o.cn)(v),shouldLazyLoad:H,slotName:e,slotIndex:t,isFullWidth:Pe})),n.createElement(r.Z,S({},oe,{className:(0,o.cn)(w),shouldLazyLoad:H,slotName:e,slotIndex:t,isFullWidth:Pe})),n.createElement(l.Z,{className:(0,o.cn)(N,ve,{[f]:de}),styles:Ve,heading:K,copy:q,subCopy:G,imageData:le,links:Q,eventLabel:te,onClick:ze,useImageAsHeading:re,backgroundColor:de,color:me,mobileColor:ce,textAlign:ue,contentWidth:he,shouldLazyLoad:H,isFullWidth:Pe,pageName:U,pageInfo:$}),ae&&!(0,p.U)(U)&&n.createElement(i.Z,{className:I,onClick:ze,"aria-hidden":!0,tabIndex:"-1",newWindow:ae.newWindow,url:ae.href,"data-eventvalue":ae.gae,"data-eventlabel":te},ae.text)))))},O=(0,d.P)("ZapposHero",H)},13747:(e,t,a)=>{a.r(t),a.d(t,{ZapposPromoGroup:()=>N,default:()=>V});var n=a(67294),o=a(34506),l=a(70363),s=a(42446),i=a(60950),r=a(99257),d=a(41487),c=a(49409),m=a(8259),u=a(78848);const h="mH-z",p="nH-z",y="oH-z",g="pH-z",b="qH-z",E="rH-z",f="sH-z",P="tH-z",z="uH-z",C="vH-z",v="wH-z";function k(){return k=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},k.apply(this,arguments)}const I={bottom:v,top:"xH-z",right:"yH-z",left:"zH-z"},L=e=>{const{heading:t,copy:a,subCopy:d,links:g=[],onComponentClick:b,slotIndex:E,slotName:f,heroCount:P,componentName:z,itemsPerRow:C,itemsPerRowMobile:L,eventLabel:N,media:V={},content:{useImageAsHeading:x,linkStyle:w,backgroundColor:D="transparent",color:S,textAlign:T,width:Z,position:A="outside-bottom"}={},shouldLazyLoad:H}=e,{testId:O}=(0,r.Z)(),_=g.length>0?g[0]:null,R=N||z,{primary:W,content:j}=V,[M,U]=(A||"").split("-"),$="outside"===M?I[U]:v,F=(0,n.useCallback)((t=>{b?.(t);const{target:{dataset:{eventvalue:a}}}=t;(0,l.j)((()=>[i.qm,{slotDetails:e,slotIndex:E,slotName:f,heroCount:P,identifier:a}])),(0,s.L9)("TE_LANDING_HERO_CLICK",a||z)}),[z,P,b,e,E,f]);(0,n.useEffect)((()=>{(0,l.j)((()=>[i.wN,{slotDetails:e,slotIndex:E,slotName:f,heroCount:P,name:z}]))}),[z,P,e,E,f]);const B={width:Z,"--desktopWidth":C,"--mobileWidth":L};return D&&(B.backgroundColor=D),n.createElement("article",{className:(0,o.cn)(y,$),"data-test-id":O("zapposPromoSection"),style:B},n.createElement(u.Z,k({},W,{shouldLazyLoad:H,slotName:f,slotIndex:E})),n.createElement(c.Z,{className:p,heading:t,copy:a,subCopy:d,links:g,imageData:j,HeadingTag:"h3",linkStyle:w,eventLabel:R,onClick:F,useImageAsHeading:x,color:S,backgroundColor:D,textAlign:T,shouldLazyLoad:H}),_&&n.createElement(m.Z,{className:h,onClick:F,"aria-hidden":!0,tabIndex:"-1",newWindow:_.newWindow,url:_.href,"data-eventlabel":R,"data-eventvalue":_.gae||_.text},_.text))},N=({slotDetails:e={},onComponentClick:t,slotIndex:a,slotName:l,shouldLazyLoad:s})=>{const{heading:i,background:r="",containerBreak:d=!1,scrollable:c=!1,sections:m,componentName:u,itemsPerRow:h=3,itemsPerRowMobile:p=2}=e;return n.createElement("section",{className:(0,o.cn)(g,b,{[C]:c}),"data-slot-id":l,"data-slotindex":a,style:{"--outer-promo-bg":r||"transparent"}},n.createElement("div",{className:(0,o.cn)(f,{[z]:r}),style:{"--inner-promo-bg":r&&d?r:"transparent"}},i&&n.createElement("h2",null,i),n.createElement("div",{className:P},n.createElement("div",{className:(0,o.cn)(E)},m.map(((e,o)=>n.createElement(L,k({},e,{heaing:i,key:e.heading+e.copy||o,shouldLazyLoad:s,componentName:u,itemsPerRow:h,itemsPerRowMobile:p,slotIndex:a,slotName:l,heroCount:m.length,onComponentClick:t}))))))))},V=(0,d.P)("ZapposPromoGroup",N)},91145:(e,t,a)=>{a.d(t,{U:()=>o});var n=a(25179);const o=e=>Object.keys(n.pz).includes(e)}}]);
2//# sourceMappingURL=marty-6pm.components-landing-ZapposHero.c17a1fff9213d6adde20.js.map