@dcl/shop 1.0.2-31061650925.commit-fa244eb → 1.0.2-31075138109.commit-b4b8f60

package/_assets/OutfitDetail-N4whvhsJ.js

@@ -0,0 +1,377 @@
+import{L as k,d as ie,j as e,r as h}from"./react-BYHuwl8r.js";import{t as ae,s as t,I as w,O as se,P as ne,B as $,Q as oe,o as M,R as re,v as le,x as de,b as s,S as _,U as F,V as ce,W as he,X as pe,Y as me,Z as ue,$ as xe,a0 as ge,a1 as fe,a2 as be,a3 as ye,a4 as ve,a5 as je,a6 as we,a7 as $e,a8 as ke,a9 as Ce,z,aa as Ie,ab as Ee,ac as ze,ad as Le,ae as We,af as Oe}from"./index-H0_FOTS1.js";import{E as H}from"./ErrorNotice-CCUuPON0.js";import{E as Se}from"./LazyEmoteControls-PQ3Pg2sc.js";import{O as Ae}from"./OutfitPreview-D7BVurmj.js";import"./dcl-schemas-CmtP3U6y.js";import"./sentry-Dx-KuLV3.js";import"./ethers-BDpbhgX6.js";import"./intl-CBcMB1D2.js";import"./disposePreview-5vjiqVZ0.js";const{colors:n,radius:f,media:r,gradients:Fe}=ae,K=t.div`
+  max-width: 1721px;
+  margin: 0 auto;
+  /* The page's bottom padding is 56px, but the phone CTA bar is sticky and has its own bottom padding for the safe area. 
+   * The bar's shadow would otherwise float over the footer, so the page's padding is reduced to match the bar's height. */
+  margin-bottom: -56px;
+`,Te=t.nav`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: ${n.gray4};
+  margin-bottom: 18px;
+`,T=t(k)`
+  color: ${n.gray4};
+
+  &:hover {
+    color: ${n.white};
+  }
+`,Pe=t.span`
+  color: ${n.softWhite};
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`,q=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;
+
+  ${r.maxWidth("mobile")} {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    height: auto;
+    min-height: 0;
+  }
+`,D=t.div`
+  position: relative;
+  border-radius: 24px;
+  overflow: hidden;
+  background: ${n.media};
+
+  /* Full-bleed square on phones (Figma): the artwork runs edge to edge, so the panel gives up both its
+     radius and the page's 16px gutter. */
+  ${r.maxWidth("mobile")} {
+    aspect-ratio: 1 / 1;
+    margin: 0 -16px;
+    border-radius: 0;
+  }
+
+  & iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+  }
+
+  [data-preview-viewport] {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+`,Re=t.div`
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  & [class*='MuiBox'] {
+    pointer-events: auto;
+  }
+`,Be=t.img`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`,U=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  min-height: 0;
+`,Ne=t.h1`
+  font-size: 28px;
+  font-weight: 600;
+  color: ${n.softWhite};
+  overflow-wrap: anywhere;
+
+  ${r.maxWidth("mobile")} {
+    font-size: 20px;
+    line-height: 24px;
+  }
+`,Me=t.p`
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: ${n.gray4};
+`,_e=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;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
+
+  ${r.maxWidth("mobile")} {
+    overflow: visible;
+    padding: 0;
+    margin: 0;
+  }
+`,He=t.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`,Ke=t.li`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: 14px;
+  border-radius: ${f.card};
+  background: rgba(0, 0, 0, 0.4);
+  color: ${n.softWhite};
+  overflow: hidden;
+  isolation: isolate;
+  transition:
+    box-shadow 0.35s ease,
+    transform 0.25s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    pointer-events: none;
+    border-radius: inherit;
+    ${se};
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-within {
+      ${ne};
+      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;
+  }
+`,qe=t(k)`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+`,De=t.img`
+  width: 96px;
+  height: 96px;
+  object-fit: cover;
+  border-radius: ${f.card};
+  background: ${n.media};
+  flex-shrink: 0;
+
+  ${r.maxWidth("mobile")} {
+    width: 88px;
+    height: 88px;
+  }
+`,Ue=t.span`
+  width: 96px;
+  height: 96px;
+  border-radius: ${f.card};
+  background: ${n.media};
+  flex-shrink: 0;
+
+  ${r.maxWidth("mobile")} {
+    width: 88px;
+    height: 88px;
+  }
+`,P=t.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+  padding: 10px 14px 10px 0;
+`,L=t.span`
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,Ve=t(k)`
+  position: relative;
+  z-index: 2;
+  align-self: flex-start;
+  font-size: 13px;
+  color: ${n.gray4};
+
+  &:hover {
+    color: ${n.softWhite};
+    text-decoration: underline;
+  }
+`,R=t.span`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+`,Qe=t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+`,v=t.span`
+  font-size: 12px;
+  font-weight: 400;
+  padding: 2px 8px;
+  border-radius: ${f.chip};
+  background: rgba(255, 255, 255, 0.14);
+  color: ${n.softWhite};
+  white-space: nowrap;
+`,Ge=t.span`
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: auto;
+
+  ${r.maxWidth("mobile")} {
+    display: none;
+  }
+`,j=t(oe)`
+  border-radius: 6px;
+
+  &[data-variant='smart'],
+  &[data-variant='icon'] {
+    background: rgba(22, 21, 24, 0.55);
+    color: ${n.softWhite};
+  }
+  &[data-variant='smart'] {
+    gap: 2px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+  &[data-variant='icon'] .ico {
+    color: ${n.softWhite};
+  }
+`,Xe=t.p`
+  margin: 0;
+  font-size: 13px;
+  color: ${n.gray4};
+`,Ye=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 0;
+`,Ze=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+
+  ${r.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: ${n.accent};
+    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
+  }
+`,Je=t.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  ${r.maxWidth("mobile")} {
+    /* The phone CTA carries the price itself (the Figma bar). */
+    display: none;
+  }
+`,et=t.span`
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: ${n.gray4};
+`,tt=t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 26px;
+  font-weight: 800;
+  color: ${n.softWhite};
+`,it=t($)`
+  width: 100%;
+  min-height: 52px;
+  border-radius: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  && {
+    background: ${Fe.buyBtn};
+  }
+  &&::before {
+    content: none;
+  }
+  &&:hover:not(:disabled) {
+    background-image: linear-gradient(${n.dclRed}, ${n.dclRed});
+  }
+
+  ${r.maxWidth("mobile")} {
+    border-radius: ${f.pill};
+  }
+`,at=t.span`
+  display: none;
+
+  ${r.maxWidth("mobile")} {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 16px;
+  }
+`,B=t.div`
+  min-height: 52vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 14px;
+  color: ${n.softWhite};
+`,st=t(w)`
+  opacity: 0.4;
+`,nt=t.h1`
+  font-size: 24px;
+`,ot=t.p`
+  margin: 0;
+  color: ${n.gray4};
+`,N="outfit-detail-preview";function yt(){const{id:i}=ie(),o=M(y=>y.session),c=re(),b=c==="creator",{data:l,isError:C,refetch:m}=le({queryKey:["outfit",i,b],enabled:F()&&!!i,staleTime:6e4,queryFn:()=>Oe(i,b&&o?o.identity:void 0)}),d=!F()||!i||l===null&&c!=="pending";return de(d?{title:s("seo.outfit.notFoundTitle"),noindex:!0}:l?{title:l.name,image:_(l.thumbnailHash)??void 0}:{}),d?e.jsxs(B,{"data-testid":"outfit-notfound",children:[e.jsx(st,{name:"cart",size:44}),e.jsx(nt,{children:s("outfits.detail.notFoundTitle")}),e.jsx(ot,{children:s("outfits.detail.notFoundBody")}),e.jsx($,{as:k,to:"/items",variant:"purple",children:s("notFound.cta")})]}):C?e.jsxs(B,{"data-testid":"outfit-detail-error",children:[e.jsx(H,{message:s("outfits.errors.generic")}),e.jsx($,{variant:"purple",onClick:()=>void m(),children:s("outfits.detail.retry")})]}):l?e.jsx(lt,{outfit:l}):e.jsx(K,{"aria-busy":"true","data-testid":"outfit-detail-loading",children:e.jsxs(q,{children:[e.jsx(D,{children:e.jsx("span",{className:"skeleton",style:{position:"absolute",inset:0},"aria-hidden":!0})}),e.jsxs(U,{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 rt({item:i}){const o=Ie(i),c=Ee(i.gender);return e.jsxs(Ge,{children:[i.rarity?e.jsx(j,{"data-variant":"rarity",style:{background:We(i.rarity)},title:Le(i.rarity),children:ze(i.rarity)}):null,i.isSmart?e.jsxs(j,{"data-variant":"smart",children:[e.jsx(w,{name:"smart",size:13}),s("assetCard.smart")]}):null,o?e.jsx(j,{"data-variant":"icon",children:e.jsx(w,{name:o})}):null,c?e.jsx(j,{"data-variant":"icon",children:e.jsx(w,{name:c})}):null]})}function lt({outfit:i}){const o=ce(i),{split:c,availableCount:b,totalCredits:l,addOutfit:C,isAdding:m}=he(i,o),d=M(a=>{var g;return(g=a.session)==null?void 0:g.address}),y=pe(a=>a.items),W=h.useMemo(()=>new Set(y.map(me)),[y]),O=_(i.thumbnailHash),S=h.useRef(null);h.useEffect(()=>{S.current!==i.id&&(S.current=i.id,ue("Shop Outfit Viewed",{outfit_id:i.id,item_count:i.items.length}))},[i.id,i.items.length]);const I=h.useMemo(()=>i.items.map(a=>{const g=xe(a),E=o.byKey.get(g)??null;return{key:g,item:E,state:E?ge(E,{address:d,cartKeys:W}):"missing"}}),[i,o.byKey,d,W]),{data:V,isFetched:Q}=fe(d),G=!d||Q,X=!!d&&!!V,Y=i.bodyShape==="female"?be:i.bodyShape==="male"?ye:void 0,u=h.useMemo(()=>I.map(a=>a.item).filter(a=>!!a),[I]),A=h.useMemo(()=>ve(u),[u]),Z=h.useMemo(()=>!!je(u),[u]),J=h.useMemo(()=>u.map(a=>we(a)??"").filter(Boolean),[u]),p=$e({address:d,tryOnUrns:A,tryOnCategories:J}),ee=i.items.length,te=!o.isLoading&&!o.isError,x=c.purchasable.length;return e.jsxs(K,{"data-testid":"outfit-detail",children:[e.jsxs(Te,{"aria-label":s("outfits.detail.breadcrumbAria"),children:[e.jsx(T,{to:"/overview",children:s("nav.overview")}),e.jsx("span",{"aria-hidden":!0,children:">"}),e.jsx(T,{to:"/overview",children:s("outfits.detail.breadcrumbLooks")}),e.jsx("span",{"aria-hidden":!0,children:">"}),e.jsx(Pe,{children:i.name})]}),e.jsxs(q,{children:[e.jsx(D,{"data-testid":"outfit-detail-preview",style:{background:ke(i)},children:O&&!o.isLoading&&A.length===0?e.jsx(Be,{src:O,alt:i.name}):e.jsx(Ae,{id:N,profile:p.profile,bodyShape:p.bodyShape??(X?void 0:Y),urns:p.urns,skin:p.skin,hair:p.hair,eyes:p.eyes,enabled:G&&!p.isLoading&&!o.isLoading,controls:Z?e.jsx(Re,{"data-testid":"outfit-emote-controls",children:e.jsx(Se,{wearablePreviewId:N,hideFrameInput:!0})}):null})}),e.jsxs(U,{children:[e.jsx(Ne,{children:i.name}),e.jsx(Me,{"data-testid":"outfit-detail-meta",children:s("outfits.detail.itemsCount",{count:ee})}),o.isError?e.jsxs(Ye,{children:[e.jsx(H,{message:s("outfits.detail.resolveError"),testId:"outfit-detail-resolve-error"}),e.jsx($,{variant:"outline","data-testid":"outfit-detail-retry",onClick:o.retry,children:s("outfits.detail.retry")})]}):e.jsxs(e.Fragment,{children:[e.jsx(_e,{children:e.jsx(He,{children:I.map(a=>e.jsx(Ke,{"data-testid":"outfit-detail-item","data-state":a.state,children:a.item?e.jsxs(e.Fragment,{children:[e.jsx(qe,{to:`/item/${a.item.contractAddress}/${a.item.itemId}`,state:{item:a.item},"aria-label":a.item.name}),e.jsx(De,{src:a.item.thumbnail,alt:"",loading:"lazy"}),e.jsxs(P,{children:[e.jsx(L,{children:a.item.name}),a.item.creator?e.jsx(Ve,{to:`/items/creator/${a.item.creator}`,children:e.jsx(Ce,{address:a.item.creator})}):null,e.jsxs(R,{children:[a.state!=="unavailable"?e.jsxs(Qe,{children:[e.jsx(z,{size:15}),a.item.priceCredits.toLocaleString()]}):null,a.state==="unavailable"?e.jsx(v,{children:s("outfits.card.unavailable")}):a.state==="own_listing"?e.jsx(v,{children:s("outfits.detail.yourListing")}):a.state==="in_cart"?e.jsx(v,{children:s("outfits.detail.inCart")}):null,e.jsx(rt,{item:a.item})]})]})]}):e.jsxs(e.Fragment,{children:[e.jsx(Ue,{className:o.isLoading?"skeleton":void 0,"aria-hidden":!0}),e.jsx(P,{children:o.isLoading?e.jsx(L,{children:e.jsx("span",{className:"skeleton",style:{display:"block",width:"70%",height:14}})}):e.jsxs(e.Fragment,{children:[e.jsx(L,{children:s("outfits.card.unavailable")}),e.jsx(R,{children:e.jsx(v,{children:s("outfits.card.unavailable")})})]})})]})},a.key))})}),e.jsxs(Ze,{"data-testid":"outfit-detail-ctabar",children:[te&&c.ownListing.length>0?e.jsx(Xe,{children:s("outfits.detail.yourListingHint")}):null,x>0&&e.jsxs(Je,{children:[e.jsx(et,{children:s("outfits.detail.totalPrice")}),o.isLoading?e.jsx("span",{className:"skeleton",style:{width:64,height:26},"aria-hidden":!0}):e.jsxs(tt,{children:[e.jsx(z,{size:22}),l.toLocaleString()]})]}),o.isLoading?e.jsx("span",{className:"skeleton",style:{width:"100%",height:52,borderRadius:26},"aria-hidden":!0}):e.jsxs(it,{variant:"purple","data-testid":"outfit-detail-cta",onClick:C,disabled:m||x===0,"aria-busy":m||void 0,children:[m?s("outfits.card.adding"):x>0?s("outfits.detail.addCount",{count:x}):b>0?s("outfits.detail.nothingToAdd"):s("outfits.card.unavailable"),!m&&x>0?e.jsxs(at,{children:[e.jsx(z,{size:16}),l.toLocaleString()]}):null]})]})]})]})]})]})}export{yt as OutfitDetail,yt as default};

package/_assets/{OutfitPreview-J5m3e8Gl.js → OutfitPreview-D7BVurmj.js}

@@ -1,6 +1,6 @@
-import{r,j as n}from"./react-BYHuwl8r.js";import{d as v}from"./dcl-schemas-CmtP3U6y.js";import{s as P,Y as R,ah as F,c as O,ai as S,b as B}from"./index-D7dTUoYt.js";import{d as W}from"./disposePreview-5vjiqVZ0.js";const H=P.div`
+import{r,j as n}from"./react-BYHuwl8r.js";import{d as g}from"./dcl-schemas-CmtP3U6y.js";import{s as P,X as R,ag as F,c as O,ah as S,b as B}from"./index-H0_FOTS1.js";import{d as W}from"./disposePreview-5vjiqVZ0.js";const H=P.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=R(t=>t.fittingOpen),{ref:h,active:x}=F(),e=c&&s.length>0&&x&&!E,y=s.length>0?s[0].includes(":amoy:"):O.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[b,m]=r.useState(!1);r.useEffect(()=>{if(!e){m(!1);return}let t=0,I=0;const p=()=>{document.getElementById(a)?m(!0):I++<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:h,"data-preview-viewport":!0,"aria-hidden":!0}),e?n.jsx(S,{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,b?w:null,c&&s.length===0?null:!e||!j?n.jsx(H,{"aria-busy":"true","aria-label":B("spinner.loading"),children:n.jsx("span",{className:"spinner","aria-hidden":!0})}):null]})}export{q as O};
+`;function q({id:a,profile:i,bodyShape:v,urns:s,enabled:c=!0,skin:l,hair:f,eyes:d,controls:w}){const E=R(t=>t.fittingOpen),{ref:h,active:x}=F(),e=c&&s.length>0&&x&&!E,y=s.length>0?s[0].includes(":amoy:"):O.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[b,m]=r.useState(!1);r.useEffect(()=>{if(!e){m(!1);return}let t=0,I=0;const p=()=>{document.getElementById(a)?m(!0):I++<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:h,"data-preview-viewport":!0,"aria-hidden":!0}),e?n.jsx(S,{id:a,profile:i,bodyShape:v,urns:s,skin:l,hair:f,eyes:d,type:g.PreviewType.AVATAR,emote:g.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,b?w:null,c&&s.length===0?null:!e||!j?n.jsx(H,{"aria-busy":"true","aria-label":B("spinner.loading"),children:n.jsx("span",{className:"spinner","aria-hidden":!0})}):null]})}export{q as O};