Enhance order ID handling and navigation in ProfilePage and OrdersTab: Updated hash processing to validate order IDs, improved tab navigation, and added console logging for better debugging. Adjusted navigation to ensure correct hash updates when switching tabs and viewing orders.

src/App.js

@@ -107,9 +107,13 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (location.hash && location.hash.startsWith("#ORD-")) {
+    if (location.hash && location.hash.length > 1) {
-      if (location.pathname !== "/profile") {
+      // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
-        navigate(`/profile${location.hash}`, { replace: true });
+      const potentialOrderId = location.hash.substring(1);
+      if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
+        if (location.pathname !== "/profile") {
+          navigate(`/profile${location.hash}`, { replace: true });
+        }
       }
     }
   }, [location, navigate]);

src/components/profile/OrdersTab.js

@@ -81,9 +81,11 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
       if (orderToView) {
         setSelectedOrder(orderToView);
         setIsDetailsDialogOpen(true);
+        // Update the hash to include the order ID
+        navigate(`/profile#${orderId}`, { replace: true });
       }
     },
-    [orders]
+    [orders, navigate]
   );
 
   const fetchOrders = useCallback(() => {
@@ -119,7 +121,11 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
 
   useEffect(() => {
     if (orderIdFromHash && orders.length > 0) {
+      console.log('OrdersTab: Attempting to open order from hash:', orderIdFromHash);
+      console.log('OrdersTab: Available orders:', orders.map(o => o.orderId));
       handleViewDetails(orderIdFromHash);
+    } else if (orderIdFromHash && orders.length === 0) {
+      console.log('OrdersTab: Order ID from hash but no orders loaded yet:', orderIdFromHash);
     }
   }, [orderIdFromHash, orders, handleViewDetails]);
 
@@ -138,7 +144,7 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
   const handleCloseDetailsDialog = () => {
     setIsDetailsDialogOpen(false);
     setSelectedOrder(null);
-    navigate("/profile", { replace: true });
+    navigate("/profile#orders", { replace: true });
   };
 
   if (loading) {

src/pages/ProfilePage.js

@@ -94,30 +94,46 @@ const ProfilePage = (props) => {
 
   useEffect(() => {
     const hash = location.hash;
+    console.log('ProfilePage: Processing hash:', hash);
 
     switch (hash) {
       case '#cart':
+        console.log('ProfilePage: Switching to cart tab');
         setTabValue(0);
         setOrderIdFromHash(null);
         break;
       case '#orders':
+        console.log('ProfilePage: Switching to orders tab');
         setTabValue(1);
         setOrderIdFromHash(null);
         break;
       case '#settings':
+        console.log('ProfilePage: Switching to settings tab');
         setTabValue(2);
         setOrderIdFromHash(null);
         break;
       default:
-        if (hash && hash.startsWith('#ORD-')) {
+        if (hash && hash.length > 1) {
-          const orderId = hash.substring(1);
+          // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
-          setOrderIdFromHash(orderId);
+          const potentialOrderId = hash.substring(1);
-          setTabValue(1); // Switch to Orders tab
+          if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
+            console.log('ProfilePage: Detected order ID from hash:', potentialOrderId);
+            setOrderIdFromHash(potentialOrderId);
+            setTabValue(1); // Switch to Orders tab
+          } else {
+            console.log('ProfilePage: Hash does not match order ID pattern:', potentialOrderId);
+            setOrderIdFromHash(null);
+          }
         } else {
           setOrderIdFromHash(null);
+          // If no hash is present, set default to cart tab
+          if (!hash) {
+            console.log('ProfilePage: No hash present, redirecting to cart');
+            navigate('/profile#cart', { replace: true });
+          }
         }
     }
-  }, [location.hash]);
+  }, [location.hash, navigate]);
 
   useEffect(() => {
     const checkUserLoggedIn = () => {
@@ -169,10 +185,23 @@ const ProfilePage = (props) => {
 
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
+    
+    // Update the hash based on the selected tab
+    const hashMap = {
+      0: '#cart',
+      1: '#orders', 
+      2: '#settings'
+    };
+    
+    const newHash = hashMap[newValue];
+    if (newHash) {
+      navigate(`/profile${newHash}`, { replace: true });
+    }
   };
 
   const handleGoToOrders = () => {
     setTabValue(1);
+    navigate('/profile#orders', { replace: true });
   };
 
   const handleClearPaymentCompletion = () => {