https://app.stoqui.com.br/assets/FaviconScreen-D_RY_l-3.js

1import{j as e,ab as f,a7 as r,T as c,B as he,o as O,X as Q,ai as ee,I as fe,$ as me,a1 as q,Z as ne,O as ae,N as E,a6 as ve}from"./mui-CRsYZxVY.js";import{r as d}from"./vendor-Dwao9eNC.js";import{fx as je,cZ as H,c$ as be,fy as oe,b as we,r as ye,N as Se,e as Fe,bd as Ee,fz as Ie,fA as Re,fo as ke,fB as Ce}from"./index-TALscxEc.js";import{S as Be}from"./SettingsScreenLayout-BWFwVJu5.js";import{u as Te}from"./useWebCatalogSettingsSave-Byg91ItV.js";import{C as Pe}from"./icons-D8aatgQ4.js";import{F as We,C as K}from"./appearanceTokens-DaF_sGil.js";import"./query-8ViTdhdk.js";import"./datePickers-BIJXYOKG.js";import"./lab-DSem1Osk.js";import"./UnsavedChangesDialog-gqy_t4YT.js";(function(){try{var n=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{};n.SENTRY_RELEASE={id:"2ad85febf9735404429b0670d4acf56a0af5a0a2"}}catch{}})();try{(function(){var n=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},a=new n.Error().stack;a&&(n._sentryDebugIds=n._sentryDebugIds||{},n._sentryDebugIds[a]="2c14da39-ffa1-4b57-b140-c9ef3635b796",n._sentryDebugIdIdentifier="sentry-dbid-2c14da39-ffa1-4b57-b140-c9ef3635b796")})()}catch{}const ze=n=>n.replace(/^https?:\/\//,""),Oe=n=>n.replace(/^www\./,""),Le=({faviconUrl:n,storeName:a,storeDomain:o})=>{const s=Oe(ze(o));return e.jsxs(f,{spacing:2,children:[e.jsx(Ae,{faviconUrl:n,storeName:a,domain:s}),e.jsx(De,{faviconUrl:n,storeName:a,domain:s})]})},Ae=({faviconUrl:n,storeName:a,domain:o})=>e.jsxs(r,{children:[e.jsx(se,{children:"Aba do navegador"}),e.jsxs(r,{sx:{bgcolor:"#DEE1E6",borderRadius:"10px 10px 6px 6px",pt:1,pl:1,pr:1,overflow:"hidden"},children:[e.jsxs(r,{sx:{display:"inline-flex",alignItems:"center",gap:.75,bgcolor:"white",borderTopLeftRadius:8,borderTopRightRadius:8,px:1.25,py:.75,maxWidth:"85%"},children:[e.jsx(ie,{src:n,size:16}),e.jsx(c,{sx:{fontSize:13,fontWeight:500,color:"#202124",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:180},children:a})]}),e.jsx(r,{sx:{bgcolor:"white",mt:0,px:1.25,py:1,display:"flex",alignItems:"center",gap:1},children:e.jsx(r,{sx:{display:"flex",alignItems:"center",gap:.75,bgcolor:"#F1F3F4",borderRadius:999,px:1.25,py:.5,flex:1,minWidth:0},children:e.jsx(c,{sx:{fontSize:12,color:"#5F6368",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:o})})})]})]}),De=({faviconUrl:n,storeName:a,domain:o})=>e.jsxs(r,{children:[e.jsx(se,{children:"Resultado no Google"}),e.jsxs(r,{sx:{bgcolor:"white",borderRadius:1.5,p:1.5,border:"1px solid",borderColor:"divider"},children:[e.jsxs(r,{sx:{display:"flex",alignItems:"center",gap:1,mb:.5},children:[e.jsx(r,{sx:{width:26,height:26,borderRadius:"50%",bgcolor:"white",border:"1px solid",borderColor:"divider",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",flexShrink:0},children:e.jsx(ie,{src:n,size:16})}),e.jsxs(f,{spacing:0,sx:{minWidth:0},children:[e.jsx(c,{sx:{fontSize:12,color:"#202124",fontWeight:500,lineHeight:1.2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:a}),e.jsx(c,{sx:{fontSize:11,color:"#5F6368",lineHeight:1.2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:o})]})]}),e.jsxs(c,{sx:{fontSize:13,color:"#1A0DAB",fontWeight:500,lineHeight:1.3,mt:.5},children:[a," - Loja oficial"]}),e.jsxs(r,{sx:{display:"flex",alignItems:"center",gap:.5,mt:1,color:"#5F6368"},children:[e.jsx(je,{size:11}),e.jsx(c,{sx:{fontSize:10},children:"google.com"})]})]})]}),se=({children:n})=>e.jsx(c,{variant:"caption",sx:{display:"block",color:"text.secondary",fontWeight:600,fontSize:"0.7rem",textTransform:"uppercase",letterSpacing:"0.04em",mb:.75,ml:.5},children:n}),ie=({src:n,size:a,fit:o="contain",radius:s=2})=>n?e.jsx(r,{component:"img",src:n,alt:"",sx:{width:a,height:a,objectFit:o,borderRadius:`${s}px`,flexShrink:0,display:"block"}}):e.jsx(r,{sx:{width:a,height:a,borderRadius:`${s}px`,bgcolor:"grey.200",flexShrink:0}}),h=256,P=(n,a)=>{switch(n){case"transparent":return null;case"brand":return a;case"white":return"#FFFFFF";case"black":return"#000000"}},te=n=>new Promise((a,o)=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=()=>o(new Error("Não foi possível carregar a imagem.")),s.src=n}),M=()=>{const n=document.createElement("canvas");n.width=h,n.height=h;const a=n.getContext("2d");if(!a)throw new Error("Canvas 2D context indisponível.");return a.imageSmoothingEnabled=!0,a.imageSmoothingQuality="high",{canvas:n,ctx:a}},G=(n,a,o)=>{const s=P(a,o);s&&(n.fillStyle=s,n.fillRect(0,0,h,h))},N=(n,a="favicon.png")=>new Promise((o,s)=>{n.toBlob(i=>{if(!i){s(new Error("Não foi possível gerar o arquivo do favicon."));return}o(new File([i],a,{type:"image/png",lastModified:Date.now()}))},"image/png",1)}),_e=async(n,a,o)=>{const s=await te(n),{canvas:i,ctx:t}=M();G(t,a,o);const l=Math.round(h*.12),p=h-l*2,v=Math.min(p/s.width,p/s.height),u=s.width*v,m=s.height*v,j=(h-u)/2,g=(h-m)/2;return t.drawImage(s,j,g,u,m),N(i,"favicon-logo.png")},Ue=async(n,a,o)=>{const s=URL.createObjectURL(n);try{const i=await te(s),{canvas:t,ctx:l}=M();G(l,a,o);const p=Math.min(i.width,i.height),v=(i.width-p)/2,u=(i.height-p)/2;return l.drawImage(i,v,u,p,p,0,0,h,h),await N(t,"favicon-upload.png")}finally{URL.revokeObjectURL(s)}},re=n=>{const a=n.replace("#","");if(a.length!==6)return"#FFFFFF";const o=parseInt(a.slice(0,2),16),s=parseInt(a.slice(2,4),16),i=parseInt(a.slice(4,6),16);return(o*299+s*587+i*114)/1e3>=160?"#111111":"#FFFFFF"},le=n=>{const a=(n||"").trim();

1return a?[...a][0].toUpperCase():"S"},qe=async(n,a,o)=>{const{canvas:s,ctx:i}=M(),t=a==="transparent"?"brand":a;G(i,t,o);const l=le(n),p=P(t,o)||o;return i.fillStyle=re(p),i.font=`700 ${Math.round(h*.62)}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,i.textAlign="center",i.textBaseline="middle",i.fillText(l,h/2,h/2+4),N(s,"favicon-initial.png")},He=[{value:"transparent",label:"Transparente"},{value:"brand",label:"Cor da marca"},{value:"white",label:"Branco"},{value:"black",label:"Preto"}],$=({bg:n,brandColor:a,children:o})=>{const s=P(n,a);return e.jsx(r,{sx:{width:160,height:160,borderRadius:2,bgcolor:s||"transparent",backgroundImage:s===null?"linear-gradient(45deg, #E5E7EB 25%, transparent 25%, transparent 75%, #E5E7EB 75%, #E5E7EB), linear-gradient(45deg, #E5E7EB 25%, transparent 25%, transparent 75%, #E5E7EB 75%, #E5E7EB)":"none",backgroundSize:"16px 16px",backgroundPosition:"0 0, 8px 8px",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",border:"1px solid",borderColor:"divider"},children:o})},V=({background:n,brandColor:a,onChange:o,allowTransparent:s=!0})=>e.jsxs(r,{sx:{width:"100%"},children:[e.jsx(c,{variant:"caption",sx:{display:"block",color:"text.secondary",fontWeight:600,mb:.75,ml:.5},children:"Fundo"}),e.jsx(f,{direction:"row",spacing:1,flexWrap:"wrap",useFlexGap:!0,children:He.filter(i=>s||i.value!=="transparent").map(i=>{const t=n===i.value;return e.jsxs(he,{onClick:()=>o(i.value),sx:{display:"flex",alignItems:"center",gap:.75,px:1.25,py:.75,borderRadius:1.5,bgcolor:t?O(a,.12):"background.default",border:"1px solid",borderColor:t?a:"divider",transition:"all 120ms ease"},children:[e.jsx(Me,{value:i.value,brandColor:a}),e.jsx(c,{variant:"caption",sx:{fontWeight:600,color:"text.primary"},children:i.label})]},i.value)})})]}),Me=({value:n,brandColor:a})=>{const o=P(n,a);return e.jsx(r,{sx:{width:14,height:14,borderRadius:"50%",bgcolor:o||"transparent",backgroundImage:o===null?"linear-gradient(45deg, #E5E7EB 50%, white 50%)":"none",border:"1px solid",borderColor:"divider"}})},X=({children:n})=>e.jsx(c,{variant:"caption",color:"text.secondary",sx:{textAlign:"center",maxWidth:320,lineHeight:1.4},children:n}),Ge=5*1024*1024,Ne=({open:n,onClose:a,onPick:o,logoUrl:s,storeName:i,brandColor:t})=>{const[l,p]=d.useState(s?"logo":"initial"),[v,u]=d.useState("white"),[m,j]=d.use

1State("brand"),[g,W]=d.useState(null),[B,L]=d.useState("transparent"),[I,b]=d.useState(null),[w,S]=d.useState(!1),T=d.useRef(null);d.useEffect(()=>{n&&(p(s?"logo":"initial"),W(null),b(null),S(!1))},[n,s]);const R=d.useMemo(()=>g?URL.createObjectURL(g):null,[g]);d.useEffect(()=>()=>{R&&URL.revokeObjectURL(R)},[R]);const k=x=>{var F;const y=(F=x.target.files)==null?void 0:F[0];if(x.target.value="",!!y){if(!y.type.startsWith("image/")){b("Selecione um arquivo de imagem (PNG, JPG, WebP).");return}if(y.size>Ge){b("A imagem deve ter no máximo 5MB.");return}b(null),W(y)}},A=async()=>{S(!0),b(null);try{let x=null;if(l==="logo"&&s?x=await _e(s,v,t):l==="initial"?x=await qe(i,m,t):l==="upload"&&g&&(x=await Ue(g,B,t)),!x){b("Selecione uma fonte para gerar o favicon.");return}await o(x),a()}catch(x){b(x instanceof Error?x.message:"Não foi possível gerar o favicon.")}finally{S(!1)}},D=!w&&(l==="logo"&&!!s||l==="initial"||l==="upload"&&!!g);return e.jsxs(Q,{open:n,onClose:w?void 0:a,maxWidth:"sm",fullWidth:!0,PaperProps:{sx:{borderRadius:2}},children:[e.jsxs(ee,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,py:1.5,px:2},children:[e.jsx(c,{sx:{fontWeight:600,fontSize:"1.05rem"},children:"Escolher favicon"}),e.jsx(fe,{size:"small",onClick:a,disabled:w,"aria-label":"Fechar",children:e.jsx(Pe,{fontSize:"small"})})]}),e.jsxs(me,{value:l,onChange:(x,y)=>p(y),variant:"fullWidth",sx:{borderBottom:"1px solid",borderColor:"divider",minHeight:44,"& .MuiTab-root":{minHeight:44,textTransform:"none",fontSize:"0.85rem",fontWeight:600}},children:[e.jsx(q,{value:"logo",label:"Usar meu logo",icon:e.jsx(H,{size:16}),iconPosition:"start",disabled:!s}),e.jsx(q,{value:"initial",label:"Letra inicial",icon:e.jsx(be,{size:16}),iconPosition:"start"}),e.jsx(q,{value:"upload",label:"Enviar imagem",icon:e.jsx(oe,{size:16}),iconPosition:"start"})]}),e.jsxs(ne,{sx:{px:2,py:2},children:[l==="logo"&&e.jsx($e,{logoUrl:s,background:v,brandColor:t,onChangeBg:u}),l==="initial"&&e.jsx(Ve,{storeName:i,background:m,brandColor:t,onChangeBg:j}),l==="upload"&&e.jsx(Xe,{previewUrl:R,background:B,brandColor:t,onChangeBg:L,onPick:()=>{var x;return(x=T.current)==null?void 0:x.click()},error:I}),e.jsx("input",{ref:T,type:"file",accept:"image/png,image/jpeg,image/jpg,image/webp",style:{display:"none"},onChange:k})]}),e.jsxs(ae,{sx:{px:2,pb:2,pt:0,gap:1},children:[e.jsx(E,{onClick:a,disabled:w,children:"Cancelar"}),e.jsx(E,{variant:"contained",onClick:A,disabled:!D,startIcon:w?e.jsx(ve,{size:14,color:"inherit"}):null,sx:{borderRadius:2,minWidth:120},children:w?"Gerando...":"Usar este favicon"})]})]})},$e=({logoUrl:n,background:a,brandColor:o,onChangeBg:s})=>n?e.jsxs(f,{spacing:2,alignItems:"center",children:[e.jsx($,{bg:a,brandColor:o,children:e.jsx(r,{component:"img",src:n,alt:"",sx:{width:"76%",height:"76%",objectFit:"contain"}})}),e.jsx(V,{background:a,brandColor:o,onChange:s,allowTransparent:!0}),e.jsx(X,{children:"Recortamos seu logo num quadrado e adicionamos uma margem para que ele apareça nítido na aba do navegador."})]}):e.jsx(r,{sx:{bgcolor:"background.default",borderRadius:2,p:2,textAlign:"center"},children:e.jsx(c,{variant:"body2",color:"text.secondary",children:'Você ainda não enviou um logo. Adicione um logo em "Logo e cor" para gerar um favicon a partir dele.'})}),Ve=({storeName:n,background:a,brandColor:o,onChangeBg:s})=>{const i=le(n),t=a==="transparent"?"brand":a,l=P(t,o)||o,p=re(l);return e.jsxs(f,{spacing:2,alignItems:"center",children:[e.jsx($,{bg:t,brandColor:o,children:e.jsx(c,{sx:{fontSize:110,fontWeight:700,color:p,lineHeight:1},children:i})}),e.jsx(V,{background:a,brandColor:o,onChange:s,allowTransparent:!1}),e.jsxs(X,{children:['Usamos a primeira letra de "',n,'" sobre a cor escolhida. Funciona bem quando você ainda não tem um logo.']})]})},Xe=({previewUrl:n,background:a,brandColor:o,onChangeBg:s,onPick:i,error:t})=>e.jsxs(f,{spacing:2,alignItems:"center",children:[e.jsx($,{bg:a,brandColor:o,children:n?e.jsx(r,{component:"img",src:n,alt:"",sx:{width:"100%",height:"100%",objectFit:"cover"}}):e.jsxs(f,{alignItems:"center",spacing:.5,sx:{color:"text.secondary"},children:[e.jsx(oe,{size:28}),e.jsx(c,{variant:"caption",children:"Nenhuma imagem"})]})}),e.jsx(E,{onClick:i,variant:"contained",sx:{borderRadius:2},children:n?"Trocar imagem":"Selecionar imagem"}),n&&e.jsx(V,{background:a,brandColor:o,onChange:s,allowTransparent:!0}),t?e.jsx(c,{variant:"caption",color:"error.main",children:t}):e.jsx(X,{children:"Imagens não quadradas são recortadas pelo centro automaticamente. Recomendamos pelo menos 256 × 256 pixels."})]}),cn=()=>{const n=we(),{triggerPaywall:a}=ye(),{catalog:o,isLoading:s,save:i}=Te(),{storeUrl:t}=Se(),{data:l}=Fe(),p=Ee(l),v=Ie(),[u,m]=d.useState(null),[j,g]=d.useState(!1),[W,B]=d.useState(!1),[L,I]=d.useState(!1),[b,w]=d.use

1State(!1),[S,T]=d.useState(!1),[R,k]=d.useState(null),A=o==null?void 0:o.id;d.useEffect(()=>{m(null),g(!1)},[A]);const D=!!u||j,x=(o==null?void 0:o.cor_principal)||We,y=(o==null?void 0:o.nome_loja)||"Minha loja",F=(o==null?void 0:o.logo_url)||void 0,z=(o==null?void 0:o.favicon_url)||"",ce=d.useMemo(()=>{if(u)return u;const C=F||"/assets/favicon_demo.png";return j?C:z||C},[u,j,z,F]),_=!!z||!!u,de=(!!z||!!u)&&!j,xe=async C=>{k(null),T(!0);try{const U=await v.mutateAsync(C);m(U),g(!1)}catch{throw k("Não foi possível enviar o favicon. Tente novamente."),new Error("upload failed")}finally{T(!1)}},pe=()=>{g(!0),m(null),I(!1)},ue=()=>new Promise((C,U)=>{k(null),w(!0),i({favicon_url:j?null:u},"appearance_favicon").then(()=>{m(null),g(!1),C()}).catch(J=>{k("Não foi possível salvar. Tente novamente."),U(J instanceof Error?J:new Error("save failed"))}).finally(()=>w(!1))}),Z=!s&&!p?{plan:"black",trigger:"favicon"}:void 0,Y=!!Z,ge=()=>{if(Y){a("favicon",{pageAction:()=>n("/profile/paywall?initialPlan=black"),source:"favicon_screen_picker"});return}B(!0)};return e.jsxs(e.Fragment,{children:[e.jsx(Be,{title:"Favicon",isLoading:s,isDirty:D,isSaving:b,onSave:ue,saveError:R,lock:Z,children:e.jsxs(f,{spacing:2,children:[e.jsx(Ze,{}),e.jsx(r,{sx:K,children:e.jsxs(f,{spacing:1.5,children:[e.jsxs(r,{children:[e.jsx(c,{sx:{fontWeight:600},children:"Como vai ficar"}),e.jsx(c,{variant:"caption",color:"text.secondary",children:"Veja a prévia nos lugares onde seus clientes vão encontrar."})]}),e.jsx(Le,{faviconUrl:ce,storeName:y,storeDomain:t})]})}),e.jsx(r,{sx:K,children:e.jsxs(f,{spacing:1.5,children:[e.jsxs(f,{direction:{xs:"column",sm:"row"},spacing:1,useFlexGap:!0,children:[e.jsx(E,{variant:"contained",onClick:ge,disabled:S,startIcon:_?e.jsx(Re,{size:18}):e.jsx(H,{size:18}),sx:{borderRadius:2,flex:1},children:S?"Enviando...":_?"Trocar favicon":"Criar favicon"}),de&&!Y&&e.jsx(E,{color:"error",onClick:()=>I(!0),disabled:S,startIcon:e.jsx(ke,{size:18}),sx:{borderRadius:2,bgcolor:O("#D32F2F",.08),"&:hover":{bgcolor:O("#D32F2F",.15)}},children:"Remover"})]}),!_&&e.jsxs(c,{variant:"caption",color:"text.secondary",sx:{display:"flex",alignItems:"center",gap:.75},children:[e.jsx(Ce,{size:14}),F?"Geramos um favicon a partir do seu logo em um clique.":"Sem logo? Geramos um favicon com a inicial da sua loja."]})]})})]})}),e.jsx(Ne,{open:W,onClose:()=>B(!1),onPick:xe,logoUrl:F,storeName:y,brandColor:x}),e.jsxs(Q,{open:L,onClose:()=>I(!1),PaperProps:{sx:{borderRadius:2,mx:2,width:"100%"}},children:[e.jsx(ee,{sx:{fontWeight:600},children:"Remover favicon?"}),e.jsx(ne,{children:e.jsx(c,{variant:"body2",color:"text.secondary",children:"Sua loja volta a usar o ícone padrão na aba do navegador. Você pode criar outro a qualquer momento."})}),e.jsxs(ae,{sx:{px:2,pb:2,gap:1},children:[e.jsx(E,{onClick:()=>I(!1),children:"Cancelar"}),e.jsx(E,{color:"error",variant:"contained",onClick:pe,children:"Remover"})]})]})]})},Ze=()=>e.jsxs(r,{sx:{bgcolor:n=>O(n.palette.text.primary,.04),borderRadius:2,p:1.75,display:"flex",alignItems:"flex-start",gap:1.25},children:[e.jsx(r,{sx:{width:32,height:32,borderRadius:"8px",bgcolor:"white",display:"flex",alignItems:"center",justifyContent:"center",color:"text.secondary",flexShrink:0},children:e.jsx(H,{size:18})}),e.jsxs(r,{children:[e.jsx(c,{sx:{fontWeight:600,fontSize:"0.9rem"},children:"O ícone que representa sua loja na internet"}),e.jsx(c,{variant:"caption",color:"text.secondary",sx:{mt:.25},children:"Aparece na aba do navegador e nos resultados do Google."})]})]});export{cn as default};