danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

price history + manage wish in single product page

Browse Source
This commit is contained in:
hamid zarghami
2025-09-17 16:06:25 +03:30
parent f849ebdb42
commit 7b51a18a4a
8 changed files with 686 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/product/components/ActionProduct.tsx
+87 -28
View File
@@ -1,21 +1,77 @@
'use client'
import { Chart2, Heart, Hierarchy2, Notification, RowHorizontal } from 'iconsax-react'
import { FC, useState } from 'react'
import { FC, useEffect, useState } from 'react'
import { Product } from '@/types/product.types'
import { useAddWishlist, useRemoveWishlist } from '@/app/products/hooks/useProductsData'
import { useSharedStore } from '@/share/store/sharedStore'
import { toast } from '@/components/Toast'
import { useCheckWishProduct } from '../hooks/useProductData'
import { useProductStore } from '../store/Store'
import PriceHistory from './PriceHistory'
interface ActionProductProps {
product: Product
}
const ActionProduct: FC<ActionProductProps> = ({ product }) => {
const { variantId } = useProductStore()
const { isLogin } = useSharedStore()
const [isWishlist, setIsWishlist] = useState(false)
const [isCompare, setIsCompare] = useState(false)
const [isWishlistLoading, setIsWishlistLoading] = useState(false)
const { mutate: addWishlist } = useAddWishlist()
const { mutate: removeWishlist } = useRemoveWishlist()
const { data } = useCheckWishProduct(product._id.toString(), variantId)
const handleWishlist = () => {
setIsWishlist(!isWishlist)
// TODO: API call to add/remove from wishlist
if (!isLogin) return
if (!product._id || !product.default_variant?._id) return
setIsWishlistLoading(true)
if (isWishlist) {
removeWishlist(
{
productId: product._id.toString(),
variantId: variantId
},
{
onSuccess: () => {
setIsWishlist(false)
setIsWishlistLoading(false)
},
onError: () => {
setIsWishlistLoading(false)
}
}
)
} else {
addWishlist(
{
productId: product._id.toString(),
variantId: variantId
},
{
onSuccess: () => {
setIsWishlist(true)
setIsWishlistLoading(false)
},
onError: () => {
setIsWishlistLoading(false)
}
}
)
}
}
useEffect(() => {
if (data) {
setIsWishlist(data?.results?.isInWishlist)
}
}, [data])
const handleCompare = () => {
setIsCompare(!isCompare)
// TODO: API call to add/remove from compare
@@ -30,7 +86,7 @@ const ActionProduct: FC<ActionProductProps> = ({ product }) => {
})
} else {
navigator.clipboard.writeText(window.location.href)
// TODO: Show toast notification
toast('')
}
}
@@ -39,46 +95,49 @@ const ActionProduct: FC<ActionProductProps> = ({ product }) => {
<div className='flex flex-col gap-3'>
<button
onClick={handleWishlist}
className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
title={isWishlist ? 'حذف از علاقه‌مندی‌ها' : 'افزودن به علاقه‌مندی‌ها'}
disabled={!isLogin || isWishlistLoading}
className={`p-2 rounded-full bg-white/80 backdrop-blur-sm transition-colors ${isLogin && !isWishlistLoading ? 'hover:bg-white' : 'opacity-50 cursor-not-allowed'
}`}
title={
!isLogin
? 'برای افزودن به علاقه‌مندی‌ها وارد شوید'
: isWishlist
? 'حذف از علاقه‌مندی‌ها'
: 'افزودن به علاقه‌مندی‌ها'
}
>
<Heart
size={20}
color={isWishlist ? '#ff4757' : '#333333'}
color={isWishlist ? '#000' : '#333333'}
variant={isWishlist ? 'Bold' : 'Outline'}
/>
</button>
<button
onClick={handleCompare}
className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
title={isCompare ? 'حذف از مقایسه' : 'افزودن به مقایسه'}
>
<Hierarchy2
size={20}
color={isCompare ? '#2ed573' : '#333333'}
variant={isCompare ? 'Bold' : 'Outline'}
/>
</button>
<button
onClick={handleShare}
className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
title={'اشتراک‌گذاری'}
>
<Hierarchy2
size={20}
color={'#333333'}
variant={'Outline'}
/>
</button>
{/* <button
onClick={handleShare}
className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
title='اشتراک‌گذاری'
>
<Notification size={20} color='#333333' />
</button>
</button> */}
<PriceHistory productId={product._id.toString()} />
<button
className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
title='گزارش مشکل'
>
<Chart2 size={20} color='#333333' />
</button>
<button
className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
title='گزینه‌های بیشتر'
title='مقایسه کالا'
>
<RowHorizontal size={20} color='#333333' variant='Bulk' />
</button>
src/app/product/components/PriceHistory.tsx
+158
View File
@@ -0,0 +1,158 @@
'use client'
import { Chart2 } from 'iconsax-react'
import { FC, useState } from 'react'
import { useGetPriceHistory } from '../hooks/useProductData'
import DefaulModal from '@/components/DefaulModal'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
interface PriceHistoryProps {
productId: string
}
const PriceHistory: FC<PriceHistoryProps> = ({ productId }) => {
const [isModalOpen, setIsModalOpen] = useState(false)
const { data } = useGetPriceHistory(productId)
// پردازش داده‌ها برای چارت
const chartData = data?.results?.priceHistory?.[0]?.history?.map(item => ({
date: item.date,
selling_price: item.selling_price,
retail_price: item.retail_price,
shop: item.shop
})) || []
return (
<>
<button
onClick={() => setIsModalOpen(true)}
className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
title='نمودار تغییر قیمت'
>
<Chart2 size={20} color='#333333' />
</button>
<DefaulModal
open={isModalOpen}
close={() => setIsModalOpen(false)}
isHeader={true}
title_header="نمودار تغییر قیمت"
width={600}
>
<div className='p-6'>
{chartData.length > 0 ? (
<div className='h-96 w-full'>
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={chartData}
margin={{
top: 20,
right: 30,
left: 20,
bottom: 20,
}}
>
<CartesianGrid strokeDasharray="3 3" stroke="#e0e7ff" />
<XAxis
dataKey="date"
fontSize={11}
tick={{ fontSize: 9, fill: '#6b7280' }}
tickLine={{ stroke: '#d1d5db' }}
axisLine={{ stroke: '#d1d5db' }}
angle={-45}
textAnchor="end"
height={60}
/>
<YAxis
fontSize={11}
tick={{ fontSize: 9, fill: '#6b7280' }}
tickLine={{ stroke: '#d1d5db' }}
axisLine={{ stroke: '#d1d5db' }}
tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
/>
<Tooltip
contentStyle={{
backgroundColor: '#ffffff',
border: '1px solid #e5e7eb',
borderRadius: '12px',
fontSize: '13px',
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
padding: '12px'
}}
formatter={(value, name) => [
<span key={name} style={{ color: name === 'selling_price' ? '#2563eb' : '#dc2626', fontWeight: 'bold' }}>
{value.toLocaleString()} تومان
</span>,
name === 'selling_price' ? 'قیمت فروش' : 'قیمت خرده'
]}
labelFormatter={(label) => (
<span style={{ color: '#374151', fontWeight: '600' }}>
تاریخ: {label}
</span>
)}
cursor={{ stroke: '#9ca3af', strokeWidth: 1, strokeDasharray: '5 5' }}
/>
<Line
type="monotone"
dataKey="selling_price"
stroke="#2563eb"
strokeWidth={3}
dot={{ fill: '#2563eb', strokeWidth: 2, r: 5, stroke: '#ffffff' }}
activeDot={{
r: 8,
fill: '#2563eb',
stroke: '#ffffff',
strokeWidth: 3,
style: { filter: 'drop-shadow(0 4px 6px rgb(37 99 235 / 0.3))' }
}}
name="قیمت فروش"
connectNulls={false}
/>
<Line
type="monotone"
dataKey="retail_price"
stroke="#dc2626"
strokeWidth={3}
dot={{ fill: '#dc2626', strokeWidth: 2, r: 5, stroke: '#ffffff' }}
activeDot={{
r: 8,
fill: '#dc2626',
stroke: '#ffffff',
strokeWidth: 3,
style: { filter: 'drop-shadow(0 4px 6px rgb(220 38 38 / 0.3))' }
}}
name="قیمت خرده"
connectNulls={false}
/>
</LineChart>
</ResponsiveContainer>
</div>
) : (
<div className='flex items-center justify-center h-96'>
<div className='text-center'>
<div className='w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center'>
<Chart2 size={32} color='#9ca3af' />
</div>
<p className='text-gray-500 text-lg'>داده‌ای برای نمایش نمودار وجود ندارد</p>
</div>
</div>
)}
{chartData.length > 0 && (
<div className='mt-6 flex gap-8 justify-center'>
<div className='flex items-center gap-3'>
<div className='w-6 h-1 bg-blue-600 rounded-full'></div>
<span className='text-sm font-medium text-gray-700'>قیمت فروش</span>
</div>
<div className='flex items-center gap-3'>
<div className='w-6 h-1 bg-red-600 rounded-full'></div>
<span className='text-sm font-medium text-gray-700'>قیمت خرده</span>
</div>
</div>
)}
</div>
</DefaulModal>
</>
)
}
export default PriceHistory
src/app/product/hooks/useProductData.ts
+16
View File
@@ -24,3 +24,19 @@ export const useAddQuestion = () => {
mutationFn: api.addQuestion,
});
};
export const useCheckWishProduct = (productId: string, variantId: string) => {
return useQuery({
queryKey: ["check-wish-product", productId, variantId],
queryFn: () => api.checkWishProduct(productId, variantId),
enabled: !!productId && !!variantId,
});
};
export const useGetPriceHistory = (productId: string) => {
return useQuery({
queryKey: ["price-history", productId],
queryFn: () => api.getPriceHistory(productId),
enabled: !!productId,
});
};
src/app/product/service/Service.ts
+22 -1
View File
@@ -1,6 +1,10 @@
import axios from "@/config/axios";
import { ProductDetailResponse } from "@/types/product.types";
import { AddCommentProps, AddQuestionProps } from "../types/Types";
import {
AddCommentProps,
AddQuestionProps,
PriceHistoryResponse,
} from "../types/Types";
export const getProduct = async (
id: string
@@ -24,3 +28,20 @@ export const addQuestion = async (params: AddQuestionProps) => {
);
return data;
};
export const checkWishProduct = async (
productId: string,
variantId: string
) => {
const { data } = await axios.get(
`/product/${productId}/wishlist/${variantId}`
);
return data;
};
export const getPriceHistory = async (
productId: string
): Promise<PriceHistoryResponse> => {
const { data } = await axios.get(`/product/${productId}/price-history`);
return data;
};
src/app/product/types/Types.ts
+24
View File
@@ -16,3 +16,27 @@ export type ProductStoreType = {
variantId: string;
setVariantId: (value: string) => void;
};
export type PriceHistoryItem = {
shop: string;
selling_price: number;
retail_price: number;
date: string;
};
export type PriceHistory = {
_id: number;
product: number;
title: string;
history: PriceHistoryItem[];
};
export type PriceHistoryResults = {
priceHistory: PriceHistory[];
};
export type PriceHistoryResponse = {
status: number;
success: boolean;
results: PriceHistoryResults;
};
src/app/profile/favorite/page.tsx
+6
View File
@@ -7,6 +7,7 @@ import ProductCard from "@/components/ProductCard"
import { useGetWithList } from "../hooks/useProfileData"
import { IProduct } from "@/types/landing.types"
import { WishlistItem } from "../types/ProfileTypes"
import PageLoading from "@/components/PageLoading"
const FavoritePage: NextPage = () => {
@@ -66,6 +67,11 @@ const FavoritePage: NextPage = () => {
const products = withList?.results?.wishlist ? transformWishlistToProducts(withList.results.wishlist) : []
if (isLoading) {
return <PageLoading />
}
return (
<div className="p-3 sm:p-4 md:p-6">
<Menu pageActive='favorite' />