VKT(Frontend): OPHVKTKEH-205 viewing payment fail or done steps witho…

…ut existing enrollment blocked

frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepContents.tsx

@@ -1,10 +1,14 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+
 import { Authenticate } from 'components/publicEnrollment/steps/Authenticate';
 import { Done } from 'components/publicEnrollment/steps/Done';
 import { FillContactDetails } from 'components/publicEnrollment/steps/FillContactDetails';
 import { PaymentFail } from 'components/publicEnrollment/steps/PaymentFail';
 import { PaymentSuccess } from 'components/publicEnrollment/steps/PaymentSuccess';
 import { Preview } from 'components/publicEnrollment/steps/Preview';
 import { SelectExam } from 'components/publicEnrollment/steps/SelectExam';
+import { AppRoutes } from 'enums/app';
 import { PublicEnrollmentFormStep } from 'enums/publicEnrollment';
 import { PublicEnrollment } from 'interfaces/publicEnrollment';
 import { PublicExamEvent } from 'interfaces/publicExamEvent';
@@ -26,6 +30,14 @@ export const PublicEnrollmentStepContents = ({
   showValidation: boolean;
   examEvent: PublicExamEvent;
 }) => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (activeStep >= PublicEnrollmentFormStep.Payment && !enrollment.id) {
+      navigate(AppRoutes.PublicHomePage);
+    }
+  }, [activeStep, enrollment.id, navigate]);
+
   switch (activeStep) {
     case PublicEnrollmentFormStep.Authenticate:
       return <Authenticate examEvent={examEvent} />;