YKI(Frontend): If registration init fails to auth error, set stepper …

…state to Identify
Opetushallitus · Mar 12, 2024 · bc1c6c2 · bc1c6c2
1 parent 9802be2
commit bc1c6c2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/frontend/packages/yki/src/components/registration/PublicRegistrationGrid.tsx b/frontend/packages/yki/src/components/registration/PublicRegistrationGrid.tsx
@@ -1,6 +1,6 @@
 import { Grid, Paper } from '@mui/material';
 import { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import {
   H1,
   H2,
@@ -26,13 +26,14 @@ import { registrationSelector } from 'redux/selectors/registration';
 
 const RegistrationForm = () => {
   const dispatch = useAppDispatch();
-  const { status: initRegistrationStatus, examSessionId } =
+  const { status: initRegistrationStatus } =
     useAppSelector(registrationSelector).initRegistration;
   const { status: submitFormStatus } =
     useAppSelector(registrationSelector).submitRegistration;
   const { examSession, status: examSessionStatus } =
     useAppSelector(examSessionSelector);
   const [searchParams] = useSearchParams();
+  const params = useParams();
 
   useEffect(() => {
     if (
@@ -44,10 +45,15 @@ const RegistrationForm = () => {
     }
   });
   useEffect(() => {
-    if (!examSession && examSessionStatus === APIResponseStatus.NotStarted) {
-      dispatch(loadExamSession(examSessionId as number));
+    if (
+      !examSession &&
+      examSessionStatus === APIResponseStatus.NotStarted &&
+      params.examSessionId &&
+      !isNaN(Number(params.examSessionId))
+    ) {
+      dispatch(loadExamSession(+params.examSessionId));
     }
-  }, [dispatch, examSession, examSessionId, examSessionStatus]);
+  }, [dispatch, examSession, params.examSessionId, examSessionStatus]);
 
   if (submitFormStatus === APIResponseStatus.Success) {
     return (
@@ -117,8 +123,14 @@ const ShowPaymentStatus = () => {
 
 const StepContentSelector = () => {
   const { activeStep } = useAppSelector(registrationSelector);
+  const { status: initRegistrationStatus } =
+    useAppSelector(registrationSelector).initRegistration;
 
   switch (activeStep) {
+    case PublicRegistrationFormStep.Identify:
+      if (initRegistrationStatus === APIResponseStatus.Error) {
+        return <PublicRegistrationInitErrorView />;
+      }
     case PublicRegistrationFormStep.Register:
       return <RegistrationForm />;
     case PublicRegistrationFormStep.Done:
@@ -142,13 +154,16 @@ const Heading = () => {
   });
 
   if (activeStep === PublicRegistrationFormStep.Register) {
-    if (initRegistrationError) {
-      return t(`unavailable.${initRegistrationError}.title`);
-    } else if (submitFormStatus === APIResponseStatus.Success) {
+    if (submitFormStatus === APIResponseStatus.Success) {
       return t('steps.register.success.heading');
     } else {
       return t('steps.register.inProgress.heading');
     }
+  } else if (
+    activeStep === PublicRegistrationFormStep.Identify &&
+    initRegistrationError
+  ) {
+    return t(`unavailable.${initRegistrationError}.title`);
   } else {
     switch (paymentStatus) {
       case PaymentStatus.Success:

diff --git a/frontend/packages/yki/src/components/registration/PublicRegistrationStepper.tsx b/frontend/packages/yki/src/components/registration/PublicRegistrationStepper.tsx
@@ -12,7 +12,7 @@ import { registrationSelector } from 'redux/selectors/registration';
 
 export const PublicRegistrationStepper = () => {
   const { activeStep } = useAppSelector(registrationSelector);
-  const { status: initRegistrationStatus } =
+  const { status: initRegistrationStatus, error: initRegistrationError } =
     useAppSelector(registrationSelector).initRegistration;
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.component.registration.stepper',
@@ -27,7 +27,9 @@ export const PublicRegistrationStepper = () => {
     (activeStep === PublicRegistrationFormStep.Done &&
       paymentStatus !== PaymentStatus.Success) ||
     (activeStep === PublicRegistrationFormStep.Register &&
-      initRegistrationStatus === APIResponseStatus.Error);
+      initRegistrationStatus === APIResponseStatus.Error) ||
+    (activeStep === PublicRegistrationFormStep.Identify &&
+      initRegistrationError);
 
   const doneStepNumber = PublicRegistrationFormStep.Done;
 

diff --git a/frontend/packages/yki/src/redux/reducers/registration.ts b/frontend/packages/yki/src/redux/reducers/registration.ts
@@ -84,6 +84,7 @@ const registrationSlice = createSlice({
         } else if (action.payload.status === 401) {
           state.initRegistration.error =
             PublicRegistrationInitError.Unauthorized;
+          state.activeStep = PublicRegistrationFormStep.Identify;
         } else {
           state.initRegistration.error = PublicRegistrationInitError.Generic;
         }