@dcl/shop 0.6.1 → 0.6.2-30957461961.commit-f1e9c8c

package/_assets/OutfitDetail-C1M8VH09.js

@@ -0,0 +1,334 @@
+import{L as w,u as Z,j as e,r as p}from"./react-DehiWSvs.js";import{s as t,I as y,t as ee,H as te,J as ie,K as se,B as j,L as ae,l as M,M as ne,o as oe,v as re,d as a,N as F,O as le,P as de,Q as ce,R as pe,S as he,U as me,V as xe,W as ue,X as ge,Y as fe,Z as be,$ as ve,a0 as ye,a1 as je,a2 as we,x as C,a3 as Ie,a4 as $e,a5 as ke,a6 as Ce,a7 as Ee,a8 as ze}from"./index-CPUNB1w5.js";import{E as B}from"./ErrorNotice-CrDVf-1v.js";import{E as Le}from"./LazyEmoteControls-DA1cvJoy.js";import{O as Se}from"./OutfitPreview-BDPPBs6D.js";import"./sentry-973sfbO9.js";import"./dcl-schemas-Dr9BTjb7.js";import"./ethers-CtNGBird.js";import"./intl-CBcMB1D2.js";import"./disposePreview-DIA1G1eQ.js";const{colors:o,radius:Ne,media:l}=ee,_=t.div`
+  max-width: 1721px;
+  margin: 0 auto;
+`,Ae=t.nav`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: ${o.muted};
+  margin-bottom: 18px;
+`,O=t(w)`
+  color: ${o.muted};
+
+  &:hover {
+    color: ${o.text};
+  }
+`,Fe=t.span`
+  color: ${o.text};
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`,K=t.div`
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: 40px;
+  align-items: stretch;
+  height: calc(100dvh - 240px);
+  min-height: 520px;
+
+  ${l.maxWidth("mobile")} {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    height: auto;
+    min-height: 0;
+  }
+`,H=t.div`
+  position: relative;
+  border-radius: 24px;
+  overflow: hidden;
+  background: ${o.media};
+
+  ${l.maxWidth("mobile")} {
+    aspect-ratio: 1 / 1;
+  }
+
+  & iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+  }
+
+  [data-preview-viewport] {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+`,Oe=t.div`
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  & [class*="MuiBox"] {
+    pointer-events: auto;
+  }
+`,Te=t.img`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`,D=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  min-height: 0;
+`,Pe=t.h1`
+  font-size: 28px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+`,We=t.p`
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: ${o.muted1};
+`,Re=t.div`
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  /* Breathing room INSIDE the scroller (with the matching negative margin re-aligning the cards):
+     the hover zoom + ring + glow would otherwise be cropped by the overflow clip. */
+  padding: 8px 10px;
+  margin: -8px -10px;
+
+  ${l.maxWidth("mobile")} {
+    overflow: visible;
+    padding: 0;
+    margin: 0;
+  }
+`,Me=t.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`,Be=t.li`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: 14px;
+  border-radius: 16px;
+  background: ${o.bg};
+  overflow: hidden;
+  isolation: isolate;
+  transition:
+    box-shadow 0.35s ease,
+    transform 0.25s ease;
+
+  &::after {
+    ${te};
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    pointer-events: none;
+    border-radius: inherit;
+    ${ie};
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-within {
+      ${se};
+      transform: scale(1.015);
+      /* Above the neighbouring rows while zoomed, or the next card paints over the growth. */
+      z-index: 6;
+    }
+    &:hover::before,
+    &:focus-within::before {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &:hover,
+    &:focus-within {
+      transform: none;
+    }
+    &::before {
+      transition: none;
+    }
+  }
+
+  &[data-state='unavailable'],
+  &[data-state='missing'] {
+    opacity: 0.55;
+  }
+`,_e=t(w)`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+`,Ke=t.img`
+  width: 96px;
+  height: 96px;
+  object-fit: cover;
+  background: ${o.panel};
+  flex-shrink: 0;
+
+  ${l.maxWidth("mobile")} {
+    width: 88px;
+    height: 88px;
+  }
+`,He=t.span`
+  width: 96px;
+  height: 96px;
+  background: ${o.panel};
+  flex-shrink: 0;
+
+  ${l.maxWidth("mobile")} {
+    width: 88px;
+    height: 88px;
+  }
+`,T=t.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+  padding: 10px 14px 10px 0;
+`,E=t.span`
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,De=t(w)`
+  position: relative;
+  z-index: 2;
+  align-self: flex-start;
+  font-size: 13px;
+  color: ${o.muted};
+
+  &:hover {
+    color: ${o.text};
+    text-decoration: underline;
+  }
+`,P=t.span`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+`,Ve=t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+`,b=t.span`
+  font-size: 12px;
+  font-weight: 400;
+  padding: 2px 8px;
+  border-radius: ${Ne.chip};
+  background: ${o.chip};
+  color: ${o.text2};
+  white-space: nowrap;
+`,qe=t.span`
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: auto;
+
+  ${l.maxWidth("mobile")} {
+    display: none;
+  }
+`,v=t(ae)`
+  &[data-variant='smart'] {
+    gap: 2px;
+    background: ${o.chip};
+    color: ${o.text2};
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+`,Ue=t.p`
+  margin-top: 8px;
+`,Ge=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 0;
+`,Qe=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 12px;
+  border-top: 1px solid ${o.line};
+
+  ${l.maxWidth("mobile")} {
+    /* Sticky, not fixed: it rides the viewport bottom while the list is longer than the screen,
+       then STOPS at the list's end (its natural place as the column's last child) when the user
+       scrolls on toward the footer. Negative margin restores the full-bleed bar inside the page's
+       16px gutter. */
+    position: sticky;
+    bottom: 0;
+    z-index: 5;
+    margin: 40px -16px 0;
+    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
+    border-top: 0;
+    background: ${o.softWhite};
+    box-shadow: 0 -4px 16px rgba(22, 21, 24, 0.12);
+  }
+`,Je=t.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  ${l.maxWidth("mobile")} {
+    /* The phone CTA carries the price itself (the Figma bar). */
+    display: none;
+  }
+`,Xe=t.span`
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: ${o.muted1};
+`,Ye=t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 26px;
+  font-weight: 800;
+`,Ze=t(j)`
+  width: 100%;
+  min-height: 52px;
+  border-radius: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`,et=t.span`
+  display: none;
+
+  ${l.maxWidth("mobile")} {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 16px;
+  }
+`,W=t.div`
+  min-height: 52vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 14px;
+`,tt=t(y)`
+  opacity: 0.4;
+`,it=t.h1`
+  font-size: 24px;
+`,R="outfit-detail-preview";function ut(){const{id:i}=Z(),n=M(u=>u.session),d=ne(),x=d==="creator",{data:c,isError:I,refetch:h}=oe({queryKey:["outfit",i,x],enabled:F()&&!!i,staleTime:6e4,queryFn:()=>ze(i,x&&n?n.identity:void 0)}),r=!F()||!i||c===null&&d!=="pending";return re(r?{title:a("seo.outfit.notFoundTitle"),noindex:!0}:c?{title:c.name}:{}),r?e.jsxs(W,{"data-testid":"outfit-notfound",children:[e.jsx(tt,{name:"cart",size:44}),e.jsx(it,{children:a("outfits.detail.notFoundTitle")}),e.jsx("p",{className:"muted",children:a("outfits.detail.notFoundBody")}),e.jsx(j,{as:w,to:"/items",variant:"purple",children:a("notFound.cta")})]}):I?e.jsxs(W,{"data-testid":"outfit-detail-error",children:[e.jsx(B,{message:a("outfits.errors.generic")}),e.jsx(j,{variant:"purple",onClick:()=>void h(),children:a("outfits.detail.retry")})]}):c?e.jsx(at,{outfit:c}):e.jsx(_,{"aria-busy":"true","data-testid":"outfit-detail-loading",children:e.jsxs(K,{children:[e.jsx(H,{children:e.jsx("span",{className:"skeleton",style:{position:"absolute",inset:0},"aria-hidden":!0})}),e.jsxs(D,{children:[e.jsx("span",{className:"skeleton",style:{width:"60%",height:32},"aria-hidden":!0}),e.jsx("span",{className:"skeleton",style:{width:"40%",height:16},"aria-hidden":!0}),e.jsx("span",{className:"skeleton",style:{width:"100%",height:48},"aria-hidden":!0})]})]})})}function st({item:i}){const n=Ie(i),d=$e(i.gender);return e.jsxs(qe,{children:[i.rarity?e.jsx(v,{"data-variant":"rarity",style:{background:Ee(i.rarity),color:Ce(i.rarity)},title:ke(i.rarity),children:i.rarity}):null,i.isSmart?e.jsxs(v,{"data-variant":"smart",children:[e.jsx(y,{name:"smart",size:13}),a("assetCard.smart")]}):null,n?e.jsx(v,{"data-variant":"icon",children:e.jsx(y,{name:n})}):null,d?e.jsx(v,{"data-variant":"icon",children:e.jsx(y,{name:d})}):null]})}function at({outfit:i}){const n=le(i),{split:d,availableCount:x,totalCredits:c,addOutfit:I,isAdding:h}=de(i,n),r=M(s=>{var m;return(m=s.session)==null?void 0:m.address}),u=ce(s=>s.items),z=p.useMemo(()=>new Set(u.map(pe)),[u]),L=he(i.thumbnailHash),S=p.useRef(null);p.useEffect(()=>{S.current!==i.id&&(S.current=i.id,me("Shop Outfit Viewed",{outfit_id:i.id,item_count:i.items.length}))},[i.id,i.items.length]);const $=p.useMemo(()=>i.items.map(s=>{const m=xe(s),k=n.byKey.get(m)??null;return{key:m,item:k,state:k?ue(k,{address:r,cartKeys:z}):"missing"}}),[i,n.byKey,r,z]),{data:V,isFetched:q}=ge(r),U=!r||q,N=!!r&&!!V,G=N?r:"default",Q=i.bodyShape==="female"?fe:i.bodyShape==="male"?be:void 0,g=p.useMemo(()=>$.map(s=>s.item).filter(s=>!!s),[$]),A=p.useMemo(()=>ve(g),[g]),J=p.useMemo(()=>!!ye(g),[g]),X=i.items.length,Y=!n.isLoading&&!n.isError,f=d.purchasable.length;return e.jsxs(_,{"data-testid":"outfit-detail",children:[e.jsxs(Ae,{"aria-label":a("outfits.detail.breadcrumbAria"),children:[e.jsx(O,{to:"/overview",children:a("nav.overview")}),e.jsx("span",{"aria-hidden":!0,children:">"}),e.jsx(O,{to:"/overview",children:a("outfits.detail.breadcrumbLooks")}),e.jsx("span",{"aria-hidden":!0,children:">"}),e.jsx(Fe,{children:i.name})]}),e.jsxs(K,{children:[e.jsx(H,{"data-testid":"outfit-detail-preview",style:{background:je(i)},children:L&&!n.isLoading&&A.length===0?e.jsx(Te,{src:L,alt:i.name}):e.jsx(Se,{id:R,profile:G,bodyShape:N?void 0:Q,urns:A,enabled:U&&!n.isLoading,controls:J?e.jsx(Oe,{"data-testid":"outfit-emote-controls",children:e.jsx(Le,{wearablePreviewId:R,hideFrameInput:!0})}):null})}),e.jsxs(D,{children:[e.jsx(Pe,{children:i.name}),e.jsx(We,{"data-testid":"outfit-detail-meta",children:a("outfits.detail.itemsCount",{count:X})}),n.isError?e.jsxs(Ge,{children:[e.jsx(B,{message:a("outfits.detail.resolveError"),testId:"outfit-detail-resolve-error"}),e.jsx(j,{variant:"outline","data-testid":"outfit-detail-retry",onClick:n.retry,children:a("outfits.detail.retry")})]}):e.jsxs(e.Fragment,{children:[e.jsxs(Re,{children:[e.jsx(Me,{children:$.map(s=>e.jsx(Be,{"data-testid":"outfit-detail-item","data-state":s.state,children:s.item?e.jsxs(e.Fragment,{children:[e.jsx(_e,{to:`/item/${s.item.contractAddress}/${s.item.itemId}`,state:{item:s.item},"aria-label":s.item.name}),e.jsx(Ke,{src:s.item.thumbnail,alt:"",loading:"lazy"}),e.jsxs(T,{children:[e.jsx(E,{children:s.item.name}),s.item.creator?e.jsx(De,{to:`/items/creator/${s.item.creator}`,children:e.jsx(we,{address:s.item.creator})}):null,e.jsxs(P,{children:[s.state!=="unavailable"?e.jsxs(Ve,{children:[e.jsx(C,{size:15}),s.item.priceCredits.toLocaleString()]}):null,s.state==="unavailable"?e.jsx(b,{children:a("outfits.card.unavailable")}):s.state==="own_listing"?e.jsx(b,{children:a("outfits.detail.yourListing")}):s.state==="in_cart"?e.jsx(b,{children:a("outfits.detail.inCart")}):null,e.jsx(st,{item:s.item})]})]})]}):e.jsxs(e.Fragment,{children:[e.jsx(He,{className:n.isLoading?"skeleton":void 0,"aria-hidden":!0}),e.jsx(T,{children:n.isLoading?e.jsx(E,{children:e.jsx("span",{className:"skeleton",style:{display:"block",width:"70%",height:14}})}):e.jsxs(e.Fragment,{children:[e.jsx(E,{className:"muted",children:a("outfits.card.unavailable")}),e.jsx(P,{children:e.jsx(b,{children:a("outfits.card.unavailable")})})]})})]})},s.key))}),Y&&d.ownListing.length>0?e.jsx(Ue,{className:"muted small",children:a("outfits.detail.yourListingHint")}):null]}),e.jsxs(Qe,{"data-testid":"outfit-detail-ctabar",children:[e.jsxs(Je,{children:[e.jsx(Xe,{children:a("outfits.detail.totalPrice")}),n.isLoading?e.jsx("span",{className:"skeleton",style:{width:64,height:26},"aria-hidden":!0}):e.jsxs(Ye,{children:[e.jsx(C,{size:22}),c.toLocaleString()]})]}),n.isLoading?e.jsx("span",{className:"skeleton",style:{width:"100%",height:52,borderRadius:26},"aria-hidden":!0}):e.jsxs(Ze,{variant:"purple","data-testid":"outfit-detail-cta",onClick:I,disabled:h||f===0,"aria-busy":h||void 0,children:[h?a("outfits.card.adding"):f>0?a("outfits.detail.addCount",{count:f}):x>0?a("outfits.detail.nothingToAdd"):a("outfits.card.unavailable"),!h&&f>0?e.jsxs(et,{children:[e.jsx(C,{size:16}),c.toLocaleString()]}):null]})]})]})]})]})]})}export{ut as OutfitDetail,ut as default};

package/_assets/OutfitPreview-BDPPBs6D.js

@@ -0,0 +1,6 @@
+import{r,j as n}from"./react-DehiWSvs.js";import{d as v}from"./dcl-schemas-Dr9BTjb7.js";import{s as R,Q as b,c as F,a9 as O,d as S}from"./index-CPUNB1w5.js";import{u as B,d as W}from"./disposePreview-DIA1G1eQ.js";const H=R.div`
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+`;function q({id:a,profile:i,bodyShape:g,urns:s,enabled:c=!0,skin:l,hair:f,eyes:d,controls:w}){const E=b(t=>t.fittingOpen),{ref:x,active:h}=B(),e=c&&s.length>0&&h&&!E,y=s.length>0?s[0].includes(":amoy:"):F.chainId===80002,[j,o]=r.useState(!1),A=s.join(",");r.useEffect(()=>{o(!1)},[A,i,l,f,d]),r.useEffect(()=>{e&&o(!1)},[e]);const[I,m]=r.useState(!1);r.useEffect(()=>{if(!e){m(!1);return}let t=0,P=0;const p=()=>{document.getElementById(a)?m(!0):P++<300&&(t=requestAnimationFrame(p))};return p(),()=>cancelAnimationFrame(t)},[e,a]);const u=r.useRef(null);return r.useEffect(()=>{if(e)return()=>{W(u.current),u.current=null}},[e]),n.jsxs(n.Fragment,{children:[n.jsx("div",{ref:x,"data-preview-viewport":!0,"aria-hidden":!0}),e?n.jsx(O,{id:a,profile:i,bodyShape:g,urns:s,skin:l,hair:f,eyes:d,type:v.PreviewType.AVATAR,emote:v.PreviewEmote.FASHION,disableBackground:!0,disableFadeEffect:!0,dev:y,onLoad:()=>{var t;o(!0),u.current=((t=document.getElementById(a))==null?void 0:t.contentWindow)??null}},i):null,I?w:null,c&&s.length===0?null:!e||!j?n.jsx(H,{"aria-busy":"true","aria-label":S("spinner.loading"),children:n.jsx("span",{className:"spinner","aria-hidden":!0})}):null]})}export{q as O};