@dcl/shop 1.0.2-31055297774.commit-b808071 → 1.0.2-31061650925.commit-fa244eb

package/_assets/OutfitStudio-DHyzlXbm.js

@@ -1,537 +0,0 @@
-import{r as d,j as t,L as A,d as Qt,a as Vt,b as Jt}from"./react-BYHuwl8r.js";import{s as o,t as dt,I as K,aI as Xt,b as e,z as st,B as x,K as kt,o as J,S as Yt,x as Zt,A as Tt,v as Ct,W as te,a0 as N,aJ as Q,aK as ee,aL as ie,aM as V,a5 as se,a6 as oe,a3 as ae,a4 as ne,U as It,a9 as re,aN as ot,aO as de,aP as le,aQ as ue,E as F,aR as Et,aS as Lt,aT as O,F as at,aU as nt,aV as ce,aW as pe,aX as fe,$ as me,aY as he,aZ as xe,ag as ge}from"./index-CTfBCyyR.js";import{E as H}from"./ErrorNotice-aOead5te.js";import{L as be}from"./LoadMore-Cy9OoEJz.js";import{u as ye}from"./useInfiniteGrid-Cy1tipbK.js";import{O as je}from"./OutfitPreview-IPt5zFQ2.js";import{T as ve}from"./skeleton.styles-CLtTv572.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:h,radius:X,media:we}=dt,$e=o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`,Se=o.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid ${h.lineStrong};
-  border-radius: ${X.pill};
-  padding: 0 14px;
-  height: 44px;
-
-  input {
-    flex: 1;
-    min-width: 0;
-    border: 0;
-    outline: 0;
-    background: none;
-    font: inherit;
-    color: ${h.text};
-  }
-`,ke=o.div`
-  display: flex;
-  gap: 8px;
-`,Te=o.button`
-  min-height: 44px;
-  padding: 0 16px;
-  border-radius: ${X.pill};
-  border: 1px solid ${h.lineStrong};
-  background: none;
-  font: inherit;
-  font-weight: 600;
-  color: ${h.text};
-  cursor: pointer;
-
-  &[data-selected] {
-    border-color: ${h.accent};
-    background: ${h.accent};
-    color: ${h.white};
-  }
-`,jt=o.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 10px;
-
-  ${we.maxWidth("mobile")} {
-    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-  }
-`,Ce=o.span`
-  height: 190px;
-  border-radius: ${X.card};
-`,Ie=o.button`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 8px;
-  background: ${h.bg};
-  border: 1px solid ${h.line};
-  border-radius: ${X.card};
-  text-align: left;
-  font: inherit;
-  color: ${h.text};
-  cursor: pointer;
-
-  &:hover:not(:disabled) {
-    border-color: ${h.magenta};
-  }
-
-  &[data-selected] {
-    border-color: ${h.accent};
-    box-shadow: 0 0 0 1px ${h.accent};
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-`,Ee=o.img`
-  width: 100%;
-  aspect-ratio: 1;
-  object-fit: cover;
-  border-radius: 8px;
-  background: ${h.media};
-`,Le=o.span`
-  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,Ne=o.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: ${h.muted};
-`,Re=o(K)`
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  color: ${h.accent};
-  background: ${h.bg};
-  border-radius: 50%;
-`,ze=[{key:"wearable",labelKey:"categories.wearables"},{key:"emote",labelKey:"categories.emotes"}];function Pe({selectedKeys:r,onPick:m,canPick:f}){const[c,y]=d.useState("wearable"),[j,b]=d.useState(""),[s,L]=d.useState("");d.useEffect(()=>{const l=setTimeout(()=>L(j.trim()),300);return()=>clearTimeout(l)},[j]);const{items:T,isLoading:C,isPlaceholderData:u,isError:S,hasNextPage:I,isFetchingNextPage:Y,fetchNextPage:$}=ye(["outfit-picker",c,s],l=>Xt({search:s||void 0,category:c,onSale:!0,listingType:"primary",first:24,skip:l,sortBy:"cheapest"})),g=e(c==="emote"?"outfits.studio.searchEmotes":"outfits.studio.searchWearables"),W=new Set,M=T.filter(l=>{if(!l.itemId)return!1;const v=`${l.contractAddress.toLowerCase()}-${l.itemId}`;return W.has(v)?!1:(W.add(v),!0)});return t.jsxs($e,{"data-testid":"outfit-picker",children:[t.jsx(ke,{role:"group","aria-label":e("outfits.studio.pickerCategory"),"data-testid":"outfit-picker-category",children:ze.map(({key:l,labelKey:v})=>t.jsx(Te,{type:"button","data-category":l,"data-selected":c===l||void 0,"aria-pressed":c===l,onClick:()=>{y(l),b("")},children:e(v)},l))}),t.jsxs(Se,{children:[t.jsx(K,{name:"search",color:dt.colors.muted}),t.jsx("input",{value:j,placeholder:g,"aria-label":g,onChange:l=>b(l.target.value),"data-testid":"outfit-picker-search"})]}),S?t.jsx("p",{className:"muted small",children:e("outfits.errors.generic")}):C||u?t.jsx(jt,{"aria-busy":"true",children:Array.from({length:8},(l,v)=>t.jsx(Ce,{className:"skeleton","aria-hidden":!0},v))}):M.length===0?t.jsx("p",{className:"muted small",children:e("outfits.studio.noResults")}):t.jsx(jt,{children:M.map(l=>{const v=`${l.contractAddress.toLowerCase()}-${l.itemId}`,U=r.has(v);return t.jsxs(Ie,{type:"button","data-testid":"outfit-picker-item","data-selected":U||void 0,disabled:!U&&!f(l),onClick:()=>m(l),title:l.name,children:[t.jsx(Ee,{src:l.thumbnail,alt:"",loading:"lazy"}),t.jsx(Le,{children:l.name}),t.jsxs(Ne,{children:[t.jsx(st,{size:12}),l.priceCredits.toLocaleString()]}),U?t.jsx(Re,{name:"check-rounded",size:18}):null]},v)})}),!S&&!C&&!u?t.jsx(be,{auto:!1,hasNextPage:!!I,isFetching:Y,onLoadMore:()=>void $()}):null]})}const{colors:a,radius:w,media:B,z:Oe}=dt,Nt=o.div`
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`,P=o.div`
-  min-height: 52vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 14px;
-`,vt=o.h1`
-  font-size: 24px;
-`,Rt=o.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`,zt=o.h1`
-  font-size: 24px;
-  font-weight: 800;
-  margin-right: auto;
-`,Ae=o(A)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  color: ${a.text};
-
-  &:hover {
-    background: ${a.panel};
-  }
-`,Pt=o.span`
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 3px 10px;
-  border-radius: ${w.pill};
-  background: ${a.chip};
-  color: ${a.muted1};
-
-  &[data-state='published'] {
-    background: rgba(30, 166, 114, 0.14);
-    color: ${a.okStrong};
-  }
-`,wt=o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`,Fe=o.span`
-  height: 76px;
-  border-radius: ${w.card};
-`,Be=o.div`
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 12px;
-  border: 1px solid ${a.line};
-  border-radius: ${w.card};
-
-  ${B.maxWidth("mobile")} {
-    flex-wrap: wrap;
-  }
-`,Ot=kt`
-  width: 52px;
-  height: 52px;
-  border-radius: 8px;
-  background: ${a.media};
-  flex-shrink: 0;
-`,Me=o.div`
-  ${Ot};
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-`,Ue=o.span`
-  ${Ot};
-  display: inline-block;
-`,De=o.div`
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`,He=o.span`
-  font-size: 15px;
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,Ke=o.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: ${a.muted};
-`,We=o.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  ${B.maxWidth("mobile")} {
-    width: 100%;
-    justify-content: flex-end;
-  }
-`,_e=o.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border: 0;
-  background: none;
-  border-radius: 50%;
-  color: ${a.muted};
-  cursor: pointer;
-
-  &:hover {
-    color: ${a.errStrong};
-    background: ${a.panel};
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-`,Ge=o.div`
-  position: fixed;
-  inset: 0;
-  z-index: ${Oe.overlay};
-  display: grid;
-  place-items: center;
-  padding: 16px;
-`,qe=o.div`
-  position: absolute;
-  inset: 0;
-  background: rgba(22, 21, 24, 0.5);
-`,Qe=o.div`
-  position: relative;
-  background: ${a.bg};
-  border-radius: ${w.card};
-  padding: 24px;
-  max-width: 420px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`,Ve=o.h2`
-  font-size: 18px;
-  font-weight: 800;
-`,Je=o.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 6px;
-`,Xe=o.div`
-  display: grid;
-  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
-  gap: 32px;
-  align-items: start;
-
-  ${B.maxWidth("mobile")} {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-`,Ye=o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-`,Ze=o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-`,ti=o.div`
-  position: relative;
-  aspect-ratio: 3 / 4;
-  border-radius: 16px;
-  overflow: hidden;
-  background: ${a.media};
-
-  ${B.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;
-  }
-`,ei=o.p`
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  text-align: center;
-`,R=o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`,z=o.label`
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: ${a.muted1};
-`,ii=o.div`
-  display: flex;
-  gap: 8px;
-`,si=o.button`
-  min-height: 44px;
-  padding: 0 16px;
-  border-radius: ${w.pill};
-  border: 1px solid ${a.lineStrong};
-  background: none;
-  font: inherit;
-  font-weight: 600;
-  color: ${a.text};
-  cursor: pointer;
-
-  &[data-selected] {
-    border-color: ${a.accent};
-    background: ${a.accent};
-    color: ${a.white};
-  }
-`,oi=o.div`
-  width: 240px;
-  aspect-ratio: 3 / 4;
-  border-radius: ${w.card};
-  overflow: hidden;
-  background: ${a.media};
-
-  &[data-busy] {
-    opacity: 0.6;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-`,ai=o.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-`,ni=o.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`,ri=o.input`
-  width: 44px;
-  height: 44px;
-  padding: 2px;
-  border: 1px solid ${a.lineStrong};
-  border-radius: ${w.btn};
-  background: none;
-  cursor: pointer;
-
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  &::-webkit-color-swatch {
-    border: 0;
-    border-radius: 4px;
-  }
-`,di=o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 12px;
-  color: ${a.muted};
-`,li=o.input`
-  width: 88px;
-  height: 26px;
-  padding: 0 6px;
-  border: 1px solid ${a.line};
-  border-radius: ${w.chip};
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  color: ${a.text};
-  text-transform: lowercase;
-
-  &[data-invalid] {
-    border-color: ${a.errStrong};
-  }
-`,ui=o.div`
-  width: 281px;
-  max-width: 100%;
-`,ci=o(x)`
-  align-self: flex-start;
-`,pi=o.div`
-  display: flex;
-  align-items: stretch;
-  gap: 8px;
-
-  input {
-    flex: 1;
-    min-width: 0;
-  }
-`,$t=o.input`
-  height: 44px;
-  padding: 0 14px;
-  border: 1px solid ${a.lineStrong};
-  border-radius: ${w.btn};
-  font: inherit;
-  color: ${a.text};
-
-  &:focus {
-    outline: 2px solid ${a.accent};
-    outline-offset: -1px;
-  }
-`,fi=o.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-`,mi=o.li`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 8px;
-  border: 1px solid ${a.line};
-  border-radius: ${w.card};
-
-  ${B.maxWidth("mobile")} {
-    flex-wrap: wrap;
-  }
-
-  &[data-missing] {
-    opacity: 0.6;
-  }
-`,At=kt`
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  background: ${a.media};
-  flex-shrink: 0;
-`,hi=o.img`
-  ${At};
-  object-fit: cover;
-`,xi=o.span`
-  ${At};
-  display: inline-block;
-`,gi=o.span`
-  flex: 1;
-  min-width: 0;
-  font-size: 14px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,bi=o.span`
-  flex: none;
-  padding: 2px 8px;
-  border-radius: ${w.pill};
-  border: 1px solid ${a.lineStrong};
-  font-size: 11px;
-  font-weight: 600;
-  color: ${a.muted};
-  white-space: nowrap;
-
-  ${B.maxWidth("mobile")} {
-    order: 1;
-    margin-left: 50px;
-  }
-`,yi=o.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  color: ${a.muted};
-  white-space: nowrap;
-`,ji=o.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 10px;
-  border-top: 1px solid ${a.line};
-  font-size: 13px;
-  font-weight: 700;
-`,vi=o.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 15px;
-  font-weight: 700;
-`,wi=o.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: 0;
-  background: none;
-  border-radius: 50%;
-  color: ${a.muted};
-  cursor: pointer;
-
-  &:hover {
-    color: ${a.errStrong};
-    background: ${a.panel};
-  }
-`,$i=o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid ${a.line};
-`,Si=o.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-`;function Hi(){const{id:r}=Qt(),{pathname:m}=Vt(),f=J(b=>b.session),c=J(b=>b.signIn),y=Yt();Zt({title:e("outfits.studio.title"),noindex:!0});const j=m.endsWith("/new")?"new":r?"edit":"list";return y==="pending"?t.jsx(P,{"aria-busy":"true","data-testid":"outfit-studio-loading",children:t.jsx("span",{className:"spinner","aria-hidden":!0})}):f?y!=="creator"?t.jsxs(P,{"data-testid":"outfit-studio-unavailable",children:[t.jsx(vt,{children:e("outfits.studio.title")}),t.jsx("p",{className:"muted",children:e("outfits.studio.notAvailable")}),t.jsx(x,{as:A,to:"/overview",variant:"purple",children:e("outfits.studio.backToShop")})]}):j==="list"?t.jsx(Ti,{}):t.jsx(Ei,{outfitId:j==="edit"?r:null},r??"new"):t.jsxs(P,{"data-testid":"outfit-studio-signin",children:[t.jsx(vt,{children:e("outfits.studio.title")}),t.jsx("p",{className:"muted",children:e("outfits.studio.signInPrompt")}),t.jsx(x,{variant:"purple",onClick:()=>c(),children:e("outfits.studio.signIn")})]})}function ki({outfit:r}){const m=It(r.thumbnailHash);return m?t.jsx(Me,{style:{background:le(r)},children:t.jsx("img",{src:m,alt:"",loading:"lazy"})}):t.jsx(Ue,{"aria-hidden":!0})}function Ti(){const r=J(u=>u.session),m=Tt(),[f,c]=d.useState(null),[y,j]=d.useState(null),{data:b=[],isLoading:s,isError:L,refetch:T}=Ct({queryKey:["outfits-all"],enabled:!!r,staleTime:3e4,queryFn:()=>xe(r.identity)});async function C(u,S){if(r){j(u.id);try{S==="delete"?(await ue(u.id,r.identity),F.success(e("outfits.studio.deleted"))):(await Et({...rt(u),published:!1},r.identity,"update"),F.success(e("outfits.studio.unpublished"))),Lt(m)}catch(I){I instanceof O||at(I,{flow:`outfit-${S}`}),F.error(e(I instanceof O?nt(I.code):"outfits.errors.generic"))}finally{j(null),c(null)}}}return t.jsxs(Nt,{"data-testid":"outfit-studio-list",children:[t.jsxs(Rt,{children:[t.jsx(zt,{children:e("outfits.studio.myOutfits")}),t.jsx(x,{as:A,to:"/outfits/new",variant:"purple","data-testid":"outfit-studio-new",children:e("outfits.studio.new")})]}),s?t.jsx(wt,{"aria-busy":"true",children:Array.from({length:3},(u,S)=>t.jsx(Fe,{className:"skeleton","aria-hidden":!0},S))}):L?t.jsxs(P,{children:[t.jsx(H,{message:e("outfits.errors.generic")}),t.jsx(x,{variant:"purple",onClick:()=>void T(),children:e("outfits.detail.retry")})]}):b.length===0?t.jsx("p",{className:"muted",children:e("outfits.studio.empty")}):t.jsx(wt,{children:b.map(u=>t.jsxs(Be,{"data-testid":"outfit-studio-row","data-published":u.published||void 0,children:[t.jsx(ki,{outfit:u}),t.jsxs(De,{children:[t.jsx(He,{children:u.name||e("outfits.studio.untitled")}),t.jsxs(Ke,{children:[t.jsx(Pt,{"data-state":u.published?"published":"draft",children:u.published?e("outfits.studio.publishedState"):e("outfits.studio.draft")}),e("outfits.card.items",{count:u.items.length})]})]}),t.jsxs(We,{children:[u.published?t.jsx(x,{as:A,to:`/items/outfits/${u.id}`,variant:"ghost",size:"sm",children:e("outfits.studio.view")}):null,t.jsx(x,{as:A,to:`/outfits/${u.id}/edit`,variant:"outline",size:"sm","data-testid":"outfit-studio-edit",children:e("outfits.studio.edit")}),t.jsx(_e,{type:"button","data-testid":"outfit-studio-delete","aria-label":e("outfits.studio.confirmDelete"),disabled:y===u.id,onClick:()=>c(u),children:t.jsx(K,{name:"trash",size:18})})]})]},u.id))}),f?t.jsxs(Ge,{role:"dialog","aria-modal":"true","aria-label":e("outfits.studio.deleteTitle"),"data-testid":"outfit-studio-confirm",children:[t.jsx(qe,{onClick:()=>c(null)}),t.jsxs(Qe,{children:[t.jsx(Ve,{children:e("outfits.studio.deleteTitle")}),t.jsx("p",{className:"muted",children:e("outfits.studio.deleteBody")}),t.jsxs(Je,{children:[f.published?t.jsx(x,{variant:"purple","data-testid":"outfit-studio-confirm-unpublish",disabled:y===f.id,onClick:()=>void C(f,"unpublish"),children:e("outfits.studio.unpublish")}):null,t.jsx(x,{variant:f.published?"outline":"purple","data-testid":"outfit-studio-confirm-delete",disabled:y===f.id,onClick:()=>void C(f,"delete"),children:e("outfits.studio.confirmDelete")}),t.jsx(x,{variant:"ghost",onClick:()=>c(null),children:e("outfits.studio.cancel")})]})]})]}):null]})}const St=["image/png","image/jpeg","image/webp"];function Ci(){return{id:crypto.randomUUID(),name:"",thumbnailHash:"",items:[],bodyShape:"unisex",gradientFrom:ot.from,gradientTo:ot.to,published:!1}}function rt(r){return{id:r.id,name:r.name,thumbnailHash:r.thumbnailHash,items:r.items,bodyShape:r.bodyShape,gradientFrom:r.gradientFrom,gradientTo:r.gradientTo,published:r.published}}function Ii(r){try{const m=sessionStorage.getItem(r);return m?JSON.parse(m):null}catch{return null}}function Ei({outfitId:r}){const m=r===null,f=`outfit-draft:${r??"new"}`,c=J(i=>i.session),y=Tt(),j=Jt(),[b]=d.useState(()=>Ii(f)),[s,L]=d.useState(()=>b??(m?Ci():null)),[T,C]=d.useState(!!b),{data:u,isLoading:S,isError:I,refetch:Y}=Ct({queryKey:["outfit",r,!0],enabled:!m&&!!c,staleTime:0,queryFn:()=>ge(r,c.identity)});d.useEffect(()=>{u&&L(i=>i??rt(u))},[u]);function $(i){L(n=>n&&{...n,...i}),C(!0)}d.useEffect(()=>{if(!(!s||!T))try{sessionStorage.setItem(f,JSON.stringify(s))}catch{}},[s,T,f]),d.useEffect(()=>{if(!T)return;const i=n=>n.preventDefault();return window.addEventListener("beforeunload",i),()=>window.removeEventListener("beforeunload",i)},[T]),d.useEffect(()=>()=>sessionStorage.removeItem(f),[f]);const g=te(s??void 0),W=d.useMemo(()=>new Set(((s==null?void 0:s.items)??[]).map(N)),[s]),M=i=>he((s==null?void 0:s.items)??[],i,g.byKey),l=i=>!!i.itemId&&M(i).length<=V;function v(i){!s||!l(i)||$({items:M(i)})}const[U,lt]=d.useState(null),E=d.useRef(null),Z=d.useRef(!0);d.useEffect(()=>(Z.current=!0,()=>{Z.current=!1}),[]);const[_,ut]=d.useState(!1),[Ft,G]=d.useState(null),[tt,ct]=d.useState(""),[Bt,pt]=d.useState(null),[k,Mt]=d.useState();d.useEffect(()=>()=>{E.current&&URL.revokeObjectURL(E.current)},[]);function ft(){const i=fe(tt);if(!i){pt(e("outfits.studio.importError"));return}pt(null),ct(""),Mt(i.colors),$({items:i.items,...i.bodyShape?{bodyShape:i.bodyShape}:{}}),F.success(e("outfits.studio.importSuccess",{count:i.items.length}))}async function Ut(i){if(!i||!c)return;if(G(null),!St.includes(i.type)){G(e("outfits.errors.unsupportedType"));return}if(i.size>ce){G(e("outfits.errors.tooLarge"));return}E.current&&URL.revokeObjectURL(E.current);const n=URL.createObjectURL(i);E.current=n,lt(n),ut(!0);try{const p=await pe(i,c.identity);$({thumbnailHash:p})}catch(p){p instanceof O||at(p,{flow:"outfit-thumbnail"}),G(e(p instanceof O?nt(p.code):"outfits.errors.generic")),E.current&&(URL.revokeObjectURL(E.current),E.current=null),lt(null)}finally{ut(!1)}}const[D,mt]=d.useState(!1),[Dt,ht]=d.useState(null),et=!!s&&s.name.trim().length>0&&s.name.length<=60,Ht=!!s&&Q(s.gradientFrom)&&Q(s.gradientTo),xt=!!s&&s.items.some(i=>{const n=g.byKey.get(N(i));return!n||ee(n)}),gt=!!s&&et&&!!s.thumbnailHash&&Ht&&xt&&s.items.length>=ie&&s.items.length<=V;async function it(i){if(!(!c||!s||D)){mt(!0),ht(null);try{const n=await Et({...s,published:i},c.identity,m?"create":"update");if(!Z.current)return;sessionStorage.removeItem(f),L(rt(n)),C(!1),Lt(y),i&&!s.published?(me("Shop Outfit Published",{outfit_id:n.id,item_count:n.items.length}),F.success(e("outfits.studio.publishedToast"))):F.success(e("outfits.studio.saved")),m&&(y.setQueryData(["outfit",n.id,!0],n),j(`/outfits/${n.id}/edit`,{replace:!0}))}catch(n){n instanceof O||at(n,{flow:"outfit-save"}),ht(e(n instanceof O?nt(n.code):"outfits.errors.generic"))}finally{mt(!1)}}}const q=d.useMemo(()=>((s==null?void 0:s.items)??[]).map(i=>g.byKey.get(N(i))).filter(i=>!!i),[s,g.byKey]),bt=d.useMemo(()=>se(q),[q]),Kt=d.useMemo(()=>{const i=oe(q);return i!=null&&i.itemId?N({contractAddress:i.contractAddress,itemId:i.itemId}):null},[q]),Wt=(s==null?void 0:s.bodyShape)==="female"?ae:(s==null?void 0:s.bodyShape)==="male"?ne:void 0;if(!c)return null;if(!s)return I?t.jsxs(P,{children:[t.jsx(H,{message:e("outfits.errors.generic")}),t.jsx(x,{variant:"purple",onClick:()=>void Y(),children:e("outfits.detail.retry")})]}):!S&&u===null?t.jsxs(P,{"data-testid":"outfit-studio-missing",children:[t.jsx("p",{className:"muted",children:e("outfits.errors.notFound")}),t.jsx(x,{as:A,to:"/outfits/manage",variant:"purple",children:e("outfits.studio.myOutfits")})]}):t.jsx(P,{"aria-busy":"true",children:t.jsx("span",{className:"spinner","aria-hidden":!0})});const yt=U??It(s.thumbnailHash),_t={...s,authorAddress:(c==null?void 0:c.address)??"",createdAt:0,updatedAt:0},Gt=s.items.reduce((i,n)=>{var p;return i+(((p=g.byKey.get(N(n)))==null?void 0:p.priceCredits)??0)},0);return t.jsxs(Nt,{"data-testid":"outfit-studio-editor",children:[t.jsxs(Rt,{children:[t.jsx(Ae,{to:"/outfits/manage","aria-label":e("outfits.studio.myOutfits"),"data-testid":"outfit-studio-back",children:t.jsx(K,{name:"arrow-left",size:18})}),t.jsx(zt,{children:m?e("outfits.studio.new"):e("outfits.studio.editTitle")}),t.jsx(Pt,{"data-state":s.published?"published":"draft",children:s.published?e("outfits.studio.publishedState"):e("outfits.studio.draft")})]}),t.jsxs(Xe,{children:[t.jsxs(Ye,{children:[t.jsxs(ti,{"data-testid":"outfit-studio-preview",style:{background:re(s)},children:[t.jsx(je,{id:"outfit-studio-preview-frame",profile:"default",bodyShape:Wt,urns:bt,skin:k==null?void 0:k.skin,hair:k==null?void 0:k.hair,eyes:k==null?void 0:k.eyes,enabled:!g.isLoading}),bt.length===0&&!g.isLoading?t.jsx(ei,{className:"muted",children:e("outfits.studio.previewEmpty")}):null]}),t.jsxs(R,{children:[t.jsx(z,{as:"span",children:e("outfits.studio.bodyShape")}),t.jsx(ii,{role:"group","aria-label":e("outfits.studio.bodyShape"),children:["unisex","male","female"].map(i=>t.jsx(si,{type:"button","data-selected":s.bodyShape===i||void 0,onClick:()=>$({bodyShape:i}),children:e(`outfits.studio.shape.${i}`)},i))})]}),t.jsxs(R,{children:[t.jsx(z,{as:"span",children:e("outfits.studio.gradient")}),t.jsx(ai,{children:["gradientFrom","gradientTo"].map(i=>t.jsxs(ni,{children:[t.jsx(ri,{type:"color",value:Q(s[i])?s[i]:ot.from,"aria-label":e(i==="gradientFrom"?"outfits.studio.gradientTop":"outfits.studio.gradientBottom"),"data-testid":i==="gradientFrom"?"outfit-studio-gradient-from":"outfit-studio-gradient-to",onChange:n=>$({[i]:n.target.value.toLowerCase()})}),t.jsxs(di,{children:[t.jsx("span",{children:e(i==="gradientFrom"?"outfits.studio.gradientTop":"outfits.studio.gradientBottom")}),t.jsx(li,{value:s[i],maxLength:7,spellCheck:!1,placeholder:"#000000","aria-label":e(i==="gradientFrom"?"outfits.studio.gradientTopHex":"outfits.studio.gradientBottomHex"),"data-invalid":!Q(s[i])||void 0,onChange:n=>{const p=n.target.value.trim().toLowerCase();$({[i]:p.startsWith("#")||p===""?p:`#${p}`})}})]})]},i))}),t.jsx("p",{className:"muted small",children:e("outfits.studio.gradientHint")})]}),t.jsxs(R,{children:[t.jsx(z,{as:"span",children:e("outfits.studio.thumbnail")}),yt?t.jsx(oi,{"data-busy":_||void 0,children:t.jsx("img",{src:yt,alt:""})}):null,t.jsxs(ci,{as:"label",variant:"outline",size:"sm","data-busy":_||void 0,children:[_?e("outfits.studio.uploading"):e("outfits.studio.upload"),t.jsx("input",{type:"file",accept:St.join(","),hidden:!0,disabled:_,onChange:i=>{var n;return void Ut((n=i.target.files)==null?void 0:n[0])},"data-testid":"outfit-studio-thumb-input"})]}),t.jsx("p",{className:"muted small",children:e("outfits.studio.thumbnailHint")}),t.jsx(H,{message:Ft,testId:"outfit-studio-thumb-error"})]}),t.jsxs(R,{children:[t.jsx(z,{as:"span",children:e("outfits.studio.cardPreview")}),t.jsx(ui,{"data-testid":"outfit-studio-card-preview",onClickCapture:i=>{i.preventDefault(),i.stopPropagation()},children:t.jsx(de,{outfit:_t,resolution:g})})]})]}),t.jsxs(Ze,{children:[t.jsxs(R,{children:[t.jsx(z,{htmlFor:"outfit-import",children:e("outfits.studio.import")}),t.jsxs(pi,{children:[t.jsx($t,{id:"outfit-import",value:tt,spellCheck:!1,placeholder:e("outfits.studio.importPlaceholder"),onChange:i=>ct(i.target.value),onKeyDown:i=>{i.key==="Enter"&&ft()},"data-testid":"outfit-studio-import"}),t.jsx(x,{variant:"outline",size:"sm",onClick:ft,disabled:tt.trim()==="","data-testid":"outfit-studio-import-apply",children:e("outfits.studio.importApply")})]}),t.jsx("p",{className:"muted small",children:e("outfits.studio.importHint")}),t.jsx(H,{message:Bt,testId:"outfit-studio-import-error"})]}),t.jsxs(R,{children:[t.jsx(z,{htmlFor:"outfit-name",children:e("outfits.studio.name")}),t.jsx($t,{id:"outfit-name",value:s.name,maxLength:60,placeholder:e("outfits.studio.namePlaceholder"),onChange:i=>$({name:i.target.value}),"data-testid":"outfit-studio-name"})]}),t.jsxs(R,{children:[t.jsxs(z,{as:"span",children:[e("outfits.studio.items")," (",s.items.length,"/",V,")"]}),s.items.length===0?t.jsx("p",{className:"muted small",children:e("outfits.studio.noItems")}):t.jsx(fi,{children:s.items.map(i=>{const n=N(i),p=g.byKey.get(n);return t.jsxs(mi,{"data-testid":"outfit-studio-selected","data-missing":!p||void 0,children:[p?t.jsx(hi,{src:p.thumbnail,alt:""}):t.jsx(xi,{className:g.isLoading?"skeleton":void 0,"aria-hidden":!0}),t.jsx(gi,{className:p?void 0:"muted",children:p?p.name:g.isLoading?t.jsx(ve,{className:"skeleton",width:96,"aria-hidden":!0}):e("outfits.card.unavailable")}),n===Kt?t.jsx(bi,{"data-testid":"outfit-studio-plays-in-preview",children:e("outfits.studio.playsInPreview")}):null,p?t.jsxs(yi,{children:[t.jsx(st,{size:12}),p.priceCredits.toLocaleString()]}):null,t.jsx(wi,{type:"button","aria-label":e("outfits.studio.remove"),title:e("outfits.studio.remove"),onClick:()=>$({items:s.items.filter(qt=>N(qt)!==n)}),children:t.jsx(K,{name:"trash",size:16})})]},n)})}),s.items.length>0?t.jsxs(ji,{"data-testid":"outfit-studio-total",children:[t.jsx("span",{children:e("outfits.detail.totalPrice")}),t.jsxs(vi,{children:[t.jsx(st,{size:14}),Gt.toLocaleString()]})]}):null,s.items.length>=V?t.jsx("p",{className:"muted small",children:e("outfits.studio.maxItems")}):null]}),t.jsx(Pe,{selectedKeys:W,onPick:v,canPick:l})]})]}),t.jsxs($i,{"data-testid":"outfit-studio-savebar",children:[t.jsx(H,{message:Dt,testId:"outfit-studio-save-error"}),et?!gt&&!s.published?t.jsx("p",{className:"muted small","data-testid":"outfit-studio-publish-hint",children:!xt&&s.items.length>0?e("outfits.studio.needsWearable"):e("outfits.errors.notPublishable")}):null:t.jsx("p",{className:"muted small",children:e("outfits.studio.needName")}),t.jsxs(Si,{children:[t.jsx(x,{variant:"outline","data-testid":"outfit-studio-save",disabled:D||!et,onClick:()=>void it(s.published),children:D?e("outfits.studio.saving"):e("outfits.studio.saveDraft")}),s.published?t.jsx(x,{variant:"purple","data-testid":"outfit-studio-unpublish",disabled:D,onClick:()=>void it(!1),children:e("outfits.studio.unpublish")}):t.jsx(x,{variant:"purple","data-testid":"outfit-studio-publish",disabled:D||!gt,onClick:()=>void it(!0),children:e("outfits.studio.publish")})]})]})]})}export{Hi as OutfitStudio,Hi as default};