https://s3.zeelool.com/zeelool-next/_next/static/chunks/79412.579e3b03d3c609ec.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[79412],{79412:(e,t,r)=>{r.r(t),r.d(t,{default:()=>j});var n=r(63109),i=r(62272),l=r(61496),o=r(53494),a=r(23991),s=r(10401),u=r(23277),d=r(80338),c=r(65665),p=r(19509),f=r(26837);let m=s.forwardRef((e,t)=>{let{src:r,...i}=e,l=(0,f.b)(r);return l?(0,n.jsx)(p.default,{...i,src:l,ref:t}):null});m.displayName="ImageRef";var x=r(40898),h=r(18207),g=r(51534),y=r(83491),v=r(49722),b=r(20422);let w=e=>{let{name:t,linearGradient:r,style:i,...l}=e;return(0,n.jsxs)(n.Fragment,{children:[r&&(0,n.jsx)("svg",{style:{width:0,height:0,position:"absolute"},"aria-hidden":"true",focusable:"false",children:(0,n.jsx)("linearGradient",{id:"zeelool-gradient-UploadOutlined",x1:r.x1??0,x2:r.x2??0,y1:r.y1??0,y2:r.y2??1,children:r.linears?r.linears.map((e,t)=>(0,n.jsx)("stop",{offset:e.offset??0,style:{stopColor:e.stopColor}},t+"-"+e.offset+"-"+e.stopColor)):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("stop",{offset:"0%",style:{stopColor:"rgba(84, 182, 254, 1)"}}),(0,n.jsx)("stop",{offset:"100%",style:{stopColor:"rgba(173, 232, 209, 1)"}})]})})}),(0,n.jsxs)("svg",{viewBox:"0 0 1024 1024",version:"1.1",style:{width:"1em",height:"1em",fill:r?"url(#zeelool-gradient-UploadOutlined)":"currentcolor",...i},...l,xmlns:"http://www.w3.org/2000/svg","p-id":"1494",width:"200",children:[(0,n.jsx)("path",{d:"M864 352H640v64h160v448H224V416h160v-64H160v576h704V352z","p-id":"1495"}),(0,n.jsx)("path",{d:"M544 672V219.84l64.64 64 45.6-45.28-140.96-141.12-141.28 141.12 44.64 45.28 63.36-64V672h64z","p-id":"1496"})]})]})};var _=r(55879);function k(e){let t=Number(e);return Number.isFinite(t)?t:null}let j=e=>{let{show:t,product:r,isWeb:p,SDTryONPageBtnClick:f}=e,j=(0,_.c)("product.tryOn"),I=(0,x.P)(e=>e.modelList);(0,x.P)(e=>e.setModelList);let C=(0,x.P)(e=>e.delModelList),S=(0,x.P)(e=>e.uploadTryOnImg),T=(0,x.P)(e=>e.normalTry),E=(0,x.P)(e=>e.setNormalTry),N=(0,x.P)(e=>e.getTryOnImages),P=(0,x.P)(e=>e.delTryOnList),L=(0,x.P)(e=>e.userInfo),M=(0,x.P)(e=>e.token),[B,R]=(0,s.useState)(null),[z,H]=(0,s.useState)([]),[O,$]=(0,s.useState)(!1),[A,D]=(0,s.use

1State)(!1),[U,Y]=(0,s.useState)(!1),[X,F]=(0,s.useState)(null),[V,W]=(0,s.useState)(null),[q,G]=(0,s.useState)(!1),[J,K]=(0,s.useState)(!1),[Q,Z]=(0,s.useState)({x:0,y:0}),[ee,et]=(0,s.useState)({left:0,top:0}),er=(0,s.useRef)(null),en=(0,s.useRef)(!1),ei=(0,s.useRef)(!1),el=(0,s.useRef)(!1),eo=(0,s.useRef)(null),ea=(0,s.useRef)(null),es=(0,s.useRef)(null),eu=(0,s.useRef)(null),ed=(0,s.useRef)(null),ec=(0,s.useRef)(null),ep="zl-customer-models",ef=(0,s.useCallback)(()=>{try{let e=window.sessionStorage.getItem(ep);if(!e)return[];let t=JSON.parse(e),r=Array.isArray(t)?t[0]:t;if(!r?.sImg||!r?.bImg||!r?.data)return[];return[{...r,user:!0}]}catch{return[]}},[]),em=(0,s.useCallback)(e=>{try{if(!e)return void window.sessionStorage.removeItem(ep);window.sessionStorage.setItem(ep,JSON.stringify(e))}catch(e){}},[ep]),ex=(0,s.useCallback)(async()=>{if(!p&&en.current){if((0,y.nk)()){en.current=!1;return}if(!ei.current){ei.current=!0;try{(await (0,y.y2)()||(0,y.nk)())&&(en.current=!1)}finally{ei.current=!1}}}},[p]),eh=(0,s.useCallback)(()=>{el.current=!0,eo.current?.(),eo.current=null},[]),eg=(0,s.useCallback)(()=>el.current?Promise.resolve():new Promise(e=>{eo.current=e}),[]),ey=async e=>{if(!e)return void await ex();if((p||(0,y.nk)()||(0,y.y2)(),await ex(),/\.(jpeg|jpg|png|gif)$/i.test(e.name))&&

1!(e.size>0xa00000)){D(!0);try{let t={upload_img:e,site_id:g._.NEXT_PUBLIC_SITE_ID??"1"};M&&(t.customer_id=L.id.toString(),t.customer_email=L.email);let r=await S(t),n={sImg:r.img_web_url,bImg:r.img_web_url,data:r,id:r.id,user:!0};M?H([]):em(n),H([n]),R(n)}catch{o.o.error("Upload failed")}finally{D(!1),await ex(),er.current&&(er.current.value="")}}},ev=async e=>{eh(),await ey(e.target.files?.[0])},eb=(0,s.useCallback)(function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:ed.current,t=ea.current;if(!t||!B||!T||!e||e!==ed.current)return;let r=function(e,t,r,n){let i=function(e,t){let r=k(e?.photo_original_width),n=k(e?.landmark72_0_x),i=k(e?.landmark72_0_y),l=k(e?.landmark72_12_x),o=k(e?.landmark72_12_y),a=k(e?.landmark72_21_x),s=k(e?.landmark72_21_y),u=k(e?.landmark72_38_x),d=k(e?.landmark72_38_y);if(!r||r<=0||!Number.isFinite(t)||t<=0||null===n||null===l||l<=n||null===s)return null;let c=t/r,p=Math.hypot(l-n,null===i||null===o?0:o-i)*c,f=(n+l)/2,m=s,x=0;return null!==a&&null!==u&&u>a&&null!==d&&(f=(a+u)/2,m=(s+d)/2,x=180*Math.atan2(d-s,u-a)/Math.PI),{eyeCenterY:m*c,left:f*c-p/2,rate:c,rotation:x,width:p}}(e,t);if(!i||!Number.isFinite(r)||r<=0||!Number.isFinite(n)||n<=0)return null;let l=i.width*n/r;return{left:i.left,top:i.eyeCenterY-.382*l,rotation:i.rotation,width:i.width}}(B.data,t.offsetWidth,e.naturalWidth,e.naturalHeight);if(!r)return void W(null);W({...r,imageSrc:T,model:B})},[T,B]),ew=V?.model===B&&V.imageSrc===T?V:null,e_=ew??(q&&V?.imageSrc===T?V:null);(0,s.useLayoutEffect)(()=>{if(!t||!B||!T)return;let e=ed.current;e?.complete&&e.naturalWidth>0&&eb(e)},[eb,p,T,B,t]),(0,s.useEffect)(()=>{t&&r?.tryon_image_url&&E(r.tryon_image_url)},[t,r,E]);let ek=(0,s.useMemo)(()=>0===z.length?I:[...z,...I],[z,I]);if((0,s.useEffect)(()=>{if(!t){H([]),$(!1),R(null),W(null),G(!1);return}let e=!1,r=e=>{R(e[0]||null),setTimeout(()=>{ec.current&&ec.current.slideTo&&ec.current.slideTo(0,300)},0)};if(!M){let e=ef();H(e),$(!1),r(e.length>0?e:I);return}return H([]),R(null),$(!0),N({site_id:g._.NEXT_PUBLIC_SITE_ID??"1",customer_id:L.id.toString(),customer_email:L.email}).then(t=>{if(e)return;let n=(Array.isArray(t)?t:t?[t]:[]).map(e=>{let t=e?.data;if("string"==typeof t)try{t=JSON.parse(t)}catch{t=null}return e?.img_web_url&&t?{id:e.id,sImg:e.img_web_url,bImg:e.img_web_url,data:t,startTime:e.created_at?new Date(e.created_at).getTime():Date.now(),saved:!0,user:!0}:null}).filter(Boolean);H(n),n.length>0?r(n):r(I)}).catch(()=>{e||(H([]),r(I))}).finally(()=>{e||$(!1)}),()=>{e=!0}},[t]),(0,s.useEffect)(()=>{if(!J)return;let e=e=>eS(e),t=e=>eS(e);return document.addEventListener("mousemove",e),document.addEventListener("touchmove",t,{passive:!1}),document.addEventListener("mouseup",eT),document.addEventListener("touchend",eT),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("touchmove",t),document.removeEventListener("mouseup",eT),document.removeEventListener("touchend",eT)}},[J,Q,ee,V,T,B]),(0,s.useEffect)(()=>{if(p)return;let e=()=>{en.current&&queueMicrotask(()=>{eg().then(()=>{queueMicrotask(()=>{ex()})})})};window.addEventListener("focus",e);let t=er.current,r=()=>{eh()},n=()=>{eh()};return t&&(t.addEventListener("change",r),t.addEventListener("cancel",n)),()=>{window.removeEventListener("focus",e),t&&(t.removeEventListener("change",r),t.removeEventListener("cancel",n))}},[p,eh,ex,eg]),!t)return null;let ej=e=>!!B&&!!e&&(e.id&&B.id?B.id===e.id:B.sImg===e.sImg),eI=()=>{Y(!1),F(null)},eC=e=>{if(ew)e.stopPropagation(),K(!0),Z({x:"touches"in e?e.touches[0].clientX:e.clientX,y:"touches"in e?e.touches[0].clientY:e.clientY}),et({left:ew.left,top:ew.top})},eS=e=>{if(!J||!ea.current||!es.current)return;e.stopPropagation();let t="touches"in e?e.touches[0].clientX:e.clientX,r="touches"in e?e.touches[0].clientY:e.clientY,n=t-Q.x,i=r-Q.y,l=ee.left+n,o=ee.top+i,a=ea.current.offsetWidth,s=ea.current.offsetHeight,u=es.current.offsetWidth,d=es.current.offsetHeight;l=Math.max(0,Math.min(l,a-u)),o=Math.max(0,Math.min(o,s-d)),W(e=>e&&e.model===B&&e.imageSrc===T?{...e,left:l,top:o}:e)},eT=()=>{K(!1)},eE=j("uploadText");return(0,n.jsxs)(a.default,{sx:{width:p?"100%":"320px",paddingTop:p?"0":"70px",margin:"0 auto",position:"relative",height:p?"100%":"auto",overflow:p?"hidden":"visible",backgroundColor:"#fff",display:p?"flex":"block"},children:[(0,n.jsxs)("div",{className:p?"w-[calc(1000px-376px)] bg-[#d1d1d1] flex flex-col items-center pt-[38px]":"",style:p?{height:"626px",overflowY:"auto",overflowX:"hidden"}:{},children:[(0,n.jsxs)(a.default,{ref:ea,sx:{width:p?"470px":"320px",minHeight:p?"auto":"320px",position:"relative",userSelect:"none",marginBottom:p?"0":"12px"}

1,children:[B&&(0,n.jsx)(m,{ref:eu,src:B.bImg,alt:"Background model",width:600,height:600,style:{display:"block",width:p?"calc(1000px - 376px)":"320px",height:"auto",margin:"auto"}}),B&&T&&(0,n.jsxs)(a.default,{ref:es,sx:{position:"absolute",zIndex:20,left:`${e_?.left??0}px`,top:`${e_?.top??0}px`,cursor:J?"grabbing":"grab",backgroundColor:"transparent",userSelect:"none",visibility:e_?"visible":"hidden",pointerEvents:ew?"auto":"none",transition:J||!q?"none":"left 0.3s ease, top 0.3s ease"},onMouseDown:eC,onTouchStart:eC,children:[(0,n.jsx)(a.default,{sx:{position:"absolute",width:"100%",height:"100%",zIndex:20,backgroundColor:"transparent"}}),(0,n.jsx)(m,{ref:ed,src:T,alt:"Glasses",width:300,height:300,onLoad:e=>eb(e.currentTarget),onError:()=>W(null),style:{display:"block",width:`${e_?.width??0}px`,height:"auto",transform:`rotate(${e_?.rotation??0}deg)`,transformOrigin:"50% 38.2%",transition:J||!q?"none":"width 0.3s ease, transform 0.3s ease",filter:"drop-shadow(0 2px 4px rgba(0,0,0,0.3))",pointerEvents:"none",userSelect:"none"}},T)]})]}),(0,n.jsxs)(a.default,{className:"list-box",sx:{position:"relative",margin:p?"16px auto 32px":"0 0 20px",opacity:O?.5:1,pointerEvents:O?"none":"auto"},children:[(0,n.jsx)(d.RC,{className:"pro-imgs",modules:[u.U1,u.Vx],slidesPerView:p?6:4,spaceBetween:6,freeMode:!0,observer:!0,observeParents:!0,observeSlideChildren:!0,navigation:{nextEl:".swiper-button-next-custom",prevEl:".swiper-button-prev-custom"},style:{width:p?"438px":"200px",margin:p?"":"12px auto 20px"},onSwiper:e=>{ec.current=e},children:ek.map((e,t)=>(0,n.jsx)(d.qr,{className:"img-item",style:{width:"auto"},onClick:()=>(e=>{B&&(e.id&&B.id&&e.id===B.id||(!e.id||!B.id)&&e.sImg===B.sImg)||(G(!!ew),R(e))})(e),children:(0,n.jsxs)(a.default,{sx:{position:"relative",cursor:"pointer",border:ej(e)?`1px solid ${h.T.primaryPurple}`:"1px solid transparent",borderRadius:p?"0":"4px",aspectRatio:"1/1",overflow:"hidden","&:hover":{border:`1px solid ${h.T.primaryPurpleHover}`}},children:[e.user&&(0,n.jsx)(a.default,{className:"icon-wrapper",sx:{position:"absolute",right:0,top:0,zIndex:10,width:"16px",height:"16px",lineHeight:"16px",backgroundColor:"#000",borderRadius:"50%",textAlign:"center",cursor:"pointer","&:hover":{backgroundColor:"#333"}},onClick:t=>{t.stopPropagation(),F(e),Y(!0)},children:(0,n.jsx)(a.default,{component:"span",sx:{display:"block",fontSize:"12px",color:"#fff",transform:"scale(0.6)"},children:"✕"})}),(0,n.jsx)(c.default,{src:e.sImg,alt:`Model ${t+1}`,width:p?68:45,height:p?68:45,style:{display:"block",width:p?"68px":"45px",height:"auto",cursor:"pointer",transition:"all 0.3s",borderRadius:p?"0":"4px",objectFit:"contain",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"}})]})},t))}),(0,n.jsx)(a.default,{component:"button",type:"button","aria-label":"Previous image",className:"swiper-button-prev-custom",sx:{position:"absolute",border:0,background:"transparent",padding:0,left:p?"-32px":"12px",top:"50%",transform:"translateY(-50%)",zIndex:30,cursor:"pointer",color:h.T.primaryBlack,"&:hover":{color:h.T.primaryBlackHover}},children:(0,n.jsx)(v.A,{className:`${p?"text-[28px]":"text-[16px]"}`,"aria-hidden":!0})}),(0,n.jsx)(a.default,{component:"button",type:"button","aria-label":"Next image",className:"swiper-button-next-custom",sx:{position:"absolute",border:0,background:"transparent",padding:0,right:p?"-32px":"12px",top:"50%",transform:"translateY(-50%)",zIndex:30,cursor:"pointer",color:h.T.primaryBlack,"&:hover":{color:h.T.primaryBlackHover}},children:(0,n.jsx)(b.A,{className:`${p?"text-[28px]":"text-[16px]"}`,"aria-hidden":!0})})]})]}),(0,n.jsxs)("div",{className:p?"w-[376px] flex items-center justify-center flex-col":"",style:p?{height:"626px",position:"relative"}:{},children:[(0,n.jsx)(a.default,{sx:{textAlign:p?"left":"center",fontSize:p?"20px":"14px",marginBottom:p?"30px":"16px",color:p?h.T.primaryBlack:h.T.auxiliaryText,lineHeight:1.4,width:p?"270px":"auto"},children:(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:j("uploadHint")}})}),(0,n.jsx)(a.default,{sx:{display:"flex",justifyContent:"center"},children:(0,n.jsxs)(i.A,{component:"label",variant:"contained",loading:A,sx:{width:p?"270px":"260px",height:p?"60px":"50px",backgroundColor:h.T.primaryBlack,

1color:"white",fontSize:p?"20px":"16px",borderRadius:p?"0":"4px",display:"flex",alignItems:"center",justifyContent:"center",gap:"12px","&:hover":{backgroundColor:h.T.primaryBlackHover},"& .MuiButton-loadingIndicator":{color:"#ffffff"},"&.MuiButton-loading":{opacity:.5,cursor:"not-allowed",pointerEvents:"none",backgroundColor:`${h.T.primaryBlack} !important`,color:"#ffffff !important"}},startIcon:p||A?null:(0,n.jsx)(w,{}),children:[A?"":eE,(0,n.jsx)("input",{ref:er,type:"file","aria-label":"Upload image",accept:".jpg,.jpeg,.png,.gif",disabled:A,onClick:()=>{el.current=!1,eo.current=null,!p&&(0,y.nk)()&&(en.current=!0,(0,y.Rv)(15e3)),f("Upload Photo")},onChange:ev,style:{position:"absolute",inset:0,width:"100%",height:"100%",opacity:0,cursor:A?"default":"pointer"}})]})})]}),(0,n.jsx)(l.A,{open:U,onClose:eI,title:j("deleteDialogTitle"),okText:j("deleteButton"),cancelText:j("cancelButton"),onOk:()=>{if(!X)return;let e=(e,t)=>!!e&&!!t&&(e.id&&t.id?e.id===t.id:e.sImg===t.sImg),t=t=>{H(r=>{let n=r.filter(r=>!e(r,t));return M||em(null),n});let r=I.find(r=>e(r,t));r&&C(r)},r=ek.filter(t=>!e(t,X));if(!M||!X.id){t(X),ej(X)&&R(r[0]||null),Y(!1),F(null);return}P({id:X.id,site_id:g._.NEXT_PUBLIC_SITE_ID??"1",customer_id:L.id.toString(),customer_email:L.email}).then(()=>{t(X)}).catch(()=>{}),ej(X)&&R(r[0]||null),Y(!1),F(null)},onCancel:eI,closeOnClickOverlay:!1,showCloseIcon:!1,sx:{zIndex:1400,"& .MuiDialog-paper":{width:p?"472px":"320px"}},children:(0,n.jsx)(a.default,{children:j("deleteDialogMessage")})})]})}}}]);