Add mandatory confirmation of occupied timeslots

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 (
     <div className={styles.container}>
-      <h3 className={styles.title}>{t(KEY.occupied_title)}</h3>
+      <h3 className={styles.title}> {header ? t(header) : t(KEY.occupied_title)}</h3>
 
       {loading ? (
         <span className={styles.subtitle}>{t(KEY.common_loading)}...</span>
       ) : (
         <>
           <span className={styles.subtitle}>
-            <Trans i18nKey={KEY.occupied_help_text} />
+            {' '}
+            {subHeader ? (
+              <Trans i18nKey={subHeader} components={{ strong: <strong /> }} />
+            ) : (
+              <Trans i18nKey={KEY.occupied_help_text} />
+            )}
           </span>
           <div className={styles.date_container}>
             <MiniCalendar
@@ -126,7 +136,7 @@ export function OccupiedForm({ recruitmentId = 1, onCancel }: Props) {
               {t(KEY.common_cancel)}
             </Button>
             <Button display="block" theme="samf" onClick={save}>
-              {t(KEY.common_save)}
+              {saveButtonText ? t(saveButtonText) : t(KEY.common_save)}
             </Button>
           </div>
         </>

frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss

@@ -26,6 +26,10 @@
   }
 }
 
+.occupied_modal {
+  min-width: auto;
+}
+
 .text_container {
   flex: 6;
 }

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<RecruitmentPositionDto[]>();
 
   const [recruitmentApplication, setRecruitmentApplication] = useState<RecruitmentApplicationDto>();
+  const [openOccupiedForm, setOpenOccupiedForm] = useState(false);
+  const [occupiedTimesConfirmed, setOccupiedTimesConfirmed] = useState(false);
+  const [formData, setFormData] = useState<FormProps>();
+  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<RecruitmentApplicationDto>, positionId ? +positionId : 1)
       .then(() => {
         navigate({
@@ -137,6 +148,28 @@ export function RecruitmentApplicationFormPage() {
   return (
     <Page>
       <div className={styles.container}>
+        {openOccupiedForm && (
+          <Modal isOpen={openOccupiedForm} className={styles.occupied_modal}>
+            <>
+              <button
+                type="button"
+                className={styles.close_btn}
+                title="Close"
+                onClick={() => setOpenOccupiedForm(false)}
+              >
+                <Icon icon="octicon:x-24" width={24} />
+              </button>
+              <OccupiedForm
+                recruitmentId={recruitmentId}
+                onCancel={() => setOpenOccupiedForm(false)}
+                onConfirm={() => formData && submitData(formData)}
+                header="confirm_occupied_time"
+                subHeader="confirm_occupied_time_text"
+                saveButtonText="confirm_occupied_time_send_application"
+              />
+            </>
+          </Modal>
+        )}
         <div className={styles.row}>
           <div className={styles.text_container}>
             <h1 className={styles.header}>{dbT(recruitmentPosition, 'name')}</h1>

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',

frontend/src/i18n/translations.ts

@@ -434,6 +434,10 @@ export const nb = prepareTranslations({
   [KEY.occupied_help_text]: 'Vennligst angi tider du <strong>ikke</strong> 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 <strong>ikke</strong> 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 <strong>not</strong> 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 <strong>not</strong> available for interview',
+  [KEY.confirm_occupied_time_send_application]: 'Save and send application',
 
   // Feedback
   [KEY.feedback_type]: 'Feedback type',