"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5688],{55688:function(e,l,t){t.d(l,{Z:function(){return z}});var a=t(26042),r=t(69396),s=t(10972),n=t(52379),i=t.n(n),o=t(74058),c=t.n(o),d=t(32010),u=t(97176),m=t(57851),h=t(5540),f=t(47568),x=t(828),p=t(36305),g=t(72655),v=t.n(g),b=t(45616),w=t(22503),j=t(7517),k=t(54281),y=t(82336),N=t(35235),E=t(23989),C=t(56849),Z=t(1100),L=t(70569),I=t(31146),O=t(7775),M=t(34479),D=t(49009),A=t(29381),S=t(99826),P=t(93738),T=t(54799),F=function(e){var l=e.collage,t=(0,u.useContext)(j._).showLoginModal,n=(0,w.Eu)().user,i=(0,u.useMemo)((function(){return!!n}),[n]);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("h4",{className:"w-full max-w-full truncate pb-2 text-h5 sm:text-h4",children:l.title}),(0,s.jsx)("div",{className:"flex h-full w-full flex-1 flex-col items-center justify-start gap-3 overflow-auto",children:(0,p.Z)(l.products).sort((function(e,l){return e.sortIndex-l.sortIndex})).map((function(e){return(0,s.jsxs)("div",{className:"flex w-full select-none flex-row items-center gap-3 rounded-xxs",children:[(0,s.jsx)("div",{className:"h-12 w-12 shrink-0 rounded-xxs bg-beige bg-cover",style:{backgroundImage:"url(".concat((0,A.Kc)(e),")")}}),(0,s.jsx)("div",{className:"flex max-h-11 w-full flex-1 truncate whitespace-normal text-body-sm",children:e.title}),(0,s.jsx)(C.Z,{solid:!0,className:"text-buttons-md",onClick:function(){!function(e){var a;M.ZP.trackEvent("[COLLAGE MODAL] link clicked",{authorized:Boolean(n),collageId:l.id,productId:(null===(a=e.product)||void 0===a?void 0:a.id)||void 0,collageProductId:e.id,hostname:(0,A.mu)(e.url)}),i?window.open(e.internalClickUrl,"_blank","noopener noreferrer"):t((function(){window.open(e.internalClickUrl,"_blank","noopener noreferrer")}))}(e)},children:i?(0,A.mu)(e.url):"View Link"})]},e.id)}))}),(0,s.jsx)("hr",{className:"mt-2 h-px w-full border-0 bg-black sm:mt-2"}),(0,s.jsxs)("div",{className:"mt-3 flex h-auto w-full flex-row items-center gap-2",children:[(0,s.jsx)(Z.Z,(0,r.Z)((0,a.Z)({},l.user),{size:"sm"})),(0,s.jsxs)("p",{className:"flex w-full flex-1 shrink-0 overflow-hidden text-body-sm",children:["\xa0created by\xa0",(0,s.jsx)(c(),{href:l.user.path,shallow:!0,children:(0,s.jsx)("a",{className:"underline",children:(0,s.jsx)(I.Z,{user:l.user})})})]})]})]})},q=function(e){var l=e.collage,t=e.title,n=e.setTitle,o=e.background,c=e.setBackground,p=e.layout,g=e.setLayout,j=e.setIsOpen,y=e.setEditing,N=e.setSaving,C=(0,d.useRouter)(),Z=(0,w.Eu)().user,L=(0,x.Z)((0,S.lyp)(),1)[0],I=(0,u.useContext)(O.E),F=I.showMessage,q=I.showError,G=(0,u.useState)(!1),_=G[0],z=G[1],R=(0,u.useState)([]),B=R[0],U=R[1],V=(0,x.Z)((0,S.GKc)({notifyOnNetworkStatusChange:!0}),2),H=V[0],K=V[1].loading,Q=function(){var e=(0,f.Z)(v().mark((function e(){return v().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return M.ZP.trackEvent("[DELETE COLLAGE MODAL] delete clicked",{collageId:l.id}),e.next=3,H({variables:{where:{id:l.id}},update:function(e,l){var t=l.data;t&&D.r.updateAfterCollageDeleted(t.deleteOneCollage.id)}});case 3:z(!1),j(!1);case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),X=function(){var e=(0,f.Z)(v().mark((function e(){var a,r,s;return v().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return a={id:l.id,layout:p,background:o,products:B,title:t,draft:!1},e.prev=1,e.next=4,(0,P.oE)(a);case 4:return r=e.sent,e.next=7,(0,P.LQ)(a,l.user.username,l.user.shoppingClubStatus);case 7:return(s=e.sent)||q(new Error("Failed to create collage preview image: social share image")),r||q(new Error("Failed to create collage preview image: thumbnail")),e.abrupt("return",{thumbnailMediaData:r,socialShareMediaData:s});case 13:return e.prev=13,e.t0=e.catch(1),q(new Error("Failed to create collage preview image: "+e.t0)),e.abrupt("return",{thumbnailMediaData:null,socialShareMediaData:null});case 17:case"end":return e.stop()}}),e,null,[[1,13]])})));return function(){return e.apply(this,arguments)}}(),J=function(){var e=(0,f.Z)(v().mark((function e(l){var t,a,r,s,n;return v().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=l.thumbnailMediaData,a=l.socialShareMediaData,e.t0=x.Z,e.next=4,Promise.all([(0,A.PB)(t,"thumbnail"),(0,A.PB)(a,"social-share")]);case 4:return e.t1=e.sent,r=(0,e.t0)(e.t1,2),s=r[0],n=r[1],s||q(new Error("Failed to create collage preview image: thumbnail")),n||q(new Error("Failed to create collage preview image: social share image")),e.abrupt("return",{thumbnailMediaId:s,socialShareMediaId:n});case 11:case"end":return e.stop()}}),e)})));return function(l){return e.apply(this,arguments)}}(),W=function(){var e=(0,f.Z)(v().mark((function e(s){var n,i,c,d,u,m;return v().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return N(!0),s.preventDefault(),M.ZP.trackEvent("[EDIT COLLAGE MODAL] save changes clicked",{collageId:l.id}),e.next=5,X();case 5:if(n=e.sent,i=n.thumbnailMediaData,c=n.socialShareMediaData,i&&c){e.next=11;break}return N(!1),e.abrupt("return");case 11:return e.next=13,J({thumbnailMediaData:i,socialShareMediaData:c});case 13:return d=e.sent,u=d.thumbnailMediaId,m=d.socialShareMediaId,u&&m||(N(!1),q(new Error("Failed to create collage preview image: thumbnail"))),e.next=19,L({variables:{where:{id:l.id},data:{title:{set:t},background:{set:o},layout:{set:p},thumbnailMedia:{connect:{id:u}},socialShareMedia:{connect:{id:m}}}},update:function(e,l){var t=l.data;t&&Z&&D.r.updateAfterEditCollage(t.updateOneCollage)},onCompleted:function(){N(!1),y(!1),C.replace({query:(0,r.Z)((0,a.Z)({},C.query),{showShareCTA:!0})}),F("Successfully updated collage!")},onError:function(e){N(!1),q(e)}});case 19:case"end":return e.stop()}}),e)})));return function(l){return e.apply(this,arguments)}}();return(0,u.useEffect)((function(){U(l.products.map((function(e){return{id:e.id,sortIndex:e.sortIndex,media:e.media,collageProduct:e,savedProduct:e.product?{id:e.product.id}:void 0}})).sort((function(e,l){return e.sortIndex-l.sortIndex})))}),[l]),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("form",{id:"edit_collage_form",onSubmit:W,className:"mb-8 flex w-full flex-col gap-4 overflow-auto",children:[(0,s.jsx)(k.Z,{label:"Collage Title",maxLength:T.p.MAX_TITLE_LENGTH,minLength:1,showCharacterCount:!0,value:t,onChangeText:n,className:"w-full"}),(0,s.jsxs)(b.E,{value:o,onChange:c,name:"background",className:"flex flex-col",children:[(0,s.jsx)(b.E.Label,{className:"mb-2 self-start text-body-sm",children:"Background"}),(0,s.jsx)("div",{className:"-mb-3 flex flex-row gap-2 overflow-auto pb-3",children:Object.values(S.lSr).map((function(e,l){return(0,s.jsx)(b.E.Option,{value:e,className:"relative flex h-16 w-16 shrink-0 cursor-pointer flex-col items-center gap-3 rounded-sm border border-black/10 bg-white",children:function(t){var a=t.checked;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(b.E.Label,{as:"span",className:(0,m.m)("hidden w-full truncate whitespace-normal text-body-sm",a?"text-black":"text-body-sm"),children:e}),(0,s.jsx)(h.gr,{background:Object.values(S.lSr)[l],className:(0,m.m)("absolute rounded-sm")}),(0,s.jsx)("div",{className:(0,m.m)("absolute inset-0 rounded-sm bg-black/20",a?void 0:"hidden")}),(0,s.jsx)("div",{className:(0,m.m)("absolute bottom-2 right-2 h-5 w-5 shrink-0 rounded-full border border-redorange bg-white flex-center",a?void 0:"border-2"),children:(0,s.jsx)("div",{className:(0,m.m)("h-3 w-3 shrink-0 rounded-full bg-redorange",a?void 0:"hidden")})})]})}},e)}))})]}),(0,s.jsxs)(b.E,{value:p,onChange:g,name:"layout",className:"flex flex-col",children:[(0,s.jsx)(b.E.Label,{className:"mb-2 self-start text-body-sm",children:"Layout"}),(0,s.jsx)("div",{className:"-mb-3 flex flex-row gap-2 overflow-auto pb-3",children:Object.values(S.OVj).map((function(e){return(0,s.jsx)(b.E.Option,{value:e,className:"relative flex w-20 shrink-0 cursor-pointer flex-col items-center gap-3 rounded-sm",style:{aspectRatio:"5/7"},children:function(l){var t=l.checked;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(b.E.Label,{as:"span",className:(0,m.m)("hidden w-full truncate whitespace-normal text-body-sm",t?"text-black":"text-body-sm"),children:e}),(0,s.jsx)(i(),{src:T.p.Layouts[e].thumbnail,layout:"fill"}),(0,s.jsx)("div",{className:(0,m.m)("absolute bottom-2 right-2 h-5 w-5 shrink-0 rounded-full border border-redorange bg-white flex-center",t?void 0:"border-2"),children:(0,s.jsx)("div",{className:(0,m.m)("h-3 w-3 shrink-0 rounded-full bg-redorange",t?void 0:"hidden")})})]})}},e)}))})]})]}),!!l.currentUserIsCreator&&(0,s.jsx)("button",{onClick:function(){M.ZP.trackEvent("[EDIT COLLAGE MODAL] remove collage clicked",{collageId:l.id}),z(!0)},className:"absolute bottom-6 right-6 text-body-sm text-redorange underline",children:"Remove Collage"}),(0,s.jsx)(E.Z,{isOpen:_,setIsOpen:z,title:"Are you sure you want to delete this collage?",message:"Deleted collages will be permanently removed from your profile!",confirmText:"Delete",onConfirm:Q,onCancel:function(){M.ZP.trackEvent("[DELETE COLLAGE MODAL] cancel clicked",{collageId:l.id}),z(!1)},dismissOnButtonPress:!1,loading:K})]})},G=function(e){var l,t=e.collage,n=e.isOpen,o=e.setIsOpen,c=(0,d.useRouter)(),f=(0,w.Eu)().user,x=(0,u.useState)(!1),p=x[0],g=x[1];(0,u.useEffect)((function(){if(c.query.savedProductId===t.id&&c.query.editing){g(!0);var e=(0,a.Z)({},c.query);delete e.editing,c.replace({pathname:c.pathname,query:e},void 0,{scroll:!1})}}),[c,t]);var v=(0,u.useState)(t.title),b=v[0],j=v[1],k=(0,u.useState)(t.background),E=k[0],Z=k[1],I=(0,u.useState)(t.layout),O=I[0],D=I[1],A=(0,u.useState)(!1),S=A[0],P=A[1],T=function(){var e=(0,a.Z)({},c.query);delete e.showShareCTA,c.replace({query:(0,a.Z)({},e)},void 0,{scroll:!1})};return(0,u.useEffect)((function(){n&&M.ZP.trackEvent("[COLLAGE MODAL] viewed",{collageId:t.id,authorized:M.ZP.isAuthorized})}),[n,t.id]),(0,s.jsx)(N.Z,{isOpen:n,setIsOpen:o,noInset:!0,containerClassName:"p-0 sm:p-10 md:p-16",className:(0,m.m)("relative w-full !max-w-4xl rounded-0 sm:rounded-md",p?"bg-cream":"bg-white"),children:(0,s.jsxs)("div",{className:"relative flex h-screen w-full select-none flex-col overflow-auto sm:h-[34.375rem] sm:flex-row",children:[(0,s.jsx)("div",{className:"relative h-1/2 w-full shrink-0 grow-0 basis-auto overflow-hidden rounded-0 sm:h-full sm:w-1/2 sm:rounded-l-md",children:(0,s.jsxs)("div",{className:"h-full w-full",children:[(0,s.jsx)(h.gr,{background:E}),(0,s.jsx)("div",{className:"absolute inset-0 pb-8 pt-18 flex-center sm:py-18",children:(0,s.jsx)("div",{className:(0,m.m)("relative h-full max-h-full w-full max-w-full flex-center"),children:t.thumbnailMedia&&!p?(0,s.jsx)("div",{className:"pointer-events-none relative aspect-collage h-full overflow-hidden rounded-md",children:(0,s.jsx)(i(),{src:t.thumbnailMedia.url,unoptimized:!0,layout:"fill",objectFit:"contain",className:"aspect-collage"})}):(0,s.jsx)(h.OV,{collage:(0,r.Z)((0,a.Z)({},t),{layout:O}),className:"aspect-collage"})})}),p?(0,s.jsx)("div",{className:"absolute inset-0 bg-black/40 text-buttons-md flex-center sm:!text-buttons-lg",children:(0,s.jsx)(C.Z,{onClick:function(e){e.preventDefault(),f&&(c.push("".concat(f.path,"/collages/editor?collageId=").concat(t.id),void 0,{scroll:!1}),M.ZP.trackEvent("[COLLAGE MODAL] edit products clicked",{collageId:t.id}))},solid:!0,children:"Edit Products"})}):null]})}),(0,s.jsx)("div",{className:"h-1/2 w-full shrink-0 grow-0 basis-auto overflow-visible sm:h-full sm:w-1/2",children:(0,s.jsxs)("div",{className:"flex h-full max-h-full flex-col items-stretch overflow-visible sm:pl-6 lg:pl-10",children:[(0,s.jsxs)("div",{className:"flex w-full flex-col sm:flex-col-reverse lg:flex-row lg:items-center",children:[(0,s.jsx)("div",{className:"flex-1"}),(0,s.jsxs)("div",{className:"fixed right-0 top-0 flex flex-row items-end justify-end gap-3 p-4 pl-0 sm:static sm:inset-auto sm:p-6 sm:pl-0",children:[(0,s.jsx)("div",{className:"hidden flex-1 md:block"}),p?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(C.Z,{type:"button",onClick:function(){M.ZP.trackEvent("[EDIT COLLAGE MODAL] cancel clicked",{collageId:t.id}),j(t.title),Z(t.background),D(t.layout),g(!1)},className:"bg-white/60",disabled:S,children:"Cancel"}),(0,s.jsx)(C.Z,{solid:!0,type:"submit",form:"edit_collage_form",disabled:S,children:S?(0,s.jsx)(y.T,{}):"Save Changes"})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(L.Z,{className:"bg-lightblue",sharable:t,downloadLink:t.currentUserIsCreator||"info@wantlocker.com"===(null===f||void 0===f?void 0:f.email)?null===(l=t.socialShareMedia)||void 0===l?void 0:l.url:void 0,ctaMessage:"Looking good! Share it with your friends.",showCTA:"true"===c.query.showShareCTA,onCTAClicked:T,onClick:T}),!!t.currentUserIsCreator&&(0,s.jsx)(C.Z,{type:"button",onClick:function(e){e.preventDefault(),M.ZP.trackEvent("[COLLAGE MODAL] edit clicked",{collageId:t.id}),g(!0)},className:"bg-white",children:"Edit"})]})]})]}),(0,s.jsx)("div",{className:"flex h-full w-full flex-1 flex-col items-stretch gap-3 overflow-hidden px-4 pb-6 pt-2 sm:pl-0 sm:pr-6 sm:pt-2",children:p?(0,s.jsx)(q,{collage:t,title:b,setTitle:j,background:E,setBackground:Z,layout:O,setLayout:D,isOpen:n,setIsOpen:o,setEditing:g,saving:S,setSaving:P}):(0,s.jsx)(F,{collage:t})})]})})]})})},_=t(14538),z=function(e){var l=e.collage,t=e.className,n=e.style,o=e.width,f=e.height,x=e.hideCreator,p=e.hideSharing,g=e.isFeatured,v=(0,d.useRouter)(),b=(0,u.useState)(!1),j=b[0],k=b[1],y=(0,w.Eu)().user;(0,u.useEffect)((function(){k(v.query.collageId===l.id)}),[v.query.collageId,l]);var N=(0,u.useMemo)((function(){return!p&&"user"in l?l:null}),[l,p]),E=(0,u.useMemo)((function(){var e;return N?(0,s.jsx)("div",{className:"absolute bottom-5 right-4 flex max-w-full justify-end gap-2 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",children:(0,s.jsx)(L.Z,{sharable:l,downloadLink:N.currentUserIsCreator||"info@wantlocker.com"===(null===y||void 0===y?void 0:y.email)?null===(e=N.socialShareMedia)||void 0===e?void 0:e.url:void 0,above:!0})}):null}),[y,l,N]),C=(0,u.useMemo)((function(){return(0,s.jsxs)("div",{className:"pointer-events-none absolute inset-0 rounded-lg border-2 border-white/20 bg-black/20 flex-center",children:[(0,s.jsx)("p",{className:"text-center text-h4 font-bold text-white drop-shadow-lg group-hover:hidden",children:"Draft"}),(0,s.jsxs)("p",{className:"hidden text-center text-h4 font-bold text-white drop-shadow-lg group-hover:block",children:["Edit",(0,s.jsx)("br",{}),"Draft"]})]})}),[]),Z=(0,u.useMemo)((function(){return(0,s.jsx)("div",{className:"mt-2 flex w-full flex-1 flex-row items-start justify-start gap-2 overflow-hidden px-3",style:(0,a.Z)({},o?{width:o}:{}),children:(0,s.jsxs)("div",{className:"flex w-full max-w-full flex-col",children:[(0,s.jsx)("p",{className:"flex max-h-10 w-full max-w-full flex-row truncate whitespace-normal text-body-sm font-medium",children:l.title}),x?null:(0,s.jsxs)("p",{className:"text-body-sm text-grey",children:["by"," ","user"in l?(0,s.jsx)(c(),{href:l.user.path,passHref:!0,shallow:!0,children:(0,s.jsx)("a",{className:"underline",children:(0,s.jsx)(I.Z,{user:l.user})})}):"[User Deleted]"]})]})})}),[l,o,x]);return(0,s.jsxs)(_.Z,{className:t,children:[(0,s.jsxs)("div",{className:(0,m.m)("group relative max-w-full"),style:(0,a.Z)((0,r.Z)((0,a.Z)({},o?{width:o}:{},f?{height:f}:{}),{aspectRatio:"5/6.85"}),n),children:[(0,s.jsx)("button",{className:"h-full w-full cursor-pointer",onClick:function(){e.onClick?e.onClick():l.draft?(M.ZP.trackEvent("[COLLAGE CARD] draft clicked",{collageId:l.id}),y&&v.push("".concat(y.path,"/collages/editor?collageId=").concat(l.id),void 0,{scroll:!1})):(M.ZP.trackEvent("[COLLAGE CARD] clicked",{collageId:l.id,authorized:M.ZP.isAuthorized}),v.replace({pathname:v.pathname,query:(0,r.Z)((0,a.Z)({},v.query),{collageId:l.id})},void 0,{scroll:!1}))}}),(0,s.jsxs)("div",{className:(0,m.m)("pointer-events-none absolute inset-0 h-full w-full overflow-hidden rounded-lg border border-light-grey/25",l.draft?"contrast-50":void 0),children:[(0,s.jsx)(h.gr,{background:l.background}),(null===N||void 0===N?void 0:N.thumbnailMedia)?(0,s.jsx)("div",{className:"p-2",children:(0,s.jsx)("div",{className:"relative aspect-collage w-full overflow-hidden rounded-md",children:(0,s.jsx)(i(),{src:N.thumbnailMedia.url,unoptimized:!0,layout:"fill",objectFit:"cover",objectPosition:"center",alt:N.title})})}):(0,s.jsx)("div",{className:(0,m.m)("absolute inset-0 p-2",g?"p-1.5 sm:p-2":""),children:(0,s.jsx)(h.OV,{collage:l,isFeatured:g,className:"pointer-events-none"})})]}),l.draft?C:E]}),Z,N?(0,s.jsx)(G,{collage:N,isOpen:j,setIsOpen:function(){var e=(0,a.Z)({},v.query);delete e.collageId,delete e.showShareCTA,v.replace({pathname:v.pathname,query:e},void 0,{scroll:!1})}}):null]})}}}]);