@tycoonsystems/tycoon-modules/modules/ecommerce/product/ProductPage.js

www.tv.tycoon.systems/documentation

function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a,r=arguments[t];for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e}).apply(this,arguments)}import React from"react";import Image from"next/image";import Tooltip from"@mui/material/Tooltip";import{addToCart,resolveDefaultStyle,resolveImg,resolveStyles,resolveRegionBasedPrice,updateCart,doUploadImageForLineupParticipant}from"../../utility/ecommerce";import{fireGlobalEvent}from"../../utility/utility";import{getFormattedDate,getFormattedTime,isObjectEmpty}from"../../util";import AllInclusive from"@mui/icons-material/AllInclusive";import ConfirmationNumber from"@mui/icons-material/ConfirmationNumber";import Inventory from"@mui/icons-material/Inventory";import Stadium from"@mui/icons-material/Stadium";import{ProductImageManager}from".";import Slider from"react-slick";import PIMStyles from"./ProductImageManager.module.scss";import{v4 as uuidv4}from"uuid";import{ReactCarouselCss}from"../../internal/localImports";const Module=a=>{const[t,r]=React.useState(!1),[,l]=React.useState(null),[i,c]=React.useState(0),[n,o]=React.useState({}),[s,m]=React.useState(null),u=React.useRef();React.useEffect(()=>{var e;t||(e=uuidv4(),l(e),r(!0))},[t,r,a.product]),React.useCallback(t=>{var e;t&&t.currentTarget&&t.currentTarget.value&&(o(t.currentTarget.value),e=a.product.styles.find(e=>e.sid===t.currentTarget.value),console.log(e),e)&&e.option&&e.option[0]&&e.option[0].sid&&m(e.option[0].sid)}),React.useCallback(e=>{m(e.currentTarget.value)});var e=React.useCallback(async e=>{fireGlobalEvent(e,a._LocalEventEmitter)}),d=a?.productData?.product??null;resolveDefaultStyle(d,n,o,s,m);const p=n&&d?.styles&&d.styles.find(e=>e.sid===n)?d.styles.find(e=>e.sid===n):null;p&&p.option&&(s?p.option.find(e=>e.sid===s):p.option[0]),console.log(p,d,n),a.product&&a.product.owner&&a._loggedIn&&a._loggedIn.identifier&&(a._loggedIn.identifier,a.product.owner);console.log(a.product,a.editingOptionsMeta,n,"$",a.currentDefinePriceCurrency,a.priceInput,p,a.editing,a);var g=React.useMemo(()=>resolveRegionBasedPrice(a,p),[a.product,p,"$"]),f={infinite:!1,speed:500,swipeToSlide:!0,touchThreshold:60,arrows:!1,beforeChange:(e,t)=>{t!==i&&c(t)}};const v=React.useCallback(e=>{e?.currentTarget?.getAttribute&&(e=e.currentTarget.getAttribute("i"),u.current.slickGoTo(e))});return console.log(d,g),React.createElement(React.Fragment,null,ReactCarouselCss,React.createElement("div",{className:PIMStyles.container+" "+a.className},React.createElement("div",{className:""+PIMStyles.innerContainer},React.createElement("div",{className:""+PIMStyles.leadProductContainer},React.createElement("div",{className:""+PIMStyles.singleProductCarouselProvider},React.createElement("div",{className:""+PIMStyles.productSliderThumbnailListContainer},d?.images?d.images.map((e,t)=>React.createElement("div",{slide:t,key:t,className:""+PIMStyles.productSliderThumbSelectMin,onClick:v,i:t},React.createElement(Image,{className:""+PIMStyles.sliderThumbSelectMinImg,loader:()=>a?.cdn?.static?a.cdn.static+"/"+e.name:null,src:a?.cdn?.static?a.cdn.static+"/"+e.name:null,alt:"Title",width:35,height:45,layout:"responsive"}))):null),React.createElement(Slider,_extends({},f,{className:""+PIMStyles.productSliderProductContainer,ref:u}),d?.images?d.images.map((e,t)=>React.createElement("div",{index:t,key:t},React.createElement("div",{className:""+PIMStyles.productSliderProductImg,style:{backgroundImage:`url(${a.cdn.static}/${e.name})`}}))):null)),React.createElement("div",null,React.createElement("h1",{className:""+PIMStyles.productPageTitle},d?.name??null),React.createElement("div",null,React.createElement("div",null,d?.detailmeta?.description??null)),React.createElement("div",null,React.createElement("div",{className:"flex gap-p2",style:{margin:".125rem 0"}},React.createElement("div",{style:{fontSize:"1.5rem",fontWeight:600}},React.createElement("span",null,g?.symbol??null),React.createElement("span",null,g?.price??null)),React.createElement("div",{className:"Product_CurrencyLabel",style:{fontSize:"1.3rem",fontWeight:600,background:"rgba(150, 150, 150, .5)",padding:".075rem",borderRadius:".25rem"}},g?.currency??"USD"))),React.createElement("div",null,React.createElement("div",{className:"flex gap-p2 wrap",style:{marginTop:".5rem"}},React.createElement("button",{onClick:e,item:d?.id,selectedstyle:n,currentoption:s,action:"add_to_cart"},"Add To Cart"),d?.detailmeta?.subscription?React.createElement("button",{onClick:e,item:d?.id,selectedstyle:n,currentoption:s,action:"add_to_cart_subscribe"},"Subscribe"):null)))))))};export default Module;