diff --git a/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx b/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx index 3b0b9333593e3549154be0e9d155ca2a1f84ee7b..970bff0918b127ad017b8a715e053087ff64ca2d 100644 --- a/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx +++ b/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx @@ -1,14 +1,47 @@ -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> ); }; diff --git a/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx b/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx index 044fc845bb65d2e80db95ab31efda249ec881750..b2630c627897de41145ede1fe6c00a52df95bc10 100644 --- a/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx +++ b/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"> diff --git a/src/constants/common.ts b/src/constants/common.ts index c3a1b1d09a4c675a5cca281cd1a02f33515bb2bd..9bdcd6487cb3cd51ff146c5a2d60796ddccb4c99 100644 --- a/src/constants/common.ts +++ b/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;