"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1333],{14538:function(e,t,n){var o=n(10972),r=(n(97176),n(57851)),l=function(e){var t=e.children,n=e.className;return(0,o.jsx)("div",{className:(0,r.m)("flex select-none flex-col",n),children:t})};l.defaultProps={},t.Z=l},81333:function(e,t,n){n.d(t,{Z:function(){return S}});var o=n(14924);function r(e,t){return null!=t&&"undefined"!==typeof Symbol&&t[Symbol.hasInstance]?!!t[Symbol.hasInstance](e):e instanceof t}var l=n(26042),i=n(69396),a=n(10972),s=n(52379),d=n.n(s),c=n(74058),u=n.n(c),m=n(32010),h=n(97176),f=n(57851),v=n(42708),p=n(6891),x=n(99826),b=n(24283),g=n(2504),w=n(34479),j=n(33085),C=n(29381),k=n(22503),y=n(45249),N=n(56849),Z=n(1100),R=n(89255),P=n(70569),E=n(49676),I=n(31146),D=n(14538),z=n(12941),A=(0,p.QM)({pillButton:{alignItems:"center",backgroundColor:"rgb(254 128 79 / 0.6)",backgroundPosition:"center",backgroundSize:"cover",display:"flex",paddingTop:"5px",position:"relative","&:hover":{cursor:"default"},"&:after":(0,o.Z)({border:"7px solid #333",borderColor:"#333 transparent transparent transparent",content:'""',display:"none",left:"12px",position:"absolute",top:"-7px",transform:"translateY(-50%)"},z.Z.tablet,{left:"17px"}),"&:before":(0,o.Z)({background:"#333",borderRadius:"15px",color:"#fff",content:"attr(data-text)",display:"none",left:"-17px",padding:"5px 10px",position:"absolute",textAlign:"center",top:"-27px",transform:"translateY(-50%)"},z.Z.tablet,{left:"-13px"}),"&:hover:after":{display:"block"},"&:hover:before":{display:"block"}},pillIcon:{maxHeight:"20px",maxWidth:"20px",objectFit:"contain"},pillContainer:{display:"flex",justifyContent:"flex-end",left:"14px",maxHeight:"33px",maxWidth:"100%",opacity:"100%",pointerEvents:"fill",position:"absolute",top:"14px",zIndex:"1"}}),M=function(e){var t,n,o,s,c=e.product,p=e.pageName,z=e.isInCollectionView,M=e.hideDetails,S=e.width,L=e.height,U=A(),H=(0,m.useRouter)(),O=(0,g.vR)().showProductModal,B=(0,k.Eu)().user,T=(0,h.useCallback)((function(){var e=H.pathname;b.Z.trackProductSaved(c,e,"card")}),[c,H.pathname]),_=(0,h.useCallback)((function(){var e=H.pathname;b.Z.trackProductRemoved(c,e,"card")}),[c,H.pathname]),Y=(0,h.useMemo)((function(){var e;return(null===(e=c.collection)||void 0===e?void 0:e.giftable)&&H.query.shareCode||B}),[B,null===(t=c.collection)||void 0===t?void 0:t.giftable,H.query.shareCode]),F=(0,h.useState)(!1),V=F[0],q=F[1],K=(0,h.useState)(!1),W=K[0],G=K[1],Q=(0,h.useRef)(null),X=(0,h.useRef)(null),J=(0,h.useRef)(null);(0,h.useEffect)((function(){if(Q.current){var e=Q.current,t=function(){q(!0)},n=function(){W||q(!1)},o=function(e){if(J.current=e.target,X.current&&r(J.current,HTMLElement)){var t=function(e){var n,o=null===(n=X.current)||void 0===n?void 0:n.getAttribute("data-id");if(e.children){var l=Array.from(e.children).some((function(e){return e.getAttribute&&e.getAttribute("data-id")===o}));if(l)return!0}return!!r(e.parentNode,HTMLElement)&&t(e.parentNode)};t(J.current)||G(!1)}};return e.addEventListener("mouseover",t),e.addEventListener("mouseout",n),document.addEventListener("mousedown",o),function(){e.removeEventListener("mouseover",t),e.removeEventListener("mouseout",n),document.removeEventListener("mousedown",o)}}}),[Q,W]);var $=["collection","user"].includes(p),ee=(0,h.useMemo)((function(){return(0,a.jsxs)(a.Fragment,{children:[$&&c.purchased&&(0,a.jsx)("div",{className:U.pillContainer,children:(0,a.jsx)(N.Z,{solid:!0,className:U.pillButton,"data-text":"Purchased",children:(0,a.jsx)(j.Xw,{size:20,title:"purchased icon"})})}),$&&c.gifted&&(0,a.jsx)("div",{className:U.pillContainer,children:(0,a.jsx)(N.Z,{solid:!0,className:U.pillButton,"data-text":"Gifted",children:(0,a.jsx)(j.Sl,{size:20,title:"gifted icon"})})}),c.status!==x.Ddg.Removed&&V||W?(0,a.jsx)("div",{className:"absolute right-4 top-4 flex max-w-full justify-end",children:(0,a.jsx)(R.Z,{ref:X,buttonId:c.id,product:c,showPopoverOverride:W,setShowPopoverOverride:G,onSave:T,onRemove:_})}):null]})}),[c,T,_,V,W,G,U.pillButton,U.pillContainer,$]),te=(0,h.useMemo)((function(){var e,t;if(!c.url)return null;return(0,a.jsxs)("div",{className:"absolute bottom-4 right-4 hidden max-w-[calc(100%-2rem)] justify-end gap-2 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 sm:flex",children:[(0,a.jsx)(N.Z,{onClick:function(){w.ZP.trackEvent("[PRODUCT CARD] link clicked",{authorized:Boolean(B),productId:c.id,hostname:(0,C.mu)(c.url),location:p}),window.open(c.internalClickUrl,"_blank","noopener noreferrer")},solid:!0,className:"truncate bg-cream/[0.9]",children:Y?(0,C.mu)(c.url):"View Link"}),((null===(e=c.collection)||void 0===e?void 0:e.currentUserIsCreator)||(null===(t=c.collection)||void 0===t?void 0:t.currentUserIsCollaborator))&&(0,a.jsx)(u(),{passHref:!0,href:"".concat(c.path,"&editing=true"),shallow:!0,children:(0,a.jsx)(y.r,{src:j.dY,className:"shrink-0 bg-cream/[0.9] hover:bg-cream",onClick:function(){return w.ZP.trackEvent("[PRODUCT CARD] edit note clicked",{productId:c.id}),!0}})}),c.status!==x.Ddg.Removed&&"sharePath"in c?(0,a.jsx)(P.Z,{sharable:c}):null]})}),[Y,c,B,p]),ne=(0,h.useMemo)((function(){var e;return(null===B||void 0===B?void 0:B.id)===(null===(e=c.user)||void 0===e?void 0:e.id)}),[B,c]),oe=(0,h.useMemo)((function(){var e,t,n,o;return(0,a.jsx)("div",{className:"mt-2 flex w-full flex-row items-start justify-start gap-2 px-1 md:px-3",children:(0,a.jsxs)(a.Fragment,{children:[ne&&(null===(e=c.collection)||void 0===e?void 0:e.currentUserIsCreator)&&z&&0===c.collection.collaboratorCount?null:(0,a.jsx)(Z.Z,(0,i.Z)((0,l.Z)({},c.user),{className:"h-8 w-8",outerClassName:"h-8 w-8",innerClassName:"h-7 w-7"})),z?(0,a.jsxs)("p",{className:"mt-1 flex-1 text-eyebrows md:text-body-sm",children:["Saved by\xa0",c.user?(0,a.jsx)(u(),{href:c.user.path,shallow:!0,children:(0,a.jsx)("a",{className:(0,f.m)("flex-1 text-ellipsis",!ne&&"!underline"),children:ne?"you":(0,a.jsx)(I.Z,{user:c.user})})}):(0,a.jsx)(E.O.Box,{className:"h-4 w-20"})]}):(0,a.jsxs)("p",{className:"mt-1 max-h-10 flex-1 overflow-hidden truncate whitespace-normal text-eyebrows md:text-body-sm",children:[(null===(t=c.user)||void 0===t?void 0:t.path)?(0,a.jsx)(u(),{href:c.user.path,shallow:!0,children:(0,a.jsx)("a",{className:(0,f.m)(!ne&&"underline"),children:ne?"You":(0,a.jsx)(I.Z,{user:c.user})})}):(0,a.jsx)(E.O.Box,{className:"h-4 w-1/4 rounded-xxs"}),"\xa0saved to\xa0",(null===(n=c.collection)||void 0===n?void 0:n.path)?(0,a.jsx)(u(),{href:c.collection.path,shallow:!0,children:(0,a.jsx)("a",{className:"flex-1 overflow-hidden truncate whitespace-normal font-medium",children:c.collection.name||"Loading..."})}):(null===(o=c.collection)||void 0===o?void 0:o.name)||(0,a.jsx)(E.O.Box,{className:"h-4 w-20"})]})]})})}),[ne,z,c]),re=(0,h.useMemo)((function(){var e;return M||ne&&(null===(e=c.collection)||void 0===e?void 0:e.currentUserIsCreator)&&z&&0===c.collection.collaboratorCount}),[M,ne,z,null===(n=c.collection)||void 0===n?void 0:n.collaboratorCount,null===(o=c.collection)||void 0===o?void 0:o.currentUserIsCreator]),le=(0,h.useRef)(null),ie=(0,h.useCallback)((function(e,t,n){if(e)le.current=Date.now();else{var o=le.current;null!==o&&(le.current=null,w.ZP.trackEvent("[PRODUCT CARD] viewed",{productId:t,mediaHash:n,timeInViewportMs:Date.now()-o,location:p,authorized:w.ZP.isAuthorized}))}}),[p]);return(0,a.jsx)(v.df,{threshold:.7,onChange:function(e){return ie(e,c.id,c.mediaHash||void 0)},children:(0,a.jsxs)(D.Z,{children:[(0,a.jsxs)("div",{className:"group relative",ref:Q,style:(0,l.Z)({},S?{width:S}:{},L?{height:L}:{}),children:[(0,a.jsx)("button",{onClick:function(){w.ZP.trackEvent("[PRODUCT CARD] clicked",{productId:c.id,mediaHash:c.mediaHash||void 0,location:p,authorized:w.ZP.isAuthorized}),O(c.id,c)},className:"relative min-h-fit w-full cursor-zoom-in overflow-hidden rounded-md bg-black/5 md:rounded-lg",style:(null===(s=c.media)||void 0===s?void 0:s.width)&&c.media.height?{aspectRatio:"".concat(c.media.width," / ").concat(c.media.height)}:{aspectRatio:"1 / 1.5"},children:void 0!==c.media?(0,a.jsx)(d(),{src:(0,C.Kc)(c),alt:c.title||(0,C.Kc)(c),unoptimized:!0,layout:"fill",className:"overflow-hidden rounded-md md:rounded-lg"}):null}),ee,te]}),re?null:oe]})})},S=(0,h.memo)(M)}}]);