https://app.topbananausa.com/static/js/21791.72effa47.chunk.js

1"use strict";(self.webpackChunkprint_on_demand=self.webpackChunkprint_on_demand||[]).push([[21791],{21791:(e,l,a)=>{a.r(l),a.d(l,{default:()=>d});var s=a(65043),n=a(1663),i=a(4269),t=a(70579);let c=0;const r=/\.(png|jpe?g|webp|gif|svg)$/i;function o(e){return[...e||[]]}function d(e){var l,a,d,h;let{content:u,config:p,onChange:m,onApply:g,applying:v=!1,garmentHint:x="",garmentHex:_="",onClose:k}=e;const j=(0,i.NS)(p),f="uploaded"===j.artworkSource,y=(0,i.iw)(j,_),z=(0,i.tI)(j.textColor),[N,S]=(0,s.useState)(!1),[w,C]=(0,s.useState)(!1),[R,A]=(0,s.useState)(""),P=(0,s.useRef)(null),D=(0,s.useRef)(null),F=(0,s.useRef)(null),T=(0,s.useRef)(""),W=(0,s.useMemo)((()=>{var e;return null!==u&&void 0!==u&&null!==(e=u.careSteps)&&void 0!==e&&e.length?u.careSteps.map((e=>e.label)).join(" \xb7 "):(null===u||void 0===u?void 0:u.careText)||""}),[u]),E=e=>{null===m||void 0===m||m({...j,...e,mode:"inner"})},G=(0,i.MR)(j),$=(null===u||void 0===u?void 0:u.sizes)||[],I=(0,i.My)(j,$),O=e=>{const l=(j.excludedSizes||[]).filter((l=>!e.some((e=>e.size&&(0,i.e2)(e.size,l)))));null===m||void 0===m||m((0,i.cG)({...j,excludedSizes:l},e))},U=async function(e){let l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";const a=o(e),s=function(e){return[...e||[]].filter((e=>!!String((null===e||void 0===e?void 0:e.type)||"").startsWith("image/")||r.test((null===e||void 0===e?void 0:e.name)||"")))}(a);if(a.length)if(s.length){A(""),C(!0);try{const e=[];for(const l of s){const a=await(0,i.i)(l);null!==a&&void 0!==a&&a.src&&e.push({...a,id:(c+=1,`nl-${Date.now().toString(36)}-${c}`)})}if(!e.length)return void A("Couldn\u2019t read those labels. Try PNG or JPG files.");if(l){const[a,...s]=e,n=G.filter((e=>e.size!==l)),{mapped:t,unmatched:c}=(0,i.C1)(s,$,[...n.map((e=>e.size)),l]),r=[...n,{...a,size:l}];return Object.entries(t).forEach((e=>{let[l,a]=e;r.push({...a,size:l})})),c.forEach((e=>r.push({...e,size:""}))),void O(r)}const a=[...G.map((e=>e.size)).filter(Boolean),...j.excludedSizes||[]],{mapped:n,unmatched:t}=(0,i.C1)(e,$,a),r=[...G];Object.entries(n).forEach((e=>{let[l,a]=e;r.push({...a,size:l})})),t.forEach((e=>r.push({...e,size:""}))),O(r)}catch(n){console.error("Error reading sized neck labels:",n),A("Couldn\u2019t read those labels. Try PNG or JPG files.")}finally{C(!1)}}else A("Use a PNG, JPG, or WebP for each label.")},M=e=>{const l="auto"===e?"auto":(0,i.qw)(e)||e;E({textColor:l})},q=async e=>{if(e){S(!0);try{const l=await(0,i.Ht)(e);null===g||void 0===g||g({...j,...l,mode:"inner"})}catch(l){console.error("Error reading neck label image:",l)}finally{S(!1)}}},B=e=>{var l;e.preventDefault(),e.stopPropagation();const a=[...(null===(l=e.dataTransfer)||void 0===l?void 0:l.files)||[]].find((e=>String(e.type||"").startsWith("image/")));q(a)},J=[null!==u&&void 0!==u&&u.previewSize||null!==u&&void 0!==u&&null!==(l=u.sizes)&&void 0!==l&&l.length?null:"size",null!==u&&void 0!==u&&u.fabric?null:"fabric",null!==u&&void 0!==u&&u.origin?null:"country of origin",null!==u&&void 0!==u&&u.careText||null!==u&&void 0!==u&&null!==(a=u.careSteps)&&void 0!==a&&a.length?null:"care"].filter(Boolean);return(0,t.jsxs)("div",{className:"neck-label-tab",children:[k?(0,t.jsx)("button",{type:"button",className:"neck-label-tab__back",onClick:k,children:"Back to design"}):null,(0,t.jsxs)("div",{className:"neck-label-tab__intro",children:[(0,t.jsx)("h3",{children:"Neck label"}),(0,t.jsx)("p",{children:f?"Upload a finished label for each size. Orders print the file you assign to that size, including your own size text.":"Inside collar label. Size, fabric, origin, and care come from this blank \u2014 restyle them and add your image. Legal copy stays as-is."})]}),(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"Label artwork"}),(0,t.jsxs)("div",{className:"neck-label-tab__styles neck-label-tab__styles--two",children:[(0,t.jsxs)("button",{type:"button",className:"neck-label-tab__style neck-label-tab__style--care "+(f?"":"is-selected"),"aria-pressed":!f,onClick:()=>E({artworkSource:"generated"}),disabled:v,children:[(0,t.jsx)("strong",{children:"We print the size"}),(0,t.jsx)("span",{children:"Size, fabric, origin, and care from this blank"})]}),(0,t.jsxs)("button",{type:"button",className:"neck-label-tab__style neck-label-tab__style--care "+(f?"is-selected":""),"aria-pressed":f,onClick:()=>E({artworkSource:"uploaded"}),disabled:v,children:[(0,t.jsx)("strong",{children:"Your labels"}),(0,t.jsx)("span",{children:"One finished label per size"})]})]})]}),f?(0,t.jsx)(b,{sizes:$,files:G,previewSize:null===u||void 0===u?void 0:u.previewSize,missingSizes:I.missing,reading:w,error:R,applying:v,artPreview:e=>(null===e||void 0===e?void 0:e.src)||(null===e||void 0===e?void 0:e.url)||"",bulkInputRef:D,rowInputRef:F,onBulkFiles:e=>

1U(e),onRowFiles:(e,l)=>U(l,e),onAssignSize:(e,l)=>O((0,i.Yk)(G,e,l)),onRemove:e=>O((0,i.xt)(G,e)),onToggleSize:(e,l)=>{null===m||void 0===m||m((0,i.tN)(j,e,l))},excludedSizes:j.excludedSizes||[],rowTargetRef:T}):null,f?null:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"Image"}),(0,t.jsx)("input",{ref:P,type:"file",accept:"image/png,image/jpeg,image/webp,image/svg+xml,image/gif",hidden:!0,onChange:e=>{var l;const a=null===(l=e.target.files)||void 0===l?void 0:l[0];e.target.value="",q(a)}}),j.logoSrc?(0,t.jsxs)("div",{className:"neck-label-tab__upload is-filled",onDragOver:e=>e.preventDefault(),onDrop:B,children:[(0,t.jsx)("img",{src:j.logoSrc,alt:j.logoName||"Neck label image"}),(0,t.jsxs)("div",{className:"neck-label-tab__upload-meta",children:[(0,t.jsx)("strong",{children:j.logoName||"Uploaded image"}),(0,t.jsx)("span",{children:"Its own layer, above the size and care text"}),(0,t.jsxs)("div",{className:"neck-label-tab__upload-actions",children:[(0,t.jsx)("button",{type:"button",onClick:()=>{var e;return null===(e=P.current)||void 0===e?void 0:e.click()},disabled:v||N,children:"Replace"}),(0,t.jsx)("button",{type:"button",onClick:()=>E({logoSrc:"",logoName:""}),disabled:v||N,children:"Remove"})]})]})]}):(0,t.jsxs)("button",{type:"button",className:"neck-label-tab__upload",onClick:()=>{var e;return null===(e=P.current)||void 0===e?void 0:e.click()},onDragOver:e=>e.preventDefault(),onDrop:B,disabled:v||N,children:[(0,t.jsx)("strong",{children:N?"Adding image\u2026":"Upload image"}),(0,t.jsx)("span",{children:"PNG, JPG, WebP, or SVG \u2014 logo or mark for the inside label"})]})]}),(0,t.jsxs)("div",{className:"neck-label-tab__layer",children:[(0,t.jsxs)("div",{className:"neck-label-tab__layer-head",children:[(0,t.jsx)("span",{className:"neck-label-tab__layer-mark",children:"Tt"}),(0,t.jsxs)("div",{children:[(0,t.jsx)("strong",{children:"Care instructions"}),(0,t.jsx)("em",{children:"Required layer"})]})]}),(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"Font color"}),(0,t.jsxs)("label",{className:"neck-label-tab__select-wrap",children:[(0,t.jsx)("span",{className:"neck-label-tab__select-swatch",style:{background:y}}),(0,t.jsxs)("select",{className:"neck-label-tab__select",value:"custom"===z?"custom":z,onChange:e=>{const l=e.target.value;"custom"!==l&&M(l)},"aria-label":"Font color",children:[i.YZ.map((e=>(0,t.jsx)("option",{value:e.id,children:e.label},e.id))),"custom"===z?(0,t.jsx)("option",{value:"custom",children:"Custom"}):null]})]}),(0,t.jsx)("div",{className:"neck-label-tab__picker ignore-click-away",children:(0,t.jsx)(n.xk,{color:(0,i.qw)(y)||"#111111",onChange:e=>M(e.hex)})}),(0,t.jsxs)("p",{className:"neck-label-tab__hint",children:["Auto picks black or white from the garment",x?` (${x})`:"",". Use a contrasting color so size and care stay readable \u2014 illegible legal text can get an order cancelled."]})]})]}),(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"Example size"}),null!==u&&void 0!==u&&null!==(d=u.sizes)&&void 0!==d&&d.length?(0,t.jsx)("div",{className:"neck-label-tab__size-chips",role:"listbox","aria-label":"Example size",children:u.sizes.map((e=>(0,t.jsx)("button",{type:"button",className:"neck-label-tab__size-chip "+(u.previewSize===e?"is-selected":""),"aria-pressed":u.previewSize===e,onClick:()=>E({previewSize:e}),children:e},e)))}):(0,t.jsx)("p",{className:"neck-label-tab__hint",children:"No sizes on this blank yet. Add them in blank settings."}),null!==u&&void 0!==u&&u.previewSize?(0,t.jsxs)("p",{className:"neck-label-tab__hint",children:["Preview shows ",(0,t.jsx)("b",{children:u.previewSize}),". Each ordered size prints its own letter automatically."]}):null]}),(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"From this blank"}),(0,t.jsxs)("dl",{className:"neck-label-tab__facts",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("dt",{children:"Sizes"}),(0,t.jsx)("dd",{children:null!==u&&void 0!==u&&null!==(h=u.sizes)&&void 0!==h&&h.length?u.sizes.join(" \xb7 "):"No sizes on this blank yet"})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("dt",{children:"Fabric"}),(0,t.jsx)("dd",{children:(null===u||void 0===u?void 0:u.fabric)||"Not on file"})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("dt",{children:"Origin"}),(0,t.jsx)("dd",{children:(null===u||void 0===u?void 0:u.origin)||"Not on file"})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("dt",{children:"Care"}),(0,t.jsx)("dd",{children:W||"Not on file"})]})]}),J.length?(0,t.jsxs)("p",{className:"neck-label-tab__warn",children:["Missing ",J.join(", "),". We pull this from the supplier catalog (AS Colour, S&S, SanMar) and the blank description when they publish it. Add the rest in blank settings if the garment label has it."]}):null]}),(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"Size letter"}),(0,t.jsx)("div",{className:"neck-label-tab__styles",children:i.DY.map((e=>(0,t.jsxs)("button",{type:"button",className:"neck-label-tab__style "+(j.sizeFontStyle===e.id?"is-selected":""),"aria-pressed":j.sizeFontStyle===e.id,onClick:()=>E({sizeFontStyle:e.id}),children:[(0,t.jsx)("span",{className:"neck-label-tab__style-letter",style:{fontFamily:e.fontFamily,fontWeight:e.fontWeight,letterSpacing:e.letterSpacing,color:y},children:(null===u||void 0===u?void 0:u.previewSize)||e.preview}),(0,t.jsx)("span",{children:e.label})]},e.id)))})]}),(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"Care instructions"}),(0,t.jsx)("p",{className:"neck-label-tab__hint",children:"Same as the product page. Add laundry symbols, written care, or both."}),(0,t.jsx)("div",{className:"neck-label-tab__styles neck-label-tab__styles--two",children:i.qq.map((e=>{const l="symbols"===e.id?!!j.careSymbols:!!j.careWritten;return(0,t.jsxs)("button",{type:"button",className:"neck-label-tab__style neck-label-tab__style--care "+(l?"is-selected":""),"aria-pressed":l,onClick:()=>{const l="symbols"===e.id?!j.careSymbols:j.careSymbols,a="text"===e.id?!j.careWritten:j.careWritten;E({careSymbols:l,careWritten:a,careLayout:(0,i.f9)(l,a)})},children:[(0,t.jsx)("strong",{children:e.label}),(0,t.jsx)("span",{children:e.description})]},e.id)}))})]})]}),(0,t.jsx)("button",{type:"button",className:"neck-label-tab__apply",onClick:()=>null===g||void 0===g?void 0:g({...j,mode:"inner"}),disabled:v||w||f&&!I.ready,children:v?"Updating label\u2026":f?"Apply size labels":"Apply neck label"})]})}function b(e){let{sizes:l,files:a,previewSize:s,missingSizes:n,reading:i,error:c,applying:r,artPreview:d,bulkInputRef:b,rowInputRef:h,onBulkFiles:u,onRowFiles:p,onAssignSize:m,onRemove:g,onToggleSize:v,excludedSizes:x,rowTargetRef

1:_}=e;const k=r||i,j=a.filter((e=>!e.size)),f=e=>a.find((l=>l.size===e));return(0,t.jsxs)("div",{className:"neck-label-tab__section",children:[(0,t.jsx)("div",{className:"neck-label-tab__label",children:"Sized labels"}),(0,t.jsx)("input",{ref:b,type:"file",accept:"image/png,image/jpeg,image/webp,image/svg+xml,image/gif",multiple:!0,hidden:!0,onChange:e=>{const l=o(e.target.files);e.target.value="",u(l)}}),(0,t.jsx)("input",{ref:h,type:"file",accept:"image/png,image/jpeg,image/webp,image/svg+xml,image/gif",hidden:!0,onChange:e=>{const l=o(e.target.files);e.target.value="",p(_.current,l)}}),(0,t.jsxs)("button",{type:"button",className:"neck-label-tab__upload",onClick:()=>{var e;return null===(e=b.current)||void 0===e?void 0:e.click()},onDragOver:e=>e.preventDefault(),onDrop:e=>{var l;e.preventDefault(),e.stopPropagation(),u(o(null===(l=e.dataTransfer)||void 0===l?void 0:l.files))},disabled:k,children:[(0,t.jsx)("strong",{children:i?"Reading labels\u2026":"Upload size labels"}),(0,t.jsx)("span",{children:"Drop every size at once. Name files M.png, 2XL.png, or label-small.png and we\u2019ll match them."})]}),c?(0,t.jsx)("p",{className:"neck-label-tab__warn",children:c}):null,(0,t.jsxs)("p",{className:"neck-label-tab__hint",children:[s?`The mockup shows ${s} once every size has a label.`:"Each size prints the file assigned to it."," ","Change the size on any file if the match is wrong. Uncheck a size to skip its neck label \u2014 that size can\u2019t be sold. Apply stays off until every checked size has one."]}),a.length?(0,t.jsx)("div",{className:"neck-label-tab__size-list",children:a.map((e=>{const a=d(e);return(0,t.jsxs)("div",{className:"neck-label-tab__size-row",children:[a?(0,t.jsx)("img",{src:a,alt:""}):(0,t.jsx)("span",{className:"neck-label-tab__size-empty","aria-hidden":!0,children:e.size||"?"}),(0,t.jsxs)("div",{className:"neck-label-tab__size-copy",children:[(0,t.jsx)("strong",{children:e.name}),(0,t.jsx)("span",{children:e.size?`Assigned to ${e.size}`:"Needs a size"})]}),(0,t.jsxs)("label",{className:"neck-label-tab__assign",children:[(0,t.jsx)("span",{children:"Assigned to"}),(0,t.jsxs)("select",{"aria-label":`Size for ${e.name}`,value:e.size||"",disabled:k,onChange:l=>m(e.id,l.target.value),children:[(0,t.jsx)("option",{value:"",children:"Choose size"}),l.map((l=>{const a=f(l),s=a&&a.id!==e.id;return(0,t.jsxs)("option",{value:l,children:[l,s?` (replaces ${a.name})`:""]},l)}))]})]}),(0,t.jsx)("div",{className:"neck-label-tab__upload-actions",children:(0,t.jsx)("button",{type:"button",onClick:()=>g(e.id),disabled:k,children:"Remove"})})]},e.id)}))}):null,l.length?(0,t.jsx)("div",{className:"neck-label-tab__size-list",children:l.map((e=>{const l=(x||[]).some((l=>l===e)),a=l?null:f(e);return(0,t.jsxs)("div",{className:"neck-label-tab__size-check "+(l?"is-skipped":a?"is-set":"is-missing"),children:[(0,t.jsx)("input",{type:"checkbox",checked:!l,disabled:k,"aria-label":`Neck label for ${e}`,onChange:()=>null===v||void 0===v?void 0:v(e,l)}),(0,t.jsx)("strong",{children:e}),(0,t.jsx)("span",{children:l?"No neck label":(null===a||void 0===a?void 0:a.name)||"Needs a label"}),(0,t.jsx)("button",{type:"button",onClick:()=>{var l;_.current=e,null===(l=h.current)||void 0===l||l.click()},disabled:k||l,children:a?"Replace":"Add"})]},e)}))}):(0,t.jsx)("p",{className:"neck-label-tab__warn",children:"This blank has no sizes yet, so files can\u2019t be matched. Add sizes in blank settings, then upload again."}),j.length?(0,t.jsxs)("p",{className:"neck-label-tab__warn",children:["Choose a size for ",j.map((e=>e.name)).join(", "),"."]}):null,n.length?(0,t.jsxs)("p",{className:"neck-label-tab__warn",children:["Add a label for ",n.join(", "),", or uncheck a size that shouldn\u2019t have one."]}):null,!l.length||n.length||j.length?null:(0,t.jsx)("p",{className:"neck-label-tab__hint",children:"Every checked size has a label."})]})}}}]);
2//# sourceMappingURL=21791.72effa47.chunk.js.map