-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ks-handler): add UI for creating youth application without SSN
TODO: - YJDH-701: refactor to reduce code duplication - YJDH-702: add UI component & browser tests also: - add link to handler UI's header to the page for creating a youth application without a social security number - add link from backend's excel-download page to the handler UI page for creating a youth application without a social security number, this was done with request from Kesäseteli's product owner - add footer to handler UI - fix types - change non_vtj_birthdate from Date to string refs YJDH-697
- Loading branch information
1 parent
2e7806b
commit e46958c
Showing
29 changed files
with
989 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
frontend/kesaseteli/handler/src/components/form/CreateApplicationWithoutSsnForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import DateInput from 'kesaseteli/handler/components/form/DateInput'; | ||
| import SelectionGroup from 'kesaseteli/handler/components/form/SelectionGroup'; | ||
| import SubmitErrorSummary from 'kesaseteli/handler/components/form/SubmitErrorSummary'; | ||
| import TextInput from 'kesaseteli/handler/components/form/TextInput'; | ||
| import useHandleApplicationWithoutSsnSubmit from 'kesaseteli/handler/hooks/application/useHandleApplicationWithoutSsnSubmit'; | ||
| import useCreateYouthApplicationWithoutSsnQuery from 'kesaseteli/handler/hooks/backend/useCreateYouthApplicationWithoutSsnQuery'; | ||
| import { useTranslation } from 'next-i18next'; | ||
| import React from 'react'; | ||
| import SaveFormButton from 'shared/components/forms/buttons/SaveFormButton'; | ||
| import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; | ||
| import $Notification from 'shared/components/notification/Notification.sc'; | ||
| import { | ||
| EMAIL_REGEX, | ||
| NAMES_REGEX, | ||
| PHONE_NUMBER_REGEX, | ||
| POSTAL_CODE_REGEX, | ||
| } from 'shared/constants'; | ||
| import { SUPPORTED_LANGUAGES } from 'shared/i18n/i18n'; | ||
|
|
||
| const CreateApplicationWithoutSsnForm: React.FC = () => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const submitQuery = useCreateYouthApplicationWithoutSsnQuery(); | ||
| const { handleSaveSuccess, handleErrorResponse, submitError } = | ||
| useHandleApplicationWithoutSsnSubmit(); | ||
|
|
||
| return ( | ||
| <> | ||
| <$Notification | ||
| label={t('common:applicationWithoutSsn.form.usageInfo')} | ||
| type="info" | ||
| /> | ||
| {submitError && ( | ||
| <$GridCell $colSpan={2}> | ||
| <SubmitErrorSummary error={submitError} /> | ||
| </$GridCell> | ||
| )} | ||
| <SelectionGroup | ||
| id="language" | ||
| validation={{ required: true }} | ||
| direction="horizontal" | ||
| values={ | ||
| /* Prioritize English for immigrants/refugees by sorting i.e. ["en", "fi", "sv"] */ | ||
| [...SUPPORTED_LANGUAGES].sort() | ||
| } | ||
| $colSpan={2} | ||
| /> | ||
| <TextInput | ||
| id="firstName" | ||
| validation={{ required: true, pattern: NAMES_REGEX, maxLength: 128 }} | ||
| autoComplete="off" | ||
| /> | ||
| <TextInput | ||
| id="lastName" | ||
| validation={{ required: true, pattern: NAMES_REGEX, maxLength: 128 }} | ||
| autoComplete="off" | ||
| /> | ||
| <DateInput id="nonVtjBirthdate" validation={{ required: true }} /> | ||
| <TextInput | ||
| id="postcode" | ||
| type="number" | ||
| validation={{ | ||
| required: true, | ||
| pattern: POSTAL_CODE_REGEX, | ||
| maxLength: 5, | ||
| }} | ||
| autoComplete="off" | ||
| /> | ||
| <TextInput | ||
| id="school" | ||
| validation={{ required: true, pattern: NAMES_REGEX, maxLength: 256 }} | ||
| $colSpan={2} | ||
| autoComplete="off" | ||
| /> | ||
| <TextInput | ||
| id="phoneNumber" | ||
| validation={{ | ||
| required: true, | ||
| pattern: PHONE_NUMBER_REGEX, | ||
| maxLength: 64, | ||
| }} | ||
| autoComplete="off" | ||
| /> | ||
| <TextInput | ||
| id="email" | ||
| validation={{ required: true, pattern: EMAIL_REGEX, maxLength: 254 }} | ||
| autoComplete="off" | ||
| /> | ||
| <TextInput | ||
| id="additionalInfoDescription" | ||
| validation={{ required: true, maxLength: 4096 }} | ||
| autoComplete="off" | ||
| type="textArea" | ||
| $colSpan={2} | ||
| /> | ||
| <TextInput | ||
| id="nonVtjHomeMunicipality" | ||
| validation={{ required: false, pattern: NAMES_REGEX, maxLength: 64 }} | ||
| autoComplete="off" | ||
| $colSpan={2} | ||
| /> | ||
| <$Notification | ||
| label={t('common:applicationWithoutSsn.form.emailCheckAlert')} | ||
| type="alert" | ||
| /> | ||
| <$GridCell $colSpan={2}> | ||
| <SaveFormButton | ||
| saveQuery={submitQuery} | ||
| onSuccess={handleSaveSuccess} | ||
| onError={handleErrorResponse} | ||
| onInvalidForm={(errors) => { | ||
| // this helps debugging when react tests fail | ||
| if (process.env.NODE_ENV === 'test') { | ||
| // eslint-disable-next-line no-console | ||
| console.error('invalid form', errors); | ||
| } | ||
| }} | ||
| > | ||
| {t(`common:applicationWithoutSsn.form.sendButton`)} | ||
| </SaveFormButton> | ||
| </$GridCell> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CreateApplicationWithoutSsnForm; |
Oops, something went wrong.