VKT(Frontend): Free enrollment flow frontend

Opetushallitus · May 28, 2024 · 35419b2 · 35419b2
1 parent ac16604
commit 35419b2
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 6 deletions.
diff --git a/frontend/packages/vkt/public/i18n/fi-FI/public.json b/frontend/packages/vkt/public/i18n/fi-FI/public.json
@@ -33,7 +33,8 @@
             "title": "Peru ilmoittautuminen"
           },
           "enrollToQueue": "Ilmoittaudu jonoon",
-          "pay": "Siirry maksamaan"
+          "pay": "Siirry maksamaan",
+          "enroll": "Ilmoittaudu"
         },
         "examEventDetails": {
           "enrollmentToQueue": "ilmoittautuminen jonoon",
@@ -53,7 +54,8 @@
           "reservationInfoText": "Jos ilmoittautumisesi on kesken, paina \"Jatka ilmoittautumista\"."
         },
         "paymentSum": {
-          "title": "Tutkintomaksu"
+          "title": "Tutkintomaksu",
+          "free": "Ilmainen"
         },
         "stepHeading": {
           "common": {
@@ -139,6 +141,13 @@
             "lastName": "Sukunimi",
             "title": "Henkilötietosi"
           },
+          "educationDetails": {
+            "education": "Koulutus",
+            "no": "Ei",
+            "highschool": "Ylioppilastutkinto tai vastaava ulkomaalainen tutkinto",
+            "college": "Korkeakoulututkinto",
+            "collegeEnrolled": "Olen kirjoilla korkeakoulussa"
+          },
           "preview": {
             "certificateShippingDetails": {
               "addressLabel": "Toimitusosoite",

diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentDesktopGrid.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentDesktopGrid.tsx
@@ -61,6 +61,9 @@ export const PublicEnrollmentDesktopGrid = ({
   const isEnrollmentSubmitLoading =
     enrollmentSubmitStatus === APIResponseStatus.InProgress;
 
+  const includePaymentStep =
+    ExamEventUtils.hasOpenings(examEvent) && !enrollment.isFree;
+
   return (
     <>
       <Grid className="public-enrollment__grid" item>
@@ -79,7 +82,7 @@ export const PublicEnrollmentDesktopGrid = ({
             >
               <PublicEnrollmentStepper
                 activeStep={activeStep}
-                includePaymentStep={ExamEventUtils.hasOpenings(examEvent)}
+                includePaymentStep={includePaymentStep}
               />
               {reservation && !isPreviewPassed && (
                 <PublicEnrollmentTimer

diff --git a/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx b/frontend/packages/vkt/src/components/publicEnrollment/steps/EducationDetails.tsx
@@ -0,0 +1,64 @@
+import {
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
+import { H2, Text } from 'shared/components';
+
+import { usePublicTranslation } from 'configs/i18n';
+
+export const EducationDetails = ({
+  handleChange,
+}: {
+  handleChange: (isFree: boolean) => void;
+}) => {
+  const { t } = usePublicTranslation({
+    keyPrefix: 'vkt.component.publicEnrollment.steps.educationDetails',
+  });
+
+  const handleRadioChange = () => {
+    handleChange(true);
+  };
+
+  return (
+    <div className="margin-top-lg rows gapped">
+      <H2>Koulutustiedot</H2>
+      <fieldset className="public-enrollment__grid__education-details">
+        <legend>
+          <Text>
+            <b>{t('education')}</b>
+          </Text>
+        </legend>
+        <FormControl error={false}>
+          <RadioGroup onChange={handleRadioChange}>
+            <FormControlLabel
+              className="radio-group-label"
+              value={'1'}
+              control={<Radio />}
+              label={t('no')}
+            />
+            <FormControlLabel
+              className="radio-group-label"
+              value={'2'}
+              control={<Radio />}
+              label={t('highschool')}
+            />
+            <FormControlLabel
+              className="radio-group-label"
+              value={'3'}
+              control={<Radio />}
+              label={t('college')}
+            />
+            <FormControlLabel
+              className="radio-group-label"
+              value={'4'}
+              control={<Radio />}
+              label={t('collegeEnrolled')}
+            />
+          </RadioGroup>
+        </FormControl>
+      </fieldset>
+    </div>
+  );
+};
diff --git a/frontend/packages/vkt/src/components/publicEnrollment/steps/FillContactDetails.tsx b/frontend/packages/vkt/src/components/publicEnrollment/steps/FillContactDetails.tsx
@@ -4,14 +4,16 @@ import { InputAutoComplete, TextFieldTypes } from 'shared/enums';
 import { TextField } from 'shared/interfaces';
 import { FieldErrors, getErrors, hasErrors } from 'shared/utils';
 
+import { EducationDetails } from 'components/publicEnrollment/steps/EducationDetails';
 import { PersonDetails } from 'components/publicEnrollment/steps/PersonDetails';
 import { useCommonTranslation, usePublicTranslation } from 'configs/i18n';
-import { useAppDispatch } from 'configs/redux';
+import { useAppDispatch, useAppSelector } from 'configs/redux';
 import {
   PublicEnrollment,
   PublicEnrollmentContactDetails,
 } from 'interfaces/publicEnrollment';
 import { updatePublicEnrollment } from 'redux/reducers/publicEnrollment';
+import { featureFlagsSelector } from 'redux/selectors/featureFlags';
 
 const fields: Array<TextField<PublicEnrollmentContactDetails>> = [
   {
@@ -69,6 +71,7 @@ export const FillContactDetails = ({
     keyPrefix: 'vkt.component.publicEnrollment.steps.fillContactDetails',
   });
   const translateCommon = useCommonTranslation();
+  const { freeEnrollmentAllowed } = useAppSelector(featureFlagsSelector);
 
   const [dirtyFields, setDirtyFields] = useState<
     Array<keyof PublicEnrollmentContactDetails>
@@ -106,6 +109,14 @@ export const FillContactDetails = ({
       );
     };
 
+  const handleEducationChange = (isFree: boolean) => {
+    dispatch(
+      updatePublicEnrollment({
+        isFree,
+      }),
+    );
+  };
+
   const handleBlur =
     (fieldName: keyof PublicEnrollmentContactDetails) => () => {
       if (!dirtyFields.includes(fieldName)) {
@@ -173,6 +184,9 @@ export const FillContactDetails = ({
         type={TextFieldTypes.PhoneNumber}
         autoComplete={InputAutoComplete.PhoneNumber}
       />
+      {freeEnrollmentAllowed && (
+        <EducationDetails handleChange={handleEducationChange} />
+      )}
     </div>
   );
 };
diff --git a/frontend/packages/vkt/src/interfaces/featureFlags.ts b/frontend/packages/vkt/src/interfaces/featureFlags.ts
@@ -2,4 +2,4 @@ export interface FeatureFlags {
   freeEnrollmentAllowed: boolean;
 }
 
-export interface FeatureFlagsResponse extends Partial<FeatureFlags> {};
+export interface FeatureFlagsResponse extends Partial<FeatureFlags> {}
diff --git a/frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts b/frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts
@@ -33,7 +33,7 @@ export const initialState: PublicEnrollmentState = {
     email: '',
     emailConfirmation: '',
     phoneNumber: '',
-    isFree: true,
+    isFree: false,
     oralSkill: false,
     textualSkill: false,
     understandingSkill: false,

diff --git a/frontend/packages/vkt/src/styles/components/publicEnrollment/_public-enrollment.scss b/frontend/packages/vkt/src/styles/components/publicEnrollment/_public-enrollment.scss
@@ -35,6 +35,10 @@
       }
     }
 
+    &__education-details {
+      border: 0;
+    }
+
     &__previous-enrollment {
       width: calc(50% - 1rem);