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

connected api with profile, order

Browse Source
This commit is contained in:
Jelaletdin12
2025-11-15 16:14:01 +05:00
parent 21b9e88c5c
commit f867896817
70 changed files with 2370 additions and 2317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
app/[locale]/cart/page.tsx
View File

@@ -1,53 +1,79 @@
"use client"
import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import CartItemCard from "./ui/CartItemCard"
import OrderSummary from "./ui/OrderSummary"
import { useCart, useCreateOrder, useRegions, useAddresses, usePaymentTypes } from "@/lib/hooks"
import { useTranslations } from "next-intl"
import { useRouter } from "next/navigation"
import type { DeliveryType, PaymentTypeOption } from "./ui/types"
"use client";
import { useState, useEffect } from "react";
import { Card } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import CartItemCard from "../../../features/cart/components/CartItemCard";
import OrderSummary from "../../../features/cart/components/OrderSummary";
import {
useCart,
useCreateOrder,
useRegions,
usePaymentTypes,
} from "@/lib/hooks";
import { userStore } from "@/features/profile/userStore";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import type { DeliveryType, PaymentType } from "../../../features/cart/types";
export default function CartPage() {
const [isClient, setIsClient] = useState(false)
const [paymentType, setPaymentType] = useState<PaymentTypeOption | null>(null)
const [deliveryType, setDeliveryType] = useState<DeliveryType>("SELECTED_DELIVERY")
const [selectedRegion, setSelectedRegion] = useState<string | null>(null)
const [selectedAddress, setSelectedAddress] = useState<string>("")
const [note, setNote] = useState<string>("")
const router = useRouter()
const [isClient, setIsClient] = useState(false);
const [paymentType, setPaymentType] = useState<PaymentType | null>(null);
const [deliveryType, setDeliveryType] = useState<DeliveryType>("SELECTED_DELIVERY");
const [selectedRegion, setSelectedRegion] = useState<string>("");
const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
const [note, setNote] = useState<string>("");
const router = useRouter();
const t = useTranslations()
const t = useTranslations();
// useCart dönen data yapısı: { message: "success", data: [...] }
const { data: cartResponse, isLoading, isError } = useCart()
const { data: regions = [] } = useRegions()
const { data: addresses = [] } = useAddresses()
const { data: paymentTypes = [] } = usePaymentTypes()
const { mutate: createOrder, isPending: isCreatingOrder } = useCreateOrder()
const { data: cartResponse, isLoading, isError } = useCart();
const { data: provinces = [] } = useRegions();
const { data: paymentTypes = [] } = usePaymentTypes();
const { mutate: createOrder, isPending: isCreatingOrder } = useCreateOrder();
// Cart items'ı doğru şekilde al
const cartItems = cartResponse?.data || []
const cartItems = cartResponse?.data || [];
useEffect(() => {
setIsClient(true)
}, [])
setIsClient(true);
}, []);
const regionGroups = provinces.reduce((acc, province) => {
if (!acc[province.region]) {
acc[province.region] = [];
}
acc[province.region].push(province);
return acc;
}, {} as Record<string, typeof provinces>);
const availableRegions = Object.keys(regionGroups);
const handleDeliveryTypeChange = (type: DeliveryType) => {
setDeliveryType(type)
setSelectedAddress("")
}
setDeliveryType(type);
setSelectedProvince(null);
};
const handleCompleteOrder = () => {
if (!selectedRegion || !selectedAddress || !paymentType) {
console.warn("Missing required fields for order")
return
if (!selectedRegion || !selectedProvince || !paymentType) {
console.warn("Missing required fields for order");
return;
}
const selectedProvinceData = provinces.find((p) => p.id === selectedProvince);
if (!selectedProvinceData) return;
// Kullanıcı bilgilerini store'dan al
const orderData = userStore.getOrderData();
if (!orderData) {
console.error("User data not found");
router.push("/login");
return;
}
createOrder(
{
customer_address: selectedAddress,
customer_name: orderData.customer_name,
customer_phone: orderData.customer_phone,
customer_address: selectedProvinceData.name,
shipping_method: deliveryType === "PICK_UP" ? "pickup" : "standart",
payment_type_id: paymentType.id,
region: selectedRegion,
@@ -55,30 +81,30 @@ export default function CartPage() {
},
{
onSuccess: () => {
router.push(`/orders`)
router.push(`/orders`);
},
},
)
}
}
);
};
if (!isClient) return null
if (!isClient) return null;
if (isLoading) {
return (
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
<p>{t("loading")}</p>
</div>
)
);
}
if (isError || cartItems.length === 0) {
return (
<div className="container mx-auto px-4 min-h-[90vh] flex items-center justify-center">
<h2 className="text-3xl md:text-4xl lg:text-5xl text-gray-400 font-semibold">
{t("emptyCart") || "Your cart is empty"}
{t("emptyCart")}
</h2>
</div>
)
);
}
const translations = {
@@ -100,105 +126,108 @@ export default function CartPage() {
placeOrder: t("order"),
emptyCart: t("cart_empty"),
map: t("address"),
}
};
// Group items by seller (from channel)
const itemsBySeller = cartItems.reduce(
(acc, item) => {
const sellerId = item.product.channel?.[0]?.id || 0
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller"
const itemsBySeller = cartItems.reduce((acc, item) => {
const sellerId = item.product.channel?.[0]?.id || 0;
const sellerName = item.product.channel?.[0]?.name || "Unknown Seller";
if (!acc[sellerId]) {
acc[sellerId] = {
seller: { id: sellerId, name: sellerName },
items: []
}
}
acc[sellerId].items.push(item)
return acc
},
{} as Record<number, { seller: any; items: typeof cartItems }>
)
if (!acc[sellerId]) {
acc[sellerId] = {
seller: { id: sellerId, name: sellerName },
items: [],
};
}
acc[sellerId].items.push(item);
return acc;
}, {} as Record<number, { seller: any; items: typeof cartItems }>);
// Calculate total
const totalAmount = cartItems.reduce((sum, item) => {
const price = parseFloat(item.product.price_amount || "0")
return sum + (price * item.product_quantity)
}, 0)
const price = parseFloat(item.product.price_amount || "0");
return sum + price * item.product_quantity;
}, 0);
return (
<div className="container mx-auto px-4 py-8 min-h-screen">
<h1 className="text-3xl font-bold mb-6">{translations.cart}</h1>
<div className="flex flex-col md:flex-row gap-6">
{/* Cart Items Section */}
<div className="flex-1">
<Card className="p-6 rounded-xl">
{/* Sellers */}
{Object.entries(itemsBySeller).map(([sellerId, { seller, items }]) => (
<div key={sellerId} className="mb-6">
<p className="text-base font-semibold mb-3">{seller.name}</p>
<div className="space-y-4">
{items.map((item) => {
const price = parseFloat(item.product.price_amount || "0")
const quantity = item.product_quantity
const total = price * quantity
{Object.entries(itemsBySeller).map(
([sellerId, { seller, items }]) => (
<div key={sellerId} className="mb-6">
<p className="text-base font-semibold mb-3">{seller.name}</p>
<div className="space-y-4">
{items.map((item) => {
const price = parseFloat(item.product.price_amount || "0");
const quantity = item.product_quantity;
const total = price * quantity;
return (
<CartItemCard
key={item.id}
item={{
...item,
quantity: quantity,
price: price,
total: total,
seller: seller,
price_formatted: `${item.product.price_amount} TMT`,
sub_total_formatted: `${item.product.price_amount} TMT`,
total_formatted: `${total.toFixed(2)} TMT`,
discount_formatted: "0 TMT",
product: {
...item.product,
image: item.product.media?.[0]?.images_800x800 || item.product.media?.[0]?.thumbnail,
images: item.product.media?.map(m => m.images_800x800 || m.thumbnail) || []
}
}}
translations={translations}
/>
)
})}
return (
<CartItemCard
key={item.id}
item={{
...item,
quantity: quantity,
price: price,
total: total,
seller: seller,
price_formatted: `${item.product.price_amount} TMT`,
sub_total_formatted: `${item.product.price_amount} TMT`,
total_formatted: `${total.toFixed(2)} TMT`,
discount_formatted: "0 TMT",
product: {
...item.product,
image:
item.product.media?.[0]?.images_800x800 ||
item.product.media?.[0]?.thumbnail,
images:
item.product.media?.map(
(m) => m.images_800x800 || m.thumbnail
) || [],
},
}}
translations={translations}
/>
);
})}
</div>
{Object.entries(itemsBySeller).length > 1 && (
<Separator className="mt-4" />
)}
</div>
{Object.entries(itemsBySeller).length > 1 && <Separator className="mt-4" />}
</div>
))}
)
)}
</Card>
</div>
{/* Order Summary Sidebar */}
<OrderSummary
order={{
id: 1,
seller: { id: 1, name: "Store" },
items: cartItems.map(item => ({
items: cartItems.map((item) => ({
...item,
quantity: item.product_quantity,
price: parseFloat(item.product.price_amount || "0"),
total: parseFloat(item.product.price_amount || "0") * item.product_quantity,
total:
parseFloat(item.product.price_amount || "0") *
item.product_quantity,
seller: {
id: item.product.channel?.[0]?.id || 0,
name: item.product.channel?.[0]?.name || "Unknown"
}
name: item.product.channel?.[0]?.name || "Unknown",
},
})),
billing: {
body: [
{
title: t("goods"),
value: `${totalAmount.toFixed(2)} TMT`
}
value: `${totalAmount.toFixed(2)} TMT`,
},
],
footer: {
title: t("total"),
value: `${totalAmount.toFixed(2)} TMT`
value: `${totalAmount.toFixed(2)} TMT`,
},
},
}}
@@ -206,21 +235,20 @@ export default function CartPage() {
paymentType={paymentType}
deliveryType={deliveryType}
selectedRegion={selectedRegion}
selectedAddress={selectedAddress}
selectedProvince={selectedProvince}
note={note}
regions={regions}
addresses={addresses}
regionGroups={regionGroups}
availableRegions={availableRegions}
paymentTypes={paymentTypes}
onPaymentTypeChange={setPaymentType}
onDeliveryTypeChange={handleDeliveryTypeChange}
onRegionChange={setSelectedRegion}
onAddressChange={setSelectedAddress}
onProvinceChange={setSelectedProvince}
onNoteChange={setNote}
onMapOpen={() => {}}
onCompleteOrder={handleCompleteOrder}
isLoading={isCreatingOrder}
/>
</div>
</div>
)
);
}

216
app/[locale]/cart/ui/OrderSummary.tsx
View File

@@ -1,216 +0,0 @@
"use client"
import { MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"
import { Separator } from "@/components/ui/separator"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@/components/ui/select"
import DeliveryTypeSelector from "./DeliveryTypeSelector"
import type {
Order,
Region,
Address,
DeliveryType,
CartTranslations,
PaymentTypeOption
} from "./types"
interface OrderSummaryProps {
order: Order
translations: CartTranslations
paymentType: PaymentTypeOption | null
deliveryType: DeliveryType
selectedRegion: string | null
selectedAddress: string
note: string
regions: Region[]
addresses: Address[]
paymentTypes: PaymentTypeOption[]
onPaymentTypeChange: (type: PaymentTypeOption) => void
onDeliveryTypeChange: (type: DeliveryType) => void
onRegionChange: (regionCode: string) => void
onAddressChange: (address: string) => void
onNoteChange: (note: string) => void
onMapOpen: () => void
onCompleteOrder: () => void
isLoading: boolean
}
export default function OrderSummary({
order,
translations: t,
paymentType,
deliveryType,
selectedRegion,
selectedAddress,
note,
regions,
addresses,
paymentTypes,
onPaymentTypeChange,
onDeliveryTypeChange,
onRegionChange,
onAddressChange,
onNoteChange,
onMapOpen,
onCompleteOrder,
isLoading,
}: OrderSummaryProps) {
// Filter addresses based on selected region
const filteredAddresses = selectedRegion
? addresses.filter((addr) => {
const region = regions.find((r) => r.code === selectedRegion)
return region && addr.region_id === region.id
})
: []
// Validate form completion
const isFormValid = selectedRegion && selectedAddress && paymentType
return (
<Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
{/* Payment Type Selection */}
<div className="mb-6">
<h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
<div className="flex gap-2">
{paymentTypes.map((type) => (
<Card
key={type.id}
className={`flex-1 cursor-pointer transition-all ${
paymentType?.id === type.id
? "border-2 border-[#005bff]"
: "border-2 border-gray-200"
}`}
onClick={() => onPaymentTypeChange(type)}
>
<div className="flex flex-col items-center justify-center p-4 gap-2">
<span className="text-xs font-medium">{type.name}</span>
</div>
</Card>
))}
</div>
</div>
{/* Delivery Type Selection */}
<DeliveryTypeSelector
selectedType={deliveryType}
onSelect={onDeliveryTypeChange}
translations={t}
/>
{/* Region Selection */}
<div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">
{t.selectRegion}
</Label>
<RadioGroup
value={selectedRegion || ""}
onValueChange={onRegionChange}
className="flex flex-wrap gap-4"
>
{regions.map((region) => (
<div key={region.id} className="flex items-center space-x-2">
<RadioGroupItem
value={region.code}
id={`region-${region.id}`}
className="border-2 border-gray-400 data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white data-[state=checked]:[&_svg]:fill-[#005bff] data-[state=checked]:[&_svg]:stroke-[#005bff]"
/>
<Label
htmlFor={`region-${region.id}`}
className="cursor-pointer"
>
{region.name}
</Label>
</div>
))}
</RadioGroup>
</div>
{/* Address Selection (only show when region is selected) */}
{selectedRegion && filteredAddresses.length > 0 && (
<div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">
{t.selectAddress}
</Label>
<div className="flex gap-2">
<Select value={selectedAddress} onValueChange={onAddressChange}>
<SelectTrigger className="rounded-xl">
<SelectValue placeholder={t.selectAddress} />
</SelectTrigger>
<SelectContent>
{filteredAddresses.map((addr) => (
<SelectItem key={addr.id} value={addr.address}>
{addr.title} - {addr.address}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
variant="outline"
size="icon"
onClick={onMapOpen}
className="rounded-xl flex-shrink-0 bg-transparent"
>
<MapPin className="h-5 w-5" />
</Button>
</div>
</div>
)}
{/* Note Input */}
<div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">{t.note}</Label>
<Textarea
value={note}
onChange={(e) => onNoteChange(e.target.value)}
className="rounded-xl resize-none"
rows={3}
placeholder={t.note}
/>
</div>
{/* Billing Summary */}
<div className="space-y-2 mb-4">
{order.billing.body.map((item, index) => (
<div
key={index}
className="flex justify-between text-base font-medium"
>
<span>{item.title}:</span>
<span>{item.value}</span>
</div>
))}
</div>
<Separator className="my-4" />
{/* Total Amount */}
<div className="flex justify-between items-center mb-6">
<span className="text-lg font-semibold">
{order.billing.footer.title}:
</span>
<span className="text-lg font-bold text-green-600">
{order.billing.footer.value}
</span>
</div>
{/* Complete Order Button */}
<Button
onClick={onCompleteOrder}
disabled={!isFormValid || isLoading}
className="w-full rounded-xl bg-[#005bff] hover:bg-[#004dcc] cursor-pointer h-12 text-lg font-bold disabled:opacity-50 disabled:cursor-not-allowed"
size="lg"
>
{isLoading ? `${t.placeOrder}...` : t.placeOrder}
</Button>
</Card>
)
}

119
app/[locale]/cart/ui/types.ts
View File

@@ -1,119 +0,0 @@
import type { StaticImageData } from "next/image"
export interface CartItem {
id: number
product_id: number
product: {
id: number
name: string
description?: string
images: (StaticImageData | string)[]
image?: StaticImageData | string
stock?: number
price_amount?: string
}
seller: {
id: number
name: string
}
quantity: number
product_quantity?: number // For compatibility with old API
price: number
total: number
price_formatted?: string
sub_total_formatted?: string
discount_formatted?: string
total_formatted?: string
}
export interface Cart {
message: string
data: CartItem[]
errorDetails?: string
total?: number
total_formatted?: string
items?: CartItem[] // Alternative structure
}
export interface Order {
id: number
seller: {
id: number
name: string
}
items: CartItem[]
billing: {
body: Array<{ title: string; value: string }>
footer: { title: string; value: string }
}
}
export interface Region {
id: number
code: string
name: string
}
export interface Address {
id: number
title: string
region_id: number
address: string
phone?: string
is_default?: boolean
}
export interface PickUpPoint {
id: number
name: string
address: string
}
export interface PaymentTypeOption {
id: number
name: string
code: string
}
export interface CartTranslations {
cart: string
ordersIn: string
pricePerUnit: string
additionalPrice: string
discount: string
totalPrice: string
paymentType: string
cash: string
card: string
deliveryType: string
delivery: string
pickup: string
selectRegion: string
selectAddress: string
note: string
placeOrder: string
emptyCart: string
map: string
}
export type PaymentType = "CASH" | "CARD"
export type DeliveryType = "SELECTED_DELIVERY" | "PICK_UP"
// API Response types
export interface ApiResponse<T> {
message: string
data: T
errorDetails?: string
}
export interface CreateOrderPayload {
customer_name?: string
customer_phone?: string
customer_address: string
shipping_method: string
payment_type_id: number
delivery_time?: string
delivery_at?: string
region: string
note?: string
}

2
app/[locale]/category/[slug]/page.tsx
View File

@@ -31,6 +31,6 @@ export default async function CategoryPage(props: Props) {
const params = await props.params
const { slug } = params
const CategoryPageClient = (await import("./ui/CategoryClient")).default
const CategoryPageClient = (await import("../../../../features/category/components/CategoryClient")).default
return <CategoryPageClient params={params} />
}

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

@@ -179,7 +179,7 @@ function ProductCard({
onMouseEnter={() => onHover(productId)}
onMouseLeave={() => onHover(null)}
>
<Link href={`/product/${product.slug || productId}`} className="block">
<Link href={`/product/${productId|| product.slug}`} className="block">
<div className="relative aspect-square bg-gray-50">
{/* Favorite Button */}
<button

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

@@ -43,7 +43,7 @@ export default async function RootLayout({ children, params }: Props) {
let messages
try {
messages = (await import(`../../messages/${locale}.json`)).default
messages = (await import(`../../i18n/messages/${locale}.json`)).default
} catch {
messages = {}
}

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

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

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

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

28
app/[locale]/page.tsx
View File

@@ -1,35 +1,35 @@
import type { Metadata } from "next"
import HomePage from "@/components/home/HomePage"
import type { Metadata } from "next";
import HomePage from "@/features/home/components/HomePage";
export const revalidate = 300
export const revalidate = 300;
export async function generateMetadata({
params
params,
}: {
params: Promise<{ locale: string }>
params: Promise<{ locale: string }>;
}): Promise<Metadata> {
const { locale } = await params
const { locale } = await params;
const meta = {
ru: {
title: "Интернет магазин - Лучшие товары по низким ценам",
description: "Качественные товары с быстрой доставкой по всей стране"
description: "Качественные товары с быстрой доставкой по всей стране",
},
tm: {
title: "Satym dükanı - Iň gowy harytlar aşak bahada",
description: "Suw harytly towarnama. Elektrika, eşik, ev we bag"
}
}
description: "Suw harytly towarnama. Elektrika, eşik, ev we bag",
},
};
const { title, description } = meta[locale as keyof typeof meta] || meta.ru
const { title, description } = meta[locale as keyof typeof meta] || meta.ru;
return {
title,
description,
openGraph: { type: "website", locale, title, description }
}
openGraph: { type: "website", locale, title, description },
};
}
export default function Page() {
return <HomePage />
return <HomePage />;
}

2
app/[locale]/product/[slug]/page.tsx
View File

@@ -1,6 +1,6 @@
import type { Metadata } from "next"
import { notFound } from "next/navigation"
import ProductPageContent from "./ProductPageContent"
import ProductPageContent from "../../../../features/products/components/ProductPageContent"
type Props = {
params: Promise<{ locale: string; slug: string }>

182
components/home/HomePage.tsx
View File

@@ -1,182 +0,0 @@
"use client"
import { useLocale, useTranslations } from "next-intl"
import { useEffect, useState, useCallback } from "react"
import InfiniteScroll from "react-infinite-scroll-component"
import HeroCarousel from "./Carousel"
import CategoryGrid from "./CategoryGrid"
import CollectionSection from "./ProductGrid"
import { useCategories, useCarousels, useCollections } from "@/lib/hooks"
import type { Collection } from "@/lib/types/api"
export default function HomePage() {
const locale = useLocale()
const t = useTranslations("common")
const [mounted, setMounted] = useState(false)
const [visibleCollections, setVisibleCollections] = useState<Collection[]>([])
const [hasMore, setHasMore] = useState(true)
const itemsPerPage = 10
const { data: categories, isLoading: categoriesLoading, isError: categoriesError } = useCategories()
const { data: carousels, isLoading: carouselsLoading } = useCarousels()
const { data: collections, isLoading: collectionsLoading, isError: collectionsError } = useCollections()
useEffect(() => setMounted(true), [])
// Initialize visible collections when data first loads
useEffect(() => {
console.log("=== Collections Data Change ===")
console.log("Collections:", collections)
console.log("Collections length:", collections?.length)
console.log("Visible collections length:", visibleCollections.length)
if (collections && collections.length > 0 && visibleCollections.length === 0) {
console.log("🟢 Initializing first batch of collections")
const initial = collections.slice(0, itemsPerPage)
console.log("Initial collections to show:", initial.length)
setVisibleCollections(initial)
setHasMore(collections.length > itemsPerPage)
console.log("Has more after init:", collections.length > itemsPerPage)
}
}, [collections, visibleCollections.length])
const loadMoreCollections = useCallback(() => {
console.log("=== loadMoreCollections Called ===")
console.log("Collections available:", collections?.length)
console.log("Visible collections:", visibleCollections.length)
console.log("Has more:", hasMore)
if (!collections) {
console.log("❌ No collections data")
return
}
const currentLength = visibleCollections.length
const nextCollections = collections.slice(
currentLength,
currentLength + itemsPerPage
)
console.log("Current length:", currentLength)
console.log("Next batch size:", nextCollections.length)
console.log("Next batch:", nextCollections.map(c => c.id))
if (nextCollections.length > 0) {
console.log("🟢 Adding", nextCollections.length, "more collections")
setVisibleCollections((prev) => {
const updated = [...prev, ...nextCollections]
console.log("Updated visible collections count:", updated.length)
return updated
})
} else {
console.log("⚠️ No more collections to load")
}
// Check if we've loaded all collections
const newTotal = currentLength + nextCollections.length
const shouldHaveMore = newTotal < collections.length
console.log("New total:", newTotal, "/ Total available:", collections.length)
console.log("Should have more:", shouldHaveMore)
if (!shouldHaveMore) {
console.log("🔴 Setting hasMore to false")
setHasMore(false)
}
}, [collections, visibleCollections.length, itemsPerPage, hasMore])
useEffect(() => {
console.log("=== State Update ===")
console.log("Visible collections count:", visibleCollections.length)
console.log("Has more:", hasMore)
}, [visibleCollections.length, hasMore])
if (!mounted) return <div className="p-8">Loading...</div>
// Transform carousel data to match component props
const carouselItems = carousels?.map(carousel => ({
title: carousel.title || "",
image: carousel.image || carousel.thumbnail,
url: carousel.link || null
})) || []
console.log("=== Render ===")
console.log("Collections loading:", collectionsLoading)
console.log("Visible collections for render:", visibleCollections.length)
console.log("Has more for InfiniteScroll:", hasMore)
return (
<div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
{/* Hero Carousel with API data */}
{!carouselsLoading && carouselItems.length > 0 && (
<HeroCarousel items={carouselItems} />
)}
{/* Categories Grid */}
<CategoryGrid
categories={categories}
isLoading={categoriesLoading}
isError={categoriesError}
locale={locale}
title={t("categories")}
/>
{/* Collections Sections with Infinite Scroll */}
{collectionsError ? (
<section className="bg-white rounded-2xl shadow-sm p-6">
<p className="text-red-600">Failed to load collections. Please try again.</p>
</section>
) : collectionsLoading ? (
<div className="space-y-8">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="bg-white rounded-2xl shadow-sm p-6">
<div className="h-8 bg-gray-200 rounded w-48 mb-4 animate-pulse" />
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, j) => (
<div key={j} className="h-64 bg-gray-200 rounded-lg animate-pulse" />
))}
</div>
</div>
))}
</div>
) : (
<>
<div className="bg-yellow-100 border border-yellow-400 rounded p-4 text-sm">
<strong>Debug Info:</strong><br/>
Total Collections: {collections?.length || 0}<br/>
Visible: {visibleCollections.length}<br/>
Has More: {hasMore ? "Yes" : "No"}
</div>
<InfiniteScroll
dataLength={visibleCollections.length}
next={loadMoreCollections}
hasMore={hasMore}
loader={
<div className="text-center py-8 bg-blue-50 border-2 border-blue-200 rounded">
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent"></div>
<p className="text-gray-500 mt-2 font-bold">Loading more collections...</p>
</div>
}
endMessage={
<div className="text-center py-8 bg-green-50 border-2 border-green-200 rounded">
<p className="text-gray-600 font-bold">✓ You've reached the end</p>
</div>
}
scrollThreshold={0.8}
>
<div className="space-y-8">
{visibleCollections.map((collection, index) => (
<div key={collection.id}>
<div className="text-xs text-gray-400 mb-2">Collection #{index + 1}</div>
<CollectionSection
collection={collection}
locale={locale}
/>
</div>
))}
</div>
</InfiniteScroll>
</>
)}
</div>
)
}

56
components/home/mockData.tsx
View File

@@ -1,56 +0,0 @@
import temp1 from "@/public/temp1.jpg"
import temp2 from "@/public/temp2.jpg"
import temp3 from "@/public/temp3.jpg"
import jbl from "@/public/jbl.png"
import jbll from "@/public/jbll.png"
import jbl3 from "@/public/jbl3.webp"
import jb from "@/public/jb.webp"
export const carouselItems = [
{ title: "Banner 1", image: temp1, url: "#" },
{ title: "Banner 2", image: temp2, url: "#" },
{ title: "Banner 3", image: temp3, url: "#" },
]
export const categories = [
{ id: 1, slug: "sneakers", name: "Sneakers", image: jbl },
{ id: 2, slug: "boots", name: "Boots", image: jbl3 },
{ id: 3, slug: "sandals", name: "Sandals", image: jbll },
{ id: 4, slug: "heels", name: "Heels", image: jb },
]
export const products = [
{
id: 1,
name: "Nike Air Max 270",
struct_price_text: "$120",
price: 120,
images: [jb, jbll, jbl, jbl3],
is_favorite: false,
labels: [{ text: "New", bg_color: "#10B981" }],
},
{
id: 2,
name: "Adidas Ultraboost",
struct_price_text: "$150",
price: 150,
images: [jbll, jb, jbl, jbl3],
is_favorite: true,
},
{
id: 3,
name: "Puma RS-X",
struct_price_text: "$110",
price: 110,
images: [jbl3, jbll, jbl, jb],
is_favorite: false,
},
{
id: 4,
name: "New Balance 327",
struct_price_text: "$130",
price: 130,
images: [jbl, jbll, jb, jbl3],
is_favorite: false,
},
]

78
components/layout/Header.tsx
View File

@@ -3,18 +3,24 @@
import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { X, Menu, Search, Store } from "lucide-react"
import { X, Menu, Search, Store, LogOut, User as UserIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import Logo from "@/public/logo.png"
import CategoryMenu from "./ui/CategoryMenu"
import SearchBar from "./ui/SearchBar"
import AuthDialog from "./ui/AuthDialog"
import ActionButtons from "./ui/ActionButtons"
import LanguageSelector from "./ui/LanguageSelector"
import { useAuthStatus, useLogout } from "@/lib/hooks/useAuth"
interface HeaderProps {
locale?: string
isAuthenticated?: boolean
translations?: {
catalog: string
search: string
@@ -27,8 +33,17 @@ interface HeaderProps {
phone: string
code: string
send: string
verify: string
sending: string
verifying: string
enterPhone: string
weWillSendCode: string
invalidPhone: string
invalidCode: string
loginSuccess: string
codeSent: string
logout: string
loggingOut: string
}
}
@@ -44,17 +59,29 @@ const DEFAULT_TRANSLATIONS = {
phone: "Номер телефона",
code: "Код",
send: "Отправить",
verify: "Подтвердить",
sending: "Отправка...",
verifying: "Проверка...",
enterPhone: "Введите свой номер телефона",
weWillSendCode: "Мы вышлем вам код",
invalidPhone: "Неверный номер телефона",
invalidCode: "Неверный код",
loginSuccess: "Вход выполнен успешно",
codeSent: "Код отправлен на ваш номер",
logout: "Выйти",
loggingOut: "Выход...",
}
export default function Header({ locale = "ru", isAuthenticated = false, translations }: HeaderProps) {
export default function Header({ locale = "ru", translations }: HeaderProps) {
const [isClient, setIsClient] = useState(false)
const [isCategoryOpen, setIsCategoryOpen] = useState(false)
const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false)
const [isLoginOpen, setIsLoginOpen] = useState(false)
const t = translations || DEFAULT_TRANSLATIONS
const t = { ...DEFAULT_TRANSLATIONS, ...translations }
const { isAuthenticated, isLoading } = useAuthStatus()
const { mutate: logout, isPending: isLoggingOut } = useLogout()
useEffect(() => {
setIsClient(true)
@@ -68,6 +95,10 @@ export default function Header({ locale = "ru", isAuthenticated = false, transla
}
}
const handleLogout = () => {
logout()
}
const toggleCategoryMenu = () => setIsCategoryOpen(!isCategoryOpen)
const closeCategoryMenu = () => setIsCategoryOpen(false)
@@ -80,7 +111,7 @@ export default function Header({ locale = "ru", isAuthenticated = false, transla
<div className="flex h-16 items-center justify-between gap-4">
<Link href="/" className="shrink-0">
<div className="relative h-8 w-[180px]">
<Image src={Logo || "/placeholder.svg"} alt="Logo" fill className="object-contain" priority />
<Image src={Logo} alt="Logo" fill className="object-contain" priority />
</div>
</Link>
@@ -106,6 +137,36 @@ export default function Header({ locale = "ru", isAuthenticated = false, transla
<SearchBar isMobile={false} searchPlaceholder={t.search} className="hidden flex-1 md:flex" />
<div className="hidden md:flex items-center gap-2">
{isLoading ? (
<div className="h-10 w-24 animate-pulse bg-gray-200 rounded" />
) : isAuthenticated ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2">
<UserIcon className="h-5 w-5 text-gray-600" />
<span className="text-xs text-gray-700">{t.profile}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => (window.location.href = `/${locale}/me`)}>
<UserIcon className="mr-2 h-4 w-4" />
{t.profile}
</DropdownMenuItem>
<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
<LogOut className="mr-2 h-4 w-4" />
{isLoggingOut ? t.loggingOut : t.logout}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : (
<Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={handleAuthClick}>
<UserIcon className="h-5 w-5 text-gray-600" />
<span className="text-xs text-gray-700">{t.login}</span>
</Button>
)}
</div>
<ActionButtons
isAuthenticated={isAuthenticated}
onAuthClick={handleAuthClick}
@@ -146,6 +207,13 @@ export default function Header({ locale = "ru", isAuthenticated = false, transla
phone: t.phone,
code: t.code,
send: t.send,
verify: t.verify,
sending: t.sending,
verifying: t.verifying,
invalidPhone: t.invalidPhone,
invalidCode: t.invalidCode,
loginSuccess: t.loginSuccess,
codeSent: t.codeSent,
}}
/>
</>

186
components/layout/ui/AuthDialog.tsx
View File

@@ -1,59 +1,112 @@
import React, { useState } from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import Logo from "@/public/logo.png";
"use client"
import React, { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { toast } from "sonner"
import Logo from "@/public/logo.png"
import { useLogin, useVerifyToken } from "@/lib/hooks/useAuth"
interface AuthDialogProps {
isOpen: boolean;
onClose: () => void;
isOpen: boolean
onClose: () => void
translations: {
enterPhone: string;
weWillSendCode: string;
phone: string;
code: string;
send: string;
};
enterPhone: string
weWillSendCode: string
phone: string
code: string
send: string
verify: string
sending: string
verifying: string
invalidPhone: string
invalidCode: string
loginSuccess: string
codeSent: string
}
}
export default function AuthDialog({
isOpen,
onClose,
translations: t,
}: AuthDialogProps) {
const [phone, setPhone] = useState("993");
const [otp, setOtp] = useState("");
const [otpSent, setOtpSent] = useState(false);
export default function AuthDialog({ isOpen, onClose, translations: t }: AuthDialogProps) {
const [phone, setPhone] = useState("993")
const [otp, setOtp] = useState("")
const [otpSent, setOtpSent] = useState(false)
const [rawPhone, setRawPhone] = useState("")
const handleSendOtp = () => {
if (phone.length > 3) {
setOtpSent(true);
}
};
const handleLogin = () => {
// Here you can add authentication logic
resetDialog();
};
const { mutate: login, isPending: isLoginLoading } = useLogin()
const { mutate: verifyToken, isPending: isVerifyLoading } = useVerifyToken()
const resetDialog = () => {
onClose();
setOtpSent(false);
setPhone("993");
setOtp("");
};
setOtpSent(false)
setPhone("993")
setOtp("")
setRawPhone("")
onClose()
}
const handleSendOtp = () => {
const cleanPhone = phone.replace(/\D/g, "")
if (cleanPhone.length !== 11 || !cleanPhone.startsWith("993")) {
toast.error(t.invalidPhone)
return
}
const phoneNumber = cleanPhone.substring(3)
setRawPhone(phoneNumber)
login(
{ phone_number: phoneNumber },
{
onSuccess: () => {
toast.success(t.codeSent)
setOtpSent(true)
},
onError: (error: any) => {
toast.error(error?.response?.data?.message || "Hata oluştu")
},
}
)
}
const handleLogin = () => {
if (otp.length < 4) {
toast.error(t.invalidCode)
return
}
verifyToken(
{
phone_number: rawPhone,
code: otp,
},
{
onSuccess: () => {
toast.success(t.loginSuccess)
resetDialog()
window.location.reload()
},
onError: (error: any) => {
toast.error(error?.response?.data?.message || "Kod yanlış")
},
}
)
}
const handleKeyPress = (e: React.KeyboardEvent, action: () => void) => {
if (e.key === "Enter") {
action();
action()
}
};
}
const formatPhoneInput = (value: string) => {
const cleaned = value.replace(/\D/g, "")
if (!cleaned.startsWith("993")) {
return "993"
}
return cleaned.substring(0, 11)
}
return (
<Dialog open={isOpen} onOpenChange={resetDialog}>
@@ -64,34 +117,36 @@ export default function AuthDialog({
<Image src={Logo} alt="Logo" fill className="object-contain" />
</div>
</div>
<DialogTitle className="text-2xl text-center">
{t.enterPhone}
</DialogTitle>
<p className="text-center text-sm text-gray-600">
{t.weWillSendCode}
</p>
<DialogTitle className="text-2xl text-center">{t.enterPhone}</DialogTitle>
<p className="text-center text-sm text-gray-600">{t.weWillSendCode}</p>
</DialogHeader>
<div className="space-y-4 mt-4">
<Input
type="tel"
placeholder={t.phone}
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="h-12 rounded-xl"
onKeyDown={(e) => handleKeyPress(e, handleSendOtp)}
disabled={otpSent}
/>
<div>
<Input
type="tel"
placeholder={t.phone}
value={phone}
onChange={(e) => setPhone(formatPhoneInput(e.target.value))}
className="h-12 rounded-xl"
onKeyDown={(e) => handleKeyPress(e, handleSendOtp)}
disabled={otpSent || isLoginLoading}
maxLength={11}
/>
<p className="text-xs text-gray-500 mt-1">Format: 99365123456</p>
</div>
{otpSent && (
<Input
type="text"
placeholder={t.code}
value={otp}
onChange={(e) => setOtp(e.target.value)}
onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").substring(0, 6))}
className="h-12 rounded-xl"
onKeyDown={(e) => handleKeyPress(e, handleLogin)}
disabled={isVerifyLoading}
autoFocus
maxLength={6}
/>
)}
@@ -99,11 +154,18 @@ export default function AuthDialog({
onClick={otpSent ? handleLogin : handleSendOtp}
className="w-full h-12 rounded-xl font-bold text-base"
size="lg"
disabled={isLoginLoading || isVerifyLoading}
>
{t.send}
{isLoginLoading
? t.sending
: isVerifyLoading
? t.verifying
: otpSent
? t.verify
: t.send}
</Button>
</div>
</DialogContent>
</Dialog>
);
)
}

257
components/ui/dropdown-menu.tsx Normal file
View File

@@ -0,0 +1,257 @@
"use client"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
)
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
)
}
function DropdownMenuContent({
className,
sideOffset = 4,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
)
}
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
)
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
<DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
return (
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
)
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
)
}
function DropdownMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
return (
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
)
}
function DropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}) {
return (
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
)
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
}
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}) {
return (
<DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto size-4" />
</DropdownMenuPrimitive.SubTrigger>
)
}
function DropdownMenuSubContent({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
return (
<DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props}
/>
)
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
}

89
context/AuthWrapper.tsx
View File

@@ -1,72 +1,71 @@
"use client"
"use client";
import { useEffect, type ReactNode } from "react"
import { useRouter, usePathname } from "next/navigation"
import { useAuthStatus, useGetGuestToken } from "@/lib/hooks/useAuth"
import { useEffect, type ReactNode } from "react";
import { useRouter, usePathname } from "next/navigation";
import { useAuthStatus, useGetGuestToken } from "@/lib/hooks/useAuth";
import { useUserProfile } from "@/features/profile/hooks/useUserProfile";
interface AuthWrapperProps {
children: ReactNode
requireAuth?: boolean
redirectTo?: string
locale: string
children: ReactNode;
requireAuth?: boolean;
redirectTo?: string;
locale: string;
}
/**
* AuthWrapper - Protects routes and manages authentication state
*
* Usage:
* - Wrap protected pages: <AuthWrapper requireAuth>{content}</AuthWrapper>
* - Wrap public pages: <AuthWrapper>{content}</AuthWrapper>
*/
export default function AuthWrapper({
children,
requireAuth = false,
redirectTo,
locale,
}: AuthWrapperProps) {
const router = useRouter()
const pathname = usePathname()
const { isAuthenticated, isLoading, user } = useAuthStatus()
const { mutate: getGuestToken, isPending: isGettingGuestToken } = useGetGuestToken()
const router = useRouter();
const pathname = usePathname();
const { isAuthenticated, isLoading } = useAuthStatus();
const { mutate: getGuestToken, isPending: isGettingGuestToken } = useGetGuestToken();
// Login olmuş kullanıcı için profil bilgisini otomatik çek
useUserProfile();
useEffect(() => {
// Wait for auth check to complete
if (isLoading || isGettingGuestToken) return
if (isLoading) return;
const authToken = document.cookie
.split("; ")
.find(row => row.startsWith("authToken="));
const guestToken = document.cookie
.split("; ")
.find(row => row.startsWith("guestToken="));
if (!authToken && !guestToken && !isGettingGuestToken) {
getGuestToken();
}
}, [isLoading, getGuestToken, isGettingGuestToken]);
useEffect(() => {
if (isLoading || isGettingGuestToken) return;
// If auth required and user not authenticated
if (requireAuth && !isAuthenticated) {
const redirect = redirectTo || `/${locale}/login`
const returnUrl = pathname !== redirect ? `?returnUrl=${encodeURIComponent(pathname)}` : ""
router.push(`${redirect}${returnUrl}`)
return
const redirect = redirectTo || `/${locale}/login`;
const returnUrl = pathname !== redirect ? `?returnUrl=${encodeURIComponent(pathname)}` : "";
router.push(`${redirect}${returnUrl}`);
return;
}
// If already authenticated and trying to access login/register
if (isAuthenticated && (pathname.includes("/login") || pathname.includes("/register"))) {
router.push(`/${locale}`)
return
router.push(`/${locale}`);
}
}, [isAuthenticated, isLoading, requireAuth, pathname, router, locale, redirectTo, isGettingGuestToken]);
// Ensure guest token exists for non-authenticated users
if (!isAuthenticated && !requireAuth) {
const hasGuestToken = document.cookie
.split("; ")
.some((row) => row.startsWith("guestToken="))
if (!hasGuestToken) {
getGuestToken()
}
}
}, [isAuthenticated, isLoading, requireAuth, pathname, router, locale, redirectTo, getGuestToken, isGettingGuestToken])
// Show loading state
if (isLoading || (requireAuth && !isAuthenticated)) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900" />
<div className="flex flex-col items-center gap-4">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
<p className="text-sm text-gray-600">Yükleniyor...</p>
</div>
</div>
)
);
}
return <>{children}</>
return <>{children}</>;
}

99
app/[locale]/cart/ui/CartItemCard.tsx → features/cart/components/CartItemCard.tsx
View File

@@ -4,10 +4,7 @@ import Image from "next/image"
import { Minus, Plus, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import {
useUpdateCartItemQuantity,
useRemoveFromCart
} from "@/lib/hooks"
import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks"
import type { CartItem, CartTranslations } from "./types"
interface CartItemCardProps {
@@ -16,11 +13,7 @@ interface CartItemCardProps {
onUpdate?: () => void
}
export default function CartItemCard({
item,
translations: t,
onUpdate
}: CartItemCardProps) {
export default function CartItemCard({ item, translations: t, onUpdate }: CartItemCardProps) {
const [localQuantity, setLocalQuantity] = useState(item.quantity)
const [pendingQuantity, setPendingQuantity] = useState(item.quantity)
const [isLoading, setIsLoading] = useState(false)
@@ -29,58 +22,40 @@ export default function CartItemCard({
const { mutate: updateQuantity } = useUpdateCartItemQuantity()
const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart()
// Sync local quantity with server quantity
useEffect(() => {
setLocalQuantity(item.quantity)
setPendingQuantity(item.quantity)
}, [item.quantity])
// Debounced update effect
useEffect(() => {
if (pendingQuantity === item.quantity) {
return
}
if (pendingQuantity === item.quantity) return
// Clear previous timeout
if (updateTimeoutRef.current) {
clearTimeout(updateTimeoutRef.current)
}
// Set new timeout for update
updateTimeoutRef.current = setTimeout(() => {
setIsLoading(true)
if (pendingQuantity <= 0) {
removeItem(item.id, {
onSuccess: () => {
onUpdate?.()
},
onError: (error) => {
console.error("Failed to remove item:", error)
// Revert on error
removeItem(item.product_id, {
onSuccess: () => onUpdate?.(),
onError: () => {
setLocalQuantity(item.quantity)
setPendingQuantity(item.quantity)
},
onSettled: () => {
setIsLoading(false)
},
onSettled: () => setIsLoading(false),
})
} else {
updateQuantity(
{ itemId: item.id, quantity: pendingQuantity },
{ productId: item.product_id, quantity: pendingQuantity },
{
onSuccess: () => {
onUpdate?.()
},
onError: (error) => {
console.error("Failed to update quantity:", error)
// Revert on error
onSuccess: () => onUpdate?.(),
onError: () => {
setLocalQuantity(item.quantity)
setPendingQuantity(item.quantity)
},
onSettled: () => {
setIsLoading(false)
},
onSettled: () => setIsLoading(false),
}
)
}
@@ -91,12 +66,11 @@ export default function CartItemCard({
clearTimeout(updateTimeoutRef.current)
}
}
}, [pendingQuantity, item.quantity, item.id, updateQuantity, removeItem, onUpdate])
}, [pendingQuantity, item.quantity, item.product_id, updateQuantity, removeItem, onUpdate])
const handleQuantityIncrease = (e: React.MouseEvent) => {
e.preventDefault()
e.stopPropagation()
if (isLoading) return
const newQuantity = localQuantity + 1
@@ -107,11 +81,9 @@ export default function CartItemCard({
const handleQuantityDecrease = (e: React.MouseEvent) => {
e.preventDefault()
e.stopPropagation()
if (isLoading) return
const newQuantity = localQuantity - 1
if (newQuantity < 1) {
handleDelete()
return
@@ -123,43 +95,28 @@ export default function CartItemCard({
const handleDelete = () => {
setIsLoading(true)
removeItem(item.id, {
onSuccess: () => {
onUpdate?.()
},
onError: (error) => {
console.error("Failed to remove item:", error)
},
onSettled: () => {
setIsLoading(false)
},
removeItem(item.product_id, {
onSuccess: () => onUpdate?.(),
onSettled: () => setIsLoading(false),
})
}
const getImageSrc = () => {
if (item.product.image) return item.product.image
if (item.product.images && item.product.images.length > 0) {
return item.product.images[0]
}
if (item.product.images?.length > 0) return item.product.images[0]
return "/placeholder.svg"
}
return (
<Card className="p-4 shadow-none border">
<div className="flex flex-col sm:flex-row gap-4">
{/* Product Image & Info */}
<div className="flex gap-4 flex-1">
<div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden flex-shrink-0">
<Image
src={getImageSrc()}
alt={item.product.name}
fill
className="object-contain"
/>
<Image src={getImageSrc()} alt={item.product.name} fill className="object-contain" />
</div>
<div className="flex flex-col gap-2">
<h3 className="font-semibold text-base">{item.product.name}</h3>
<p className="text-sm text-gray-600">{item.seller.name}</p>
<p className="text-sm text-gray-600">{item.seller?.name || "Store"}</p>
<Button
variant="ghost"
size="sm"
@@ -172,33 +129,25 @@ export default function CartItemCard({
</div>
</div>
{/* Price & Quantity */}
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
<div className="space-y-1">
<p className="text-sm font-semibold">
{t.pricePerUnit}{" "}
<span className="text-primary">
{item.price_formatted || `${item.price} TMT`}
</span>
{t.pricePerUnit} <span className="text-primary">{item.price_formatted}</span>
</p>
<p className="text-sm font-semibold">
{t.additionalPrice}{" "}
{item.sub_total_formatted || `${item.total} TMT`}
{t.additionalPrice} {item.sub_total_formatted}
</p>
{item.discount_formatted && item.discount_formatted !== "0 TMT" && (
<p className="text-sm font-semibold">
{t.discount} {item.discount_formatted}
</p>
<p className="text-sm font-semibold">{t.discount} {item.discount_formatted}</p>
)}
<div className="flex items-center gap-2">
<span className="text-sm font-semibold">{t.totalPrice}</span>
<span className="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base">
{item.total_formatted || `${item.total} TMT`}
{item.total_formatted}
</span>
</div>
</div>
{/* Quantity Controls */}
<div className="flex items-center gap-2">
<Button
variant="outline"
@@ -209,9 +158,7 @@ export default function CartItemCard({
>
<Minus className="h-4 w-4" />
</Button>
<div className="w-12 text-center font-semibold">
{localQuantity}
</div>
<div className="w-12 text-center font-semibold">{localQuantity}</div>
<Button
variant="outline"
size="icon"

2
app/[locale]/cart/ui/DeliveryTypeSelector.tsx → features/cart/components/DeliveryTypeSelector.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { Truck, Warehouse } from "lucide-react"
import { Card } from "@/components/ui/card"
import { DeliveryType, CartTranslations } from "./types"
import { DeliveryType, CartTranslations } from "../types"
interface DeliveryTypeSelectorProps {
selectedType: DeliveryType

176
features/cart/components/OrderSummary.tsx Normal file
View File

@@ -0,0 +1,176 @@
"use client"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"
import { Separator } from "@/components/ui/separator"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import DeliveryTypeSelector from "./DeliveryTypeSelector"
import type { Order, Province, DeliveryType, CartTranslations, PaymentType } from "../types"
interface OrderSummaryProps {
order: Order
translations: CartTranslations
paymentType: PaymentType | null
deliveryType: DeliveryType
selectedRegion: string
selectedProvince: number | null
note: string
regionGroups: Record<string, Province[]>
availableRegions: string[]
paymentTypes: PaymentType[]
onPaymentTypeChange: (type: PaymentType) => void
onDeliveryTypeChange: (type: DeliveryType) => void
onRegionChange: (regionCode: string) => void
onProvinceChange: (provinceId: number) => void
onNoteChange: (note: string) => void
onCompleteOrder: () => void
isLoading: boolean
}
export default function OrderSummary({
order,
translations: t,
paymentType,
deliveryType,
selectedRegion,
selectedProvince,
note,
regionGroups,
availableRegions,
paymentTypes,
onPaymentTypeChange,
onDeliveryTypeChange,
onRegionChange,
onProvinceChange,
onNoteChange,
onCompleteOrder,
isLoading,
}: OrderSummaryProps) {
const provincesForSelectedRegion = selectedRegion ? regionGroups[selectedRegion] || [] : []
const isFormValid = selectedRegion && selectedProvince && paymentType
return (
<Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
{/* Payment Type */}
<div className="mb-6">
<h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
<div className="flex gap-2">
{paymentTypes.map((type) => (
<Card
key={type.id}
className={`flex-1 cursor-pointer transition-all ${
paymentType?.id === type.id
? "border-2 border-[#005bff] bg-blue-50"
: "border-2 border-gray-200"
}`}
onClick={() => onPaymentTypeChange(type)}
>
<div className="flex flex-col items-center justify-center p-4 gap-2">
<span className={`text-xs font-medium ${
paymentType?.id === type.id ? "text-[#005bff]" : ""
}`}>
{type.name}
</span>
</div>
</Card>
))}
</div>
</div>
{/* Delivery Type */}
<DeliveryTypeSelector
selectedType={deliveryType}
onSelect={onDeliveryTypeChange}
translations={t}
/>
{/* Region Selection */}
<div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">{t.selectRegion}</Label>
<RadioGroup
value={selectedRegion}
onValueChange={(value) => {
onRegionChange(value)
onProvinceChange(null as any)
}}
className="flex flex-wrap gap-4"
>
{availableRegions.map((regionCode) => (
<div key={regionCode} className="flex items-center space-x-2">
<RadioGroupItem
value={regionCode}
id={`region-${regionCode}`}
className="border-2 border-gray-400 data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white"
/>
<Label htmlFor={`region-${regionCode}`} className="cursor-pointer uppercase">
{regionCode}
</Label>
</div>
))}
</RadioGroup>
</div>
{/* Province Selection */}
{selectedRegion && provincesForSelectedRegion.length > 0 && (
<div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">{t.selectAddress}</Label>
<Select
value={selectedProvince?.toString() || ""}
onValueChange={(value) => onProvinceChange(parseInt(value))}
>
<SelectTrigger className="rounded-xl">
<SelectValue placeholder={t.selectAddress} />
</SelectTrigger>
<SelectContent>
{provincesForSelectedRegion.map((province) => (
<SelectItem key={province.id} value={province.id.toString()}>
{province.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
{/* Note */}
<div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">{t.note}</Label>
<Textarea
value={note}
onChange={(e) => onNoteChange(e.target.value)}
className="rounded-xl resize-none"
rows={3}
placeholder={t.note}
/>
</div>
{/* Billing */}
<div className="space-y-2 mb-4">
{order.billing.body.map((item, index) => (
<div key={index} className="flex justify-between text-base font-medium">
<span>{item.title}:</span>
<span>{item.value}</span>
</div>
))}
</div>
<Separator className="my-4" />
<div className="flex justify-between items-center mb-6">
<span className="text-lg font-semibold">{order.billing.footer.title}:</span>
<span className="text-lg font-bold text-green-600">{order.billing.footer.value}</span>
</div>
<Button
onClick={onCompleteOrder}
disabled={!isFormValid || isLoading}
className="w-full rounded-xl bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
size="lg"
>
{isLoading ? `${t.placeOrder}...` : t.placeOrder}
</Button>
</Card>
)
}

0
app/[locale]/cart/ui/PaymentTypeSelector.tsx → features/cart/components/PaymentTypeSelector.tsx
View File

25
features/cart/hooks/useAddresses.ts Normal file
View File

@@ -0,0 +1,25 @@
import { useQuery } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
interface Province {
id: number
region: string
name: string
}
interface ProvincesResponse {
message: string
data: Province[]
}
export function useRegions() {
return useQuery({
queryKey: ["regions"],
queryFn: async () => {
const response = await apiClient.get<ProvincesResponse>("/provinces")
return response.data.data
},
staleTime: 1000 * 60 * 60, // 1 hour
})
}

28
lib/hooks/useCart.ts → features/cart/hooks/useCart.ts
View File

@@ -1,6 +1,6 @@
import { useQuery, useMutation, useQueryClient, UseQueryOptions } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
import type { Cart, CartItem } from "@/lib/types/api"
import type { CartItem } from "@/lib/types/api"
interface CartResponse {
message: string
@@ -227,7 +227,7 @@ export function useCreateOrder() {
region: string
note?: string
}) => {
const response = await apiClient.post("/api/v1/orders", payload)
const response = await apiClient.post("/orders", payload)
return response.data
},
onSuccess: () => {
@@ -241,30 +241,8 @@ export function useCreateOrder() {
}
import type { Region } from "@/lib/types/api"
export function useRegions() {
return useQuery({
queryKey: ["regions"],
queryFn: async () => {
const response = await apiClient.get<Region[]>("/api/v1/provinces")
return response.data
},
staleTime: 1000 * 60 * 60, // 1 hour
})
}
import type { Address } from "@/lib/types/api"
export function useAddresses() {
return useQuery({
queryKey: ["addresses"],
queryFn: async () => {
const response = await apiClient.get<Address[]>("/api/v1/addresses")
return response.data
},
staleTime: 1000 * 60 * 30, // 30 minutes
})
}

15
lib/hooks/usePaymentTypes.ts → features/cart/hooks/usePaymentTypes.ts
View File

@@ -1,13 +1,22 @@
import { useQuery } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
import type { PaymentTypeOption } from "@/lib/types/api"
interface PaymentType {
id: number
name: string
}
interface PaymentTypesResponse {
message: string
data: PaymentType[]
}
export function usePaymentTypes() {
return useQuery({
queryKey: ["paymentTypes"],
queryFn: async () => {
const response = await apiClient.get<PaymentTypeOption[]>("/api/v1/order-payments")
return response.data
const response = await apiClient.get<PaymentTypesResponse>("/order-payments")
return response.data.data
},
staleTime: 1000 * 60 * 60, // 1 hour
})

171
features/cart/types.ts Normal file
View File

@@ -0,0 +1,171 @@
import type { StaticImageData } from "next/image";
export interface Cart {
message: string;
data: CartItem[];
errorDetails?: string;
total?: number;
total_formatted?: string;
items?: CartItem[]; // Alternative structure
}
export interface Order {
id: number;
seller: {
id: number;
name: string;
};
items: CartItem[];
billing: {
body: Array<{ title: string; value: string }>;
footer: { title: string; value: string };
};
}
export interface Region {
id: number;
code: string;
name: string;
}
export interface Address {
id: number;
title: string;
region_id: number;
address: string;
phone?: string;
is_default?: boolean;
}
export interface PickUpPoint {
id: number;
name: string;
address: string;
}
export interface PaymentTypeOption {
id: number;
name: string;
code: string;
}
export interface CartTranslations {
cart: string;
ordersIn: string;
pricePerUnit: string;
additionalPrice: string;
discount: string;
totalPrice: string;
paymentType: string;
cash: string;
card: string;
deliveryType: string;
delivery: string;
pickup: string;
selectRegion: string;
selectAddress: string;
note: string;
placeOrder: string;
emptyCart: string;
map: string;
}
// API Response types
export interface ApiResponse<T> {
message: string;
data: T;
errorDetails?: string;
}
export interface CreateOrderPayload {
customer_name?: string;
customer_phone?: string;
customer_address: string;
shipping_method: string;
payment_type_id: number;
delivery_time?: string;
delivery_at?: string;
region: string;
note?: string;
}
export interface CartItem {
id: number;
product_id: number;
product: {
id: number;
name: string;
description?: string;
media?: Array<{ images_800x800?: string; thumbnail?: string }>;
channel?: Array<{ id: number; name: string }>;
price_amount?: string;
stock?: number;
};
product_quantity: number;
quantity?: number; // For compatibility
seller?: {
id: number;
name: string;
};
price?: number;
total?: number;
price_formatted?: string;
sub_total_formatted?: string;
discount_formatted?: string;
total_formatted?: string;
}
export interface Province {
id: number;
region: string;
name: string;
}
export interface PaymentType {
id: number;
name: string;
}
export interface Order {
id: number;
seller: {
id: number;
name: string;
};
items: CartItem[];
billing: {
body: Array<{ title: string; value: string }>;
footer: { title: string; value: string };
};
}
export interface CartTranslations {
cart: string;
ordersIn: string;
pricePerUnit: string;
additionalPrice: string;
discount: string;
totalPrice: string;
paymentType: string;
cash: string;
card: string;
deliveryType: string;
delivery: string;
pickup: string;
selectRegion: string;
selectAddress: string;
note: string;
placeOrder: string;
emptyCart: string;
map: string;
}
export type DeliveryType = "SELECTED_DELIVERY" | "PICK_UP";
export interface CreateOrderPayload {
customer_address: string;
shipping_method: string;
payment_type_id: number;
region: string;
note?: string;
}

104
app/[locale]/category/[slug]/ui/CategoryClient.tsx → features/category/components/CategoryClient.tsx
View File

@@ -24,8 +24,9 @@ import {
useAllCategoryProducts,
useAllCategoryProductsPaginated,
useCategoryProducts,
} from "@/lib/hooks/useCategories";
} from "@/features/category/hooks/useCategories";
import { notFound } from "next/navigation";
import { useTranslations } from "next-intl";
import type { Category, Product } from "@/lib/types/api";
interface CategoryPageClientProps {
@@ -39,10 +40,10 @@ export default function CategoryPageClient({
const router = useRouter();
const searchParams = useSearchParams();
const [isOpen, setIsOpen] = useState(false);
const t = useTranslations();
// Fetch all categories first
const { data: categoriesData, isLoading: categoriesLoading } =
useCategories();
const { data: categoriesData, isLoading: categoriesLoading } = useCategories();
// Find category from slug
const selectedCategory = useMemo(() => {
@@ -64,9 +65,7 @@ export default function CategoryPageClient({
// Track subcategories
const [hasSubcategories, setHasSubcategories] = useState(false);
const [subcategoriesToShow, setSubcategoriesToShow] = useState<Category[]>(
[]
);
const [subcategoriesToShow, setSubcategoriesToShow] = useState<Category[]>([]);
// Pagination state
const [currentPage, setCurrentPage] = useState(1);
@@ -74,17 +73,13 @@ export default function CategoryPageClient({
const [allProducts, setAllProducts] = useState<Product[]>([]);
// Price sorting state
const [priceSort, setPriceSort] = useState<
"none" | "lowToHigh" | "highToLow"
>("none");
const [priceSort, setPriceSort] = useState<"none" | "lowToHigh" | "highToLow">("none");
// Price filter state
const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]);
// Selected filters state
const [selectedFilters, setSelectedFilters] = useState<
Record<string, Set<number>>
>({
const [selectedFilters, setSelectedFilters] = useState<Record<string, Set<number>>>({
brand: new Set(),
color: new Set(),
tag: new Set(),
@@ -94,10 +89,7 @@ export default function CategoryPageClient({
const isSubCategory = useMemo(() => {
if (!categoriesData || !selectedCategory) return false;
const checkIsSubCategory = (
categories: Category[],
targetId: number
): boolean => {
const checkIsSubCategory = (categories: Category[], targetId: number): boolean => {
for (const category of categories) {
if (category.children) {
for (const subCategory of category.children) {
@@ -142,21 +134,7 @@ export default function CategoryPageClient({
limit: 6,
});
const t = {
filter: "Filtreler",
from: "Min",
to: "Max",
reset: "Sıfırla",
total: "Toplam",
items: "ürün",
subCategories: "Alt Kategoriler",
composition: "Sıralama",
neverMind: "Varsayılan",
From_cheap_to_expensive: "Ucuzdan Pahalıya",
From_expensive_to_cheap: "Pahalıdan Ucuza",
brands: "Markalar",
noResults: "Ürün bulunamadı",
};
if (!slug) {
notFound();
@@ -217,7 +195,7 @@ export default function CategoryPageClient({
}
}, [selectedCategory, subcategoryProducts, currentPage, isSubCategory]);
// Handle paginated category products (non-subcategories)
// Handle paginated category products (non-subcategories) - FIXED
useEffect(() => {
if (paginatedCategoryData && selectedCategory && !isSubCategory) {
console.log("Paginated category data:", paginatedCategoryData);
@@ -235,6 +213,7 @@ export default function CategoryPageClient({
return [...prevProducts, ...newProducts];
});
// FIXED: Check next_page_url instead of pagination object existence
setHasMore(!!paginatedCategoryData.pagination?.next_page_url);
} else if (currentPage === 1) {
setAllProducts([]);
@@ -273,16 +252,13 @@ export default function CategoryPageClient({
}, [paginatedSubcategoryData, currentPage, selectedCategory, isSubCategory]);
const loadMoreData = useCallback(() => {
if (!hasMore || categoryPaginatedFetching || subcategoryPaginatedLoading)
if (!hasMore || categoryPaginatedFetching || subcategoryPaginatedLoading) {
console.log("Cannot load more:", { hasMore, categoryPaginatedFetching, subcategoryPaginatedLoading });
return;
console.log("Loading more, page:", currentPage + 1);
}
console.log("Loading more, current page:", currentPage, "next page:", currentPage + 1);
setCurrentPage((prevPage) => prevPage + 1);
}, [
hasMore,
categoryPaginatedFetching,
subcategoryPaginatedLoading,
currentPage,
]);
}, [hasMore, categoryPaginatedFetching, subcategoryPaginatedLoading, currentPage]);
const isLoading =
categoriesLoading ||
@@ -318,9 +294,7 @@ export default function CategoryPageClient({
return products.length || 0;
}, [paginatedCategoryData, products, isSubCategory, selectedCategory]);
const handlePriceSortChange = (
sortType: "none" | "lowToHigh" | "highToLow"
) => {
const handlePriceSortChange = (sortType: "none" | "lowToHigh" | "highToLow") => {
setPriceSort(sortType);
};
@@ -376,7 +350,7 @@ export default function CategoryPageClient({
);
};
const pageTitle = selectedCategory?.name || "Kategori";
const pageTitle = selectedCategory?.name || t("category");
const handleFilterChange = (key: string, value: number) => {
setSelectedFilters((prev) => {
@@ -422,7 +396,7 @@ export default function CategoryPageClient({
<div className="space-y-6">
{hasSubcategories && subcategoriesToShow.length > 0 && (
<div>
<h3 className="text-lg font-semibold mb-3">{t.subCategories}</h3>
<h3 className="text-lg font-semibold mb-3">{t("subcategories")}</h3>
<div className="space-y-1">
{subcategoriesToShow.map((subCategory) => (
<button
@@ -442,7 +416,7 @@ export default function CategoryPageClient({
)}
<div>
<h3 className="text-lg font-semibold mb-3">{t.composition}</h3>
<h3 className="text-lg font-semibold mb-3">{t("composition")}</h3>
<div className="space-y-2">
<label className="flex items-center gap-2 cursor-pointer">
<input
@@ -452,7 +426,7 @@ export default function CategoryPageClient({
onChange={() => handlePriceSortChange("none")}
className="w-4 h-4"
/>
<span>{t.neverMind}</span>
<span>{t("neverMind")}</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
@@ -462,7 +436,7 @@ export default function CategoryPageClient({
onChange={() => handlePriceSortChange("lowToHigh")}
className="w-4 h-4"
/>
<span>{t.From_cheap_to_expensive}</span>
<span>{t("fromCheapToExpensive")}</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
@@ -472,17 +446,17 @@ export default function CategoryPageClient({
onChange={() => handlePriceSortChange("highToLow")}
className="w-4 h-4"
/>
<span>{t.From_expensive_to_cheap}</span>
<span>{t("fromExpensiveToHigh")}</span>
</label>
</div>
</div>
<PriceFilter
title="Fiyat"
title={t("price")}
priceRange={priceRange}
onPriceChange={handlePriceChange}
onInputChange={handlePriceInputChange}
translations={{ from: t.from, to: t.to }}
translations={{ from: t("from"), to: t("to") }}
/>
<Button
@@ -490,24 +464,26 @@ export default function CategoryPageClient({
className="w-full rounded-xl bg-transparent"
onClick={resetFilters}
>
{t.reset}
{t("reset")}
</Button>
</div>
);
if (isLoading) return <div>Loading...</div>;
if (isLoading) return <div>{t("loading") || "Ýüklenýär..."}</div>;
if (!selectedCategory && !categoriesLoading) {
return <div className="text-center py-8">Kategori bulunamadı</div>;
return <div className="text-center py-8">Bölüm tapylmady</div>;
}
console.log(
"Current products:",
"Current state - products:",
products.length,
"Has more:",
"hasMore:",
hasMore,
"Page:",
currentPage
"page:",
currentPage,
"isFetching:",
categoryPaginatedFetching
);
return (
@@ -515,7 +491,7 @@ export default function CategoryPageClient({
{selectedCategory && renderBreadcrumbs()}
<h2 className="text-3xl font-bold">{pageTitle}</h2>
<p className="text-gray-600">
{t.total}: {totalItems} {t.items}
{t("total")}: {totalItems} {t("items")}
</p>
<div className="flex gap-4">
@@ -537,7 +513,7 @@ export default function CategoryPageClient({
style={{ overflow: "visible" }}
loader={
<div className="flex justify-center py-4">
<div>Loading...</div>
<div>Ýüklenýär...</div>
</div>
}
>
@@ -560,7 +536,7 @@ export default function CategoryPageClient({
</div>
</InfiniteScroll>
) : (
<div className="text-center py-8 text-gray-500">{t.noResults}</div>
<div className="text-center py-8 text-gray-500">{t("nResults")}</div>
)}
</div>
</div>
@@ -572,19 +548,19 @@ export default function CategoryPageClient({
className="sm:hidden fixed bottom-20 right-4 rounded-xl font-bold gap-2 z-10 shadow-lg"
size="lg"
>
{t.filter}
{t("filter")}
<SlidersHorizontal className="h-5 w-5" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-[290px] p-0">
<SheetHeader className="p-4 border-b">
<SheetTitle>{t.filter}</SheetTitle>
<SheetTitle>{t("filter")}</SheetTitle>
<button
onClick={() => setIsOpen(false)}
className="absolute top-4 right-4 rounded-md ring-offset-background transition-opacity hover:opacity-100"
>
<X className="h-4 w-4" />
<span className="sr-only">Kapat</span>
<span className="sr-only">Ýap</span>
</button>
</SheetHeader>
<ScrollArea className="h-[calc(100vh-80px)] p-4">

0
app/[locale]/category/[slug]/ui/CategoryContent.tsx → features/category/components/CategoryContent.tsx
View File

3
lib/hooks/useCategories.ts → features/category/hooks/useCategories.ts
View File

@@ -92,8 +92,6 @@ export function useAllCategoryProducts(
})
}
// Get products from category and children WITH pagination (mimics RTK getAllCategoryProductsPaginated)
export function useAllCategoryProductsPaginated(
category: Category | undefined,
@@ -158,4 +156,3 @@ export function useAllCategoryProductsPaginated(
enabled: options?.enabled !== false && !!category,
})
}

0
lib/hooks/useAddresses.ts → features/category/types.ts
View File

0
lib/hooks/useFavorites.ts → features/favorites/hooks/useFavorites.ts
View File

0
lib/hooks/useRegions.ts → features/favorites/types.ts
View File

0
components/home/Carousel.tsx → features/home/components/Carousel.tsx
View File

64
components/home/CategoryGrid.tsx → features/home/components/CategoryGrid.tsx
View File

@@ -1,26 +1,34 @@
"use client"
import Image from "next/image"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import type { Category } from "@/lib/types/api"
"use client";
import Image from "next/image";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import type { Category } from "@/lib/types/api";
type Props = {
categories: Category[] | undefined
isLoading: boolean
isError: boolean
locale: string
title: string
}
categories: Category[] | undefined;
isLoading: boolean;
isError: boolean;
locale: string;
title: string;
};
export default function CategoryGrid({ categories, isLoading, isError, locale, title }: Props) {
export default function CategoryGrid({
categories,
isLoading,
isError,
locale,
title,
}: Props) {
if (isError) {
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<h2 className="text-xl font-semibold mb-4">{title}</h2>
<p className="text-red-600">Failed to load categories. Please try again.</p>
<p className="text-red-600">
Failed to load categories. Please try again.
</p>
</section>
)
);
}
if (isLoading) {
@@ -36,7 +44,7 @@ export default function CategoryGrid({ categories, isLoading, isError, locale, t
))}
</div>
</section>
)
);
}
return (
@@ -44,24 +52,28 @@ export default function CategoryGrid({ categories, isLoading, isError, locale, t
<h2 className="text-xl font-semibold mb-4">{title}</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
{categories?.map((cat) => (
<Link key={cat.id} href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}>
<Link
key={cat.id}
href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
>
<Card className="hover:shadow-md border-none shadow-none p-0 gap-2 transition-all cursor-pointer">
<div className="relative w-full h-36 overflow-hidden rounded-lg">
<Image
src={cat.media?.[0]?.images_400x400 || "/placeholder.svg"}
alt={cat.name}
fill
className="object-contain"
/>
<Image
src={cat.media?.[0]?.images_400x400 || "/placeholder.svg"}
alt={cat.name}
fill
className="object-contain"
/>
</div>
<CardContent className="py-2">
<p className="text-sm font-medium text-gray-800 truncate text-center">{cat.name}</p>
<p className="text-sm font-medium text-gray-800 truncate text-center">
{cat.name}
</p>
</CardContent>
</Card>
</Link>
))}
</div>
</section>
)
);
}

118
features/home/components/HomePage.tsx Normal file
View File

@@ -0,0 +1,118 @@
"use client";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import HeroCarousel from "./Carousel";
import CategoryGrid from "./CategoryGrid";
import CollectionSection from "./ProductGrid";
import { useCategories, useCarousels, useCollections } from "@/lib/hooks";
export default function HomePage() {
const locale = useLocale();
const t = useTranslations("common");
const [mounted, setMounted] = useState(false);
const [visibleCount, setVisibleCount] = useState(10);
const {
data: categories,
isLoading: categoriesLoading,
isError: categoriesError,
} = useCategories();
const { data: carousels, isLoading: carouselsLoading } = useCarousels();
const {
data: collections,
isLoading: collectionsLoading,
isError: collectionsError,
} = useCollections();
useEffect(() => setMounted(true), []);
const loadMore = () => {
if (collections && visibleCount < collections.length) {
setVisibleCount((prev) => Math.min(prev + 10, collections.length));
}
};
if (!mounted) return <div className="p-8">Loading...</div>;
const carouselItems =
carousels?.map((carousel) => ({
title: carousel.title || "",
image: carousel.image || carousel.thumbnail,
url: carousel.link || null,
})) || [];
const visibleCollections = collections?.slice(0, visibleCount) || [];
const hasMore = collections ? visibleCount < collections.length : false;
return (
<div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
{!carouselsLoading && carouselItems.length > 0 && (
<HeroCarousel items={carouselItems} />
)}
<CategoryGrid
categories={categories}
isLoading={categoriesLoading}
isError={categoriesError}
locale={locale}
title={t("categories")}
/>
{collectionsError ? (
<section className="bg-white rounded-2xl shadow-sm p-6">
<p className="text-red-600">
Failed to load collections. Please try again.
</p>
</section>
) : collectionsLoading ? (
<div className="space-y-8">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="bg-white rounded-2xl shadow-sm p-6">
<div className="h-8 bg-gray-200 rounded w-48 mb-4 animate-pulse" />
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, j) => (
<div
key={j}
className="h-64 bg-gray-200 rounded-lg animate-pulse"
/>
))}
</div>
</div>
))}
</div>
) : (
<InfiniteScroll
dataLength={visibleCollections.length}
next={loadMore}
hasMore={hasMore}
loader={
<div className="text-center py-8">
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent"></div>
<p className="text-gray-500 mt-2">Loading more collections...</p>
</div>
}
endMessage={
<div className="text-center py-8">
<p className="text-gray-600">✓ All collections loaded</p>
</div>
}
scrollThreshold={0.8}
>
<div className="space-y-8">
{visibleCollections.map((collection) => (
<CollectionSection
key={collection.id}
collection={collection}
locale={locale}
/>
))}
</div>
</InfiniteScroll>
)}
</div>
);
}

67
components/home/ProductGrid.tsx → features/home/components/ProductGrid.tsx
View File

@@ -1,43 +1,43 @@
"use client"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronRight } from "lucide-react"
import ProductCard from "@/components/ProductCard"
import { Skeleton } from "@/components/ui/skeleton"
import { useCollectionProducts } from "@/lib/hooks"
import type { Collection } from "@/lib/types/api"
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { ChevronRight } from "lucide-react";
import ProductCard from "@/components/ProductCard";
import { Skeleton } from "@/components/ui/skeleton";
import { useCollectionProducts } from "@/lib/hooks";
import type { Collection } from "@/lib/types/api";
type Props = {
collection: Collection
locale: string
}
collection: Collection;
locale: string;
};
export default function CollectionSection({ collection, locale }: Props) {
const router = useRouter()
const [shouldRender, setShouldRender] = useState(true)
const router = useRouter();
const [shouldRender, setShouldRender] = useState(true);
const {
data: productsData,
isLoading,
isError
} = useCollectionProducts(collection.id, { enabled: shouldRender })
isError,
} = useCollectionProducts(collection.id, { enabled: shouldRender });
// Determine if section should render based on products
useEffect(() => {
if (!isLoading && productsData) {
const hasProducts = productsData.data && productsData.data.length > 0
setShouldRender(hasProducts)
const hasProducts = productsData.data && productsData.data.length > 0;
setShouldRender(hasProducts);
}
}, [isLoading, productsData])
}, [isLoading, productsData]);
// Don't render if no products after loading
if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
return null
return null;
}
const handleTitleClick = () => {
router.push(`/${locale}/collections/${collection.id}`)
}
router.push(`/${locale}/collections/${collection.id}`);
};
// Show skeleton while loading
if (isLoading) {
@@ -53,16 +53,16 @@ export default function CollectionSection({ collection, locale }: Props) {
))}
</div>
</section>
)
);
}
// Show error state
if (isError) {
return null // Silently skip errored collections
return null; // Silently skip errored collections
}
// Slice to show only first 4 products
const displayProducts = productsData?.data.slice(0, 4) || []
const displayProducts = productsData?.data.slice(0, 4) || [];
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
@@ -79,22 +79,25 @@ export default function CollectionSection({ collection, locale }: Props) {
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
{displayProducts.map((product) => {
// Extract first media image or use placeholder
const firstImage = product.media?.[0]?.images_800x800 ||
product.media?.[0]?.images_720x720 ||
product.media?.[0]?.thumbnail ||
"/placeholder-product.jpg"
const firstImage =
product.media?.[0]?.images_800x800 ||
product.media?.[0]?.images_720x720 ||
product.media?.[0]?.thumbnail ||
"/placeholder-product.jpg";
// Format price
const formattedPrice = product.price_amount
? `${parseFloat(product.price_amount).toFixed(2)} TMT`
: "Price not available"
: "Price not available";
return (
<ProductCard
key={product.id}
id={product.id}
name={product.name}
price={product.price_amount ? parseFloat(product.price_amount) : null}
price={
product.price_amount ? parseFloat(product.price_amount) : null
}
struct_price_text={formattedPrice}
images={[firstImage]}
is_favorite={false}
@@ -104,9 +107,9 @@ export default function CollectionSection({ collection, locale }: Props) {
width={250}
button={false}
/>
)
);
})}
</div>
</section>
)
);
}

151
features/home/hooks/useCollections.ts Normal file
View File

@@ -0,0 +1,151 @@
import { useQuery, useInfiniteQuery } from "@tanstack/react-query";
import { apiClient } from "@/lib/api";
import type { Collection, Product, PaginatedResponse } from "@/lib/types/api";
// Get ALL collections (fetch all pages)
export function useCollections(options?: { enabled?: boolean }) {
return useQuery({
queryKey: ["collections"],
queryFn: async () => {
const allCollections: Collection[] = [];
let currentPage = 1;
let hasMorePages = true;
while (hasMorePages) {
const response = await apiClient.get<PaginatedResponse<Collection>>(
"/collections",
{ params: { page: currentPage, perPage: 50 } }
);
const collections = response.data.data || [];
allCollections.push(...collections);
// Check if there are more pages
const pagination = response.data.pagination;
if (pagination && pagination.next_page_url) {
currentPage++;
} else {
hasMorePages = false;
}
}
return allCollections;
},
enabled: options?.enabled !== false,
staleTime: 1000 * 60 * 30, // 30 minutes
});
}
// Get single collection by ID
export function useCollection(
id: number | string,
options?: { enabled?: boolean }
) {
return useQuery({
queryKey: ["collection", id],
queryFn: async () => {
const response = await apiClient.get<Collection>(`/collections/${id}`);
return response.data;
},
enabled: options?.enabled !== false && !!id,
staleTime: 1000 * 60 * 15,
});
}
// Get ALL products for a collection (fetch all pages)
export function useCollectionProducts(
collectionId: number | string,
options?: { enabled?: boolean }
) {
return useQuery({
queryKey: ["collection", collectionId, "products"],
queryFn: async () => {
const allProducts: Product[] = [];
let currentPage = 1;
let hasMorePages = true;
while (hasMorePages) {
const response = await apiClient.get<PaginatedResponse<Product>>(
`/collections/${collectionId}/products`,
{ params: { page: currentPage, perPage: 50 } }
);
const products = response.data.data || [];
allProducts.push(...products);
// Check if there are more pages
const pagination = response.data.pagination;
if (pagination && pagination.next_page_url) {
currentPage++;
} else {
hasMorePages = false;
}
}
return {
data: allProducts,
isEmpty: allProducts.length === 0,
};
},
enabled: options?.enabled !== false && !!collectionId,
});
}
// Check if collection has products (limit=1 for efficiency)
export function useCollectionHasProducts(
collectionId: number | string,
options?: { enabled?: boolean }
) {
return useQuery({
queryKey: ["collection", collectionId, "has-products"],
queryFn: async () => {
const response = await apiClient.get<PaginatedResponse<Product>>(
`/collections/${collectionId}/products`,
{ params: { perPage: 1 } }
);
return {
hasProducts: response.data.data && response.data.data.length > 0,
};
},
enabled: options?.enabled !== false && !!collectionId,
staleTime: 1000 * 60 * 5, // 5 minutes
});
}
// Get collection products with infinite scroll (recommended for UI)
export function useCollectionProductsInfinite(
collectionId: number | string,
options?: { enabled?: boolean; perPage?: number }
) {
const perPage = options?.perPage || 6;
return useInfiniteQuery({
queryKey: ["collection", collectionId, "products-infinite", perPage],
queryFn: async ({ pageParam = 1 }) => {
const response = await apiClient.get<PaginatedResponse<Product>>(
`/collections/${collectionId}/products`,
{
params: {
page: pageParam,
perPage,
},
}
);
return {
data: response.data.data || [],
pagination: response.data.pagination,
isEmpty: !response.data.data || response.data.data.length === 0,
};
},
getNextPageParam: (lastPage) => {
if (lastPage.pagination?.next_page_url) {
// Extract page number from URL or increment
const currentPage = lastPage.pagination.page || 1;
return currentPage + 1;
}
return undefined;
},
enabled: options?.enabled !== false && !!collectionId,
initialPageParam: 1,
});
}

0
lib/hooks/useMedia.ts → features/home/hooks/useMedia.ts
View File

0
features/home/types.ts Normal file
View File

0
app/[locale]/orders/orders-content.tsx → features/orders/components/orders-content.tsx
View File

218
app/[locale]/orders/orders-page-client.tsx → features/orders/components/orders-page-client.tsx
View File

@@ -1,12 +1,12 @@
"use client"
"use client";
import { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useState } from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
Dialog,
DialogContent,
@@ -14,34 +14,26 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"
import { useOrders, useCancelOrder } from "@/lib/hooks"
import type { Order } from "@/lib/types/api"
} from "@/components/ui/dialog";
import { useToast } from "@/hooks/use-toast";
import { useOrders, useCancelOrder } from "@/lib/hooks";
import type { Order } from "../types";
interface OrdersPageProps {
locale?: string
}
export default function OrdersPageClient() {
const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
const [orderToCancel, setOrderToCancel] = useState<Order | null>(null);
const { toast } = useToast();
export default function OrdersPageClient({ locale }: OrdersPageProps) {
const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false)
const [orderToCancel, setOrderToCancel] = useState<Order | null>(null)
const { toast } = useToast()
const { data: orders, isLoading, isError, error } = useOrders()
const { mutate: cancelOrder, isPending: isCancellingOrder } = useCancelOrder()
const { data: orders, isLoading, isError, error } = useOrders();
const { mutate: cancelOrder, isPending: isCancellingOrder } = useCancelOrder();
const t = {
orders: "Заказы",
myOrders: "Мои заказы",
active: "Активные",
completed: "Завершенные",
activeOrders: "Активные заказы",
completedOrders: "Завершенные заказы",
cancelOrder: "Отменить заказ",
keepOrder: "Оставить заказ",
areYouSure: "Вы уверены?",
cancelConfirmation: "Вы уверены, что хотите отменить этот заказ? Это действие нельзя отменить.",
cancelConfirmation: "Вы уверены, что хотите отменить этот заказ?",
cancelling: "Отмена...",
orderNumber: "Заказ №",
ordered: "Заказано",
@@ -52,70 +44,80 @@ export default function OrdersPageClient({ locale }: OrdersPageProps) {
noOrders: "У вас пока нет заказов",
noActiveOrders: "У вас нет активных заказов",
noCompletedOrders: "У вас нет завершенных заказов",
loadError: "Не удалось загрузить заказы. Пожалуйста, попробуйте позже.",
loadError: "Не удалось загрузить заказы",
orderCancelled: "Заказ отменен",
orderCancelledDescription: "Ваш заказ был успешно отменен",
error: "Ошибка",
cannotCancelShipped: "Нельзя отменить заказ, который уже отправлен или доставлен",
}
status: "Статус",
deliveryTime: "Время доставки",
deliveryDate: "Дата доставки",
address: "Адрес",
paymentMethod: "Способ оплаты",
};
const handleCancelOrder = (order: Order) => {
// Check if order can be cancelled
if (order.status === "shipped" || order.status === "delivered") {
toast({
title: t.error,
description: t.cannotCancelShipped,
variant: "destructive",
})
return
}
setOrderToCancel(order)
setIsCancelDialogOpen(true)
}
setOrderToCancel(order);
setIsCancelDialogOpen(true);
};
const confirmCancelOrder = () => {
if (!orderToCancel) return
if (!orderToCancel) return;
cancelOrder(orderToCancel.id, {
onSuccess: () => {
toast({
title: t.orderCancelled,
description: t.orderCancelledDescription,
})
setIsCancelDialogOpen(false)
setOrderToCancel(null)
});
setIsCancelDialogOpen(false);
setOrderToCancel(null);
},
onError: (error: any) => {
toast({
title: t.error,
description: error.message || "Не удалось отменить заказ",
variant: "destructive",
})
});
},
})
}
});
};
const getStatusBadge = (status: Order["status"]) => {
const statusMap: Record<string, { label: string; variant: string; className?: string }> = {
pending: { label: "Ожидание", variant: "outline" },
processing: { label: "Обработка", variant: "secondary" },
shipped: { label: "Отправлен", variant: "default" },
delivered: { label: "Доставлен", variant: "default", className: "bg-green-600" },
cancelled: { label: "Отменен", variant: "destructive" },
const getStatusBadge = (status: string) => {
const lowerStatus = status.toLowerCase();
if (lowerStatus.includes("ожидается") || lowerStatus.includes("pending")) {
return <Badge variant="outline">{status}</Badge>;
}
if (lowerStatus.includes("обработка") || lowerStatus.includes("processing")) {
return <Badge variant="secondary">{status}</Badge>;
}
if (lowerStatus.includes("отправлен") || lowerStatus.includes("shipped")) {
return <Badge>{status}</Badge>;
}
if (lowerStatus.includes("доставлен") || lowerStatus.includes("delivered")) {
return <Badge className="bg-green-600">{status}</Badge>;
}
if (lowerStatus.includes("отменен") || lowerStatus.includes("cancelled")) {
return <Badge variant="destructive">{status}</Badge>;
}
const statusInfo = statusMap[status] || { label: status, variant: "default" }
return <Badge>{status}</Badge>;
};
return (
<Badge variant={statusInfo.variant as any} className={statusInfo.className}>
{statusInfo.label}
</Badge>
)
}
const isActiveOrder = (status: string) => {
const lower = status.toLowerCase();
return lower.includes("ожидается") || lower.includes("обработка") || lower.includes("отправлен") ||
lower.includes("pending") || lower.includes("processing") || lower.includes("shipped");
};
const activeOrders = orders?.filter((o) => ["pending", "processing", "shipped"].includes(o.status)) || []
const completedOrders = orders?.filter((o) => ["delivered", "cancelled"].includes(o.status)) || []
const activeOrders = orders?.filter((o) => isActiveOrder(o.status)) || [];
const completedOrders = orders?.filter((o) => !isActiveOrder(o.status)) || [];
const calculateTotal = (order: Order) => {
return order.orderItems.reduce((sum, item) => {
return sum + (parseFloat(item.unit_price_amount) * item.quantity);
}, 0);
};
if (isLoading) {
return (
@@ -130,7 +132,7 @@ export default function OrdersPageClient({ locale }: OrdersPageProps) {
</div>
</div>
</div>
)
);
}
if (isError) {
@@ -139,10 +141,9 @@ export default function OrdersPageClient({ locale }: OrdersPageProps) {
<h1 className="text-3xl font-bold mb-6">{t.myOrders}</h1>
<div className="bg-red-50 p-4 rounded-lg border border-red-200">
<p className="text-red-600">{t.loadError}</p>
{error && <p className="text-sm text-red-500 mt-2">{error.message}</p>}
</div>
</div>
)
);
}
if (!orders || orders.length === 0) {
@@ -153,7 +154,7 @@ export default function OrdersPageClient({ locale }: OrdersPageProps) {
<p className="text-2xl text-gray-400">{t.noOrders}</p>
</div>
</div>
)
);
}
return (
@@ -184,6 +185,7 @@ export default function OrdersPageClient({ locale }: OrdersPageProps) {
onCancel={handleCancelOrder}
isCancelling={isCancellingOrder}
getStatusBadge={getStatusBadge}
calculateTotal={calculateTotal}
translations={t}
showCancelButton
/>
@@ -206,6 +208,7 @@ export default function OrdersPageClient({ locale }: OrdersPageProps) {
onCancel={handleCancelOrder}
isCancelling={isCancellingOrder}
getStatusBadge={getStatusBadge}
calculateTotal={calculateTotal}
translations={t}
showCancelButton={false}
/>
@@ -238,16 +241,17 @@ export default function OrdersPageClient({ locale }: OrdersPageProps) {
</DialogContent>
</Dialog>
</div>
)
);
}
interface OrderCardProps {
order: Order
onCancel: (order: Order) => void
isCancelling: boolean
getStatusBadge: (status: Order["status"]) => React.ReactNode
translations: any
showCancelButton: boolean
order: Order;
onCancel: (order: Order) => void;
isCancelling: boolean;
getStatusBadge: (status: string) => React.ReactNode;
calculateTotal: (order: Order) => number;
translations: any;
showCancelButton: boolean;
}
function OrderCard({
@@ -255,11 +259,11 @@ function OrderCard({
onCancel,
isCancelling,
getStatusBadge,
calculateTotal,
translations: t,
showCancelButton,
}: OrderCardProps) {
const canCancel =
showCancelButton && order.status !== "shipped" && order.status !== "delivered" && order.status !== "cancelled"
const total = calculateTotal(order);
return (
<Card className="p-4 flex flex-col justify-between">
@@ -271,38 +275,36 @@ function OrderCard({
{getStatusBadge(order.status)}
</div>
<div className="mb-3 space-y-1">
<p className="text-sm text-gray-600">
{t.ordered}: {new Date(order.created_at).toLocaleDateString()}
<div className="mb-3 space-y-1 text-sm">
<p className="text-gray-600">
<span className="font-medium">{t.deliveryTime}:</span> {order.delivery_time}
</p>
<p className="text-gray-600">
<span className="font-medium">{t.deliveryDate}:</span>{" "}
{new Date(order.delivery_at).toLocaleDateString()}
</p>
<p className="text-gray-600">
<span className="font-medium">{t.address}:</span> {order.customer_address}
</p>
<p className="text-gray-600">
<span className="font-medium">{t.paymentMethod}:</span> {order.payment_type}
</p>
{order.estimated_delivery && (
<p className="text-sm text-gray-600">
{t.estimatedDelivery}: {order.estimated_delivery}
</p>
)}
{!showCancelButton && order.updated_at && (
<p className="text-sm text-gray-600">
{t.completed}: {new Date(order.updated_at).toLocaleDateString()}
</p>
)}
</div>
<div className="space-y-2 mb-3 max-h-48 overflow-y-auto">
{order.items?.map((item) => (
<div key={item.id} className="flex items-start gap-3">
{item.product?.image && (
<Image
src={item.product.image || "/placeholder.svg"}
alt={item.product.name}
width={50}
height={50}
className="rounded object-cover"
/>
)}
{order.orderItems.map((item, index) => (
<div key={index} className="flex items-start gap-3">
<Image
src={item.product.images_400x400 || item.product.thumbnail}
alt={item.product.name}
width={50}
height={50}
className="rounded object-cover"
/>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium line-clamp-2">{item.product?.name}</p>
<p className="text-sm font-medium line-clamp-2">{item.product.name}</p>
<p className="text-xs text-gray-500">
{t.quantity}: {item.quantity}
{t.quantity}: {item.quantity} × {item.unit_price_amount} TMT
</p>
</div>
</div>
@@ -312,12 +314,12 @@ function OrderCard({
<div className="border-t pt-3">
<div className="flex justify-between font-semibold">
<span>{t.total}</span>
<span>{order.total_formatted || `$${order.total}`}</span>
<span>{total.toFixed(2)} TMT</span>
</div>
</div>
</div>
{canCancel && (
{showCancelButton && (
<div className="mt-4">
<Button
variant="destructive"
@@ -330,5 +332,5 @@ function OrderCard({
</div>
)}
</Card>
)
);
}

78
features/orders/hooks/useOrders.ts Normal file
View File

@@ -0,0 +1,78 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "@/lib/api";
import type { Order, OrdersResponse, CreateOrderRequest } from "../types";
export function useOrders(options?: { page?: number; perPage?: number }) {
return useQuery<Order[]>({
queryKey: ["orders", options?.page],
queryFn: async () => {
const response = await apiClient.get<OrdersResponse>("/orders", {
params: {
page: options?.page || 1,
per_page: options?.perPage || 20,
},
});
// API response'dan data array'ini döndür
return response.data.data;
},
staleTime: 1000 * 60 * 5,
retry: 1,
});
}
export function useOrder(id: number | string) {
return useQuery<Order | null>({
queryKey: ["order", id],
queryFn: async () => {
const response = await apiClient.get(`/orders/${id}`);
return response.data.data || null;
},
enabled: !!id,
staleTime: 1000 * 60 * 5,
retry: 1,
});
}
export function useCreateOrder() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (orderData: CreateOrderRequest) => {
const formData = new URLSearchParams();
Object.entries(orderData).forEach(([key, value]) => {
if (value !== null && value !== undefined) {
formData.append(key, String(value));
}
});
const response = await apiClient.post("/orders", formData, {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
});
return response.data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["orders"] });
queryClient.invalidateQueries({ queryKey: ["cart"] });
},
});
}
export function useCancelOrder() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (orderId: number) => {
const response = await apiClient.delete(`/orders/${orderId}`);
return response.data;
},
onSuccess: (_, orderId) => {
queryClient.invalidateQueries({ queryKey: ["orders"] });
queryClient.invalidateQueries({ queryKey: ["order", orderId] });
},
});
}

59
features/orders/types.ts Normal file
View File

@@ -0,0 +1,59 @@
export interface OrderProduct {
id: number;
name: string;
thumbnail: string;
images_400x400: string;
images_800x800: string;
images_1200x1200: string;
}
export interface OrderItem {
product: OrderProduct;
order: {
id: number;
};
quantity: number;
unit_price_amount: string;
}
export interface Order {
id: number;
status: string;
shipping_method: string;
notes: string | null;
customer_name: string;
customer_phone: string;
customer_address: string;
delivery_time: string;
delivery_at: string;
region: string;
user_id: number;
province_id: number | null;
payment_type: string;
orderItems: OrderItem[];
}
export interface OrdersResponse {
message: string;
data: Order[];
pagination: {
page: number;
perPage: number;
count: number;
first_page_url: string;
next_page_url: string | null;
prev_page_url: string | null;
};
}
export interface CreateOrderRequest {
customer_name: string;
customer_phone: string;
customer_address: string;
shipping_method: string;
payment_type_id: number;
delivery_time?: string;
delivery_at?: string;
region: string;
note?: string;
}

4
app/[locale]/product/[slug]/ProductPageContent.tsx → features/products/components/ProductPageContent.tsx
View File

@@ -9,8 +9,8 @@ import { Card } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Skeleton } from "@/components/ui/skeleton"
import { useProductsBySlug } from "@/lib/hooks/useProducts"
import { useAddToCart, useUpdateCartItemQuantity, useCart } from "@/lib/hooks/useCart"
import { useProductsBySlug } from "@/features/products/hooks/useProducts"
import { useAddToCart, useUpdateCartItemQuantity, useCart } from "@/features/cart/hooks/useCart"
import { toast } from "sonner"
interface ProductDetailProps {

0
app/[locale]/product/[slug]/product-content.tsx → features/products/components/product-content.tsx
View File

0
lib/hooks/useProducts.ts → features/products/hooks/useProducts.ts
View File

0
features/products/types.ts Normal file
View File

61
app/[locale]/me/client-page.tsx → features/profile/components/client-page.tsx
View File

@@ -1,33 +1,39 @@
"use client"
import { LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useUserProfile } from "@/lib/hooks"
import { Skeleton } from "@/components/ui/skeleton"
"use client";
import { LogOut } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useUserProfile } from "@/lib/hooks";
import { clearAuthToken } from "@/lib/api";
interface ProfilePageProps {
params: Promise<{ locale: string }>
params: Promise<{ locale: string }>;
}
export default function ClientProfilePage(props: ProfilePageProps) {
const { data: user, isLoading, error } = useUserProfile()
const { data: user, isLoading, error } = useUserProfile();
const translations = {
profile: "Профиль",
personalInfo: "Личная информация",
profileDescription: "Ваши данные профиля",
firstName: "Имя",
lastName: "Фамилия",
phone: "Номер телефона",
email: "Email",
address: "Адрес",
logout: "Выйти",
loading: "Загрузка...",
}
errorLoading: "Не удалось загрузить профиль",
tryAgain: "Попробовать снова",
};
const handleLogout = () => {
// Clear auth token
window.location.href = "/"
}
clearAuthToken();
window.location.href = "/";
};
if (isLoading) {
return (
@@ -50,7 +56,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
</Card>
</div>
</div>
)
);
}
if (error) {
@@ -58,12 +64,12 @@ export default function ClientProfilePage(props: ProfilePageProps) {
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
<Card className="w-full max-w-md">
<CardContent className="pt-6 text-center">
<p className="text-red-600 mb-4">Failed to load profile</p>
<Button onClick={() => window.location.reload()}>Try Again</Button>
<p className="text-red-600 mb-4">{translations.errorLoading}</p>
<Button onClick={() => window.location.reload()}>{translations.tryAgain}</Button>
</CardContent>
</Card>
</div>
)
);
}
return (
@@ -73,41 +79,36 @@ export default function ClientProfilePage(props: ProfilePageProps) {
<Card className="shadow-lg mb-4">
<CardHeader>
<CardTitle>Личная информация</CardTitle>
<CardDescription>Ваши данные профиля</CardDescription>
<CardTitle>{translations.personalInfo}</CardTitle>
<CardDescription>{translations.profileDescription}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{user && (
<>
{/* First Name */}
<div className="space-y-2">
<Label htmlFor="firstName">{translations.firstName}</Label>
<Input id="firstName" value={user.first_name || ""} disabled className="bg-gray-50" />
</div>
{/* Last Name */}
<div className="space-y-2">
<Label htmlFor="lastName">{translations.lastName}</Label>
<Input id="lastName" value={user.last_name || ""} disabled className="bg-gray-50" />
</div>
{/* Phone */}
<div className="space-y-2">
<Label htmlFor="phone">{translations.phone}</Label>
<Input id="phone" value={user.phone || ""} disabled className="bg-gray-50" />
<Input id="phone" value={user.phone_number || ""} disabled className="bg-gray-50" />
</div>
{/* Email */}
<div className="space-y-2">
<Label htmlFor="email">{translations.email}</Label>
<Input id="email" value={user.email || ""} disabled className="bg-gray-50" />
<Label htmlFor="address">{translations.address}</Label>
<Input id="address" value={user.address || ""} disabled className="bg-gray-50" />
</div>
</>
)}
</CardContent>
</Card>
{/* Logout Button */}
<Button
onClick={handleLogout}
variant="destructive"
@@ -119,5 +120,5 @@ export default function ClientProfilePage(props: ProfilePageProps) {
</Button>
</div>
</div>
)
);
}

0
app/[locale]/me/profile-content.tsx → features/profile/components/profile-content.tsx
View File

37
features/profile/hooks/useUserProfile.ts Normal file
View File

@@ -0,0 +1,37 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "@/lib/api";
import { userStore } from "../userStore";
import type { ProfileResponse, UpdateProfileRequest, UpdateProfileResponse } from "../types";
export const useUserProfile = () => {
return useQuery<ProfileResponse["data"]>({
queryKey: ["user-profile"],
queryFn: async () => {
const response = await apiClient.get<ProfileResponse>("/profile");
const userData = response.data.data;
// Store'a kaydet
userStore.setUser(userData);
return userData;
},
staleTime: 5 * 60 * 1000,
retry: 1,
});
};
export const useUpdateProfile = () => {
const queryClient = useQueryClient();
return useMutation<UpdateProfileResponse["data"], Error, UpdateProfileRequest>({
mutationFn: async (profileData) => {
const response = await apiClient.post<UpdateProfileResponse>("/profile", profileData);
return response.data.data;
},
onSuccess: (data) => {
userStore.setUser(data);
queryClient.setQueryData(["user-profile"], data);
queryClient.invalidateQueries({ queryKey: ["user-profile"] });
},
});
};

23
features/profile/types.ts Normal file
View File

@@ -0,0 +1,23 @@
export interface UserProfile {
first_name: string;
last_name: string;
phone_number: string;
address: string;
}
export interface ProfileResponse {
message: string;
data: UserProfile;
}
export interface UpdateProfileRequest {
first_name?: string;
last_name?: string;
phone_number?: string;
address?: string;
}
export interface UpdateProfileResponse {
message: string;
data: UserProfile;
}

29
features/profile/userStore.ts Normal file
View File

@@ -0,0 +1,29 @@
import type { UserProfile } from "./types";
// In-memory store (session-based, no persistence)
class UserStore {
private user: UserProfile | null = null;
setUser(user: UserProfile | null) {
this.user = user;
}
getUser(): UserProfile | null {
return this.user;
}
clearUser() {
this.user = null;
}
getOrderData(): { customer_name: string; customer_phone: string } | null {
if (!this.user) return null;
return {
customer_name: `${this.user.first_name} ${this.user.last_name}`.trim(),
customer_phone: this.user.phone_number,
};
}
}
export const userStore = new UserStore();

0
i18n.ts → i18n/i18n.ts
View File

0
messages/ru.json → i18n/messages/ru.json
View File

0
messages/tm.json → i18n/messages/tm.json
View File

58
lib/config/api-endpoints.ts
View File

@@ -1,58 +0,0 @@
/**
* API Endpoints Configuration
* Centralized mapping of all API endpoints
*/
export const API_ENDPOINTS = {
// Products
products: "/api/v1/products",
productDetail: (id: string | number) => `/api/v1/products/${id}`,
productsByCategory: (categoryId: string | number) => `/api/v1/categories/${categoryId}/products`,
productsByBrand: (brandId: string | number) => `/api/v1/brands/${brandId}/products`,
// Categories
categories: "/api/v1/categories",
categoryDetail: (id: string | number) => `/api/v1/categories/${id}`,
// Search & Filters
search: "/api/v1/search",
filters: "/api/v1/filters",
// Cart
cart: "/api/v1/carts",
cartItems: "/api/v1/carts",
cartItem: (itemId: string | number) => `/api/v1/carts/${itemId}`,
// Favorites
favorites: "/api/v1/favorites",
favoriteDetail: (productId: string | number) => `/api/v1/favorites/${productId}`,
// Orders
orders: "/api/v1/orders",
orderDetail: (id: string | number) => `/api/v1/orders/${id}`,
cancelOrder: (id: string | number) => `/api/v1/orders/${id}/cancel`,
// Regions & Addresses
regions: "/api/v1/regions",
addresses: "/api/v1/addresses",
// Payment & Shipping
paymentTypes: "/api/v1/order-payments",
shippingMethods: "/api/v1/shipping-methods",
// Profile
profile: "/api/v1/profile",
profileMe: "/api/v1/me",
// Auth
guestToken: "/api/v1/auth/guest-token",
verifyCode: "/api/v1/auth/verify-code",
// Media
banners: "/api/v1/media/banners",
// Forms
newsletter: "/api/v1/forms/newsletter-subscription",
contactUs: "/api/v1/forms/contact-us",
openStore: "/api/v1/forms/open-store",
} as const

22
lib/hooks/index.ts
View File

@@ -1,14 +1,14 @@
export * from "./useProducts"
export * from "./useCategories"
export * from "./useCart"
export * from "./useFavorites"
export * from "./useOrders"
export * from "../../features/products/hooks/useProducts"
export * from "../../features/category/hooks/useCategories"
export * from "../../features/cart/hooks/useCart"
export * from "../../features/favorites/hooks/useFavorites"
export * from "../../features/orders/hooks/useOrders"
export * from "./useSearch"
export * from "./useUserProfile"
export * from "../../features/profile/hooks/useUserProfile"
export * from "./useOpenStore"
export * from "./useRegions"
export * from "./useAddresses"
export * from "./usePaymentTypes"
export * from "../../features/cart/hooks/useAddresses"
export * from "../../features/cart/hooks/usePaymentTypes"
@@ -16,8 +16,8 @@ export * from "./usePaymentTypes"
export * from "./useMedia"
export * from "./useCollections"
export * from "../../features/home/hooks/useMedia"
export * from "../../features/home/hooks/useCollections"
// Export types
export type { Product, Category, Cart, CartItem, Order, Favorite, Banner } from "@/lib/types/api"

212
lib/hooks/useAuth.ts
View File

@@ -1,192 +1,160 @@
import { useMutation, useQuery } from "@tanstack/react-query"
import { apiClient, setAuthToken, clearAuthToken, setGuestToken } from "@/lib/api"
import { queryClient } from "@/lib/queryClient"
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useState, useEffect } from "react";
import { apiClient, setAuthToken, clearAuthToken, setGuestToken } from "@/lib/api";
// ==================== TYPES ====================
interface LoginCredentials {
phone_number: string
password?: string
phone_number: string;
password?: string;
}
interface RegisterData {
phone_number: string
name?: string
email?: string
phone_number: string;
name?: string;
email?: string;
}
interface VerifyTokenData {
phone_number: string
code: string
phone_number: string;
code: string;
}
interface AuthResponse {
token?: string
data?: string
user?: any
token?: string;
data?: string;
user?: {
id: string;
phone_number: string;
name?: string;
email?: string;
};
}
/**
* Guest Token alma (RTK mantığı)
*/
// ==================== AUTH STATUS ====================
const getTokenFromCookie = (name: string): string | null => {
if (typeof document === "undefined") return null;
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop()?.split(";").shift() || null;
return null;
};
export function useAuthStatus() {
const [isLoading, setIsLoading] = useState(true);
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
const authToken = getTokenFromCookie("authToken");
setIsAuthenticated(!!authToken);
setIsLoading(false);
}, []);
return {
isAuthenticated,
isLoading,
};
}
// ==================== GUEST TOKEN ====================
export function useGetGuestToken() {
return useMutation({
mutationFn: async (): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>("/auth/guest-token", {}, {
headers: {
"Content-Type": "application/json",
},
})
return response.data
const response = await apiClient.post<AuthResponse>("/auth/guest-token", {});
return response.data;
},
onSuccess: (data) => {
const token = data?.token || data?.data
const token = data?.token || data?.data;
if (token) {
setGuestToken(token)
setGuestToken(token);
}
},
onError: (error) => {
console.error("Error fetching guest token:", error)
console.error("Guest token hatası:", error);
},
})
});
}
/**
* Login mutation (RTK mantığı)
*/
// ==================== LOGIN ====================
export function useLogin() {
return useMutation({
mutationFn: async (credentials: LoginCredentials): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>("/auth/login", credentials)
return response.data
},
onSuccess: (data) => {
const token = data?.token || data?.data
if (token) {
setAuthToken(token)
apiClient.setAuthToken(token)
// Tüm cache'i temizle ve yeniden fetch et
queryClient.invalidateQueries()
}
const response = await apiClient.post<AuthResponse>("/auth/login", credentials);
return response.data;
},
onError: (error) => {
console.error("Login error:", error)
console.error("Login hatası:", error);
},
})
});
}
/**
* Register mutation (RTK mantığı)
*/
// ==================== REGISTER ====================
export function useRegister() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (userData: RegisterData): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>("/auth/register", userData)
return response.data
const response = await apiClient.post<AuthResponse>("/auth/register", userData);
return response.data;
},
onSuccess: (data) => {
const token = data?.token || data?.data
const token = data?.token || data?.data;
if (token) {
setAuthToken(token)
apiClient.setAuthToken(token)
// Tüm cache'i temizle
queryClient.invalidateQueries()
setAuthToken(token);
queryClient.invalidateQueries({ queryKey: ["auth-status"] });
}
},
onError: (error) => {
console.error("Register error:", error)
console.error("Register hatası:", error);
},
})
});
}
/**
* Token doğrulama (RTK mantığı)
*/
// ==================== VERIFY TOKEN ====================
export function useVerifyToken() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (verifyData: VerifyTokenData): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>(
"/auth/verify",
verifyData,
{
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
}
)
return response.data
const response = await apiClient.post<AuthResponse>("/auth/verify", verifyData);
return response.data;
},
onSuccess: (data) => {
const token = data?.data || data?.token
const token = data?.data || data?.token;
if (token) {
setAuthToken(token)
apiClient.setAuthToken(token)
// Tüm cache'i temizle
queryClient.invalidateQueries()
setAuthToken(token);
queryClient.invalidateQueries({ queryKey: ["auth-status"] });
}
},
onError: (error) => {
console.error("Error verifying token:", error)
console.error("Verify hatası:", error);
},
})
});
}
/**
* Logout işlemi
*/
// ==================== LOGOUT ====================
export function useLogout() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async () => {
// Backend'e logout isteği gönder (eğer endpoint varsa)
mutationFn: async (): Promise<void> => {
try {
await apiClient.post("/auth/logout")
await apiClient.post("/auth/logout");
} catch (error) {
// Logout endpoint yoksa da devam et
console.warn("Logout endpoint not available")
console.warn("Logout endpoint çalışmadı:", error);
}
},
onSuccess: () => {
clearAuthToken()
apiClient.clearAuthToken()
clearAuthToken();
queryClient.clear();
// Tüm cache'i temizle
queryClient.clear()
// Login sayfasına yönlendir
if (typeof window !== "undefined") {
window.location.href = "/login"
window.location.href = "/login";
}
},
})
}
/**
* Kullanıcı bilgilerini getir
*/
export function useUser(options?: { enabled?: boolean }) {
return useQuery({
queryKey: ["user", "me"],
queryFn: async () => {
const response = await apiClient.get("/auth/me")
return response.data
onError: (error) => {
console.error("Logout hatası:", error);
clearAuthToken();
queryClient.clear();
},
enabled: options?.enabled !== false,
staleTime: 1000 * 60 * 5, // 5 dakika
retry: false,
})
}
/**
* Authentication durumunu kontrol et
*/
export function useAuthStatus() {
const { data: user, isLoading, error } = useUser({ enabled: true })
return {
isAuthenticated: !!user && !error,
isLoading,
user,
}
});
}

108
lib/hooks/useCollections.ts
View File

@@ -1,108 +0,0 @@
import { useQuery } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
import type { Collection, Product, PaginatedResponse } from "@/lib/types/api"
// Get all collections
export function useCollections(options?: { enabled?: boolean }) {
return useQuery({
queryKey: ["collections"],
queryFn: async () => {
const response = await apiClient.get<PaginatedResponse<Collection>>("/collections")
return response.data.data || response.data
},
enabled: options?.enabled !== false,
staleTime: 1000 * 60 * 30, // 30 minutes
})
}
// Get single collection by ID
export function useCollection(id: number | string, options?: { enabled?: boolean }) {
return useQuery({
queryKey: ["collection", id],
queryFn: async () => {
const response = await apiClient.get<Collection>(`/collections/${id}`)
return response.data
},
enabled: options?.enabled !== false && !!id,
staleTime: 1000 * 60 * 15,
})
}
// Get collection products (non-paginated)
export function useCollectionProducts(
collectionId: number | string,
options?: { enabled?: boolean }
) {
return useQuery({
queryKey: ["collection", collectionId, "products"],
queryFn: async () => {
const response = await apiClient.get<PaginatedResponse<Product>>(
`/collections/${collectionId}/products`
)
const data = response.data.data || []
return {
data,
isEmpty: data.length === 0,
}
},
enabled: options?.enabled !== false && !!collectionId,
})
}
// Check if collection has products (limit=1 for efficiency)
export function useCollectionHasProducts(
collectionId: number | string,
options?: { enabled?: boolean }
) {
return useQuery({
queryKey: ["collection", collectionId, "has-products"],
queryFn: async () => {
const response = await apiClient.get<PaginatedResponse<Product>>(
`/collections/${collectionId}/products`,
{
params: { limit: 1 },
}
)
return {
hasProducts: response.data.data && response.data.data.length > 0,
}
},
enabled: options?.enabled !== false && !!collectionId,
staleTime: 1000 * 60 * 5, // 5 minutes
})
}
// Get collection products with pagination
export function useCollectionProductsPaginated(
collectionId: number | string,
options?: {
enabled?: boolean
page?: number
limit?: number
}
) {
const page = options?.page || 1
const limit = options?.limit || 6
return useQuery({
queryKey: ["collection", collectionId, "products-paginated", page, limit],
queryFn: async () => {
const response = await apiClient.get<PaginatedResponse<Product>>(
`/collections/${collectionId}/products`,
{
params: {
page,
limit,
},
}
)
const data = response.data.data || []
return {
data,
pagination: response.data.pagination || {},
isEmpty: data.length === 0,
}
},
enabled: options?.enabled !== false && !!collectionId,
})
}

66
lib/hooks/useOpenStore.ts
View File

@@ -1,38 +1,38 @@
"use client"
// "use client"
import { useMutation } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
import { API_ENDPOINTS } from "@/lib/config/api-endpoints"
// 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 OpenStoreData {
// firstName: string
// lastName: string
// email: string
// phone: string
// patentFile: File
// }
interface OpenStoreResponse {
success: boolean
message: string
}
// 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)
// 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
},
})
}
// const response = await apiClient.post<OpenStoreResponse>(API_ENDPOINTS.openStore, formData, {
// headers: {
// "Content-Type": "multipart/form-data",
// },
// })
// return response.data
// },
// })
// }

165
lib/hooks/useOrders.ts
View File

@@ -1,165 +0,0 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "@/lib/api";
import type { Order, PaginatedResponse } from "@/lib/types/api";
// Response tiplerini tanımlayalım
interface OrderResponse {
data?: Order | Order[];
[key: string]: any;
}
interface OrderActionResponse {
data?: string | Order;
[key: string]: any;
}
// Response'u transform eden yardımcı fonksiyonlar
function transformOrdersResponse(response: any): Order[] {
if (typeof response === "object" && response.data) {
return Array.isArray(response.data) ? response.data : [];
}
return [];
}
function transformOrderResponse(response: any): Order | null {
if (typeof response === "object" && response.data) {
return response.data;
}
return null;
}
function transformOrderActionResponse(
response: any,
defaultValue: string
): string | Order {
if (response && response.data) {
return response.data;
}
return defaultValue;
}
function isHtmlResponse(response: any): boolean {
return typeof response === "string" && response.includes("<!doctype html>");
}
// Orders list query
export function useOrders(options?: { page?: number; perPage?: number }) {
return useQuery({
queryKey: ["orders", options?.page],
queryFn: async () => {
const response = await apiClient.get("/orders", {
params: {
page: options?.page || 1,
per_page: options?.perPage || 20,
},
});
return transformOrdersResponse(response.data);
},
staleTime: 1000 * 60 * 5,
retry: 1,
});
}
// Single order query
export function useOrder(id: number | string) {
return useQuery({
queryKey: ["order", id],
queryFn: async () => {
const response = await apiClient.get(`/orders/${id}`);
return transformOrderResponse(response.data);
},
enabled: !!id,
staleTime: 1000 * 60 * 5,
retry: 1,
});
}
// Order times query
export function useOrderTimes() {
return useQuery({
queryKey: ["order-times"],
queryFn: async () => {
const response = await apiClient.get("/order-time");
return transformOrdersResponse(response.data);
},
staleTime: 1000 * 60 * 10,
retry: 1,
});
}
// Order payments query
export function useOrderPayments() {
return useQuery({
queryKey: ["order-payments"],
queryFn: async () => {
const response = await apiClient.get("/order-payments");
return transformOrdersResponse(response.data);
},
staleTime: 1000 * 60 * 10,
retry: 1,
});
}
// Create/Place order mutation
export function useCreateOrder() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (orderData: Record<string, any>) => {
try {
const formData = new URLSearchParams();
// Convert orderData to URLSearchParams
Object.entries(orderData).forEach(([key, value]) => {
if (value !== null && value !== undefined) {
formData.append(key, String(value));
}
});
const response = await apiClient.post("/orders", formData, {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
validateStatus: (status) => status >= 200 && status < 300,
});
// Check for HTML response
if (isHtmlResponse(response.data)) {
throw new Error(
"Server returned HTML instead of expected response format"
);
}
return transformOrderActionResponse(response.data, "Order placed");
} catch (error: any) {
// Handle HTML error response
if (error.response && isHtmlResponse(error.response.data)) {
throw new Error(
"Server returned HTML instead of expected response format"
);
}
throw error;
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["orders"] });
queryClient.invalidateQueries({ queryKey: ["cart"] });
},
});
}
// Cancel order mutation
export function useCancelOrder() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (orderId: number) => {
const response = await apiClient.delete(`/orders/${orderId}`);
return transformOrderActionResponse(response.data, "Order cancelled");
},
onSuccess: (_, orderId) => {
queryClient.invalidateQueries({ queryKey: ["orders"] });
queryClient.invalidateQueries({ queryKey: ["order", orderId] });
},
});
}

48
lib/hooks/useSearch.ts
View File

@@ -1,28 +1,28 @@
import { useQuery } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
import type { SearchFilters, SearchResponse } from "@/lib/types/api"
// import { useQuery } from "@tanstack/react-query"
// import { apiClient } from "@/lib/api"
// import type { SearchFilters, SearchResponse } from "@/lib/types/api"
export function useSearch(options: SearchFilters) {
const { q, category_id, brand_id, price_from, price_to, page = 1, per_page = 20 } = options
// export function useSearch(options: SearchFilters) {
// const { q, category_id, brand_id, price_from, price_to, page = 1, per_page = 20 } = options
return useQuery({
queryKey: ["search", { q, category_id, brand_id, price_from, price_to, page, per_page }],
queryFn: async () => {
const params = new URLSearchParams({
page: String(page),
per_page: String(per_page),
})
// return useQuery({
// queryKey: ["search", { q, category_id, brand_id, price_from, price_to, page, per_page }],
// queryFn: async () => {
// const params = new URLSearchParams({
// page: String(page),
// per_page: String(per_page),
// })
if (q) params.append("q", q)
if (category_id) params.append("category_id", String(category_id))
if (brand_id) params.append("brand_id", String(brand_id))
if (price_from) params.append("price_from", String(price_from))
if (price_to) params.append("price_to", String(price_to))
// // if (q) params.append("q", q)
// if (category_id) params.append("category_id", String(category_id))
// if (brand_id) params.append("brand_id", String(brand_id))
// if (price_from) params.append("price_from", String(price_from))
// if (price_to) params.append("price_to", String(price_to))
const response = await apiClient.get<SearchResponse>(`/search?${params}`)
return response.data
},
enabled: !!q && q.length > 0,
staleTime: 1000 * 60 * 5,
})
}
// const response = await apiClient.get<SearchResponse>(`/search?${params}`)
// return response.data
// },
// enabled: !!q && q.length > 0,
// staleTime: 1000 * 60 * 5,
// })
// }

18
lib/hooks/useUserProfile.ts
View File

@@ -1,18 +0,0 @@
"use client"
import { useQuery } from "@tanstack/react-query"
import { apiClient } from "@/lib/api"
import { API_ENDPOINTS } from "@/lib/config/api-endpoints"
import type { UserProfile } from "@/lib/types/api"
export function useUserProfile(options?: { enabled?: boolean }) {
return useQuery({
queryKey: ["user", "profile"],
queryFn: async () => {
const response = await apiClient.get<UserProfile>(API_ENDPOINTS.profile)
return response.data
},
staleTime: 1000 * 60 * 10, // 10 minutes
enabled: options?.enabled !== false,
})
}

132
lib/mock-server/axios-adapter.ts
View File

@@ -1,132 +0,0 @@
/**
* Custom axios adapter for mocking API responses in development
* Intercepts requests and routes them to mock handlers
*/
import type { AxiosRequestConfig } from "axios"
import { mockHandlers } from "./handlers"
interface MockRequest extends AxiosRequestConfig {
url?: string
}
export const createMockAdapter = () => {
return async (config: MockRequest) => {
const url = config.url || ""
const method = (config.method || "get").toLowerCase()
try {
if (method === "get") {
if (url === "/products") {
const response = await mockHandlers.getProducts()
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url.match(/^\/products\/\d+$/)) {
const id = Number.parseInt(url.split("/")[2])
const response = await mockHandlers.getProduct(id)
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url === "/categories") {
const response = await mockHandlers.getCategories()
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url.match(/^\/categories\/.+$/)) {
const slug = url.split("/")[2]
const response = await mockHandlers.getCategory(slug)
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url === "/cart") {
const response = await mockHandlers.getCart()
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url === "/favorites") {
const response = await mockHandlers.getFavorites()
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url === "/orders") {
const response = await mockHandlers.getOrders()
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url.match(/^\/orders\/\d+$/)) {
const id = Number.parseInt(url.split("/")[2])
const response = await mockHandlers.getOrder(id)
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url.match(/^\/search/)) {
const params = new URLSearchParams(url.split("?")[1] || "")
const query = params.get("q") || ""
const response = await mockHandlers.search(query, {
category: params.get("category") || undefined,
priceFrom: params.get("priceFrom") ? Number.parseInt(params.get("priceFrom")!) : undefined,
priceTo: params.get("priceTo") ? Number.parseInt(params.get("priceTo")!) : undefined,
})
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
}
if (method === "post") {
if (url === "/cart/items") {
const { productId, quantity } = config.data
const response = await mockHandlers.addToCart(productId, quantity)
return Promise.resolve({ data: response.data, status: 201, config, headers: {}, statusText: "Created" })
}
if (url === "/favorites") {
const { productId } = config.data
const response = await mockHandlers.addToFavorites(productId)
return Promise.resolve({ data: response.data, status: 201, config, headers: {}, statusText: "Created" })
}
if (url.match(/^\/orders\/\d+\/cancel$/)) {
const orderId = Number.parseInt(url.split("/")[2])
const response = await mockHandlers.cancelOrder(orderId)
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
}
if (method === "patch") {
if (url.match(/^\/cart\/items\/\d+$/)) {
const itemId = Number.parseInt(url.split("/")[3])
const { quantity } = config.data
const response = await mockHandlers.updateCartItemQuantity(itemId, quantity)
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
}
if (method === "delete") {
if (url.match(/^\/cart\/items\/\d+$/)) {
const itemId = Number.parseInt(url.split("/")[3])
const response = await mockHandlers.removeFromCart(itemId)
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
if (url.match(/^\/favorites\/\d+$/)) {
const productId = Number.parseInt(url.split("/")[2])
const response = await mockHandlers.removeFromFavorites(productId)
return Promise.resolve({ data: response.data, status: 200, config, headers: {}, statusText: "OK" })
}
}
// Fallback - endpoint not mocked
return Promise.reject({
response: { status: 404, data: { message: "Endpoint not found" }, config },
})
} catch (error: any) {
return Promise.reject({
response: {
status: 400,
data: { message: error.message },
config,
},
})
}
}
}

95
lib/mock-server/data.ts
View File

@@ -1,95 +0,0 @@
/**
* Mock data for development and testing
*/
export const mockProducts = [
{
id: 1,
name: "Premium Wireless Headphones",
price: 199.99,
category: "electronics",
image: "/wireless-headphones.png",
description: "High-quality sound with noise cancellation",
stock: 50,
},
{
id: 2,
name: "Classic Analog Watch",
price: 89.99,
category: "accessories",
image: "/analog-watch.png",
description: "Timeless design with precision movement",
stock: 30,
},
{
id: 3,
name: "Portable Charger 20000mAh",
price: 49.99,
category: "electronics",
image: "/portable-charger-lifestyle.png",
description: "Fast charging technology with dual ports",
stock: 100,
},
{
id: 4,
name: "Leather Messenger Bag",
price: 129.99,
category: "accessories",
image: "/leather-messenger-bag.png",
description: "Premium leather construction",
stock: 25,
},
{
id: 5,
name: "4K Webcam",
price: 149.99,
category: "electronics",
image: "/4k-webcam.jpg",
description: "Professional quality streaming camera",
stock: 40,
},
{
id: 6,
name: "USB-C Hub 7-in-1",
price: 59.99,
category: "electronics",
image: "/usb-c-hub.jpg",
description: "Multiple ports for connectivity",
stock: 75,
},
]
export const mockCategories = [
{
id: 1,
name: "Electronics",
slug: "electronics",
image: "/electronics-category.png",
},
{
id: 2,
name: "Accessories",
slug: "accessories",
image: "/accessories-category.png",
},
]
export const mockOrders = [
{
id: 101,
status: "delivered" as const,
total: 299.98,
createdAt: new Date("2024-11-01").toISOString(),
},
{
id: 102,
status: "processing" as const,
total: 199.99,
createdAt: new Date("2024-11-05").toISOString(),
},
]
export const mockFavorites = [
{ id: 1, productId: 1, addedAt: new Date().toISOString() },
{ id: 2, productId: 3, addedAt: new Date().toISOString() },
]

181
lib/mock-server/handlers.ts
View File

@@ -1,181 +0,0 @@
/**
* Mock HTTP handlers for development
* Simulates API responses for TanStack Query testing
*/
import { mockProducts, mockCategories, mockOrders, mockFavorites } from "./data"
interface MockCart {
id: string
items: Array<{ id: number; productId: number; quantity: number; price: number }>
total: number
}
// In-memory storage for development
const mockCart: MockCart = {
id: "cart-1",
items: [],
total: 0,
}
let mockUserFavorites = [...mockFavorites]
/**
* Simulate network delay for realistic testing
*/
export const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
/**
* Mock API handlers
*/
export const mockHandlers = {
// Products
async getProducts() {
await delay(300)
return { data: mockProducts }
},
async getProduct(id: number) {
await delay(300)
const product = mockProducts.find((p) => p.id === id)
if (!product) throw new Error("Product not found")
return { data: product }
},
// Categories
async getCategories() {
await delay(300)
return { data: mockCategories }
},
async getCategory(slug: string) {
await delay(300)
const category = mockCategories.find((c) => c.slug === slug)
if (!category) throw new Error("Category not found")
const products = mockProducts.filter((p) => p.category === slug)
return { data: { ...category, products } }
},
// Cart operations
async getCart() {
await delay(200)
return { data: mockCart }
},
async addToCart(productId: number, quantity = 1) {
await delay(300)
const product = mockProducts.find((p) => p.id === productId)
if (!product) throw new Error("Product not found")
const existingItem = mockCart.items.find((item) => item.productId === productId)
if (existingItem) {
existingItem.quantity += quantity
} else {
mockCart.items.push({
id: Date.now(),
productId,
quantity,
price: product.price,
})
}
mockCart.total = mockCart.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
return { data: mockCart }
},
async removeFromCart(itemId: number) {
await delay(300)
mockCart.items = mockCart.items.filter((item) => item.id !== itemId)
mockCart.total = mockCart.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
return { data: mockCart }
},
async updateCartItemQuantity(itemId: number, quantity: number) {
await delay(300)
const item = mockCart.items.find((i) => i.id === itemId)
if (!item) throw new Error("Item not found")
item.quantity = Math.max(1, quantity)
mockCart.total = mockCart.items.reduce((sum, i) => sum + i.price * i.quantity, 0)
return { data: mockCart }
},
// Favorites
async getFavorites() {
await delay(200)
return { data: mockUserFavorites }
},
async addToFavorites(productId: number) {
await delay(300)
const product = mockProducts.find((p) => p.id === productId)
if (!product) throw new Error("Product not found")
const exists = mockUserFavorites.find((f) => f.productId === productId)
if (!exists) {
mockUserFavorites.push({
id: Date.now(),
productId,
addedAt: new Date().toISOString(),
})
}
return { data: mockUserFavorites }
},
async removeFromFavorites(productId: number) {
await delay(300)
mockUserFavorites = mockUserFavorites.filter((f) => f.productId !== productId)
return { data: mockUserFavorites }
},
// Orders
async getOrders() {
await delay(300)
return { data: mockOrders }
},
async getOrder(id: number) {
await delay(300)
const order = mockOrders.find((o) => o.id === id)
if (!order) throw new Error("Order not found")
return { data: order }
},
async cancelOrder(orderId: number) {
await delay(300)
const order = mockOrders.find((o) => o.id === orderId)
if (!order) throw new Error("Order not found")
if (order.status !== "processing" && order.status !== "pending") {
throw new Error("Cannot cancel shipped or delivered orders")
}
order.status = "cancelled"
return { data: order }
},
// Search
async search(query: string, filters?: { category?: string; priceFrom?: number; priceTo?: number }) {
await delay(400)
let results = mockProducts
if (query) {
results = results.filter(
(p) =>
p.name.toLowerCase().includes(query.toLowerCase()) ||
p.description.toLowerCase().includes(query.toLowerCase()),
)
}
if (filters?.category) {
results = results.filter((p) => p.category === filters.category)
}
if (filters?.priceFrom) {
results = results.filter((p) => p.price >= filters.priceFrom!)
}
if (filters?.priceTo) {
results = results.filter((p) => p.price <= filters.priceTo!)
}
return { data: { products: results, total: results.length } }
},
}

327
lib/types/api.ts
View File

@@ -1,239 +1,258 @@
/**
* API Response and Entity Type Definitions
* Based on Postman collection structure
*/
// Product Types
export interface ProductMedia {
thumbnail: string
images_400x400: string
images_720x720: string
images_800x800: string
images_1200x1200: string
thumbnail: string;
images_400x400: string;
images_720x720: string;
images_800x800: string;
images_1200x1200: string;
}
export interface ProductProperty {
attribute_id: number
name: string
value: string
attribute_id: number;
name: string;
value: string;
}
export interface ProductReviews {
count: number
rating: string
count: number;
rating: string;
}
export interface Product {
id: number
parent_id: number | null
name: string
slug: string
description: string
sku: string | null
barcode: string
stock: number
price_amount: string
old_price_amount: string | null
backorder: string
weight_value: number | null
weight_unit: string | null
height_value: number | null
height_unit: string | null
media: ProductMedia[]
created_at: string
seo_title: string | null
seo_description: string | null
colour: string | null
size: string | null
available_colors: string[]
available_sizes: string[]
id: number;
parent_id: number | null;
name: string;
slug: string;
description: string;
sku: string | null;
barcode: string;
stock: number;
price_amount: string;
old_price_amount: string | null;
backorder: string;
weight_value: number | null;
weight_unit: string | null;
height_value: number | null;
height_unit: string | null;
media: ProductMedia[];
created_at: string;
seo_title: string | null;
seo_description: string | null;
is_visible: boolean;
colour: string | null;
size: string | null;
available_colors?: string[];
available_sizes?: string[];
brand: {
id: number | null
name: string | null
}
channel: Array<{
id: number
name: string
}>
properties: ProductProperty[]
variations: any[]
reviews: ProductReviews
reviews_resources: any[]
categories: Array<{
id: number
name: string
}>
id: number | null;
name: string | null;
};
channel?: Array<{
id: number;
name: string;
}>;
properties?: ProductProperty[];
variations?: any[];
reviews: ProductReviews;
reviews_resources?: any[];
categories?: Array<{
id: number;
name: string;
}>;
}
// Category Types
export interface Category {
id: number
name: string
slug: string
image: string
parent_id?: number
children?: Category[]
id: number;
name: string;
slug: string;
image: string;
parent_id?: number;
children?: Category[];
}
// Collection Types
export interface Collection {
id: number;
name: string;
slug?: string;
description?: string;
image?: string;
created_at?: string;
}
// Cart Types
export interface CartItem {
id: number
product_id: number
product?: Product
id: number;
product_id: number;
product?: Product;
seller: {
id: number
name: string
}
quantity: number
price: number
total: number
price_formatted?: string
sub_total_formatted?: string
id: number;
name: string;
};
quantity: number;
price: number;
total: number;
price_formatted?: string;
sub_total_formatted?: string;
}
export interface Cart {
id: string
items: CartItem[]
total: number
total_formatted?: string
count?: number
id: string;
items: CartItem[];
total: number;
total_formatted?: string;
count?: number;
}
// Favorites Types
export interface Favorite {
id: number
product_id: number
product?: Product
added_at?: string
id: number;
product_id: number;
product?: Product;
added_at?: string;
}
// Order Types
export interface OrderItem {
id: number
product_id: number
product?: Product
quantity: number
price: number
total: number
id: number;
product_id: number;
product?: Product;
quantity: number;
price: number;
total: number;
}
export interface Order {
id: number
number?: string
status: "pending" | "processing" | "shipped" | "delivered" | "cancelled"
items: OrderItem[]
total: number
total_formatted?: string
created_at: string
updated_at?: string
estimated_delivery?: string
tracking_number?: string
id: number;
number?: string;
status: "pending" | "processing" | "shipped" | "delivered" | "cancelled";
items: OrderItem[];
total: number;
total_formatted?: string;
created_at: string;
updated_at?: string;
estimated_delivery?: string;
tracking_number?: string;
}
// Pagination Types
export interface Pagination {
page: number;
perPage: number;
count: number;
first_page_url?: string;
next_page_url?: string | null;
prev_page_url?: string | null;
current_page?: number;
last_page?: number;
per_page?: number;
total?: number;
}
export interface PaginatedResponse<T> {
data: T[]
pagination: {
current_page: number
last_page: number
per_page: number
total: number
}
message?: string;
data: T[];
pagination: Pagination;
}
// Search Types
export interface SearchFilters {
q?: string
category_id?: number
brand_id?: number
price_from?: number
price_to?: number
page?: number
per_page?: number
q?: string;
category_id?: number;
brand_id?: number;
price_from?: number;
price_to?: number;
page?: number;
per_page?: number;
}
export interface SearchResponse {
products: Product[]
total: number
products: Product[];
total: number;
filters?: {
brands: Array<{ id: number; name: string }>
categories: Array<{ id: number; name: string }>
price_range: { min: number; max: number }
}
brands: Array<{ id: number; name: string }>;
categories: Array<{ id: number; name: string }>;
price_range: { min: number; max: number };
};
}
// Profile Types
export interface UserProfile {
id: number
email: string
phone?: string
first_name?: string
last_name?: string
avatar?: string
created_at: string
id: number;
email: string;
phone?: string;
first_name?: string;
last_name?: string;
avatar?: string;
created_at: string;
}
// Auth Types
export interface AuthResponse {
token: string
user: UserProfile
token: string;
user: UserProfile;
}
// Banner Types
export interface Banner {
id: number
title: string
image: string
url?: string
type?: string
place?: string
id: number;
title: string;
image: string;
thumbnail?: string;
link?: string;
url?: string;
type?: string;
place?: string;
}
// Generic API Error Response
export interface ApiError {
message: string
errors?: Record<string, string[]>
message: string;
errors?: Record<string, string[]>;
}
// Region, Address, PaymentType, and ShippingMethod Types
export interface Region {
id: number
code: string
name: string
id: number;
code: string;
name: string;
}
export interface Address {
id: number
title: string
region_id: number
address: string
phone?: string
is_default?: boolean
id: number;
title: string;
region_id: number;
address: string;
phone?: string;
is_default?: boolean;
}
export interface PaymentTypeOption {
id: number
name: string
code: string
id: number;
name: string;
code: string;
}
export interface ShippingMethod {
id: number
name: string
code: string
id: number;
name: string;
code: string;
}
// Order creation payload type
export interface CreateOrderPayload {
customer_name?: string
customer_phone?: string
customer_address: string
shipping_method: string
payment_type_id: number
delivery_time?: string
delivery_at?: string
region: string
note?: string
customer_name?: string;
customer_phone?: string;
customer_address: string;
shipping_method: string;
payment_type_id: number;
delivery_time?: string;
delivery_at?: string;
region: string;
note?: string;
}

2
middleware.ts
View File

@@ -1,5 +1,5 @@
import createMiddleware from "next-intl/middleware"
import { locales, defaultLocale } from "./i18n"
import { locales, defaultLocale } from "./i18n/i18n"
const middleware = createMiddleware({
locales,

2
next.config.ts
View File

@@ -1,7 +1,7 @@
import type { NextConfig } from "next"
import createNextIntlPlugin from "next-intl/plugin"
const withNextIntl = createNextIntlPlugin("./i18n.ts")
const withNextIntl = createNextIntlPlugin("./i18n/i18n.ts")
const nextConfig: NextConfig = {
eslint: {

88
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@radix-ui/react-avatar": "^1.1.11",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-radio-group": "^1.3.8",
"@radix-ui/react-scroll-area": "^1.2.10",
@@ -1635,6 +1636,35 @@
}
}
},
"node_modules/@radix-ui/react-dropdown-menu": {
"version": "2.1.16",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
"integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-menu": "2.1.16",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-focus-guards": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
@@ -1739,6 +1769,64 @@
}
}
},
"node_modules/@radix-ui/react-menu": {
"version": "2.1.16",
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
"integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-collection": "1.1.7",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-direction": "1.1.1",
"@radix-ui/react-dismissable-layer": "1.1.11",
"@radix-ui/react-focus-guards": "1.1.3",
"@radix-ui/react-focus-scope": "1.1.7",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-popper": "1.2.8",
"@radix-ui/react-portal": "1.1.9",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-roving-focus": "1.1.11",
"@radix-ui/react-slot": "1.2.3",
"@radix-ui/react-use-callback-ref": "1.1.1",
"aria-hidden": "^1.2.4",
"react-remove-scroll": "^2.6.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-popper": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"@radix-ui/react-avatar": "^1.1.11",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-radio-group": "^1.3.8",
"@radix-ui/react-scroll-area": "^1.2.10",

101
public/styr.text Normal file
View File

@@ -0,0 +1,101 @@
src/
├── app/ # Next.js 14 App Router
│ └── [locale]/
│ ├── (shop)/ # Route group - ortak layout
│ │ ├── page.tsx
│ │ ├── category/[slug]/
│ │ ├── product/[slug]/
│ │ └── cart/
│ └── (account)/ # Route group - kullanıcı sayfaları
│ ├── me/
│ ├── orders/
│ └── favorites/
│
├── features/ # Feature-based organization
│ ├── auth/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── types.ts
│ ├── cart/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── types.ts
│ ├── products/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── types.ts
│ └── orders/
│ ├── components/
│ ├── hooks/
│ └── types.ts
│
├── shared/
│ ├── components/ # Paylaşılan UI bileşenleri
│ │ ├── ui/ # shadcn/ui
│ │ ├── layout/
│ │ └── skeletons/
│ ├── hooks/ # Generic hooks (use-mobile, use-toast)
│ ├── lib/
│ │ ├── api/
│ │ ├── config/
│ │ └── utils/
│ └── types/
│
└── i18n/ # Lokalizasyon
├── messages/
├── config.ts
└── middleware.ts
# Tüm hooks'ları tek yere taşı
mv hooks/* lib/hooks/
rm -rf hooks/
```
### 3. Feature-Based Yapıya Geç
**Şu anki yapın:**
```
components/home/HomePage.tsx
lib/hooks/useProducts.ts
```
**Olması gereken:**
```
features/products/
├── components/
│ ├── ProductCard.tsx
│ ├── ProductGrid.tsx
│ └── ProductDetails.tsx
├── hooks/
│ └── useProducts.ts
└── types.ts
import { ProductCard, useProducts } from '@/features/products'
```
## Empty States'i Doğru Yerleştir
Şu an:
```
components/empty-states/EmptyCart.tsx
```
Olmalı:
```
features/cart/components/EmptyState.tsx
```
Her feature kendi empty state'ini yönetmeli.
## API Layer'ı Düzenle
```
shared/lib/api/
├── client.ts # Axios/fetch instance
├── endpoints.ts # API endpoint'leri
├── types.ts # Genel API tipleri
└── interceptors.ts # Auth, error handling