VKT(Frontend): Free enrollment flow file upload

frontend/packages/shared/src/components/CookieBanner/CookieBanner.scss

@@ -16,7 +16,7 @@
 
     & &__dialog-container {
       padding: 20px 24px;
-      padding-top: 0px;
+      padding-top: 0;
     }
 
     & &__dialog-content {

frontend/packages/shared/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,21 @@
+import { ChangeEvent, FC } from 'react';
+
+type FileUploadProps = {
+  onChange: (files: FileList) => void;
+};
+
+export const FileUpload: FC<FileUploadProps> = ({ onChange }) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      onChange(event.target.files);
+    }
+  };
+
+  return (
+    <div className="custom-fileupload">
+      <div className="rows gapped">
+        <input type="file" onChange={handleChange} />
+      </div>
+    </div>
+  );
+};

frontend/packages/shared/src/components/Notifier/DialogBox.tsx

@@ -4,8 +4,8 @@ import {
   DialogContent,
   DialogTitle,
 } from '@mui/material';
-
 import { useEffect, useRef } from 'react';
+
 import { Color } from '../../enums';
 import { useDialog } from '../../hooks/useDialog/useDialog';
 import { CustomButton } from '../CustomButton/CustomButton';
@@ -19,13 +19,13 @@ export const DialogBox = () => {
 
   useEffect(() => {
     if (activeDialog) {
-        const dialogContainer = dialogRef.current;
+      const dialogContainer = dialogRef.current;
 
-        if (dialogContainer) {
-          const dialog = dialogContainer.querySelector('[role="dialog"]');
-          if (dialog instanceof HTMLDivElement) {
-            dialog.focus();
-          }
+      if (dialogContainer) {
+        const dialog = dialogContainer.querySelector('[role="dialog"]');
+        if (dialog instanceof HTMLDivElement) {
+          dialog.focus();
+        }
       }
     }
   }, [activeDialog]);

frontend/packages/shared/src/components/ToggleFilterGroup/ToggleFilterGroup.tsx

@@ -33,7 +33,9 @@ export function ToggleFilterGroup<T>({
         >
           <div className="columns gapped">
             <div className="grow">{label}</div>
-            {typeof count === "number" && !isNaN(count) && <div>{`(${count})`}</div>}
+            {typeof count === 'number' && !isNaN(count) && (
+              <div>{`(${count})`}</div>
+            )}
           </div>
         </CustomButton>
       ))}

frontend/packages/shared/src/components/index.tsx

@@ -40,6 +40,7 @@ export { ToggleFilterGroup } from './ToggleFilterGroup/ToggleFilterGroup';
 export { LangSelector } from './LangSelector/LangSelector';
 export { InfoText } from './InfoText/InfoText';
 export { OPHClerkLogo } from './OPHClerkLogo/OPHClerkLogo';
+export { FileUpload } from './FileUpload/FileUpload';
 export { Notifier } from './Notifier/Notifier';
 export { NotifierContextProvider } from './Notifier/NotifierContextProvider';
 export { CookieBanner } from './CookieBanner/CookieBanner';

frontend/packages/shared/src/hooks/useNavigationProtection/useNavigationProtection.ts

@@ -16,7 +16,6 @@ export const useNavigationProtection = (
     currentLocation: Location;
     nextLocation: Location;
   }): boolean => {
-
     if (baseUrl) {
       return !!(
         when &&
@@ -25,12 +24,9 @@ export const useNavigationProtection = (
         currentLocation.pathname !== nextLocation.pathname
       );
     } else {
-      return !!(
-        when &&
-        currentLocation.pathname !== nextLocation.pathname
-      );
+      return !!(when && currentLocation.pathname !== nextLocation.pathname);
     }
-  }
+  };
 
   const blocker = useBlocker(shouldBlock);
 

frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx

@@ -4,7 +4,7 @@ import {
   Radio,
   RadioGroup,
 } from '@mui/material';
-import { H2, Text } from 'shared/components';
+import { FileUpload, H2, Text } from 'shared/components';
 
 import { usePublicTranslation } from 'configs/i18n';
 
@@ -21,6 +21,8 @@ export const EducationDetails = ({
     handleChange(true);
   };
 
+  const handleFileUpload = (files: FileList) => {};
+
   return (
     <div className="margin-top-lg rows gapped">
       <H2>Koulutustiedot</H2>
@@ -59,6 +61,7 @@ export const EducationDetails = ({
           </RadioGroup>
         </FormControl>
       </fieldset>
+      <FileUpload onChange={handleFileUpload} />
     </div>
   );
 };

frontend/packages/vkt/src/interfaces/publicEducation.ts

@@ -1,5 +1,4 @@
 interface Education {
-  allowsFreeEnrollment: boolean;
   name: string;
   ongoing: boolean;
 }
@@ -9,7 +8,7 @@ interface FreeEnrollments {
   oralSkill: 0 | 1 | 2 | 3;
 }
 
-export interface PublicEducationDetails {
-  educationHistory: Education[];
+export interface PublicFreeEnrollmentDetails {
+  freeEnrollmentBasis: Education;
   freeEnrollments: FreeEnrollments;
 }

frontend/packages/vkt/src/interfaces/publicEnrollment.ts

@@ -5,7 +5,7 @@ import {
   CertificateShippingData,
   PartialExamsAndSkills,
 } from 'interfaces/common/enrollment';
-import { PublicEducationDetails } from 'interfaces/publicEducation';
+import { PublicFreeEnrollmentDetails } from 'interfaces/publicEducation';
 import { PublicExamEventResponse } from 'interfaces/publicExamEvent';
 import { PublicPerson } from 'interfaces/publicPerson';
 import { WithId } from 'interfaces/with';
@@ -49,7 +49,7 @@ export interface PublicEnrollment
   examEventId?: number;
   hasPaymentLink?: boolean;
   isFree?: boolean;
-  education?: PublicEducationDetails;
+  freeEnrollmentDetails?: PublicFreeEnrollmentDetails;
 }
 
 export interface PublicEnrollmentResponse