+ {formatContentHtml({ + msg: spName?.trim() + ? t('doc_auth.exit_survey.content_html', { + sp_name: spName, + app_name: appName, + }) + : t('doc_auth.exit_survey.content_nosp_html', { + app_name: appName, + }), + url: addSearchParams(spName?.trim() ? exitURL : cancelURL, { + step: currentStep, + location: 'optional_question', + }), + })} +
+ ); + const optionalTag = ( ++ {t('doc_auth.exit_survey.optional.content', { app_name: appName })} +
+ ); + + const idTypeLabels = [ + t('doc_auth.exit_survey.optional.id_types.us_passport'), + t('doc_auth.exit_survey.optional.id_types.resident_card'), + t('doc_auth.exit_survey.optional.id_types.military_id'), + t('doc_auth.exit_survey.optional.id_types.tribal_id'), + t('doc_auth.exit_survey.optional.id_types.voter_registration_card'), + t('doc_auth.exit_survey.optional.id_types.other'), + ]; + + const allIdTypeOptions = [ + { name: 'us_passport', checked: false }, + { name: 'resident_card', checked: false }, + { name: 'military_id', checked: false }, + { name: 'tribal_id', checked: false }, + { name: 'voter_registration_card', checked: false }, + { name: 'other', checked: false }, + ]; + + const [idTypeOptions, setIdTypeOptions] = useState(allIdTypeOptions); + + const updateCheckStatus = (index: number) => { + setIdTypeOptions( + idTypeOptions.map((idOption, currentIndex) => + currentIndex === index ? { ...idOption, checked: !idOption.checked } : { ...idOption }, + ), + ); + }; + + const checkboxes = ( + <> + {idTypeOptions.map((idType, idx) => ( +