@dcl/shop 0.6.1 → 0.6.2-30958394678.commit-3968c2a

package/_assets/OutfitDetail-ME6t5FNU.js

@@ -1,326 +0,0 @@
-import{L as j,u as J,j as e,r as m}from"./react-DehiWSvs.js";import{s as t,I as v,t as X,H as Y,J as Z,K as ee,B as y,L as te,l as P,M as ie,o as se,v as ae,d as a,N as A,O as ne,P as re,Q as oe,R as le,S as de,U as ce,V as pe,W as he,X as me,Y as xe,Z as ue,$ as ge,a0 as fe,a1 as be,x as I,a2 as ve,a3 as ye,a4 as je,a5 as we,a6 as $e,a7 as ke}from"./index-C50bRdDg.js";import{E as R}from"./ErrorNotice-6j32LCd-.js";import{O as Ie}from"./OutfitPreview-BCoX8M6g.js";import"./sentry-973sfbO9.js";import"./dcl-schemas-Dr9BTjb7.js";import"./ethers-CtNGBird.js";import"./intl-CBcMB1D2.js";import"./disposePreview-DIA1G1eQ.js";const{colors:r,radius:Ce,media:l}=X,B=t.div`
-  max-width: 1721px;
-  margin: 0 auto;
-`,ze=t.nav`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: ${r.muted};
-  margin-bottom: 18px;
-`,F=t(j)`
-  color: ${r.muted};
-
-  &:hover {
-    color: ${r.text};
-  }
-`,Le=t.span`
-  color: ${r.text};
-  font-weight: 600;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`,M=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;
-  }
-`,_=t.div`
-  position: relative;
-  border-radius: 24px;
-  overflow: hidden;
-  background: ${r.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;
-  }
-`,Ee=t.img`
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-`,K=t.div`
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  min-height: 0;
-`,Se=t.h1`
-  font-size: 28px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-`,Ne=t.p`
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: ${r.muted1};
-`,Ae=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;
-  }
-`,Fe=t.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`,Oe=t.li`
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  gap: 14px;
-  border-radius: 16px;
-  background: ${r.bg};
-  overflow: hidden;
-  isolation: isolate;
-  transition:
-    box-shadow 0.35s ease,
-    transform 0.25s ease;
-
-  &::after {
-    ${Y};
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: 5;
-    pointer-events: none;
-    border-radius: inherit;
-    ${Z};
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  @media (hover: hover) {
-    &:hover,
-    &:focus-within {
-      ${ee};
-      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;
-  }
-`,Te=t(j)`
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-`,We=t.img`
-  width: 96px;
-  height: 96px;
-  object-fit: cover;
-  background: ${r.panel};
-  flex-shrink: 0;
-
-  ${l.maxWidth("mobile")} {
-    width: 88px;
-    height: 88px;
-  }
-`,Pe=t.span`
-  width: 96px;
-  height: 96px;
-  background: ${r.panel};
-  flex-shrink: 0;
-
-  ${l.maxWidth("mobile")} {
-    width: 88px;
-    height: 88px;
-  }
-`,O=t.div`
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 3px;
-  padding: 10px 14px 10px 0;
-`,C=t.span`
-  font-size: 14px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,Re=t(j)`
-  position: relative;
-  z-index: 2;
-  align-self: flex-start;
-  font-size: 13px;
-  color: ${r.muted};
-
-  &:hover {
-    color: ${r.text};
-    text-decoration: underline;
-  }
-`,T=t.span`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 2px;
-`,Be=t.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 16px;
-  font-weight: 600;
-  white-space: nowrap;
-`,f=t.span`
-  font-size: 12px;
-  font-weight: 400;
-  padding: 2px 8px;
-  border-radius: ${Ce.chip};
-  background: ${r.chip};
-  color: ${r.text2};
-  white-space: nowrap;
-`,Me=t.span`
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  margin-left: auto;
-
-  ${l.maxWidth("mobile")} {
-    display: none;
-  }
-`,b=t(te)`
-  &[data-variant='smart'] {
-    gap: 2px;
-    background: ${r.chip};
-    color: ${r.text2};
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-  }
-`,_e=t.p`
-  margin-top: 8px;
-`,Ke=t.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 8px 0;
-`,He=t.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-top: 12px;
-  border-top: 1px solid ${r.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: ${r.softWhite};
-    box-shadow: 0 -4px 16px rgba(22, 21, 24, 0.12);
-  }
-`,De=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;
-  }
-`,Ve=t.span`
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: ${r.muted1};
-`,qe=t.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 26px;
-  font-weight: 800;
-`,Ue=t(y)`
-  width: 100%;
-  min-height: 52px;
-  border-radius: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-`,Ge=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;
-`,Qe=t(v)`
-  opacity: 0.4;
-`,Je=t.h1`
-  font-size: 24px;
-`,Xe="outfit-detail-preview";function dt(){const{id:i}=J(),n=P(u=>u.session),d=ie(),x=d==="creator",{data:c,isError:w,refetch:p}=se({queryKey:["outfit",i,x],enabled:A()&&!!i,staleTime:6e4,queryFn:()=>ke(i,x&&n?n.identity:void 0)}),o=!A()||!i||c===null&&d!=="pending";return ae(o?{title:a("seo.outfit.notFoundTitle"),noindex:!0}:c?{title:c.name}:{}),o?e.jsxs(W,{"data-testid":"outfit-notfound",children:[e.jsx(Qe,{name:"cart",size:44}),e.jsx(Je,{children:a("outfits.detail.notFoundTitle")}),e.jsx("p",{className:"muted",children:a("outfits.detail.notFoundBody")}),e.jsx(y,{as:j,to:"/items",variant:"purple",children:a("notFound.cta")})]}):w?e.jsxs(W,{"data-testid":"outfit-detail-error",children:[e.jsx(R,{message:a("outfits.errors.generic")}),e.jsx(y,{variant:"purple",onClick:()=>void p(),children:a("outfits.detail.retry")})]}):c?e.jsx(Ze,{outfit:c}):e.jsx(B,{"aria-busy":"true","data-testid":"outfit-detail-loading",children:e.jsxs(M,{children:[e.jsx(_,{children:e.jsx("span",{className:"skeleton",style:{position:"absolute",inset:0},"aria-hidden":!0})}),e.jsxs(K,{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 Ye({item:i}){const n=ve(i),d=ye(i.gender);return e.jsxs(Me,{children:[i.rarity?e.jsx(b,{"data-variant":"rarity",style:{background:$e(i.rarity),color:we(i.rarity)},title:je(i.rarity),children:i.rarity}):null,i.isSmart?e.jsxs(b,{"data-variant":"smart",children:[e.jsx(v,{name:"smart",size:13}),a("assetCard.smart")]}):null,n?e.jsx(b,{"data-variant":"icon",children:e.jsx(v,{name:n})}):null,d?e.jsx(b,{"data-variant":"icon",children:e.jsx(v,{name:d})}):null]})}function Ze({outfit:i}){const n=ne(i),{split:d,availableCount:x,totalCredits:c,addOutfit:w,isAdding:p}=re(i,n),o=P(s=>{var h;return(h=s.session)==null?void 0:h.address}),u=oe(s=>s.items),z=m.useMemo(()=>new Set(u.map(le)),[u]),L=de(i.thumbnailHash),E=m.useRef(null);m.useEffect(()=>{E.current!==i.id&&(E.current=i.id,ce("Shop Outfit Viewed",{outfit_id:i.id,item_count:i.items.length}))},[i.id,i.items.length]);const $=m.useMemo(()=>i.items.map(s=>{const h=pe(s),k=n.byKey.get(h)??null;return{key:h,item:k,state:k?he(k,{address:o,cartKeys:z}):"missing"}}),[i,n.byKey,o,z]),{data:H,isFetched:D}=me(o),V=!o||D,S=!!o&&!!H,q=S?o:"default",U=i.bodyShape==="female"?xe:i.bodyShape==="male"?ue:void 0,N=m.useMemo(()=>$.map(s=>s.item?ge(s.item):null).filter(s=>!!s),[$]),G=i.items.length,Q=!n.isLoading&&!n.isError,g=d.purchasable.length;return e.jsxs(B,{"data-testid":"outfit-detail",children:[e.jsxs(ze,{"aria-label":a("outfits.detail.breadcrumbAria"),children:[e.jsx(F,{to:"/overview",children:a("nav.overview")}),e.jsx("span",{"aria-hidden":!0,children:">"}),e.jsx(F,{to:"/overview",children:a("outfits.detail.breadcrumbLooks")}),e.jsx("span",{"aria-hidden":!0,children:">"}),e.jsx(Le,{children:i.name})]}),e.jsxs(M,{children:[e.jsx(_,{"data-testid":"outfit-detail-preview",style:{background:fe(i)},children:L&&!n.isLoading&&N.length===0?e.jsx(Ee,{src:L,alt:i.name}):e.jsx(Ie,{id:Xe,profile:q,bodyShape:S?void 0:U,urns:N,enabled:V&&!n.isLoading})}),e.jsxs(K,{children:[e.jsx(Se,{children:i.name}),e.jsx(Ne,{"data-testid":"outfit-detail-meta",children:a("outfits.detail.itemsCount",{count:G})}),n.isError?e.jsxs(Ke,{children:[e.jsx(R,{message:a("outfits.detail.resolveError"),testId:"outfit-detail-resolve-error"}),e.jsx(y,{variant:"outline","data-testid":"outfit-detail-retry",onClick:n.retry,children:a("outfits.detail.retry")})]}):e.jsxs(e.Fragment,{children:[e.jsxs(Ae,{children:[e.jsx(Fe,{children:$.map(s=>e.jsx(Oe,{"data-testid":"outfit-detail-item","data-state":s.state,children:s.item?e.jsxs(e.Fragment,{children:[e.jsx(Te,{to:`/item/${s.item.contractAddress}/${s.item.itemId}`,state:{item:s.item},"aria-label":s.item.name}),e.jsx(We,{src:s.item.thumbnail,alt:"",loading:"lazy"}),e.jsxs(O,{children:[e.jsx(C,{children:s.item.name}),s.item.creator?e.jsx(Re,{to:`/items/creator/${s.item.creator}`,children:e.jsx(be,{address:s.item.creator})}):null,e.jsxs(T,{children:[s.state!=="unavailable"?e.jsxs(Be,{children:[e.jsx(I,{size:15}),s.item.priceCredits.toLocaleString()]}):null,s.state==="unavailable"?e.jsx(f,{children:a("outfits.card.unavailable")}):s.state==="own_listing"?e.jsx(f,{children:a("outfits.detail.yourListing")}):s.state==="in_cart"?e.jsx(f,{children:a("outfits.detail.inCart")}):null,e.jsx(Ye,{item:s.item})]})]})]}):e.jsxs(e.Fragment,{children:[e.jsx(Pe,{className:n.isLoading?"skeleton":void 0,"aria-hidden":!0}),e.jsx(O,{children:n.isLoading?e.jsx(C,{children:e.jsx("span",{className:"skeleton",style:{display:"block",width:"70%",height:14}})}):e.jsxs(e.Fragment,{children:[e.jsx(C,{className:"muted",children:a("outfits.card.unavailable")}),e.jsx(T,{children:e.jsx(f,{children:a("outfits.card.unavailable")})})]})})]})},s.key))}),Q&&d.ownListing.length>0?e.jsx(_e,{className:"muted small",children:a("outfits.detail.yourListingHint")}):null]}),e.jsxs(He,{"data-testid":"outfit-detail-ctabar",children:[e.jsxs(De,{children:[e.jsx(Ve,{children:a("outfits.detail.totalPrice")}),n.isLoading?e.jsx("span",{className:"skeleton",style:{width:64,height:26},"aria-hidden":!0}):e.jsxs(qe,{children:[e.jsx(I,{size:22}),c.toLocaleString()]})]}),n.isLoading?e.jsx("span",{className:"skeleton",style:{width:"100%",height:52,borderRadius:26},"aria-hidden":!0}):e.jsxs(Ue,{variant:"purple","data-testid":"outfit-detail-cta",onClick:w,disabled:p||g===0,"aria-busy":p||void 0,children:[p?a("outfits.card.adding"):g>0?a("outfits.detail.addCount",{count:g}):x>0?a("outfits.detail.nothingToAdd"):a("outfits.card.unavailable"),!p&&g>0?e.jsxs(Ge,{children:[e.jsx(I,{size:16}),c.toLocaleString()]}):null]})]})]})]})]})]})}export{dt as OutfitDetail,dt as default};

package/_assets/OutfitPreview-BCoX8M6g.js

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