UNPKG

@tycoonsystems/tycoon-modules

Version:
1 lines 9.7 kB
function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a,l=arguments[t];for(a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e}).apply(this,arguments)}import React from"react";import{useRouter}from"next/router";import Slider from"react-slick";import Styles from"../../Presentation.module.scss";import{v4 as uuidv4}from"uuid";import{fireGlobalEvent,getTimeRemaining}from"@tycoonsystems/tycoon-modules/utility/utility";import Image from"next/image";import Link from"next/link";import{FetchHandler}from"@tycoonsystems/tycoon-modules/utility/fetch";import{normalizeData,resolveMainLink,datePassed,resolveGoodDate,handleSliderLinkClick,handleSliderLinkClickDown,handleSliderLinkClickUp}from"@tycoonsystems/tycoon-modules/presentation/utility";import{retrieveDay,retrieveMonth}from"@tycoonsystems/tycoon-modules/utility/utility/date";import{ConfirmationNumber}from"@mui/icons-material";import{resolveImage}from"@tycoonsystems/tycoon-modules/utility/utility/image";const tightResponsive=[{breakpoint:4e3,settings:{slidesToShow:10,touchThreshold:120}},{breakpoint:2248,settings:{slidesToShow:8,touchThreshold:100}},{breakpoint:1624,settings:{slidesToShow:6,touchThreshold:100}},{breakpoint:1268,settings:{slidesToShow:4,touchThreshold:80}},{breakpoint:680,settings:{slidesToShow:3,touchThreshold:60}},{breakpoint:576,settings:{slidesToShow:2,touchThreshold:40}},{breakpoint:350,settings:{slidesToShow:1,touchThreshold:20}}],moduleName="IndexHello",RESET_CTA_TIMER=18e4,Module=l=>{const t=useRouter(),[e,n]=React.useState(!1),[i,s]=React.useState(null),[,a]=React.useState(null),[o,,]=React.useState(0),[,r]=React.useState(!1),[c,m]=React.useState(!1),[d,u]=React.useState(null),h=React.useRef();React.useRef();var p=React.useRef();l._LocalEventEmitter.unsubscribe(i),l._LocalEventEmitter.subscribe(i,e=>{e&&e.dispatch&&"updateCountdown"===e.dispatch&&null!==(e=l.items&&l.items[o]?l.items[o].date:null)&&(e="string"==typeof e?new Date(Number(e)):new Date(e),isNaN(e)||(e=getTimeRemaining(e,new Date))&&a(e))}),React.useEffect(()=>{if(!e){const a=uuidv4();s(a),l.request&&m(!0),setInterval(()=>{l._LocalEventEmitter.dispatch(a,{dispatch:"updateCountdown"})},1e3),setTimeout(()=>{var e=document.getElementsByClassName("slider_slides_"+a);if(e&&e[0]&&e[0].childNodes&&e[0].childNodes[0]&&e[0].childNodes[0].childNodes&&e[0].childNodes[0].childNodes[0]){const t=e[0].childNodes[0].childNodes[0];t.style.transition="500ms",t.style.left="-25px",setTimeout(()=>{t&&(t.style.left="0")},2e3)}},2e3),n(!0)}},[e,l.request]);const g=React.useCallback(async e=>{if(r(!0),e?.currentTarget?.getAttribute("ctaAfter")){e.currentTarget.innerHTML=e.currentTarget.getAttribute("ctaAfter");const t=e.currentTarget.getAttribute("cta"),a=e.currentTarget;setTimeout(()=>{try{a.innerHTML=t}catch(e){}},RESET_CTA_TIMER)}fireGlobalEvent(e,l._LocalEventEmitter)});const y=React.useMemo(()=>{return d&&c?normalizeData(d):l?.items?.map?normalizeData(l.items):[{},{},{},{},{},{}]},[d,c,l?.items]);var S={infinite:!1,speed:500,swipeToSlide:!0,slidesToScroll:1,arrows:!1,responsive:l?.tight?tightResponsive:[{breakpoint:4e3,settings:{slidesToShow:6,touchThreshold:120}},{breakpoint:1920,settings:{slidesToShow:5,touchThreshold:100}},{breakpoint:1680,settings:{slidesToShow:4,touchThreshold:80}},{breakpoint:1280,settings:{slidesToShow:3,touchThreshold:60}},{breakpoint:900,settings:{slidesToShow:2,touchThreshold:40}},{breakpoint:570,settings:{slidesToShow:1,touchThreshold:20}}]};const C=React.useCallback(e=>{handleSliderLinkClickUp(e,t)});var N=React.useMemo(()=>y?.map?y.map((e,t)=>{var a=e?.date&&!isNaN(new Date(e.date))?new Date(e.date):"";return React.createElement("div",{className:`swiper-slide ${Styles.IndexItemUpperContainer} ${l.tall?""+Styles.IndexItemsUpperContainerTall:null} ${l.tight?""+Styles.IndexItemsUpperContainerTight:null} ${moduleName}_Container ${i}_IndexItemUpperContainer `+(e.important?"slider_item_important":""),key:t},React.createElement(Link,{href:resolveMainLink(e),onClick:handleSliderLinkClick,onMouseDown:handleSliderLinkClickDown,onMouseUp:C,draggable:!1,style:{alignSelf:"center"}},React.createElement("div",{className:`${Styles.BgContainer} ${l.tall?""+Styles.BgContainerTall:null} ${l.tight?""+Styles.BgContainerTight:null} ${moduleName}_BgContainer `+l.bgClassName,style:{backgroundImage:`url(${resolveImage(l,e,e?.leadBg??null,"bg")})`,position:"relative"}},l.children,React.createElement("div",{className:`${Styles.FillPageContainer} ${moduleName}_FillPageContainer`},React.createElement("div",{className:`${Styles.TimeContainer} ${moduleName}_TimeContainer `+l.timeContainerClassName},e?.showSimpleDate&&a?.getMonth&&a?.getDate?React.createElement("div",{className:`${Styles.TimeSimple} ${moduleName}_TimeSimple ${l.timeSimpleClassName} `+(datePassed(e.date)?""+Styles.DatePassed:"")},React.createElement("div",{className:Styles.TimeShowContainer+" flex gap-p5"},React.createElement("div",{className:""+Styles.dateIconContainer},React.createElement("div",{className:""+Styles.dateIconMonth},retrieveMonth(a.getMonth())),React.createElement("div",{className:""+Styles.dateIconDate},a.getDate())),React.createElement("div",{className:""+Styles.dateMetaContainer},React.createElement("div",{className:""+Styles.dateText},retrieveDay(a.getDay()),", ",a.toLocaleString("en-US",{month:"long"})," ",a.toLocaleDateString("en-US",{day:"2-digit"})),React.createElement("div",{className:Styles.timeMeta+" flex gap-p2",style:{alignContent:"center"}},e.created&&!isNaN(new Date(e.created))&&new Date(e.created).getTime()>(new Date).getTime()-1296e6?React.createElement("div",{className:"newItem",style:{fontSize:".7rem"}},React.createElement("span",null,"New"),React.createElement("span",{style:{fontSize:".7rem"},className:"star material-icons"},"star")):null,React.createElement("div",{className:""+Styles.timeText},a.toLocaleString("en-US",{hour12:!0,hour:"2-digit",minute:"2-digit"})),"ticket"===e?.item?.type?React.createElement("div",{className:""+Styles.ticketIcon,style:{height:"1rem"}},React.createElement(ConfirmationNumber,{style:{fontSize:"1rem",height:"1rem"}})):null)))):null)))),React.createElement("div",null,React.createElement("div",{className:`${Styles.MetaContainer} ${moduleName}_MetaContainer `+l.metaContainerClassName},""!==e?.icon?React.createElement("div",{className:`${Styles.IconContainer} ${moduleName}_IconContainer `+l.iconContainerClassName},React.createElement(Link,{href:"/p?u="+(e?.author??""),onClick:handleSliderLinkClick,onMouseDown:handleSliderLinkClickDown,onMouseUp:C,draggable:!1,style:{alignSelf:"center"}},React.createElement(Image,{loader:()=>resolveImage(l,e,e?.icon??null,"icon"),src:resolveImage(l,e,e?.icon??null,"icon"),style:{maxWidth:"60px",borderRadius:"4rem",minHeight:"50px"},alt:e?.author??"",width:e?.iconWidth??"50",height:e?.iconHeight??"50",layout:"responsive"}))):null,React.createElement("div",{className:`${Styles.DataContainer} ${moduleName}_DataContainer `+l.DataContainerClassName},React.createElement(Link,{href:resolveMainLink(e),onClick:handleSliderLinkClick,onMouseDown:handleSliderLinkClickDown,onMouseUp:C,draggable:!1,style:{alignSelf:"center"}},React.createElement("div",{className:`${Styles.Lead} ${moduleName}_Lead `+l.leadClassName},e?.title??"")),React.createElement("div",{className:`${Styles.CtaHolder} ${moduleName}_CtaHolder `+l.CtaHolderClassName},React.createElement(Link,{href:"/p?u="+e?.author,onClick:handleSliderLinkClick,onMouseDown:handleSliderLinkClickDown,onMouseUp:C,draggable:!1,style:{alignSelf:"center"}},React.createElement("div",{className:`${Styles.Author} ${moduleName}_Author `+l.authorClassName},e?.author??"")),e?.item?.id&&e?.item?.style&&e?.item?.option?React.createElement("button",{className:`${Styles.CtaButton} ${moduleName}_Cta `+l.ctaClassName,onClick:g,action:-1<["add_to_cart","buy"].indexOf(e?.action)?e.action:"add_to_cart",item:e?.item?.id,selectedstyle:e?.item?.style,currentoption:e?.item?.option,ref:h,ctaAfter:e.ctaAfter,cta:e.cta},e.cta):null),l?.action&&l?.actionLabel?React.createElement("button",{onClick:l.action,record:e.id,style:{marginTop:".25rem"}},l.actionLabel):null))))}):null),S=l?.sliderStyle?React.createElement(Slider,_extends({},S,{className:`${Styles.IndexItemsContainer} swiper-wrapper slider_slides ${moduleName}_IndexItemsContainer slider_slides_${i} `+l.IndexItemsContainerClassName}),N):React.createElement("div",{className:`${Styles.IndexItemsContainer} ${Styles.IndexItemsContainerSimple} ${moduleName}_IndexItemsContainerSimple ${l?.verticalIndex?`${Styles.IndexItemsContainerVertical} ${moduleName}_IndexItemsContainerVertical`:""} swiper-wrapper slider_slides ${moduleName}_IndexItemsContainer slider_slides_${i} `+l.IndexItemsContainerClassName},N);return console.log("Use Items",y),console.log(),React.createElement("div",{className:`${Styles.IndexHelloContainer} sliderContainer_${i} ${moduleName}_IndexHelloContainer `+l.className,ref:p,style:l?.style??{}},l.groupLabel?React.createElement("div",{className:`${Styles.GroupLabelContainer} ${moduleName}_groupLabelContainer `+l.groupLabelContainerClassName},React.createElement("div",{className:`${Styles.GroupLabel} ${moduleName}_groupLabel `+l.groupLabelClassName},l.groupLabel)):null,c&&l?.request?.handlerArgs?React.createElement(FetchHandler,_extends({handlerArgs:l.request.handlerArgs,receiveData:e=>{if(e?.data?.fetchedData){const t=[];var e=e.data.fetchedData.map(e=>Object.entries(e).map(e=>e[1].map(e=>Array.isArray(e)?e.map(e=>e.id?(t.push(e),e):null):e.id?(t.push(e),e):null))).flat(3);e&&(e=e.filter(Boolean),u(e))}}},l)):null,React.createElement("div",{className:"swipe slider_"+i},S))};export default Module;