Merge pull request #279 from map-of-pi/feature/navbar-alerts

swoocn · web-flow · commit 4b1e60ea76af · 2024-10-24T22:45:49.000-04:00
Approved (1).
diff --git a/context/AppContextProvider.tsx b/context/AppContextProvider.tsx
@@ -26,6 +26,8 @@ interface IAppContextProps {
   autoLoginUser: ()=> void;
   isSigningInUser: boolean;
   reload: boolean;
+  alertMessage: string | null;
+  showAlert: (message: string) => void;
   setReload: React.Dispatch<SetStateAction<boolean>>;
 }
 
@@ -36,6 +38,8 @@ const initialState: IAppContextProps = {
   autoLoginUser: ()=> {},
   isSigningInUser: false,
   reload: false,
+  alertMessage: null,
+  showAlert: () => {},
   setReload: () => {},
 };
 
@@ -51,6 +55,15 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
   const [isSigningInUser, setIsSigningInUser] = useState(false);
   const [reload, setReload] = useState(false);
 
+  const [alertMessage, setAlertMessage] = useState<string | null>(null);
+
+  const showAlert = (message: string) => {
+    setAlertMessage(message);
+    setTimeout(() => {
+      setAlertMessage(null); // Clear alert after 5 seconds
+    }, 5000);
+  };
+
   const registerUser = async () => {
     logger.info('Initializing Pi SDK for user registration.');
     await Pi.init({ version: '2.0', sandbox: process.env.NODE_ENV === 'development' });
@@ -116,7 +129,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
   }, []);
 
   return (
-    <AppContext.Provider value={{ currentUser, setCurrentUser, registerUser, autoLoginUser, isSigningInUser, reload, setReload }}>
+    <AppContext.Provider value={{ currentUser, setCurrentUser, registerUser, autoLoginUser, isSigningInUser, reload, setReload, showAlert, alertMessage }}>
       {children}
     </AppContext.Provider>
   );
diff --git a/messages/en-GB.json b/messages/en-GB.json
@@ -30,8 +30,8 @@
     },
     "CONTACT_MAP_OF_PI": "Contact Map of Pi",
     "VALIDATION": {
-      "SUCCESSFUL_PREFERENCES_SUBMISSION": "User Preferences update successful",
-      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "User Preferences update failed"
+      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Preferences successful",
+      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "Error saving preferences"
     }
   },
   "SCREEN": {
@@ -62,7 +62,8 @@
       "SELLER_SELL_CENTER": "Set Sell Centre",
       "VALIDATION": {
         "EMAIL_VALIDATION": "Please enter a valid email address",
-        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Seller Registration submitted successfully",
+        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Registration successful",
+        "FAILED_REGISTRATION_SUBMISSION": "Error saving registration",
         "REGISTRATION_FAILED_USER_NOT_AUTHENTICATED": "Registration failed because user is not authenticated",
         "UNINITIALIZED_SELL_CENTER": "Please set your Sell Centre"
       }
@@ -246,7 +247,7 @@
         "SEARCH_CENTER_SUCCESS_MESSAGE": "Your Search Centre has been saved successfully"
       }
     },
-    "LOADING_SCREEN_MESSAGE": "Loading data...",
+    "LOADING_SCREEN_MESSAGE": "Loading ...",
     "VALIDATION": {
       "SUBMISSION_FAILED_USER_NOT_AUTHENTICATED": "Submission failed because user is not authenticated",
       "UNEXPECTED_ERROR_MESSAGE": "Unexpected error occurred"  
diff --git a/messages/en.json b/messages/en.json
@@ -30,8 +30,8 @@
     },
     "CONTACT_MAP_OF_PI": "Contact Map of Pi",
     "VALIDATION": {
-      "SUCCESSFUL_PREFERENCES_SUBMISSION": "User Preferences update successful",
-      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "User Preferences update failed"
+      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Preferences successful",
+      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "Error saving preferences"
     }
   },
   "SCREEN": {
@@ -62,7 +62,8 @@
       "SELLER_SELL_CENTER": "Set Sell Center",
       "VALIDATION": {
         "EMAIL_VALIDATION": "Please enter a valid email address",
-        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Seller Registration submitted successfully",
+        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Registration successful",
+        "FAILED_REGISTRATION_SUBMISSION": "Error saving registration",
         "REGISTRATION_FAILED_USER_NOT_AUTHENTICATED": "Registration failed because user is not authenticated",
         "UNINITIALIZED_SELL_CENTER": "Please set your Sell Center"
       }
@@ -235,7 +236,7 @@
         "SELL_CENTER_SUCCESS_MESSAGE": "Your Sell Center has been saved successfully"
       }
     },
-    "LOADING_SCREEN_MESSAGE": "Loading data...",
+    "LOADING_SCREEN_MESSAGE": "Loading ...",
     "VALIDATION": {
       "SUBMISSION_FAILED_USER_NOT_AUTHENTICATED": "Submission failed because user is not authenticated",
       "UNEXPECTED_ERROR_MESSAGE": "Unexpected error occurred"
diff --git a/messages/es.json b/messages/es.json
@@ -30,8 +30,8 @@
     },
     "CONTACT_MAP_OF_PI": "Contactar a Map of Pi",
     "VALIDATION": {
-      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Actualización de preferencias del usuario exitosa",
-      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "La actualización de las preferencias del usuario falló"
+      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Preferencias guardadas con éxito",
+      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "Error al guardar las preferencias"
     }
   },
   "SCREEN": {
@@ -62,7 +62,8 @@
       "SELLER_SELL_CENTER": "Establecer Centro de Venta",
       "VALIDATION": {
         "EMAIL_VALIDATION": "Por favor, ingresa una dirección de correo electrónico válida",
-        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Registro de vendedor enviado con éxito",
+        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Registro exitoso",
+        "FAILED_REGISTRATION_SUBMISSION": "Error al guardar el registro",
         "REGISTRATION_FAILED_USER_NOT_AUTHENTICATED": "El registro falló porque el usuario no está autenticado",
         "UNINITIALIZED_SELL_CENTER": "Por favor, establezca su Centro de Venta"
       }
@@ -233,7 +234,7 @@
         "SEARCH_CENTER_SUCCESS_MESSAGE": "Tu centro de búsqueda se ha guardado correctamente"
       }
     },
-    "LOADING_SCREEN_MESSAGE": "Cargando datos...",
+    "LOADING_SCREEN_MESSAGE": "Cargando ...",
     "VALIDATION": {
       "SUBMISSION_FAILED_USER_NOT_AUTHENTICATED": "El envío falló porque el usuario no está autenticado",
       "UNEXPECTED_ERROR_MESSAGE": "Ocurrió un error inesperado"
diff --git a/messages/ewe-BJ.json b/messages/ewe-BJ.json
@@ -30,8 +30,8 @@
     },
     "CONTACT_MAP_OF_PI": "Wò Map of Pi me",
     "VALIDATION": {
-      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Nuŋlɔdodoawo ƒe se se yia ɖe asi me",
-      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "Nusrɔkɔdɔ togbɔna mewɔna o"
+      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Etsɔnyɛ nufiala nɔe o",
+      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "Nufiala menɔa wo nɛ gbɔna o"
     }
   },
   "SCREEN": {
@@ -62,7 +62,8 @@
       "SELLER_SELL_CENTER": "Nàƒé Wòkpɔ̃nɔnyewo",
       "VALIDATION": {
         "EMAIL_VALIDATION": "Metsɔ ema aɖeke wɔna le ŋgɔ le eme",
-        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Nyatakɔɖu nàtsoɖe tɔ wòɖé yèna nyuie",
+        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Nukplɔla nɔa gbedodo",
+        "FAILED_REGISTRATION_SUBMISSION": "Kplɔla menɔa wo nɛ gbɔna o",
         "REGISTRATION_FAILED_USER_NOT_AUTHENTICATED": "Nɔviɖewɔwɔ na mi kplɔ nɛ ƒe viwo nɔ anyi nyɔnu ƒe ŋu nɔ anyi",
         "UNINITIALIZED_SELL_CENTER": "Mɛnya ɖe gbe na wo trɔtrɔ wo fiawo tso me"
       }
@@ -233,7 +234,7 @@
         "SEARCH_CENTER_SUCCESS_MESSAGE": "Nye dzi tsɔtɔ wɔm o"
       }
     },
-    "LOADING_SCREEN_MESSAGE": "Ɣe siwo...",
+    "LOADING_SCREEN_MESSAGE": "Gɔme ɖa ...",
     "VALIDATION": {
       "SUBMISSION_FAILED_USER_NOT_AUTHENTICATED": "Nɔvia míaɖu abe nu wò ye mele wònu o le fifiawo nyo",
       "UNEXPECTED_ERROR_MESSAGE": "Nuxlɔ̃sia na mi ɖe mɔ o"
diff --git a/messages/hau-NG.json b/messages/hau-NG.json
@@ -30,8 +30,8 @@
     },
     "CONTACT_MAP_OF_PI": "Tuntubi Map of Pi",
     "VALIDATION": {
-      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Sabunta zaɓuɓɓukan mai amfani ya yi nasara",
-      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "Sabuntawar zaɓuɓɓukan mai amfani ta gaza"
+      "SUCCESSFUL_PREFERENCES_SUBMISSION": "Zaɓuɓɓuka sun yi nasara",
+      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "Kuskure wajen adana zaɓuɓɓuka"
     }
   },
   "SCREEN": {
@@ -62,7 +62,8 @@
       "SELLER_SELL_CENTER": "Saita Cibiyar Sayarwa",
       "VALIDATION": {
         "EMAIL_VALIDATION": "Don Allah shigar da ingantaccen adireshin imel",
-        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Rijista ta sayarwa ta samu nasara",
+        "SUCCESSFUL_REGISTRATION_SUBMISSION": "Rajista ta yi nasara",
+        "FAILED_REGISTRATION_SUBMISSION": "Kuskure wajen adana rajista",
         "REGISTRATION_FAILED_USER_NOT_AUTHENTICATED": "Rijista ta gaza saboda mai amfani ba a tantance shi ba",
         "UNINITIALIZED_SELL_CENTER": "Da fatan za ku saita cibiyar sayarwarku"
       }
@@ -232,7 +233,7 @@
         "SEARCH_CENTER_SUCCESS_MESSAGE": "An adana Cibiyar Bincike ɗinku cikin nasara"
       }
     },
-    "LOADING_SCREEN_MESSAGE": "Ana ɗaukar bayanai...",
+    "LOADING_SCREEN_MESSAGE": "Ana loda ...",
     "VALIDATION": {
       "SUBMISSION_FAILED_USER_NOT_AUTHENTICATED": "Aika ya kasa saboda mai amfani ba a tabbatar da shi ba",
       "UNEXPECTED_ERROR_MESSAGE": "An samu kuskure da ba a zata ba"
diff --git a/messages/ko.json b/messages/ko.json
@@ -30,8 +30,8 @@
     },
     "CONTACT_MAP_OF_PI": "Map of Pi에 문의",
     "VALIDATION": {
-      "SUCCESSFUL_PREFERENCES_SUBMISSION": "사용자 환경 설정 업데이트 성공",
-      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "사용자 환경 설정 업데이트 실패"
+      "SUCCESSFUL_PREFERENCES_SUBMISSION": "환경 설정이 성공적으로 완료되었습니다",
+      "UNSUCCESSFUL_PREFERENCES_SUBMISSION": "환경 설정 저장 중 오류 발생"
     }
   },
   "SCREEN": {
@@ -62,7 +62,8 @@
       "SELLER_SELL_CENTER": "판매 센터 설정",
       "VALIDATION": {
         "EMAIL_VALIDATION": "유효한 이메일 주소를 입력하세요",
-        "SUCCESSFUL_REGISTRATION_SUBMISSION": "판매자 등록이 성공적으로 제출되었습니다",
+        "SUCCESSFUL_REGISTRATION_SUBMISSION": "등록이 성공적으로 완료되었습니다",
+        "FAILED_REGISTRATION_SUBMISSION": "등록 저장 중 오류 발생",
         "REGISTRATION_FAILED_USER_NOT_AUTHENTICATED": "사용자가 인증되지 않아 등록에 실패했습니다",
         "UNINITIALIZED_SELL_CENTER": "판매 센터를 설정해주세요"
       }
@@ -233,7 +234,7 @@
         "SEARCH_CENTER_SUCCESS_MESSAGE": "검색 센터가 성공적으로 저장되었습니다"
       }
     },
-    "LOADING_SCREEN_MESSAGE": "데이터 로딩 중...",
+    "LOADING_SCREEN_MESSAGE": "로딩 중 ...",
     "VALIDATION": {
       "SUBMISSION_FAILED_USER_NOT_AUTHENTICATED": "제출이 실패했습니다; 사용자가 인증되지 않았습니다",
       "UNEXPECTED_ERROR_MESSAGE": "예기치 않은 오류가 발생했습니다"
diff --git a/src/app/[locale]/seller/registration/page.tsx b/src/app/[locale]/seller/registration/page.tsx
@@ -4,7 +4,6 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState, useEffect, useContext } from 'react';
-import { toast } from 'react-toastify';
 
 import TrustMeter from '@/components/shared/Review/TrustMeter';
 import { OutlineBtn, Button } from '@/components/shared/Forms/Buttons/Buttons';
@@ -33,7 +32,7 @@ const SellerRegistrationForm = () => {
   const t = useTranslations();
   const placeholderSeller = itemData.seller;
 
-  const { currentUser, autoLoginUser } = useContext(AppContext);
+  const { currentUser, autoLoginUser, showAlert } = useContext(AppContext);
 
   type IFormData = {
     sellerName: string;
@@ -217,7 +216,8 @@ const SellerRegistrationForm = () => {
     // Check if user is authenticated and form is valid
     if (!currentUser) {
       logger.warn('Form submission failed: User not authenticated.');
-      return toast.error(t('SHARED.VALIDATION.SUBMISSION_FAILED_USER_NOT_AUTHENTICATED'));
+      showAlert(t('SHARED.VALIDATION.SUBMISSION_FAILED_USER_NOT_AUTHENTICATED'));
+      return;
     }
 
     preFilledFields.forEach(({ fieldName, preFilledTextKey }) => {
@@ -246,14 +246,18 @@ const SellerRegistrationForm = () => {
         setDbSeller(data.seller);
         setIsSaveEnabled(false);
         logger.info('Seller registration saved successfully:', { data });
-        toast.success(t('SCREEN.SELLER_REGISTRATION.VALIDATION.SUCCESSFUL_REGISTRATION_SUBMISSION'));
+        showAlert(t('SCREEN.SELLER_REGISTRATION.VALIDATION.SUCCESSFUL_REGISTRATION_SUBMISSION'));
 
         // Fetch updated user settings
         const updatedUserSettings = await fetchUserSettings();
         setDbUserSettings(updatedUserSettings);
       }
-    } catch (error) {
-      logger.error('Error saving seller registration:', { error });
+    } catch (error: any) {
+      logger.error('Error saving seller registration:', { 
+        message: error.message,
+        stack: error.stack
+      });
+      showAlert(t('SCREEN.SELLER_REGISTRATION.VALIDATION.FAILED_REGISTRATION_SUBMISSION'));
     }
   };
 
diff --git a/src/components/shared/navbar/Navbar.tsx b/src/components/shared/navbar/Navbar.tsx
@@ -6,6 +6,7 @@ import { usePathname, useRouter } from 'next/navigation';
 
 import { useContext, useEffect, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
+import { ImSpinner2 } from 'react-icons/im';
 import { IoMdArrowBack, IoMdClose } from 'react-icons/io';
 import { MdHome } from 'react-icons/md';
 
@@ -22,7 +23,7 @@ function Navbar() {
   const [sidebarToggle, setSidebarToggle] = useState(false);
   const [isHomePage, setIsHomePage] = useState(true);
 
-  const {isSigningInUser, reload} = useContext(AppContext)
+  const {isSigningInUser, reload, alertMessage} = useContext(AppContext)
 
   // check if the current page is the homepage
   useEffect(() => {
@@ -47,46 +48,58 @@ function Navbar() {
 
   return (
     <>
-      <div
-        className={`w-full h-[76.19px] z-500 px-[16px] py-[5px] bg-primary fixed top-0 left-0 right-0 `}>
+      <div className="w-full h-[76.19px] z-500 px-[16px] py-[5px] bg-primary fixed top-0 left-0 right-0">
         <div className="text-center text-secondary text-[1.3rem] whitespace-nowrap">
-          { isSigningInUser || reload ? t('SHARED.LOADING_SCREEN_MESSAGE'): "Map of Pi"}
+          {/* Display alert message with spinner if present, otherwise display 'Map of Pi' */}
+          {alertMessage ? (
+            <div className="alert-message flex items-center justify-center text-[1rem]"> {/* Adjust font size */}
+              <ImSpinner2 className="animate-spin mr-2 ml-1" /> {/* Spinner Icon */}
+              {alertMessage}
+            </div>
+          ) : (
+            isSigningInUser || reload ? (
+              <div className="flex items-center justify-center">
+                <ImSpinner2 className="animate-spin mr-2 ml-1" /> {/* Spinner Icon */}
+                {t('SHARED.LOADING_SCREEN_MESSAGE')}
+              </div>
+            ) : (
+              "Map of Pi"
+            )
+          )}
         </div>
-        <div
-          className="flex justify-between">
+        <div className="flex justify-between">
           <div className={`${styles.nav_item} ${isHomePage && 'disabled'}`}>
             <Link href="/" onClick={handleBackBtn}>
               <IoMdArrowBack size={26} className={`${isHomePage ? 'text-tertiary' : 'text-secondary'}`} />
             </Link>
           </div>
 
-            <div className={`${styles.nav_item} ${isHomePage && 'disabled'}`}>
-              <Link href="/">
-                <MdHome size={24} className={`${isHomePage ? 'text-tertiary' : 'text-secondary'}`} />
-              </Link>
-            </div>
+          <div className={`${styles.nav_item} ${isHomePage && 'disabled'}`}>
+            <Link href="/">
+              <MdHome size={24} className={`${isHomePage ? 'text-tertiary' : 'text-secondary'}`} />
+            </Link>
+          </div>
+
           <div className={`${styles.nav_item}`}>
-          <Link
-            href=""
-            onClick={(e) => {
-              if (isSigningInUser) {
-                e.preventDefault();
-              } else {
-                handleMenu();
-              }
-            }}
-          >
-            {sidebarToggle && !isSigningInUser ? (
-              <IoMdClose size={24} className="text-secondary" />
-            ) : (
-              <FiMenu
-                size={24}
-                className={`${
-                  isSigningInUser ? 'text-tertiary cursor-not-allowed' : 'text-secondary'
-                }`}
-              />
-            )}
-          </Link>
+            <Link
+              href=""
+              onClick={(e) => {
+                if (isSigningInUser) {
+                  e.preventDefault();
+                } else {
+                  handleMenu();
+                }
+              }}
+            >
+              {sidebarToggle && !isSigningInUser ? (
+                <IoMdClose size={24} className="text-secondary" />
+              ) : (
+                <FiMenu
+                  size={24}
+                  className={`${isSigningInUser ? 'text-tertiary cursor-not-allowed' : 'text-secondary'}`}
+                />
+              )}
+            </Link>
           </div>
         </div>
       </div>
diff --git a/src/components/shared/sidebar/sidebar.tsx b/src/components/shared/sidebar/sidebar.tsx
