brand page
This commit is contained in:
hamid zarghami
@@ -0,0 +1,229 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Layout from '@/hoc/Layout'
|
||||||
|
import { NextPage } from 'next'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/breadcrumb'
|
||||||
|
import BrandIntro from '../components/BrandIntro'
|
||||||
|
import BrandFilters from '../components/BrandFilters'
|
||||||
|
import BrandSorts from '../components/BrandSorts'
|
||||||
|
import GridWrapper from '@/components/GridWrapper'
|
||||||
|
import ProductCard from '@/components/ProductCard'
|
||||||
|
import { Setting5 } from 'iconsax-react'
|
||||||
|
import { useState, useEffect, useMemo } from 'react'
|
||||||
|
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||||
|
import { useInfiniteBrandProductsData } from '../hooks/useInfiniteBrandData'
|
||||||
|
import { IProduct } from '@/types/landing.types'
|
||||||
|
import { Product } from '../types/Types'
|
||||||
|
import { useSearchParams, useParams } from 'next/navigation'
|
||||||
|
|
||||||
|
const BrandPage: NextPage = () => {
|
||||||
|
const [showMobileFilters, setShowMobileFilters] = useState(false)
|
||||||
|
const searchParams = useSearchParams()
|
||||||
|
const params = useParams()
|
||||||
|
const [filterParams, setFilterParams] = useState({
|
||||||
|
page: 1,
|
||||||
|
limit: 20,
|
||||||
|
sort: 3
|
||||||
|
})
|
||||||
|
|
||||||
|
// استخراج brandId از URL
|
||||||
|
const brandId = params.id as string
|
||||||
|
|
||||||
|
// خواندن پارامترها از URL
|
||||||
|
useEffect(() => {
|
||||||
|
const urlParams = {
|
||||||
|
page: parseInt(searchParams.get('page') || '1'),
|
||||||
|
limit: parseInt(searchParams.get('limit') || '20'),
|
||||||
|
sort: parseInt(searchParams.get('sort') || '3'),
|
||||||
|
category: searchParams.get('category') || undefined,
|
||||||
|
minPrice: searchParams.get('minPrice') ? Number(searchParams.get('minPrice')) : undefined,
|
||||||
|
maxPrice: searchParams.get('maxPrice') ? Number(searchParams.get('maxPrice')) : undefined,
|
||||||
|
}
|
||||||
|
setFilterParams(urlParams)
|
||||||
|
}, [searchParams])
|
||||||
|
|
||||||
|
// دریافت دادههای محصولات از API بر اساس brandId با infinite scroll
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
fetchNextPage,
|
||||||
|
hasNextPage
|
||||||
|
} = useInfiniteBrandProductsData(brandId, filterParams)
|
||||||
|
|
||||||
|
// جمعآوری تمام محصولات از صفحات مختلف
|
||||||
|
const allProducts = useMemo(() => {
|
||||||
|
if (!data?.pages) return [];
|
||||||
|
return data.pages.flatMap(page => page.results.products);
|
||||||
|
}, [data?.pages]);
|
||||||
|
|
||||||
|
// تبدیل Product به IProduct
|
||||||
|
const convertToIProduct = (product: Product): IProduct => {
|
||||||
|
// اطمینان از وجود default_variant
|
||||||
|
const defaultVariant = product.default_variant || product.variants?.[0];
|
||||||
|
const price = defaultVariant?.price || {
|
||||||
|
order_limit: 1,
|
||||||
|
retailPrice: 0,
|
||||||
|
is_specialSale: false,
|
||||||
|
discount_percent: 0,
|
||||||
|
specialSale_order_limit: null,
|
||||||
|
specialSale_quantity: null,
|
||||||
|
specialSale_endDate: null,
|
||||||
|
selling_price: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
_id: product._id,
|
||||||
|
title_fa: product.title_fa,
|
||||||
|
title_en: product.title_en,
|
||||||
|
seoTitle: product.seoTitle || null,
|
||||||
|
seoDescription: product.seoDescription || null,
|
||||||
|
model: '',
|
||||||
|
description: product.description,
|
||||||
|
tags: product.tags || [],
|
||||||
|
shop: defaultVariant?.shop || {
|
||||||
|
_id: '',
|
||||||
|
shopName: '',
|
||||||
|
shopDescription: '',
|
||||||
|
logo: ''
|
||||||
|
},
|
||||||
|
status: defaultVariant?.market_status || 'active',
|
||||||
|
imagesUrl: product.imagesUrl,
|
||||||
|
url: product.url,
|
||||||
|
isWishlist: false,
|
||||||
|
default_variant: {
|
||||||
|
_id: defaultVariant?._id || product._id.toString(),
|
||||||
|
market_status: defaultVariant?.market_status || 'active',
|
||||||
|
price: price,
|
||||||
|
stock: defaultVariant?.stock || 0,
|
||||||
|
isFreeShip: defaultVariant?.isFreeShip || false,
|
||||||
|
isWholeSale: defaultVariant?.isWholeSale || false
|
||||||
|
},
|
||||||
|
variants: (product.variants || []).map(variant => ({
|
||||||
|
...variant,
|
||||||
|
market_status: variant.market_status as "Marketable" | "Unmarketable" | "OutOfStock",
|
||||||
|
shipmentMethod: variant.shipmentMethod.map(method => ({
|
||||||
|
...method,
|
||||||
|
deliveryType: method.deliveryType as "Standard" | "SameDay" | "Express"
|
||||||
|
}))
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-1.5">
|
||||||
|
{/* معرفی برند */}
|
||||||
|
{data?.pages?.[0]?.results.brand && (
|
||||||
|
<BrandIntro brand={data.pages[0].results.brand} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className=' px-4 sm:px-6 md:px-8 lg:px-20'>
|
||||||
|
<Breadcrumb aria-label="breadcrumb">
|
||||||
|
<BreadcrumbList className="text-sm text-muted-foreground">
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">فروشگاه آناهیتا</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
{data?.pages?.[0]?.results.brand && (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage className="text-foreground">
|
||||||
|
{data.pages[0].results.brand.title_fa}
|
||||||
|
</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
|
||||||
|
{/* Mobile Filter Button */}
|
||||||
|
<div className='lg:hidden mt-4 flex justify-between items-center'>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowMobileFilters(true)}
|
||||||
|
className='flex items-center gap-2 px-3 py-2 border border-border rounded-lg bg-white shadow-sm'
|
||||||
|
>
|
||||||
|
<Setting5 size={18} color='#666666' />
|
||||||
|
<span className='text-sm text-[#666666]'>فیلترها</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mt-6 sm:mt-8 md:mt-12 lg:mt-8 flex flex-col lg:flex-row gap-4 sm:gap-6'>
|
||||||
|
{/* Desktop Filters */}
|
||||||
|
<BrandFilters brandId={brandId} />
|
||||||
|
|
||||||
|
{/* Mobile Filters Modal */}
|
||||||
|
<BrandFilters
|
||||||
|
isMobile={true}
|
||||||
|
isOpen={showMobileFilters}
|
||||||
|
onClose={() => setShowMobileFilters(false)}
|
||||||
|
brandId={brandId}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='flex-1'>
|
||||||
|
<BrandSorts data={data?.pages?.[0]} />
|
||||||
|
|
||||||
|
<div className='mt-6 sm:mt-8 md:mt-10'>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<div className="text-gray-500">در حال بارگذاری...</div>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<div className="text-red-500">خطا در بارگذاری محصولات</div>
|
||||||
|
</div>
|
||||||
|
) : allProducts.length > 0 ? (
|
||||||
|
<InfiniteScroll
|
||||||
|
dataLength={allProducts.length}
|
||||||
|
next={fetchNextPage}
|
||||||
|
hasMore={!!hasNextPage}
|
||||||
|
loader={
|
||||||
|
<div className="text-center py-4">
|
||||||
|
<div className="text-gray-500">در حال بارگذاری محصولات بیشتر...</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
endMessage={
|
||||||
|
<div className="text-center py-4">
|
||||||
|
{/* <div className="text-gray-500">تمام محصولات بارگذاری شد</div> */}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<GridWrapper desktop={4} mobile={2} gapMobile={3} gapDesktop={6}>
|
||||||
|
{allProducts.map((product: Product) => (
|
||||||
|
<ProductCard
|
||||||
|
key={product._id}
|
||||||
|
item={convertToIProduct(product)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</GridWrapper>
|
||||||
|
</InfiniteScroll>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<div className="text-gray-500">محصولی یافت نشد</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BrandPageWithLayout() {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<BrandPage />
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,127 @@
|
|||||||
|
'use client'
|
||||||
|
import { FC, useState, useCallback } from 'react'
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
|
||||||
|
import { Slider } from '@/components/ui/slider'
|
||||||
|
import Input from '@/components/Input'
|
||||||
|
import { CategoryVariant } from '../types/Types'
|
||||||
|
import { NumberFormat } from '@/config/func'
|
||||||
|
import CategoryTree from '@/app/products/components/CategoryTree'
|
||||||
|
|
||||||
|
interface FilterState {
|
||||||
|
categories: string[]
|
||||||
|
priceRange: [number, number]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BrandFilterSectionProps {
|
||||||
|
categories: CategoryVariant[]
|
||||||
|
filterState: FilterState
|
||||||
|
onCategoryChange: (categoryId: string) => void
|
||||||
|
onPriceChange: (range: [number, number]) => void
|
||||||
|
brandId: string
|
||||||
|
priceMinMaxRange: { minPrice: number; maxPrice: number }
|
||||||
|
}
|
||||||
|
|
||||||
|
const BrandFilterSection: FC<BrandFilterSectionProps> = ({
|
||||||
|
categories,
|
||||||
|
filterState,
|
||||||
|
onCategoryChange,
|
||||||
|
onPriceChange,
|
||||||
|
priceMinMaxRange,
|
||||||
|
}) => {
|
||||||
|
const [priceInputs, setPriceInputs] = useState({
|
||||||
|
min: filterState.priceRange?.[0] || priceMinMaxRange.minPrice,
|
||||||
|
max: filterState.priceRange?.[1] || priceMinMaxRange.maxPrice,
|
||||||
|
})
|
||||||
|
|
||||||
|
const handlePriceInputChange = (field: 'min' | 'max', value: string) => {
|
||||||
|
const numValue = parseInt(value.replace(/,/g, '')) || 0
|
||||||
|
setPriceInputs(prev => ({ ...prev, [field]: numValue }))
|
||||||
|
|
||||||
|
if (field === 'min') {
|
||||||
|
onPriceChange([numValue, priceInputs.max])
|
||||||
|
} else {
|
||||||
|
onPriceChange([priceInputs.min, numValue])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='space-y-6'>
|
||||||
|
{/* دستهبندیها */}
|
||||||
|
<Accordion type='single' collapsible className='w-full'>
|
||||||
|
<AccordionItem value='categories'>
|
||||||
|
<AccordionTrigger className='text-sm font-medium'>
|
||||||
|
دستهبندیها
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
<div className='mt-4'>
|
||||||
|
<CategoryTree
|
||||||
|
categories={categories as any}
|
||||||
|
selectedId={filterState.categories[0] || null}
|
||||||
|
onSelect={(id) => id && onCategoryChange(id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
{/* محدوده قیمت */}
|
||||||
|
<AccordionItem value='price'>
|
||||||
|
<AccordionTrigger className='text-sm font-medium'>
|
||||||
|
محدوده قیمت
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
<div className='mt-4 space-y-4'>
|
||||||
|
{/* ورودیهای قیمت */}
|
||||||
|
<div className='grid grid-cols-2 gap-3'>
|
||||||
|
<div>
|
||||||
|
<label className='block text-xs text-gray-600 mb-1'>از</label>
|
||||||
|
<Input
|
||||||
|
type='text'
|
||||||
|
value={NumberFormat(priceInputs.min)}
|
||||||
|
onChange={(e) => handlePriceInputChange('min', e.target.value)}
|
||||||
|
className='text-sm'
|
||||||
|
placeholder='0'
|
||||||
|
seprator={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className='block text-xs text-gray-600 mb-1'>تا</label>
|
||||||
|
<Input
|
||||||
|
type='text'
|
||||||
|
value={NumberFormat(priceInputs.max)}
|
||||||
|
onChange={(e) => handlePriceInputChange('max', e.target.value)}
|
||||||
|
className='text-sm'
|
||||||
|
placeholder='8,000,000'
|
||||||
|
seprator={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* اسلایدر قیمت */}
|
||||||
|
<div className='px-2'>
|
||||||
|
<Slider
|
||||||
|
value={[priceInputs.min, priceInputs.max]}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setPriceInputs({ min: value[0], max: value[1] })
|
||||||
|
onPriceChange([value[0], value[1]])
|
||||||
|
}}
|
||||||
|
min={priceMinMaxRange.minPrice}
|
||||||
|
max={priceMinMaxRange.maxPrice}
|
||||||
|
step={100000}
|
||||||
|
className='w-full'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* واحد قیمت */}
|
||||||
|
<div className='text-center'>
|
||||||
|
<span className='text-xs text-gray-500'>تومان</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default BrandFilterSection
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { FC } from 'react'
|
||||||
|
import { Setting5 } from 'iconsax-react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import Modal from '@/components/Modal'
|
||||||
|
import BrandFilterSection from './BrandFilterSection'
|
||||||
|
import { useBrandFiltersData } from '../hooks/useBrandFiltersData'
|
||||||
|
|
||||||
|
interface BrandFiltersProps {
|
||||||
|
isMobile?: boolean
|
||||||
|
isOpen?: boolean
|
||||||
|
onClose?: () => void
|
||||||
|
brandId: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const BrandFilters: FC<BrandFiltersProps> = ({
|
||||||
|
isMobile = false,
|
||||||
|
isOpen = false,
|
||||||
|
onClose,
|
||||||
|
brandId
|
||||||
|
}) => {
|
||||||
|
const {
|
||||||
|
filterState,
|
||||||
|
categories,
|
||||||
|
isLoading,
|
||||||
|
priceMinMaxRange,
|
||||||
|
applyCategoryFilter,
|
||||||
|
updatePriceRange,
|
||||||
|
clearAllFilters,
|
||||||
|
} = useBrandFiltersData({ brandId })
|
||||||
|
|
||||||
|
const handleClearFilters = () => {
|
||||||
|
clearAllFilters()
|
||||||
|
|
||||||
|
// Close mobile modal after clearing filters
|
||||||
|
if (isMobile && onClose) {
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const FilterContent = () => (
|
||||||
|
<>
|
||||||
|
<div className='flex items-center gap-2.5'>
|
||||||
|
<Setting5 size={24} color='#666666' />
|
||||||
|
<div className='text-[#666666]'>فیلترها</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BrandFilterSection
|
||||||
|
categories={categories}
|
||||||
|
filterState={filterState}
|
||||||
|
onCategoryChange={applyCategoryFilter}
|
||||||
|
onPriceChange={updatePriceRange}
|
||||||
|
brandId={brandId}
|
||||||
|
priceMinMaxRange={priceMinMaxRange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='mt-4'>
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
onClick={handleClearFilters}
|
||||||
|
className='w-full'
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
حذف همه فیلترها
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
close={onClose || (() => { })}
|
||||||
|
title="فیلترها"
|
||||||
|
isHeader={true}
|
||||||
|
>
|
||||||
|
<div className='max-h-[70vh] overflow-y-auto'>
|
||||||
|
<FilterContent />
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-[270px] hidden lg:block border border-border rounded-[10px] p-5 h-fit'>
|
||||||
|
<FilterContent />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BrandFilters
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
'use client'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { Brand } from '../types/Types'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
brand: Brand
|
||||||
|
}
|
||||||
|
|
||||||
|
const BrandIntro: FC<Props> = ({ brand }) => {
|
||||||
|
return (
|
||||||
|
<div className='bg-[#FAFAFA] rounded-2xl p-6 px-24 mb-8 flex justify-between'>
|
||||||
|
<div className='flex gap-10'>
|
||||||
|
<div className='bg-[#F2F2F2] size-[118px] rounded-xl flex items-center justify-center'>
|
||||||
|
<Image
|
||||||
|
src={brand.logoUrl}
|
||||||
|
width={112}
|
||||||
|
height={112}
|
||||||
|
alt={brand.title_fa}
|
||||||
|
className='object-contain max-w-[100px] max-h-[100px]'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 className='text-[#333333] text-xl '>
|
||||||
|
{brand.title_en?.toUpperCase()}
|
||||||
|
</h1>
|
||||||
|
<h4 className='text-[#999999] text-sm mt-2'>
|
||||||
|
{brand.title_fa}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<p className='mt-7 text-[#333333] text-sm'>
|
||||||
|
{brand.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BrandIntro
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
'use client'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||||
|
import { Pagination, Navigation } from 'swiper/modules'
|
||||||
|
import ProductCard from '@/components/ProductCard'
|
||||||
|
import { Product } from '../types/Types'
|
||||||
|
import { IProduct } from '@/types/landing.types'
|
||||||
|
import 'swiper/css'
|
||||||
|
import 'swiper/css/pagination'
|
||||||
|
import 'swiper/css/navigation'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
products: Product[]
|
||||||
|
brandName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const BrandProductsCarousel: FC<Props> = ({ products, brandName }) => {
|
||||||
|
return (
|
||||||
|
<div className='bg-white rounded-2xl p-6 shadow-sm'>
|
||||||
|
<div className='flex items-center justify-between mb-6'>
|
||||||
|
<h3 className='text-xl font-bold text-gray-800'>محصولات برند {brandName}</h3>
|
||||||
|
<div className='flex items-center gap-2 text-sm text-gray-500'>
|
||||||
|
<span>نمایش محصولات</span>
|
||||||
|
<div className='w-2 h-2 bg-blue-500 rounded-full'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Swiper
|
||||||
|
modules={[Pagination, Navigation]}
|
||||||
|
spaceBetween={16}
|
||||||
|
slidesPerView='auto'
|
||||||
|
pagination={{
|
||||||
|
clickable: true,
|
||||||
|
dynamicBullets: true,
|
||||||
|
}}
|
||||||
|
navigation={{
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
}}
|
||||||
|
breakpoints={{
|
||||||
|
640: {
|
||||||
|
spaceBetween: 20,
|
||||||
|
},
|
||||||
|
768: {
|
||||||
|
spaceBetween: 24,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
className='brand-products-swiper'
|
||||||
|
>
|
||||||
|
{products.map((product) => {
|
||||||
|
// تبدیل Product به IProduct
|
||||||
|
const defaultVariant = product.default_variant || product.variants?.[0];
|
||||||
|
const price = defaultVariant?.price || {
|
||||||
|
order_limit: 1,
|
||||||
|
retailPrice: 0,
|
||||||
|
is_specialSale: false,
|
||||||
|
discount_percent: 0,
|
||||||
|
specialSale_order_limit: null,
|
||||||
|
specialSale_quantity: null,
|
||||||
|
specialSale_endDate: null,
|
||||||
|
selling_price: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
const iProduct: IProduct = {
|
||||||
|
_id: product._id,
|
||||||
|
title_fa: product.title_fa,
|
||||||
|
title_en: product.title_en,
|
||||||
|
seoTitle: product.seoTitle || null,
|
||||||
|
seoDescription: product.seoDescription || null,
|
||||||
|
model: '',
|
||||||
|
description: product.description,
|
||||||
|
tags: product.tags || [],
|
||||||
|
shop: defaultVariant?.shop || {
|
||||||
|
_id: '',
|
||||||
|
shopName: '',
|
||||||
|
shopDescription: '',
|
||||||
|
logo: ''
|
||||||
|
},
|
||||||
|
status: defaultVariant?.market_status || 'active',
|
||||||
|
imagesUrl: product.imagesUrl,
|
||||||
|
url: product.url,
|
||||||
|
isWishlist: product.isWished || false,
|
||||||
|
default_variant: {
|
||||||
|
_id: defaultVariant?._id || product._id.toString(),
|
||||||
|
market_status: defaultVariant?.market_status || 'active',
|
||||||
|
price: price,
|
||||||
|
stock: defaultVariant?.stock || 0,
|
||||||
|
isFreeShip: defaultVariant?.isFreeShip || false,
|
||||||
|
isWholeSale: defaultVariant?.isWholeSale || false
|
||||||
|
},
|
||||||
|
variants: (product.variants || []).map(variant => ({
|
||||||
|
...variant,
|
||||||
|
market_status: variant.market_status as "Marketable" | "Unmarketable" | "OutOfStock",
|
||||||
|
shipmentMethod: variant.shipmentMethod.map(method => ({
|
||||||
|
...method,
|
||||||
|
deliveryType: method.deliveryType as "Standard" | "SameDay" | "Express"
|
||||||
|
}))
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SwiperSlide key={product._id} className='!w-auto'>
|
||||||
|
<div className='w-[240px] sm:w-[280px]'>
|
||||||
|
<ProductCard item={iProduct} />
|
||||||
|
</div>
|
||||||
|
</SwiperSlide>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
<style jsx global>{`
|
||||||
|
.brand-products-swiper .swiper-pagination {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-products-swiper .swiper-pagination-bullet {
|
||||||
|
background: #d1d5db;
|
||||||
|
opacity: 1;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-products-swiper .swiper-pagination-bullet-active {
|
||||||
|
background: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-products-swiper .swiper-button-next,
|
||||||
|
.brand-products-swiper .swiper-button-prev {
|
||||||
|
color: #3b82f6;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-top: -16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-products-swiper .swiper-button-next:after,
|
||||||
|
.brand-products-swiper .swiper-button-prev:after {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BrandProductsCarousel
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
import { Sort, ArrowDown2 } from 'iconsax-react'
|
||||||
|
import { FC, useState, useEffect, useRef } from 'react'
|
||||||
|
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
||||||
|
import { BrandResponse } from '../types/Types'
|
||||||
|
|
||||||
|
const sortOptions = [
|
||||||
|
{ key: '1', label: 'مرتبط ترین' },
|
||||||
|
{ key: '2', label: 'پربازدیدترین' },
|
||||||
|
{ key: '3', label: 'جدیدترین' },
|
||||||
|
{ key: '4', label: 'پرفروش ترین' },
|
||||||
|
{ key: '5', label: 'ارزانترین' },
|
||||||
|
{ key: '6', label: 'گرانترین' },
|
||||||
|
{ key: '7', label: 'پیشنهاد خریداران' },
|
||||||
|
]
|
||||||
|
|
||||||
|
type BrandSortsProps = {
|
||||||
|
data?: BrandResponse
|
||||||
|
}
|
||||||
|
|
||||||
|
const BrandSorts: FC<BrandSortsProps> = ({ data }) => {
|
||||||
|
const router = useRouter()
|
||||||
|
const pathname = usePathname()
|
||||||
|
const searchParams = useSearchParams()
|
||||||
|
const [selectedSort, setSelectedSort] = useState('3') // default to newest
|
||||||
|
const [showDropdown, setShowDropdown] = useState(false)
|
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
const selectedOption = sortOptions.find(option => option.key === selectedSort)
|
||||||
|
|
||||||
|
// خواندن sort از URL
|
||||||
|
useEffect(() => {
|
||||||
|
const sortFromUrl = searchParams.get('sort')
|
||||||
|
if (sortFromUrl) {
|
||||||
|
setSelectedSort(sortFromUrl)
|
||||||
|
}
|
||||||
|
}, [searchParams])
|
||||||
|
|
||||||
|
const handleSortChange = (sortKey: string) => {
|
||||||
|
setSelectedSort(sortKey)
|
||||||
|
const params = new URLSearchParams(searchParams.toString())
|
||||||
|
params.set('sort', sortKey)
|
||||||
|
router.push(`${pathname}?${params.toString()}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||||
|
setShowDropdown(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showDropdown) {
|
||||||
|
document.addEventListener('mousedown', handleClickOutside)
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside)
|
||||||
|
}
|
||||||
|
}, [showDropdown])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex justify-between items-center text-[#999999] text-sm border-b border-border pb-5'>
|
||||||
|
{/* Desktop Version */}
|
||||||
|
<div className='hidden lg:flex items-center gap-4'>
|
||||||
|
<div className='flex gap-2 items-center'>
|
||||||
|
<Sort size={24} color='#333333' />
|
||||||
|
<div className='text-sm text-[#333333]'>مرتب سازی:</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{sortOptions.map((option) => (
|
||||||
|
<div
|
||||||
|
key={option.key}
|
||||||
|
className={`cursor-pointer ${selectedSort === option.key ? 'text-primary' : ''}`}
|
||||||
|
onClick={() => handleSortChange(option.key)}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Version */}
|
||||||
|
<div className='lg:hidden flex items-center gap-2 relative' ref={dropdownRef}>
|
||||||
|
<Sort size={20} color='#333333' />
|
||||||
|
<div className='text-sm text-[#333333]'>مرتب سازی:</div>
|
||||||
|
<div
|
||||||
|
className='flex items-center gap-1 cursor-pointer bg-gray-50 px-3 py-1.5 rounded-lg'
|
||||||
|
onClick={() => setShowDropdown(!showDropdown)}
|
||||||
|
>
|
||||||
|
<span className='text-sm text-[#333333]'>{selectedOption?.label}</span>
|
||||||
|
<ArrowDown2 size={16} color='#333333' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showDropdown && (
|
||||||
|
<div className='absolute top-full right-0 mt-2 bg-white border border-border rounded-lg shadow-lg z-10 min-w-[180px]'>
|
||||||
|
{sortOptions.map((option) => (
|
||||||
|
<div
|
||||||
|
key={option.key}
|
||||||
|
className={`px-4 py-3 cursor-pointer text-sm hover:bg-gray-50 ${selectedSort === option.key ? 'text-primary bg-blue-50' : 'text-[#333333]'
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
handleSortChange(option.key)
|
||||||
|
setShowDropdown(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='text-sm'>
|
||||||
|
{data?.results?.pager?.totalItems || 0} کالا
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BrandSorts
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
'use client'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
currentPage: number
|
||||||
|
totalPages: number
|
||||||
|
onPageChange: (page: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Pagination: FC<Props> = ({ currentPage, totalPages, onPageChange }) => {
|
||||||
|
const getVisiblePages = () => {
|
||||||
|
const delta = 2
|
||||||
|
const range = []
|
||||||
|
const rangeWithDots = []
|
||||||
|
|
||||||
|
for (
|
||||||
|
let i = Math.max(2, currentPage - delta);
|
||||||
|
i <= Math.min(totalPages - 1, currentPage + delta);
|
||||||
|
i++
|
||||||
|
) {
|
||||||
|
range.push(i)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentPage - delta > 2) {
|
||||||
|
rangeWithDots.push(1, '...')
|
||||||
|
} else {
|
||||||
|
rangeWithDots.push(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
rangeWithDots.push(...range)
|
||||||
|
|
||||||
|
if (currentPage + delta < totalPages - 1) {
|
||||||
|
rangeWithDots.push('...', totalPages)
|
||||||
|
} else if (totalPages > 1) {
|
||||||
|
rangeWithDots.push(totalPages)
|
||||||
|
}
|
||||||
|
|
||||||
|
return rangeWithDots
|
||||||
|
}
|
||||||
|
|
||||||
|
const visiblePages = getVisiblePages()
|
||||||
|
|
||||||
|
if (totalPages <= 1) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex items-center justify-center gap-2 mt-8'>
|
||||||
|
{/* دکمه قبلی */}
|
||||||
|
<button
|
||||||
|
onClick={() => onPageChange(currentPage - 1)}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
className='flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors'
|
||||||
|
>
|
||||||
|
<ArrowRight2 size={16} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* شماره صفحات */}
|
||||||
|
<div className='flex items-center gap-2'>
|
||||||
|
{visiblePages.map((page, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
{page === '...' ? (
|
||||||
|
<span className='px-3 py-2 text-gray-500'>...</span>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => onPageChange(page as number)}
|
||||||
|
className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${currentPage === page
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'border border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* دکمه بعدی */}
|
||||||
|
<button
|
||||||
|
onClick={() => onPageChange(currentPage + 1)}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
className='flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors'
|
||||||
|
>
|
||||||
|
<ArrowLeft2 size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Pagination
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
'use client'
|
||||||
|
import { FC, useState } from 'react'
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
|
||||||
|
import { Slider } from '@/components/ui/slider'
|
||||||
|
import Input from '@/components/Input'
|
||||||
|
import { CategoryVariant } from '../types/Types'
|
||||||
|
import { NumberFormat } from '@/config/func'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
categories: CategoryVariant[]
|
||||||
|
priceRange: { minPrice: number; maxPrice: number }
|
||||||
|
selectedCategories: string[]
|
||||||
|
selectedPriceRange: [number, number]
|
||||||
|
onCategoryChange: (categoryId: string) => void
|
||||||
|
onPriceRangeChange: (range: [number, number]) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProductFilters: FC<Props> = ({
|
||||||
|
categories,
|
||||||
|
priceRange,
|
||||||
|
selectedCategories,
|
||||||
|
selectedPriceRange,
|
||||||
|
onCategoryChange,
|
||||||
|
onPriceRangeChange,
|
||||||
|
}) => {
|
||||||
|
const [priceInputs, setPriceInputs] = useState({
|
||||||
|
min: selectedPriceRange[0],
|
||||||
|
max: selectedPriceRange[1],
|
||||||
|
})
|
||||||
|
|
||||||
|
const handlePriceInputChange = (field: 'min' | 'max', value: string) => {
|
||||||
|
const numValue = parseInt(value.replace(/,/g, '')) || 0
|
||||||
|
setPriceInputs(prev => ({ ...prev, [field]: numValue }))
|
||||||
|
|
||||||
|
if (field === 'min') {
|
||||||
|
onPriceRangeChange([numValue, selectedPriceRange[1]])
|
||||||
|
} else {
|
||||||
|
onPriceRangeChange([selectedPriceRange[0], numValue])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='bg-white rounded-2xl p-6 shadow-sm sticky top-4'>
|
||||||
|
<h3 className='text-lg font-bold text-gray-800 mb-6'>فیلترها</h3>
|
||||||
|
|
||||||
|
{/* دستهبندیها */}
|
||||||
|
<Accordion type='single' collapsible className='w-full'>
|
||||||
|
<AccordionItem value='categories'>
|
||||||
|
<AccordionTrigger className='text-sm font-medium'>
|
||||||
|
دستهبندیها
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
<div className='space-y-3 mt-4'>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<label
|
||||||
|
key={category._id}
|
||||||
|
className='flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors'
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type='checkbox'
|
||||||
|
checked={selectedCategories.includes(category._id)}
|
||||||
|
onChange={() => onCategoryChange(category._id)}
|
||||||
|
className='w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500'
|
||||||
|
/>
|
||||||
|
<span className='text-sm text-gray-700 flex-1'>{category.title_fa}</span>
|
||||||
|
<span className='text-xs text-gray-500'>({category.variants.length})</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
{/* محدوده قیمت */}
|
||||||
|
<AccordionItem value='price'>
|
||||||
|
<AccordionTrigger className='text-sm font-medium'>
|
||||||
|
محدوده قیمت
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
<div className='mt-4 space-y-4'>
|
||||||
|
{/* ورودیهای قیمت */}
|
||||||
|
<div className='grid grid-cols-2 gap-3'>
|
||||||
|
<div>
|
||||||
|
<label className='block text-xs text-gray-600 mb-1'>از</label>
|
||||||
|
<Input
|
||||||
|
type='text'
|
||||||
|
value={NumberFormat(priceInputs.min)}
|
||||||
|
onChange={(e) => handlePriceInputChange('min', e.target.value)}
|
||||||
|
className='text-sm'
|
||||||
|
placeholder='0'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className='block text-xs text-gray-600 mb-1'>تا</label>
|
||||||
|
<Input
|
||||||
|
type='text'
|
||||||
|
value={NumberFormat(priceInputs.max)}
|
||||||
|
onChange={(e) => handlePriceInputChange('max', e.target.value)}
|
||||||
|
className='text-sm'
|
||||||
|
placeholder='8,000,000'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* اسلایدر قیمت */}
|
||||||
|
<div className='px-2'>
|
||||||
|
<Slider
|
||||||
|
value={selectedPriceRange}
|
||||||
|
onValueChange={onPriceRangeChange}
|
||||||
|
min={priceRange.minPrice}
|
||||||
|
max={priceRange.maxPrice}
|
||||||
|
step={100000}
|
||||||
|
className='w-full'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* واحد قیمت */}
|
||||||
|
<div className='text-center'>
|
||||||
|
<span className='text-xs text-gray-500'>تومان</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProductFilters
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
'use client'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import ProductCard from '@/components/ProductCard'
|
||||||
|
import { Product } from '../types/Types'
|
||||||
|
import { IProduct } from '@/types/landing.types'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
products: Product[]
|
||||||
|
isLoading?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProductGrid: FC<Props> = ({ products, isLoading = false }) => {
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className='space-y-6'>
|
||||||
|
<div className='flex items-center justify-between'>
|
||||||
|
<h2 className='text-xl font-bold text-gray-800'>محصولات تولید کننده</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'>
|
||||||
|
{Array.from({ length: 8 }).map((_, index) => (
|
||||||
|
<div key={index} className='animate-pulse'>
|
||||||
|
<div className='bg-gray-200 rounded-2xl p-6 h-[320px]'></div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='space-y-6'>
|
||||||
|
<div className='flex items-center justify-between'>
|
||||||
|
<h2 className='text-xl font-bold text-gray-800'>محصولات تولید کننده</h2>
|
||||||
|
<div className='text-sm text-gray-500'>
|
||||||
|
{products.length} محصول یافت شد
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{products.length === 0 ? (
|
||||||
|
<div className='text-center py-12'>
|
||||||
|
<div className='text-gray-400 text-lg mb-2'>هیچ محصولی یافت نشد</div>
|
||||||
|
<div className='text-gray-500 text-sm'>لطفاً فیلترهای خود را تغییر دهید</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'>
|
||||||
|
{products.map((product) => {
|
||||||
|
// تبدیل Product به IProduct
|
||||||
|
const defaultVariant = product.default_variant || product.variants?.[0];
|
||||||
|
const price = defaultVariant?.price || {
|
||||||
|
order_limit: 1,
|
||||||
|
retailPrice: 0,
|
||||||
|
is_specialSale: false,
|
||||||
|
discount_percent: 0,
|
||||||
|
specialSale_order_limit: null,
|
||||||
|
specialSale_quantity: null,
|
||||||
|
specialSale_endDate: null,
|
||||||
|
selling_price: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
const iProduct: IProduct = {
|
||||||
|
_id: product._id,
|
||||||
|
title_fa: product.title_fa,
|
||||||
|
title_en: product.title_en,
|
||||||
|
seoTitle: product.seoTitle || null,
|
||||||
|
seoDescription: product.seoDescription || null,
|
||||||
|
model: '',
|
||||||
|
description: product.description,
|
||||||
|
tags: product.tags || [],
|
||||||
|
shop: defaultVariant?.shop || {
|
||||||
|
_id: '',
|
||||||
|
shopName: '',
|
||||||
|
shopDescription: '',
|
||||||
|
logo: ''
|
||||||
|
},
|
||||||
|
status: defaultVariant?.market_status || 'active',
|
||||||
|
imagesUrl: product.imagesUrl,
|
||||||
|
url: product.url,
|
||||||
|
isWishlist: product.isWished || false,
|
||||||
|
default_variant: {
|
||||||
|
_id: defaultVariant?._id || product._id.toString(),
|
||||||
|
market_status: defaultVariant?.market_status || 'active',
|
||||||
|
price: price,
|
||||||
|
stock: defaultVariant?.stock || 0,
|
||||||
|
isFreeShip: defaultVariant?.isFreeShip || false,
|
||||||
|
isWholeSale: defaultVariant?.isWholeSale || false
|
||||||
|
},
|
||||||
|
variants: (product.variants || []).map(variant => ({
|
||||||
|
...variant,
|
||||||
|
market_status: variant.market_status as "Marketable" | "Unmarketable" | "OutOfStock",
|
||||||
|
shipmentMethod: variant.shipmentMethod.map(method => ({
|
||||||
|
...method,
|
||||||
|
deliveryType: method.deliveryType as "Standard" | "SameDay" | "Express"
|
||||||
|
}))
|
||||||
|
}))
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ProductCard
|
||||||
|
key={product._id}
|
||||||
|
item={iProduct}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProductGrid
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import * as api from "../service/Service";
|
||||||
|
import { BrandProductsParams } from "../types/Types";
|
||||||
|
|
||||||
|
export const useGetBrandProducts = (params: BrandProductsParams) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["brand-products", params],
|
||||||
|
queryFn: () => api.getBrandProducts(params),
|
||||||
|
enabled: !!params.brandId,
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
import { useState, useCallback, useEffect } from "react";
|
||||||
|
import { useGetBrandProducts } from "./useBrandData";
|
||||||
|
import { CategoryVariant } from "../types/Types";
|
||||||
|
|
||||||
|
interface UseBrandFiltersDataProps {
|
||||||
|
brandId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useBrandFiltersData = ({ brandId }: UseBrandFiltersDataProps) => {
|
||||||
|
const [filterState, setFilterState] = useState<{
|
||||||
|
categories: string[];
|
||||||
|
priceRange: [number, number];
|
||||||
|
}>({
|
||||||
|
categories: [],
|
||||||
|
priceRange: [0, 8000000],
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data, isLoading } = useGetBrandProducts({
|
||||||
|
brandId,
|
||||||
|
page: 1,
|
||||||
|
limit: 20,
|
||||||
|
category:
|
||||||
|
filterState.categories.length > 0
|
||||||
|
? filterState.categories.join(",")
|
||||||
|
: undefined,
|
||||||
|
priceMin:
|
||||||
|
filterState.priceRange[0] > 0 ? filterState.priceRange[0] : undefined,
|
||||||
|
priceMax:
|
||||||
|
filterState.priceRange[1] < 8000000
|
||||||
|
? filterState.priceRange[1]
|
||||||
|
: undefined,
|
||||||
|
sort: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
// بروزرسانی محدوده قیمت از API
|
||||||
|
useEffect(() => {
|
||||||
|
if (data?.results?.filters?.priceRange) {
|
||||||
|
const { minPrice, maxPrice } = data.results.filters.priceRange;
|
||||||
|
setFilterState((prev) => ({
|
||||||
|
...prev,
|
||||||
|
priceRange: [minPrice, maxPrice],
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}, [data?.results?.filters?.priceRange]);
|
||||||
|
|
||||||
|
// نمایش دسته اصلی برند برای ساختار درختی
|
||||||
|
const categories: CategoryVariant[] = data?.results?.category
|
||||||
|
? [data.results.category as CategoryVariant]
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const priceMinMaxRange = data?.results?.filters?.priceRange || {
|
||||||
|
minPrice: 0,
|
||||||
|
maxPrice: 8000000,
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyCategoryFilter = useCallback((categoryId: string) => {
|
||||||
|
setFilterState((prev) => ({
|
||||||
|
...prev,
|
||||||
|
categories: prev.categories.includes(categoryId)
|
||||||
|
? prev.categories.filter((id) => id !== categoryId)
|
||||||
|
: [...prev.categories, categoryId],
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const updatePriceRange = useCallback((range: [number, number]) => {
|
||||||
|
setFilterState((prev) => ({
|
||||||
|
...prev,
|
||||||
|
priceRange: range,
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const clearAllFilters = useCallback(() => {
|
||||||
|
const defaultPriceRange = data?.results?.filters?.priceRange
|
||||||
|
? [
|
||||||
|
data.results.filters.priceRange.minPrice,
|
||||||
|
data.results.filters.priceRange.maxPrice,
|
||||||
|
]
|
||||||
|
: [0, 8000000];
|
||||||
|
setFilterState({
|
||||||
|
categories: [],
|
||||||
|
priceRange: defaultPriceRange as [number, number],
|
||||||
|
});
|
||||||
|
}, [data?.results?.filters?.priceRange]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
filterState,
|
||||||
|
categories,
|
||||||
|
isLoading,
|
||||||
|
priceMinMaxRange,
|
||||||
|
applyCategoryFilter,
|
||||||
|
updatePriceRange,
|
||||||
|
clearAllFilters,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||||
|
import * as api from "../service/Service";
|
||||||
|
import { BrandResponse } from "../types/Types";
|
||||||
|
|
||||||
|
interface UseInfiniteBrandProductsDataParams {
|
||||||
|
page?: number;
|
||||||
|
limit?: number;
|
||||||
|
category?: string;
|
||||||
|
minPrice?: number;
|
||||||
|
maxPrice?: number;
|
||||||
|
sort?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useInfiniteBrandProductsData = (
|
||||||
|
brandId: string,
|
||||||
|
params?: UseInfiniteBrandProductsDataParams
|
||||||
|
) => {
|
||||||
|
return useInfiniteQuery<BrandResponse>({
|
||||||
|
queryKey: ["infinite-brand-products", brandId, params],
|
||||||
|
queryFn: ({ pageParam = 1 }) =>
|
||||||
|
api.getBrandProducts({
|
||||||
|
brandId,
|
||||||
|
...params,
|
||||||
|
page: pageParam as number,
|
||||||
|
}),
|
||||||
|
getNextPageParam: (lastPage) => {
|
||||||
|
const pager = lastPage.results.pager;
|
||||||
|
return pager.nextPage ? pager.page + 1 : undefined;
|
||||||
|
},
|
||||||
|
initialPageParam: 1,
|
||||||
|
enabled: !!brandId,
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import axios from "@/config/axios";
|
||||||
|
import { BrandResponse, BrandProductsParams } from "../types/Types";
|
||||||
|
|
||||||
|
export const getBrandProducts = async (
|
||||||
|
params: BrandProductsParams
|
||||||
|
): Promise<BrandResponse> => {
|
||||||
|
const {
|
||||||
|
brandId,
|
||||||
|
page = 1,
|
||||||
|
limit = 10,
|
||||||
|
sort,
|
||||||
|
priceMin,
|
||||||
|
priceMax,
|
||||||
|
category,
|
||||||
|
} = params;
|
||||||
|
|
||||||
|
const queryParams = new URLSearchParams({
|
||||||
|
page: page.toString(),
|
||||||
|
limit: limit.toString(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (sort) queryParams.append("sort", sort.toString());
|
||||||
|
if (priceMin) queryParams.append("priceMin", priceMin.toString());
|
||||||
|
if (priceMax) queryParams.append("priceMax", priceMax.toString());
|
||||||
|
if (category) queryParams.append("category", category);
|
||||||
|
|
||||||
|
const { data } = await axios.get<BrandResponse>(
|
||||||
|
`/brand/${brandId}/search?${queryParams.toString()}`
|
||||||
|
);
|
||||||
|
return data;
|
||||||
|
};
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
// تایپهای اصلی برند
|
||||||
|
export interface Brand {
|
||||||
|
_id: string;
|
||||||
|
title_fa: string;
|
||||||
|
title_en: string;
|
||||||
|
category: string;
|
||||||
|
status: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
images: string[];
|
||||||
|
deleted: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// تایپهای محصول
|
||||||
|
export interface ProductImage {
|
||||||
|
cover: string;
|
||||||
|
list: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductSpecification {
|
||||||
|
title: string;
|
||||||
|
values: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductBrand {
|
||||||
|
_id: string;
|
||||||
|
status: string;
|
||||||
|
title_en: string;
|
||||||
|
title_fa: string;
|
||||||
|
images: string[];
|
||||||
|
logoUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductCategory {
|
||||||
|
_id: string;
|
||||||
|
title_fa: string;
|
||||||
|
title_en: string;
|
||||||
|
icon: string;
|
||||||
|
imageUrl: string;
|
||||||
|
theme: string;
|
||||||
|
description: string;
|
||||||
|
leaf: boolean;
|
||||||
|
parent: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductPrice {
|
||||||
|
order_limit: number;
|
||||||
|
retailPrice: number;
|
||||||
|
selling_price: number;
|
||||||
|
is_specialSale: boolean;
|
||||||
|
discount_percent: number;
|
||||||
|
specialSale_order_limit: number | null;
|
||||||
|
specialSale_quantity: number | null;
|
||||||
|
specialSale_endDate: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Shop {
|
||||||
|
_id: string;
|
||||||
|
shopName: string;
|
||||||
|
shopCode: number;
|
||||||
|
owner: string;
|
||||||
|
shopDescription: string;
|
||||||
|
telephoneNumber: string;
|
||||||
|
isChatActive: boolean;
|
||||||
|
shopPostalCode: string;
|
||||||
|
logo: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ShipmentMethod {
|
||||||
|
_id: number;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
deliveryTime: number;
|
||||||
|
deliveryType: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Warranty {
|
||||||
|
_id: number;
|
||||||
|
duration: string;
|
||||||
|
logoUrl: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Meterage {
|
||||||
|
_id: number;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductVariant {
|
||||||
|
_id: string;
|
||||||
|
market_status: string;
|
||||||
|
price: ProductPrice;
|
||||||
|
stock: number;
|
||||||
|
postingTime: number;
|
||||||
|
isFreeShip: boolean;
|
||||||
|
isWholeSale: boolean;
|
||||||
|
shop: Shop;
|
||||||
|
shipmentMethod: ShipmentMethod[];
|
||||||
|
warranty: Warranty;
|
||||||
|
meterage: Meterage;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Product {
|
||||||
|
_id: number;
|
||||||
|
url: string;
|
||||||
|
title_fa: string;
|
||||||
|
title_en: string;
|
||||||
|
seoTitle: string;
|
||||||
|
seoDescription: string | null;
|
||||||
|
source: string;
|
||||||
|
description: string;
|
||||||
|
metaDescription: string;
|
||||||
|
tags: string[];
|
||||||
|
advantages: string[];
|
||||||
|
disAdvantages: string[];
|
||||||
|
imagesUrl: ProductImage;
|
||||||
|
isFake: string;
|
||||||
|
isWished: boolean | null;
|
||||||
|
specifications: ProductSpecification[];
|
||||||
|
brand: ProductBrand;
|
||||||
|
category: ProductCategory;
|
||||||
|
default_variant: ProductVariant;
|
||||||
|
variants: ProductVariant[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// تایپهای فیلتر
|
||||||
|
export interface PriceRange {
|
||||||
|
minPrice: number;
|
||||||
|
maxPrice: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Filters {
|
||||||
|
priceRange: PriceRange;
|
||||||
|
}
|
||||||
|
|
||||||
|
// تایپهای دستهبندی
|
||||||
|
export interface CategoryVariant {
|
||||||
|
_id: string;
|
||||||
|
title_fa: string;
|
||||||
|
title_en: string;
|
||||||
|
icon: string;
|
||||||
|
imageUrl: string;
|
||||||
|
description: string;
|
||||||
|
variants: number[];
|
||||||
|
hierarchy: string[];
|
||||||
|
leaf: boolean;
|
||||||
|
parent: string;
|
||||||
|
deleted: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
url: string;
|
||||||
|
children: CategoryVariant[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Category {
|
||||||
|
_id: string;
|
||||||
|
title_fa: string;
|
||||||
|
title_en: string;
|
||||||
|
icon: string;
|
||||||
|
imageUrl: string;
|
||||||
|
description: string;
|
||||||
|
variants: number[];
|
||||||
|
hierarchy: string[];
|
||||||
|
leaf: boolean;
|
||||||
|
parent: string | null;
|
||||||
|
deleted: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
url: string;
|
||||||
|
children: CategoryVariant[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// تایپهای پاژینیشن
|
||||||
|
export interface Pager {
|
||||||
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
totalItems: number;
|
||||||
|
totalPages: number;
|
||||||
|
prevPage: boolean;
|
||||||
|
nextPage: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// تایپ اصلی پاسخ API
|
||||||
|
export interface BrandResponse {
|
||||||
|
status: number;
|
||||||
|
success: boolean;
|
||||||
|
results: {
|
||||||
|
brand: Brand;
|
||||||
|
products: Product[];
|
||||||
|
filters: Filters;
|
||||||
|
category: Category;
|
||||||
|
pager: Pager;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// تایپهای پارامترهای درخواست
|
||||||
|
export interface BrandParams {
|
||||||
|
id: string;
|
||||||
|
page?: number;
|
||||||
|
limit?: number;
|
||||||
|
sort?: number;
|
||||||
|
priceMin?: number;
|
||||||
|
priceMax?: number;
|
||||||
|
category?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// تایپ پارامترهای hook برای دریافت محصولات برند
|
||||||
|
export interface BrandProductsParams {
|
||||||
|
brandId: string;
|
||||||
|
page?: number;
|
||||||
|
limit?: number;
|
||||||
|
sort?: number;
|
||||||
|
priceMin?: number;
|
||||||
|
priceMax?: number;
|
||||||
|
category?: string;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user