Merge pull request #628 from Opetushallitus/feature/OPHYKIKEH-327

YKI(Frontend): OPHYKIKEH-327 Parempi virheenkäsittely jonoon ilmoittautuessa
Opetushallitus · Jan 16, 2024 · 0a54a91 · 0a54a91
2 parents 365e8cd + e535b41
commit 0a54a91
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 36 deletions.
diff --git a/frontend/packages/yki/public/i18n/en-GB/public.json b/frontend/packages/yki/public/i18n/en-GB/public.json
@@ -108,13 +108,17 @@
               "description": "You have already subscribed for notifications of available seats.",
               "title": "Subscription failed"
             },
-            "genericError": {
-              "description": "An unexpected error occurred. Please try again.",
+            "fullQueue": {
+              "description": "You can no longer subscribe for notifications for this test. The maximum number of subscribers is 50.",
               "title": "Subscription failed"
             },
             "inputError": {
               "description": "Verify your email address",
               "title": "Invalid information!"
+            },
+            "unknown": {
+              "description": "An unexpected error occurred. Please try again.",
+              "title": "Subscription failed"
             }
           },
           "header": "Subscribe to notifications of available seats",

diff --git a/frontend/packages/yki/public/i18n/fi-FI/public.json b/frontend/packages/yki/public/i18n/fi-FI/public.json
@@ -108,13 +108,17 @@
               "description": "Olet jo aiemmin tilannut ilmoituksen peruutuspaikoista sähköpostiisi.",
               "title": "Ilmoituksen tilaaminen ei onnistunut"
             },
-            "genericError": {
-              "description": "Tapahtui odottamaton virhe. Voit yrittää uudelleen.",
+            "fullQueue": {
+              "description": "Et voi enää tilata ilmoituksia tästä tutkinnosta. Tilaajia voi olla enintään 50.",
               "title": "Ilmoituksen tilaaminen ei onnistunut"
             },
             "inputError": {
               "description": "Tarkista antamasi sähköpostiosoite.",
               "title": "Tiedoissa on korjattavaa!"
+            },
+            "unknown": {
+              "description": "Tapahtui odottamaton virhe. Voit yrittää uudelleen.",
+              "title": "Ilmoituksen tilaaminen ei onnistunut"
             }
           },
           "header": "Tilaa ilmoitus peruutuspaikoista",

diff --git a/frontend/packages/yki/public/i18n/sv-SE/public.json b/frontend/packages/yki/public/i18n/sv-SE/public.json
@@ -108,13 +108,17 @@
               "description": "Du har redan tidigare beställt en notifiering om lediga platser vid examenstillfället till din e-post.",
               "title": "Beställningen misslyckades"
             },
-            "genericError": {
-              "description": "Ett oväntat fel har uppstått. Vänligen försök på nytt.",
+            "fullQueue": {
+              "description": "Du kan inte längre beställa en notifiering om det här examenstillfället. Högst 50 personer kan beställa en notifiering.",
               "title": "Beställningen misslyckades"
             },
             "inputError": {
               "description": "Kontrollera din e-postadress",
               "title": "Felaktiga uppgifter!"
+            },
+            "unknown": {
+              "description": "Ett oväntat fel har uppstått. Vänligen försök på nytt.",
+              "title": "Beställningen misslyckades"
             }
           },
           "header": "Beställ en notifiering om lediga platser",

diff --git a/frontend/packages/yki/src/components/registration/EnrollToQueue.tsx b/frontend/packages/yki/src/components/registration/EnrollToQueue.tsx
@@ -43,35 +43,24 @@ const getConfirmEmailError = (email: string, confirmEmail: string) => {
 
 const useDialogOnError = () => {
   const { showDialog } = useDialog();
-  const { status, emailAlreadyQueued } = useAppSelector(reservationSelector);
+  const { status, errorCause } = useAppSelector(reservationSelector);
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.component.registration.enrollToQueue.dialog',
   });
   const translateCommon = useCommonTranslation();
 
   useEffect(() => {
     if (status === APIResponseStatus.Error) {
-      if (emailAlreadyQueued) {
-        showDialog({
-          title: t('emailAlreadyQueued.title'),
-          description: t('emailAlreadyQueued.description'),
-          severity: Severity.Info,
-          actions: [
-            { title: translateCommon('back'), variant: Variant.Contained },
-          ],
-        });
-      } else {
-        showDialog({
-          title: t('genericError.title'),
-          description: t('genericError.description'),
-          severity: Severity.Error,
-          actions: [
-            { title: translateCommon('back'), variant: Variant.Contained },
-          ],
-        });
-      }
+      showDialog({
+        title: t(`${errorCause}.title`),
+        description: t(`${errorCause}.description`),
+        severity: Severity.Info,
+        actions: [
+          { title: translateCommon('back'), variant: Variant.Contained },
+        ],
+      });
     }
-  }, [emailAlreadyQueued, showDialog, status, t, translateCommon]);
+  }, [errorCause, showDialog, status, t, translateCommon]);
 };
 
 export const EnrollToQueue = () => {
@@ -174,7 +163,11 @@ export const EnrollToQueue = () => {
   );
 
   useEffect(() => {
-    dispatch(resetReservationRequest());
+    const cleanUp = () => {
+      dispatch(resetReservationRequest());
+    };
+
+    return cleanUp;
   }, [dispatch]);
 
   useDialogOnError();

diff --git a/frontend/packages/yki/src/interfaces/reservation.ts b/frontend/packages/yki/src/interfaces/reservation.ts
@@ -2,3 +2,14 @@ export interface ReservationRequest {
   email: string;
   examSessionId: number;
 }
+
+export interface ReservationErrorResponse {
+  exists: boolean;
+  full: boolean;
+}
+
+export enum ReservationErrorCause {
+  EmailAlreadyQueued = 'emailAlreadyQueued',
+  FullQueue = 'fullQueue',
+  Unknown = 'unknown',
+}
diff --git a/frontend/packages/yki/src/redux/reducers/reservation.ts b/frontend/packages/yki/src/redux/reducers/reservation.ts
@@ -1,16 +1,18 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { APIResponseStatus } from 'shared/enums';
 
-import { ReservationRequest } from 'interfaces/reservation';
+import {
+  ReservationErrorCause,
+  ReservationRequest,
+} from 'interfaces/reservation';
 
 interface ReservationState extends Partial<ReservationRequest> {
   status: APIResponseStatus;
-  emailAlreadyQueued: boolean;
+  errorCause?: ReservationErrorCause;
 }
 
 const initialState: ReservationState = {
   status: APIResponseStatus.NotStarted,
-  emailAlreadyQueued: false,
 };
 
 const reservationSlice = createSlice({
@@ -20,15 +22,19 @@ const reservationSlice = createSlice({
     acceptReservationRequest(state) {
       state.status = APIResponseStatus.Success;
     },
-    rejectReservationRequest(state, action: PayloadAction<boolean>) {
+    rejectReservationRequest(
+      state,
+      action: PayloadAction<ReservationErrorCause>
+    ) {
       state.status = APIResponseStatus.Error;
-      state.emailAlreadyQueued = action.payload;
+      state.errorCause = action.payload;
     },
     resetReservationRequest(_) {
       return initialState;
     },
     sendReservationRequest(state, action: PayloadAction<ReservationRequest>) {
       state.status = APIResponseStatus.InProgress;
+      state.errorCause = undefined;
       state.email = action.payload.email;
       state.examSessionId = action.payload.examSessionId;
     },

diff --git a/frontend/packages/yki/src/redux/sagas/reservation.ts b/frontend/packages/yki/src/redux/sagas/reservation.ts
@@ -5,7 +5,11 @@ import { call, put, takeLatest } from 'redux-saga/effects';
 import axiosInstance from 'configs/axios';
 import { getCurrentLang } from 'configs/i18n';
 import { APIEndpoints } from 'enums/api';
-import { ReservationRequest } from 'interfaces/reservation';
+import {
+  ReservationErrorCause,
+  ReservationErrorResponse,
+  ReservationRequest,
+} from 'interfaces/reservation';
 import {
   acceptReservationRequest,
   rejectReservationRequest,
@@ -32,9 +36,15 @@ function* sendReservationRequestSaga(
     yield put(acceptReservationRequest());
   } catch (error) {
     if (axios.isAxiosError(error) && error.response) {
-      yield put(rejectReservationRequest(!!error.response.data));
+      const errorResponse = error.response.data as ReservationErrorResponse;
+      const errorCause = errorResponse.exists
+        ? ReservationErrorCause.EmailAlreadyQueued
+        : errorResponse.full
+        ? ReservationErrorCause.FullQueue
+        : ReservationErrorCause.Unknown;
+      yield put(rejectReservationRequest(errorCause));
     } else {
-      yield put(rejectReservationRequest(false));
+      yield put(rejectReservationRequest(ReservationErrorCause.Unknown));
     }
   }
 }