added baha anyklmak, attributes

src/app/api/brandsApi.js

@@ -5,16 +5,9 @@ export const brandsApi = baseApi.injectEndpoints({
     getBrands: builder.query({
       query: (params = {}) => {
         const queryParams = new URLSearchParams();
-        if (params.type) {
-          queryParams.append("type", params.type);
-        }
-        if (params.page) {
-          queryParams.append("page", params.page);
-        }
-        if (params.limit) {
-          queryParams.append("limit", params.limit);
-        }
-
+        if (params.type) queryParams.append("type", params.type);
+        if (params.page) queryParams.append("page", params.page);
+        if (params.limit) queryParams.append("limit", params.limit);
         const queryString = queryParams.toString();
         return `/brands${queryString ? `?${queryString}` : ""}`;
       },
@@ -28,30 +21,19 @@ export const brandsApi = baseApi.injectEndpoints({
 
     getBrandProducts: builder.query({
       query: (params) => {
-        if (typeof params === 'string' || typeof params === 'number') {
+        if (typeof params === "string" || typeof params === "number") {
           return `/brands/${params}/products`;
         }
 
-        const { id, page = 1, limit, sorting, min_price, max_price, brands } = params;
-        let url = `/brands/${id}/products?page=${page}`;
+        const { id, page = 1, limit = 24, sorting, min_price, max_price } = params;
+        const urlParams = new URLSearchParams();
+        urlParams.append("page", page);
+        urlParams.append("limit", limit);
+        if (sorting) urlParams.append("sorting", sorting);
+        if (min_price) urlParams.append("min_price", min_price);
+        if (max_price) urlParams.append("max_price", max_price);
 
-        if (limit) {
-          url += `&limit=${limit}`;
-        }
-        if (sorting) {
-          url += `&sorting=${encodeURIComponent(sorting)}`;
-        }
-        if (min_price) {
-          url += `&min_price=${encodeURIComponent(min_price)}`;
-        }
-        if (max_price) {
-          url += `&max_price=${encodeURIComponent(max_price)}`;
-        }
-        if (brands) {
-          url += `&brands=${encodeURIComponent(brands)}`;
-        }
-
-        return url;
+        return `/brands/${id}/products?${urlParams.toString()}`;
       },
       transformResponse: (response) => ({
         data: response.data || response,

src/app/api/categories.js

@@ -7,15 +7,14 @@ export const categoriesApi = baseApi.injectEndpoints({
     }),
 
     getCategoryProducts: builder.query({
-      query: ({ categoryId, page = 1, limit, brands, min_price, max_price, sorting }) => {
+      query: ({ categoryId, page = 1, limit = 24, brands, min_price, max_price, sorting }) => {
         const params = new URLSearchParams();
-        params.append('page', page);
-        if (limit) params.append('limit', limit);
-        if (brands) params.append('brands', brands);
-        if (min_price) params.append('min_price', min_price);
-        if (max_price) params.append('max_price', max_price);
-        if (sorting) params.append('sorting', sorting);
-        
+        params.append("page", page);
+        params.append("limit", limit);
+        if (brands) params.append("brands", brands);
+        if (min_price) params.append("min_price", min_price);
+        if (max_price) params.append("max_price", max_price);
+        if (sorting) params.append("sorting", sorting);
         return `categories/${categoryId}/products?${params.toString()}`;
       },
       transformResponse: (response) => ({
@@ -25,78 +24,103 @@ export const categoriesApi = baseApi.injectEndpoints({
     }),
 
     getAllCategoryProducts: builder.query({
-      async queryFn(category, queryApi, extraOptions, baseQuery) {
+      async queryFn(category, _queryApi, _extraOptions, baseQuery) {
         const fetchProducts = async (categoryId) => {
           const result = await baseQuery(`categories/${categoryId}/products`);
           return result.data ? result.data.data : [];
         };
 
         let allProducts = await fetchProducts(category.id);
-
         for (const child of category.children) {
           const childProducts = await fetchProducts(child.id);
           allProducts = [...allProducts, ...childProducts];
         }
-
         return { data: allProducts };
       },
     }),
 
     getAllCategoryProductsPaginated: builder.query({
       async queryFn(
-        { category, page = 1, limit = 6, brands, min_price, max_price, sorting },
-        queryApi,
-        extraOptions,
+        { category, page = 1, limit = 24, brands, min_price, max_price, sorting },
+        _queryApi,
+        _extraOptions,
         baseQuery
       ) {
-        if (!category) return { data: [] };
+        if (!category) return { data: { data: [], pagination: { currentPage: 1, hasMorePages: false } } };
 
         try {
-          const hasMoreByCategory = {};
-
-          const fetchProductsForPage = async (categoryIds, currentPage) => {
-            let allPageProducts = [];
-            const perCategoryLimit = Math.ceil(limit / categoryIds.length);
-
-            for (const categoryId of categoryIds) {
-              const params = new URLSearchParams();
-              params.append('page', currentPage);
-              params.append('limit', perCategoryLimit);
-              if (brands) params.append('brands', brands);
-              if (min_price) params.append('min_price', min_price);
-              if (max_price) params.append('max_price', max_price);
-              if (sorting) params.append('sorting', sorting);
-
-              const result = await baseQuery(
-                `categories/${categoryId}/products?${params.toString()}`
-              );
-
-              if (result.data && result.data.data) {
-                allPageProducts = [...allPageProducts, ...result.data.data];
-                hasMoreByCategory[categoryId] = !!result.data.pagination.next_page_url;
-              }
-            }
-
-            return allPageProducts;
-          };
-
           const categoryIds = [category.id];
-          if (category.children && category.children.length > 0) {
+          if (category.children?.length > 0) {
             category.children.forEach((child) => categoryIds.push(child.id));
           }
 
-          const productsForPage = await fetchProductsForPage(categoryIds, page);
+          // Tek category — direkt fetch, limit tam uygulanır
+          if (categoryIds.length === 1) {
+            const params = new URLSearchParams();
+            params.append("page", page);
+            params.append("limit", limit);
+            if (brands) params.append("brands", brands);
+            if (min_price) params.append("min_price", min_price);
+            if (max_price) params.append("max_price", max_price);
+            if (sorting) params.append("sorting", sorting);
 
-          const hasMorePages = Object.values(hasMoreByCategory).some(
-            (hasMore) => hasMore
-          );
+            const result = await baseQuery(
+              `categories/${categoryIds[0]}/products?${params.toString()}`
+            );
+
+            if (result.error) return { error: result.error };
+
+            return {
+              data: {
+                data: result.data?.data || [],
+                pagination: {
+                  currentPage: page,
+                  hasMorePages: !!result.data?.pagination?.next_page_url,
+                },
+              },
+            };
+          }
+
+          // Birden fazla category — paralel fetch, her biri tam limit ile
+          // Sonra client-side deduplicate + slice
+          const requests = categoryIds.map((categoryId) => {
+            const params = new URLSearchParams();
+            params.append("page", page);
+            params.append("limit", limit);
+            if (brands) params.append("brands", brands);
+            if (min_price) params.append("min_price", min_price);
+            if (max_price) params.append("max_price", max_price);
+            if (sorting) params.append("sorting", sorting);
+
+            return baseQuery(`categories/${categoryId}/products?${params.toString()}`);
+          });
+
+          const results = await Promise.all(requests);
+
+          let allProducts = [];
+          let hasMorePages = false;
+          const seenIds = new Set();
+
+          for (const result of results) {
+            if (result.error) continue;
+            const items = result.data?.data || [];
+            for (const item of items) {
+              if (!seenIds.has(item.id)) {
+                seenIds.add(item.id);
+                allProducts.push(item);
+              }
+            }
+            if (result.data?.pagination?.next_page_url) {
+              hasMorePages = true;
+            }
+          }
 
           return {
             data: {
-              data: productsForPage,
+              data: allProducts,
               pagination: {
                 currentPage: page,
-                hasMorePages: hasMorePages,
+                hasMorePages,
               },
             },
           };

src/app/api/collectionsApi.js

@@ -12,33 +12,28 @@ export const collectionsApi = baseApi.injectEndpoints({
 
     getCollectionProducts: builder.query({
       query: (collectionId) => `/collections/${collectionId}/products`,
-      transformResponse: (response) => {
-        return {
-          data: response.data || [],
-          isEmpty: !response.data || response.data.length === 0,
-        };
-      },
+      transformResponse: (response) => ({
+        data: response.data || [],
+        isEmpty: !response.data || response.data.length === 0,
+      }),
     }),
 
     checkCollectionHasProducts: builder.query({
       query: (collectionId) => `/collections/${collectionId}/products?limit=1`,
-      transformResponse: (response) => {
-        return {
-          hasProducts: response.data && response.data.length > 0,
-        };
-      },
+      transformResponse: (response) => ({
+        hasProducts: response.data && response.data.length > 0,
+      }),
     }),
 
     getCollectionProductsPaginated: builder.query({
-      query: ({ collectionId, page = 1, limit = 6, brands, min_price, max_price, sorting = "price_amount-ascending" }) => {
+      query: ({ collectionId, page = 1, limit = 24, brands, min_price, max_price, sorting }) => {
         const params = new URLSearchParams();
-        params.append('page', page);
-        if (limit) params.append('limit', limit);
-        if (brands) params.append('brands', brands);
-        if (min_price) params.append('min_price', min_price);
-        if (max_price) params.append('max_price', max_price);
-        params.append('sorting', sorting);
-        
+        params.append("page", page);
+        params.append("limit", limit);
+        if (brands) params.append("brands", brands);
+        if (min_price) params.append("min_price", min_price);
+        if (max_price) params.append("max_price", max_price);
+        if (sorting) params.append("sorting", sorting); // undefined gelirse gönderme
         return `/collections/${collectionId}/products?${params.toString()}`;
       },
       transformResponse: (response) => ({

src/components/CategoryDropdown/DropdownMenu.module.scss

@@ -1,235 +1,272 @@
+// DropdownMenu.module.scss
+
 .dropdownContainer {
+  position: relative;
+
   @media screen and (max-width: 1023px) {
     display: none;
   }
 }
 
+// ---- TRIGGER BUTTON ----
 .navButton {
   display: flex;
-  gap: 5px;
-  border: none;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-  justify-content: center;
   align-items: center;
+  gap: 6px;
+  border: none;
+  padding: 0.25rem 0.875rem;
   border-radius: 0.5rem;
   height: 2.5rem;
-  font-size: 0.875rem;
+  font-size: 16px;
+  font-weight: 600;
   color: #4b5563;
   background-color: transparent;
-  font-weight: 600;
-  font-size: 16px;
   cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+  position: relative;
+  z-index: 999;
   &:hover {
     background-color: #f3f4f6;
   }
+
+  &.navButtonActive {
+    background-color: #e63946;
+    color: #ffffff;
+
+    svg {
+      color: #ffffff;
+    }
+  }
 }
 
+// ---- OVERLAY ----
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: 998;
+  animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// ---- WRAPPER + ANIMATION ----
 .dropdownWrapper {
-  position: relative;
-}
-
-.dropdownPanel {
   position: absolute;
-  top: 100%;
-  margin-top: 8px;
-  z-index: 50;
-  display: flex;
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
-  width: 1366px;
-  padding: 0 1.375rem;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 999;
+  animation: slideDown 0.18s ease;
 }
 
-.categoriesList {
-  flex: 1;
-  max-height: 500px;
-  overflow-y: auto;
-  border-right: 1px solid #ebe7eb;
-  padding: 20px;
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ---- PANEL SHELL ----
+.dropdownPanel {
   display: flex;
-  flex-direction: column;
-  gap: 5px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  width: 1336px;
+  max-height: 520px;
+  // max-width: calc(100vw - 32px);
+}
 
-  // &::-webkit-scrollbar {
-  //   width: 6px;
-  // }
+// ---- LEFT LIST ----
+.categoriesList {
+  width: 270px;
+  flex-shrink: 0;
+  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  padding: 10px 0;
+  max-height: 520px;
+  overflow-y: auto;
 
-  &::-webkit-scrollbar-track {
-    background: #e5e7eb;
+  &::-webkit-scrollbar {
+    width: 4px;
   }
-
   &::-webkit-scrollbar-thumb {
-    background: #d1d5db;
-  }
-  .title {
-    &:hover {
-      color: #888888;
-    }
-    &:active {
-      color: #888888;
-    }
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
   }
 }
 
 .categoryItem {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px;
+  justify-content: space-between;
+  padding: 9px 16px;
+  font-size: 16px;
   cursor: pointer;
-  transition: background-color 0.2s;
-  border: 1px solid #3615371a;
-  border-radius: 6px;
+  color: #000;
+  transition: background-color 0.12s, color 0.12s;
 
   &:hover {
-    background-color: #f9fafb;
+    background-color: rgba(255, 255, 255, 0.08);
+    color: #000;
   }
 
   &.active {
-    background-color: #f3f4f6;
-  }
+    background-color: rgba(255, 255, 255, 0.15);
+    color: #000;
 
-  .icon {
-    font-size: 14px;
-  }
-
-  .title {
-    font-size: 14px;
-    &:hover {
-      color: #888888;
+    .title {
+      font-weight: 600;
     }
   }
 }
 
+.title {
+  font-size: 14px;
+}
+
+.chevron {
+  color: rgba(255, 255, 255, 0.4);
+  flex-shrink: 0;
+}
+
+// ---- RIGHT CONTENT PANEL ----
 .contentPanel {
-  flex: 3;
-  padding: 16px;
-  max-height: 400px;
-  overflow-y: hidden;
+  flex: 1;
+  padding: 20px 24px;
+  max-height: 520px;
+  overflow-y: auto;
+  background: #ffffff;
 
-  // &::-webkit-scrollbar {
-  //   width: 6px;
-  // }
-
-  &::-webkit-scrollbar-track {
-    background: #e5e7eb;
+  &::-webkit-scrollbar {
+    width: 4px;
   }
-
   &::-webkit-scrollbar-thumb {
     background: #d1d5db;
-    // border-radius: 3px;
-  }
-  .title {
-    cursor: pointer;
-    color: #361517;
-    font-size: 24px;
-    font-weight: 600;
-    &:hover {
-      color: #888888;
-    }
+    border-radius: 2px;
   }
 }
-.column {
-  display: flex;
-  flex-direction: column;
-  flex: 2;
-  text-align: left;
+
+.panelTitle {
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 16px;
+  cursor: pointer;
+  display: inline-block;
+
+  &:hover {
+    color: #e63946;
+  }
+}
+
+// COLUMN GRID MODE
+// SONRA — column layout (iyi, masonry gibi akar)
+.columnsGrid {
+  columns: 250px auto;
+  column-gap: 24px;
+}
+
+.columnSection {
+  break-inside: avoid;
+  margin-bottom: 20px;
+  display: inline-block; // break-inside'ın çalışması için zorunlu
+  width: 100%;
 }
 
 .sectionTitle {
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 12px;
-  color: #361517;
-  cursor: pointer;
-  &:hover {
-    color: #888888;
-  }
-}
-
-.subcategoryList {
-  margin-bottom: 24px;
-  display: flex;
-}
-
-.subcategoryItem {
   font-size: 14px;
-  color: #361517;
-  padding: 4px 0;
+  font-weight: 800;
+  color: #111827;
+  margin-bottom: 6px;
   cursor: pointer;
-  transition: color 0.2s;
 
   &:hover {
-    color: #888888;
+    color: #e63946;
   }
 }
 
-.subCategoriesContainer {
-  display: flex;
-  flex-direction: column;
-  max-height: 360px;
-  overflow-y: auto;
-}
-
-.nestedCategoryContainer:last-child {
-  margin-bottom: 16px;
-}
-
-.nestedCategoryContainer {
-  margin-bottom: 4px;
-}
-
-.nestedCategoryItem {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  border-radius: 4px;
+.leafItem {
+  display: block;
+  font-size: 14px;
+  color: #4b5563;
+  padding: 3px 0;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.12s;
+
+  &:hover {
+    color: #e63946;
+  }
+}
+
+// FLAT LIST MODE
+.flatList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-content: flex-start;
+}
+
+.flatListBordered {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.flatItem {
+  font-size: 14px;
+  color: #4b5563;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  transition: background-color 0.12s, color 0.12s;
 
   &:hover {
     background-color: #f3f4f6;
-  }
-
-  .categoryLabel {
-    flex: 1;
-    display: flex;
-    align-items: center;
-  }
-
-  .title {
-    font-size: 14px;
+    color: #111827;
   }
 }
 
-.expandButton,
-.navigateButton {
+.navButtonLoading {
+  opacity: 0.7;
+  cursor: wait;
+
+  .categoryIcon {
+    opacity: 0.4;
+  }
+}
+
+.loadingDots {
   display: flex;
+  gap: 3px;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
 
-  &:hover {
-    background-color: #e5e7eb;
+  span {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: currentColor;
+    animation: dotPulse 1.2s infinite ease-in-out;
+
+    &:nth-child(2) { animation-delay: 0.2s; }
+    &:nth-child(3) { animation-delay: 0.4s; }
   }
 }
 
-.nestedChildren {
-  margin-top: 4px;
-}
-
-.noSubcategories {
-  color: #6b7280;
-  font-style: italic;
+@keyframes dotPulse {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40%            { transform: scale(1);   opacity: 1;   }
 }

src/components/CategoryDropdown/index.jsx

@@ -1,83 +1,62 @@
+// DropdownMenu.jsx
 import React, { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
 import styles from "./DropdownMenu.module.scss";
 import { useGetCategoriesQuery } from "../../app/api/categories";
 import { CategoryIcon } from "../Icons";
-import { ChevronRight, ChevronDown } from "lucide-react"; // Assuming you have access to lucide-react or similar
 
-const NestedCategory = ({
-  category,
-  level = 0,
-  handleCategorySelect,
-  closeDropdown,
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const hasChildren = category.children && category.children.length > 0;
+const ContentPanel = ({ category, onSelect, onClose }) => {
+  if (!category) return null;
 
-  const handleClick = (e) => {
-    e.stopPropagation();
-    if (hasChildren) {
-      setIsExpanded(!isExpanded);
-    } else {
-      handleCategorySelect(category);
-      closeDropdown();
-    }
-  };
+  const children = category.children || [];
+  const withChildren = children.filter((c) => c.children?.length > 0);
+  const withoutChildren = children.filter((c) => !c.children?.length);
 
-  const handleDirectNavigation = (e) => {
-    e.stopPropagation();
-    handleCategorySelect(category);
-    closeDropdown();
-  };
+  const allColumns = [
+    ...withChildren,
+    ...withoutChildren.map((c) => ({ ...c, children: [] })),
+  ];
 
   return (
-    <div
-      className={styles.nestedCategoryContainer}
-      style={{ paddingLeft: `${level * 16}px` }}
-    >
-      <div className={styles.nestedCategoryItem} onClick={handleClick}>
-        <div className={styles.categoryLabel}>
-          <span className={styles.title}>{category.name}</span>
-        </div>
+    <div className={styles.contentPanel}>
+      <h2
+        className={styles.panelTitle}
+        onClick={() => {
+          onSelect(category);
+          onClose();
+        }}
+      >
+        {category.name}
+      </h2>
 
-        {hasChildren && (
-          <button
-            className={styles.expandButton}
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsExpanded(!isExpanded);
-            }}
-          >
-            {isExpanded ? (
-              <ChevronDown size={16} />
-            ) : (
-              <ChevronRight size={16} />
-            )}
-          </button>
-        )}
-
-        {hasChildren && (
-          <button
-            className={styles.navigateButton}
-            onClick={handleDirectNavigation}
-            title="Go to category"
-          >
-            →
-          </button>
-        )}
-      </div>
-
-      {hasChildren && isExpanded && (
-        <div className={styles.nestedChildren}>
-          {category.children.map((child) => (
-            <NestedCategory
-              key={child.id}
-              category={child}
-              level={level + 1}
-              handleCategorySelect={handleCategorySelect}
-              closeDropdown={closeDropdown}
-            />
+      {allColumns.length > 0 && (
+        <div className={styles.columnsGrid}>
+          {allColumns.map((sub) => (
+            <div key={sub.id} className={styles.columnSection}>
+              <div
+                className={styles.sectionTitle}
+                onClick={() => {
+                  onSelect(sub);
+                  onClose();
+                }}
+              >
+                {sub.name}
+              </div>
+              {sub.children?.map((leaf) => (
+                <span
+                  key={leaf.id}
+                  className={styles.leafItem}
+                  onClick={() => {
+                    onSelect(leaf);
+                    onClose();
+                  }}
+                >
+                  {leaf.name}
+                </span>
+              ))}
+            </div>
           ))}
         </div>
       )}
@@ -89,113 +68,85 @@ const DropdownMenu = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const dropdownRef = useRef(null);
+
   const {
     data: categoriesData,
     isLoading,
     error,
   } = useGetCategoriesQuery("tree");
-
   const categories = categoriesData?.data || [];
+
   const [isOpen, setIsOpen] = useState(false);
-  const [activeMainCategory, setActiveMainCategory] = useState(null);
+  const [activeCategory, setActiveCategory] = useState(null);
 
   useEffect(() => {
-    if (categories.length > 0) {
-      const defaultCategory =
-        categories.find((cat) => cat.name === "Aýallar üçin") || categories[0];
-      setActiveMainCategory(defaultCategory);
+    if (categories.length > 0 && !activeCategory) {
+      setActiveCategory(categories[0]);
     }
   }, [categories]);
 
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
+  useEffect(() => {
+    const handler = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
 
-  const handleMouseLeave = () => {
-    if (categories.length > 0) {
-      const defaultCategory =
-        categories.find((cat) => cat.name === "Aýallar üçin") || categories[0];
-      setActiveMainCategory(defaultCategory);
-    }
-  };
-
-  const handleCategorySelect = (category) => {
+  const handleSelect = (category) => {
     navigate(`/category/${category.id}`, { state: { category } });
     setIsOpen(false);
   };
 
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading categories</div>;
 
   return (
     <div className={styles.dropdownContainer} ref={dropdownRef}>
-      <button onClick={handleToggle} className={styles.navButton}>
+      <button
+        onClick={() => setIsOpen((p) => !p)}
+        className={`${styles.navButton} ${isOpen ? styles.navButtonActive : ""}`}
+        aria-expanded={isOpen}
+      >
         <CategoryIcon />
-        {t("navbar.category")}
+         {isLoading
+    ? <div className={styles.loadingDots}><span/><span/><span/></div>
+    : t("navbar.category")
+  }
       </button>
 
       {isOpen && (
-        <div className={styles.dropdownWrapper}>
-          <div className={styles.dropdownPanel} onMouseLeave={handleMouseLeave}>
-            <div className={styles.categoriesList}>
-              {categories.map((category) => (
-                <div
-                  key={category.id}
-                  className={`${styles.categoryItem} ${
-                    activeMainCategory?.id === category.id ? styles.active : ""
-                  }`}
-                  onMouseEnter={() => setActiveMainCategory(category)}
-                  onClick={() => handleCategorySelect(category)}
-                >
-                  <span className={styles.title}>{category.name}</span>
-                </div>
-              ))}
-            </div>
+        <>
+          <div className={styles.overlay} onClick={() => setIsOpen(false)} />
 
-            {activeMainCategory && (
-              <div className={styles.contentPanel}>
-                <h2
-                  onClick={() => handleCategorySelect(activeMainCategory)}
-                  className={styles.title}
-                >
-                  {activeMainCategory.name}
-                </h2>
-
-                <div className={styles.subCategoriesContainer}>
-                  {activeMainCategory.children &&
-                  activeMainCategory.children.length > 0 ? (
-                    activeMainCategory.children.map((subcategory) => (
-                      <NestedCategory
-                        key={subcategory.id}
-                        category={subcategory}
-                        handleCategorySelect={handleCategorySelect}
-                        closeDropdown={() => setIsOpen(false)}
-                      />
-                    ))
-                  ) : (
-                    <div className={styles.noSubcategories}>
-                      {/* No subcategories available */}
-                    </div>
-                  )}
-                </div>
+          <div className={styles.dropdownWrapper}>
+            <div className={styles.dropdownPanel}>
+              <div className={styles.categoriesList}>
+                {categories.map((cat) => (
+                  <div
+                    key={cat.id}
+                    className={`${styles.categoryItem} ${
+                      activeCategory?.id === cat.id ? styles.active : ""
+                    }`}
+                    onMouseEnter={() => setActiveCategory(cat)}
+                    onClick={() => handleSelect(cat)}
+                  >
+                    <span className={styles.title}>{cat.name}</span>
+                    {cat.children?.length > 0 && (
+                      <ChevronRight size={14} className={styles.chevron} />
+                    )}
+                  </div>
+                ))}
               </div>
-            )}
+
+              <ContentPanel
+                category={activeCategory}
+                onSelect={handleSelect}
+                onClose={() => setIsOpen(false)}
+              />
+            </div>
           </div>
-        </div>
+        </>
       )}
     </div>
   );

src/components/Checkout/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import styles from "./Checkout.module.scss";
-import { X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import {
   usePlaceOrderMutation,
@@ -9,202 +8,145 @@ import {
 } from "../../app/api/orderApi";
 import { useGetLocationsQuery } from "../../app/api/locationApi";
 
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
+
 const useDeviceType = () => {
   const [deviceType, setDeviceType] = useState("desktop");
-
   useEffect(() => {
-    const userAgent = navigator.userAgent;
-    if (/Mobi|Android/i.test(userAgent)) {
-      setDeviceType("mobile");
-    } else {
-      setDeviceType("desktop");
-    }
+    setDeviceType(
+      /Mobi|Android/i.test(navigator.userAgent) ? "mobile" : "desktop",
+    );
   }, []);
-
   return deviceType;
 };
 
-const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceOrder }) => {
+const Checkout = ({
+  cartItems,
+  shippingPrice,
+  productIds,
+  onBackToCart,
+  onPlaceOrder,
+}) => {
   const { t } = useTranslation();
   const [formData, setFormData] = useState({
     customer_name: "",
-    customer_phone: "",
+    customer_phone: "+993 ",
     customer_address: "",
-    deliveryAddress: "null",
     payment_type_id: "",
     notes: "",
     region: "",
   });
 
   const [selectedAddress, setSelectedAddress] = useState(null);
-  const [placeOrder, { isLoading: isPlacingOrder }] = usePlaceOrderMutation();
-  const { data: orderTimes = {} } = useGetOrderTimesQuery();
+  const [placeOrder] = usePlaceOrderMutation();
   const { data: orderPayments = [] } = useGetOrderPaymentsQuery();
   const { data: locationsData } = useGetLocationsQuery();
   const deviceType = useDeviceType();
 
+  // Sepetteki tüm ürünlerin fiyatı 0 mı?
+  const allItemsZeroPrice = cartItems?.every((item) =>
+    isPriceZero(item.product?.price_amount),
+  );
+
   const handleInputChange = (e) => {
     const { name, value } = e.target;
 
     if (name === "customer_phone") {
-      // Always keep the +993 prefix
       const prefix = "+993 ";
+      if (value.length < prefix.length) return;
 
-      // If user is trying to delete the prefix, prevent it
-      if (value.length < prefix.length) {
-        return; // Don't update state, keep the current value
-      }
+      const digits = value
+        .substring(prefix.length)
+        .replace(/\D/g, "")
+        .substring(0, 8);
+      let formatted = prefix + digits.substring(0, 2);
+      if (digits.length > 2) formatted += " " + digits.substring(2);
 
-      // Extract only the digits after the prefix
-      const inputWithoutPrefix = value.substring(prefix.length).replace(/\D/g, "");
-      
-      // Limit to 8 digits max (Turkmenistan mobile number format)
-      const limitedDigits = inputWithoutPrefix.substring(0, 8);
-      
-      // Format with space after first 2 digits
-      let formattedPhone = prefix;
-      if (limitedDigits.length > 0) {
-        formattedPhone += limitedDigits.substring(0, 2);
-        
-        if (limitedDigits.length > 2) {
-          formattedPhone += " " + limitedDigits.substring(2);
-        }
-      }
-      
-      setFormData((prev) => ({
-        ...prev,
-        [name]: formattedPhone,
-      }));
+      setFormData((prev) => ({ ...prev, [name]: formatted }));
     } else {
-      setFormData((prev) => ({
-        ...prev,
-        [name]: value,
-      }));
+      setFormData((prev) => ({ ...prev, [name]: value }));
     }
   };
 
   const handleAddressSelect = (value) => {
     setSelectedAddress(value);
-    const selectedLocation = locationsData?.data?.find(
-      (location) => location.name === value
-    );
-
+    const selectedLocation = locationsData?.data?.find((l) => l.name === value);
     setFormData((prev) => ({
       ...prev,
       address: value,
-      region: selectedLocation ? selectedLocation.region : "",
+      region: selectedLocation?.region || "",
     }));
   };
 
-  // Initialize phone with prefix
-  useEffect(() => {
-    setFormData(prev => ({
-      ...prev,
-      customer_phone: "+993 "
-    }));
-  }, []);
-
-  const formatPhoneNumber = (phoneNumber) => {
-    // Remove the +993 prefix and any spaces
-    return phoneNumber.replace(/^\+993\s*/, "").replace(/\s+/g, "");
-  };
-
   const handleClearAddress = () => {
     setSelectedAddress(null);
-    setFormData((prev) => ({
-      ...prev,
-      address: "",
-    }));
+    setFormData((prev) => ({ ...prev, address: "" }));
   };
 
-  const handleFocus = (event) => {
-    event.target.scrollIntoView({
-      behavior: "smooth",
-      block: "center",
-    });
-  };
+  const handleFocus = (e) =>
+    e.target.scrollIntoView({ behavior: "smooth", block: "center" });
+
+  const formatPhoneNumber = (phone) =>
+    phone.replace(/^\+993\s*/, "").replace(/\s+/g, "");
 
   const getOrderData = () => {
-    // Validation checks
     if (
       !formData.customer_name ||
       !formData.customer_phone ||
       !formData.customer_address ||
       !formData.payment_type_id
     ) {
-      console.error("Missing required fields");
       alert("Please fill in all required fields");
       return null;
     }
 
-    // Set default values for delivery
-    const currentDate = new Date().toISOString().split('T')[0];
-    const defaultTimeSlot = {
-      date: currentDate,
-      hour: "12:00-14:00" // Default time slot
-    };
+    const currentDate = new Date().toISOString().split("T")[0];
 
-    // Prepare data in the format expected by the API
     return {
       customer_name: formData.customer_name,
       customer_phone: formatPhoneNumber(formData.customer_phone),
       customer_address: formData.customer_address,
-      shipping_method: "standard", // Default to standard shipping
+      shipping_method: "standard",
       payment_type_id: formData.payment_type_id,
-      delivery_time: defaultTimeSlot.hour,
-      delivery_at: defaultTimeSlot.date,
+      delivery_time: "12:00-14:00",
+      delivery_at: currentDate,
       region: formData.region || "",
       notes: formData.notes || "",
-      // Add shipping price and product IDs
       shipping_price: shippingPrice,
-      product_ids: productIds // Array of product IDs [1, 3, 4, etc.]
+      product_ids: productIds,
     };
   };
 
-  // Create the place order function
   const handlePlaceOrder = async () => {
     const orderDetails = getOrderData();
     if (!orderDetails) return false;
 
     try {
-      const response = await placeOrder(orderDetails).unwrap();
-
-      console.log("Order placed successfully:", response);
+      await placeOrder(orderDetails).unwrap();
       window.location.href = "/orders";
       return true;
     } catch (error) {
-      console.error("Failed to place order:", error);
-
-      if (
+      const isHtmlResponse =
         error.data &&
         typeof error.data === "string" &&
-        error.data.includes("<!doctype html>")
-      ) {
-        console.error(
-          "Server returned HTML instead of a proper API response"
-        );
-        alert(
-          "There was a problem with the server. Please try again later or contact support."
-        );
-      } else {
-        alert(
-          "Failed to place order. Please check your information and try again."
-        );
-      }
+        error.data.includes("<!doctype html>");
+
+      alert(
+        isHtmlResponse
+          ? "There was a problem with the server. Please try again later."
+          : "Failed to place order. Please check your information and try again.",
+      );
       return false;
     }
   };
 
-  // Expose the function to parent component via callback
   useEffect(() => {
-    if (onPlaceOrder) {
-      onPlaceOrder(handlePlaceOrder);
-    }
+    if (onPlaceOrder) onPlaceOrder(handlePlaceOrder);
   }, [formData, shippingPrice, productIds]);
 
   return (
     <div className={styles.checkoutContainer}>
-      <h2>{t("cart.basket")} ({cartItems?.length || 0})</h2>
+      {/* <h2>{t("cart.basket")} ({cartItems?.length || 0})</h2> */}
       <div className={styles.formSection}>
         <div className={styles.paymentOptions}>
           <h3>{t("checkout.paymentMethod")}:</h3>
@@ -221,15 +163,15 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
               <label
                 htmlFor={`payment${payment.id}`}
                 className={styles.customRadio}
-              ></label>
+              />
               <div
                 className={styles.text}
-                onClick={() => {
+                onClick={() =>
                   setFormData((prev) => ({
                     ...prev,
                     payment_type_id: String(payment.id),
-                  }));
-                }}
+                  }))
+                }
               >
                 <span className={styles.optionTitle}>{payment.name}</span>
                 <span className={styles.optionDesc}>
@@ -256,7 +198,6 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
                 onFocus={handleFocus}
               />
             </div>
-
             <div className={styles.formGroup}>
               <label>{t("checkout.telephone")}*</label>
               <input
@@ -270,7 +211,6 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
               />
             </div>
           </div>
-
           <div className={styles.formRow}>
             <div className={styles.formGroup}>
               <label>{t("checkout.moreAboutYourAddress")}*</label>
@@ -283,7 +223,6 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
                 onFocus={handleFocus}
               />
             </div>
-
             <div className={styles.formGroup}>
               <label>{t("checkout.note")}</label>
               <input
@@ -301,22 +240,17 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
           <ul>
             <li>
               {t(
-                "checkout.Delivery_is_carried_out_in_the_cities_of_Ashgabat_Buzmein_and_Anau"
-              )}
-            </li>
-            {/* <li>
-              {t(
-                "checkout.The_minimum_order_amount_must_be_at_least_50_manat_for_orders_over_150_manat_delivery_is_free"
-              )}
-            </li> */}
-            <li>
-              {t(
-                "checkout.After_you_place_an_order_on_the_website_the_operator_will_call_you_to_confirm_the_order_for_regular_customers_confirmation_is_carried_out_automatically_at_their_request"
+                "checkout.Delivery_is_carried_out_in_the_cities_of_Ashgabat_Buzmein_and_Anau",
               )}
             </li>
             <li>
               {t(
-                "checkout.Payment_is_made_after_you_check_and_accept_the_order_The_amount_of_your_payment_is_indicated_on_the_delivery_persons_payment_document_Payment_is_made_in_cash_and_by_card_in_national_currency_Accepted_and_paid_goods_are_not_subject_to_return"
+                "checkout.After_you_place_an_order_on_the_website_the_operator_will_call_you_to_confirm_the_order_for_regular_customers_confirmation_is_carried_out_automatically_at_their_request",
+              )}
+            </li>
+            <li>
+              {t(
+                "checkout.Payment_is_made_after_you_check_and_accept_the_order_The_amount_of_your_payment_is_indicated_on_the_delivery_persons_payment_document_Payment_is_made_in_cash_and_by_card_in_national_currency_Accepted_and_paid_goods_are_not_subject_to_return",
               )}
             </li>
           </ul>

src/components/HomeBrands/HomeBrands.module.scss

@@ -0,0 +1,92 @@
+.container {
+  max-width: 1336px;
+  margin: 20px auto;
+  width: 100%;
+  @media screen and (max-width: 1023px) {
+    margin: 10px auto;
+  }
+}
+
+.brandsScroll {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+  
+  /* Hide scrollbar for Webkit */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for Firefox, IE, Edge */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.brandCard {
+  flex: 0 0 auto;
+  width: 122px;
+  height: 50px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 8px;
+
+  &:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+
+.logoFallback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.allButton {
+  flex: 0 0 auto;
+  width: 122px;
+  height: 67.6px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  gap: 4px;
+  color: #111827;
+  font-weight: 600;
+  font-size: 14px;
+
+  &:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+    color: #aaaaaa;
+  }
+
+  svg {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .brandCard, .allButton {
+    width: 100px;
+    // height: 79.2px;
+  }
+}

src/components/HomeBrands/index.jsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useGetBrandsQuery } from '../../app/api/brandsApi';
+import styles from './HomeBrands.module.scss';
+import { Logo } from '../Icons';
+import { IoIosArrowForward } from 'react-icons/io';
+
+const HomeBrands = () => {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  // We fetch a larger amount so we have enough to shuffle.
+  const { data: brandsData, isLoading } = useGetBrandsQuery({ limit: 50 });
+
+  const randomBrands = useMemo(() => {
+    if (!brandsData) return [];
+    // Create a shallow copy and shuffle it
+    const shuffled = [...brandsData].sort(() => 0.5 - Math.random());
+    // Pick the first 9 brands
+    return shuffled.slice(0, 8);
+  }, [brandsData]);
+
+  if (isLoading || !brandsData || brandsData.length === 0) return null;
+
+  // "Еще" in ru, "Hemmesi" in tm, "More" in en
+  const getMoreText = () => {
+    const lang = i18n.language;
+    if (lang === 'ru') return 'Еще';
+    if (lang === 'en') return 'More';
+    return 'Hemmesi';
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.brandsScroll}>
+        {randomBrands.map((brand) => (
+          <div 
+            key={brand.id} 
+            className={styles.brandCard}
+            onClick={() => navigate(`/brands/${brand.id}`)}
+          >
+            {brand.media?.[0]?.thumbnail || brand.media?.[0]?.images_800x800 || brand.logo ? (
+              <img
+                src={
+                  brand.media?.[0]?.thumbnail ||
+                  brand.media?.[0]?.images_800x800 ||
+                  brand.logo
+                }
+                alt={brand.name}
+                onError={(e) => {
+                  e.target.style.display = "none";
+                  e.target.nextSibling.style.display = "flex";
+                }}
+              />
+            ) : (
+              <div className={styles.logoFallback}>
+                <Logo width={40} height={40} />
+              </div>
+            )}
+            <div className={styles.logoFallback} style={{ display: "none" }}>
+              <Logo width={40} height={40} />
+            </div>
+          </div>
+        ))}
+        <div 
+          className={styles.allButton}
+          onClick={() => navigate('/brands')}
+        >
+          <span>{getMoreText()}</span>
+          <IoIosArrowForward />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomeBrands;

src/components/Icons/index.jsx

@@ -221,7 +221,7 @@ export const CategoryIcon = () => (
     height={20}
   >
     <path
-      fill="#4b5563"
+      fill="currentColor"
       d="M30 20c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 27 17h-7c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 17 20v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 20 30h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 30 27v-7Zm-15 0c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 12 17H5c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 2 20v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 5 30h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 15 27v-7Zm13 0v7a.997.997 0 0 1-1 1h-7a.997.997 0 0 1-1-1v-7a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Zm-15 0v7a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1v-7a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Zm2-15c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 12 2H5c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 2 5v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 5 15h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 15 12V5Zm15 0c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 27 2h-7c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 17 5v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 20 15h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 30 12V5ZM13 5v7a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Zm15 0v7a.997.997 0 0 1-1 1h-7a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Z"
     ></path>
   </svg>

src/components/Navbar/Navbar.module.scss

@@ -39,7 +39,7 @@
     }
 
     &__satyjy {
-      @media screen and (max-width: 500px) {
+      @media screen and (max-width: 785px) {
         display: none;
       }
     }
@@ -288,7 +288,7 @@
   align-items: center;
   gap: 8px;
   margin-left: auto;
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: 708px) {
     display: none;
   }
 }

src/components/PendingPriceBadge/PendingPriceBadge.module.scss

@@ -0,0 +1,102 @@
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}

src/components/PendingPriceBadge/index.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import styles from "./PendingPriceBadge.module.scss";
+
+const PendingPriceModal = ({ open, onClose, t }) => (
+  <Modal
+    open={open}
+    onOk={onClose}
+    onCancel={onClose}
+    okText={t("common.ok") || "Ok"}
+    cancelButtonProps={{ style: { display: "none" } }}
+    centered
+    title={t("cart.pendingPriceTitle") || "Bahasy anyklamaly"}
+    className="pending-price-modal"
+    width={400}
+  >
+    <p>
+      {t("cart.pendingPriceDesc") ||
+        "Bu sargytdaky bir ýa-da birnäçe harydyň bahasy entek kesgitlenmedik. Operatorymyz siziň bilen habarlaşyp, goşmaça maglumat berer."}
+    </p>
+  </Modal>
+);
+
+const PendingPriceBadge = () => {
+  const { t } = useTranslation();
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setModalVisible(true);
+  };
+
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <span onClick={stopPropagation}>
+      <span
+        className={styles.pendingPriceBadgeWrapper}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+        onClick={handleClick}
+        onTouchEnd={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <span className={styles.pendingPriceBadge}>!</span>
+
+        {tooltipVisible && (
+          <span className={styles.pendingPriceTooltip}>
+            <strong>{t("cart.pendingPriceTitle") || "Bahasyny anyklamaly"}</strong>
+            {t("cart.pendingPriceTooltipDesc") ||
+              "Bu sargytdaky harydyň bahasy kesgitlenmedik. Operator size jaň edip goşmaça maglumat berer."}
+          </span>
+        )}
+      </span>
+
+      <PendingPriceModal
+        open={modalVisible}
+        onClose={() => setModalVisible(false)}
+        t={t}
+      />
+    </span>
+  );
+};
+
+export default PendingPriceBadge;

src/components/ProductCard/index.jsx

@@ -3,36 +3,32 @@ import styles from "./ProductCard.module.scss";
 import { IoMdHeartEmpty, IoMdHeart } from "react-icons/io";
 import { FaShoppingCart } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
-import { debounce } from "lodash";
 import {
   useAddFavoriteMutation,
   useRemoveFavoriteMutation,
+  useGetFavoritesQuery,
 } from "../../app/api/favoritesApi";
-import { useGetFavoritesQuery } from "../../app/api/favoritesApi";
 import {
   useAddToCartMutation,
   useUpdateCartItemMutation,
   useRemoveFromCartMutation,
-  useGetCartQuery,
 } from "../../app/api/cartApi";
 import { Modal } from "antd";
 import { useTranslation } from "react-i18next";
 import { DecreaseIcon, IncreaseIcon } from "../Icons";
 import ImageCarousel from "./imageCarousel/index";
+import { useCart } from "../../app/api/useCart";
 
-// Helper function to strip HTML tags and truncate text
 const truncateDescription = (htmlString, maxLength = 80) => {
   const tempDiv = document.createElement("div");
   tempDiv.innerHTML = htmlString;
   const textContent = tempDiv.textContent || tempDiv.innerText || "";
-  const truncatedText =
-    textContent.length > maxLength
-      ? textContent.substring(0, maxLength).trim() + "..."
-      : textContent;
-  return truncatedText;
+  return textContent.length > maxLength
+    ? textContent.substring(0, maxLength).trim() + "..."
+    : textContent;
 };
 
-import { useCart } from "../../app/api/useCart";
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
 
 const ProductCard = ({
   product,
@@ -45,22 +41,20 @@ const ProductCard = ({
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+
   const [stockErrorModalVisible, setStockErrorModalVisible] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
   const [addFavorite] = useAddFavoriteMutation();
   const [removeFavorite] = useRemoveFavoriteMutation();
   const { data: favoriteProducts = [] } = useGetFavoritesQuery();
-  const [isLoading, setIsLoading] = useState(false);
+
   const [localIsFavorite, setLocalIsFavorite] = useState(
-    favoriteProducts.some((fav) => fav.product?.id === product.id),
-  );
-  // const [isHovered, setIsHovered] = useState(false);
-  const truncatedDesc = truncateDescription(
-    product.description,
-    descriptionMaxLength,
+    favoriteProducts.some((fav) => fav.product?.id === product.id)
   );
 
   const { getCartItem } = useCart();
-
   const [addToCart] = useAddToCartMutation();
   const [updateCartItem] = useUpdateCartItemMutation();
   const [removeFromCart] = useRemoveFromCartMutation();
@@ -69,26 +63,54 @@ const ProductCard = ({
   const [localQuantity, setLocalQuantity] = useState(0);
   const [pendingQuantity, setPendingQuantity] = useState(0);
 
-  // ✅ Cart item değiştiğinde local state'i güncelle
+  const { name, price_amount, old_price_amount, media = [], reviews } = product;
+
+  const truncatedDesc = truncateDescription(product.description, descriptionMaxLength);
+
+  const calculatedDiscount =
+    !product.discount &&
+    old_price_amount &&
+    price_amount &&
+    old_price_amount > price_amount
+      ? Math.round(((old_price_amount - price_amount) / old_price_amount) * 100)
+      : null;
+
   useEffect(() => {
-    const qty = parseInt(
-      cartItem?.quantity || cartItem?.product_quantity || 0,
-      10,
-    );
+    const qty = parseInt(cartItem?.quantity || cartItem?.product_quantity || 0, 10);
     setLocalQuantity(qty);
     setPendingQuantity(qty);
   }, [cartItem]);
 
-  // ✅ Favorite state'i güncelle
   useEffect(() => {
     if (Array.isArray(favoriteProducts)) {
-      const isFav = favoriteProducts.some(
-        (fav) => fav.product?.id === product.id,
+      setLocalIsFavorite(
+        favoriteProducts.some((fav) => fav.product?.id === product.id)
       );
-      setLocalIsFavorite(isFav);
     }
   }, [favoriteProducts, product.id]);
 
+  useEffect(() => {
+    const serverQty = parseInt(cartItem?.quantity || cartItem?.product_quantity || 0, 10);
+
+    if (pendingQuantity === serverQty || pendingQuantity <= 0) return;
+
+    const handler = setTimeout(async () => {
+      try {
+        setIsLoading(true);
+        await updateCartItem({ productId: product.id, quantity: pendingQuantity }).unwrap();
+      } catch {
+        setLocalQuantity(serverQty);
+        setPendingQuantity(serverQty);
+      } finally {
+        setIsLoading(false);
+      }
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [pendingQuantity, cartItem, product.id, updateCartItem]);
+
+  const handleCardClick = () => navigate(`/product/${product.id}`);
+
   const handleAddToCart = async (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -98,51 +120,17 @@ const ProductCard = ({
       return;
     }
 
-    // ✅ Optimistic update
     setLocalQuantity((prev) => prev + 1);
     setPendingQuantity((prev) => prev + 1);
 
     try {
       await addToCart({ productId: product.id, quantity: 1 }).unwrap();
-      // ✅ Başarılı - RTK Query otomatik cache'i güncelleyecek
-    } catch (error) {
-      console.error("Failed to add to cart:", error);
-      // ✅ Hata varsa geri al
+    } catch {
       setLocalQuantity((prev) => prev - 1);
       setPendingQuantity((prev) => prev - 1);
     }
   };
 
-  // ✅ Debounced update - sadece mutation, refetch yok
-  useEffect(() => {
-    const serverQty = parseInt(
-      cartItem?.quantity || cartItem?.product_quantity || 0,
-      10,
-    );
-
-    if (pendingQuantity === serverQty || pendingQuantity <= 0) {
-      return;
-    }
-
-    const handler = setTimeout(async () => {
-      try {
-        setIsLoading(true);
-        await updateCartItem({
-          productId: product.id,
-          quantity: pendingQuantity,
-        }).unwrap();
-      } catch (error) {
-        console.error("Failed to update cart item:", error);
-        setLocalQuantity(serverQty);
-        setPendingQuantity(serverQty);
-      } finally {
-        setIsLoading(false);
-      }
-    }, 500);
-
-    return () => clearTimeout(handler);
-  }, [pendingQuantity, cartItem, product.id, updateCartItem]);
-
   const handleQuantityIncrease = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -165,24 +153,17 @@ const ProductCard = ({
     if (isLoading) return;
 
     if (pendingQuantity <= 1) {
-      // ✅ Sıfıra düşünce direkt sil
       setPendingQuantity(0);
       setLocalQuantity(0);
       setIsLoading(true);
 
       removeFromCart({ productId: product.id })
         .unwrap()
-        .then(() => {
-          // ✅ Başarılı - RTK Query cache'i güncelleyecek
-        })
         .catch(() => {
-          // ✅ Hata varsa geri al
           setLocalQuantity(1);
           setPendingQuantity(1);
         })
-        .finally(() => {
-          setIsLoading(false);
-        });
+        .finally(() => setIsLoading(false));
     } else {
       setLocalQuantity((prev) => prev - 1);
       setPendingQuantity((prev) => prev - 1);
@@ -196,41 +177,21 @@ const ProductCard = ({
     if (isLoading) return;
 
     setIsLoading(true);
-
-    // ✅ Optimistic update
-    setLocalIsFavorite(!localIsFavorite);
+    setLocalIsFavorite((prev) => !prev);
 
     try {
       if (localIsFavorite) {
-        const result = await removeFavorite(product.id).unwrap();
-        // ✅ Başarılı - RTK Query otomatik güncelleyecek
+        await removeFavorite(product.id).unwrap();
       } else {
-        const result = await addFavorite(product.id).unwrap();
-        // ✅ Başarılı - RTK Query otomatik güncelleyecek
+        await addFavorite(product.id).unwrap();
       }
-    } catch (error) {
-      console.error("Failed to toggle favorite:", error);
-      // ✅ Hata varsa geri al
-      setLocalIsFavorite(localIsFavorite);
+    } catch {
+      setLocalIsFavorite((prev) => !prev); // revert
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleCardClick = () => {
-    navigate(`/product/${product.id}`);
-  };
-
-  const [isHovered, setIsHovered] = useState(false);
-
-  const { name, price_amount, old_price_amount, media = [], reviews } = product;
-
-  // Hesaplanmış indirim oranı
-  let calculatedDiscount = null;
-  if (!product.discount && old_price_amount && price_amount && old_price_amount > price_amount) {
-    calculatedDiscount = Math.round(((old_price_amount - price_amount) / old_price_amount) * 100);
-  }
-
   return (
     <>
       <div
@@ -240,9 +201,9 @@ const ProductCard = ({
         onMouseLeave={() => setIsHovered(false)}
       >
         <div className={styles.imageContainer}>
-          {(product.discount || calculatedDiscount) && (
+          {(product.discount > 0 || calculatedDiscount > 0) && (
             <span className={styles.discountBadge}>
-              -{product.discount ? product.discount : calculatedDiscount}%
+              -{product.discount || calculatedDiscount}%
             </span>
           )}
           {product.stock === 0 && (
@@ -250,22 +211,29 @@ const ProductCard = ({
               {t("common.out_of_stock")}
             </span>
           )}
-
-          <ImageCarousel images={media} altText={name} isHovered={isHovered}/>
+          <ImageCarousel images={media} altText={name} isHovered={isHovered} />
         </div>
+
         <div className={styles.productInfo}>
           <h3 className={styles.productName}>{name}</h3>
           <p className={styles.productDescription}>{truncatedDesc}</p>
 
           <div className={styles.priceContainer}>
             <div>
-              <span className={styles.currentPrice}>{price_amount} m.</span>
-              {old_price_amount && (
-                <span className={styles.oldPrice}>{old_price_amount} m.</span>
+              {isPriceZero(price_amount) ? (
+                <span className={styles.currentPrice}> {t("cart.pendingPriceTitle")}</span>
+              ) : (
+                <>
+                  <span className={styles.currentPrice}>{price_amount} m.</span>
+                  {old_price_amount && (
+                    <span className={styles.oldPrice}>{old_price_amount} m.</span>
+                  )}
+                </>
               )}
             </div>
           </div>
         </div>
+
         <div className={styles.actions}>
           {showFavoriteButton && (
             <button
@@ -276,6 +244,7 @@ const ProductCard = ({
               {localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
             </button>
           )}
+
           {showAddToCart && (
             <>
               {localQuantity > 0 ? (

src/i18n/locales/en.js

@@ -38,6 +38,9 @@ export default {
     emptyCartTitle: "Your cart is empty",
     emptyCartMessage: "Looks like you haven't added any items to your cart yet",
     continueShopping: "Continue Shopping",
+    pendingPriceTitle: "Price pending",
+    pendingPriceDesc: "The price of one or more items in this order has not yet been determined. Our operator will contact you to provide additional information.",
+    pendingPriceTooltipDesc: "The price of this item in the order has not been determined. The operator will call you and provide additional information."
   },
   checkout: {
     paymentMethod: "Payment Method",

src/i18n/locales/ru.js

@@ -38,6 +38,9 @@ export default {
     emptyCartTitle: "Ваша корзина пуста",
     emptyCartMessage: "Похоже, вы еще не добавили ни одного товара в корзину",
     continueShopping: "Продолжить покупки",
+    pendingPriceTitle: "Цена уточняется",
+    pendingPriceDesc: "Цена на один или несколько товаров в этом заказе еще не определена. Наш оператор свяжется с вами для предоставления дополнительной информации.",
+    pendingPriceTooltipDesc: "Цена на этот товар в заказе не определена. Оператор позвонит вам и предоставит дополнительную информацию."
   },
   checkout: {
     paymentMethod: "Способ оплаты",

src/i18n/locales/tm.js

@@ -38,6 +38,9 @@ export default {
     emptyCartTitle: "Sebediňiz boş",
     emptyCartMessage: "Sebediňize entek hiç zat goşmadyňyz.",
     continueShopping: "Söwda etmegi dowam etdiriň",
+    pendingPriceTitle: "Bahasyny anyklamaly",
+    pendingPriceDesc: "Bu sargytdaky bir ýa-da birnäçe harydyň bahasy entek kesgitlenmedik. Operatorymyz siziň bilen habarlaşyp, goşmaça maglumat berer.",
+    pendingPriceTooltipDesc: "Bu sargytdaky harydyň bahasy kesgitlenmedik. Operator size jaň edip goşmaça maglumat berer."
   },
   checkout: {
     paymentMethod: "Töleg görnüşi",

src/pages/Cart/CartPage.module.scss

@@ -16,10 +16,9 @@
   .cartHeader {
     display: flex;
     align-items: center;
-    margin-bottom: 12px;
     justify-content: space-between;
     background-color: #f3f4f6;
-    padding-bottom: 15px;
+    padding-top: 10px;
     h2 {
       font-size: 24px;
       font-weight: 700;
@@ -27,11 +26,11 @@
       @media screen and (max-width: 768px) {
         font-size: 16px;
         font-weight: 500;
+        
       }
     }
   }
 }
-
 .cartProducts {
   display: flex;
   justify-content: space-between;
@@ -152,6 +151,7 @@
   @media screen and (max-width: 720px) {
     flex-direction: row-reverse;
     justify-content: space-between;
+    gap:10px;
   }
 
   .price {
@@ -226,7 +226,7 @@
   @media screen and (max-width: 1023px) {
     width: 100%;
     position: static;
-    margin-top: 16px;
+    margin-bottom: 16px;
   }
 
   h3 {
@@ -524,3 +524,106 @@
     }
   }
 }
+
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}

src/pages/Cart/index.jsx

@@ -2,13 +2,10 @@ import React, { useState, useRef, useEffect, useMemo } from "react";
 import styles from "./CartPage.module.scss";
 import { FaTrashAlt } from "react-icons/fa";
 import Checkout from "../../components/Checkout";
-import { ChevronDown, ChevronUp } from "lucide-react";
 import { Modal } from "antd";
 import { useTranslation } from "react-i18next";
 import EmptyCartState from "./emptyCart";
 import {
-  useGetCartQuery,
-  useAddToCartMutation,
   useRemoveFromCartMutation,
   useUpdateCartItemMutation,
   useCleanCartMutation,
@@ -16,10 +13,11 @@ import {
 import { useCart } from "../../app/api/useCart";
 import { DecreaseIcon, IncreaseIcon } from "../../components/Icons";
 import Loader from "../../components/Loader/index";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
 
 const TruncatedDescription = ({ description, maxLength = 100 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
   const stripHtml = (html) => {
     const doc = new DOMParser().parseFromString(html, "text/html");
     return doc.body.textContent || "";
@@ -32,11 +30,9 @@ const TruncatedDescription = ({ description, maxLength = 100 }) => {
     <div className={styles.truncatedDescription}>
       <div
         dangerouslySetInnerHTML={{
-          __html: isExpanded
-            ? description
-            : shouldTruncate
-              ? description.substring(0, maxLength) + "..."
-              : description,
+          __html: shouldTruncate
+            ? description.substring(0, maxLength) + "..."
+            : description,
         }}
       />
     </div>
@@ -44,20 +40,16 @@ const TruncatedDescription = ({ description, maxLength = 100 }) => {
 };
 
 const CartPage = () => {
-  const { cartData, cartItems, isLoading, isError, error } = useCart();
+  const { cartData, cartItems, isLoading } = useCart();
+  const { t } = useTranslation();
 
-  const { t, i18n } = useTranslation();
   const [checkoutStores, setCheckoutStores] = useState({});
-  const [addToCart] = useAddToCartMutation();
   const [removeFromCart] = useRemoveFromCartMutation();
   const [updateCartItem] = useUpdateCartItemMutation();
   const [cleanCart] = useCleanCartMutation();
-  const [isExpanded, setIsExpanded] = useState(false);
-  const expandedRef = useRef(null);
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const [emptyCartModalVisible, setEmptyCartModalVisible] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
-
   const [localQuantities, setLocalQuantities] = useState({});
   const [pendingQuantities, setPendingQuantities] = useState({});
   const [loadingItems, setLoadingItems] = useState({});
@@ -70,43 +62,35 @@ const CartPage = () => {
     width: 400,
   };
 
-  // Convert grouped data to stores array
   const stores = useMemo(() => {
     return Object.entries(cartData)
       .map(([storeSlug, items]) => {
-        if (!items || !items.length) return null;
-
-        // Get store info from first item
+        if (!items?.length) return null;
         const storeInfo = items[0]?.product?.channel?.[0];
-
         return {
           id: storeInfo?.id || storeSlug,
           name: storeInfo?.name || storeSlug,
           slug: storeSlug,
           shipping_price: storeInfo?.shipping_price,
-          items: items,
+          items,
         };
       })
       .filter(Boolean);
   }, [cartData]);
 
-  // ✅ Initialize local quantities from cart items
   useEffect(() => {
-    const newLocalQuantities = {};
-    const newPendingQuantities = {};
-
+    const newLocal = {};
+    const newPending = {};
     cartItems.forEach((item) => {
-      const productId = item.product.id;
-      const quantity = parseInt(item.product_quantity, 10) || 0;
-      newLocalQuantities[productId] = quantity;
-      newPendingQuantities[productId] = quantity;
+      const id = item.product.id;
+      const qty = parseInt(item.product_quantity, 10) || 0;
+      newLocal[id] = qty;
+      newPending[id] = qty;
     });
-
-    setLocalQuantities(newLocalQuantities);
-    setPendingQuantities(newPendingQuantities);
+    setLocalQuantities(newLocal);
+    setPendingQuantities(newPending);
   }, [cartItems]);
 
-  // ✅ Debounced Cart Update - Her ürün için ayrı debounce
   useEffect(() => {
     const timers = {};
 
@@ -114,141 +98,94 @@ const CartPage = () => {
       const serverItem = cartItems.find(
         (item) => String(item.product.id) === String(productId),
       );
-      const serverQuantity = serverItem
+      const serverQty = serverItem
         ? parseInt(serverItem.product_quantity, 10)
         : 0;
-      const pendingQuantity = pendingQuantities[productId];
+      const pendingQty = pendingQuantities[productId];
 
-      // Değişiklik yoksa veya 0 ise (Delete modalı tetikler) bir şey yapma
       if (
-        pendingQuantity === undefined ||
-        pendingQuantity === serverQuantity ||
-        pendingQuantity <= 0
-      ) {
+        pendingQty === undefined ||
+        pendingQty === serverQty ||
+        pendingQty <= 0
+      )
         return;
-      }
 
       timers[productId] = setTimeout(async () => {
         try {
           setLoadingItems((prev) => ({ ...prev, [productId]: true }));
-          await updateCartItem({
-            productId,
-            quantity: pendingQuantity,
-          }).unwrap();
-        } catch (error) {
-          console.error("Failed to update cart:", error);
-          // Hata durumunda rollback
-          setLocalQuantities((prev) => ({
-            ...prev,
-            [productId]: serverQuantity,
-          }));
-          setPendingQuantities((prev) => ({
-            ...prev,
-            [productId]: serverQuantity,
-          }));
+          await updateCartItem({ productId, quantity: pendingQty }).unwrap();
+        } catch {
+          setLocalQuantities((prev) => ({ ...prev, [productId]: serverQty }));
+          setPendingQuantities((prev) => ({ ...prev, [productId]: serverQty }));
         } finally {
           setLoadingItems((prev) => ({ ...prev, [productId]: false }));
         }
       }, 500);
     });
 
-    return () => {
-      Object.values(timers).forEach((timer) => clearTimeout(timer));
-    };
+    return () => Object.values(timers).forEach(clearTimeout);
   }, [pendingQuantities, cartItems, updateCartItem]);
 
   const handleQuantityIncrease = (productId) => (event) => {
     event.preventDefault();
     event.stopPropagation();
-
     if (loadingItems[productId]) return;
 
-    const item = cartItems.find((item) => item.product.id === productId);
-    if (!item) return;
+    const item = cartItems.find((i) => i.product.id === productId);
+    if (!item || localQuantities[productId] >= item.product.stock) return;
 
-    if (localQuantities[productId] >= item.product.stock) {
-      return;
-    }
-
-    const newQuantity = (localQuantities[productId] || 0) + 1;
-    setLocalQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
-    setPendingQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
+    const newQty = (localQuantities[productId] || 0) + 1;
+    setLocalQuantities((prev) => ({ ...prev, [productId]: newQty }));
+    setPendingQuantities((prev) => ({ ...prev, [productId]: newQty }));
   };
 
   const handleQuantityDecrease = (productId) => (event) => {
     event.preventDefault();
     event.stopPropagation();
-
     if (loadingItems[productId]) return;
 
-    const currentQuantity = localQuantities[productId] || 0;
-
-    if (currentQuantity <= 1) {
+    const currentQty = localQuantities[productId] || 0;
+    if (currentQty <= 1) {
       showDeleteConfirm(productId);
       return;
     }
 
-    const newQuantity = currentQuantity - 1;
-    setLocalQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
-    setPendingQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
+    const newQty = currentQty - 1;
+    setLocalQuantities((prev) => ({ ...prev, [productId]: newQty }));
+    setPendingQuantities((prev) => ({ ...prev, [productId]: newQty }));
   };
 
-  const calculateStoreTotal = (storeItems) => {
-    return storeItems.reduce((sum, item) => {
-      const itemPrice = parseFloat(item.product.price_amount) || 0;
-      const itemQuantity = parseInt(item.product_quantity, 10) || 0;
-      return sum + itemPrice * itemQuantity;
+  const getStoreShippingPrice = (store) =>
+    store.shipping_price != null ? parseFloat(store.shipping_price) : 20;
+
+  // Store içinde fiyatsız ürün var mı?
+  const storeHasZeroPriceItem = (storeItems) =>
+    storeItems.some((item) => isPriceZero(item.product.price_amount));
+
+  const calculateStoreTotal = (storeItems) =>
+    storeItems.reduce((sum, item) => {
+      return (
+        sum +
+        (parseFloat(item.product.price_amount) || 0) *
+          (parseInt(item.product_quantity, 10) || 0)
+      );
     }, 0);
-  };
 
-  const getStoreShippingPrice = (store) => {
-    return store.shipping_price !== null && store.shipping_price !== undefined
-      ? parseFloat(store.shipping_price)
-      : 20;
-  };
-
-  const handleCheckout = (storeId) => {
+  const handleCheckout = (storeId) =>
     setCheckoutStores((prev) => ({ ...prev, [storeId]: true }));
-  };
 
-  const handleBackToCart = (storeId) => {
+  const handleBackToCart = (storeId) =>
     setCheckoutStores((prev) => ({ ...prev, [storeId]: false }));
-  };
 
-  const handleOrderSubmit = async (storeId, storeItems) => {
+  const handleOrderSubmit = async (storeId) => {
     if (checkoutStores[storeId] && checkoutRefs.current[storeId]) {
       const success = await checkoutRefs.current[storeId]();
-      if (success) {
-        setCheckoutStores((prev) => ({ ...prev, [storeId]: false }));
-      }
+      if (success) setCheckoutStores((prev) => ({ ...prev, [storeId]: false }));
     } else {
       handleCheckout(storeId);
     }
   };
 
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (expandedRef.current && !expandedRef.current.contains(event.target)) {
-        setIsExpanded(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
   const showDeleteConfirm = (productId) => {
     setItemToDelete(productId);
     setDeleteModalVisible(true);
@@ -258,48 +195,41 @@ const CartPage = () => {
     if (itemToDelete) {
       try {
         await removeFromCart({ productId: itemToDelete }).unwrap();
-
         setLocalQuantities((prev) => {
-          const newState = { ...prev };
-          delete newState[itemToDelete];
-          return newState;
+          const s = { ...prev };
+          delete s[itemToDelete];
+          return s;
         });
         setPendingQuantities((prev) => {
-          const newState = { ...prev };
-          delete newState[itemToDelete];
-          return newState;
+          const s = { ...prev };
+          delete s[itemToDelete];
+          return s;
         });
-      } catch (error) {
-        console.error("Failed to remove item:", error);
+      } catch (e) {
+        console.error("Failed to remove item:", e);
       }
     }
     setDeleteModalVisible(false);
     setItemToDelete(null);
   };
 
-  const showEmptyCartConfirm = () => {
-    setEmptyCartModalVisible(true);
-  };
-
   const handleEmptyCartConfirm = async () => {
     try {
       await cleanCart().unwrap();
-
       setLocalQuantities({});
       setPendingQuantities({});
       setCheckoutStores({});
-    } catch (error) {
-      console.error("Failed to clean cart:", error);
+    } catch (e) {
+      console.error("Failed to clean cart:", e);
     }
     setEmptyCartModalVisible(false);
   };
 
-  const getTotalItemCount = () => {
-    return cartItems.reduce(
+  const getTotalItemCount = () =>
+    cartItems.reduce(
       (sum, item) => sum + parseInt(item.product_quantity, 10),
       0,
     );
-  };
 
   return (
     <div className={styles.cartContainer}>
@@ -339,21 +269,20 @@ const CartPage = () => {
                 <h2>
                   {t("cart.basket")} ({getTotalItemCount()})
                 </h2>
-                <div>
-                  <button
-                    className={styles.deleteBtn}
-                    style={{ padding: "4px 12px" }}
-                    onClick={showEmptyCartConfirm}
-                  >
-                    <FaTrashAlt /> {t("cart.clearCart")}
-                  </button>
-                </div>
+                <button
+                  className={styles.deleteBtn}
+                  style={{ padding: "4px 12px" }}
+                  onClick={() => setEmptyCartModalVisible(true)}
+                >
+                  <FaTrashAlt /> {t("cart.clearCart")}
+                </button>
               </div>
 
               {stores.map((store) => {
                 const shippingPrice = getStoreShippingPrice(store);
                 const storeTotal = calculateStoreTotal(store.items);
                 const totalWithShipping = storeTotal + shippingPrice;
+                const hasZeroPrice = storeHasZeroPriceItem(store.items);
 
                 return (
                   <div key={store.id} className={styles.storeSection}>
@@ -363,8 +292,8 @@ const CartPage = () => {
                         shippingPrice={shippingPrice}
                         productIds={store.items.map((item) => item.product.id)}
                         onBackToCart={() => handleBackToCart(store.id)}
-                        onPlaceOrder={(placeOrderFn) => {
-                          checkoutRefs.current[store.id] = placeOrderFn;
+                        onPlaceOrder={(fn) => {
+                          checkoutRefs.current[store.id] = fn;
                         }}
                       />
                     ) : (
@@ -391,10 +320,9 @@ const CartPage = () => {
                                 </div>
                                 <div className={styles.priceQuantity}>
                                   <span className={styles.price}>
-                                    {(
-                                      parseFloat(item.product.price_amount) || 0
-                                    ).toFixed(2)}{" "}
-                                    m.
+                                    {isPriceZero(item.product.price_amount)
+                                      ? t("cart.pendingPriceTitle")
+                                      : `${parseFloat(item.product.price_amount).toFixed(2)} m.`}
                                   </span>
                                   <div className={styles.quantityControls}>
                                     <button
@@ -441,26 +369,38 @@ const CartPage = () => {
                       </div>
                     )}
 
+                    {/* ✅ Store Summary - fiyatsız ürün varsa "Baha anyklamak" */}
                     <div className={styles.storeSummary}>
                       <div className={styles.cartContent}>
                         <h3>
                           {store.name} - {t("cart.basket")}:
                         </h3>
-                        <div className={styles.summaryRow}>
-                          <span>{t("cart.price")}:</span>
-                          <span>{storeTotal.toFixed(2)} m.</span>
-                        </div>
-                        <div className={styles.summaryRow}>
-                          <span>{t("cart.delivery")}:</span>
-                          <span>{shippingPrice.toFixed(2)} m.</span>
-                        </div>
-                        <div className={styles.summaryRow}>
-                          <span>{t("cart.total")}:</span>
-                          <span>{totalWithShipping.toFixed(2)} m.</span>
-                        </div>
+                        {hasZeroPrice ? (
+                          <div className={styles.summaryRow}>
+                            <span>{t("cart.total")}:</span>
+                            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+                               {t("cart.pendingPriceTitle")} <PendingPriceBadge />
+                            </span>
+                          </div>
+                        ) : (
+                          <>
+                            <div className={styles.summaryRow}>
+                              <span>{t("cart.price")}:</span>
+                              <span>{storeTotal.toFixed(2)} m.</span>
+                            </div>
+                            <div className={styles.summaryRow}>
+                              <span>{t("cart.delivery")}:</span>
+                              <span>{shippingPrice.toFixed(2)} m.</span>
+                            </div>
+                            <div className={styles.summaryRow}>
+                              <span>{t("cart.total")}:</span>
+                              <span>{totalWithShipping.toFixed(2)} m.</span>
+                            </div>
+                          </>
+                        )}
                       </div>
                       <button
-                        onClick={() => handleOrderSubmit(store.id, store.items)}
+                        onClick={() => handleOrderSubmit(store.id)}
                         className={styles.checkoutBtn}
                       >
                         {checkoutStores[store.id]
@@ -472,7 +412,6 @@ const CartPage = () => {
                 );
               })}
             </div>
-
             {/* Mobile sticky summary */}
             {/* <div className={styles.container}>
               <div className={styles.summaryCard} ref={expandedRef}>

src/pages/Category/CategoryPage.module.scss

@@ -128,6 +128,7 @@
   gap: 6px;
   flex: 1;
   min-width: 0;
+  
 }
 
 .priceLabel {
@@ -144,7 +145,7 @@
   font-size: 14px;
   background: #fff;
   transition: all 0.2s ease;
-
+width: 85%;
   &::placeholder {
     color: #bbb;
   }

src/pages/Category/hooks/useCategoryProducts.js

@@ -1,7 +1,7 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import {
-  useGetCategoryProductsQuery,
   useLazyGetAllCategoryProductsPaginatedQuery,
+  useGetCategoryProductsQuery,
 } from "../../../app/api/categories";
 import { useLazyGetBrandProductsQuery } from "../../../app/api/brandsApi";
 import { useLazyGetCollectionProductsPaginatedQuery } from "../../../app/api/collectionsApi";
@@ -19,50 +19,16 @@ const useCategoryProducts = ({
   maxPrice,
   sorting,
   searchQuery,
+  initialProducts = [],
+  initialHasMore = true,
 }) => {
-  const [products, setProducts] = useState([]);
-  const [hasMore, setHasMore] = useState(true);
+  const [products, setProducts] = useState(initialProducts);
+  const [hasMore, setHasMore] = useState(initialHasMore);
+  const [isFetching, setIsFetching] = useState(false);
 
-  const isFetchingRef = useRef(false);
-  const lastFetchKeyRef = useRef(null);
-  const abortControllerRef = useRef(null);
-
-  const contextId = useMemo(() => {
-    const parts = [
-      selectedFilterCategory && `fcat-${selectedFilterCategory}`,
-      categoryId && `cat-${categoryId}`,
-      brandId && `brand-${brandId}`,
-      collectionId && `col-${collectionId}`,
-      selectedFilterBrand && `fbrand-${selectedFilterBrand}`,
-      minPrice && `min-${minPrice}`,
-      maxPrice && `max-${maxPrice}`,
-      sorting && `sort-${sorting}`,
-    ].filter(Boolean);
-    return parts.join("|") || "none";
-  }, [
-    selectedFilterCategory,
-    categoryId,
-    brandId,
-    collectionId,
-    selectedFilterBrand,
-    minPrice,
-    maxPrice,
-    sorting,
-  ]);
-
-  const fetchParams = useMemo(
-    () => ({
-      page: currentPage,
-      limit: 24,
-      brands: selectedFilterBrand || undefined,
-      min_price: minPrice || undefined,
-      max_price: maxPrice || undefined,
-      sorting: sorting || undefined,
-    }),
-    [currentPage, selectedFilterBrand, minPrice, maxPrice, sorting],
-  );
-
-  const fetchKey = `${contextId}-p${currentPage}`;
+  const activeRequestId = useRef(0);
+  // Tüm parametreleri ref'te tut — stale closure'ı tamamen engelle
+  const paramsRef = useRef({});
 
   const shouldUseBaseQuery =
     categoryId &&
@@ -72,238 +38,146 @@ const useCategoryProducts = ({
     !brandId &&
     !collectionId;
 
-  const {
-    data: paginatedCategoryProducts,
-    isLoading: categoryLoading,
-    isFetching: categoryFetching,
-  } = useGetCategoryProductsQuery(
-    {
-      categoryId: categoryId,
-      page: currentPage,
-      min_price: minPrice || undefined,
-      max_price: maxPrice || undefined,
-      brands: selectedFilterBrand || undefined,
-      sorting: sorting || undefined,
-    },
-    {
-      skip: !shouldUseBaseQuery,
-    },
-  );
+  const { data: baseQueryData, isFetching: baseQueryFetching } =
+    useGetCategoryProductsQuery(
+      {
+        categoryId,
+        page: currentPage,
+        min_price: minPrice || undefined,
+        max_price: maxPrice || undefined,
+        brands: selectedFilterBrand || undefined,
+        sorting: sorting || undefined,
+      },
+      { skip: !shouldUseBaseQuery }
+    );
 
-  const [
-    fetchCategoryPaginated,
-    {
-      data: lazyCategoryProducts,
-      isLoading: lazyCategoryLoading,
-      isFetching: lazyCategoryFetching,
-      reset: resetCategoryPaginated,
-    },
-  ] = useLazyGetAllCategoryProductsPaginatedQuery();
-
-  const [
-    fetchBrandPaginated,
-    {
-      data: paginatedBrandProducts,
-      isLoading: brandPaginatedLoading,
-      isFetching: brandFetching,
-      reset: resetBrandPaginated,
-    },
-  ] = useLazyGetBrandProductsQuery();
-
-  const [
-    fetchCollectionPaginated,
-    {
-      data: paginatedCollectionProducts,
-      isLoading: collectionPaginatedLoading,
-      isFetching: collectionFetching,
-      reset: resetCollectionPaginated,
-    },
-  ] = useLazyGetCollectionProductsPaginatedQuery();
+  const [fetchCategoryPaginated] = useLazyGetAllCategoryProductsPaginatedQuery();
+  const [fetchBrandPaginated] = useLazyGetBrandProductsQuery();
+  const [fetchCollectionPaginated] = useLazyGetCollectionProductsPaginatedQuery();
 
+  // Base query handler
   useEffect(() => {
-    setProducts([]);
-    setHasMore(true);
-
-    resetCategoryPaginated?.();
-    resetBrandPaginated?.();
-    resetCollectionPaginated?.();
-
-    lastFetchKeyRef.current = null;
-    isFetchingRef.current = false;
-
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-  }, [
-    contextId,
-    resetCategoryPaginated,
-    resetBrandPaginated,
-    resetCollectionPaginated,
-  ]);
+    if (!shouldUseBaseQuery || !baseQueryData) return;
+    const data = baseQueryData.data || [];
+    const hasNextPage = !!baseQueryData.pagination?.next_page_url;
+    setProducts((prev) => {
+      if (currentPage === 1) return data;
+      const existingIds = new Set(prev.map((p) => p.id));
+      const newItems = data.filter((p) => !existingIds.has(p.id));
+      return newItems.length > 0 ? [...prev, ...newItems] : prev;
+    });
+    setHasMore(hasNextPage);
+  }, [baseQueryData, currentPage, shouldUseBaseQuery]);
 
+  // Her fetch çağrısını doğrudan effect içinde yap — useCallback kaldırıldı
   useEffect(() => {
-    if (searchQuery) return;
+    if (shouldUseBaseQuery || searchQuery) return;
 
-    if (lastFetchKeyRef.current === fetchKey) {
-      return;
-    }
+    // Parametreleri snapshot al
+    const snapshot = {
+      currentPage,
+      selectedFilterCategory,
+      categoryId,
+      isSubCategory,
+      brandId,
+      collectionId,
+      selectedFilterBrand,
+      minPrice,
+      maxPrice,
+      sorting,
+    };
 
-    if (isFetchingRef.current) {
-      return;
-    }
+    const requestId = ++activeRequestId.current;
+    setIsFetching(true);
 
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-
-    abortControllerRef.current = new AbortController();
-    isFetchingRef.current = true;
-    lastFetchKeyRef.current = fetchKey;
-
-    const executeFetch = async () => {
+    const run = async () => {
       try {
-        if (selectedFilterCategory) {
-          await fetchCategoryPaginated({
-            category: {
-              id: selectedFilterCategory,
-              children: [],
-            },
-            ...fetchParams,
-          });
+        const params = {
+          page: snapshot.currentPage,
+          limit: 24,
+          brands: snapshot.selectedFilterBrand || undefined,
+          min_price: snapshot.minPrice || undefined,
+          max_price: snapshot.maxPrice || undefined,
+          sorting: snapshot.sorting || undefined,
+        };
+
+        let result = null;
+
+        if (snapshot.selectedFilterCategory) {
+          result = await fetchCategoryPaginated({
+            category: { id: snapshot.selectedFilterCategory, children: [] },
+            ...params,
+          }).unwrap();
+        } else if (snapshot.categoryId && snapshot.isSubCategory) {
+          result = await fetchCategoryPaginated({
+            category: { id: parseInt(snapshot.categoryId), children: [] },
+            ...params,
+          }).unwrap();
+        } else if (snapshot.brandId) {
+          result = await fetchBrandPaginated({
+            id: snapshot.brandId,
+            ...params,
+          }).unwrap();
+        } else if (snapshot.collectionId) {
+          result = await fetchCollectionPaginated({
+            collectionId: snapshot.collectionId,
+            ...params,
+          }).unwrap();
+        }
+
+        if (requestId !== activeRequestId.current) return;
+
+        if (!result) {
+          setHasMore(false);
           return;
         }
 
-        if (categoryId && isSubCategory) {
-          await fetchCategoryPaginated({
-            category: {
-              id: parseInt(categoryId),
-              children: [],
-            },
-            ...fetchParams,
-          });
-          return;
-        }
+        const data = result.data || [];
+        const hasNextPage =
+          result.pagination?.hasMorePages ||
+          !!result.pagination?.next_page_url ||
+          false;
 
-        if (brandId) {
-          await fetchBrandPaginated({
-            id: brandId,
-            ...fetchParams,
-          });
-          return;
-        }
+        setProducts((prev) => {
+          if (snapshot.currentPage === 1) return data;
+          const existingIds = new Set(prev.map((p) => p.id));
+          const newItems = data.filter((p) => !existingIds.has(p.id));
+          return newItems.length > 0 ? [...prev, ...newItems] : prev;
+        });
 
-        if (collectionId) {
-          await fetchCollectionPaginated({
-            collectionId,
-            ...fetchParams,
-          });
-          return;
-        }
-      } catch (error) {
-        if (error.name !== "AbortError") {
-          console.error("Fetch error:", error);
-        }
+        setHasMore(data.length > 0 ? hasNextPage : false);
+      } catch (err) {
+        if (requestId !== activeRequestId.current) return;
+        console.error("Fetch error:", err);
+        setHasMore(false);
       } finally {
-        isFetchingRef.current = false;
+        if (requestId === activeRequestId.current) {
+          setIsFetching(false);
+        }
       }
     };
 
-    executeFetch();
-
-    return () => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-    };
+    run();
   }, [
-    fetchKey,
+    // useCallback YOK — her dependency değişince effect direkt çalışır
+    shouldUseBaseQuery,
     searchQuery,
-    selectedFilterBrand,
+    currentPage,
     selectedFilterCategory,
     categoryId,
     isSubCategory,
     brandId,
     collectionId,
-    fetchParams,
+    selectedFilterBrand,
+    minPrice,
+    maxPrice,
+    sorting,
     fetchCategoryPaginated,
     fetchBrandPaginated,
     fetchCollectionPaginated,
   ]);
 
-  useEffect(() => {
-    const updateProducts = (newData, hasNextPage) => {
-      if (!newData || newData.length === 0) {
-        if (currentPage === 1) {
-          setProducts([]);
-          setHasMore(false);
-        }
-        return;
-      }
-
-      setProducts((prev) => {
-        if (currentPage === 1) {
-          return newData;
-        }
-
-        const existingIds = new Set(prev.map((p) => p.id));
-        const newProducts = newData.filter((p) => !existingIds.has(p.id));
-
-        return newProducts.length > 0 ? [...prev, ...newProducts] : prev;
-      });
-
-      setHasMore(hasNextPage);
-    };
-
-    if (paginatedCategoryProducts && shouldUseBaseQuery) {
-      updateProducts(
-        paginatedCategoryProducts.data || [],
-        !!paginatedCategoryProducts.pagination?.next_page_url,
-      );
-      return;
-    }
-
-    if (lazyCategoryProducts) {
-      updateProducts(
-        lazyCategoryProducts.data || [],
-        lazyCategoryProducts.pagination?.hasMorePages || false,
-      );
-      return;
-    }
-
-    // Brand products
-    if (paginatedBrandProducts) {
-      updateProducts(
-        paginatedBrandProducts.data || [],
-        !!paginatedBrandProducts.pagination?.next_page_url,
-      );
-      return;
-    }
-
-    if (paginatedCollectionProducts) {
-      updateProducts(
-        paginatedCollectionProducts.data || [],
-        !!paginatedCollectionProducts.pagination?.next_page_url,
-      );
-    }
-  }, [
-    paginatedCategoryProducts,
-    lazyCategoryProducts,
-    paginatedBrandProducts,
-    paginatedCollectionProducts,
-    currentPage,
-    shouldUseBaseQuery,
-  ]);
-
-  const isLoading =
-    categoryLoading ||
-    lazyCategoryLoading ||
-    brandPaginatedLoading ||
-    collectionPaginatedLoading ||
-    categoryFetching ||
-    lazyCategoryFetching ||
-    brandFetching ||
-    collectionFetching;
+  const isLoading = shouldUseBaseQuery ? baseQueryFetching : isFetching;
 
   return {
     products,

src/pages/Category/index.jsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState, useMemo, useRef } from "react";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -25,18 +23,43 @@ const CategoryPage = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const [pageState, setPageState] = useState({
+  const routeKey = useMemo(
+    () => `${categoryId || "x"}-${collectionId || "x"}-${brandId || "x"}`,
+    [categoryId, collectionId, brandId],
+  );
+
+  const getSavedState = (key, defaultVal) => {
+    try {
+      const saved = sessionStorage.getItem(`category_${key}_${routeKey}`);
+      if (saved) return JSON.parse(saved);
+    } catch (e) {
+      console.error(e);
+    }
+    return defaultVal;
+  };
+
+  const getSavedStateByKey = (route, key) => {
+    try {
+      const saved = sessionStorage.getItem(`category_${key}_${route}`);
+      if (saved) return JSON.parse(saved);
+    } catch (e) {
+      console.error(e);
+    }
+    return null;
+  };
+
+  const [pageState, setPageState] = useState(() => getSavedState("pageState", {
     currentPage: 1,
     minPrice: "",
     maxPrice: "",
     sorting: "",
-  });
+  }));
 
-  const [filterState, setFilterState] = useState({
+  const [filterState, setFilterState] = useState(() => getSavedState("filterState", {
     selectedFilterCategory: null,
     selectedFilterBrand: null,
     brandSearchQuery: "",
-  });
+  }));
 
   const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -47,11 +70,6 @@ const CategoryPage = () => {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  const routeKey = useMemo(
-    () => `${categoryId || "x"}-${collectionId || "x"}-${brandId || "x"}`,
-    [categoryId, collectionId, brandId],
-  );
-
   const prevRouteRef = useRef(routeKey);
   const isInitialMount = useRef(true);
 
@@ -97,6 +115,8 @@ const CategoryPage = () => {
     maxPrice: pageState.maxPrice,
     sorting: pageState.sorting,
     searchQuery,
+    initialProducts: getSavedState("products", []),
+    initialHasMore: getSavedState("hasMore", true),
   });
   const isMobilePhoneView =
     (Number(categoryId) === 531 ||
@@ -106,6 +126,10 @@ const CategoryPage = () => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       prevRouteRef.current = routeKey;
+      const savedScroll = getSavedState("scroll", 0);
+      if (savedScroll > 0) {
+        setTimeout(() => window.scrollTo(0, savedScroll), 100);
+      }
       return;
     }
 
@@ -113,14 +137,36 @@ const CategoryPage = () => {
 
     prevRouteRef.current = routeKey;
 
-    setAllProducts([]);
-    setHasMore(true);
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
-    setFilterState({
-      selectedFilterCategory: null,
-      selectedFilterBrand: null,
-      brandSearchQuery: "",
-    });
+    const savedPageState = getSavedStateByKey(routeKey, "pageState");
+    const savedFilterState = getSavedStateByKey(routeKey, "filterState");
+    const savedProducts = getSavedStateByKey(routeKey, "products");
+    const savedHasMore = getSavedStateByKey(routeKey, "hasMore");
+
+    if (savedPageState && savedFilterState && savedProducts) {
+      setPageState(savedPageState);
+      setFilterState(savedFilterState);
+      setAllProducts(savedProducts);
+      setHasMore(savedHasMore ?? true);
+      const savedScroll = getSavedStateByKey(routeKey, "scroll");
+      if (savedScroll !== null) {
+        setTimeout(() => window.scrollTo(0, savedScroll), 100);
+      }
+    } else {
+      setAllProducts([]);
+      setHasMore(true);
+      setPageState({
+        currentPage: 1,
+        minPrice: "",
+        maxPrice: "",
+        sorting: "",
+      });
+      setFilterState({
+        selectedFilterCategory: null,
+        selectedFilterBrand: null,
+        brandSearchQuery: "",
+      });
+      window.scrollTo(0, 0);
+    }
 
     if (location.state?.clearFilters) {
       navigate(location.pathname, { replace: true, state: {} });
@@ -134,6 +180,46 @@ const CategoryPage = () => {
     setHasMore,
   ]);
 
+  const stateRef = useRef();
+  useEffect(() => {
+    stateRef.current = { routeKey, pageState, filterState, allProducts, hasMore };
+  }, [routeKey, pageState, filterState, allProducts, hasMore]);
+
+  useEffect(() => {
+    if (stateRef.current) {
+      try {
+        const { routeKey: key, pageState: ps, filterState: fs, allProducts: ap, hasMore: hm } = stateRef.current;
+        sessionStorage.setItem(`category_pageState_${key}`, JSON.stringify(ps));
+        sessionStorage.setItem(`category_filterState_${key}`, JSON.stringify(fs));
+        sessionStorage.setItem(`category_products_${key}`, JSON.stringify(ap));
+        sessionStorage.setItem(`category_hasMore_${key}`, JSON.stringify(hm));
+      } catch (error) {
+        console.warn("Could not save category state to sessionStorage", error);
+      }
+    }
+  }, [pageState, filterState, allProducts, hasMore, routeKey]);
+
+  useEffect(() => {
+    let scrollTimeout;
+    const handleScroll = () => {
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        if (stateRef.current) {
+          try {
+            sessionStorage.setItem(`category_scroll_${stateRef.current.routeKey}`, JSON.stringify(window.scrollY));
+          } catch (e) {
+            // ignore
+          }
+        }
+      }, 100);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+    };
+  }, []);
+
   const filteredProducts = useMemo(() => {
     let list = searchQuery ? searchResults : allProducts;
 
@@ -189,7 +275,12 @@ const CategoryPage = () => {
       selectedFilterBrand: null,
     }));
 
-    setPageState((prev) => ({ currentPage: 1, minPrice: "", maxPrice: "", sorting: prev.sorting }));
+    setPageState((prev) => ({
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
+      sorting: prev.sorting,
+    }));
     setAllProducts([]);
     setHasMore(true);
 
@@ -197,15 +288,15 @@ const CategoryPage = () => {
   };
 
   const handleFilterCategoryDeselect = () => {
-    setFilterState((prev) => ({
+    setFilterState((prev) => ({ ...prev, selectedFilterCategory: null }));
+    setPageState((prev) => ({
       ...prev,
-      selectedFilterCategory: null,
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
     }));
-
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
     setAllProducts([]);
     setHasMore(true);
-
     if (categoryId) fetchFilters({ category_id: categoryId });
   };
 
@@ -215,32 +306,29 @@ const CategoryPage = () => {
       selectedFilterBrand: brandId,
     }));
 
-    setPageState((prev) => ({ currentPage: 1, minPrice: "", maxPrice: "", sorting: prev.sorting }));
+    setPageState((prev) => ({
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
+      sorting: prev.sorting,
+    }));
     setAllProducts([]);
     setHasMore(true);
   };
 
   const handleFilterBrandDeselect = () => {
-    setFilterState((prev) => ({
+    setFilterState((prev) => ({ ...prev, selectedFilterBrand: null }));
+    setPageState((prev) => ({
       ...prev,
-      selectedFilterBrand: null,
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
     }));
-
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
     setAllProducts([]);
     setHasMore(true);
   };
 
   const handleCategoryClick = (targetId) => {
-    setFilterState({
-      selectedFilterCategory: null,
-      selectedFilterBrand: null,
-      brandSearchQuery: "",
-    });
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
-    setAllProducts([]);
-    setHasMore(true);
-
     navigate(`/category/${targetId}`, {
       replace: false,
       state: { clearFilters: true, timestamp: Date.now() },
@@ -314,31 +402,22 @@ const CategoryPage = () => {
           minPrice={pageState.minPrice}
           maxPrice={pageState.maxPrice}
           onMinPriceChange={(value) => {
-            setPageState((prev) => {
-              // Sadece aktif bir değer girilirse ürünleri sıfırla
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                minPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              minPrice: value,
+              currentPage: 1,
+            }));
           }}
           onMaxPriceChange={(value) => {
-            setPageState((prev) => {
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                maxPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              maxPrice: value,
+              currentPage: 1,
+            }));
           }}
           onCategorySelect={handleFilterCategorySelect}
           onCategoryDeselect={handleFilterCategoryDeselect}
@@ -351,16 +430,9 @@ const CategoryPage = () => {
           onSortingChange={(value) => {
             setPageState((prev) => {
               const newSorting = prev.sorting === value ? "" : value;
-              // Sadece aktif bir sort seçilirse ürünleri sıfırla
-              if (newSorting !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                sorting: newSorting,
-                currentPage: 1,
-              };
+              setAllProducts([]); // her zaman sıfırla
+              setHasMore(true);
+              return { ...prev, sorting: newSorting, currentPage: 1 };
             });
           }}
         />
@@ -377,30 +449,22 @@ const CategoryPage = () => {
           minPrice={pageState.minPrice}
           maxPrice={pageState.maxPrice}
           onMinPriceChange={(value) => {
-            setPageState((prev) => {
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                minPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              minPrice: value,
+              currentPage: 1,
+            }));
           }}
           onMaxPriceChange={(value) => {
-            setPageState((prev) => {
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                maxPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              maxPrice: value,
+              currentPage: 1,
+            }));
           }}
           onCategorySelect={handleFilterCategorySelect}
           onCategoryDeselect={handleFilterCategoryDeselect}
@@ -413,15 +477,9 @@ const CategoryPage = () => {
           onSortingChange={(value) => {
             setPageState((prev) => {
               const newSorting = prev.sorting === value ? "" : value;
-              if (newSorting) {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                sorting: newSorting,
-                currentPage: 1,
-              };
+              setAllProducts([]); // her zaman sıfırla
+              setHasMore(true);
+              return { ...prev, sorting: newSorting, currentPage: 1 };
             });
           }}
         />
@@ -444,9 +502,7 @@ const CategoryPage = () => {
               scrollableTarget={null}
               style={{ overflow: "hidden" }}
               loader={
-                <div
-                  className={`${styles.loaderContainer} `}
-                >
+                <div className={`${styles.loaderContainer} `}>
                   <Loader />
                 </div>
               }

src/pages/OrderDetail/OrderDetail.module.scss

@@ -127,6 +127,7 @@
   border-radius: 4px;
   margin-bottom: 20px;
   display: flex;
+
   @media screen and (max-width: 640px) {
     flex-direction: column;
   }
@@ -140,6 +141,7 @@
   .row {
     display: flex;
     margin-bottom: 10px;
+    gap: 12px;
     @media screen and (max-width: 640px) {
       justify-content: space-between;
     }
@@ -157,10 +159,10 @@
       &:first-child {
         font-weight: 600;
         color: #000;
-        width: 25%;
-        @media screen and (max-width: 640px) {
-          width: 50%;
-        }
+        // width: 25%;
+        // @media screen and (max-width: 640px) {
+        //   width: 50%;
+        // }
       }
 
       &:last-child {
@@ -295,3 +297,106 @@
     }
   }
 }
+
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}

src/pages/OrderDetail/index.jsx

@@ -1,63 +1,63 @@
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import styles from "./OrderDetail.module.scss";
-import { Ban, CircleCheck, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { useGetOrderByIdQuery } from "../../app/api/orderApi"; // Update with your correct path
-import track from "../../assets/track.jpg"; // Keep for delivery service icon
+import { useGetOrderByIdQuery } from "../../app/api/orderApi";
+import track from "../../assets/track.jpg";
 import Loader from "../../components/Loader/index";
 import { Result, Button } from "antd";
-import { useNavigate } from "react-router-dom";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
+
 const OrderDetail = () => {
   const { t } = useTranslation();
-  const { id } = useParams(); // Get the order ID from URL params
-  const { data: orderData, isLoading, error } = useGetOrderByIdQuery(id);
+  const { id } = useParams();
   const navigate = useNavigate();
-  // Format date function
+  const { data: orderData, isLoading, error } = useGetOrderByIdQuery(id);
+
   const formatDate = (dateString) => {
     try {
-      const date = new Date(dateString);
-      return date.toLocaleString("tk-TM", {
+      return new Date(dateString).toLocaleString("tk-TM", {
         day: "2-digit",
         month: "2-digit",
         year: "numeric",
         hour: "2-digit",
         minute: "2-digit",
       });
-    } catch (e) {
+    } catch {
       return dateString;
     }
   };
 
-  // Format delivery time for display
   const formatDeliveryTime = (time, date) => {
     try {
-      const deliveryDate = new Date(date);
-      const formattedDate = deliveryDate.toLocaleDateString("tk-TM", {
+      const formatted = new Date(date).toLocaleDateString("tk-TM", {
         day: "2-digit",
         month: "2-digit",
         year: "numeric",
       });
-      return `${time} (${formattedDate})`;
-    } catch (e) {
-      return `${time}`;
+      return `${time} (${formatted})`;
+    } catch {
+      return time;
     }
   };
 
-  // Calculate total order amount
   const calculateTotal = (orderItems) => {
-    if (!orderItems || !orderItems.length) return 0;
+    if (!orderItems?.length) return null;
+    const hasZero = orderItems.some((item) =>
+      isPriceZero(item.unit_price_amount),
+    );
+    if (hasZero) return null;
     return orderItems
       .reduce(
         (sum, item) => sum + parseFloat(item.unit_price_amount) * item.quantity,
-        0
+        0,
       )
       .toFixed(2);
   };
 
-  // Handle loading state
   if (isLoading) return <Loader />;
 
-  // Handle error state
   if (error)
     return (
       <Result
@@ -72,10 +72,8 @@ const OrderDetail = () => {
       />
     );
 
-  // Handle case where order data is not available
   if (!orderData) return <div className={styles.notFound}>Order not found</div>;
 
-  // Calculate total
   const totalAmount = calculateTotal(orderData.orderItems);
 
   return (
@@ -84,39 +82,10 @@ const OrderDetail = () => {
         <h1>
           {t("order.orderNumber")}: {orderData.id}
         </h1>
-        <div className={styles.Buttons}>
-          {/* <button className={styles.repeatButton}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512"
-              fill="currentColor"
-            >
-              <path d="M480 256c-17.67 0-32 14.31-32 32c0 52.94-43.06 96-96 96H192L192 344c0-9.469-5.578-18.06-14.23-21.94C169.1 318.3 159 319.8 151.9 326.2l-80 72C66.89 402.7 64 409.2 64 416s2.891 13.28 7.938 17.84l80 72C156.4 509.9 162.2 512 168 512c3.312 0 6.615-.6875 9.756-2.062C186.4 506.1 192 497.5 192 488L192 448h160c88.22 0 160-71.78 160-160C512 270.3 497.7 256 480 256zM160 128h159.1L320 168c0 9.469 5.578 18.06 14.23 21.94C337.4 191.3 340.7 192 343.1 192c5.812 0 11.57-2.125 16.07-6.156l80-72C445.1 109.3 448 102.8 448 95.1s-2.891-13.28-7.938-17.84l-80-72c-7.047-6.312-17.19-7.875-25.83-4.094C325.6 5.938 319.1 14.53 319.1 24L320 64H160C71.78 64 0 135.8 0 224c0 17.69 14.33 32 32 32s32-14.31 32-32C64 171.1 107.1 128 160 128z"></path>
-            </svg>{" "}
-            {t("order.repeatOrder")}
-          </button> */}
-          {/* <button className={styles.cancelButton}>
-            {" "}
-            <Ban />
-            {t("order.dropOrder")}
-          </button> */}
-        </div>
+        <div className={styles.Buttons} />
       </div>
-      <div className={styles.content}>
-        {/* Order Status */}
-        {/* <div className={styles.status}>
-          <p className={styles.statusText}>
-            <span className={styles.statusIcon}>
-              <CircleCheck />
-            </span>{" "}
-            {t("order.Your_order_has_been_accepted")}
-          </p>
-          <span className={styles.close}>
-            <X />
-          </span>
-        </div> */}
 
-        {/* Order Details */}
+      <div className={styles.content}>
         <div className={styles.details}>
           <div className={styles.rowContainer}>
             <div className={styles.row}>
@@ -132,7 +101,7 @@ const OrderDetail = () => {
               <span>
                 {formatDeliveryTime(
                   orderData.delivery_time,
-                  orderData.delivery_at
+                  orderData.delivery_at,
                 )}
               </span>
             </div>
@@ -144,11 +113,26 @@ const OrderDetail = () => {
             </div>
             <div className={styles.row}>
               <span>{t("order.sum")}:</span>
-              <span className={styles.total}>{totalAmount} m.</span>
+              <span className={styles.total}>
+                {totalAmount === null ? (
+                  <span
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 6,
+                    }}
+                  >
+                    <PendingPriceBadge t={t} />
+                  </span>
+                ) : (
+                  `${totalAmount} m.`
+                )}
+              </span>
             </div>
           </div>
         </div>
 
+        {/* Desktop table */}
         <div className={styles.tableContainer}>
           <table className={styles.table}>
             <thead>
@@ -165,9 +149,12 @@ const OrderDetail = () => {
             <tbody>
               {orderData.orderItems.map((item, index) => {
                 const product = item.product;
-                const itemTotal = (
-                  parseFloat(item.unit_price_amount) * item.quantity
-                ).toFixed(2);
+                const zeroPriceItem = isPriceZero(item.unit_price_amount);
+                const itemTotal = zeroPriceItem
+                  ? null
+                  : (
+                      parseFloat(item.unit_price_amount) * item.quantity
+                    ).toFixed(2);
 
                 return (
                   <tr key={index}>
@@ -181,27 +168,50 @@ const OrderDetail = () => {
                     <td>{product.name}</td>
                     <td>{product.brand || "-"}</td>
                     <td>{product.id || "-"}</td>
-                    <td>{item.unit_price_amount} m.</td>
+                    <td>
+                      {zeroPriceItem ? (
+                        <span
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                          }}
+                        >
+                          <PendingPriceBadge />
+                        </span>
+                      ) : (
+                        `${item.unit_price_amount} m.`
+                      )}
+                    </td>
                     <td>{item.quantity}</td>
-                    <td>{itemTotal} m.</td>
+                    <td>
+                      {itemTotal === null ? (
+                        <span
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                          }}
+                        >
+                          <PendingPriceBadge />
+                        </span>
+                      ) : (
+                        `${itemTotal} m.`
+                      )}
+                    </td>
                   </tr>
                 );
               })}
-              {/* Add delivery service row if shipping method exists */}
+
               {orderData.shipping_method && (
                 <tr>
                   <td>
-                    <img
-                      src={track}
-                      alt="Delivery Service"
-                      className={styles.image}
-                    />
+                    <img src={track} alt="Delivery" className={styles.image} />
                   </td>
                   <td>Eltip bermek hyzmaty</td>
                   <td>Beýleki</td>
                   <td>DELIVERY</td>
-                  <td>10.00 m.</td>{" "}
-                  {/* You may need to get actual delivery cost from API */}
+                  <td>10.00 m.</td>
                   <td>1</td>
                   <td>10.00 m.</td>
                 </tr>
@@ -210,13 +220,15 @@ const OrderDetail = () => {
           </table>
         </div>
       </div>
-      {/* Mobile View */}
+
+      {/* Mobile cards */}
       <div className={styles.productList}>
         {orderData.orderItems.map((item, index) => {
           const product = item.product;
-          const itemTotal = (
-            parseFloat(item.unit_price_amount) * item.quantity
-          ).toFixed(2);
+          const zeroPriceItem = isPriceZero(item.unit_price_amount);
+          const itemTotal = zeroPriceItem
+            ? null
+            : (parseFloat(item.unit_price_amount) * item.quantity).toFixed(2);
 
           return (
             <div className={styles.card} key={index}>
@@ -233,18 +245,30 @@ const OrderDetail = () => {
                     {t("order.quantity")}: {item.quantity}
                   </span>
                   <span className={styles.price}>
-                    {item.unit_price_amount} m.
+                    {zeroPriceItem ? (
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 6,
+                        }}
+                      >
+                        <PendingPriceBadge />
+                      </span>
+                    ) : (
+                      `${item.unit_price_amount} m.`
+                    )}
                   </span>
                 </div>
               </div>
             </div>
           );
         })}
-        {/* Add delivery service card if shipping method exists */}
-        {orderData.shipping_method && (
+
+        {/* {orderData.shipping_method && (
           <div className={styles.card}>
             <div className={styles.imageContainer}>
-              <img src={track} alt="Delivery Service" />
+              <img src={track} alt="Delivery" />
             </div>
             <div className={styles.detailsMobile}>
               <h3 className={styles.title}>Beýleki</h3>
@@ -257,7 +281,7 @@ const OrderDetail = () => {
               </div>
             </div>
           </div>
-        )}
+        )} */}
       </div>
     </div>
   );

src/pages/Orders/Orders.module.scss

@@ -1,10 +1,10 @@
 // SargytlarymComponent.module.scss
 .container {
-  padding: 15px 24px 0 24px;
+  padding: 15px 24px 24px 24px;
   max-width: 1366px;
   margin: 0 auto;
   box-sizing: border-box;
-  a{
+  a {
     text-decoration: none;
   }
   @media (max-width: 767px) {
@@ -121,3 +121,106 @@
   font-weight: 700;
   color: #888888;
 }
+
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}

src/pages/Orders/index.jsx

@@ -1,36 +1,40 @@
-// Orders.jsx
-import React from "react";
+import React, { useState } from "react";
 import styles from "./Orders.module.scss";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useGetOrdersQuery } from "../../app/api/orderApi"; // Update with your correct path
-import EmptyOrderState from "./emptyOrder"; // Import the EmptyOrderState component
+import { useGetOrdersQuery } from "../../app/api/orderApi";
+import EmptyOrderState from "./emptyOrder";
 import Loader from "../../components/Loader/index";
 import { Result, Button } from "antd";
 import { useNavigate } from "react-router-dom";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
+
+const orderHasZeroPrice = (orderItems) =>
+  orderItems?.some((item) => isPriceZero(item.unit_price_amount));
+
 const Orders = () => {
   const { t } = useTranslation();
   const { data: orders, isLoading, error } = useGetOrdersQuery();
   const navigate = useNavigate();
-  // Function to format date - implement this or use a library like date-fns
+
   const formatOrderDate = (dateString) => {
     try {
-      const date = new Date(dateString);
-      return date.toLocaleString("tk-TM", {
+      return new Date(dateString).toLocaleString("tk-TM", {
         day: "2-digit",
         month: "2-digit",
         year: "numeric",
         hour: "2-digit",
         minute: "2-digit",
       });
-    } catch (e) {
+    } catch {
       return dateString;
     }
   };
 
   if (isLoading) return <Loader />;
 
-  // Handle error state
   if (error)
     return (
       <Result
@@ -45,16 +49,13 @@ const Orders = () => {
       />
     );
 
-  // Handle empty orders - render EmptyOrderState component
-  if (!orders || orders.length === 0) {
-    return <EmptyOrderState />;
-  }
+  if (!orders || orders.length === 0) return <EmptyOrderState />;
 
   return (
     <div className={styles.container}>
       <h2 className={styles.title}>Sargytlarym</h2>
 
-      {/* Desktop table view */}
+      {/* Desktop table */}
       <div className={styles.tableContainer}>
         <table className={styles.table}>
           <thead>
@@ -69,11 +70,11 @@ const Orders = () => {
           </thead>
           <tbody>
             {orders.map((order) => {
-              // Calculate total order amount
+              const hasZeroPrice = orderHasZeroPrice(order.orderItems);
               const totalAmount = order.orderItems.reduce(
                 (sum, item) =>
                   sum + parseFloat(item.unit_price_amount) * item.quantity,
-                0
+                0,
               );
 
               return (
@@ -81,7 +82,19 @@ const Orders = () => {
                   <td>{order.id}</td>
                   <td>{formatOrderDate(order.delivery_at)}</td>
                   <td style={{ color: "#888888", fontWeight: "700" }}>
-                    {totalAmount.toFixed(2)} m.
+                    {hasZeroPrice ? (
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 6,
+                        }}
+                      >
+                         {t("cart.pendingPriceTitle")} <PendingPriceBadge />
+                      </span>
+                    ) : (
+                      `${totalAmount.toFixed(2)} m.`
+                    )}
                   </td>
                   <td>{order.payment_type}</td>
                   <td>{order.status}</td>
@@ -99,50 +112,72 @@ const Orders = () => {
         </table>
       </div>
 
-      {/* Mobile card view */}
+      {/* Mobile cards */}
       <div className={styles.Mobilecontainer}>
         {orders.map((order) => {
+          const hasZeroPrice = orderHasZeroPrice(order.orderItems);
           const totalAmount = order.orderItems.reduce(
             (sum, item) =>
               sum + parseFloat(item.unit_price_amount) * item.quantity,
-            0
+            0,
           );
 
           return (
-            <Link to={`/orderdetail/${order.id}`} key={order.id}>
-              <div className={styles.orderCard}>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>
-                    {t("order.orderNumber")}:
-                  </span>
-                  <span className={styles.value}>{order.id}</span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>{t("order.orderDate")}:</span>
-                  <span className={styles.value}>
-                    {formatOrderDate(order.delivery_at)}
-                  </span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>{t("order.sum")}:</span>
-                  <span className={styles.total}>
-                    {totalAmount.toFixed(2)} m.
-                  </span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>
-                    {t("checkout.paymentMethod")}:
-                  </span>
-                  <span className={styles.value}>{order.payment_type}</span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>
-                    {t("order.orderStatus")}:
-                  </span>
-                  <span className={styles.value}>{order.status}</span>
-                </div>
+            <div
+              key={order.id}
+              className={styles.orderCard}
+              onClick={(e) => {
+                // Modal veya badge içerisine tıklandığında yönlendirmeyi engelle
+                if (
+                  e.target.closest(`.${styles.pendingPriceBadgeWrapper}`) ||
+                  e.target.closest(".ant-modal-root") ||
+                  e.target.closest(".ant-modal-wrap")
+                ) {
+                  return;
+                }
+                navigate(`/orderdetail/${order.id}`);
+              }}
+              style={{ cursor: "pointer" }}
+            >
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.orderNumber")}:</span>
+                <span className={styles.value}>{order.id}</span>
               </div>
-            </Link>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.orderDate")}:</span>
+                <span className={styles.value}>
+                  {formatOrderDate(order.delivery_at)}
+                </span>
+              </div>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.sum")}:</span>
+                <span className={styles.total}>
+                  {hasZeroPrice ? (
+                    <span
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                      }}
+                    >
+                       {t("cart.pendingPriceTitle")} <PendingPriceBadge />
+                    </span>
+                  ) : (
+                    `${totalAmount.toFixed(2)} m.`
+                  )}
+                </span>
+              </div>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>
+                  {t("checkout.paymentMethod")}:
+                </span>
+                <span className={styles.value}>{order.payment_type}</span>
+              </div>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.orderStatus")}:</span>
+                <span className={styles.value}>{order.status}</span>
+              </div>
+            </div>
           );
         })}
       </div>

src/pages/ProductDetail/index.jsx

@@ -27,6 +27,9 @@ import ImageCarousel from "../../components/ProductCard/imageCarousel/index";
 import Loader from "../../components/Loader/index";
 import { Result, Button } from "antd";
 import { div } from "framer-motion/client";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
 
 const ProductPage = ({
   productProp,
@@ -370,6 +373,15 @@ const ProductPage = ({
                 </span>
               </div>
             )}
+
+            {product.properties?.length > 0 && (
+              product.properties.map((prop, index) => (
+                <div key={`${prop.attribute_id}-${index}`} className={styles.metaItem}>
+                  <span className={styles.metaLabel}>{prop.name}</span>
+                  <span className={styles.metaValue}>{prop.value}</span>
+                </div>
+              ))
+            )}
           </div>
 
           {/* Description card */}
@@ -426,11 +438,19 @@ const ProductPage = ({
             <div className={styles.priceRow}>
               <span className={styles.priceLabel}>{t("product.price")}:</span>
               <div className={styles.priceRight}>
-                <span className={styles.price}>{product.price_amount} m.</span>
-                {product.old_price_amount && (
-                  <span className={styles.oldPrice}>
-                    {product.old_price_amount} m.
+                {isPriceZero(product.price_amount) ? (
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600 }}>
+                    {t("cart.pendingPriceTitle")} <PendingPriceBadge />
                   </span>
+                ) : (
+                  <>
+                    <span className={styles.price}>{product.price_amount} m.</span>
+                    {product.old_price_amount && (
+                      <span className={styles.oldPrice}>
+                        {product.old_price_amount} m.
+                      </span>
+                    )}
+                  </>
                 )}
               </div>
             </div>
@@ -444,11 +464,19 @@ const ProductPage = ({
       {/* ── Mobile sticky bar ── */}
       <div className={styles.productActionsMobile}>
         <div className={styles.mobilePriceContainer}>
-          <span className={styles.price}>{product.price_amount} m.</span>
-          {product.old_price_amount && (
-            <span className={styles.oldPrice}>
-              {product.old_price_amount} m.
+          {isPriceZero(product.price_amount) ? (
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600 }}>
+              {t("cart.pendingPriceTitle")} <PendingPriceBadge />
             </span>
+          ) : (
+            <>
+              <span className={styles.price}>{product.price_amount} m.</span>
+              {product.old_price_amount && (
+                <span className={styles.oldPrice}>
+                  {product.old_price_amount} m.
+                </span>
+              )}
+            </>
           )}
         </div>
         <div className={styles.mobileBtnContainer}>

src/pages/home/index.jsx

@@ -3,6 +3,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import CategorySection from "../../components/CategorySection/index";
 import Carousel from "../../components/Banner/index";
 import CategoryCarousel from "../../components/CategoryCarousel/CategoryCarousel";
+import HomeBrands from "../../components/HomeBrands/index";
 import FlashSales from "../../components/FlashSales";
 import styles from "./Home.module.scss";
 import { useGetCollectionsQuery } from "../../app/api/collectionsApi";
@@ -98,6 +99,7 @@ const Home = () => {
     <div className={styles.home}>
       <Carousel />
       <CategoryCarousel />
+      <HomeBrands />
       <FlashSales />
       <div className={styles.sections}>
         <InfiniteScroll