nurmuhammet/postshop-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

connect some api

Browse Source
This commit is contained in:
Jelaletdin12
2025-11-22 20:59:28 +05:00
parent 4fe0fb3d4e
commit 2857d34f4d
24 changed files with 1233 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/[locale]/layout.tsx
View File

@@ -53,7 +53,6 @@ export default async function RootLayout({ children, params }: Props) {
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<Providers> <Providers>
<NextIntlClientProvider locale={locale} messages={messages}> <NextIntlClientProvider locale={locale} messages={messages}>
{/* AuthWrapper handles guest token initialization */}
<AuthWrapper locale={locale}> <AuthWrapper locale={locale}>
<Header locale={locale} /> <Header locale={locale} />
{children} {children}

2
app/[locale]/me/page.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next" import type { Metadata } from "next"
import ClientProfilePage from "../../../features/profile/components/client-page" import ClientProfilePage from "../../../features/profile/components/ProfilePageContent"
export const metadata: Metadata = { export const metadata: Metadata = {
title: "My Profile | E-Commerce", title: "My Profile | E-Commerce",

498
app/[locale]/openStore/page.tsx
View File

@@ -1,274 +1,274 @@
// "use client" "use client"
// import type React from "react" import type React from "react"
// import { useState } from "react" import { useState } from "react"
// import { Upload } from "lucide-react" import { Upload } from "lucide-react"
// import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
// import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
// import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
// import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
// import { useOpenStore } from "@/lib/hooks" import { useOpenStore } from "@/lib/hooks"
// import { useToast } from "@/hooks/use-toast" import { useToast } from "@/hooks/use-toast"
// interface OpenStorePageProps { interface OpenStorePageProps {
// locale?: string locale?: string
// translations?: { translations?: {
// title: string title: string
// firstName: string firstName: string
// lastName: string lastName: string
// email: string email: string
// phone: string phone: string
// uploadPatent: string uploadPatent: string
// submit: string submit: string
// selectedFile: string selectedFile: string
// firstNameRequired: string firstNameRequired: string
// lastNameRequired: string lastNameRequired: string
// emailInvalid: string emailInvalid: string
// phoneInvalid: string phoneInvalid: string
// fileRequired: string fileRequired: string
// fileSizeError: string fileSizeError: string
// fileTypeError: string fileTypeError: string
// } }
// } }
// interface FormData { interface FormData {
// firstName: string firstName: string
// lastName: string lastName: string
// email: string email: string
// phone: string phone: string
// file: File | null file: File | null
// } }
// interface FormErrors { interface FormErrors {
// firstName?: string firstName?: string
// lastName?: string lastName?: string
// email?: string email?: string
// phone?: string phone?: string
// file?: string file?: string
// } }
// export default function OpenStorePage({ locale = "ru", translations }: OpenStorePageProps) { export default function OpenStorePage({ locale = "ru", translations }: OpenStorePageProps) {
// const [formData, setFormData] = useState<FormData>({ const [formData, setFormData] = useState<FormData>({
// firstName: "", firstName: "",
// lastName: "", lastName: "",
// email: "", email: "",
// phone: "+993", phone: "+993",
// file: null, file: null,
// }) })
// const [errors, setErrors] = useState<FormErrors>({}) const [errors, setErrors] = useState<FormErrors>({})
// const [fileName, setFileName] = useState("") const [fileName, setFileName] = useState("")
// const { mutate: submitOpenStore, isPending: loading } = useOpenStore() const { mutate: submitOpenStore, isPending: loading } = useOpenStore()
// const { toast } = useToast() const { toast } = useToast()
// const t = translations || { const t = translations || {
// title: "Форма подачи заявления на открытие магазина", title: "Форма подачи заявления на открытие магазина",
// firstName: "Имя", firstName: "Имя",
// lastName: "Фамилия", lastName: "Фамилия",
// email: "Email", email: "Email",
// phone: "Телефон", phone: "Телефон",
// uploadPatent: "Загрузите патент на розничную торговлю (PDF, JPG)", uploadPatent: "Загрузите патент на розничную торговлю (PDF, JPG)",
// submit: "Отправить", submit: "Отправить",
// selectedFile: "Выбранный файл", selectedFile: "Выбранный файл",
// firstNameRequired: "Имя обязательно", firstNameRequired: "Имя обязательно",
// lastNameRequired: "Фамилия обязательна", lastNameRequired: "Фамилия обязательна",
// emailInvalid: "Некорректный email", emailInvalid: "Некорректный email",
// phoneInvalid: "Некорректный номер телефона", phoneInvalid: "Некорректный номер телефона",
// fileRequired: "Патент обязателен", fileRequired: "Патент обязателен",
// fileSizeError: "Файл слишком большой (макс. 25MB)", fileSizeError: "Файл слишком большой (макс. 25MB)",
// fileTypeError: "Только PDF и JPG документы", fileTypeError: "Только PDF и JPG документы",
// } }
// const validateForm = (): boolean => { const validateForm = (): boolean => {
// const newErrors: FormErrors = {} const newErrors: FormErrors = {}
// if (!formData.firstName.trim()) { if (!formData.firstName.trim()) {
// newErrors.firstName = t.firstNameRequired newErrors.firstName = t.firstNameRequired
// } }
// if (!formData.lastName.trim()) { if (!formData.lastName.trim()) {
// newErrors.lastName = t.lastNameRequired newErrors.lastName = t.lastNameRequired
// } }
// const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
// if (!emailRegex.test(formData.email)) { if (!emailRegex.test(formData.email)) {
// newErrors.email = t.emailInvalid newErrors.email = t.emailInvalid
// } }
// const phoneRegex = /^\+?[0-9]{6,15}$/ const phoneRegex = /^\+?[0-9]{6,15}$/
// if (!phoneRegex.test(formData.phone)) { if (!phoneRegex.test(formData.phone)) {
// newErrors.phone = t.phoneInvalid newErrors.phone = t.phoneInvalid
// } }
// if (!formData.file) { if (!formData.file) {
// newErrors.file = t.fileRequired newErrors.file = t.fileRequired
// } else { } else {
// const allowedTypes = ["image/jpeg", "image/jpg", "application/pdf"] const allowedTypes = ["image/jpeg", "image/jpg", "application/pdf"]
// if (!allowedTypes.includes(formData.file.type)) { if (!allowedTypes.includes(formData.file.type)) {
// newErrors.file = t.fileTypeError newErrors.file = t.fileTypeError
// } }
// if (formData.file.size > 25 * 1024 * 1024) { if (formData.file.size > 25 * 1024 * 1024) {
// newErrors.file = t.fileSizeError newErrors.file = t.fileSizeError
// } }
// } }
// setErrors(newErrors) setErrors(newErrors)
// return Object.keys(newErrors).length === 0 return Object.keys(newErrors).length === 0
// } }
// const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// const { name, value } = e.target const { name, value } = e.target
// setFormData((prev) => ({ ...prev, [name]: value })) setFormData((prev) => ({ ...prev, [name]: value }))
// if (errors[name as keyof FormErrors]) { if (errors[name as keyof FormErrors]) {
// setErrors((prev) => ({ ...prev, [name]: undefined })) setErrors((prev) => ({ ...prev, [name]: undefined }))
// } }
// } }
// const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// const file = e.target.files?.[0] const file = e.target.files?.[0]
// if (file) { if (file) {
// setFormData((prev) => ({ ...prev, file })) setFormData((prev) => ({ ...prev, file }))
// setFileName(file.name) setFileName(file.name)
// if (errors.file) { if (errors.file) {
// setErrors((prev) => ({ ...prev, file: undefined })) setErrors((prev) => ({ ...prev, file: undefined }))
// } }
// } }
// } }
// const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
// e.preventDefault() e.preventDefault()
// if (!validateForm()) return if (!validateForm()) return
// if (formData.file) { if (formData.file) {
// submitOpenStore( submitOpenStore(
// { {
// firstName: formData.firstName, firstName: formData.firstName,
// lastName: formData.lastName, lastName: formData.lastName,
// email: formData.email, email: formData.email,
// phone: formData.phone, phone: formData.phone,
// patentFile: formData.file, patentFile: formData.file,
// }, },
// { {
// onSuccess: () => { onSuccess: () => {
// toast({ toast({
// title: "Success", title: "Success",
// description: "Your store request has been submitted successfully", description: "Your store request has been submitted successfully",
// }) })
// setFormData({ setFormData({
// firstName: "", firstName: "",
// lastName: "", lastName: "",
// email: "", email: "",
// phone: "+993", phone: "+993",
// file: null, file: null,
// }) })
// setFileName("") setFileName("")
// }, },
// onError: (error: any) => { onError: (error: any) => {
// toast({ toast({
// title: "Error", title: "Error",
// description: error?.message || "Failed to submit store request", description: error?.message || "Failed to submit store request",
// variant: "destructive", variant: "destructive",
// }) })
// }, },
// }, },
// ) )
// } }
// } }
// return ( return (
// <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4"> <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
// <Card className="w-full max-w-md shadow-lg"> <Card className="w-full max-w-md shadow-lg">
// <CardHeader> <CardHeader>
// <CardTitle className="text-2xl text-center">{t.title}</CardTitle> <CardTitle className="text-2xl text-center">{t.title}</CardTitle>
// <CardDescription className="text-center">Заполните форму для подачи заявления</CardDescription> <CardDescription className="text-center">Заполните форму для подачи заявления</CardDescription>
// </CardHeader> </CardHeader>
// <CardContent> <CardContent>
// <form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
// {/* First Name */} {/* First Name */}
// <div className="space-y-2"> <div className="space-y-2">
// <Label htmlFor="firstName">{t.firstName}</Label> <Label htmlFor="firstName">{t.firstName}</Label>
// <Input <Input
// id="firstName" id="firstName"
// name="firstName" name="firstName"
// value={formData.firstName} value={formData.firstName}
// onChange={handleInputChange} onChange={handleInputChange}
// className={errors.firstName ? "border-red-500" : ""} className={errors.firstName ? "border-red-500" : ""}
// /> />
// {errors.firstName && <p className="text-sm text-red-500">{errors.firstName}</p>} {errors.firstName && <p className="text-sm text-red-500">{errors.firstName}</p>}
// </div> </div>
// {/* Last Name */} {/* Last Name */}
// <div className="space-y-2"> <div className="space-y-2">
// <Label htmlFor="lastName">{t.lastName}</Label> <Label htmlFor="lastName">{t.lastName}</Label>
// <Input <Input
// id="lastName" id="lastName"
// name="lastName" name="lastName"
// value={formData.lastName} value={formData.lastName}
// onChange={handleInputChange} onChange={handleInputChange}
// className={errors.lastName ? "border-red-500" : ""} className={errors.lastName ? "border-red-500" : ""}
// /> />
// {errors.lastName && <p className="text-sm text-red-500">{errors.lastName}</p>} {errors.lastName && <p className="text-sm text-red-500">{errors.lastName}</p>}
// </div> </div>
// {/* Email */} {/* Email */}
// <div className="space-y-2"> <div className="space-y-2">
// <Label htmlFor="email">{t.email}</Label> <Label htmlFor="email">{t.email}</Label>
// <Input <Input
// id="email" id="email"
// name="email" name="email"
// type="email" type="email"
// value={formData.email} value={formData.email}
// onChange={handleInputChange} onChange={handleInputChange}
// className={errors.email ? "border-red-500" : ""} className={errors.email ? "border-red-500" : ""}
// /> />
// {errors.email && <p className="text-sm text-red-500">{errors.email}</p>} {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
// </div> </div>
// {/* Phone */} {/* Phone */}
// <div className="space-y-2"> <div className="space-y-2">
// <Label htmlFor="phone">{t.phone}</Label> <Label htmlFor="phone">{t.phone}</Label>
// <Input <Input
// id="phone" id="phone"
// name="phone" name="phone"
// value={formData.phone} value={formData.phone}
// onChange={handleInputChange} onChange={handleInputChange}
// placeholder="+99361111111" placeholder="+99361111111"
// className={errors.phone ? "border-red-500" : ""} className={errors.phone ? "border-red-500" : ""}
// /> />
// {errors.phone && <p className="text-sm text-red-500">{errors.phone}</p>} {errors.phone && <p className="text-sm text-red-500">{errors.phone}</p>}
// </div> </div>
// {/* File Upload */} {/* File Upload */}
// <div className="space-y-2"> <div className="space-y-2">
// <Label htmlFor="file">{t.uploadPatent}</Label> <Label htmlFor="file">{t.uploadPatent}</Label>
// <div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
// <Input id="file" type="file" accept=".pdf,.jpg,.jpeg" onChange={handleFileChange} className="hidden" /> <Input id="file" type="file" accept=".pdf,.jpg,.jpeg" onChange={handleFileChange} className="hidden" />
// <Button <Button
// type="button" type="button"
// variant="outline" variant="outline"
// className="w-full bg-transparent" className="w-full bg-transparent"
// onClick={() => document.getElementById("file")?.click()} onClick={() => document.getElementById("file")?.click()}
// > >
// <Upload className="mr-2 h-4 w-4" /> <Upload className="mr-2 h-4 w-4" />
// {t.uploadPatent} {t.uploadPatent}
// </Button> </Button>
// {fileName && ( {fileName && (
// <p className="text-sm text-gray-600"> <p className="text-sm text-gray-600">
// {t.selectedFile}: {fileName} {t.selectedFile}: {fileName}
// </p> </p>
// )} )}
// {errors.file && <p className="text-sm text-red-500">{errors.file}</p>} {errors.file && <p className="text-sm text-red-500">{errors.file}</p>}
// </div> </div>
// </div> </div>
// {/* Submit Button */} {/* Submit Button */}
// <Button type="submit" className="w-full" disabled={loading}> <Button type="submit" className="w-full" disabled={loading}>
// {loading ? "Загрузка..." : t.submit} {loading ? "Загрузка..." : t.submit}
// </Button> </Button>
// </form> </form>
// </CardContent> </CardContent>
// </Card> </Card>
// </div> </div>
// ) )
// } }

2
app/[locale]/orders/page.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next" import type { Metadata } from "next"
import OrdersPageClient from "../../../features/orders/components/orders-page-client" import OrdersPageClient from "../../../features/orders/components/OrderPage"
export const metadata: Metadata = { export const metadata: Metadata = {
title: "My Orders | E-Commerce", title: "My Orders | E-Commerce",

214
components/ProductCard.tsx
View File

@@ -1,214 +0,0 @@
"use client";
import { useState, MouseEvent } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Heart, Minus, Plus } from "lucide-react";
import Image, { StaticImageData } from "next/image";
import { useAddToFavorites, useRemoveFromFavorites } from "@/lib/hooks";
import { useToast } from "@/hooks/use-toast";
type ProductCardProps = {
id: number;
name: string;
price: number | null;
struct_price_text: string;
discount?: number | null;
discount_text?: string | null;
images: (StaticImageData | string)[];
is_favorite: boolean;
labels?: { text: string; bg_color: string }[];
price_color?: string;
height?: number;
width?: number;
button?: boolean;
};
export default function ProductCard({
id,
name,
price,
struct_price_text,
discount,
discount_text,
images,
is_favorite,
labels = [],
price_color = "#005bff",
height = 360,
width = 280,
button = true,
}: ProductCardProps) {
const [favorite, setFavorite] = useState(is_favorite);
const [cart, setCart] = useState(false);
const [count, setCount] = useState(1);
const { toast } = useToast();
const { mutate: addToFavorites, isPending: isAdding } = useAddToFavorites();
const { mutate: removeFromFavorites, isPending: isRemoving } =
useRemoveFromFavorites();
const handleFavorite = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
const newFavoriteState = !favorite;
if (newFavoriteState) {
// Добавляем в избранное
addToFavorites(id, {
onSuccess: () => {
setFavorite(true);
toast({
title: "Товар добавлен в избранное",
});
},
onError: (error) => {
toast({
title: "Ошибка",
description: error.message,
variant: "destructive",
});
},
});
} else {
// Удаляем из избранного
removeFromFavorites(id, {
onSuccess: () => {
setFavorite(false);
toast({
title: "Товар удален из избранного",
});
},
onError: (error) => {
toast({
title: "Ошибка",
description: error.message,
variant: "destructive",
});
},
});
}
};
const handleAddToCart = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
setCart(true);
};
const handleIncrement = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
setCount((c) => c + 1);
};
const handleDecrement = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
setCount((c) => (c > 1 ? c - 1 : c));
};
const isPending = isAdding || isRemoving;
return (
<Link href={`/product/${id}`} className="no-underline">
<Card
className={`relative gap-2 border-none shadow-none! p-0 w-full max-w-[${width}px] overflow-hidden rounded-2xl hover:shadow-md transition-all cursor-pointer`}
style={{ height }}
>
{/* Image Section */}
<div className="relative w-full h-[260px]">
{images?.[0] && (
<Image
src={images[0]}
alt={name}
fill
sizes="(max-width: 600px) 100vw, 33vw"
className="object-contain"
priority
/>
)}
{/* Favorite Button */}
<button
onClick={handleFavorite}
disabled={isPending}
className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
{favorite ? (
<Heart className="w-5 h-5 text-red-500 fill-red-500" />
) : (
<Heart className="w-5 h-5 text-gray-700" />
)}
</button>
{/* Labels */}
{labels?.length > 0 && (
<div className="absolute bottom-2 left-2 flex flex-col gap-1">
{labels.map((label) => (
<Badge
key={label.text}
className="text-white text-[10px] font-bold uppercase rounded-r-md"
style={{ backgroundColor: label.bg_color }}
>
{label.text}
</Badge>
))}
</div>
)}
</div>
{/* Content */}
<CardContent className="p-0 space-y-1">
<p
className="text-sm font-semibold mx-2"
style={{ color: price_color }}
>
{struct_price_text}
</p>
<p className="text-gray-800 text-sm truncate mx-2">{name}</p>
</CardContent>
{/* Buttons - закомментированы в оригинале */}
{/* {button && (
<div className="p-3">
{!cart ? (
<Button
className="w-full font-bold text-base rounded-xl"
onClick={handleAddToCart}
>
Заказать
</Button>
) : (
<div className="flex items-center gap-2">
<Button
variant="outline"
size="icon"
onClick={handleDecrement}
disabled={count === 1}
className="rounded-xl"
>
<Minus className="w-4 h-4" />
</Button>
<div className="flex-1 text-center text-gray-700 border rounded-xl py-2">
{count}
</div>
<Button
variant="outline"
size="icon"
onClick={handleIncrement}
className="rounded-xl"
>
<Plus className="w-4 h-4" />
</Button>
</div>
)}
</div>
)} */}
</Card>
</Link>
);
}

2
components/layout/ui/CategoryMenu.tsx
View File

@@ -22,7 +22,7 @@ export default function CategoryMenu({ isOpen, onClose }: CategoryMenuProps) {
const activeCategory = hoveredCategory !== null ? categoryList[hoveredCategory] : null const activeCategory = hoveredCategory !== null ? categoryList[hoveredCategory] : null
return ( return (
<div className="fixed left-0 right-0 top-22 z-40 bg-white border-b shadow-lg"> <div className="fixed left-0 right-0 top-22 z-40 bg-white border-b shadow-lg max-w-[1504px] mx-auto">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex"> <div className="flex">
<CategoryList <CategoryList

241
components/ui/carousel.tsx Normal file
View File

@@ -0,0 +1,241 @@
"use client"
import * as React from "react"
import useEmblaCarousel, {
type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps = {
opts?: CarouselOptions
plugins?: CarouselPlugin
orientation?: "horizontal" | "vertical"
setApi?: (api: CarouselApi) => void
}
type CarouselContextProps = {
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
api: ReturnType<typeof useEmblaCarousel>[1]
scrollPrev: () => void
scrollNext: () => void
canScrollPrev: boolean
canScrollNext: boolean
} & CarouselProps
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
function useCarousel() {
const context = React.useContext(CarouselContext)
if (!context) {
throw new Error("useCarousel must be used within a <Carousel />")
}
return context
}
function Carousel({
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
}: React.ComponentProps<"div"> & CarouselProps) {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins
)
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
const [canScrollNext, setCanScrollNext] = React.useState(false)
const onSelect = React.useCallback((api: CarouselApi) => {
if (!api) return
setCanScrollPrev(api.canScrollPrev())
setCanScrollNext(api.canScrollNext())
}, [])
const scrollPrev = React.useCallback(() => {
api?.scrollPrev()
}, [api])
const scrollNext = React.useCallback(() => {
api?.scrollNext()
}, [api])
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") {
event.preventDefault()
scrollPrev()
} else if (event.key === "ArrowRight") {
event.preventDefault()
scrollNext()
}
},
[scrollPrev, scrollNext]
)
React.useEffect(() => {
if (!api || !setApi) return
setApi(api)
}, [api, setApi])
React.useEffect(() => {
if (!api) return
onSelect(api)
api.on("reInit", onSelect)
api.on("select", onSelect)
return () => {
api?.off("select", onSelect)
}
}, [api, onSelect])
return (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
data-slot="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
)
}
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
const { carouselRef, orientation } = useCarousel()
return (
<div
ref={carouselRef}
className="overflow-hidden"
data-slot="carousel-content"
>
<div
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
)}
{...props}
/>
</div>
)
}
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
const { orientation } = useCarousel()
return (
<div
role="group"
aria-roledescription="slide"
data-slot="carousel-item"
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className
)}
{...props}
/>
)
}
function CarouselPrevious({
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return (
<Button
data-slot="carousel-previous"
variant={variant}
size={size}
className={cn(
"absolute size-8 rounded-full",
orientation === "horizontal"
? "top-1/2 -left-12 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
>
<ArrowLeft />
<span className="sr-only">Previous slide</span>
</Button>
)
}
function CarouselNext({
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollNext, canScrollNext } = useCarousel()
return (
<Button
data-slot="carousel-next"
variant={variant}
size={size}
className={cn(
"absolute size-8 rounded-full",
orientation === "horizontal"
? "top-1/2 -right-12 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
>
<ArrowRight />
<span className="sr-only">Next slide</span>
</Button>
)
}
export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
}

48
eslint.config.mjs
View File

@@ -2,17 +2,53 @@ import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals"; import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript"; import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([ import tsPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import tanstackPlugin from "@tanstack/eslint-plugin-query";
import importPlugin from "eslint-plugin-import";
export default defineConfig([
...nextVitals, ...nextVitals,
...nextTs, ...nextTs,
// Override default ignores of eslint-config-next.
// Custom rules for your e-commerce project
{
files: ["**/*.{ts,tsx}"],
languageOptions: {
parser: tsParser
},
plugins: {
"@typescript-eslint": tsPlugin,
"@tanstack/query": tanstackPlugin,
import: importPlugin
},
rules: {
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unused-vars": ["error"],
"react-hooks/exhaustive-deps": "error",
"@tanstack/query/exhaustive-deps": "error",
"@tanstack/query/no-unstable-deps": "error",
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
"newlines-between": "always"
}
],
"import/no-default-export": "error",
"no-console": ["warn", { allow: ["warn", "error"] }]
}
},
globalIgnores([ globalIgnores([
// Default ignores of eslint-config-next:
".next/**", ".next/**",
"out/**", "out/**",
"build/**", "build/**",
"next-env.d.ts", "next-env.d.ts",
]), ])
]); ]);
export default eslintConfig;

542
features/category/components/CategoryClient.tsx
View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import { useEffect, useState, useMemo, useCallback } from "react"; import { useEffect, useState, useMemo, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter } from "next/navigation";
import { SlidersHorizontal, X } from "lucide-react"; import { SlidersHorizontal, X } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -15,13 +15,13 @@ import {
SheetTrigger, SheetTrigger,
} from "@/components/ui/sheet"; } from "@/components/ui/sheet";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { Checkbox } from "@/components/ui/checkbox";
import InfiniteScroll from "react-infinite-scroll-component"; import InfiniteScroll from "react-infinite-scroll-component";
import ProductCard from "@/components/ProductCard"; import ProductCard from "@/features/home/components/ProductCard";
import { import {
useCategories, useCategories,
useAllCategoryProducts, useCategoryFilters,
useAllCategoryProductsPaginated, useFilteredCategoryProducts,
useCategoryProducts,
} from "@/features/category/hooks/useCategories"; } from "@/features/category/hooks/useCategories";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@@ -36,15 +36,12 @@ export default function CategoryPageClient({
}: CategoryPageClientProps) { }: CategoryPageClientProps) {
const { slug, locale } = params; const { slug, locale } = params;
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const t = useTranslations(); const t = useTranslations();
// Fetch all categories first
const { data: categoriesData, isLoading: categoriesLoading } = const { data: categoriesData, isLoading: categoriesLoading } =
useCategories(); useCategories();
// Find category from slug
const selectedCategory = useMemo(() => { const selectedCategory = useMemo(() => {
if (!categoriesData || !slug) return null; if (!categoriesData || !slug) return null;
@@ -62,95 +59,167 @@ export default function CategoryPageClient({
return findBySlug(categoriesData); return findBySlug(categoriesData);
}, [categoriesData, slug]); }, [categoriesData, slug]);
// Track subcategories
const [hasSubcategories, setHasSubcategories] = useState(false);
const [subcategoriesToShow, setSubcategoriesToShow] = useState<Category[]>(
[]
);
// Pagination state
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [allProducts, setAllProducts] = useState<Product[]>([]); const [allProducts, setAllProducts] = useState<Product[]>([]);
// Price sorting state
const [priceSort, setPriceSort] = useState< const [priceSort, setPriceSort] = useState<
"none" | "lowToHigh" | "highToLow" "none" | "lowToHigh" | "highToLow"
>("none"); >("none");
// Price filter state
const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]); const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]);
const [selectedBrands, setSelectedBrands] = useState<Set<number>>(new Set());
const [selectedFilterCategories, setSelectedFilterCategories] = useState<
Set<number>
>(new Set());
// Selected filters state // Fetch filters
const [selectedFilters, setSelectedFilters] = useState< const { data: filtersData, isLoading: filtersLoading } = useCategoryFilters(
Record<string, Set<number>> selectedCategory?.id,
>({ { enabled: !!selectedCategory }
brand: new Set(), );
color: new Set(),
tag: new Set(),
});
// Determine if category is a subcategory // Build filter params
const isSubCategory = useMemo(() => { const filterParams = useMemo(() => {
if (!categoriesData || !selectedCategory) return false; const params: any = {
page: currentPage,
const checkIsSubCategory = ( limit: 6,
categories: Category[],
targetId: number
): boolean => {
for (const category of categories) {
if (category.children) {
for (const subCategory of category.children) {
if (subCategory.id === targetId) return true;
if (subCategory.children) {
const foundInNested = checkIsSubCategory([subCategory], targetId);
if (foundInNested) return true;
}
}
}
}
return false;
}; };
return checkIsSubCategory(categoriesData, selectedCategory.id); if (selectedBrands.size > 0) {
}, [categoriesData, selectedCategory]); params.brands = Array.from(selectedBrands);
}
// Fetch initial products for subcategories (first page only) if (selectedFilterCategories.size > 0) {
const { data: subcategoryProducts = [], isLoading: subcategoryLoading } = params.categories = Array.from(selectedFilterCategories);
useAllCategoryProducts(selectedCategory || undefined, { }
enabled: !!selectedCategory && isSubCategory && currentPage === 1,
if (priceRange[0] > 0) {
params.min_price = priceRange[0];
}
if (priceRange[1] < 10000) {
params.max_price = priceRange[1];
}
return params;
}, [currentPage, selectedBrands, selectedFilterCategories, priceRange]);
// Fetch filtered products
const {
data: productsData,
isLoading: productsLoading,
isFetching,
} = useFilteredCategoryProducts(
selectedCategory?.id?.toString() || "",
filterParams,
{ enabled: !!selectedCategory }
);
// Reset on category change
useEffect(() => {
if (selectedCategory) {
setAllProducts([]);
setCurrentPage(1);
setSelectedBrands(new Set());
setSelectedFilterCategories(new Set());
setPriceRange([0, 10000]);
setPriceSort("none");
}
}, [selectedCategory?.id]);
// Update products list
useEffect(() => {
if (productsData?.data) {
setAllProducts((prev) => {
if (currentPage === 1) {
return productsData.data;
}
const existingIds = new Set(prev.map((p) => p.id));
const newProducts = productsData.data.filter(
(p: Product) => !existingIds.has(p.id)
);
return [...prev, ...newProducts];
});
}
}, [productsData, currentPage]);
const hasMore = useMemo(() => {
return !!productsData?.pagination?.next_page_url;
}, [productsData]);
const loadMoreData = useCallback(() => {
if (!hasMore || isFetching) return;
setCurrentPage((prev) => prev + 1);
}, [hasMore, isFetching]);
const sortedProducts = useMemo(() => {
const products = [...allProducts];
if (priceSort === "lowToHigh") {
return products.sort(
(a, b) =>
parseFloat(a.price_amount || "0") - parseFloat(b.price_amount || "0")
);
}
if (priceSort === "highToLow") {
return products.sort(
(a, b) =>
parseFloat(b.price_amount || "0") - parseFloat(a.price_amount || "0")
);
}
return products;
}, [allProducts, priceSort]);
const handleBrandToggle = useCallback((brandId: number) => {
setSelectedBrands((prev) => {
const newSet = new Set(prev);
if (newSet.has(brandId)) {
newSet.delete(brandId);
} else {
newSet.add(brandId);
}
return newSet;
}); });
setCurrentPage(1);
setAllProducts([]);
}, []);
// Fetch paginated subcategory products (page 2+) const handleCategoryToggle = useCallback((categoryId: number) => {
const { setSelectedFilterCategories((prev) => {
data: paginatedSubcategoryData, const newSet = new Set(prev);
isLoading: subcategoryPaginatedLoading, if (newSet.has(categoryId)) {
} = useAllCategoryProductsPaginated(selectedCategory || undefined, { newSet.delete(categoryId);
enabled: !!selectedCategory && isSubCategory && currentPage > 1, } else {
page: currentPage, newSet.add(categoryId);
limit: 6, }
}); return newSet;
});
setCurrentPage(1);
setAllProducts([]);
}, []);
// Fetch paginated category products (for non-subcategories) const handlePriceChange = useCallback((values: number[]) => {
const { setPriceRange([values[0], values[1]]);
data: paginatedCategoryData, setCurrentPage(1);
isLoading: categoryPaginatedLoading, setAllProducts([]);
isFetching: categoryPaginatedFetching, }, []);
} = useCategoryProducts(selectedCategory?.id?.toString() || "", {
enabled: !!selectedCategory && !isSubCategory,
page: currentPage,
limit: 6,
});
if (!slug) { const handlePriceSortChange = useCallback(
notFound(); (sortType: "none" | "lowToHigh" | "highToLow") => {
} setPriceSort(sortType);
},
[]
);
const resetFilters = useCallback(() => {
setSelectedBrands(new Set());
setSelectedFilterCategories(new Set());
setPriceRange([0, 10000]);
setPriceSort("none");
setCurrentPage(1);
setAllProducts([]);
}, []);
// Helper function to find category by ID
const findCategoryById = useCallback( const findCategoryById = useCallback(
(categories: Category[] | undefined, id: number): Category | null => { (categories: Category[] | undefined, id: number): Category | null => {
if (!categories) return null; if (!categories) return null;
for (const category of categories) { for (const category of categories) {
if (category.id === id) return category; if (category.id === id) return category;
if (category.children) { if (category.children) {
@@ -163,177 +232,6 @@ export default function CategoryPageClient({
[] []
); );
// Helper to check if product already exists in list
const isProductInList = useCallback(
(list: Product[], newProduct: Product) => {
return list.some((product) => product.id === newProduct.id);
},
[]
);
// Setup subcategories when category changes
useEffect(() => {
if (selectedCategory) {
setAllProducts([]);
setHasMore(true);
setCurrentPage(1);
if (selectedCategory.children && selectedCategory.children.length > 0) {
setHasSubcategories(true);
setSubcategoriesToShow(selectedCategory.children);
} else {
setHasSubcategories(false);
setSubcategoriesToShow([]);
}
}
}, [selectedCategory?.id]);
// Handle first page products for subcategories
useEffect(() => {
if (
selectedCategory &&
isSubCategory &&
subcategoryProducts.length > 0 &&
currentPage === 1
) {
setAllProducts(subcategoryProducts);
setHasMore(true);
}
}, [selectedCategory, subcategoryProducts, currentPage, isSubCategory]);
// Handle paginated category products (non-subcategories)
useEffect(() => {
if (paginatedCategoryData && selectedCategory && !isSubCategory) {
if (paginatedCategoryData.data && paginatedCategoryData.data.length > 0) {
setAllProducts((prevProducts) => {
if (currentPage === 1) {
return [...paginatedCategoryData.data];
}
const newProducts = paginatedCategoryData.data.filter(
(newProduct: Product) => !isProductInList(prevProducts, newProduct)
);
return [...prevProducts, ...newProducts];
});
setHasMore(!!paginatedCategoryData.pagination?.next_page_url);
} else if (currentPage === 1) {
setAllProducts([]);
setHasMore(false);
}
}
}, [
paginatedCategoryData,
currentPage,
selectedCategory,
isSubCategory,
isProductInList,
]);
// Handle paginated subcategory products
useEffect(() => {
if (
paginatedSubcategoryData &&
selectedCategory &&
isSubCategory &&
currentPage > 1
) {
if (
paginatedSubcategoryData.data &&
paginatedSubcategoryData.data.length > 0
) {
setAllProducts((prevProducts) => {
const newProducts = paginatedSubcategoryData.data.filter(
(newProduct: Product) => !isProductInList(prevProducts, newProduct)
);
return [...prevProducts, ...newProducts];
});
setHasMore(paginatedSubcategoryData.pagination?.hasMorePages || false);
} else {
setHasMore(false);
}
}
}, [
paginatedSubcategoryData,
currentPage,
selectedCategory,
isSubCategory,
isProductInList,
]);
const loadMoreData = useCallback(() => {
if (!hasMore || categoryPaginatedFetching || subcategoryPaginatedLoading) {
return;
}
setCurrentPage((prevPage) => prevPage + 1);
}, [hasMore, categoryPaginatedFetching, subcategoryPaginatedLoading]);
const isLoading =
categoriesLoading ||
(subcategoryLoading && currentPage === 1) ||
(categoryPaginatedLoading && currentPage === 1);
const products = useMemo(() => {
let productsList = [...allProducts];
if (priceSort === "lowToHigh") {
return [...productsList].sort(
(a, b) =>
parseFloat(a.price_amount || "0") - parseFloat(b.price_amount || "0")
);
} else if (priceSort === "highToLow") {
return [...productsList].sort(
(a, b) =>
parseFloat(b.price_amount || "0") - parseFloat(a.price_amount || "0")
);
}
return productsList;
}, [priceSort, allProducts]);
const totalItems = useMemo(() => {
if (
paginatedCategoryData?.pagination &&
!isSubCategory &&
selectedCategory
) {
return paginatedCategoryData.pagination.total || products.length || 0;
}
return products.length || 0;
}, [paginatedCategoryData, products, isSubCategory, selectedCategory]);
const handlePriceSortChange = useCallback(
(sortType: "none" | "lowToHigh" | "highToLow") => {
setPriceSort(sortType);
},
[]
);
const handleSubCategorySelect = useCallback(
(subCategory: Category) => {
setAllProducts([]);
setCurrentPage(1);
setHasMore(true);
setPriceSort("none");
router.push(`/${locale}/category/${subCategory.slug}`, { scroll: false });
},
[locale, router]
);
const handleCategoryClick = useCallback(
(category: Category) => {
setAllProducts([]);
setCurrentPage(1);
setHasMore(true);
router.push(`/${locale}/category/${category.slug}`);
},
[locale, router]
);
const renderBreadcrumbs = useCallback(() => { const renderBreadcrumbs = useCallback(() => {
if (!categoriesData || !selectedCategory) return null; if (!categoriesData || !selectedCategory) return null;
@@ -358,7 +256,9 @@ export default function CategoryPageClient({
{breadcrumbs.map((category, index) => ( {breadcrumbs.map((category, index) => (
<div key={category.id} className="flex items-center gap-2"> <div key={category.id} className="flex items-center gap-2">
<button <button
onClick={() => handleCategoryClick(category)} onClick={() =>
router.push(`/${locale}/category/${category.slug}`)
}
className="hover:text-primary transition-colors" className="hover:text-primary transition-colors"
> >
{category.name} {category.name}
@@ -368,72 +268,46 @@ export default function CategoryPageClient({
))} ))}
</div> </div>
); );
}, [categoriesData, selectedCategory, findCategoryById, handleCategoryClick]); }, [categoriesData, selectedCategory, findCategoryById, locale, router]);
const pageTitle = selectedCategory?.name || t("category");
const handleFilterChange = useCallback((key: string, value: number) => {
setSelectedFilters((prev) => {
const newFilters = { ...prev };
if (!newFilters[key]) {
newFilters[key] = new Set();
}
if (newFilters[key].has(value)) {
newFilters[key].delete(value);
} else {
newFilters[key].add(value);
}
return newFilters;
});
}, []);
const handlePriceChange = useCallback((values: number[]) => {
setPriceRange([values[0], values[1]]);
}, []);
const handlePriceInputChange = useCallback(
(type: "from" | "to", value: string) => {
const numValue = parseInt(value) || 0;
if (type === "from") {
setPriceRange((prev) => [numValue, prev[1]]);
} else {
setPriceRange((prev) => [prev[0], numValue]);
}
},
[]
);
const resetFilters = useCallback(() => {
setSelectedFilters({
brand: new Set(),
color: new Set(),
tag: new Set(),
});
setPriceRange([0, 10000]);
setPriceSort("none");
}, []);
const FiltersContent = useCallback( const FiltersContent = useCallback(
() => ( () => (
<div className="space-y-6"> <div className="space-y-6">
{hasSubcategories && subcategoriesToShow.length > 0 && ( {filtersData?.categories && filtersData.categories.length > 0 && (
<div> <div>
<h3 className="text-lg font-semibold mb-3">{t("subcategories")}</h3> <h3 className="text-lg font-semibold mb-3">{t("categories")}</h3>
<div className="space-y-1"> <div className="space-y-2">
{subcategoriesToShow.map((subCategory) => ( {filtersData.categories.map((category) => (
<button <label
key={subCategory.id} key={category.id}
onClick={() => handleSubCategorySelect(subCategory)} className="flex items-center gap-2 cursor-pointer"
className={`w-full text-left py-2 px-2 rounded-lg hover:bg-gray-100 transition-colors ${
slug === subCategory.slug
? "text-primary font-medium bg-gray-50"
: ""
}`}
> >
{subCategory.name} <Checkbox
</button> checked={selectedFilterCategories.has(category.id)}
onCheckedChange={() => handleCategoryToggle(category.id)}
/>
<span className="text-sm">{category.name}</span>
</label>
))}
</div>
</div>
)}
{filtersData?.brands && filtersData.brands.length > 0 && (
<div>
<h3 className="text-lg font-semibold mb-3">{t("brands")}</h3>
<div className="space-y-2">
{filtersData.brands.map((brand) => (
<label
key={brand.id}
className="flex items-center gap-2 cursor-pointer"
>
<Checkbox
checked={selectedBrands.has(brand.id)}
onCheckedChange={() => handleBrandToggle(brand.id)}
/>
<span className="text-sm">{brand.name}</span>
</label>
))} ))}
</div> </div>
</div> </div>
@@ -479,13 +353,12 @@ export default function CategoryPageClient({
title={t("price")} title={t("price")}
priceRange={priceRange} priceRange={priceRange}
onPriceChange={handlePriceChange} onPriceChange={handlePriceChange}
onInputChange={handlePriceInputChange}
translations={{ from: t("price_from"), to: t("price_to") }} translations={{ from: t("price_from"), to: t("price_to") }}
/> />
<Button <Button
variant="outline" variant="outline"
className="w-full rounded-xl bg-transparent" className="w-full rounded-xl"
onClick={resetFilters} onClick={resetFilters}
> >
{t("reset")} {t("reset")}
@@ -493,47 +366,46 @@ export default function CategoryPageClient({
</div> </div>
), ),
[ [
hasSubcategories, filtersData,
subcategoriesToShow, selectedFilterCategories,
slug, selectedBrands,
priceSort, priceSort,
priceRange, priceRange,
t, t,
handleSubCategorySelect, handleCategoryToggle,
handleBrandToggle,
handlePriceSortChange, handlePriceSortChange,
handlePriceChange, handlePriceChange,
handlePriceInputChange,
resetFilters, resetFilters,
] ]
); );
if (isLoading) return <div>{t("common.loading")}</div>; if (categoriesLoading) return <div>{t("common.loading")}</div>;
if (!selectedCategory)
if (!selectedCategory && !categoriesLoading) {
return <div className="text-center py-8">{t("category_not_found")}</div>; return <div className="text-center py-8">{t("category_not_found")}</div>;
}
const totalItems =
productsData?.pagination?.total || sortedProducts.length || 0;
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{selectedCategory && renderBreadcrumbs()} {renderBreadcrumbs()}
<h2 className="text-3xl font-bold">{pageTitle}</h2> <h2 className="text-3xl font-bold">{selectedCategory.name}</h2>
<p className="text-gray-600"> <p className="text-gray-600">
{t("total")}: {totalItems} {t("products")} {t("total")}: {totalItems} {t("products")}
</p> </p>
<div className="flex gap-4"> <div className="flex gap-4">
{/* Desktop Filters - LEFT SIDE */}
<div className="hidden sm:block w-[280px] flex-shrink-0 border-r pr-4"> <div className="hidden sm:block w-[280px] flex-shrink-0 border-r pr-4">
<ScrollArea className="h-[calc(100vh-200px)]"> <ScrollArea className="h-[calc(100vh-200px)]">
<FiltersContent /> <FiltersContent />
</ScrollArea> </ScrollArea>
</div> </div>
{/* Content - RIGHT SIDE */}
<div className="flex-1"> <div className="flex-1">
{products.length > 0 ? ( {sortedProducts.length > 0 ? (
<InfiniteScroll <InfiniteScroll
dataLength={products.length} dataLength={sortedProducts.length}
next={loadMoreData} next={loadMoreData}
hasMore={hasMore} hasMore={hasMore}
scrollThreshold={0.8} scrollThreshold={0.8}
@@ -545,7 +417,7 @@ export default function CategoryPageClient({
} }
> >
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{products.map((product) => ( {sortedProducts.map((product) => (
<ProductCard <ProductCard
key={product.id} key={product.id}
id={product.id} id={product.id}
@@ -570,7 +442,6 @@ export default function CategoryPageClient({
</div> </div>
</div> </div>
{/* Mobile Filter Sheet */}
<Sheet open={isOpen} onOpenChange={setIsOpen}> <Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetTrigger asChild> <SheetTrigger asChild>
<Button <Button
@@ -605,13 +476,11 @@ function PriceFilter({
title, title,
priceRange, priceRange,
onPriceChange, onPriceChange,
onInputChange,
translations, translations,
}: { }: {
title: string; title: string;
priceRange: [number, number]; priceRange: [number, number];
onPriceChange: (values: number[]) => void; onPriceChange: (values: number[]) => void;
onInputChange: (type: "from" | "to", value: string) => void;
translations: { from: string; to: string }; translations: { from: string; to: string };
}) { }) {
return ( return (
@@ -627,7 +496,9 @@ function PriceFilter({
id="price-from" id="price-from"
type="number" type="number"
value={priceRange[0]} value={priceRange[0]}
onChange={(e) => onInputChange("from", e.target.value)} onChange={(e) =>
onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
}
className="rounded-lg" className="rounded-lg"
/> />
</div> </div>
@@ -639,7 +510,12 @@ function PriceFilter({
id="price-to" id="price-to"
type="number" type="number"
value={priceRange[1]} value={priceRange[1]}
onChange={(e) => onInputChange("to", e.target.value)} onChange={(e) =>
onPriceChange([
priceRange[0],
parseInt(e.target.value) || 10000,
])
}
className="rounded-lg" className="rounded-lg"
/> />
</div> </div>

66
features/category/hooks/useCategories.ts
View File

@@ -1,6 +1,6 @@
import { useQuery } from "@tanstack/react-query" import { useQuery } from "@tanstack/react-query"
import { apiClient } from "@/lib/api" import { apiClient } from "@/lib/api"
import type { Category, Product, PaginatedResponse } from "@/lib/types/api" import type { Category, Product, PaginatedResponse, FiltersResponse, ProductFilters } from "@/lib/types/api"
// Get all categories as tree // Get all categories as tree
export function useCategories(options?: { enabled?: boolean }) { export function useCategories(options?: { enabled?: boolean }) {
@@ -92,6 +92,70 @@ export function useAllCategoryProducts(
}) })
} }
export function useCategoryFilters(
categoryId: number | string | undefined,
options?: { enabled?: boolean }
) {
return useQuery({
queryKey: ["category-filters", categoryId],
queryFn: async () => {
const response = await apiClient.get<FiltersResponse>(
"/filters",
{
params: { category_id: categoryId },
}
)
return response.data.data
},
enabled: options?.enabled !== false && !!categoryId,
staleTime: 1000 * 60 * 15,
})
}
// Get filtered category products
export function useFilteredCategoryProducts(
categoryId: number | string,
filters: ProductFilters,
options?: { enabled?: boolean }
) {
return useQuery({
queryKey: ["category", categoryId, "filtered-products", filters],
queryFn: async () => {
const params: Record<string, any> = {
page: filters.page || 1,
limit: filters.limit || 6,
}
if (filters.brands && filters.brands.length > 0) {
params.brands = filters.brands.join(',')
}
if (filters.categories && filters.categories.length > 0) {
params.categories = filters.categories.join(',')
}
if (filters.min_price !== undefined) {
params.min_price = filters.min_price
}
if (filters.max_price !== undefined) {
params.max_price = filters.max_price
}
const response = await apiClient.get<PaginatedResponse<Product>>(
`/categories/${categoryId}/products`,
{ params }
)
return {
data: response.data.data || [],
pagination: response.data.pagination || {}
}
},
enabled: options?.enabled !== false && !!categoryId,
})
}
// Get products from category and children WITH pagination (mimics RTK getAllCategoryProductsPaginated) // Get products from category and children WITH pagination (mimics RTK getAllCategoryProductsPaginated)
export function useAllCategoryProductsPaginated( export function useAllCategoryProductsPaginated(
category: Category | undefined, category: Category | undefined,

2
features/home/components/HomePage.tsx
View File

@@ -49,7 +49,7 @@ export default function HomePage() {
const hasMore = collections ? visibleCount < collections.length : false; const hasMore = collections ? visibleCount < collections.length : false;
return ( return (
<div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8"> <div className="px-2 md:px-4 lg:px-4 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
{!carouselsLoading && carouselItems.length > 0 && ( {!carouselsLoading && carouselItems.length > 0 && (
<HeroCarousel items={carouselItems} /> <HeroCarousel items={carouselItems} />
)} )}

232
features/home/components/ProductCard.tsx Normal file
View File

@@ -0,0 +1,232 @@
"use client";
import { useState, MouseEvent, useEffect, useRef } from "react";
import { Heart } from "lucide-react";
import { toast } from "sonner";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
type CarouselApi,
} from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
type ProductCardProps = {
id: number;
name: string;
price: number | null;
struct_price_text: string;
discount?: number | null;
discount_text?: string | null;
images: string[];
is_favorite: boolean;
labels?: { text: string; bg_color: string }[];
price_color?: string;
height?: number;
width?: number;
button?: boolean;
};
export default function ProductCard({
id,
name,
price,
struct_price_text,
discount,
discount_text,
images,
is_favorite,
labels = [],
price_color = "#005bff",
height = 360,
width = 280,
button = true,
}: ProductCardProps) {
const [favorite, setFavorite] = useState(is_favorite);
const [api, setApi] = useState<CarouselApi>();
const [current, setCurrent] = useState(0);
const autoplayRef = useRef<NodeJS.Timeout | null>(null);
const hasMultipleImages = images.length > 1;
// Track carousel current slide
useEffect(() => {
if (!api) return;
setCurrent(api.selectedScrollSnap());
api.on("select", () => {
setCurrent(api.selectedScrollSnap());
});
}, [api]);
// Auto-play functionality - 3 seconds
useEffect(() => {
if (!api || !hasMultipleImages) return;
const startAutoplay = () => {
autoplayRef.current = setInterval(() => {
if (api.canScrollNext()) {
api.scrollNext();
} else {
api.scrollTo(0);
}
}, 3000);
};
const stopAutoplay = () => {
if (autoplayRef.current) {
clearInterval(autoplayRef.current);
autoplayRef.current = null;
}
};
startAutoplay();
return () => stopAutoplay();
}, [api, hasMultipleImages]);
const handleFavorite = async (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
const newFavoriteState = !favorite;
setFavorite(newFavoriteState);
if (newFavoriteState) {
toast.success("Товар добавлен в избранное");
} else {
toast.success("Товар удален из избранного");
}
};
const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => {
const target = e.target as HTMLElement;
if (
target.closest('button') ||
target.closest('[data-carousel-control="true"]')
) {
e.preventDefault();
}
};
const handleNavClick = (e: MouseEvent, action: () => void) => {
e.preventDefault();
e.stopPropagation();
action();
};
return (
<a
href={`/product/${id}`}
className="no-underline block"
onClick={handleCardClick}
>
<Card
className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl hover:shadow-md transition-all cursor-pointer"
style={{ height, maxWidth: width }}
>
{/* Image Section with Carousel */}
<div className="relative w-full h-[260px] group">
<Carousel
opts={{
align: "start",
loop: true,
watchDrag: false, // Disable drag/swipe on desktop
}}
setApi={setApi}
className="w-full h-full"
>
<CarouselContent className="h-[260px] ml-0">
{images.map((image, index) => (
<CarouselItem key={index} className="h-[260px] pl-0">
<div className="h-full flex items-center justify-center p-2">
<img
src={image}
alt={`${name} - ${index + 1}`}
className="max-w-full max-h-full object-contain"
draggable="false"
/>
</div>
</CarouselItem>
))}
</CarouselContent>
{/* Navigation Arrows - Only show if multiple images */}
{hasMultipleImages && (
<>
<CarouselPrevious
data-carousel-control="true"
className="absolute left-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
onClick={(e) => handleNavClick(e, () => api?.scrollPrev())}
/>
<CarouselNext
data-carousel-control="true"
className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
onClick={(e) => handleNavClick(e, () => api?.scrollNext())}
/>
</>
)}
</Carousel>
{/* Favorite Button */}
<button
onClick={handleFavorite}
className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all"
>
{favorite ? (
<Heart className="w-5 h-5 text-red-500 fill-red-500" />
) : (
<Heart className="w-5 h-5 text-gray-700" />
)}
</button>
{/* Image Indicators */}
{hasMultipleImages && (
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
{images.map((_, index) => (
<button
key={index}
data-carousel-control="true"
onClick={(e) => handleNavClick(e, () => api?.scrollTo(index))}
className={`h-1.5 rounded-full transition-all ${
index === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
}`}
/>
))}
</div>
)}
{/* Labels */}
{labels?.length > 0 && (
<div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
{labels.map((label, idx) => (
<Badge
key={idx}
className="text-white text-[10px] font-bold uppercase rounded-r-md"
style={{ backgroundColor: label.bg_color }}
>
{label.text}
</Badge>
))}
</div>
)}
</div>
{/* Content */}
<CardContent className="p-0 space-y-1">
<p
className="text-sm font-semibold mx-2"
style={{ color: price_color }}
>
{struct_price_text}
</p>
<p className="text-gray-800 text-sm truncate mx-2">{name}</p>
</CardContent>
</Card>
</a>
);
}

32
features/home/components/ProductGrid.tsx
View File

@@ -2,7 +2,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";
import ProductCard from "@/components/ProductCard"; import ProductCard from "@/features/home/components/ProductCard";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useCollectionProducts } from "@/lib/hooks"; import { useCollectionProducts } from "@/lib/hooks";
import type { Collection } from "@/lib/types/api"; import type { Collection } from "@/lib/types/api";
@@ -22,7 +22,6 @@ export default function CollectionSection({ collection, locale }: Props) {
isError, isError,
} = useCollectionProducts(collection.id, { enabled: shouldRender }); } = useCollectionProducts(collection.id, { enabled: shouldRender });
// Determine if section should render based on products
useEffect(() => { useEffect(() => {
if (!isLoading && productsData) { if (!isLoading && productsData) {
const hasProducts = productsData.data && productsData.data.length > 0; const hasProducts = productsData.data && productsData.data.length > 0;
@@ -30,7 +29,6 @@ export default function CollectionSection({ collection, locale }: Props) {
} }
}, [isLoading, productsData]); }, [isLoading, productsData]);
// Don't render if no products after loading
if (!isLoading && (!productsData?.data || productsData.data.length === 0)) { if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
return null; return null;
} }
@@ -39,7 +37,6 @@ export default function CollectionSection({ collection, locale }: Props) {
router.push(`/${locale}/collections/${collection.id}`); router.push(`/${locale}/collections/${collection.id}`);
}; };
// Show skeleton while loading
if (isLoading) { if (isLoading) {
return ( return (
<section className="bg-white rounded-2xl shadow-sm p-6"> <section className="bg-white rounded-2xl shadow-sm p-6">
@@ -56,16 +53,14 @@ export default function CollectionSection({ collection, locale }: Props) {
); );
} }
// Show error state
if (isError) { if (isError) {
return null; // Silently skip errored collections return null;
} }
// Slice to show only first 4 products const displayProducts = productsData?.data.slice(0, 10) || [];
const displayProducts = productsData?.data.slice(0, 4) || [];
return ( return (
<section className="bg-white rounded-2xl shadow-sm p-6"> <section className="bg-white rounded-2xl shadow-sm ">
<div <div
className="flex items-center justify-between mb-4 cursor-pointer group" className="flex items-center justify-between mb-4 cursor-pointer group"
onClick={handleTitleClick} onClick={handleTitleClick}
@@ -78,14 +73,15 @@ export default function CollectionSection({ collection, locale }: Props) {
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
{displayProducts.map((product) => { {displayProducts.map((product) => {
// Extract first media image or use placeholder // 🔥 TÜM RESİMLERİ AL - Burada değişiklik!
const firstImage = const allImages = product.media?.map(
product.media?.[0]?.images_800x800 || (media) =>
product.media?.[0]?.images_720x720 || media.images_800x800 ||
product.media?.[0]?.thumbnail || media.images_720x720 ||
"/placeholder-product.jpg"; media.images_400x400 ||
media.thumbnail
).filter(Boolean) || ["/placeholder-product.jpg"];
// Format price
const formattedPrice = product.price_amount const formattedPrice = product.price_amount
? `${parseFloat(product.price_amount).toFixed(2)} TMT` ? `${parseFloat(product.price_amount).toFixed(2)} TMT`
: "Price not available"; : "Price not available";
@@ -99,7 +95,7 @@ export default function CollectionSection({ collection, locale }: Props) {
product.price_amount ? parseFloat(product.price_amount) : null product.price_amount ? parseFloat(product.price_amount) : null
} }
struct_price_text={formattedPrice} struct_price_text={formattedPrice}
images={[firstImage]} images={allImages} // 🔥 Array olarak tüm resimler
is_favorite={false} is_favorite={false}
labels={[]} labels={[]}
price_color="#111" price_color="#111"
@@ -112,4 +108,4 @@ export default function CollectionSection({ collection, locale }: Props) {
</div> </div>
</section> </section>
); );
} }

47
features/openStore/hooks/useOpenStore.ts Normal file
View File

@@ -0,0 +1,47 @@
"use client"
import { useMutation } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
interface OpenStoreData {
firstName: string
lastName: string
email: string
phone: string
patentFile: File
}
interface OpenStoreResponse {
success: boolean
message: string
data?: any
}
const API_ENDPOINTS = {
openStore: "forms/newsletter-subscription",
}
export function useOpenStore() {
return useMutation<OpenStoreResponse, Error, OpenStoreData>({
mutationFn: async (data: OpenStoreData) => {
const formData = new FormData()
formData.append("firstname", data.firstName)
formData.append("lastname", data.lastName)
formData.append("email", data.email)
formData.append("phone", data.phone)
formData.append("file", data.patentFile)
const response = await apiClient.post<OpenStoreResponse>(
API_ENDPOINTS.openStore,
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
)
return response.data
},
})
}

0
features/orders/components/orders-page-client.tsx → features/orders/components/OrderPage.tsx
View File

68
features/products/components/ProductPageContent.tsx
View File

@@ -17,7 +17,7 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { useProductsBySlug } from "@/features/products/hooks/useProducts"; import { useProductsBySlug } from "@/features/products/hooks/useProducts";
import { useAddToCart, useUpdateCartItemQuantity, useCart } from "@/features/cart/hooks/useCart"; import { useAddToCart, useUpdateCartItemQuantity, useRemoveFromCart, useCart } from "@/features/cart/hooks/useCart";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -50,11 +50,13 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined); const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const syncToServerRef = useRef<((quantity: number) => void) | null>(null); const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
const retrySyncRef = useRef<((quantity: number) => void) | null>(null); const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
const autoplayTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const { data: product, isLoading: productLoading, error } = useProductsBySlug(slug); const { data: product, isLoading: productLoading, error } = useProductsBySlug(slug);
const { data: cartData, refetch: refetchCart } = useCart(); const { data: cartData, refetch: refetchCart } = useCart();
const addToCartMutation = useAddToCart(); const addToCartMutation = useAddToCart();
const updateCartMutation = useUpdateCartItemQuantity(); const updateCartMutation = useUpdateCartItemQuantity();
const removeFromCartMutation = useRemoveFromCart();
const cartItem = useMemo(() => const cartItem = useMemo(() =>
cartData?.data?.find((item: any) => item.product?.id === product?.id), cartData?.data?.find((item: any) => item.product?.id === product?.id),
@@ -64,6 +66,46 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
const availableStock = product?.stock || 0; const availableStock = product?.stock || 0;
const imageUrls = useMemo(() =>
product?.media?.map(m => m.images_800x800 || m.images_720x720 || m.thumbnail) || [],
[product]
);
// Auto-play carousel every 3 seconds
useEffect(() => {
if (imageUrls.length <= 1) return;
const startAutoplay = () => {
autoplayTimerRef.current = setInterval(() => {
setSelectedImage(prev => (prev + 1) % imageUrls.length);
}, 3000);
};
startAutoplay();
return () => {
if (autoplayTimerRef.current) {
clearInterval(autoplayTimerRef.current);
}
};
}, [imageUrls.length]);
// Reset autoplay timer when user manually selects image
const handleImageSelect = useCallback((index: number) => {
setSelectedImage(index);
// Reset autoplay timer
if (autoplayTimerRef.current) {
clearInterval(autoplayTimerRef.current);
}
if (imageUrls.length > 1) {
autoplayTimerRef.current = setInterval(() => {
setSelectedImage(prev => (prev + 1) % imageUrls.length);
}, 3000);
}
}, [imageUrls.length]);
useEffect(() => { useEffect(() => {
if (cartItem?.product_quantity) { if (cartItem?.product_quantity) {
setLocalQuantity(cartItem.product_quantity); setLocalQuantity(cartItem.product_quantity);
@@ -145,7 +187,11 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
setSyncError(false); setSyncError(false);
try { try {
if (isInCart) { // If quantity is 0, remove from cart
if (quantity === 0) {
await removeFromCartMutation.mutateAsync(product.id);
toast.success(t("removed_from_cart"));
} else if (isInCart) {
await updateCartMutation.mutateAsync({ await updateCartMutation.mutateAsync({
productId: product.id, productId: product.id,
quantity: quantity, quantity: quantity,
@@ -162,7 +208,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
retryCountRef.current = 0; retryCountRef.current = 0;
clearPendingUpdate(); clearPendingUpdate();
// Refetch cart to update UI state immediately
await refetchCart(); await refetchCart();
if (pendingQuantityRef.current !== null) { if (pendingQuantityRef.current !== null) {
@@ -181,7 +226,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
retrySyncRef.current?.(quantity); retrySyncRef.current?.(quantity);
} }
}, [product?.id, isInCart, updateCartMutation, addToCartMutation, cartItem, clearPendingUpdate, refetchCart]); }, [product?.id, isInCart, updateCartMutation, addToCartMutation, removeFromCartMutation, cartItem, clearPendingUpdate, refetchCart, t]);
syncToServerRef.current = syncToServer; syncToServerRef.current = syncToServer;
@@ -239,13 +284,13 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
return () => { return () => {
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current); if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
if (retryTimerRef.current) clearTimeout(retryTimerRef.current); if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
}; };
}, []); }, []);
const handleAddToCart = useCallback(async () => { const handleAddToCart = useCallback(async () => {
if (!product?.id) return; if (!product?.id) return;
// Set syncing state immediately for UI feedback
setIsSyncing(true); setIsSyncing(true);
try { try {
@@ -254,7 +299,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
quantity: localQuantity, quantity: localQuantity,
}); });
// Refetch cart immediately to update isInCart state
await refetchCart(); await refetchCart();
setIsSyncing(false); setIsSyncing(false);
@@ -281,7 +325,8 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
}, [localQuantity, availableStock]); }, [localQuantity, availableStock]);
const handleQuantityDecrease = useCallback(() => { const handleQuantityDecrease = useCallback(() => {
if (localQuantity <= 1) return; // Allow decreasing to 0 to remove from cart
if (localQuantity <= 0) return;
setLocalQuantity(prev => prev - 1); setLocalQuantity(prev => prev - 1);
}, [localQuantity]); }, [localQuantity]);
@@ -290,11 +335,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
setIsFavorite(!isFavorite); setIsFavorite(!isFavorite);
}, [isFavorite]); }, [isFavorite]);
const imageUrls = useMemo(() =>
product?.media?.map(m => m.images_800x800 || m.images_720x720 || m.thumbnail) || [],
[product]
);
const loadingSkeleton = useMemo(() => ( const loadingSkeleton = useMemo(() => (
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
@@ -354,7 +394,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
{imageUrls.map((image, index) => ( {imageUrls.map((image, index) => (
<button <button
key={index} key={index}
onClick={() => setSelectedImage(index)} onClick={() => handleImageSelect(index)}
className={`relative w-16 h-16 flex-shrink-0 rounded overflow-hidden border-2 transition-all ${ className={`relative w-16 h-16 flex-shrink-0 rounded overflow-hidden border-2 transition-all ${
selectedImage === index selectedImage === index
? "border-primary ring-2 ring-primary/20" ? "border-primary ring-2 ring-primary/20"
@@ -499,7 +539,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
variant="outline" variant="outline"
size="icon" size="icon"
onClick={handleQuantityDecrease} onClick={handleQuantityDecrease}
disabled={localQuantity === 1 || isSyncing} disabled={isSyncing}
className={`rounded-xl h-12 w-12 ${isSyncing ? 'opacity-70' : ''}`} className={`rounded-xl h-12 w-12 ${isSyncing ? 'opacity-70' : ''}`}
> >
<Minus className="h-5 w-5" /> <Minus className="h-5 w-5" />

0
features/profile/components/client-page.tsx → features/profile/components/ProfilePageContent.tsx
View File

2
lib/hooks/index.ts
View File

@@ -5,7 +5,7 @@ export * from "../../features/favorites/hooks/useFavorites"
export * from "../../features/orders/hooks/useOrders" export * from "../../features/orders/hooks/useOrders"
export * from "../../features/search/hooks/useSearch" export * from "../../features/search/hooks/useSearch"
export * from "../../features/profile/hooks/useUserProfile" export * from "../../features/profile/hooks/useUserProfile"
export * from "./useOpenStore" export * from "../../features/openStore/hooks/useOpenStore"
export * from "../../features/cart/hooks/useAddresses" export * from "../../features/cart/hooks/useAddresses"
export * from "../../features/cart/hooks/usePaymentTypes" export * from "../../features/cart/hooks/usePaymentTypes"

38
lib/hooks/useOpenStore.ts
View File

@@ -1,38 +0,0 @@
// "use client"
// import { useMutation } from "@tanstack/react-query"
// import { apiClient } from "@/lib/api"
// import { API_ENDPOINTS } from "@/lib/config/api-endpoints"
// interface OpenStoreData {
// firstName: string
// lastName: string
// email: string
// phone: string
// patentFile: File
// }
// interface OpenStoreResponse {
// success: boolean
// message: string
// }
// export function useOpenStore() {
// return useMutation({
// mutationFn: async (data: OpenStoreData) => {
// const formData = new FormData()
// formData.append("first_name", data.firstName)
// formData.append("last_name", data.lastName)
// formData.append("email", data.email)
// formData.append("phone", data.phone)
// formData.append("patent_file", data.patentFile)
// const response = await apiClient.post<OpenStoreResponse>(API_ENDPOINTS.openStore, formData, {
// headers: {
// "Content-Type": "multipart/form-data",
// },
// })
// return response.data
// },
// })
// }

31
lib/types/api.ts
View File

@@ -471,4 +471,35 @@ export interface UserOrderData {
customer_name: string; customer_name: string;
customer_phone: string; customer_phone: string;
customer_address?: string; customer_address?: string;
}
// lib/types/api.ts içine eklenecek tipler
export interface FilterBrand {
id: number;
name: string;
}
export interface FilterCategory {
id: number;
parent_id: number;
name: string;
}
export interface FiltersResponse {
message: string;
data: {
categories: FilterCategory[];
brands: FilterBrand[];
};
}
// Existing types'a ekleme
export interface ProductFilters {
brands?: number[];
categories?: number[];
min_price?: number;
max_price?: number;
page?: number;
limit?: number;
} }

3
next.config.ts
View File

@@ -4,9 +4,6 @@ import createNextIntlPlugin from "next-intl/plugin"
const withNextIntl = createNextIntlPlugin("./i18n/i18n.ts") const withNextIntl = createNextIntlPlugin("./i18n/i18n.ts")
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
eslint: {
ignoreDuringBuilds: true,
},
typescript: { typescript: {
ignoreBuildErrors: true, ignoreBuildErrors: true,
}, },

54
package-lock.json generated
View File

@@ -24,6 +24,7 @@
"axios": "^1.13.1", "axios": "^1.13.1",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"embla-carousel-react": "^8.6.0",
"lucide-react": "^0.548.0", "lucide-react": "^0.548.0",
"next": "16.0.1", "next": "16.0.1",
"next-intl": "^4.5.0", "next-intl": "^4.5.0",
@@ -91,6 +92,7 @@
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.27.1", "@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.5", "@babel/generator": "^7.28.5",
@@ -2955,6 +2957,7 @@
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"csstype": "^3.0.2" "csstype": "^3.0.2"
} }
@@ -2965,6 +2968,7 @@
"integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==", "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"peer": true,
"peerDependencies": { "peerDependencies": {
"@types/react": "^19.2.0" "@types/react": "^19.2.0"
} }
@@ -3015,6 +3019,7 @@
"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==", "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@typescript-eslint/scope-manager": "8.46.2", "@typescript-eslint/scope-manager": "8.46.2",
"@typescript-eslint/types": "8.46.2", "@typescript-eslint/types": "8.46.2",
@@ -3545,6 +3550,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@@ -3915,6 +3921,7 @@
} }
], ],
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"baseline-browser-mapping": "^2.8.19", "baseline-browser-mapping": "^2.8.19",
"caniuse-lite": "^1.0.30001751", "caniuse-lite": "^1.0.30001751",
@@ -4307,6 +4314,35 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/embla-carousel": {
"version": "8.6.0",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
"license": "MIT",
"peer": true
},
"node_modules/embla-carousel-react": {
"version": "8.6.0",
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
"integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
"license": "MIT",
"dependencies": {
"embla-carousel": "8.6.0",
"embla-carousel-reactive-utils": "8.6.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/embla-carousel-reactive-utils": {
"version": "8.6.0",
"resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
"integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
"license": "MIT",
"peerDependencies": {
"embla-carousel": "8.6.0"
}
},
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
"version": "9.2.2", "version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -4530,6 +4566,7 @@
"integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==", "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1", "@eslint-community/regexpp": "^4.12.1",
@@ -4715,6 +4752,7 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@rtsao/scc": "^1.1.0", "@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9", "array-includes": "^3.1.9",
@@ -6665,17 +6703,6 @@
} }
} }
}, },
"node_modules/next-intl/node_modules/@swc/helpers": {
"version": "0.5.17",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
"integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
"license": "Apache-2.0",
"optional": true,
"peer": true,
"dependencies": {
"tslib": "^2.8.0"
}
},
"node_modules/next-themes": { "node_modules/next-themes": {
"version": "0.4.6", "version": "0.4.6",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz", "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
@@ -7074,6 +7101,7 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@@ -7083,6 +7111,7 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"scheduler": "^0.27.0" "scheduler": "^0.27.0"
}, },
@@ -7898,6 +7927,7 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@@ -8070,6 +8100,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true, "devOptional": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@@ -8411,6 +8442,7 @@
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"funding": { "funding": {
"url": "https://github.com/sponsors/colinhacks" "url": "https://github.com/sponsors/colinhacks"
} }

1
package.json
View File

@@ -25,6 +25,7 @@
"axios": "^1.13.1", "axios": "^1.13.1",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"embla-carousel-react": "^8.6.0",
"lucide-react": "^0.548.0", "lucide-react": "^0.548.0",
"next": "16.0.1", "next": "16.0.1",
"next-intl": "^4.5.0", "next-intl": "^4.5.0",

0
middleware.ts → proxy.ts
View File