Implemented Wishlist, Cart, and Checkout Features with UI and Config Updates

package.json

@@ -44,7 +44,6 @@
     "jsonwebtoken": "^9.0.2",
     "lottie-react": "^2.4.0",
     "lucide-react": "^0.474.0",
-    "mohamed-mujtaba-coffee-shop": "file:",
     "mongodb": "^6.18.0",
     "mongoose": "^8.0.3",
     "openai": "^4.78.0",

src/App.js

@@ -37,9 +37,9 @@ import ExpertBaristas from './Pages/ExpertBaristas';
 import CozyAmbiance from './Pages/CozyAmbiance';
 import Feedback from './Pages/Feedback';
 import Favorites from './Pages/favorites';
+import Wishlist from './Pages/wishlist';
 import Reviews from './componets/Reviews';
 import AnimatedCursor from 'react-animated-cursor';
-
 import Chatbot from "./componets/Chatbot";
 
 // Styled Containers
@@ -54,14 +54,11 @@ const ContentContainer = styled.div`
   flex: 1;
 `;
 
-// ✅ Enhanced Protected Profile Route with Google Auth
 const SafeProfileRoute = () => {
   const { isAuthenticated, user, loading } = useSelector((state) => state.auth);
-
-  // Check both new auth system and legacy localStorage
   const legacyUserData = localStorage.getItem('user');
   const legacyUser = legacyUserData ? JSON.parse(legacyUserData) : null;
-  
+
   if (loading) {
     return (
       <div className="flex justify-center items-center min-h-screen">
@@ -70,11 +67,9 @@ const SafeProfileRoute = () => {
     );
   }
 
-  // Allow access if authenticated through Google Auth OR legacy system
   return (isAuthenticated && user) || legacyUser ? <Profile /> : <Navigate to="/login" replace />;
 };
 
-// ✅ Protected Route Component for other protected pages
 const ProtectedRoute = ({ children }) => {
   const { isAuthenticated, user, loading } = useSelector((state) => state.auth);
   const legacyUserData = localStorage.getItem('user');
@@ -91,10 +86,9 @@ const ProtectedRoute = ({ children }) => {
   return (isAuthenticated && user) || legacyUser ? children : <Navigate to="/login" replace />;
 };
 
-// ✅ Main App Content Component
 const AppContent = () => {
   const dispatch = useDispatch();
-  const { token, user } = useSelector((state) => state.auth); 
+  const { token, user } = useSelector((state) => state.auth);
 
   useEffect(() => {
     if (token && !user) {
@@ -105,32 +99,10 @@ const AppContent = () => {
   return (
     <AppContainer>
       <Navbar />
-
-      <AnimatedCursor
-        innerSize={20}
-        outerSize={20}
-        color="104, 225, 239"
-        outerAlpha={0.2}
-        innerScale={0.7}
-        outerScale={5}
-      />
-
-      <ToastContainer 
-        position="top-right" 
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="light"
-      />
-
+      <AnimatedCursor innerSize={20} outerSize={20} color="104, 225, 239" outerAlpha={0.2} innerScale={0.7} outerScale={5} />
+      <ToastContainer position="top-right" autoClose={3000} theme="light" />
       <ContentContainer>
         <Routes>
-          {/* Public Routes */}
           <Route path="/" element={<Home />} />
           <Route path="/home" element={<Home />} />
           <Route path="/login" element={<Login />} />
@@ -152,58 +124,29 @@ const AppContent = () => {
           <Route path="/premiumbeans" element={<PremiumBeans />} />
           <Route path="/expertbaristas" element={<ExpertBaristas />} />
           <Route path="/cozyambiance" element={<CozyAmbiance />} />
-
-          {/* Protected Routes */}
           <Route path="/profile" element={<SafeProfileRoute />} />
-          <Route 
-            path="/cart" 
-            element={
-              <ProtectedRoute>
-                <Cart />
-              </ProtectedRoute>
-            } 
-          />
-          <Route 
-            path="/checkout" 
-            element={
-              <ProtectedRoute>
-                <Checkout />
-              </ProtectedRoute>
-            } 
-          />
-          <Route 
-            path="/favorites" 
-            element={
-              <ProtectedRoute>
-                <Favorites />
-              </ProtectedRoute>
-            } 
-          />
-          <Route 
-            path="/feedback" 
-            element={
-              <ProtectedRoute>
-                <Feedback />
-              </ProtectedRoute>
-            } 
-          />
+          <Route path="/favorites" element={<ProtectedRoute><Favorites /></ProtectedRoute>} />
+          <Route path="/feedback" element={<ProtectedRoute><Feedback /></ProtectedRoute>} />
+          <Route path="/cart" element={<ProtectedRoute><Cart /></ProtectedRoute>} />
+          <Route path="/checkout" element={<ProtectedRoute><Checkout /></ProtectedRoute>} />
+          <Route path="/wishlist" element={<Wishlist />} />
         </Routes>
       </ContentContainer>
-
       <Reviews />
-
-      {/* Add Chatbot so it floats on every page */}
       <Chatbot />
-
       <Footer />
     </AppContainer>
   );
 };
 
-// ✅ Main App Component with Google OAuth Provider
 function App() {
+  // Handle Google OAuth client ID for different environments
+  const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID || 
+                        process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || 
+                        "placeholder_client_id";
+
   return (
-    <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
+    <GoogleOAuthProvider clientId={googleClientId}>
       <Provider store={store}>
         <Router>
           <ScrollToTop />
@@ -214,4 +157,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;