open access denied dialong on 403

src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx

+import Link from 'next/link';
+import React from 'react';
+
+export const AccessDeniedModal: React.FC = () => {
+  return (
+    <div className="w-[400px] border border-t-[#E1E0E6] bg-white p-[24px]">
+      <div className="mb-10 text-right">
+        <Link href="/" className="ml-auto text-xs">
+          Contact admin
+        </Link>
+      </div>
+    </div>
+  );
+};

src/components/FunctionalArea/Modal/Modal.component.tsx

 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { modalSelector } from '@/redux/modal/modal.selector';
 import dynamic from 'next/dynamic';
+import { AccessDeniedModal } from '@/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component';
 import { EditOverlayModal } from './EditOverlayModal';
 import { LoginModal } from './LoginModal';
 import { ErrorReportModal } from './ErrorReportModal';
@@ -50,6 +51,11 @@ export const Modal = (): React.ReactNode => {
           <LoggedInMenuModal />
         </ModalLayout>
       )}
+      {isOpen && modalName === 'access-denied' && (
+        <ModalLayout>
+          <AccessDeniedModal />
+        </ModalLayout>
+      )}
     </>
   );
 };

src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx

@@ -28,6 +28,7 @@ export const ModalLayout = ({ children }: ModalLayoutProps): JSX.Element => {
           className={twMerge(
             'flex h-5/6 w-10/12	flex-col	overflow-hidden rounded-lg',
             modalName === 'login' && 'h-auto w-[400px]',
+            modalName === 'access-denied' && 'h-auto w-[400px]',
             modalName === 'error-report' && 'h-auto w-[800px]',
             ['edit-overlay', 'logged-in-menu'].includes(modalName) && 'h-auto w-[432px]',
           )}

src/redux/middlewares/error.middleware.test.ts

 import { store } from '@/redux/store';
-import { showToast } from '@/utils/showToast';
+
 import { errorMiddlewareListener } from './error.middleware';
 
 jest.mock('../../utils/showToast');
@@ -132,7 +132,7 @@ describe('errorMiddlewareListener', () => {
     );
   });
 
-  it('should toast on access denied', async () => {
+  it('should show modal on access denied', async () => {
     const action = {
       type: 'action/rejected',
       payload: null,
@@ -149,9 +149,10 @@ describe('errorMiddlewareListener', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     await errorMiddlewareListener(action, { getState, dispatch });
-    expect(showToast).toHaveBeenCalledWith({
-      message: 'Access denied.',
-      type: 'error',
-    });
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'modal/openAccessDeniedModal',
+      }),
+    );
   });
 });

src/redux/middlewares/error.middleware.ts

 import type { AppListenerEffectAPI, AppStartListening } from '@/redux/store';
 import { Action, createListenerMiddleware, isRejected } from '@reduxjs/toolkit';
 import { createErrorData } from '@/utils/error-report/errorReporting';
-import { openErrorReportModal } from '@/redux/modal/modal.slice';
-import { showToast } from '@/utils/showToast';
+import { openAccessDeniedModal, openErrorReportModal } from '@/redux/modal/modal.slice';
 
 export const errorListenerMiddleware = createListenerMiddleware();
 
@@ -14,10 +13,7 @@ export const errorMiddlewareListener = async (
 ): Promise<void> => {
   if (isRejected(action) && action.type !== 'user/getSessionValid/rejected') {
     if (action.error.code === '403') {
-      showToast({
-        type: 'error',
-        message: 'Access denied.',
-      });
+      dispatch(openAccessDeniedModal());
     } else {
       const errorData = await createErrorData(action.error, getState());
       dispatch(openErrorReportModal(errorData));

src/redux/modal/modal.reducers.ts

@@ -61,6 +61,12 @@ export const openErrorReportModalReducer = (
   };
 };
 
+export const openAccessDeniedModalReducer = (state: ModalState): void => {
+  state.isOpen = true;
+  state.modalName = 'access-denied';
+  state.modalTitle = 'Access denied!';
+};
+
 export const setOverviewImageIdReducer = (
   state: ModalState,
   action: PayloadAction<number>,

src/redux/modal/modal.slice.ts

@@ -11,6 +11,7 @@ import {
   openEditOverlayModalReducer,
   openLoggedInMenuModalReducer,
   openErrorReportModalReducer,
+  openAccessDeniedModalReducer,
 } from './modal.reducers';
 
 const modalSlice = createSlice({
@@ -27,6 +28,7 @@ const modalSlice = createSlice({
     openEditOverlayModal: openEditOverlayModalReducer,
     openLoggedInMenuModal: openLoggedInMenuModalReducer,
     openErrorReportModal: openErrorReportModalReducer,
+    openAccessDeniedModal: openAccessDeniedModalReducer,
   },
 });
 
@@ -41,6 +43,7 @@ export const {
   openEditOverlayModal,
   openLoggedInMenuModal,
   openErrorReportModal,
+  openAccessDeniedModal,
 } = modalSlice.actions;
 
 export default modalSlice.reducer;

src/types/modal.ts

@@ -6,4 +6,5 @@ export type ModalName =
   | 'publications'
   | 'edit-overlay'
   | 'error-report'
+  | 'access-denied'
   | 'logged-in-menu';