| 1 |
import { Icon as QuestionIcon } from '@launch/components/QuestionIcon'; |
| 2 |
|
| 3 |
export const Questionnaire = ({ questions = [], onAnswerChange }) => { |
| 4 |
const getSelectedExtraField = (q, selected) => { |
| 5 |
if (!Array.isArray(q?.extraFields) || !selected) return null; |
| 6 |
return q?.extraFields.find((ef) => ef.key === selected) || null; |
| 7 |
}; |
| 8 |
|
| 9 |
return ( |
| 10 |
<div className="mx-auto flex max-w-full flex-col gap-6 lg:max-w-[961px]"> |
| 11 |
{questions.map((q) => { |
| 12 |
const selected = q?.answerUser || q?.answerAI; |
| 13 |
const selectedExtraField = getSelectedExtraField(q, selected); |
| 14 |
|
| 15 |
return ( |
| 16 |
<div |
| 17 |
className="flex flex-col gap-3 rounded-sm bg-[#f8f8f8] p-6" |
| 18 |
key={q.id} |
| 19 |
> |
| 20 |
<p className="m-0 text-base font-medium text-extendify-black"> |
| 21 |
{q?.translatedQuestion || q?.question} |
| 22 |
</p> |
| 23 |
|
| 24 |
{q?.description && ( |
| 25 |
<p className="mb-0 ml-0 mr-0 mt-[-8px] p-0 text-sm font-normal text-gray-700"> |
| 26 |
{q?.description} |
| 27 |
</p> |
| 28 |
)} |
| 29 |
|
| 30 |
<div className="flex flex-wrap gap-5"> |
| 31 |
{q?.answerOptions.map((answer) => ( |
| 32 |
<button |
| 33 |
key={answer?.id} |
| 34 |
type="button" |
| 35 |
onClick={() => onAnswerChange?.(q?.id, answer?.id)} |
| 36 |
className={[ |
| 37 |
selected === answer?.id |
| 38 |
? 'border-2 border-design-main font-medium text-design-main before:absolute before:inset-0 before:bg-design-main before:opacity-[0.06] before:content-[""]' |
| 39 |
: 'border border-gray-200 bg-white font-normal', |
| 40 |
'relative flex w-full max-w-full items-center gap-2 rounded-md px-3 py-3 text-left text-sm transition-colors duration-150 focus:outline-hidden md:max-w-[291px]', |
| 41 |
].join(' ')} |
| 42 |
> |
| 43 |
<QuestionIcon id={answer?.iconId} /> |
| 44 |
{answer?.translatedLabel || answer?.label} |
| 45 |
</button> |
| 46 |
))} |
| 47 |
</div> |
| 48 |
|
| 49 |
{selectedExtraField && ( |
| 50 |
<div className="mt-2"> |
| 51 |
<label |
| 52 |
className="mb-3 block text-base font-medium text-extendify-black" |
| 53 |
htmlFor={`extra-field-${q.id}`} |
| 54 |
> |
| 55 |
{selectedExtraField?.translatedQuestion || |
| 56 |
selectedExtraField?.question} |
| 57 |
</label> |
| 58 |
<input |
| 59 |
id={`extra-field-${q.id}`} |
| 60 |
type={selectedExtraField?.type || 'text'} |
| 61 |
placeholder="www.example.com" |
| 62 |
value={selectedExtraField?.answer || ''} |
| 63 |
onChange={(e) => |
| 64 |
onAnswerChange?.(q?.id, e.target.value, { |
| 65 |
isExtraField: true, |
| 66 |
extraFieldKey: selectedExtraField?.key, |
| 67 |
}) |
| 68 |
} |
| 69 |
className="w-full max-w-[602px] rounded-sm border border-gray-300 px-2 py-2 outline-hidden" |
| 70 |
/> |
| 71 |
</div> |
| 72 |
)} |
| 73 |
</div> |
| 74 |
); |
| 75 |
})} |
| 76 |
</div> |
| 77 |
); |
| 78 |
}; |
| 79 |
|
