Merge remote-tracking branch 'origin/dev' into fix-notification

package.json

@@ -38,7 +38,6 @@
     "gsap": "^3.12.5",
     "install": "^0.13.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-fetch-mock": "^3.0.3",
     "jest-mock-extended": "^3.0.7",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
@@ -98,6 +97,7 @@
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^15.2.5",
     "msw": "^2.3.1",
     "postcss": "^8.4.38",

src/__test__/currentUser.test.ts

@@ -0,0 +1,41 @@
+import api from "../redux/api/api";
+import { ICurrentUser } from "../redux/reducers/notificationSlice";
+import { getCurrentUser } from "../utils/currentuser";
+
+jest.mock("../redux/api/api");
+
+const mockUser: ICurrentUser = {
+  id: 1,
+  name: "John Doe",
+  username: "johndoe",
+  email: "[email protected]",
+  password: "securepassword",
+  lastPasswordUpdateTime: new Date("2023-01-01T00:00:00Z"),
+  roleId: 2,
+  isActive: true,
+  isVerified: true,
+  createdAt: new Date("2022-01-01T00:00:00Z"),
+  updatedAt: new Date("2023-01-01T00:00:00Z"),
+};
+
+describe("getCurrentUser", () => {
+  beforeEach(() => {
+    (api.get as jest.Mock).mockReset();
+  });
+
+  it("should return user data when API call is successful", async () => {
+    (api.get as jest.Mock).mockResolvedValue({ data: mockUser });
+
+    const result = await getCurrentUser();
+
+    expect(result).toEqual(mockUser);
+  });
+
+  it("should return null when API call fails", async () => {
+    (api.get as jest.Mock).mockRejectedValue(new Error("Network Error"));
+
+    const result = await getCurrentUser();
+
+    expect(result).toBeNull();
+  });
+});

src/__test__/notificationSlice.test.ts

@@ -87,7 +87,7 @@ describe("notificationSlice", () => {
     expect(state.unreadCount).toBe(1);
   });
 
-  it.skip("should handle getUserNotifications thunk", async () => {
+  it("should handle getUserNotifications thunk", async () => {
     const mockNotifications: INotificationR[] = [
       {
         id: 1,
@@ -113,17 +113,13 @@ describe("notificationSlice", () => {
       data: { notifications: mockNotifications },
     });
 
-    (connectSocketMock as jest.Mock).mockReturnValue(socketMock);
-
-    await store.dispatch(getUserNotifications());
+    const result = await store.dispatch(getUserNotifications());
+    console.log("Thunk result:", result);
 
     const state = store.getState().notifications;
-    console.log("State after getUserNotifications:", state);
-    // expect(state.notifications).toEqual(mockNotifications);
-    expect(state.unreadCount).toBe(1);
 
-    expect(socketMock.emit).not.toHaveBeenCalled();
-    expect(socketMock.on).not.toHaveBeenCalled();
+    expect(state.notifications).toEqual(mockNotifications);
+    expect(state.unreadCount).toBe(2);
   });
 
   it("should handle readNotification thunk", async () => {

src/components/common/header/Header.tsx

@@ -200,7 +200,7 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
               )}
               <Stack className="flex flex-col">
                 <span className="hidden lg:block select-none font-semibold text-[12px]">
-                  {userInfo.name.split(" ")[0]}
+                  {userInfo.name?.split(" ")[0]}
                 </span>
               </Stack>
               {dropdownOpen && <ProfileDropdown userInfo={userInfo} />}

src/pages/paymentPage.tsx

@@ -174,5 +174,24 @@ const SuccessfulPayment = () => {
   );
 };
 
+const CancelledPayment = () => (
+  <section className="flex items-center justify-center py-32 bg-gray-100 md:m-0 px-4  ">
+    <div className="bg-white p-6 rounded shadow-md text-center">
+      <h1 className="text-2xl font-medium text-red-500">
+        ❌ Payment Was Cancelled
+      </h1>
+      <p className="mt-4">
+        Checkout Details about your carts If you wish to adjust !
+      </p>
+      <p className="mt-2">Thank you for shopping with us.</p>
+
+      <Link to="/carts">
+        <button className="mt-4 inline-block px-4 py-2 text-white bg-red-500 rounded transition-colors duration-300 cursor-pointer hover:bg-green-600">
+          Checkout your Carts
+        </button>
+      </Link>
+    </div>
+  </section>
+);
 export default Payment;
-export { SuccessfulPayment };
+export { SuccessfulPayment, CancelledPayment };

src/redux/reducers/notificationSlice.ts

@@ -121,10 +121,10 @@ const notificationSlice = createSlice({
       .addCase(
         getUserNotifications.fulfilled,
         (state, action: PayloadAction<INotificationR[]>) => {
-          // state.notifications = action.payload;
-          // state.unreadCount = action.payload.filter(
-          //   (notification) => !notification.isRead,
-          // ).length;
+          state.notifications = action.payload;
+          state.unreadCount = action.payload.filter(
+            (notification) => !notification.isRead,
+          ).length;
         },
       )
       .addCase(handleCurrentUser.fulfilled, (state, action) => {

src/routes/AppRoutes.tsx

@@ -33,10 +33,13 @@ import BuyerOrders from "../pages/BuyerOrders";
 import SignupVerification from "../pages/SignupVerification";
 import SmoothScroll from "../utils/SmoothScroll";
 import NotFound from "../pages/NotFound";
-import Payment, { SuccessfulPayment } from "../pages/paymentPage";
 import UserNotifications from "../components/common/user-notifications/UserNotifcations";
 import UserNotificationDetail from "../components/common/user-notifications/UserNotificationDetail";
 import { LogoutProvider } from "../components/dashboard/admin/LogoutContext";
+import Payment, {
+  CancelledPayment,
+  SuccessfulPayment,
+} from "../pages/paymentPage";
 
 const AppRoutes = () => {
   const navigate = useNavigate();
@@ -60,62 +63,64 @@ const AppRoutes = () => {
   };
   return (
     <SmoothScroll>
-      <Routes>
-        <Route path="/" element={<RootLayout />}>
-          <Route index element={<Homepage />} />
-          <Route path="products" element={<ProductPage />} />
-          <Route path="products/:id" element={<ProductDetails />} />
-          <Route path="/carts" element={<CartManagement />} />
-          <Route path="/wishes" element={<BuyerWishesList />} />
-          <Route path="/orders" element={<BuyerOrders />} />
-          <Route path="/payment" element={<Payment />} />
-          <Route path="/payment/success" element={<SuccessfulPayment />} />
-          <Route path="/payment/canceled" element={<Payment />} />
-          <Route path="/notifications" element={<UserNotifications />} />
+      <LogoutProvider>
+        <Routes>
+          <Route path="/" element={<RootLayout />}>
+            <Route index element={<Homepage />} />
+            <Route path="products" element={<ProductPage />} />
+            <Route path="products/:id" element={<ProductDetails />} />
+            <Route path="/carts" element={<CartManagement />} />
+            <Route path="/wishes" element={<BuyerWishesList />} />
+            <Route path="/orders" element={<BuyerOrders />} />
+            <Route path="/payment" element={<Payment />} />
+            <Route path="/payment/success" element={<SuccessfulPayment />} />
+            <Route path="/payment/canceled" element={<Payment />} />
+            <Route path="/notifications" element={<UserNotifications />} />
+            <Route
+              path="/notifications/:id"
+              element={<UserNotificationDetail />}
+            />
+          </Route>
+          <Route path="chat" element={<ChatPage />} />
+          <Route path="/password-reset-link" element={<GetLinkPage />} />
+          <Route path="/reset-password" element={<ResetPassword />} />
+          <Route path="/register" element={<RegisterUser />} />
+          <Route path="/verify-user" element={<SignupVerification />} />
+
           <Route
-            path="/notifications/:id"
-            element={<UserNotificationDetail />}
+            path="/login"
+            element={(
+              <AlreadyLogged>
+                <Login />
+              </AlreadyLogged>
+            )}
           />
-        </Route>
-        <Route path="chat" element={<ChatPage />} />
-        <Route path="/password-reset-link" element={<GetLinkPage />} />
-        <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/register" element={<RegisterUser />} />
-        <Route path="/verify-user" element={<SignupVerification />} />
-
-        <Route
-          path="/login"
-          element={(
-            <AlreadyLogged>
-              <Login />
-            </AlreadyLogged>
-          )}
-        />
-        <Route path="2fa-verify" element={<OtpVerificationForm />} />
-        <Route path="/dashboard" element={<SellerDashboard />} />
-        <Route path="/dashboard/addproduct" element={<AddProduct />} />
-        <Route path="/update-password" element={<UpdatePasswordPage />} />
-        <Route path="/profile" element={<UsersProfile />} />
-        <Route path="/profile/update" element={<UpdateUserProfile />} />
-        <Route path="/dashboard/products" element={<Products />} />
-        <Route path="/dashboard/products/:id" element={<AddProduct />} />
-        <Route path="/dashboard/orders" element={<SellerOrder />} />
-        <Route path="/admin/dashboard" element={<Dashboard />} />
-        <Route path="/admin/users" element={<UserManagement />} />
-        <Route path="/admin/settings" element={<Settings />} />
-        <Route path="/admin/analytics" element={<Analytics />} />
-        <Route path="/admin/Products" element={<Products />} />
-        <Route
-          path="/dashboard/notifications"
-          element={<SellerNotifications />}
-        />
-        <Route
-          path="/dashboard/notifications/:id"
-          element={<NotificationDetail />}
-        />
-        <Route path="/dashboard/wishes" element={<Wishes />} />
-        <Route path="/*" element={<NotFound />} />
-      </Routes>
+          <Route path="2fa-verify" element={<OtpVerificationForm />} />
+          <Route path="/dashboard" element={<SellerDashboard />} />
+          <Route path="/dashboard/addproduct" element={<AddProduct />} />
+          <Route path="/update-password" element={<UpdatePasswordPage />} />
+          <Route path="/profile" element={<UsersProfile />} />
+          <Route path="/profile/update" element={<UpdateUserProfile />} />
+          <Route path="/dashboard/products" element={<Products />} />
+          <Route path="/dashboard/products/:id" element={<AddProduct />} />
+          <Route path="/dashboard/orders" element={<SellerOrder />} />
+          <Route path="/admin/dashboard" element={<Dashboard />} />
+          <Route path="/admin/users" element={<UserManagement />} />
+          <Route path="/admin/settings" element={<Settings />} />
+          <Route path="/admin/analytics" element={<Analytics />} />
+          <Route path="/admin/Products" element={<Products />} />
+          <Route
+            path="/dashboard/notifications"
+            element={<SellerNotifications />}
+          />
+          <Route
+            path="/dashboard/notifications/:id"
+            element={<NotificationDetail />}
+          />
+          <Route path="/dashboard/wishes" element={<Wishes />} />
+          <Route path="/*" element={<NotFound />} />
+        </Routes>
+      </LogoutProvider>
     </SmoothScroll>
   );
 };