Merge pull request #4838 from OneCommunityGlobal/fix/pr-analytics-friendly-error

Sai Teja: Fix PR Analytics broken page – Add contextual error handling

Author: one-community

src/components/NotFound/NotFoundPage.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable prettier/prettier */
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import cn from 'classnames';
 import styles from './NotFoundPage.module.css';
@@ -10,30 +10,50 @@ import NotFoundDarkImage from '../../assets/images/404ImageDarkMode1.png';
 
 function NotFoundPage() {
   const darkMode = useSelector(state => state.theme.darkMode);
+  const location = useLocation();
+
+  const isPrAnalytics = location.pathname.startsWith('/pr-dashboard');
 
   return (
-    <div className={cn(styles.notFoundContainer, darkMode ? cn(styles.darkMode) : '')}>
+    <div
+      className={cn(styles.notFoundContainer, darkMode ? cn(styles.darkMode, styles.bgBlack) : '')}
+    >
       <div
         className={styles.notFoundContent}
         //prettier-ignore
-        style={{border: `2px solid ${darkMode ? `#f1f1f1` : `#333`}`}}
+        style={{border: `2px solid ${darkMode ? '#f1f1f1' : '#333'}`}}
       >
         <img
           className={styles.notFoundImage}
           src={darkMode ? NotFoundDarkImage : NotFoundImage}
           alt="Page Not Found"
         />
         <div className={styles.notFoundText}>
-          <h1 className={darkMode ? `text-light` : `text-dark`}>PAGE NOT FOUND</h1>
-          <p className={darkMode ? `text-light` : `text-dark`}>
-            The rabbits have been nibbling the cables again...
-          </p>
-          <p className={darkMode ? `text-light` : `text-dark`}>
-            Maybe this will help{' '}
-            <Link to="/" className={styles.backHomeLink}>
-              Home
-            </Link>
-          </p>
+          {isPrAnalytics ? (
+            <>
+              <h1>PR ANALYTICS UNAVAILABLE</h1>
+              <p>PR Analytics is temporarily unavailable.</p>
+              <p>Please try again later or contact an administrator.</p>
+              <p>
+                <Link to="/reports" className={styles.backHomeLink}>
+                  Go to Reports Dashboard
+                </Link>
+              </p>
+            </>
+          ) : (
+            <>
+              <h1 className={darkMode ? `text-light` : `text-dark`}>PAGE NOT FOUND</h1>
+              <p className={darkMode ? `text-light` : `text-dark`}>
+                The rabbits have been nibbling the cables again...
+              </p>
+              <p className={darkMode ? `text-light` : `text-dark`}>
+                Maybe this will help{' '}
+                <Link to="/" className={styles.backHomeLink}>
+                  Home
+                </Link>
+              </p>
+            </>
+          )}
         </div>
       </div>
     </div>