https://www.makeoverforall.com/_next/static/chunks/4617-70357979da81327b.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4617],{84617:function(e,l,d){d.d(l,{Z:function(){return DesktopFaceScan}});var i=d(85893),n=d(765),o=d(61765),t=d(54246),a=d(80850),s=d(23048),r=d(67294);function DesktopIntroductionScan(e){let{vtoPageType:l,onClick:d}=e,[o,t]=(0,n.U7)(),a=["Stay in bright, natural lighting","No makeup, no glasses","Pull back your hair","Keep a neutral expression","Look straight ahead","Hold steady while scanning"];return(0,i.jsxs)("div",{className:"lg:flex gap-12 hidden",ref:o,children:[(0,i.jsx)("div",{className:"relative video-box w-[360px] h-[480px] bg-gray-400 ".concat(t(1)),children:(0,i.jsx)("video",{src:"/videos/vid_placeholder3.mp4",muted:!0,playsInline:!0,autoPlay:!0,loop:!0,className:"absolute left-0 top-0 h-full w-full object-cover object-[47%_50%] -z-10 ".concat(t(3))})}),(0,i.jsx)("div",{className:"flex-1 w-full ",children:(0,i.jsx)("div",{className:"grid grid-cols-7 h-full",children:(0,i.jsx)("div",{className:"col-span-6 flex items-center",children:(0,i.jsxs)("div",{children:[(0,i.jsx)("h2",{className:"text-5xl lg:text-7xl text-balance mb-3 text-white text-center lg:!text-black lg:!text-left ".concat(t(5)),children:"SCAN TO UNLOCK YOUR PRECISION-PERSONAL LOOK"}),(0,i.jsx)("ul",{className:"text-center lg:list-disc lg:!text-left lg:pl-4 mb-4 space-y-1",children:a.map((e,l)=>(0,i.jsx)("li",{className:"text-base lg:text-lg text-white lg:!text-black ".concat(t(7+l)),children:e},l))}),(0,i.jsx)(s.z,{onClick:()=>d(),variant:"secondary",className:"".concat(t(7+a.length)," min-w-72"),children:"Scan Now"})]})})})})]})}var c=d(63914),u=d(11163),v=d(85605),h=d(35729),x=d(35364);function DesktopFaceScanResult(e){let{vtoPageType:l}=e,[d,n]=(0,r.useState)({tab:l===a.mT.faceScan?0:1}),{setIsIframeOpen:o,setAppliedProducts:t}=(0,c.Z)();return(0,r.useEffect)(()=>(window.YMK.addEventListener("engineClosed",function(){o(!1),t([]),window.YMK.open()}),window.YMK.addEventListener("closed",function(){o(!1),t([]),window.YMK.open()}),()=>{window.YMK.removeEventListener("engineClosed"),window.YMK.removeEventListener("closed")}),[]),(0,i.jsxs)("div",{className:"flex-1 w-full",children:[(0,i.jsx)(v.Z,{vtoPageType:l,setTab:e=>n(l=>({...l,tab:e}))}),0===d.tab?(0,i.jsx)(x.Z,{setTab:e=>n(l=>({...l,tab:e}))}):(0,i.jsx)(h.Z,{vtoPageType:l})]})}function DesktopFaceScanProcess(e){let{vtoPageType:l,state:d,setProgress:o}=e,[t,a]=(0,n.U7)(),{vtoProducts:s,finishScan:u,setIsIframeOpen:v}=(0,c.Z)();(0,r.useEffect)(()=>{setTimeout(()=>{o(10)},1e3),setTimeout(()=>{o(50)},2e3)},[]);let h=["Stay in well-lit and natural light","No makeup, no glasses","Pull back your hair"];return(0,i.jsxs)("div",{className:"lg:flex gap-10 hidden",ref:t,children:[(0,i.jsxs)("div",{className:"relative random-box w-[360px] h-[480px] bg-gray-800 ".concat(a(1)),children:[u?(0,i.jsx)("div",{className:"absolute h-full w-full bg-gray-800 text-white flex justify-center items-center"}):null,(0,i.jsx)("div",{id:"YMK-module"})]}),u?(0,i.jsx)(DesktopFaceScanResult,{vtoPageType:l}):(0,i.jsxs)("div",{className:"flex-1 w-full",children:[(0,i.jsx)("div",{className:"h-[6px] rounded-sm bg-black w-full relative ".concat(a(2)),children:(0,i.jsx)("div",{className:"bg-primary random-box rounded-sm w-full absolute left-0 top-0 h-full transition-all duration-700 ease-out",style:{width:"".concat(d.progress,"%")}})}),(0,i.jsx)("div",{className:"mt-10",children:1===d.count?(0,i.jsxs)(i.Fragment,{children:[" ",(0,i.jsx)("h2",{className:"text-3xl lg:text-5xl text-balance mb-3 text-white text-center lg:!text-black lg:!text-left ".concat(a(3)),children:2===d.count?"Shade Scanner":"Face Scanner"}),(0,i.jsx)("ul",{className:"text-center lg:list-disc lg:!text-left lg:pl-4 space-y-2 mb-10",children:h.map((e,l)=>(0,i.jsx)("li",{className:"text-xl lg:text-2xl text-white lg:!text-black ".concat(a(3+l+1)),children:e},l))})]}):(0,i.jsx)(ShadeFinderLoading,{instructions:h})})]})]})}d(25675);let ShadeFinderLoading=e=>{let{instructions:l}=e,[d,o]=(0,n.U7)();return(0,i.jsxs)("div",{ref:d,children:[(0,i.jsx)("h2",{className:"text-3xl lg:text-5xl text-balance mb-3 text-white text-center lg:!text-black lg:!text-left ".concat(o(6)),children:"Shade Scanner"}),(0,i.jsx)("ul",{className:"text-center lg:list-disc lg:!text-left lg:pl-4 space-y-2 mb-10",children:l.map((e,l)=>(0,i.jsx)("li",{className:"text-xl lg:text-2xl text-white lg:!text-black ".concat(o(7+l+1)),children:e},l))})]})};var m=d(76291),g=d(38538),k=d(29838);function DesktopFaceScan(e){let{vtoPageType:l}=e,{faceScanImage:d,setFaceScanResult:s,setResultType:v,setShadeFinderresult:h,setVtoProducts:x,setShadeRecommendation:f,setFinishScan:p,setMainTab:w,setIsIframeOpen:S,setSelectedCategoryTab:y,faceScanType:b}=(0,c.Z)(),[F,N]=(0,n.U7)();(0,u.useRouter)();let[j,C]=(0,r.useState)({startScan:!1,progress:0,count:l===a.mT.faceScan?1:2,blobImage:null,loading:!1}),[K,M]=(0,r.useState)(null);(0,r.useRef)(null);let handleFetchShadeColor=async e=>{try{var d,i,n,o,t,s,r,c,u,v,h,m,g,b,F,N,j,K,M,Y,L,D,T,E,I,P,R,H,U,O,Z,_,A,B,W,z,V,q,G,J,Q,X,$,ee,el,ed,ei,en,eo,et,ea,es,er,e

1c,eu,ev,eh,ex,em;C(e=>({...e,loading:!0}));let eg=null==e?void 0:e.recommendations[0],ek=null==eg?void 0:null===(d=eg.guid)||void 0===d?void 0:d.skuId,ef=[];(null==eg?void 0:null===(i=eg.cooler)||void 0===i?void 0:i.guid)&&ef.push({key:"Cooler",skuCode:null==eg?void 0:null===(n=eg.cooler)||void 0===n?void 0:n.skuId}),(null==eg?void 0:null===(o=eg.lighter)||void 0===o?void 0:o.guid)&&ef.push({key:"Lighter",skuCode:null==eg?void 0:null===(t=eg.lighter)||void 0===t?void 0:t.skuId}),(null==eg?void 0:null===(s=eg.darker)||void 0===s?void 0:s.guid)&&ef.push({key:"Darker",skuCode:null==eg?void 0:null===(r=eg.darker)||void 0===r?void 0:r.skuId}),(null==eg?void 0:null===(c=eg.warmer)||void 0===c?void 0:c.guid)&&ef.push({key:"Warmer",skuCode:null==eg?void 0:null===(u=eg.warmer)||void 0===u?void 0:u.skuId});let{data:ep,error:ew}=await (0,k.gr)({skuCode:ek,otherSkus:ef}),eS=[{title:"Cooler",sku:null==ep?void 0:null===(m=ep.shadeFinder)||void 0===m?void 0:null===(h=m.otherShades)||void 0===h?void 0:null===(v=h.find(e=>"Cooler"===e.key))||void 0===v?void 0:v.skuCode,hex:null==ep?void 0:null===(F=ep.shadeFinder)||void 0===F?void 0:null===(b=F.otherShades)||void 0===b?void 0:null===(g=b.find(e=>"Cooler"===e.key))||void 0===g?void 0:g.colorHex,shadeName:null==ep?void 0:null===(K=ep.shadeFinder)||void 0===K?void 0:null===(j=K.otherShades)||void 0===j?void 0:null===(N=j.find(e=>"Cooler"===e.key))||void 0===N?void 0:N.shadeName,active:null!=ep&&null!==(L=ep.shadeFinder)&&void 0!==L&&null!==(Y=L.otherShades)&&void 0!==Y&&null!==(M=Y.find(e=>"Cooler"===e.key))&&void 0!==M&&!!M.colorHex},{title:"Lighter",sku:null==ep?void 0:null===(E=ep.shadeFinder)||void 0===E?void 0:null===(T=E.otherShades)||void 0===T?void 0:null===(D=T.find(e=>"Lighter"===e.key))||void 0===D?void 0:D.skuCode,hex:null==ep?void 0:null===(R=ep.shadeFinder)||void 0===R?void 0:null===(P=R.otherShades)||void 0===P?void 0:null===(I=P.find(e=>"Lighter"===e.key))||void 0===I?void 0:I.colorHex,shadeName:null==ep?void 0:null===(O=ep.shadeFinder)||void 0===O?void 0:null===(U=O.otherShades)||void 0===U?void 0:null===(H=U.find(e=>"Lighter"===e.key))||void 0===H?void 0:H.shadeName,active:null!=ep&&null!==(A=ep.shadeFinder)&&void 0!==A&&null!==(_=A.otherShades)&&void 0!==_&&null!==(Z=_.find(e=>"Lighter"===e.key))&&void 0!==Z&&!!Z.colorHex},{title:"Best matched",sku:ek,hex:null==ep?void 0:null===(B=ep.shadeFinder)||void 0===B?void 0:B.colorHex,shadeName:null==ep?void 0:null===(W=ep.shadeFinder)||void 0===W?void 0:W.shadeName,active:!0},{title:"Darker",sku:null==ep?void 0:null===(q=ep.shadeFinder)||void 0===q?void 0:null===(V=q.otherShades)||void 0===V?void 0:null===(z=V.find(e=>"Darker"===e.key))||void 0===z?void 0:z.skuCode,hex:null==ep?void 0:null===(Q=ep.shadeFinder)||void 0===Q?void 0:null===(J=Q.otherShades)||void 0===J?void 0:null===(G=J.find(e=>"Darker"===e.key))||void 0===G?void 0:G.colorHex,shadeName:null==ep?void 0:null===(ee=ep.shadeFinder)||void 0===ee?void 0:null===($=ee.otherShades)||void 0===$?void 0:null===(X=$.find(e=>"Darker"===e.key))||void 0===X?void 0:X.shadeName,active:null!=ep&&null!==(ei=ep.shadeFinder)&&void 0!==ei&&null!==(ed=ei.otherShades)&&void 0!==ed&&null!==(el=ed.find(e=>"Darker"===e.key))&&void 0!==el&&!!el.colorHex},{title:"Warmer",sku:null==ep?void 0:null===(et=ep.shadeFinder)||void 0===et?void 0:null===(eo=et.otherShades)||void 0===eo?void 0:null===(en=eo.find(e=>"Warmer"===e.key))||void 0===en?void 0:en.skuCode,hex:null==ep?void 0:null===(er=ep.shadeFinder)||void 0===er?void 0:null===(es=er.otherShades)||void 0===es?void 0:null===(ea=es.find(e=>"Warmer"===e.key))||void 0===ea?void 0:ea.colorHex,shadeName:null==ep?void 0:null===(ev=ep.shadeFinder)||void 0===ev?void 0:null===(eu=ev.otherShades)||void 0===eu?void 0:null===(ec=eu.find(e=>"Warmer"===e.key))||void 0===ec?void 0:ec.shadeName,active:null!=ep&&null!==(em=ep.shadeFinder)&&void 0!==em&&null!==(ex=em.otherShades)&&void 0!==ex&&null!==(eh=ex.find(e=>"Warmer"===e.key))&&void 0!==eh&&!!eh.colorHex}];f(eS);let{data:ey,error:eb}=await (0,k.E6)(ek);setTimeout(()=>{var e;C(e=>({...e,loading:!1})),x(null==ey?void 0:null===(e=ey.catalogs)||void 0===e?void 0:e.products),l===a.mT.faceScan?w(0):w(1),p(!0),S(!0),y({id:"vtotab-foryou",text:"Best Shade"})},1500)}catch(e){console.log(e)}},catchFaceScanResult=async(e,l)=>{try{if(s(e),C(e=>({...e,progress:75})),d){if(b===m._.uploadImage){window.YMK.openShadeFinder(d);return}C(e=>({...e,count:2}));let e=await (0,a.sy)(d);setTimeout(()=>{var l,d;null===(d=window)||void 0===d||null===(l=d.YMK)||void 0===l||l.openShadeFinder(e)},1e3)}else window.YMK.openShadeFinder()}catch(e){console.log(e)}},cactchShadeFinderResult=async e=>{try{h(e),C(e=>({...e,progress:100})),setTimeout(()=>{handleFetchShadeColor(e)},1500)}catch(e){console.log(e)}},handleClick=async()=>{try{var e,i,n,o,t,s,r,c;if(C(e=>({...e,startScan:!0})),window.YMK.init({skinSmoothStrength:0}),d){if(b===m._.uploadImage){l===a.mT.faceScan?window.YMK.openFaceAttrDetection(d):null===(i=window)||void 0===i||null===(e=i.YMK)||void 0===e||e.openShadeFinder(d),window.YMK.addEventListener("faceAttributeUpdated",catchFaceScanResult),window.YMK.addEventListener("shadeFinderComplete",cactchShadeFinderResult);return}v(a.KB.fullFace);let r=await (0,a.sy)(d);C(e=>({...e,blobImage:r})),l===a.mT.faceScan?null===(o=window)||void 0===o||null===(n=o.YMK)||void 0===n||n.openFaceAttrDetection(r):null===(s=window)||void 0===s||null===(t=s.YMK)||void 0===t||t.openShadeFinder(r)}else l===a.mT.faceScan?window.YMK.openFaceAttrDetection():null===(c=window)||void 0===c||null===(r=c.YMK)||void 0===r||r.openShadeFinder();window.YMK.addEventListener("faceAttributeUpdated",catchFaceScanResult),window.YMK.addEventListener("shadeFinderComplete",cactchShadeFinderResult)}catch(e){console.log(e)}};return(0,i.jsxs)(i.Fragment,{children:[j.loading?(0,i.jsx)(g.default,{}):null,(0,i.jsx)("section",{className:"lg:pb-10 lg:pt-3",ref:F,children:(0,i.jsxs)("div",{className:"lg:container mx-auto ".concat(N(1)),children:[(0,i.jsxs)("div",{className:"hidden lg:block",children:[(0,i.jsx)(o.a,{isProduct:!0,theme:"light",className:"mb-2",linkData:[{name:"HOME",link:"/"},{name:"Virtual Makeover",link:a.B6.landing,href:!0},{name:l,link:null}]}),(0,i.jsx)(t.Z,{link:"".concat(a.B6.landing).concat(a.B6.faceScanUrl)})]}),j.startScan?(0,i.jsx)(DesktopFaceScanProcess,{setProgress:e=>C(l=>({...l,progress:e})),state:j,vtoPageType:l}):(0,i.jsx)(DesktopIntroductionScan,{onClick:()=>handleClick()})]})})]})}}}]);