VKT(Frontend): Free enrollment flow frontend

Opetushallitus · Jun 3, 2024 · dc26fea · dc26fea
1 parent 35419b2
commit dc26fea
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 40 deletions.
diff --git a/backend/vkt/src/main/resources/application-dev.yaml b/backend/vkt/src/main/resources/application-dev.yaml
@@ -5,7 +5,7 @@ server:
         secure: false
 app:
   reservation:
-    duration: PT5M
+    duration: PT50M
   payment:
     paytrail:
       secret: SAIPPUAKAUPPIAS

diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.10.6",
+  "version": "1.10.7",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

diff --git a/frontend/packages/shared/src/styles/abstracts/common/_layout.scss b/frontend/packages/shared/src/styles/abstracts/common/_layout.scss
@@ -74,6 +74,15 @@
   }
 }
 
+.grid-3-columns {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(5rem, calc(33% - 1rem)));
+
+  @include phone {
+    grid-template-columns: auto;
+  }
+}
+
 /* TABLE */
 .table-layout-auto {
   &#{&} {

diff --git a/frontend/packages/vkt/package.json b/frontend/packages/vkt/package.json
@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].5"
+    "shared": "npm:@opetushallitus/[email protected].7"
   }
 }
diff --git a/frontend/packages/vkt/src/components/clerkExamEvent/overview/ClerkExamEventDetails.tsx b/frontend/packages/vkt/src/components/clerkExamEvent/overview/ClerkExamEventDetails.tsx
@@ -316,6 +316,11 @@ export const ClerkExamEventDetails = () => {
         status={EnrollmentStatus.PAID}
         examEventId={examEventDetails.id}
       />
+      <EnrollmentList
+        enrollments={enrollments}
+        status={EnrollmentStatus.AWAITING_APPROVAL}
+        examEventId={examEventDetails.id}
+      />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentStatus.SHIFTED_FROM_QUEUE}

diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx
@@ -10,7 +10,6 @@ import { useDialog } from 'shared/hooks';
 
 import { useCommonTranslation, usePublicTranslation } from 'configs/i18n';
 import { useAppDispatch } from 'configs/redux';
-import { EnrollmentStatus } from 'enums/app';
 import { PublicEnrollmentFormStep } from 'enums/publicEnrollment';
 import {
   PublicEnrollment,
@@ -24,6 +23,7 @@ import {
   loadPublicEnrollmentUpdate,
   setLoadingPayment,
 } from 'redux/reducers/publicEnrollment';
+import { EnrollmentUtils } from 'utils/enrollment';
 import { RouteUtils } from 'utils/routes';
 
 export const PublicEnrollmentControlButtons = ({
@@ -110,7 +110,7 @@ export const PublicEnrollmentControlButtons = ({
 
   useEffect(() => {
     if (submitStatus === APIResponseStatus.Success) {
-      if (enrollment.status != EnrollmentStatus.QUEUED) {
+      if (EnrollmentUtils.isPaymentRequired(enrollment)) {
         // Safari needs time to re-render loading indicator
         setTimeout(() => {
           window.location.href = RouteUtils.getPaymentCreateApiRoute(
@@ -124,14 +124,7 @@ export const PublicEnrollmentControlButtons = ({
         );
       }
     }
-  }, [
-    submitStatus,
-    navigate,
-    dispatch,
-    examEventId,
-    enrollment.id,
-    enrollment.status,
-  ]);
+  }, [submitStatus, navigate, dispatch, examEventId, enrollment]);
 
   const handleBackBtnClick = () => {
     const nextStep: PublicEnrollmentFormStep = activeStep - 1;

diff --git a/frontend/packages/vkt/src/components/publicEnrollment/steps/Preview.tsx b/frontend/packages/vkt/src/components/publicEnrollment/steps/Preview.tsx
@@ -56,38 +56,52 @@ const ExamEventDetails = ({ enrollment }: { enrollment: PublicEnrollment }) => {
   });
   const translateCommon = useCommonTranslation();
 
-  const translateIfSelected = (skill: keyof PartialExamsAndSkills) => {
-    return enrollment[skill]
-      ? translateCommon(`enrollment.partialExamsAndSkills.${skill}`)
-      : undefined;
-  };
-
-  const skills = [
-    translateIfSelected('textualSkill'),
-    translateIfSelected('oralSkill'),
-    translateIfSelected('understandingSkill'),
-  ].filter((s) => !!s);
+  const skills = ['textualSkill', 'oralSkill', 'understandingSkill'].filter(
+    (skill) => !!enrollment[skill as keyof PartialExamsAndSkills],
+  );
 
   const partialExams = [
-    translateIfSelected('writingPartialExam'),
-    translateIfSelected('readingComprehensionPartialExam'),
-    translateIfSelected('speakingPartialExam'),
-    translateIfSelected('speechComprehensionPartialExam'),
-  ].filter((s) => !!s);
+    'writingPartialExam',
+    'readingComprehensionPartialExam',
+    'speakingPartialExam',
+    'speechComprehensionPartialExam',
+  ].filter((exam) => !!enrollment[exam as keyof PartialExamsAndSkills]);
+
+  const displaySkillsList = () => (
+    <div className="rows gapped-xxs">
+      <div className="grid-3-columns gapped">
+        <Text className="bold">{t('selectedPartialExamsLabel')}</Text>
+        <Text className="bold">Ilmaisia kertoja</Text>
+        <Text className="bold">Hinta</Text>
+      </div>
+      {skills.map((skill, i) => (
+        <div key={i} className="grid-3-columns gapped">
+          <Text>
+            {translateCommon(`enrollment.partialExamsAndSkills.${skill}`)}
+          </Text>
+          {skill != 'understandingSkill' && (
+            <>
+              <Text>3/3</Text>
+              <Text>0&euro;</Text>
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
 
-  const displayBulletList = (
-    label: string,
-    items: Array<string | undefined>,
-  ) => (
+  const displayExamsList = () => (
     <div className="rows gapped-xxs">
       <Text className="bold">
-        {label}
+        {t('selectedSkillsLabel')}
         {':'}
       </Text>
       <ul className="public-enrollment__grid__preview__bullet-list">
-        {items.map((item, i) => (
+        {partialExams.map((skill, i) => (
           <Text key={i}>
-            <li>{item}</li>
+            <li>
+              {translateCommon(`enrollment.partialExamsAndSkills.${skill}`)}
+            </li>
           </Text>
         ))}
       </ul>
@@ -97,8 +111,8 @@ const ExamEventDetails = ({ enrollment }: { enrollment: PublicEnrollment }) => {
   return (
     <div className="rows gapped">
       <H2>{t('title')}</H2>
-      {displayBulletList(t('selectedSkillsLabel'), skills)}
-      {displayBulletList(t('selectedPartialExamsLabel'), partialExams)}
+      {displaySkillsList()}
+      {displayExamsList()}
       <div className="rows gapped-xxs">
         <Text className="bold">
           {t('previousEnrollmentLabel')}

diff --git a/frontend/packages/vkt/src/enums/app.ts b/frontend/packages/vkt/src/enums/app.ts
@@ -49,7 +49,9 @@ export enum UIMode {
 }
 
 export enum EnrollmentStatus {
+  COMPLETED = 'COMPLETED',
   PAID = 'PAID',
+  AWAITING_APPROVAL = 'AWAITING_APPROVAL',
   SHIFTED_FROM_QUEUE = 'SHIFTED_FROM_QUEUE',
   EXPECTING_PAYMENT_UNFINISHED_ENROLLMENT = 'EXPECTING_PAYMENT_UNFINISHED_ENROLLMENT',
   QUEUED = 'QUEUED',

diff --git a/frontend/packages/vkt/src/interfaces/publicEducation.ts b/frontend/packages/vkt/src/interfaces/publicEducation.ts
@@ -0,0 +1,15 @@
+interface Education {
+  allowsFreeEnrollment: boolean;
+  name: string;
+  ongoing: boolean;
+}
+
+interface FreeEnrollments {
+  textualSkill: 0 | 1 | 2 | 3;
+  oralSkill: 0 | 1 | 2 | 3;
+}
+
+export interface PublicEducationDetails {
+  educationHistory: Education[];
+  freeEnrollments: FreeEnrollments;
+}
diff --git a/frontend/packages/vkt/src/interfaces/publicEnrollment.ts b/frontend/packages/vkt/src/interfaces/publicEnrollment.ts
@@ -5,6 +5,7 @@ import {
   CertificateShippingData,
   PartialExamsAndSkills,
 } from 'interfaces/common/enrollment';
+import { PublicEducationDetails } from 'interfaces/publicEducation';
 import { PublicExamEventResponse } from 'interfaces/publicExamEvent';
 import { PublicPerson } from 'interfaces/publicPerson';
 import { WithId } from 'interfaces/with';
@@ -48,6 +49,7 @@ export interface PublicEnrollment
   examEventId?: number;
   hasPaymentLink?: boolean;
   isFree?: boolean;
+  education?: PublicEducationDetails;
 }
 
 export interface PublicEnrollmentResponse

diff --git a/frontend/packages/vkt/src/utils/enrollment.ts b/frontend/packages/vkt/src/utils/enrollment.ts
@@ -1,5 +1,6 @@
 import { StringUtils } from 'shared/utils';
 
+import { EnrollmentStatus } from 'enums/app';
 import {
   CertificateShippingData,
   PartialExamsAndSkills,
@@ -45,6 +46,14 @@ export class EnrollmentUtils {
     );
   }
 
+  static isPaymentRequired(enrollment: PublicEnrollment) {
+    return (
+      enrollment.status == EnrollmentStatus.SHIFTED_FROM_QUEUE ||
+      enrollment.status ==
+        EnrollmentStatus.EXPECTING_PAYMENT_UNFINISHED_ENROLLMENT
+    );
+  }
+
   static isValidCertificateShipping(shippingData: CertificateShippingData) {
     const isAddressFieldsFilled = [
       shippingData.street,

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2687,7 +2687,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].6":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].7":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -2698,7 +2698,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.vkt@workspace:packages/vkt"
   dependencies:
     reduxjs-toolkit-persist: "npm:^7.2.1"
-    shared: "npm:@opetushallitus/[email protected].5"
+    shared: "npm:@opetushallitus/[email protected].7"
   languageName: unknown
   linkType: soft
 
@@ -11789,6 +11789,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shared@npm:@opetushallitus/[email protected]":
+  version: 1.10.6
+  resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@npm:1.10.6::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40Opetushallitus%2Fkieli-ja-kaantajatutkinnot.shared%2F1.10.6%2F138bc1d046232b00fa0483033d1827141dfe7171"
+  checksum: 6f58ec1109ff04e01765995be46f88e64d419335f5aa67e39bcc710e01fe286ef760385ed49eba05322ab72860cd47ec6917bae66a801953a573c5bbed9230ce
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"