update restricted page

Author: vas3a

src/apps/learn/src/config/learn.brooke.config.ts

@@ -24,13 +24,9 @@ const RestrictedRoute: FC<RestrictedRouteProps> = props => {
     // check the user's roles, allow access or show restricted page
     if (!!profile) {
         if (props.rolesRequired) {
-            if (!profile.roles) {
-                return RestrictedPage
-            }
-
             // if the profile doesn't include all the required roles, show the restricted page
-            if (props.rolesRequired.some(role => !profile.roles.includes(role))) {
-                return RestrictedPage
+            if (!profile.roles || props.rolesRequired.some(role => !profile.roles.includes(role))) {
+                return <RestrictedPage />
             }
 
             return props.children

src/libs/core/lib/router/restricted.route.tsx

@@ -1,11 +1,25 @@
-import { ReactElement } from 'react'
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { Dispatch, FC, MouseEvent, SetStateAction, useState } from 'react'
 
 import { ContentLayout } from '~/libs/ui'
 
+import { ContactSupportModal } from '../../../components'
+
 import styles from './RestrictedPage.module.scss'
 
-export const RestrictedPage: ReactElement
-    = (
+export const RestrictedPage: FC<{}> = () => {
+    const [showSupportModal, setShowSupportModal]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+
+    function openSupportModal(e: MouseEvent<HTMLAnchorElement>): void {
+        e.preventDefault()
+        setShowSupportModal(true)
+    }
+
+    function closeSupportModal(): void {
+        setShowSupportModal(false)
+    }
+
+    return (
         <ContentLayout
             contentClass={styles.contentLayout}
             outerClass={styles['contentLayout-outer']}
@@ -15,9 +29,21 @@ export const RestrictedPage: ReactElement
             <div className={styles.container}>
                 <p>
                     Unfortunately, you are not permitted to access the site. If you feel you should be able to, please
-                    <a href='/support'> contact us</a>
+                    {' '}
+                    <a
+                        href='#support'
+                        onClick={openSupportModal}
+                    >
+                        contact us
+                    </a>
                     .
                 </p>
             </div>
+
+            <ContactSupportModal
+                isOpen={showSupportModal}
+                onClose={closeSupportModal}
+            />
         </ContentLayout>
     )
+}