diff --git a/frontend/src/Components/OccupiedForm/OccupiedForm.tsx b/frontend/src/Components/OccupiedForm/OccupiedForm.tsx index 449ad162d..602661d81 100644 --- a/frontend/src/Components/OccupiedForm/OccupiedForm.tsx +++ b/frontend/src/Components/OccupiedForm/OccupiedForm.tsx @@ -12,9 +12,13 @@ import styles from './OccupiedForm.module.scss'; type Props = { recruitmentId: number; onCancel?: () => void; + onConfirm?: () => void; + header?: string; + subHeader?: string; + saveButtonText?: string; }; -export function OccupiedForm({ recruitmentId = 1, onCancel }: Props) { +export function OccupiedForm({ recruitmentId = 1, onCancel, onConfirm, header, subHeader, saveButtonText }: Props) { const { t } = useTranslation(); const [loading, setLoading] = useState(true); @@ -62,6 +66,7 @@ export function OccupiedForm({ recruitmentId = 1, onCancel }: Props) { postOccupiedTimeslots(data) .then(() => { toast.success(t(KEY.common_update_successful)); + onConfirm?.(); }) .catch((error) => { toast.error(t(KEY.common_something_went_wrong)); @@ -92,14 +97,19 @@ export function OccupiedForm({ recruitmentId = 1, onCancel }: Props) { return (
-

{t(KEY.occupied_title)}

+

{header ? t(header) : t(KEY.occupied_title)}

{loading ? ( {t(KEY.common_loading)}... ) : ( <> - + {' '} + {subHeader ? ( + }} /> + ) : ( + + )}
diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss index 3e0264d8a..d325f2efb 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss @@ -26,6 +26,10 @@ } } +.occupied_modal { + min-width: auto; +} + .text_container { flex: 6; } diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx index e28efb093..d9554fb8e 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx @@ -1,8 +1,9 @@ +import { Icon } from '@iconify/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useParams } from 'react-router-dom'; import { toast } from 'react-toastify'; -import { Button, Link, Page, SamfundetLogoSpinner } from '~/Components'; +import { Button, Link, Modal, OccupiedForm, Page, SamfundetLogoSpinner } from '~/Components'; import { Text } from '~/Components/Text/Text'; import { SamfForm } from '~/Forms/SamfForm'; import { SamfFormField } from '~/Forms/SamfFormField'; @@ -37,6 +38,10 @@ export function RecruitmentApplicationFormPage() { const [recruitmentPositionsForGang, setRecruitmentPositionsForGang] = useState(); const [recruitmentApplication, setRecruitmentApplication] = useState(); + const [openOccupiedForm, setOpenOccupiedForm] = useState(false); + const [occupiedTimesConfirmed, setOccupiedTimesConfirmed] = useState(false); + const [formData, setFormData] = useState(); + const [recruitmentId, setRecruitmentId] = useState(0); const [loading, setLoading] = useState(true); @@ -59,6 +64,7 @@ export function RecruitmentApplicationFormPage() { }), getRecruitmentApplicationForPosition(positionId as string).then((res) => { setRecruitmentApplication(res.data); + setRecruitmentId(res.data.recruitment); console.log(res.data); }), ]).then(() => { @@ -96,6 +102,11 @@ export function RecruitmentApplicationFormPage() { } function handleOnSubmit(data: FormProps) { + setFormData(data); + setOpenOccupiedForm(true); + } + + function submitData(data: FormProps) { putRecruitmentApplication(data as Partial, positionId ? +positionId : 1) .then(() => { navigate({ @@ -137,6 +148,28 @@ export function RecruitmentApplicationFormPage() { return (
+ {openOccupiedForm && ( + + <> + + setOpenOccupiedForm(false)} + onConfirm={() => formData && submitData(formData)} + header="confirm_occupied_time" + subHeader="confirm_occupied_time_text" + saveButtonText="confirm_occupied_time_send_application" + /> + + + )}

{dbT(recruitmentPosition, 'name')}

diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts index 3e9717c39..b5037963d 100644 --- a/frontend/src/i18n/constants.ts +++ b/frontend/src/i18n/constants.ts @@ -434,6 +434,9 @@ export const KEY = { occupied_select_time_text: 'occupied_select_time_text', occupied_title: 'occupied_title', occupied_show: 'occupied_show', + confirm_occupied_time: 'confirm_occupied_time', + confirm_occupied_time_text: 'confirm_occupied_time_text', + confirm_occupied_time_send_application: 'confirm_occupied_time_send_application', // Feedback feedback_type: 'feedback_type', diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts index 6505dc4ff..f6fcbf56d 100644 --- a/frontend/src/i18n/translations.ts +++ b/frontend/src/i18n/translations.ts @@ -434,6 +434,10 @@ export const nb = prepareTranslations({ [KEY.occupied_help_text]: 'Vennligst angi tider du ikke er tilgjengelig for intervju', [KEY.occupied_select_time_text]: 'Velg tidspunkt du er utilgjengelig', [KEY.occupied_show]: 'Sett din tilgjengelighet', + [KEY.confirm_occupied_time]: 'Bekreft din tilgjengelighet', + [KEY.confirm_occupied_time_text]: + 'Vennligst bekreft at dette er tidene du ikke er tilgjengelig for intervju', + [KEY.confirm_occupied_time_send_application]: 'Lagre og send søknad', // Feedback [KEY.feedback_type]: 'Type tilbakemelding', @@ -900,6 +904,10 @@ export const en = prepareTranslations({ [KEY.occupied_help_text]: 'Please indicate times you are not available for interview', [KEY.occupied_select_time_text]: 'Select times you are unavailable', [KEY.occupied_show]: 'Set your availability', + [KEY.confirm_occupied_time]: 'Confirm your availability', + [KEY.confirm_occupied_time_text]: + 'Please confirm that these are the times you are not available for interview', + [KEY.confirm_occupied_time_send_application]: 'Save and send application', // Feedback [KEY.feedback_type]: 'Feedback type',