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

www.tv.tycoon.systems/documentation

import React from"react";import{resolveImg,doUploadImageForProduct}from"../../utility/ecommerce";import{isObjectEmpty}from"../../util";import Tooltip from"@mui/material/Tooltip";import PIMStyles from"./ProductImageManager.module.scss";import{v4 as uuidv4}from"uuid";const allowedTypes=["image/jpeg","image/png","image/gif"],Module=r=>{const[e,t]=React.useState(!1),[a,c]=React.useState(null),[s,n]=React.useState(null),[i,d]=React.useState(null),[,m]=React.useState(0),[l,o]=React.useState([]),g=React.useRef();var u=React.useRef(),p=(React.useEffect(()=>{e||t(!0)},[e,t,r.product]),React.useEffect(()=>{r.product&&r.product.id!==i&&(d(r.product.id),n(null),m(0))},[r.product]),React.useCallback(e=>{c(null),g.current&&g.current.click()})),y=React.useCallback(e=>{try{if(e&&e.target&&e.target.files){var t=e.target.files;if(t&&0<t.length){const i=Array.from(t).slice(0,4<t.length?4:t.length).filter(e=>e.type&&-1<allowedTypes.indexOf(e.type)).map(e=>{var t=e.slice(0,e.size,e.type),a=allowedTypes[allowedTypes.indexOf(e.type)].match(/\/([a-zA-Z0-9].*)/)[1];return new File([t],uuidv4()+"."+a,{type:e.type})});if(r.editing&&r.editing.new&&r.passTempImages){r.passTempImages(i);var a=new FileReader;a.onload=function(e){n(e.target.result)},a.readAsDataURL(i[0])}else try{(async()=>{if(!r.fetchBusy&&r.apiUrl&&r.domainKey&&r._loggedIn&&r.editing){const t=new FormData,a=[];i&&(i.forEach(e=>{t.append("image",e),a.push({name:e.name,modif:"productImg"})}),t.append("imgNames",JSON.stringify(a))),t.append("domainKey",r.domainKey),t.append("hash",r._loggedIn.hash),t.append("identifier",r._loggedIn.identifier),t.append("product",r.editing.id),r.setFetchBusy&&(r.setFetchBusy(!0),setTimeout(()=>{r.setFetchBusy(!1)},1e4)),console.log(t.get("image"),i);var e=await doUploadImageForProduct(r.apiUrl,r.domainKey,r.editing.id,r._loggedIn,t);e&&e.product&&e.product.products&&(r.setCombinedFeed&&(r.setCombinedFeed(e.product.products),r.setEditing)&&(e=e.product.products.find(e=>e.id===r.editing.id))&&r.setEditing(e),r.setFetchBusy)&&r.setFetchBusy(!1)}})()}catch(e){}}}}catch(e){console.log(e),c({message:"There was an issue uploading images"})}});React.useEffect(()=>{!r.editing||r.editing.new||s||r.editing.images&&r.editing.images[0]&&r.editing.images[0].name&&r.cdn&&r.cdn.static&&n(r.cdn.static+"/"+r.editing.images[0].name),r.product&&!s&&r.product.images&&r.product.images[0]&&r.product.images[0].name&&r.cdn&&r.cdn.static&&n(r.cdn.static+"/"+r.product.images[0].name)},[r.editing,s,r.product]),React.useEffect(()=>{r.editing?o(r.editing.images):r.product&&o([])},[r.editing,r.product]);const f=React.useCallback(e=>{if(e?.target){const t=e.target.getAttribute("selector")??e.target.parentElement.getAttribute("selector");t&&r?.product?.images&&r?.cdn?.static&&(e=r.product.images.find(e=>e.name===t))&&n(r.cdn.static+"/"+e.name)}}),R=(t,e,a)=>{if(s){console.log(s);const n=s.match(/\.[^\/]+\/(.+)$/)&&s.match(/\.[^\/]+\/(.+)$/)[1]?s.match(/\.[^\/]+\/(.+)$/)[1]:null;var i,c;n&&r?.product?.images&&Array.isArray(r.product.images)&&r?.setEditing&&(c=(i=[...r.product.images]).findIndex(e=>e.name===n),a&&i.map(e=>{delete e[t]}),-1<c)&&(i[c][t]=e,a=Object.assign(r.product,{images:i}),r.setEditing(a))}};var I=React.useCallback(e=>{R("bgImg",!0,!0)}),h=React.useCallback(e=>{R("leadImg",!0,!0)}),b=r?.product?.images?r.product.images.find(e=>e?.bgImg):null,E=r?.product?.images?r.product.images.find(e=>e?.leadImg):null,b=s?.match&&s.match(/\.[^\/]+\/(.+)$/)&&b?.name&&s.match(/\.[^\/]+\/(.+)$/)[1]===b.name,E=s?.match&&s.match(/\.[^\/]+\/(.+)$/)&&E?.name&&s.match(/\.[^\/]+\/(.+)$/)[1]===E.name;return React.createElement("div",{className:`${r.className} ${PIMStyles.productImageManagerContainer} ProductImageManager_container`,style:{position:"relative"}},r.editing&&!isObjectEmpty(r.editing)?React.createElement(React.Fragment,null,React.createElement("input",{type:"file",style:{display:"none"},ref:g,onChange:y}),React.createElement(Tooltip,{title:"Click here to upload an image for your product",placement:"bottom"},React.createElement("div",{className:PIMStyles.changeImageButton+" image material-icons",onClick:p},"image")),a&&a.message?React.createElement("div",{className:""+PIMStyles.warning},React.createElement("div",{className:""+PIMStyles.warningItemContainer},React.createElement("div",{className:""+PIMStyles.warningItem},a.message))):null):null,r?.editing&&!isObjectEmpty(r.editing)?React.createElement("div",{className:""+PIMStyles.buttonSetAsBackground},E?React.createElement("button",{className:"gradient_style_bg_1 gradient_style_bg_drop",style:{fontWeight:600,border:"1px solid #b8ff00",borderRadius:"1rem",fontSize:".7rem",textAlign:"center",padding:"0.125rem 1.5rem",color:"white"}},"Current Lead Image"):React.createElement("button",{onClick:h},"Tag As Lead Image"),b?React.createElement("button",{className:"gradient_style_bg_2 gradient_style_bg_2_drop",style:{fontWeight:600,border:"1px solid #fe4c4c",borderRadius:"1rem",fontSize:".7rem",textAlign:"center",padding:"0.125rem 1.5rem",color:"white"}},"Current Feature Image"):React.createElement("button",{onClick:I},"Tag As Feature Image")):null,React.createElement("div",{className:""+PIMStyles.productImageListContainer},l&&l.map&&r.cdn&&r.cdn.static?l.map(e=>React.createElement("div",{className:""+PIMStyles.productImageListThumbnailContainer,style:{backgroundImage:`url(${r.cdn.static}/${e.name})`},onClick:f,selector:e.name},React.createElement("img",{src:resolveImg(r.editing,r.cdn),className:"Product_img",style:{width:"45px",opacity:s?0:1}}))):null),React.createElement("div",{className:""+PIMStyles.productImageContainer,ref:u,style:{backgroundImage:s?`url(${s})`:""}},React.createElement("img",{src:resolveImg(r.editing,r.cdn),style:{opacity:s?0:1},className:"Product_img"})))};export default Module;