nurmuhammet/mm.com.tm-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added baha anyklmak, attributes

Browse Source
This commit is contained in:
Jelaletdin12
2026-04-30 10:44:08 +05:00
parent cc89455967
commit 9419ec0af0
24 changed files with 1207 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/api/brandsApi.js
View File

@@ -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,

132
src/app/api/categories.js
View File

@@ -5,17 +5,16 @@ export const categoriesApi = baseApi.injectEndpoints({
getCategories: builder.query({
query: (type = "tree") => `/categories?type=${type}`,
}),
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) => ({
@@ -23,80 +22,105 @@ export const categoriesApi = baseApi.injectEndpoints({
pagination: response.pagination || {},
}),
}),
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,
},
},
};
@@ -105,11 +129,11 @@ export const categoriesApi = baseApi.injectEndpoints({
}
},
}),
getProductById: builder.query({
query: (productId) => `/products/${productId}`,
}),
getRelatedProducts: builder.query({
query: (productId) => `/products/${productId}/related`,
}),

41
src/app/api/collectionsApi.js
View File

@@ -5,40 +5,35 @@ export const collectionsApi = baseApi.injectEndpoints({
getCollections: builder.query({
query: () => `/collections`,
}),
getCollectionById: builder.query({
query: (collectionId) => `/collections/${collectionId}`,
}),
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) => ({

357
src/components/CategoryDropdown/DropdownMenu.module.scss
View File

@@ -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; }
}

247
src/components/CategoryDropdown/index.jsx
View File

@@ -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>
);

92
src/components/HomeBrands/HomeBrands.module.scss Normal file
View File

@@ -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;
}
}

77
src/components/HomeBrands/index.jsx Normal file
View File

@@ -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;

2
src/components/Icons/index.jsx
View File

@@ -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>

4
src/components/Navbar/Navbar.module.scss
View File

@@ -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;
}
}

102
src/components/PendingPriceBadge/PendingPriceBadge.module.scss Normal file
View File

@@ -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;
}
}
}
}
}

71
src/components/PendingPriceBadge/index.jsx Normal file
View File

@@ -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;

6
src/components/ProductCard/index.jsx
View File

@@ -201,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 ?? calculatedDiscount}%
-{product.discount || calculatedDiscount}%
</span>
)}
{product.stock === 0 && (
@@ -221,7 +221,7 @@ const ProductCard = ({
<div className={styles.priceContainer}>
<div>
{isPriceZero(price_amount) ? (
<span className={styles.currentPrice}>Bahasyny anyklamaly</span>
<span className={styles.currentPrice}> {t("cart.pendingPriceTitle")}</span>
) : (
<>
<span className={styles.currentPrice}>{price_amount} m.</span>

3
src/i18n/locales/en.js
View File

@@ -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",

3
src/i18n/locales/ru.js
View File

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

3
src/i18n/locales/tm.js
View File

@@ -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",

105
src/pages/Cart/CartPage.module.scss
View File

@@ -31,7 +31,6 @@
}
}
}
.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 {
@@ -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;
}
}
}
}
}

23
src/pages/Cart/index.jsx
View File

@@ -13,6 +13,7 @@ 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;
@@ -320,7 +321,7 @@ const CartPage = () => {
<div className={styles.priceQuantity}>
<span className={styles.price}>
{isPriceZero(item.product.price_amount)
? "Bahasyny anyklamaly"
? t("cart.pendingPriceTitle")
: `${parseFloat(item.product.price_amount).toFixed(2)} m.`}
</span>
<div className={styles.quantityControls}>
@@ -375,20 +376,12 @@ const CartPage = () => {
{store.name} - {t("cart.basket")}:
</h3>
{hasZeroPrice ? (
<>
<div className={styles.summaryRow}>
<span>{t("cart.price")}:</span>
<span>Bahasyny anyklamaly</span>
</div>
<div className={styles.summaryRow}>
<span>{t("cart.delivery")}:</span>
<span>Bahasyny anyklamaly</span>
</div>
<div className={styles.summaryRow}>
<span>{t("cart.total")}:</span>
<span>Bahasyny anyklamaly</span>
</div>
</>
<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}>

3
src/pages/Category/CategoryPage.module.scss
View File

@@ -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;
}

368
src/pages/Category/hooks/useCategoryProducts.js
View File

@@ -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,
@@ -314,4 +188,4 @@ const useCategoryProducts = ({
};
};
export default useCategoryProducts;
export default useCategoryProducts;

272
src/pages/Category/index.jsx
View File

@@ -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 };
});
}}
/>
@@ -441,12 +499,10 @@ const CategoryPage = () => {
next={loadMoreData}
hasMore={hasMore}
scrollThreshold={0.8}
scrollableTarget={null}
style={{ overflow: "hidden" }}
scrollableTarget={null}
style={{ overflow: "hidden" }}
loader={
<div
className={`${styles.loaderContainer} `}
>
<div className={`${styles.loaderContainer} `}>
<Loader />
</div>
}

75
src/pages/OrderDetail/index.jsx
View File

@@ -1,79 +1,14 @@
import { useParams, useNavigate } from "react-router-dom";
import { useState } from "react";
import styles from "./OrderDetail.module.scss";
import { useTranslation } from "react-i18next";
import { useGetOrderByIdQuery } from "../../app/api/orderApi";
import track from "../../assets/track.jpg";
import Loader from "../../components/Loader/index";
import { Result, Button, Modal } from "antd";
import { Result, Button } from "antd";
import PendingPriceBadge from "../../components/PendingPriceBadge";
const isPriceZero = (price) => !price || parseFloat(price) === 0;
const PendingPriceModal = ({ open, onClose, t }) => (
<Modal
open={open}
onOk={onClose}
onCancel={onClose}
okText={t ? t("common.ok") : "OK"}
cancelButtonProps={{ style: { display: "none" } }}
centered
title="Bahasy anyklamaly"
className="pending-price-modal"
width={400}
>
<p>
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 = ({ t }) => {
const [tooltipVisible, setTooltipVisible] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [isMobile] = useState(() => /Mobi|Android/i.test(navigator.userAgent));
const handleClick = (e) => {
e.preventDefault();
e.stopPropagation();
if (isMobile) setModalVisible(true);
};
const stopPropagation = (e) => {
e.stopPropagation();
};
return (
<span onClick={stopPropagation}>
<span
className={styles.pendingPriceBadgeWrapper}
onMouseEnter={() => !isMobile && setTooltipVisible(true)}
onMouseLeave={() => setTooltipVisible(false)}
onClick={handleClick}
onTouchEnd={(e) => {
e.stopPropagation();
}}
>
<span className={styles.pendingPriceBadge}>!</span>
{tooltipVisible && (
<span className={styles.pendingPriceTooltip}>
<strong>Bahasyny anyklamaly</strong>
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>
);
};
const OrderDetail = () => {
const { t } = useTranslation();
const { id } = useParams();
@@ -242,7 +177,7 @@ const OrderDetail = () => {
gap: 6,
}}
>
<PendingPriceBadge t={t} />
<PendingPriceBadge />
</span>
) : (
`${item.unit_price_amount} m.`
@@ -258,7 +193,7 @@ const OrderDetail = () => {
gap: 6,
}}
>
<PendingPriceBadge t={t} />
<PendingPriceBadge />
</span>
) : (
`${itemTotal} m.`
@@ -318,7 +253,7 @@ const OrderDetail = () => {
gap: 6,
}}
>
<PendingPriceBadge t={t} />
<PendingPriceBadge />
</span>
) : (
`${item.unit_price_amount} m.`

72
src/pages/Orders/index.jsx
View File

@@ -5,79 +5,15 @@ import { useTranslation } from "react-i18next";
import { useGetOrdersQuery } from "../../app/api/orderApi";
import EmptyOrderState from "./emptyOrder";
import Loader from "../../components/Loader/index";
import { Result, Button, Modal } from "antd";
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 PendingPriceModal = ({ open, onClose, t }) => (
<Modal
open={open}
onOk={onClose}
onCancel={onClose}
okText={t("common.ok")}
cancelButtonProps={{ style: { display: "none" } }}
centered
title="Bahasy anyklamaly"
className="pending-price-modal"
width={400}
>
<p>
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 = ({ t }) => {
const [tooltipVisible, setTooltipVisible] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [isMobile] = useState(() => /Mobi|Android/i.test(navigator.userAgent));
const handleClick = (e) => {
e.preventDefault();
e.stopPropagation();
if (isMobile) setModalVisible(true);
};
const stopPropagation = (e) => {
e.stopPropagation();
};
return (
<span onClick={stopPropagation}>
<span
className={styles.pendingPriceBadgeWrapper}
onMouseEnter={() => !isMobile && setTooltipVisible(true)}
onMouseLeave={() => setTooltipVisible(false)}
onClick={handleClick}
onTouchEnd={(e) => {
e.stopPropagation();
}}
>
<span className={styles.pendingPriceBadge}>!</span>
{tooltipVisible && (
<span className={styles.pendingPriceTooltip}>
<strong>Bahasyny anyklamaly</strong>
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>
);
};
const Orders = () => {
const { t } = useTranslation();
const { data: orders, isLoading, error } = useGetOrdersQuery();
@@ -154,7 +90,7 @@ const Orders = () => {
gap: 6,
}}
>
Bahasyny anyklamaly <PendingPriceBadge t={t} />
{t("cart.pendingPriceTitle")} <PendingPriceBadge />
</span>
) : (
`${totalAmount.toFixed(2)} m.`
@@ -224,7 +160,7 @@ const Orders = () => {
gap: 6,
}}
>
Bahasyny anyklamaly <PendingPriceBadge t={t} />
{t("cart.pendingPriceTitle")} <PendingPriceBadge />
</span>
) : (
`${totalAmount.toFixed(2)} m.`

44
src/pages/ProductDetail/index.jsx
View File

@@ -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}>

2
src/pages/home/index.jsx
View File

@@ -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