go back and login button on access denied

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

-import Link from 'next/link';
 import React from 'react';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { loginUserSelector } from '@/redux/user/user.selectors';
+import { openLoginModal } from '@/redux/modal/modal.slice';
+import { MINUS_ONE } from '@/constants/common';
+import { Button } from '@/shared/Button';
 
 export const AccessDeniedModal: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const login = useAppSelector(loginUserSelector);
+
+  const isAnonymousLogin = !login;
+
+  const handleGoBack = async (e: React.FormEvent<HTMLButtonElement>): Promise<void> => {
+    e.preventDefault();
+    window.history.go(MINUS_ONE);
+  };
+
+  const handleLogin = async (e: React.FormEvent<HTMLButtonElement>): Promise<void> => {
+    e.preventDefault();
+    dispatch(openLoginModal());
+  };
+
   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>
+      {isAnonymousLogin && (
+        <div className="grid grid-cols-2 gap-2">
+          <div className="mb-10">
+            <Button
+              className="ring-transparent hover:ring-transparent"
+              variantStyles="secondary"
+              onClick={handleGoBack}
+            >
+              Go back to previous page
+            </Button>
+          </div>
+          <div className="mb-10">
+            <Button className="w-full text-center" onClick={handleLogin}>
+              Login to your account
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -34,13 +34,15 @@ export const ModalLayout = ({ children }: ModalLayoutProps): JSX.Element => {
           )}
         >
           <div className="flex items-center justify-between bg-white p-[24px] text-xl">
-            {modalName === 'error-report' && (
+            {(modalName === 'error-report' || modalName === 'access-denied') && (
               <div className="font-bold text-red-500">
                 <Icon name="info" className={twMerge('mr-4 fill-red-500')} />
                 {modalTitle}
               </div>
             )}
-            {modalName !== 'error-report' && <div> {modalTitle} </div>}
+            {modalName !== 'error-report' && modalName !== 'access-denied' && (
+              <div> {modalTitle} </div>
+            )}
 
             {modalName !== 'logged-in-menu' && (
               <button type="button" onClick={handleCloseModal} aria-label="close button">

src/constants/common.ts

@@ -2,6 +2,8 @@ export const SIZE_OF_EMPTY_ARRAY = 0;
 export const SIZE_OF_ARRAY_WITH_FOUR_ELEMENTS = 4;
 export const SIZE_OF_ARRAY_WITH_ONE_ELEMENT = 1;
 
+export const MINUS_ONE = -1;
+
 export const ZERO = 0;
 export const FIRST_ARRAY_ELEMENT = 0;