https://citizensciencenigeria.org/assets/SurveyRunnerPage-BfKB1gM2.js

1import{o as te,j as e,L as ne,c as pe,r as x,B as A,c5 as ye,I as ae,dl as ve,dm as ge,g as k,k as ee,u as z,G as M,T as w,D as O,J as be,aQ as je,H as Se}from"./index-Bc374-Q2.js";import{C as V,d as B,a as Ne,b as Re}from"./card-DMUPdFqz.js";import{P as we}from"./progress-xBZVg9a2.js";import{R as Ce,a as $e}from"./radio-group-DhUVmVxn.js";import{C as Ie}from"./checkbox-hyW5ezaZ.js";import{T as ke,a as Ee,b as se,c as H,d as Ae,e as Te}from"./table-ChmQ8aZo.js";/**
2 * @license lucide-react v0.445.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const Fe=te("ArrowDown",[["path",{d:"M12 5v14",key:"s699le"}],["path",{d:"m19 12-7 7-7-7",key:"1idqje"}]]);/**
7 * @license lucide-react v0.445.0 - ISC
8 *
9 * This source code is licensed under the ISC license.
10 * See the LICENSE file in the root directory of this source tree.
11 */const _e=te("ArrowUp",[["path",{d:"m5 12 7-7 7 7",key:"hav0vg"}],["path",{d:"M12 19V5",key:"x0mq9r"}]]);function $({question:s,htmlFor:r,error:t,children:n}){const o=`${r}-error`;return e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx(ne,{htmlFor:r,className:"text-base leading-snug",children:s.prompt}),s.required?e.jsx("p",{className:"text-xs text-muted-foreground",children:"Required"}):null]}),n,t?e.jsx("p",{id:o,role:"alert",className:"text-sm text-destructive",children:t}):null]})}function ie({inputId:s,control:r,label:t}){return e.jsxs("div",{className:"flex items-center gap-3",children:[r,e.jsx(ne,{htmlFor:s,className:"cursor-pointer font-normal",children:t})]})}function E(s){if(s&&typeof s=="object"&&!Array.isArray(s))return s;if(typeof s!="string"||s.length===0)return{};try{const r=JSON.parse(s);return r&&typeof r=="object"&&!Array.isArray(r)?r:{}}catch{return{}}}function L(s,r){const t=s[r];return Array.isArray(t)?t.filter(n=>typeof n=="string"):[]}function T(s,r,t){const n=s[r];return typeof n=="number"&&Number.isFinite(n)?n:t}function I(s){return`survey-q-${s.id}`}function Pe({question:s,value:r,onChange:t,error:n}){const o=L(E(s.config),"options"),u=I(s),m=typeof r=="string"?r:"";return e.jsx($,{question:s,htmlFor:`${u}-0`,error:n,children:e.jsx(Ce,{value:m,onValueChange:t,"aria-required":s.required,children:o.map((c,d)=>e.jsx(ie,{inputId:`${u}-${d}`,label:c,control:e.jsx($e,{id:`${u}-${d}`,value:c,"data-testid":`survey-option-${c}`})},c))})})}function Oe({question:s,value:r,onChange:t,error:n}){const o=E(s.config),u=L(o,"options"),m=T(o,"maxSelect",u.length),c=I(s),d=Array.isArray(r)?r.filter(a=>typeof a=="string"):[],h=d.length>=m,i=(a,p)=>{const g=p?[...d,a]:d.filter(N=>N!==a);t(u.filter(N=>g.includes(N)))};return e.jsx($,{question:s,htmlFor:`${c}-0`,error:n,children:e.jsx("div",{role:"group","aria-required":s.required,className:"space-y-2",children:u.map((a,p)=>{const g=d.includes(a);return e.jsx(ie,{inputId:`${c}-${p}`,label:a,control:e.jsx(Ie,{id:`${c}-${p}`,checked:g,disabled:!g&&h,onCheckedChange:N=>i(a,N===!0),"data-testid":`survey-option-${a}`})},a)})})})}function oe({question:s,value:r,onChange:t,error:n,min:o,max:u,minLabel:m,maxLabel:c}){const d=I(s),h=typeof r=="number"?r:Number(r),i=[];for(let a=o;a<=u;a++)i.push(a);return e.jsxs($,{question:s,htmlFor:`${d}-${o}`,error:n,children:[e.jsx("div",{role:"radiogroup","aria-required":s.required,"aria-label":s.prompt,className:"flex flex-wrap gap-2",children:i.map(a=>{const p=h===a;return e.jsx("button",{id:`${d}-${a}`,type:"button",role:"radio","aria-checked":p,onClick:()=>t(a),"data-testid":`survey-scale-${a}`,className:pe("h-10 min-w-10 rounded-md border px-3 text-sm font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",p?"border-primary bg-primary text-primary-foreground":"border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground"),children:a},a)})}),m||c?e.jsxs("div",{className:"flex justify-between text-xs text-muted-foreground",children:[e.jsx("span",{children:m}),e.jsx("span",{children:c})]}):null]})}function Me(s){const r=E(s.question.config);return e.jsx(oe,{...s,min:T(r,"min",1),max:T(r,"max",5)})}function Le(s){return e.jsx(oe,{...s,min:0,max:10,minLabel:"Not at all likely",maxLabel:"Extremely likely"})}function Ye({question:s,value:r,onChange:t,error:n}){const o=L(E(s.config),"options"),u=I(s),c=[...(Array.isArray(r)?r.filter(i=>typeof i=="string"):[]).filter(i=>o.includes(i))];for(const i of o)c.includes(i)||c.push(i);const d=x.useRef(void 0);x.useEffect(()=>{d.current!==s.id&&(d.current=s.id,!Array.isArray(r)&&c.length>0&&t(c))},[s.id,r,c,t]);const h=(i,a)=>

11{if(a<0||a>=c.length)return;const p=[...c],[g]=p.splice(i,1);p.splice(a,0,g),t(p)};return e.jsx($,{question:s,htmlFor:`${u}-0`,error:n,children:e.jsx("ol",{className:"space-y-2","aria-label":s.prompt,children:c.map((i,a)=>e.jsxs("li",{className:"flex items-center gap-3 rounded-md border border-input bg-background p-2",children:[e.jsx("span",{className:"w-6 text-center text-sm text-muted-foreground",children:a+1}),e.jsx("span",{className:"flex-1 text-sm",children:i}),e.jsx(A,{id:a===0?`${u}-0`:void 0,type:"button",variant:"ghost",size:"sm",disabled:a===0,"aria-label":`Move ${i} up`,"data-testid":`survey-rank-up-${i}`,onClick:()=>h(a,a-1),children:e.jsx(_e,{className:"h-4 w-4"})}),e.jsx(A,{type:"button",variant:"ghost",size:"sm",disabled:a===c.length-1,"aria-label":`Move ${i} down`,"data-testid":`survey-rank-down-${i}`,onClick:()=>h(a,a+1),children:e.jsx(Fe,{className:"h-4 w-4"})})]},i))})})}function qe({question:s,value:r,onChange:t,error:n}){const o=E(s.config),u=L(o,"rows"),m=L(o,"columns"),c=I(s),d=r&&typeof r=="object"&&!Array.isArray(r)?r:{},h=(i,a)=>t({...d,[i]:a});return e.jsx($,{question:s,htmlFor:`${c}-cell-0-0`,error:n,children:e.jsx("div",{className:"overflow-x-auto",children:e.jsxs(ke,{children:[e.jsx(Ee,{children:e.jsxs(se,{children:[e.jsx(H,{scope:"col",children:e.jsx("span",{className:"sr-only",children:"Statement"})}),m.map(i=>e.jsx(H,{scope:"col",className:"text-center",children:i},i))]})}),e.jsx(Ae,{children:u.map((i,a)=>e.jsxs(se,{children:[e.jsx(H,{scope:"row",className:"font-normal",children:i}),m.map((p,g)=>e.jsx(Te,{className:"text-center",children:e.jsx("input",{id:`${c}-cell-${a}-${g}`,type:"radio",name:`${c}-row-${a}`,className:"h-4 w-4 accent-primary",checked:d[i]===p,"aria-label":`${i}: ${p}`,"data-testid":`survey-matrix-${i}-${p}`,onChange:()=>h(i,p)})},p))]},i))})]})})})}function Ue({question:s,value:r,onChange:t,error:n}){const o=E(s.config),u=T(o,"maxLength",0),m=I(s),c=typeof r=="string"?r:"";return e.jsxs($,{question:s,htmlFor:m,error:n,children:[e.jsx(ye,{id:m,value:c,rows:4,required:s.required,"aria-required":s.required,maxLength:u>0?u:void 0,onChange:d=>t(d.target.value),"data-testid":"survey-open-text"}),u>0?e.jsxs("p",{className:"text-xs text-muted-foreground",children:[c.length," / ",u]}):null]})}function Ve({question:s,value:r,onChange:t,error:n}){const o=I(s),u=typeof r=="string"?r:"";return e.jsx($,{question:s,htmlFor:o,error:n,children:e.jsx(ae,{id:o,type:"date",value:u,required:s.required,"aria-required":s.required,onChange:m=>t(m.target.value),"data-testid":"survey-date",className:"max-w-xs"})})}function Be({question:s,value:r,onChange:t,error:n}){const o=E(s.config),u=T(o,"min",Number.NaN),m=T(o,"max",Number.NaN),c=I(s),d=typeof r=="number"&&Number.isFinite(r)?String(r):"";return e.jsx($,{question:s,htmlFor:c,error:n,children:e.jsx(ae,{id:c,type:"number",value:d,required:s.required,"aria-required":s.required,min:Number.isFinite(u)?u:void 0,max:Number.isFinite(m)?m:void 0,onChange:h=>{const i=h.target.value;if(i==="")return t(void 0);const a=Number(i);t(Number.isNaN(a)?void 0:a)},"data-testid":"survey-number",className:"max-w-xs"})})}const De={single_choice:Pe,multiple_choice:Oe,scale:Me,nps:Le,ranking:Ye,matrix:qe,open_text:Ue,date:Ve,number:Be};function Qe(s,r,t){const n=[...s].sort((h,i)=>h.order-i.order),o=n.length,u=n.findIndex(h=>h.id===t),m=t===ge||u===-1?o:u,c=n.slice(0,m).filter(h=>ve(r[h.id])).length,d=o===0?0:Math.round(c/o*100);return{total:o,completed:c,percentComplete:d}}function ze(s){return`${s.completed} of ${s.total}`}const ce=new Set(["scale","nps","number"]),ue=new Set(["multiple_choice","ranking","matrix"]);function He(s,r){if(r==null)return"";if(ce.has(s))return String(r);if(ue.has(s))try{return JSON.stringify(r)??""}catch{return""}return typeof r=="string"?r:String(r)}function Ge(s,r){if(ce.has(s)){const t=Number(r);return r.trim()===""||Number.isNaN(t)?r:t}if(ue.has(s))try{return JSON.parse(r)}catch{return r}return r}const Je=k`
12  fragment SurveyRunnerSurveyFields on Survey {
13    id
14    shortCode
15    title
16    description
17    estimatedMinutes
18    rewardAmount
19    status
20    version
21    questions {
22      id
23      order
24      type
25      prompt
26      required
27      config
28    }
29  }
30`,D=k`
31  fragment SurveyRunnerResponseFields on SurveyResponse {
32    id
33    status
34    cursor
35    surveyVersion
36    revision
37    answers {
38      questionId
39      value
40    }
41  }
42`,Ke=k`
43  query GetSurveyByShortCode($shortCode: String!) {
44    survey(shortCode: $shortCode) {
45      ...SurveyRunnerSurveyFields
46    }
47  }
48  ${Je}
49`,We=k`
50  query MySurveyResponse($surveyShortCode: String!) {
51    mySurveyResponse(surveyShortCode: $surveyShortCode) {
52      ...SurveyRunnerResponseFields
53    }
54  }
55  ${D}
56`,Xe=k`
57  mutation StartSurveyResponse($surveyShortCode: String!) {
58    startSurveyResponse(surveyShortCode: $surveyShortCode) {
59      ...SurveyRunnerResponseFields
60    }
61  }
62  ${D}
63`,Ze=k`

64  mutation SaveSurveyProgress($data: SaveSurveyProgressInput!) {
65    saveSurveyProgress(data: $data) {
66      ...SurveyRunnerResponseFields
67    }
68  }
69  ${D}
70`,es=k`
71  mutation SubmitSurveyResponse($surveyId: String!) {
72    submitSurveyResponse(surveyId: $surveyId) {
73      ...SurveyRunnerResponseFields
74    }
75  }
76  ${D}
77`,ss="STALE_REVISION",re={status:"in_progress",cursor:"",revision:0,answers:{},seen:[]};function rs(s){var Z;const[r,t]=x.useState(re),n=x.useRef(re),[o,u]=x.useState(),[m,c]=x.useState(!1),[d,h]=x.useState(!1),i=x.useRef(!1),[a,p]=x.useState(!1),g=x.useRef(!1),N=x.useRef(!1),J=ee(Ke,{variables:{shortCode:s}}),F=ee(We,{variables:{surveyShortCode:s}}),[K]=z(Xe),[W]=z(Ze),[X]=z(es),v=((Z=J.data)==null?void 0:Z.survey)??void 0,Q=x.useMemo(()=>{const l=new Map;for(const f of(v==null?void 0:v.questions)??[])l.set(f.id,f);return l},[v]),_=x.useRef(Q);_.current=Q;const R=x.useCallback(l=>{n.current=l,t(l)},[]),C=x.useCallback((l,f)=>{const b=l.cursor??f.cursor,j={};for(const S of l.answers??[]){const U=_.current.get(S.questionId);j[S.questionId]=U?Ge(U.type,S.value):S.value}const y=[...f.seen],P=S=>{S&&!y.some(U=>U.id===S.id)&&y.push({id:S.id,order:S.order})};for(const S of Object.keys(j))P(_.current.get(S));return P(_.current.get(b)),{responseId:l.id??f.responseId,status:l.status??f.status,cursor:b,revision:l.revision??f.revision,answers:j,seen:y}},[]);x.useEffect(()=>{var f,b;if(!v||F.loading||i.current)return;const l=(f=F.data)==null?void 0:f.mySurveyResponse;if(i.current=!0,l){R(C(l,n.current)),h(l.status==="in_progress"&&(((b=l.answers)==null?void 0:b.length)??0)>0);return}K({variables:{surveyShortCode:s}}).then(j=>{var P;const y=(P=j.data)==null?void 0:P.startSurveyResponse;y&&R(C(y,n.current))}).catch(j=>u(G(j)))},[v,F.loading,F.data,s,K,C,R]);const de=x.useCallback((l,f)=>{N.current=!0,R({...n.current,answers:{...n.current.answers,[l]:f}})},[R]),Y=x.useCallback(async()=>{var b;const l=n.current,f=_.current.get(l.cursor);if(!(!v||!f)){u(void 0);try{const y=(b=(await W({variables:{data:{surveyId:v.id,questionId:f.id,answer:He(f.type,l.answers[f.id]),revision:l.revision}}})).data)==null?void 0:b.saveSurveyProgress;y&&(N.current=!1,R(C(y,n.current)))}catch(j){const y=ts(j);if(!y){u(G(j));return}N.current=!1,R(C({revision:y.currentRevision,cursor:y.currentCursor,answers:y.currentAnswers},n.current))}}},[v,W,C,R]),q=x.useCallback(async l=>{if(!g.current){g.current=!0,p(!0);try{await l()}finally{g.current=!1,p(!1)}}},[]),le=x.useCallback(()=>q(()=>Y()),[q,Y]),me=x.useCallback(()=>q(async()=>{var l;if(v){N.current&&await Y(),u(void 0);try{const b=(l=(await X({variables:{surveyId:v.id}})).data)==null?void 0:l.submitSurveyResponse;b&&R(C(b,n.current))}catch(f){u(G(f))}}}),[q,v,X,Y,C,R]),xe=x.useCallback(()=>

77c(!0),[]),he=Q.get(r.cursor),fe=Qe(r.seen,r.answers,r.cursor);return{survey:v,question:he,cursor:r.cursor,answers:r.answers,revision:r.revision,progress:fe,loading:J.loading||F.loading,busy:a,submitted:r.status==="submitted",canResume:d,resumed:m,error:o,setAnswer:de,next:le,submit:me,resume:xe}}function ts(s){if(!s||typeof s!="object")return;const r=s,t=Array.isArray(r.errors)?r.errors:Array.isArray(r.graphQLErrors)?r.graphQLErrors:[];for(const n of t){const o=n==null?void 0:n.extensions;if((o==null?void 0:o.code)===ss)return o}}function G(s){return s instanceof Error?s.message:"Something went wrong."}function ns({shortCode:s}){const r=rs(s),{survey:t,question:n,progress:o,submitted:u,canResume:m,resumed:c,busy:d}=r;if(r.loading)return e.jsxs("div",{className:"space-y-4 p-4","aria-busy":"true","data-testid":"survey-loading",children:[e.jsx(M,{className:"h-8 w-64"}),e.jsx(M,{className:"h-40 w-full"})]});if(!t)return e.jsx("div",{className:"mx-auto max-w-2xl p-4",children:e.jsx(w,{"data-testid":"survey-unavailable",children:"This survey isn't available."})});if(u)return e.jsxs("div",{className:"mx-auto max-w-2xl space-y-3 p-4",children:[e.jsx(O,{as:"h1",size:"h2",children:t.title}),e.jsx(V,{children:e.jsxs(B,{className:"space-y-2 pt-6",children:[e.jsx(w,{"data-testid":"survey-complete",children:"Thanks — your response has been submitted."}),e.jsx(w,{className:"text-muted-foreground",children:"You can close this page. Your answers are saved."})]})})]});if(m&&!c)return e.jsxs("div",{className:"mx-auto max-w-2xl space-y-3 p-4",children:[e.jsx(O,{as:"h1",size:"h2",children:t.title}),e.jsxs(V,{"data-testid":"survey-resume-banner",children:[e.jsx(Ne,{children:e.jsx(Re,{children:"Pick up where you left off"})}),e.jsxs(B,{className:"space-y-3",children:[e.jsx(w,{className:"text-muted-foreground",children:"You already started this survey. Your saved answers are still here."}),e.jsx(A,{onClick:r.resume,"data-testid":"survey-resume-continue",children:"Continue"})]})]})]});if(!n)return e.jsxs("div",{className:"mx-auto max-w-2xl space-y-3 p-4",children:[e.jsx(O,{as:"h1",size:"h2",children:t.title}),e.jsx(A,{onClick:()=>void r.submit(),disabled:d,"data-testid":"survey-submit",children:"Submit"})]});const h=De[n.type];return h?e.jsxs("div",{className:"mx-auto max-w-2xl space-y-6 p-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(O,{as:"h1",size:"h2",children:t.title}),t.description?e.jsx(w,{className:"text-muted-foreground",children:t.description}):null]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(we,{value:o.percentComplete,"aria-label":"Survey progress"}),e.jsxs(w,{className:"text-sm text-muted-foreground","data-testid":"survey-progress",children:[ze(o)," answered so far"]})]}),e.jsx(V,{"data-testid":"survey-question",children:e.jsx(B,{className:"pt-6",children:e.jsx(h,{question:n,value:r.answers[n.id],onChange:i=>r.setAnswer(n.id,i)})})}),r.error?e.jsx(w,{role:"alert",className:"text-sm text-destructive",children:r.error}):null,e.jsxs("div",{className:"flex gap-3",children:[e.jsx(A,{onClick:()=>void r.next(),disabled:d,"data-testid":"survey-next",children:"Next"}),e.jsx(A,{variant:"secondary",onClick:()=>void r.submit(),disabled:d,"data-testid":"survey-submit",children:"Submit"})]})]}):e.jsxs("div",{className:"mx-auto max-w-2xl space-y-3 p-4",children:[e.jsx(O,{as:"h1",size:"h2",children:t.title}),e.jsx(V,{children:e.jsxs(B,{className:"space-y-2 pt-6",children:[e.jsx(w,{role:"alert","data-testid":"survey-question-unsupported",children:"This question can't be shown in this version of the app."}),e.jsx(w,{className:"text-muted-foreground",children:"Your answers so far are saved. Please refresh the page to continue."})]})})]})}function ls(){const{surveyShortCode:s=""}=be(),r=e.jsxs("div",{className:"mx-auto max-w-2xl space-y-4 p-4","data-testid":"survey-gate-loading","aria-busy":"true",children:[e.jsx(M,{className:"h-8 w-64"}),e.jsx(M,{className:"h-4 w-40"}),e.jsx(M,{className:"h-40 w-full"})]}),t=e.jsx("div",{className:"mx-auto max-w-2xl p-4",children:e.jsx(w,{"data-testid":"survey-unavailable",children:"This survey isn't available."})});return e.jsxs(je,{feature:"multiQuestionSurveys",loading:r,fallback:t,children:[e.jsxs(Se,{children:[e.jsx("title",{children:"Survey | CSN"}),e.jsx("meta",{name:"robots",content:"noindex"})]}),e.jsx(ns,{shortCode:s})]})}export{ls as SurveyRunnerPage,ls as default};