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

www.tv.tycoon.systems/documentation

import React from"react";import Tooltip from"@mui/material/Tooltip";import{resolveDefaultStyle,resolveImg,doUploadImageForLineupParticipant}from"../../utility/ecommerce";import{getFormattedTime}from"../../util";import PIMStyles from"./ProductImageManager.module.scss";import{allowedTypes,defaultLineup}from"./defaults";import{v4 as uuidv4}from"uuid";const Module=a=>{const[t,e]=React.useState({}),[i,n]=React.useState(null),[l,r]=React.useState(null),[u,o]=React.useState(null),[d,p]=React.useState(new FormData),[c,,]=React.useState(new Map),[m,s]=React.useState(!0);var g=React.useRef();const y=React.useRef(),f=React.useRef(),h=React.useRef();resolveDefaultStyle(a.product,t,e,i,n);const R=React.useCallback(e=>{var t;e.currentTarget&&e.currentTarget.getAttribute("option")&&(t={...a.product.detailmeta},"add"===e.currentTarget.getAttribute("option")?t.lineup&&t.lineup.length<10&&(t.lineup.push(defaultLineup()),a.setCurrentLineupEditing(t.lineup.length-1),o(t.lineup[t.lineup.length-1].id),y.current.value="",f.current.value="",h.current.value=null):"remove"===e.currentTarget.getAttribute("option")?t.lineup&&0<t.lineup.length&&(t.lineup.pop(),a.setCurrentLineupEditing(-1<t.lineup.length-1?t.lineup.length-1:null),0!==t.lineup.length&&o(t.lineup[t.lineup.length-1].id),y.current.value="",f.current.value="",h.current.value=null):"setSelected"===e.currentTarget.getAttribute("option")&&(e=e.currentTarget.getAttribute("index"),isNaN(e)||(a.setCurrentLineupEditing(e),o(t.lineup[e].id),y.current.value=t.lineup[e].title,f.current.value=t.lineup[e].description,h.current.value=t.lineup[e].time)))}),v=(React.useEffect(()=>{let e=a.currentLineupEditing;null===a.currentLineupEditing&&(a.setCurrentLineupEditing(0),e=0),a.editing&&a.editing.detailmeta&&a.editing.detailmeta.lineup&&0<a.editing.detailmeta.lineup.length&&a.editing.detailmeta.lineup[e]&&y.current&&(o(a.editing.detailmeta.lineup[e].id),y.current.value=a.editing.detailmeta.lineup[e].title,f.current.value=a.editing.detailmeta.lineup[e].description,h.current.value=a.editing.detailmeta.lineup[e].time)},[a.currentLineupEditing,a.editing.id,a?.editing?.detailmeta?.lineup,y.current,f.current,h.current]),React.useRef()),E=React.useCallback(e=>{a?.setWarning&&a.setWarning(null),r(e.currentTarget.getAttribute("lineupid")),setTimeout(()=>{v.current&&v.current.click()},1)});var T=React.useCallback(e=>{try{if(e&&e.target&&e.target.files){var t=e.target.files;if(t&&0<t.length){const n=Array.from(t).slice(0,1<t.length?1:t.length).filter(e=>e.type&&-1<allowedTypes.indexOf(e.type)).map(e=>{var t=e.slice(0,e.size,e.type),i=allowedTypes[allowedTypes.indexOf(e.type)].match(/\/([a-zA-Z0-9].*)/)[1];return new File([t],uuidv4()+"."+i,{type:e.type})});if(a?.product?.new&&a?.appendFormData){a.appendFormData(n,"lineup",l);var i=d;try{i.delete(l)}catch(e){}try{c.delete(l)}catch(e){}i.append(l,n[0]),p(i),s(!1),setTimeout(()=>{s(!0)},1)}else(async()=>{if(!a.fetchBusy&&a.apiUrl&&a.domainKey&&a._loggedIn&&a.editing&&a.publishProduct){const t=new FormData,i=[];n&&(n.forEach(e=>{t.append("image",e),i.push({name:e.name,modif:"lineup"})}),t.append("imgNames",JSON.stringify(i))),t.append("domainKey",a.domainKey),t.append("hash",a._loggedIn.hash),t.append("identifier",a._loggedIn.identifier),t.append("product",a.editing.id),t.append("detailmeta",JSON.stringify(a.editing.detailmeta)),t.append("lineupid",l),console.log("Upload FOr ",l);new Promise(async(t,e)=>{try{t(await a.publishProduct("publish","true",!0))}catch(e){t(null)}}).then(async()=>{a.setFetchBusy&&(a.setFetchBusy(!0),setTimeout(()=>{a.setFetchBusy(!1)},1e4)),console.log(a.editing);var e=await doUploadImageForLineupParticipant(a.apiUrl,a.domainKey,a.editing.id,a._loggedIn,t);e&&e.product&&e.product.products?(v?.current?.value&&(v.current.value=null),a.setFetchBusy&&a.setFetchBusy(!1),a.setCombinedFeed&&(console.log("Set Combined Feed",e.product.products,a.setCombinedFeed),a.setCombinedFeed(e.product.products),a.setEditing)&&(e=e.product.products.find(e=>e.id===a.editing.id))&&(a.setEditing(e),e.detailmeta)&&a.setEditingOptionsMeta(e.detailmeta)):v.current=null})}})()}}}catch(e){console.log(e),a?.setWarning&&a.setWarning({message:"There was an issue uploading images"})}}),b=t&&a.product&&a.product.styles&&a.product.styles.find(e=>e.sid===t)?a.product.styles.find(e=>e.sid===t):null,w=b&&b.option?i?b.option.find(e=>e.sid===i):b.option[0]||null:null,I=(a.product&&a.product.owner&&a._loggedIn&&a._loggedIn.identifier&&(a._loggedIn.identifier,a.product.owner),console.log(a.product,a.editingOptionsMeta,t,"$",a.currentDefinePriceCurrency,a.priceInput,b,a.editing,a.currentLineupEditing),a?.editing?.id&&a?.product?.id&&a.editing.id===a.product.id),I=I&&a?.editingOptionsMeta||!I&&a.product.detailmeta;return React.createElement("div",{className:""+a.className,id:a.product&&a.product.id?a.product.id:"",selectedstyle:b?.sid?b.sid:"",currentoption:w?.sid?w.sid:""},"virtual"===a?.editingOptionsMeta?.productType?React.createElement("div",null,React.createElement("div",null,I.livestream?React.createElement("div",{style:{background:"#222222",marginTop:".25rem",marginBottom:".25rem",borderRadius:".25rem",padding:".25rem"}},React.createElement("div",{className:"lineup_Label",style:{fontSize:".8rem",fontWeight:"600"}},"Lineup"),React.createElement("div",null,React.createElement("div",{className:"lineup_uuid",style:{fontSize:".6rem"},ref:g},u??""),React.createElement(Tooltip,{title:"Enter participants name",placement:"bottom"},React.createElement("input",{type:"text",placeholder:"Name",style:{fontSize:".8rem",width:"100%"},onInput:a.setOptionsMetaData,option:"lineupTemp",option2:"title",ref:y})),React.createElement(Tooltip,{title:"Optional: Enter description of participant",placement:"bottom"},React.createElement("input",{type:"text",placeholder:"Description",style:{fontSize:".8rem",width:"100%"},onInput:a.setOptionsMetaData,option:"lineupTemp",option2:"description",ref:f})),React.createElement(Tooltip,{title:"Optional: Enter expected time for lineup participant to be performing",placement:"bottom"},React.createElement("input",{type:"time",placeholder:"Time",style:{fontSize:".8rem",width:"100%"},onInput:a.setOptionsMetaData,option:"lineupTemp",option2:"time",ref:h})),React.createElement("div",{className:"flex gap-p2",style:{alignItems:"center",marginTop:".125rem"}},a.product.detailmeta.lineup&&a.product.detailmeta.lineup.length<10&&-1<a.product.detailmeta.lineup.length?React.createElement(Tooltip,{title:"Add another Lineup Participant",placement:"bottom"},React.createElement("button",{style:{width:"100%",padding:".125rem 0"},onClick:R,option:"add"},"Add")):null,a.product.detailmeta.lineup&&a.product.detailmeta.lineup[a.currentLineupEditing]?React.createElement(Tooltip,{title:"Remove this Lineup Participant",placement:"bottom"},React.createElement("button",{style:{width:"100%",padding:".125rem 0"},onClick:R,option:"remove"},"Remove")):null),React.createElement("div",{className:"flex gap-p5",style:{overflowX:"auto",overflowY:"hidden",marginTop:".125rem"}},a.product.detailmeta.lineup&&a.product.detailmeta.lineup.map?(m?a.product.detailmeta.lineup:[]).map(t=>{var i=Object.assign({},t);if(d.get(t.id)){var n=d.get(t.id);let e;c.get(t.id)?e=c.get(t.id):(e=URL.createObjectURL(n),c.set(t.id,e)),i.image=e,i.imageType="raw"}return i}).map((e,t)=>React.createElement("div",{className:"lineupItem_editing "+(e.id===u?"lineupItem_current":""),style:{maxWidth:"75px"},onClick:R,option:"setSelected",index:t,key:t},React.createElement("div",{style:{fontSize:".9rem",fontWeight:"600",overflowWrap:"anywhere"}},""!==e.title?e.title:React.createElement("div",{style:{opacity:".7"}},"Participant")),React.createElement("div",{style:{marginTop:".125rem"}},React.createElement("div",{className:"ProductImageManager_container",style:{position:"relative",width:"68px",height:"68px"}},React.createElement("div",{className:""+PIMStyles.productImageListThumbnailContainer,style:{backgroundImage:"url("+("raw"===e?.imageType?""+e.image:`${a.cdn.static}/${e.image})`),height:"68px",backgroundSize:"cover",borderRadius:"1rem"}},React.createElement(Tooltip,{title:"Click here to upload an image for your lineup participant",placement:"bottom"},React.createElement("div",{className:PIMStyles.changeImageButtonSmall+" image material-icons",onClick:E,lineupid:e.id},"image")),React.createElement("img",{src:""+resolveImg(null),className:"Product_img",style:{width:"68px",height:"68px",borderRadius:"1rem",opacity:`url(${a.cdn.static}/${e.image})`?0:1}})))),e.time?React.createElement("div",{className:"lineupItem_time",style:{fontSize:"1rem"}},getFormattedTime(e.time,{simple:!0})):null)):null)),React.createElement("input",{type:"file",style:{display:"none"},ref:v,onChange:T})):null)):React.createElement("div",null))};export default Module;