https://listen.com/_next/static/chunks/pages/feedback-daf1cdac91e41f3d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8949],{31272:(e,t,a)=>{"use strict";a.r(t),a.d(t,{__N_SSP:()=>L,default:()=>B});var r=a(45182),s=a(39950),i=a(38634),l=a.n(i),n=a(58144),o=a.n(n),c=a(19234),d=a(57656),m=a(46465);let u=(0,m.A)("Lightbulb",[["path",{d:"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",key:"1gvzjb"}],["path",{d:"M9 18h6",key:"x1upvd"}],["path",{d:"M10 22h4",key:"ceow96"}]]);var x=a(89601),h=a(52556),b=a(11201),p=a(63987);let g=(0,m.A)("Paperclip",[["path",{d:"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48",key:"1u3ebp"}]]);var v=a(39150),f=a(94778),y=a(14241),j=a(41599),N=a(40996),k=a(39807),w=a(93626),A=a(33792),S=a(83219);let C=[{value:"bug",label:"Bug",hint:"Broken or incorrect",icon:c.A},{value:"ux-issue",label:"UX",hint:"Confusing or rough",icon:d.A},{value:"idea",label:"Idea",hint:"Suggestion or request",icon:u},{value:"other",label:"Other",hint:"Anything else",icon:x.A}],F=[{value:"landing",label:"Landing"},{value:"play-radio",label:"Play / Radio"},{value:"next-back",label:"Next / Back"},{value:"login-onboarding",label:"Login / Onboarding"},{value:"profile",label:"Profile"},{value:"sharing",label:"Sharing"},{value:"artist-upload",label:"Artist Upload"},{value:"analytics",label:"Analytics"},{value:"other",label:"Other"}],z=[{value:"always",label:"Always"},{value:"sometimes",label:"Sometimes"},{value:"once",label:"Once"},{value:"not-sure",label:"Not sure"}],P=[{value:"blocking",label:"Blocking"},{value:"major",label:"Major"},{value:"minor",label:"Minor"},{value:"cosmetic",label:"Cosmetic"}],M=["image/jpeg","image/png","image/webp","image/gif","image/avif","image/heic","image/heif","video/mp4","video/quicktime","video/webm","audio/mpeg","audio/mp4","audio/x-m4a","audio/wav","audio/webm","audio/ogg","application/pdf"];function _(e){let{icon:t,title:a}=e;return(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)(t,{className:"size-4 text-text-muted"}),(0,r.jsx)("h2",{className:"text-base font-semibold text-text-primary",children:a})]})}var L=!0;function B(){var e,t;let{user:a}=(0,k.i)(),{openLoginPrompt:i}=(0,w.Jd)(),n=S.FH.siteFeedback.uploadAttachment.useMutation(),d=S.FH.siteFeedback.submit.useMutation(),[m,u]=(0,s.useState)("bug"),[L,B]=(0,s.useState)("play-radio"),[q,E]=(0,s.useState)(""),[T,U]=(0,s.useState)(""),[H,R]=(0,s.useState)(""),[O,W]=(0,s.useState)([""]),[D,I]=(0,s.useState)(""),[X,V]=(0,s.useState)(""),[J,Y]=(0,s.useState)(""),[G,K]=(0,s.useState)(""),[Q,Z]=(0,s.use

1State)(""),[$,ee]=(0,s.useState)(""),[et,ea]=(0,s.useState)([]),[er,es]=(0,s.useState)(null),ei="bug"===m,el=!a,en=!!(a&&(0,j.zQ)(a.roles)),eo=n.isPending||d.isPending,ec=en?"/radio":a?"/".concat(a.username):"/",ed=q.trim(),em=T.trim(),eu=Q.trim(),ex=$.trim(),eh=O.map(e=>e.trim()).filter(Boolean),eb=0===ex.length||/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(ex),ep=!ei||eh.length>0&&D.trim().length>0&&X.trim().length>0,eg=!el||eu.length>=2&&ex.length>0&&eb,ev=ed.length>=3&&em.length>=10&&ep&&eg&&!eo,ef="w-full rounded-lg border border-border-primary bg-bg-surface-hover px-4 py-2 text-text-primary placeholder:text-text-muted focus:border-transparent focus:outline-none focus:ring-2 focus:ring-status-info",ey="".concat(ef," resize-none"),ej=async e=>{if(e.preventDefault(),(()=>{if(q.trim().length<3)return y.Ay.error("Please add a short title"),!1;if(T.trim().length<10)return y.Ay.error("Please add a bit more detail"),!1;if(ei){if(0===eh.length)return y.Ay.error("Please add at least one step to reproduce this bug"),!1;if(!D.trim())return y.Ay.error("Please describe the expected behavior"),!1;if(!X.trim())return y.Ay.error("Please describe the actual behavior"),!1}return el&&Q.trim().length<2?(y.Ay.error("Please add your name"),!1):el&&!$.trim()?(y.Ay.error("Please add your email"),!1):!ex||!!eb||(y.Ay.error("Please enter a valid email"),!1)})())try{let e=await Promise.all(et.map(async e=>{let t=await n.mutateAsync({filename:e.file.name,contentType:e.file.type,fileSize:e.file.size});if(!(await fetch(t.presignedUrl,{method:"PUT",headers:{"Content-Type":e.file.type},body:e.file})).ok)throw Error("Failed to upload ".concat(e.file.name));return{key:t.key,filename:t.filename,contentType:e.file.type,fileSize:e.file.size,url:t.publicUrl}})),t=await d.mutateAsync({type:m,area:L,title:q.trim(),summary:T.trim(),actionContext:H.trim()||void 0,stepsToReproduce:O.map(e=>e.trim()).filter(Boolean),expectedBehavior:D.trim()||void 0,actualBehavior:X.trim()||void 0,frequency:J||void 0,severity:G||void 0,reporterName:Q.trim()||void 0,contactEmail:$.trim()||void 0,attachments:e,browserDebug:function(){let e=(0,A.m4)();if("undefined"==typeof navigator||"undefined"==typeof document)return;let t=new URL(window.location.href),a=Intl.DateTimeFormat().resolvedOptions().locale;return{pageUrl:t.toString(),path:"".concat(t.pathname).concat(t.search).concat(t.hash),referrer:document.referrer||null,language:navigator.language||null,locale:a,timezone:e.timezone,userAgent:e.user_agent,device:e.device,browser:e.platform,os:e.os,osVersion:e.os_version,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,screenWidth:window.screen.width,screenHeight:window.screen.height,devicePixelRatio:window.devicePixelRatio||1}}()});es(t.submissionId),u("bug"),B("play-radio"),E(""),U(""),R(""),W([""]),I(""),V(""),Y(""),K(""),Z(""),ee(""),ea([]),y.Ay.success("Feedback sent")}catch(e){y.Ay.error(e instanceof Error?e.message:"Failed to send feedback")}},eN=er?(0,r.jsxs)("section",{className:"overflow-hidden rounded-xl bg-bg-surface shadow-2xl",children:[(0,r.jsx)("div",{className:"border-b border-border-primary p-6",children:(0,r.jsx)("h1",{className:"text-2xl font-bold text-text-primary",children:"Feedback"})}),(0,r.jsxs)("div",{className:"p-6 text-center",children:[(0,r.jsx)("div",{className:"mb-4 inline-flex rounded-full bg-status-success/10 p-3 text-status-success",children:(0,r.jsx)(h.A,{className:"size-6"})}),(0,r.jsx)("h2",{className:"text-2xl font-bold text-text-primary",children:"Sent"}),(0,r.jsxs)("p",{className:"mt-2 text-sm text-text-muted",children:["Reference: ",er]}),(0,r.jsx)("button",{type:"button",onClick:()=>es(null),className:"mt-6 inline-flex items-center justify-center rounded-lg bg-brand-accent px-6 py-3 font-medium text-solid-black transition hover:bg-brand-accent-hover/90",children:"Send another report"})]})]}):(0,r.jsxs)("div",{className:"overflow-hidden rounded-xl bg-bg-surface shadow-2xl",children:[(0,r.jsx)("div",{className:"border-b border-border-primary p-6",children:(0,r.jsx)("h1",{className:"text-2xl font-bold text-text-primary",children:"Feedback"})}),(0,r.jsxs)("form",{onSubmit:ej,className:"space-y-6 p-6",children:[(0,r.jsxs)("section",{className:"space-y-4",children:[(0,r.jsx)(_,{icon:null!=(t=null==(e=C.find(e=>e.value===m))?void 0:e.icon)?t:c.A,title:"Type"}),(0,r.jsx)("div",{className:"grid gap-3 sm:grid-cols-2",children:C.map(e=>{let t=e.icon,a=e.value===m;return(0,r.jsx)("button",{type:"button",onClick:()=>u(e.value),className:"rounded-lg border px-4 py-3 text-left transition ".concat(a?"border-transparent bg-bg-surface-hover ring-2 ring-status-info":"border-border-primary bg-bg-surface-hover hover:border-border-secondary"),children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)(t,{className:"size-4 ".concat(a?"text-status-info":"text-text-muted")}),(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"text-sm font-medium text-text-primary",children:e.label}),(0,r.jsx)("div",{className:"mt-0.5 text-xs text-text-muted",children:e.hint})]})]})},e.value)})}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-area",className:"mb-2 block text-sm font-medium text-text-primary",children:"Area"}),(0,r.jsx)("select",{id:"feedback-area",value:L,onChange:e=>B(e.target.value),className:ef,children:F.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})]})]}),(0,r.jsxs)("section",{className:"space-y-4",children:[(0,r.jsx)(_,{icon:x.A,title:"Details"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-title",className:"mb-2 block text-sm font-medium text-text-primary",children:"Title"}),(0,r.jsx)("input",{id:"feedback-title",value:q,onChange:e=>E(e.target.value),placeholder:"Next button skips two tracks",className:ef,maxLength:140})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-summary",className:"mb-2 block text-sm font-medium text-text-primary",children:"Summary"}),(0,r.jsx)("textarea",{id:"feedback-summary",value:T,onChange:e=>U(e.target.value),placeholder:"What happened?",className:ey,rows:4,maxLength:4e3})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-context",className:"mb-2 block text-sm font-medium text-text-primary",children:"Context"}),(0,r.jsx)("textarea",{id:"feedback-context",value:H,onChange:e=>R(e.target.value),placeholder:"What were you trying to do?",className:ey,rows:3,maxLength:500})]})]}),ei?(0,r.jsxs)("section",{className:"space-y-4",children:[(0,r.jsx)(_,{icon:c.A,title:"Reproduce"}),(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"mb-2 flex items-center justify-between gap-3",children:[(0,r.jsx)("label",{className:"block text-sm font-medium text-text-primary",children:"Steps"}),(0,r.jsxs)("button",{type:"button",onClick:()=>{W(e=>[...e,""])},className:"inline-flex items-center gap-1 rounded-lg border border-border-primary bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary transition hover:bg-bg-surface-hover",children:[(0,r.jsx)(b.A,{className:"size-4"}),"Add step"]})]}),(0,r.jsx)("div",{className:"space-y-3",children:O.map((e,t)=>(0,r.jsxs)("div",{className:"flex items-start gap-3",children:[(0,r.jsxs)("div",{className:"pt-2 text-sm font-medium text-text-muted",children:[t+1,"."]}

1),(0,r.jsx)("input",{value:e,onChange:e=>{var a;return a=e.target.value,void W(e=>e.map((e,r)=>r===t?a:e))},placeholder:"Step ".concat(t+1),className:ef}),O.length>1?(0,r.jsx)("button",{type:"button",onClick:()=>{W(e=>e.filter((e,a)=>a!==t))},className:"rounded-lg p-2 text-text-muted transition hover:bg-bg-surface-hover hover:text-text-primary","aria-label":"Remove step ".concat(t+1),children:(0,r.jsx)(p.A,{className:"size-4"})}):null]},"step-".concat(t)))})]}),(0,r.jsxs)("div",{className:"grid gap-4 md:grid-cols-2",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-expected",className:"mb-2 block text-sm font-medium text-text-primary",children:"Expected"}),(0,r.jsx)("textarea",{id:"feedback-expected",value:D,onChange:e=>I(e.target.value),placeholder:"What should have happened?",className:ey,rows:3,maxLength:1e3})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-actual",className:"mb-2 block text-sm font-medium text-text-primary",children:"Actual"}),(0,r.jsx)("textarea",{id:"feedback-actual",value:X,onChange:e=>V(e.target.value),placeholder:"What happened instead?",className:ey,rows:3,maxLength:1e3})]})]}),(0,r.jsxs)("div",{className:"grid gap-4 md:grid-cols-2",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-frequency",className:"mb-2 block text-sm font-medium text-text-primary",children:"Frequency"}),(0,r.jsxs)("select",{id:"feedback-frequency",value:J,onChange:e=>Y(e.target.value),className:ef,children:[(0,r.jsx)("option",{value:"",children:"Select frequency"}),z.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))]})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-severity",className:"mb-2 block text-sm font-medium text-text-primary",children:"Severity"}),(0,r.jsxs)("select",{id:"feedback-severity",value:G,onChange:e=>K(e.target.value),className:ef,children:[(0,r.jsx)("option",{value:"",children:"Select severity"}),P.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))]})]})]})]}):null,(0,r.jsxs)("section",{className:"space-y-4",children:[(0,r.jsx)(_,{icon:g,title:"Evidence"}),(0,r.jsxs)("label",{className:"block rounded-lg border border-dashed border-border-primary bg-bg-surface-hover p-4 transition hover:border-border-secondary",children:[(0,r.jsx)("div",{className:"text-sm font-medium text-text-primary",children:"Add files"}),(0,r.jsx)("div",{className:"mt-1 text-sm text-text-muted",children:"Images, video, audio, or PDF"}),(0,r.jsx)("input",{type:"file",accept:"image/jpeg,image/png,image/webp,image/gif,image/avif,image/heic,image/heif,video/mp4,video/quicktime,video/webm,audio/mpeg,audio/mp4,audio/x-m4a,audio/wav,audio/webm,audio/ogg,application/pdf",multiple:!0,onChange:e=>{var t,a;let r=Array.from(null!=(t=e.target.files)?t:[]);if(0===r.length)return;if(et.length+r.length>5){y.Ay.error("You can attach up to ".concat(5," files")),e.target.value="";return}let s=[];for(let e of r){if(a=e.type,!M.includes(a)){y.Ay.error("".concat(e.name," is not a supported file type"));continue}if(e.size>0x1400000){y.Ay.error("".concat(e.name," exceeds the 20MB limit"));continue}s.push({id:crypto.randomUUID(),file:e})}s.length>0&&ea(e=>[...e,...s]),e.target.value=""},className:"sr-only"})]}),et.length>0?(0,r.jsx)("div",{className:"space-y-3",children:et.map(e=>(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3 rounded-lg border border-border-primary bg-bg-surface-hover px-4 py-3",children:[(0,r.jsxs)("div",{className:"min-w-0",children:[(0,r.jsx)("p",{className:"truncate text-sm font-medium text-text-primary",children:e.file.name}),(0,r.jsxs)("p",{className:"truncate text-sm text-text-muted",children:[e.file.type||"Unknown type"," \xb7 ",function(e){if(e<1024)return"".concat(e," B");let t=["KB","MB","GB"],a=e/1024,r=0;for(;a>=1024&&r<t.length-1;)a/=1024,r+=1;return"".concat(a.toFixed(a>=10?0:1)," ").concat(t[r])}(e.file.size)]})]}),(0,r.jsx)("button",{type:"button",onClick:()=>{var t;return t=e.id,void ea(e=>e.filter(e=>e.id!==t))},className:"rounded-lg p-2 text-text-muted transition hover:bg-bg-surface hover:text-text-primary","aria-label":"Remove ".concat(e.file.name),children:(0,r.jsx)(p.A,{className:"size-4"})})]},e.id))}):null]}),el?(0,r.jsxs)("section",{className:"space-y-4",children:[(0,r.jsx)(_,{icon:v.A,title:"Contact"}),(0,r.jsxs)("div",{className:"grid gap-4 md:grid-cols-2",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-name",className:"mb-2 block text-sm font-medium text-text-primary",children:"Name"}),(0,r.jsx)("input",{id:"feedback-name",value:Q,onChange:e=>Z(e.target.value),placeholder:"Your name",className:ef,maxLength:120})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"feedback-contact-email",className:"mb-2 block text-sm font-medium text-text-primary",children:"Email"}),(0,r.jsx)("input",{id:"feedback-contact-email",type:"email",value:$,onChange:e=>ee(e.target.value),placeholder:"[email protected]",className:ef})]})]})]}):null,(0,r.jsxs)("div",{className:"flex gap-3 pt-2",children:[(0,r.jsx)(o(),{href:ec,className:"flex-1 rounded-lg border border-border-primary bg-bg-surface px-6 py-3 text-center font-medium text-text-primary transition hover:bg-bg-surface-hover",children:"Cancel"}),(0,r.jsxs)("button",{type:"submit",disabled:!ev,className:"flex flex-1 items-center justify-center gap-2 rounded-lg bg-brand-accent px-6 py-3 font-medium text-solid-black transition hover:bg-brand-accent-hover/90 disabled:cursor-not-allowed disabled:bg-bg-tertiary disabled:text-text-muted",children:[(0,r.jsx)(f.A,{className:"size-4"}),(0,r.jsx)("span",{children:eo?"Sending...":"Send"})]})]})]})]});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(l(),{children:[(0,r.jsx)("title",{children:"Feedback | Listen.com"}),(0,r.jsx)("meta",{name:"description",content:"Report a bug, UX issue, or idea for Listen. Attach screenshots, recordings, or voice notes."})]}),el?(0,r.jsxs)("div",{className:"min-h-screen bg-bg-primary",children:[(0,r.jsx)("header",{className:"border-b border-border-primary bg-bg-primary",children:(0,r.jsxs)("div",{className:"mx-auto flex max-w-5xl items-center justify-between gap-4 p-4 sm:px-6",children:[(0,r.jsxs)(o(),{href:"/",className:"flex items-center gap-3 text-text-primary",children:[(0,r.jsx)("div",{className:"rounded-lg bg-bg-surface p-2",children:(0,r.jsx)(N.hw,{className:"size-6"})}),(0,r.jsx)("span",{className:"text-sm font-medium",children:"Listen"})]}),(0,r.jsx)("button",{type:"button",onClick:()=>i("generic"),className:"rounded-full bg-solid-white px-4 py-2.5 text-sm font-medium text-solid-black transition hover:bg-solid-white/90",children:"Join Now"})]})}),(0,r.jsx)("main",{className:"mx-auto max-w-2xl px-4 py-8 sm:px-6 md:py-10",children:eN})]}):(0,r.jsx)("div",{className:"mx-auto max-w-2xl py-2 md:py-4",children:eN})]})}},39150:(e,t,a)=>{"use strict";a.d(t,{A:()=>r});let r=(0,a(46465).A)("Mail",[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}]])},53180:(e,t,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/feedback",function(){return a(31272)}])},57656:(e,t,a)=>{"use strict";a.d(t,{A:()=>r});let r=(0,a(46465).A)("MessageSquare",[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}]])},89601:(e,t,a)=>{"use strict";a.d(t,{A:()=>r});let r=(0,a(46465).A)("FileText",[["path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",key:"1rqfz7"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["path",{d:"M10 9H8",key:"b1mrlr"}],["path",{d:"M16 13H8",key:"t4e002"}],["path",{d:"M16 17H8",key:"z1uh3a"}]])}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=53180)),_N_E=e.O()}]);