first commit
This commit is contained in:
Jelaletdin12
171
app/[locale]/cart/page.tsx
Normal file
171
app/[locale]/cart/page.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
"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"
|
||||
|
||||
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 t = useTranslations()
|
||||
|
||||
const { data: cart, isLoading, isError } = useCart()
|
||||
const { data: regions = [] } = useRegions()
|
||||
const { data: addresses = [] } = useAddresses()
|
||||
const { data: paymentTypes = [] } = usePaymentTypes()
|
||||
const { mutate: createOrder, isPending: isCreatingOrder } = useCreateOrder()
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true)
|
||||
}, [])
|
||||
|
||||
const handleDeliveryTypeChange = (type: DeliveryType) => {
|
||||
setDeliveryType(type)
|
||||
setSelectedAddress("")
|
||||
}
|
||||
|
||||
const handleCompleteOrder = () => {
|
||||
if (!selectedRegion || !selectedAddress || !paymentType) {
|
||||
console.warn("[v0] Missing required fields for order")
|
||||
return
|
||||
}
|
||||
|
||||
const selectedRegionObj = regions.find((r) => r.code === selectedRegion)
|
||||
|
||||
createOrder(
|
||||
{
|
||||
customer_address: selectedAddress,
|
||||
shipping_method: deliveryType === "PICK_UP" ? "pickup" : "standart",
|
||||
payment_type_id: paymentType.id,
|
||||
region: selectedRegion,
|
||||
note: note || undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
// Navigate to orders page after successful order creation
|
||||
router.push(`/orders`)
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
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 || !cart?.items || cart.items.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"}
|
||||
</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const translations = {
|
||||
cart: t("cart"),
|
||||
ordersIn: t("order_available_in_shops"),
|
||||
pricePerUnit: t("unit_price"),
|
||||
additionalPrice: t("extra_price"),
|
||||
discount: t("discount"),
|
||||
totalPrice: t("total_price"),
|
||||
paymentType: t("payment_type"),
|
||||
cash: t("cash"),
|
||||
card: t("card"),
|
||||
deliveryType: t("delivery_type"),
|
||||
delivery: t("delivery"),
|
||||
pickup: t("pickup"),
|
||||
selectRegion: t("choose_region"),
|
||||
selectAddress: t("choose_address"),
|
||||
note: t("note"),
|
||||
placeOrder: t("order"),
|
||||
emptyCart: t("cart_empty"),
|
||||
map: t("address"),
|
||||
}
|
||||
|
||||
const itemsBySeller = cart.items.reduce(
|
||||
(acc, item) => {
|
||||
const sellerId = item.seller.id
|
||||
if (!acc[sellerId]) {
|
||||
acc[sellerId] = { seller: item.seller, items: [] }
|
||||
}
|
||||
acc[sellerId].items.push(item)
|
||||
return acc
|
||||
},
|
||||
{} as Record<number, { seller: any; items: typeof cart.items }>,
|
||||
)
|
||||
|
||||
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) => (
|
||||
<CartItemCard key={item.id} item={item} translations={translations} />
|
||||
))}
|
||||
</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: cart.items,
|
||||
billing: {
|
||||
body: [{ title: t("goods"), value: `${cart.total_formatted || `${cart.total} TMT`}` }],
|
||||
footer: { title: t("total"), value: `${cart.total_formatted || `${cart.total} TMT`}` },
|
||||
},
|
||||
}}
|
||||
translations={translations}
|
||||
paymentType={paymentType}
|
||||
deliveryType={deliveryType}
|
||||
selectedRegion={selectedRegion}
|
||||
selectedAddress={selectedAddress}
|
||||
note={note}
|
||||
regions={regions}
|
||||
addresses={addresses}
|
||||
paymentTypes={paymentTypes}
|
||||
onPaymentTypeChange={setPaymentType}
|
||||
onDeliveryTypeChange={handleDeliveryTypeChange}
|
||||
onRegionChange={setSelectedRegion}
|
||||
onAddressChange={setSelectedAddress}
|
||||
onNoteChange={setNote}
|
||||
onMapOpen={() => {}}
|
||||
onCompleteOrder={handleCompleteOrder}
|
||||
isLoading={isCreatingOrder}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
105
app/[locale]/cart/ui/CartItemCard.tsx
Normal file
105
app/[locale]/cart/ui/CartItemCard.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client"
|
||||
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 type { CartItem, CartTranslations } from "./types"
|
||||
|
||||
interface CartItemCardProps {
|
||||
item: CartItem
|
||||
translations: CartTranslations
|
||||
}
|
||||
|
||||
export default function CartItemCard({ item, translations: t }: CartItemCardProps) {
|
||||
const { mutate: updateQuantity, isPending: isUpdating } = useUpdateCartItemQuantity()
|
||||
const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart()
|
||||
|
||||
const handleQuantityChange = (delta: number) => {
|
||||
const newQuantity = item.quantity + delta
|
||||
if (newQuantity >= 1) {
|
||||
updateQuantity({ itemId: item.id, quantity: newQuantity })
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
removeItem(item.id)
|
||||
}
|
||||
|
||||
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={item.product.image || item.product.images[0] || "/placeholder.svg"}
|
||||
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>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
disabled={isRemoving}
|
||||
className="w-fit p-0 h-auto hover:bg-transparent hover:text-red-500"
|
||||
>
|
||||
<Trash2 className="h-5 w-5" />
|
||||
</Button>
|
||||
</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>
|
||||
</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{t.additionalPrice} {item.sub_total_formatted || `${item.total} TMT`}
|
||||
</p>
|
||||
{item.discount_formatted && item.discount_formatted !== "0 TMT" && (
|
||||
<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`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quantity Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleQuantityChange(-1)}
|
||||
disabled={item.quantity === 1 || isUpdating}
|
||||
className="rounded-xl bg-blue-50"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="w-12 text-center font-semibold">{item.quantity}</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleQuantityChange(1)}
|
||||
disabled={isUpdating}
|
||||
className="rounded-xl bg-blue-50"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
53
app/[locale]/cart/ui/DeliveryTypeSelector.tsx
Normal file
53
app/[locale]/cart/ui/DeliveryTypeSelector.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import { Truck, Warehouse } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { DeliveryType, CartTranslations } from "./types";
|
||||
|
||||
interface DeliveryTypeSelectorProps {
|
||||
selectedType: DeliveryType;
|
||||
onSelect: (type: DeliveryType) => void;
|
||||
translations: CartTranslations;
|
||||
}
|
||||
|
||||
export default function DeliveryTypeSelector({
|
||||
selectedType,
|
||||
onSelect,
|
||||
translations: t,
|
||||
}: DeliveryTypeSelectorProps) {
|
||||
const deliveryOptions: {
|
||||
type: DeliveryType;
|
||||
label: string;
|
||||
icon: typeof Truck;
|
||||
}[] = [
|
||||
{ type: "SELECTED_DELIVERY", label: t.delivery, icon: Truck },
|
||||
{ type: "PICK_UP", label: t.pickup, icon: Warehouse },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">{t.deliveryType}</h3>
|
||||
<div className="flex gap-2">
|
||||
{deliveryOptions.map(({ type, label, icon: Icon }) => (
|
||||
<Card
|
||||
key={type}
|
||||
className={`flex-1 cursor-pointer transition-all ${
|
||||
selectedType === type
|
||||
? "border-2 border-[#005bff]"
|
||||
: "border-2 border-gray-200"
|
||||
}`}
|
||||
onClick={() => onSelect(type)}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center p-4 gap-2">
|
||||
<Icon
|
||||
className={`h-8 w-8 ${
|
||||
selectedType === type ? "text-[#005bff]" : ""
|
||||
}`}
|
||||
/>
|
||||
<span className="text-xs">{label}</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
177
app/[locale]/cart/ui/OrderSummary.tsx
Normal file
177
app/[locale]/cart/ui/OrderSummary.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
"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) {
|
||||
const filteredAddresses = selectedRegion
|
||||
? addresses.filter((addr) => {
|
||||
const region = regions.find((r) => r.code === selectedRegion)
|
||||
return region && addr.region_id === region.id
|
||||
})
|
||||
: []
|
||||
|
||||
const isFormValid = selectedRegion && selectedAddress && 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]" : "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 */}
|
||||
<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 */}
|
||||
{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 */}
|
||||
<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 */}
|
||||
<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-[#005bff] cursor-pointer h-12 text-lg font-bold disabled:opacity-50"
|
||||
size="lg"
|
||||
>
|
||||
{isLoading ? t.placeOrder + "..." : t.placeOrder}
|
||||
</Button>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
49
app/[locale]/cart/ui/PaymentTypeSelector.tsx
Normal file
49
app/[locale]/cart/ui/PaymentTypeSelector.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import React from "react";
|
||||
import { CreditCard } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { PaymentType, CartTranslations } from "./types";
|
||||
|
||||
interface PaymentTypeSelectorProps {
|
||||
selectedType: PaymentType;
|
||||
onSelect: (type: PaymentType) => void;
|
||||
translations: CartTranslations;
|
||||
}
|
||||
|
||||
export default function PaymentTypeSelector({
|
||||
selectedType,
|
||||
onSelect,
|
||||
translations: t,
|
||||
}: PaymentTypeSelectorProps) {
|
||||
const paymentOptions: { type: PaymentType; label: string }[] = [
|
||||
{ type: "CASH", label: t.cash },
|
||||
{ type: "CARD", label: t.card },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
|
||||
<div className="flex gap-2">
|
||||
{paymentOptions.map(({ type, label }) => (
|
||||
<Card
|
||||
key={type}
|
||||
className={`flex-1 cursor-pointer transition-all ${
|
||||
selectedType === type
|
||||
? "border-2 border-[#005bff]"
|
||||
: "border-2 border-gray-200"
|
||||
}`}
|
||||
onClick={() => onSelect(type)}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center p-4 gap-2">
|
||||
<CreditCard
|
||||
className={`h-8 w-8 ${
|
||||
selectedType === type ? "text-[#005bff]" : ""
|
||||
}`}
|
||||
/>
|
||||
<span className="text-xs">{label}</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
87
app/[locale]/cart/ui/types.ts
Normal file
87
app/[locale]/cart/ui/types.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
import type { StaticImageData } from "next/image"
|
||||
|
||||
export interface CartItem {
|
||||
id: number
|
||||
product_id: number
|
||||
product: {
|
||||
id: number
|
||||
name: string
|
||||
images: (StaticImageData | string)[]
|
||||
image?: StaticImageData | string
|
||||
}
|
||||
seller: {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
quantity: number
|
||||
price: number
|
||||
total: number
|
||||
price_formatted?: string
|
||||
sub_total_formatted?: string
|
||||
discount_formatted?: string
|
||||
total_formatted?: 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 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"
|
||||
36
app/[locale]/category/[slug]/page.tsx
Normal file
36
app/[locale]/category/[slug]/page.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { Metadata } from "next"
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ locale: string; slug: string }>
|
||||
}
|
||||
|
||||
export const revalidate = 600 // ISR: Revalidate every 10 minutes
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { locale, slug } = await params
|
||||
|
||||
return {
|
||||
title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
|
||||
description: `Browse ${slug} products in our store`,
|
||||
openGraph: {
|
||||
locale,
|
||||
type: "website",
|
||||
title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
|
||||
description: `Browse ${slug} products in our store`,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
// Generate static params for popular categories
|
||||
const categories = ["electronics", "clothing", "home-garden"]
|
||||
return categories.map((slug) => ({ slug }))
|
||||
}
|
||||
|
||||
export default async function CategoryPage(props: Props) {
|
||||
const params = await props.params
|
||||
const { slug } = params
|
||||
|
||||
const CategoryPageClient = (await import("./ui/CategoryClient")).default
|
||||
return <CategoryPageClient params={params} />
|
||||
}
|
||||
490
app/[locale]/category/[slug]/ui/CategoryClient.tsx
Normal file
490
app/[locale]/category/[slug]/ui/CategoryClient.tsx
Normal file
@@ -0,0 +1,490 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { useRouter, useSearchParams } from "next/navigation"
|
||||
import { ChevronLeft, SlidersHorizontal, X } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Slider } from "@/components/ui/slider"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import CategoryPageContent from "./CategoryContent"
|
||||
import { notFound } from "next/navigation"
|
||||
|
||||
interface FilterItem {
|
||||
key: string
|
||||
value: number
|
||||
name: string
|
||||
hex?: string
|
||||
image?: string
|
||||
selected?: boolean
|
||||
slug?: string
|
||||
children?: FilterItem[]
|
||||
}
|
||||
|
||||
interface Filter {
|
||||
uuid: string
|
||||
title: string
|
||||
type: "TREE" | "SELECTABLE" | "VOLUME" | "TAB" | "COLOR"
|
||||
items: FilterItem | FilterItem[]
|
||||
}
|
||||
|
||||
interface CategoryPageClientProps {
|
||||
params: { locale: string; slug: string }
|
||||
}
|
||||
|
||||
export default function CategoryPageClient({ params }: CategoryPageClientProps) {
|
||||
const { slug, locale } = params
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
// Price filter state
|
||||
const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000])
|
||||
|
||||
// Selected filters state
|
||||
const [selectedFilters, setSelectedFilters] = useState<Record<string, Set<number>>>({
|
||||
brand: new Set(),
|
||||
color: new Set(),
|
||||
tag: new Set(),
|
||||
})
|
||||
|
||||
const t = {
|
||||
filter: "Filters",
|
||||
from: "From",
|
||||
to: "To",
|
||||
reset: "Reset",
|
||||
}
|
||||
|
||||
if (!slug) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const filters: Filter[] = [
|
||||
{
|
||||
uuid: "1",
|
||||
title: "Category",
|
||||
type: "TREE",
|
||||
items: {
|
||||
key: "category",
|
||||
value: 1,
|
||||
name: "All",
|
||||
slug: slug,
|
||||
selected: true,
|
||||
children: [
|
||||
{ key: "category", value: 2, name: "Electronics", slug: "electronics", selected: false },
|
||||
{ key: "category", value: 3, name: "Clothing", slug: "clothing", selected: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
uuid: "2",
|
||||
title: "Brand",
|
||||
type: "SELECTABLE",
|
||||
items: [
|
||||
{ key: "brand", value: 10, name: "Brand A", image: "/brand-a.png", selected: false },
|
||||
{ key: "brand", value: 11, name: "Brand B", image: "/brand-b.png", selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
uuid: "3",
|
||||
title: "Price",
|
||||
type: "VOLUME",
|
||||
items: {} as FilterItem,
|
||||
},
|
||||
{
|
||||
uuid: "4",
|
||||
title: "Color",
|
||||
type: "COLOR",
|
||||
items: [
|
||||
{ key: "color", value: 100, name: "Red", hex: "#FF0000", selected: false },
|
||||
{ key: "color", value: 101, name: "Blue", hex: "#0000FF", selected: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
uuid: "5",
|
||||
title: "Tags",
|
||||
type: "TAB",
|
||||
items: [
|
||||
{ key: "tag", value: 200, name: "New Arrival", selected: false },
|
||||
{ key: "tag", value: 201, name: "Sale", selected: false },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const handleFilterChange = (key: string, value: number) => {
|
||||
setSelectedFilters((prev) => {
|
||||
const newFilters = { ...prev }
|
||||
if (!newFilters[key]) {
|
||||
newFilters[key] = new Set()
|
||||
}
|
||||
|
||||
if (newFilters[key].has(value)) {
|
||||
newFilters[key].delete(value)
|
||||
} else {
|
||||
newFilters[key].add(value)
|
||||
}
|
||||
|
||||
return newFilters
|
||||
})
|
||||
|
||||
updateURLParams(key, Array.from(selectedFilters[key] || []))
|
||||
}
|
||||
|
||||
const handlePriceChange = (values: number[]) => {
|
||||
setPriceRange([values[0], values[1]])
|
||||
updateURLParams("price_min", values[0])
|
||||
updateURLParams("price_max", values[1])
|
||||
}
|
||||
|
||||
const handlePriceInputChange = (type: "from" | "to", value: string) => {
|
||||
const numValue = parseInt(value) || 0
|
||||
if (type === "from") {
|
||||
setPriceRange([numValue, priceRange[1]])
|
||||
updateURLParams("price_min", numValue)
|
||||
} else {
|
||||
setPriceRange([priceRange[0], numValue])
|
||||
updateURLParams("price_max", numValue)
|
||||
}
|
||||
}
|
||||
|
||||
const updateURLParams = (key: string, value: number | number[]) => {
|
||||
const params = new URLSearchParams(searchParams.toString())
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
params.delete(key)
|
||||
value.forEach((v) => params.append(key, v.toString()))
|
||||
} else {
|
||||
params.set(key, value.toString())
|
||||
}
|
||||
|
||||
router.push(`/${locale}/category/${slug}?${params.toString()}`, { scroll: false })
|
||||
}
|
||||
|
||||
const resetFilters = () => {
|
||||
setSelectedFilters({
|
||||
brand: new Set(),
|
||||
color: new Set(),
|
||||
tag: new Set(),
|
||||
})
|
||||
setPriceRange([0, 10000])
|
||||
router.push(`/${locale}/category/${slug}`)
|
||||
}
|
||||
|
||||
const FiltersContent = () => (
|
||||
<div className="space-y-6">
|
||||
{filters.map((filter) => {
|
||||
switch (filter.type) {
|
||||
case "TREE":
|
||||
return (
|
||||
<CategoryFilter
|
||||
key={filter.uuid}
|
||||
data={filter.items as FilterItem}
|
||||
title={filter.title}
|
||||
locale={locale}
|
||||
/>
|
||||
)
|
||||
case "SELECTABLE":
|
||||
return (
|
||||
<BrandFilter
|
||||
key={filter.uuid}
|
||||
data={filter.items as FilterItem[]}
|
||||
title={filter.title}
|
||||
selectedValues={selectedFilters.brand}
|
||||
onFilterChange={handleFilterChange}
|
||||
/>
|
||||
)
|
||||
case "VOLUME":
|
||||
return (
|
||||
<PriceFilter
|
||||
key={filter.uuid}
|
||||
title={filter.title}
|
||||
priceRange={priceRange}
|
||||
onPriceChange={handlePriceChange}
|
||||
onInputChange={handlePriceInputChange}
|
||||
translations={{ from: t.from, to: t.to }}
|
||||
/>
|
||||
)
|
||||
case "COLOR":
|
||||
return (
|
||||
<ColorFilter
|
||||
key={filter.uuid}
|
||||
data={filter.items as FilterItem[]}
|
||||
title={filter.title}
|
||||
selectedValues={selectedFilters.color}
|
||||
onFilterChange={handleFilterChange}
|
||||
/>
|
||||
)
|
||||
case "TAB":
|
||||
return (
|
||||
<TagFilter
|
||||
key={filter.uuid}
|
||||
data={filter.items as FilterItem[]}
|
||||
title={filter.title}
|
||||
selectedValues={selectedFilters.tag}
|
||||
onFilterChange={handleFilterChange}
|
||||
/>
|
||||
)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})}
|
||||
<Button variant="outline" className="w-full rounded-xl bg-transparent" onClick={resetFilters}>
|
||||
{t.reset}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
{/* Desktop Filters - LEFT SIDE */}
|
||||
<div className="hidden sm:block w-[280px] flex-shrink-0 border-r pr-4">
|
||||
<ScrollArea className="h-[calc(100vh-120px)]">
|
||||
<FiltersContent />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Content - RIGHT SIDE */}
|
||||
<div className="flex-1">
|
||||
<CategoryPageContent slug={slug} filters={selectedFilters} priceRange={priceRange} />
|
||||
</div>
|
||||
|
||||
{/* Mobile Filter Sheet */}
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button className="sm:hidden fixed bottom-20 right-4 rounded-xl font-bold gap-2 z-10 shadow-lg" size="lg">
|
||||
{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>
|
||||
<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">Close</span>
|
||||
</button>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="h-[calc(100vh-80px)] p-4">
|
||||
<FiltersContent />
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CategoryFilter({
|
||||
data,
|
||||
title,
|
||||
locale
|
||||
}: {
|
||||
data: FilterItem
|
||||
title: string
|
||||
locale: string
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3">{title}</h3>
|
||||
<div className="space-y-1">
|
||||
<Link
|
||||
href={`/${locale}/category/${data.slug}?category_id=${data.value}`}
|
||||
className={`flex items-center gap-2 py-2 px-2 rounded-lg hover:bg-gray-100 transition-colors ${
|
||||
data.selected ? "text-primary font-medium" : ""
|
||||
}`}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
{data.name}
|
||||
</Link>
|
||||
{data.children && data.children.length > 0 && (
|
||||
<div className="ml-6 space-y-1">
|
||||
{data.children.map((child) => (
|
||||
<Link
|
||||
key={child.value}
|
||||
href={`/${locale}/category/${child.slug}?category_id=${child.value}`}
|
||||
className={`block py-2 px-2 rounded-lg hover:bg-gray-100 transition-colors ${
|
||||
child.selected ? "text-primary font-medium" : ""
|
||||
}`}
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function BrandFilter({
|
||||
data,
|
||||
title,
|
||||
selectedValues,
|
||||
onFilterChange,
|
||||
}: {
|
||||
data: FilterItem[]
|
||||
title: string
|
||||
selectedValues: Set<number>
|
||||
onFilterChange: (key: string, value: number) => void
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3">{title}</h3>
|
||||
<ScrollArea className="max-h-[410px]">
|
||||
<div className="space-y-1">
|
||||
{data.map((item) => {
|
||||
const isSelected = selectedValues.has(item.value)
|
||||
return (
|
||||
<button
|
||||
key={item.value}
|
||||
onClick={() => onFilterChange(item.key, item.value)}
|
||||
className={`w-full flex items-center gap-3 py-2 px-2 rounded-lg hover:bg-gray-100 transition-colors group ${
|
||||
isSelected ? "text-primary" : ""
|
||||
}`}
|
||||
>
|
||||
{item.image && (
|
||||
<div
|
||||
className={`flex items-center justify-center w-[50px] h-[50px] bg-gray-50 rounded-lg border-2 transition-colors ${
|
||||
isSelected ? "border-primary" : "border-transparent group-hover:border-primary"
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-8 h-8">
|
||||
<Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-left">{item.name}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PriceFilter({
|
||||
title,
|
||||
priceRange,
|
||||
onPriceChange,
|
||||
onInputChange,
|
||||
translations,
|
||||
}: {
|
||||
title: string
|
||||
priceRange: [number, number]
|
||||
onPriceChange: (values: number[]) => void
|
||||
onInputChange: (type: "from" | "to", value: string) => void
|
||||
translations: { from: string; to: string }
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3">{title}</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<Label htmlFor="price-from" className="text-xs mb-1">
|
||||
{translations.from}
|
||||
</Label>
|
||||
<Input
|
||||
id="price-from"
|
||||
type="number"
|
||||
value={priceRange[0]}
|
||||
onChange={(e) => onInputChange("from", e.target.value)}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Label htmlFor="price-to" className="text-xs mb-1">
|
||||
{translations.to}
|
||||
</Label>
|
||||
<Input
|
||||
id="price-to"
|
||||
type="number"
|
||||
value={priceRange[1]}
|
||||
onChange={(e) => onInputChange("to", e.target.value)}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Slider min={0} max={99999} step={100} value={priceRange} onValueChange={onPriceChange} className="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TagFilter({
|
||||
data,
|
||||
title,
|
||||
selectedValues,
|
||||
onFilterChange,
|
||||
}: {
|
||||
data: FilterItem[]
|
||||
title: string
|
||||
selectedValues: Set<number>
|
||||
onFilterChange: (key: string, value: number) => void
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3">{title}</h3>
|
||||
<div className="space-y-2">
|
||||
{data.map((item) => {
|
||||
const isSelected = selectedValues.has(item.value)
|
||||
return (
|
||||
<div key={item.value} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={`tag-${item.value}`}
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => onFilterChange(item.key, item.value)}
|
||||
/>
|
||||
<Label htmlFor={`tag-${item.value}`} className="text-sm font-normal cursor-pointer">
|
||||
{item.name}
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ColorFilter({
|
||||
data,
|
||||
title,
|
||||
selectedValues,
|
||||
onFilterChange,
|
||||
}: {
|
||||
data: FilterItem[]
|
||||
title: string
|
||||
selectedValues: Set<number>
|
||||
onFilterChange: (key: string, value: number) => void
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3">{title}</h3>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{data.map((item) => {
|
||||
const isSelected = selectedValues.has(item.value)
|
||||
return (
|
||||
<button
|
||||
key={item.value}
|
||||
onClick={() => onFilterChange(item.key, item.value)}
|
||||
className={`w-[36px] h-[36px] rounded-lg border-2 p-1 transition-all hover:scale-110 ${
|
||||
isSelected ? "border-primary shadow-md" : "border-gray-200"
|
||||
}`}
|
||||
title={item.name}
|
||||
>
|
||||
<div className="w-full h-full rounded-md border-2 border-gray-200" style={{ backgroundColor: item.hex }} />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
9
app/[locale]/category/[slug]/ui/CategoryContent.tsx
Normal file
9
app/[locale]/category/[slug]/ui/CategoryContent.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
"use client"
|
||||
export default function CategoryPageContent({ slug }: { slug: string }) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl font-bold mb-6">Category: {slug}</h1>
|
||||
{/* Category content will go here */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
BIN
app/[locale]/favicon.ico
Normal file
BIN
app/[locale]/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
162
app/[locale]/favorites/page.tsx
Normal file
162
app/[locale]/favorites/page.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
"use client"
|
||||
import { useFavorites, useAddToCart, useRemoveFromFavorites } from "@/lib/hooks"
|
||||
import { useState } from "react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { Heart, ShoppingCart } from "lucide-react"
|
||||
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 type { Product } from "@/lib/types/api"
|
||||
|
||||
export default function FavoritesPage() {
|
||||
const [isHovered, setIsHovered] = useState<number | null>(null)
|
||||
|
||||
const { data: favorites, isLoading, isError } = useFavorites()
|
||||
const { mutate: removeFromFavorites } = useRemoveFromFavorites()
|
||||
const { mutate: addToCart } = useAddToCart()
|
||||
|
||||
const t = {
|
||||
favorites: "Избранные",
|
||||
addToCart: "В корзину",
|
||||
emptyFavorites: "У вас пока нет избранных товаров",
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t.favorites}</h1>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<Skeleton key={i} className="w-full h-64 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isError || !favorites || favorites.length === 0) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t.favorites}</h1>
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<p className="text-2xl text-gray-400">{t.emptyFavorites}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t.favorites}</h1>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{favorites.map((favorite) => (
|
||||
<ProductCard
|
||||
key={favorite.id}
|
||||
productId={favorite.product_id}
|
||||
product={favorite.product}
|
||||
onRemove={() => removeFromFavorites(favorite.product_id)}
|
||||
onAddToCart={() => addToCart({ productId: favorite.product_id })}
|
||||
onHover={setIsHovered}
|
||||
isHovered={isHovered === favorite.product_id}
|
||||
translations={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ProductCardProps {
|
||||
productId: number
|
||||
product?: Product
|
||||
onRemove: () => void
|
||||
onAddToCart: () => void
|
||||
onHover: (id: number | null) => void
|
||||
isHovered: boolean
|
||||
translations: { addToCart: string }
|
||||
}
|
||||
|
||||
function ProductCard({
|
||||
productId,
|
||||
product,
|
||||
onRemove,
|
||||
onAddToCart,
|
||||
onHover,
|
||||
isHovered,
|
||||
translations,
|
||||
}: ProductCardProps) {
|
||||
if (!product) return null
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="group overflow-hidden rounded-xl transition-shadow hover:shadow-lg relative"
|
||||
onMouseEnter={() => onHover(productId)}
|
||||
onMouseLeave={() => onHover(null)}
|
||||
>
|
||||
<Link href={`/product/${product.slug || productId}`} className="block">
|
||||
<div className="relative aspect-square bg-gray-50">
|
||||
{/* Labels */}
|
||||
{product.labels && product.labels.length > 0 && (
|
||||
<div className="absolute top-2 left-2 z-10 flex flex-col gap-1">
|
||||
{product.labels.map((label) => (
|
||||
<Badge
|
||||
key={label.text}
|
||||
className="text-white text-[10px] font-bold uppercase px-2 py-0.5"
|
||||
style={{ backgroundColor: label.bg_color }}
|
||||
>
|
||||
{label.text}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Favorite Button */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
onRemove()
|
||||
}}
|
||||
className="absolute top-2 right-2 z-10 bg-white rounded-full p-2 shadow-md hover:scale-110 transition-transform"
|
||||
>
|
||||
<Heart className="h-5 w-5 fill-red-500 text-red-500" />
|
||||
</button>
|
||||
|
||||
<Image
|
||||
src={product.image || product.images?.[0] || "/placeholder.svg"}
|
||||
alt={product.name}
|
||||
fill
|
||||
className="object-contain p-4 group-hover:scale-105 transition-transform"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="p-3">
|
||||
<h3 className="font-medium text-sm line-clamp-2 mb-2 min-h-[40px]">{product.name}</h3>
|
||||
<div className="space-y-1">
|
||||
<p className="text-lg font-bold">{product.struct_price_text || `$${product.price}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Add to Cart Button */}
|
||||
{isHovered && (
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-white to-transparent">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
onAddToCart()
|
||||
}}
|
||||
className="w-full rounded-xl gap-2"
|
||||
size="sm"
|
||||
>
|
||||
<ShoppingCart className="h-4 w-4" />
|
||||
{translations.addToCart}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
122
app/[locale]/globals.css
Normal file
122
app/[locale]/globals.css
Normal file
@@ -0,0 +1,122 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.21 0.006 285.885);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.705 0.015 286.067);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.92 0.004 286.32);
|
||||
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.552 0.016 285.938);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
68
app/[locale]/layout.tsx
Normal file
68
app/[locale]/layout.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import type React from "react"
|
||||
import type { Metadata } from "next"
|
||||
import { Geist, Geist_Mono } from "next/font/google"
|
||||
import { notFound } from "next/navigation"
|
||||
import { NextIntlClientProvider } from "next-intl"
|
||||
import "./globals.css"
|
||||
import Header from "@/components/layout/Header"
|
||||
import MobileBottomNav from "@/components/layout/MobileBar"
|
||||
import { Toaster } from "@/components/ui/sonner"
|
||||
import { Providers } from "@/context/provider"
|
||||
import AuthWrapper from "@/context/AuthWrapper"
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
})
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
})
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Postshop",
|
||||
description: "E-commerce platform",
|
||||
}
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode
|
||||
params: Promise<{ locale: string }>
|
||||
}
|
||||
|
||||
const locales = ["ru", "tm"]
|
||||
|
||||
export function generateStaticParams() {
|
||||
return locales.map((locale) => ({ locale }))
|
||||
}
|
||||
|
||||
export default async function RootLayout({ children, params }: Props) {
|
||||
const { locale } = await params
|
||||
|
||||
if (!locales.includes(locale)) notFound()
|
||||
|
||||
let messages
|
||||
try {
|
||||
messages = (await import(`../../messages/${locale}.json`)).default
|
||||
} catch {
|
||||
messages = {}
|
||||
}
|
||||
|
||||
return (
|
||||
<html lang={locale} suppressHydrationWarning>
|
||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
||||
<Providers>
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
{/* AuthWrapper handles guest token initialization */}
|
||||
<AuthWrapper locale={locale}>
|
||||
<Header locale={locale} />
|
||||
{children}
|
||||
<MobileBottomNav locale={locale} />
|
||||
<Toaster />
|
||||
</AuthWrapper>
|
||||
</NextIntlClientProvider>
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
123
app/[locale]/me/client-page.tsx
Normal file
123
app/[locale]/me/client-page.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"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"
|
||||
|
||||
interface ProfilePageProps {
|
||||
params: Promise<{ locale: string }>
|
||||
}
|
||||
|
||||
export default function ClientProfilePage(props: ProfilePageProps) {
|
||||
const { data: user, isLoading, error } = useUserProfile()
|
||||
|
||||
const translations = {
|
||||
profile: "Профиль",
|
||||
firstName: "Имя",
|
||||
lastName: "Фамилия",
|
||||
phone: "Номер телефона",
|
||||
email: "Email",
|
||||
logout: "Выйти",
|
||||
loading: "Загрузка...",
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
// Clear auth token
|
||||
window.location.href = "/"
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-4 pt-20">
|
||||
<div className="container mx-auto max-w-2xl">
|
||||
<Skeleton className="h-10 w-48 mb-6" />
|
||||
<Card className="shadow-lg mb-4">
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-32 mb-2" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-4 pt-20">
|
||||
<div className="container mx-auto max-w-2xl">
|
||||
<h1 className="text-3xl font-bold mb-6">{translations.profile}</h1>
|
||||
|
||||
<Card className="shadow-lg mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle>Личная информация</CardTitle>
|
||||
<CardDescription>Ваши данные профиля</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" />
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">{translations.email}</Label>
|
||||
<Input id="email" value={user.email || ""} disabled className="bg-gray-50" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Logout Button */}
|
||||
<Button
|
||||
onClick={handleLogout}
|
||||
variant="destructive"
|
||||
size="lg"
|
||||
className="w-full max-w-md flex items-center justify-center gap-2"
|
||||
>
|
||||
<LogOut className="h-5 w-5" />
|
||||
{translations.logout}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
app/[locale]/me/page.tsx
Normal file
16
app/[locale]/me/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { Metadata } from "next"
|
||||
import ClientProfilePage from "./client-page"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "My Profile | E-Commerce",
|
||||
description: "Manage your profile settings",
|
||||
robots: "noindex, nofollow", // Private page
|
||||
}
|
||||
|
||||
export default function ProfilePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>
|
||||
}) {
|
||||
return <ClientProfilePage params={params} />
|
||||
}
|
||||
66
app/[locale]/me/profile-content.tsx
Normal file
66
app/[locale]/me/profile-content.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
|
||||
interface User {
|
||||
first_name: string
|
||||
last_name: string
|
||||
phone: string
|
||||
email?: string
|
||||
}
|
||||
|
||||
interface ProfileContentProps {
|
||||
locale: string
|
||||
}
|
||||
|
||||
export default function ProfilePageContent({ locale }: ProfileContentProps) {
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const t = {
|
||||
profile: "Профиль",
|
||||
firstName: "Имя",
|
||||
lastName: "Фамилия",
|
||||
phone: "Номер телефона",
|
||||
email: "Email",
|
||||
logout: "Выйти",
|
||||
loading: "Загрузка...",
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUserData = () => {
|
||||
setTimeout(() => {
|
||||
setUser({
|
||||
first_name: "Иван",
|
||||
last_name: "Иванов",
|
||||
phone: "+99361234567",
|
||||
email: "ivan@example.com",
|
||||
})
|
||||
setLoading(false)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
fetchUserData()
|
||||
}, [])
|
||||
|
||||
const handleLogout = () => {
|
||||
window.location.href = "/"
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
||||
<p className="text-lg text-gray-600">{t.loading}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-4 pt-20">
|
||||
<div className="container mx-auto max-w-2xl">
|
||||
<h1 className="text-3xl font-bold mb-6">{t.profile}</h1>
|
||||
{/* Profile content */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
274
app/[locale]/openStore/page.tsx
Normal file
274
app/[locale]/openStore/page.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState } from "react"
|
||||
import { Upload } 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 { useOpenStore } from "@/lib/hooks"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
|
||||
interface OpenStorePageProps {
|
||||
locale?: string
|
||||
translations?: {
|
||||
title: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
phone: string
|
||||
uploadPatent: string
|
||||
submit: string
|
||||
selectedFile: string
|
||||
firstNameRequired: string
|
||||
lastNameRequired: string
|
||||
emailInvalid: string
|
||||
phoneInvalid: string
|
||||
fileRequired: string
|
||||
fileSizeError: string
|
||||
fileTypeError: string
|
||||
}
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
phone: string
|
||||
file: File | null
|
||||
}
|
||||
|
||||
interface FormErrors {
|
||||
firstName?: string
|
||||
lastName?: string
|
||||
email?: string
|
||||
phone?: string
|
||||
file?: string
|
||||
}
|
||||
|
||||
export default function OpenStorePage({ locale = "ru", translations }: OpenStorePageProps) {
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "+993",
|
||||
file: null,
|
||||
})
|
||||
const [errors, setErrors] = useState<FormErrors>({})
|
||||
const [fileName, setFileName] = useState("")
|
||||
|
||||
const { mutate: submitOpenStore, isPending: loading } = useOpenStore()
|
||||
const { toast } = useToast()
|
||||
|
||||
const t = translations || {
|
||||
title: "Форма подачи заявления на открытие магазина",
|
||||
firstName: "Имя",
|
||||
lastName: "Фамилия",
|
||||
email: "Email",
|
||||
phone: "Телефон",
|
||||
uploadPatent: "Загрузите патент на розничную торговлю (PDF, JPG)",
|
||||
submit: "Отправить",
|
||||
selectedFile: "Выбранный файл",
|
||||
firstNameRequired: "Имя обязательно",
|
||||
lastNameRequired: "Фамилия обязательна",
|
||||
emailInvalid: "Некорректный email",
|
||||
phoneInvalid: "Некорректный номер телефона",
|
||||
fileRequired: "Патент обязателен",
|
||||
fileSizeError: "Файл слишком большой (макс. 25MB)",
|
||||
fileTypeError: "Только PDF и JPG документы",
|
||||
}
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: FormErrors = {}
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = t.firstNameRequired
|
||||
}
|
||||
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = t.lastNameRequired
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
newErrors.email = t.emailInvalid
|
||||
}
|
||||
|
||||
const phoneRegex = /^\+?[0-9]{6,15}$/
|
||||
if (!phoneRegex.test(formData.phone)) {
|
||||
newErrors.phone = t.phoneInvalid
|
||||
}
|
||||
|
||||
if (!formData.file) {
|
||||
newErrors.file = t.fileRequired
|
||||
} else {
|
||||
const allowedTypes = ["image/jpeg", "image/jpg", "application/pdf"]
|
||||
if (!allowedTypes.includes(formData.file.type)) {
|
||||
newErrors.file = t.fileTypeError
|
||||
}
|
||||
if (formData.file.size > 25 * 1024 * 1024) {
|
||||
newErrors.file = t.fileSizeError
|
||||
}
|
||||
}
|
||||
|
||||
setErrors(newErrors)
|
||||
return Object.keys(newErrors).length === 0
|
||||
}
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target
|
||||
setFormData((prev) => ({ ...prev, [name]: value }))
|
||||
if (errors[name as keyof FormErrors]) {
|
||||
setErrors((prev) => ({ ...prev, [name]: undefined }))
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) {
|
||||
setFormData((prev) => ({ ...prev, file }))
|
||||
setFileName(file.name)
|
||||
if (errors.file) {
|
||||
setErrors((prev) => ({ ...prev, file: undefined }))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!validateForm()) return
|
||||
|
||||
if (formData.file) {
|
||||
submitOpenStore(
|
||||
{
|
||||
firstName: formData.firstName,
|
||||
lastName: formData.lastName,
|
||||
email: formData.email,
|
||||
phone: formData.phone,
|
||||
patentFile: formData.file,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Your store request has been submitted successfully",
|
||||
})
|
||||
setFormData({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "+993",
|
||||
file: null,
|
||||
})
|
||||
setFileName("")
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error?.message || "Failed to submit store request",
|
||||
variant: "destructive",
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-md shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-center">{t.title}</CardTitle>
|
||||
<CardDescription className="text-center">Заполните форму для подачи заявления</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* First Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">{t.firstName}</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
className={errors.firstName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.firstName && <p className="text-sm text-red-500">{errors.firstName}</p>}
|
||||
</div>
|
||||
|
||||
{/* Last Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">{t.lastName}</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
className={errors.lastName ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.lastName && <p className="text-sm text-red-500">{errors.lastName}</p>}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">{t.email}</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
className={errors.email ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">{t.phone}</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
placeholder="+99361111111"
|
||||
className={errors.phone ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.phone && <p className="text-sm text-red-500">{errors.phone}</p>}
|
||||
</div>
|
||||
|
||||
{/* File Upload */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="file">{t.uploadPatent}</Label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Input id="file" type="file" accept=".pdf,.jpg,.jpeg" onChange={handleFileChange} className="hidden" />
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full bg-transparent"
|
||||
onClick={() => document.getElementById("file")?.click()}
|
||||
>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
{t.uploadPatent}
|
||||
</Button>
|
||||
{fileName && (
|
||||
<p className="text-sm text-gray-600">
|
||||
{t.selectedFile}: {fileName}
|
||||
</p>
|
||||
)}
|
||||
{errors.file && <p className="text-sm text-red-500">{errors.file}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Загрузка..." : t.submit}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
46
app/[locale]/orders/orders-content.tsx
Normal file
46
app/[locale]/orders/orders-content.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
// ... existing types and code ...
|
||||
|
||||
interface OrdersContentProps {
|
||||
locale: string
|
||||
}
|
||||
|
||||
export default function OrdersPageContent({ locale }: OrdersContentProps) {
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
|
||||
const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null)
|
||||
const [activeTab, setActiveTab] = useState<"active" | "completed">("active")
|
||||
|
||||
const t = {
|
||||
orders: "Заказы",
|
||||
active: "Активные",
|
||||
completed: "Завершенные",
|
||||
cancelOrder: "Отменить заказ",
|
||||
areYouSure: "Вы уверены?",
|
||||
yes: "Да",
|
||||
no: "Нет",
|
||||
orderNumber: "№",
|
||||
}
|
||||
|
||||
const handleCancelOrder = (orderId: number) => {
|
||||
setSelectedOrderId(orderId)
|
||||
setIsDeleteModalOpen(true)
|
||||
}
|
||||
|
||||
const confirmCancelOrder = async () => {
|
||||
if (selectedOrderId) {
|
||||
console.log("Canceling order:", selectedOrderId)
|
||||
setIsDeleteModalOpen(false)
|
||||
setSelectedOrderId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 min-h-screen">
|
||||
<h1 className="text-3xl font-bold mb-6">{t.orders}</h1>
|
||||
{/* Orders content */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
231
app/[locale]/orders/orders-page-client.tsx
Normal file
231
app/[locale]/orders/orders-page-client.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
"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 {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { useOrders, useCancelOrder } from "@/lib/hooks"
|
||||
import type { Order } from "@/lib/types/api"
|
||||
|
||||
interface OrdersPageProps {
|
||||
locale?: string
|
||||
}
|
||||
|
||||
export default function OrdersPageClient({ locale }: OrdersPageProps) {
|
||||
const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false)
|
||||
const [orderToCancel, setOrderToCancel] = useState<Order | null>(null)
|
||||
|
||||
const { data: orders, isLoading, isError } = useOrders()
|
||||
const { mutate: cancelOrder, isPending: isCancellingOrder } = useCancelOrder()
|
||||
|
||||
const handleCancelOrder = (order: Order) => {
|
||||
setOrderToCancel(order)
|
||||
setIsCancelDialogOpen(true)
|
||||
}
|
||||
|
||||
const confirmCancelOrder = () => {
|
||||
if (orderToCancel) {
|
||||
cancelOrder(orderToCancel.id, {
|
||||
onSuccess: () => {
|
||||
setIsCancelDialogOpen(false)
|
||||
setOrderToCancel(null)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: Order["status"]) => {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return <Badge variant="outline">{status}</Badge>
|
||||
case "processing":
|
||||
return <Badge variant="secondary">{status}</Badge>
|
||||
case "shipped":
|
||||
return <Badge variant="default">{status}</Badge>
|
||||
case "delivered":
|
||||
return <Badge className="bg-green-600">{status}</Badge>
|
||||
case "cancelled":
|
||||
return <Badge variant="destructive">{status}</Badge>
|
||||
default:
|
||||
return <Badge>{status}</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const activeOrders = orders?.filter((o) => ["pending", "processing", "shipped"].includes(o.status)) || []
|
||||
const completedOrders = orders?.filter((o) => ["delivered", "cancelled"].includes(o.status)) || []
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4">
|
||||
<h1 className="text-3xl font-bold mb-6">My Orders</h1>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-10 w-40" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-64 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="bg-red-50 p-4 rounded-lg border border-red-200">
|
||||
<p className="text-red-600">Failed to load orders. Please try again later.</p>
|
||||
</div>
|
||||
) : !orders || orders.length === 0 ? (
|
||||
<p className="text-gray-500">You have no orders yet.</p>
|
||||
) : (
|
||||
<Tabs defaultValue="active" className="w-full">
|
||||
<TabsList className="mb-6">
|
||||
<TabsTrigger value="active">Active Orders ({activeOrders.length})</TabsTrigger>
|
||||
<TabsTrigger value="completed">Completed Orders ({completedOrders.length})</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="active">
|
||||
{activeOrders.length === 0 ? (
|
||||
<p className="text-gray-500">You have no active orders.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{activeOrders.map((order) => (
|
||||
<Card key={order.id} className="p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="text-lg font-semibold">Order #{order.id}</h3>
|
||||
{getStatusBadge(order.status)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<p className="text-sm text-gray-600">
|
||||
Ordered: {new Date(order.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
{order.estimated_delivery && (
|
||||
<p className="text-sm text-gray-600">Est. Delivery: {order.estimated_delivery}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2 mb-3">
|
||||
{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"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{item.product?.name}</p>
|
||||
<p className="text-xs text-gray-500">Qty: {item.quantity}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t pt-3">
|
||||
<div className="flex justify-between font-semibold">
|
||||
<span>Total</span>
|
||||
<span>{order.total_formatted || `$${order.total}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => handleCancelOrder(order)}
|
||||
disabled={isCancellingOrder || order.status === "shipped" || order.status === "delivered"}
|
||||
>
|
||||
Cancel Order
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="completed">
|
||||
{completedOrders.length === 0 ? (
|
||||
<p className="text-gray-500">You have no completed orders.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{completedOrders.map((order) => (
|
||||
<Card key={order.id} className="p-4">
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="text-lg font-semibold">Order #{order.id}</h3>
|
||||
{getStatusBadge(order.status)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<p className="text-sm text-gray-600">
|
||||
Ordered: {new Date(order.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
{order.updated_at && (
|
||||
<p className="text-sm text-gray-600">
|
||||
Completed: {new Date(order.updated_at).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2 mb-3">
|
||||
{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"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{item.product?.name}</p>
|
||||
<p className="text-xs text-gray-500">Qty: {item.quantity}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t pt-3">
|
||||
<div className="flex justify-between font-semibold">
|
||||
<span>Total</span>
|
||||
<span>{order.total_formatted || `$${order.total}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)}
|
||||
|
||||
<Dialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cancel Order #{orderToCancel?.id}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to cancel this order? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsCancelDialogOpen(false)}>
|
||||
Keep Order
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmCancelOrder} disabled={isCancellingOrder}>
|
||||
{isCancellingOrder ? "Cancelling..." : "Cancel Order"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
app/[locale]/orders/page.tsx
Normal file
20
app/[locale]/orders/page.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { Metadata } from "next"
|
||||
import OrdersPageClient from "./orders-page-client"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "My Orders | E-Commerce",
|
||||
description: "View your order history",
|
||||
robots: "noindex, nofollow", // Private page
|
||||
}
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{
|
||||
locale: string
|
||||
}>
|
||||
}
|
||||
|
||||
export default async function OrdersPage({ params }: PageProps) {
|
||||
const resolvedParams = await params
|
||||
|
||||
return <OrdersPageClient locale={resolvedParams.locale} />
|
||||
}
|
||||
35
app/[locale]/page.tsx
Normal file
35
app/[locale]/page.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import type { Metadata } from "next"
|
||||
import HomePage from "@/components/home/HomePage"
|
||||
|
||||
export const revalidate = 300
|
||||
|
||||
export async function generateMetadata({
|
||||
params
|
||||
}: {
|
||||
params: Promise<{ locale: string }>
|
||||
}): Promise<Metadata> {
|
||||
const { locale } = await params
|
||||
|
||||
const meta = {
|
||||
ru: {
|
||||
title: "Интернет магазин - Лучшие товары по низким ценам",
|
||||
description: "Качественные товары с быстрой доставкой по всей стране"
|
||||
},
|
||||
tm: {
|
||||
title: "Satym dükanı - Iň gowy harytlar aşak bahada",
|
||||
description: "Suw harytly towarnama. Elektrika, eşik, ev we bag"
|
||||
}
|
||||
}
|
||||
|
||||
const { title, description } = meta[locale as keyof typeof meta] || meta.ru
|
||||
|
||||
return {
|
||||
title,
|
||||
description,
|
||||
openGraph: { type: "website", locale, title, description }
|
||||
}
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
return <HomePage />
|
||||
}
|
||||
292
app/[locale]/product/[slug]/ProductPageContent.tsx
Normal file
292
app/[locale]/product/[slug]/ProductPageContent.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { Minus, Plus, Heart, ShoppingCart, Store } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import placeholder from "@/public/jb.webp"
|
||||
import { useProduct, useCategories } from "@/lib/hooks"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
||||
interface ProductDetailProps {
|
||||
slug: string
|
||||
}
|
||||
|
||||
const ProductPageContent = ({ slug }: ProductDetailProps) => {
|
||||
const [isClient, setIsClient] = useState(false)
|
||||
const [selectedImage, setSelectedImage] = useState(0)
|
||||
const [quantity, setQuantity] = useState(1)
|
||||
const [isFavorite, setIsFavorite] = useState(false)
|
||||
const [isInCart, setIsInCart] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const { data: product, isLoading: productLoading, error } = useProduct(slug)
|
||||
const { data: categoriesData } = useCategories()
|
||||
|
||||
if (!isClient) {
|
||||
typeof window !== "undefined" && setIsClient(true)
|
||||
}
|
||||
|
||||
const t = {
|
||||
addToCart: "Add to Cart",
|
||||
goToCart: "Go to Cart",
|
||||
price: "Price:",
|
||||
aboutProduct: "About Product",
|
||||
brand: "Brand",
|
||||
model: "Model",
|
||||
description: "Product Description",
|
||||
recommended: "Recommended Products",
|
||||
store: "Store",
|
||||
writeToStore: "Write to Store",
|
||||
color: "Color:",
|
||||
}
|
||||
|
||||
const handleAddToCart = async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
// TODO: implement cart API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
setIsInCart(true)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuantityChange = async (newQuantity: number) => {
|
||||
if (newQuantity < 1) return
|
||||
setIsLoading(true)
|
||||
try {
|
||||
setQuantity(newQuantity)
|
||||
// TODO: implement cart quantity update API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 300))
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleFavorite = () => {
|
||||
setIsFavorite(!isFavorite)
|
||||
// TODO: implement favorites API call
|
||||
}
|
||||
|
||||
if (productLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<div className="flex-1 max-w-2xl">
|
||||
<Skeleton className="aspect-square w-full rounded-2xl" />
|
||||
<div className="mt-4 flex gap-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="w-16 h-16 rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-6">
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !product) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 text-center">
|
||||
<h2 className="text-2xl font-bold text-red-600">Product not found</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Product Images */}
|
||||
<div className="flex-1 max-w-2xl">
|
||||
<div className="relative">
|
||||
<div className="relative aspect-square w-full rounded-2xl overflow-hidden bg-gray-50">
|
||||
{product.labels && product.labels.length > 0 && (
|
||||
<div className="absolute top-0 right-0 z-10 flex flex-col gap-1">
|
||||
{product.labels.map((label) => (
|
||||
<Badge
|
||||
key={label.text}
|
||||
className="rounded-l-md rounded-r-none text-white text-xs font-bold uppercase"
|
||||
style={{ backgroundColor: label.bg_color }}
|
||||
>
|
||||
{label.text}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Image
|
||||
src={product.images?.[selectedImage] || product.image || placeholder}
|
||||
alt={product.name}
|
||||
fill
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail Images */}
|
||||
{product.images && product.images.length > 1 && (
|
||||
<div className="mt-4 flex gap-2 overflow-x-auto pb-2">
|
||||
{product.images.map((image, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setSelectedImage(index)}
|
||||
className={`relative w-16 h-16 rounded overflow-hidden border ${
|
||||
selectedImage === index ? "border-black" : "border-transparent"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={image || "/placeholder.svg"}
|
||||
alt={`${product.name} thumbnail ${index + 1}`}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-2">{product.name}</h1>
|
||||
{product.category && (
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<span className="text-sm text-gray-500">Category: {product.category}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Product Info Table */}
|
||||
<Card className="p-4 rounded-xl">
|
||||
<h3 className="text-xl font-semibold mb-4">{t.aboutProduct}</h3>
|
||||
<div className="space-y-3">
|
||||
{product.brand && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">{t.brand}</span>
|
||||
<span className="font-medium">{product.brand}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
{product.stock !== undefined && (
|
||||
<>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-gray-500">Stock</span>
|
||||
<span className="font-medium">{product.stock}</span>
|
||||
</div>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Description */}
|
||||
{product.description && (
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-3">{t.description}</h3>
|
||||
<p className="text-gray-700 leading-relaxed">{product.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Price & Actions Sidebar */}
|
||||
<div className="lg:w-[420px] space-y-4">
|
||||
<Card className="p-6 rounded-xl shadow-lg">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-lg text-gray-500">{t.price}</span>
|
||||
<span className="text-3xl font-bold">${product.price}</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{isInCart ? (
|
||||
<div className="space-y-3">
|
||||
<Link href="/cart">
|
||||
<Button size="lg" className="w-full rounded-xl text-lg font-bold bg-green-600 hover:bg-green-700">
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
{t.goToCart}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleQuantityChange(quantity - 1)}
|
||||
disabled={quantity === 1 || isLoading}
|
||||
className="rounded-xl bg-blue-50 flex-shrink-0"
|
||||
>
|
||||
<Minus className="h-5 w-5" />
|
||||
</Button>
|
||||
<div className="flex-1 text-center font-semibold text-lg">{quantity}</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handleQuantityChange(quantity + 1)}
|
||||
disabled={isLoading}
|
||||
className="rounded-xl bg-blue-50 flex-shrink-0"
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handleAddToCart}
|
||||
disabled={isLoading}
|
||||
className="w-full rounded-xl text-lg font-bold"
|
||||
>
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
{t.addToCart}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={handleToggleFavorite}
|
||||
className={`w-full rounded-xl ${
|
||||
isFavorite ? "bg-red-50 border-red-200 hover:bg-red-100" : "bg-blue-50"
|
||||
}`}
|
||||
>
|
||||
<Heart className={`h-6 w-6 ${isFavorite ? "fill-red-500 text-red-500" : ""}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Seller Card */}
|
||||
<Card className="p-6 rounded-xl">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Avatar className="w-14 h-14">
|
||||
<AvatarFallback>
|
||||
<Store className="h-6 w-6" />
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">{t.store}</p>
|
||||
<h4 className="text-xl font-bold hover:text-primary cursor-pointer">Official Store</h4>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="lg" disabled className="w-full rounded-xl bg-transparent">
|
||||
{t.writeToStore}
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductPageContent
|
||||
39
app/[locale]/product/[slug]/page.tsx
Normal file
39
app/[locale]/product/[slug]/page.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { Metadata } from "next"
|
||||
import { notFound } from "next/navigation"
|
||||
import ProductPageContent from "./ProductPageContent"
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ locale: string; slug: string }>
|
||||
}
|
||||
|
||||
export const revalidate = 3600 // ISR: Revalidate every hour
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { locale, slug } = await params
|
||||
|
||||
return {
|
||||
title: `Product ${slug} | E-Commerce`,
|
||||
description: `View details for product ${slug}`,
|
||||
openGraph: {
|
||||
locale,
|
||||
type: "website",
|
||||
title: `Product ${slug} | E-Commerce`,
|
||||
description: `View details for product ${slug}`,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
// Generate static params for popular products
|
||||
return [{ slug: "nike-air-max" }, { slug: "adidas-ultraboost" }]
|
||||
}
|
||||
|
||||
export default async function ProductPage(props: Props) {
|
||||
const params = await props.params
|
||||
|
||||
if (!params.slug) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return <ProductPageContent slug={params.slug} />
|
||||
}
|
||||
9
app/[locale]/product/[slug]/product-content.tsx
Normal file
9
app/[locale]/product/[slug]/product-content.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
"use client"
|
||||
export default function ProductPageContent({ slug }: { slug: string }) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl font-bold">Product: {slug}</h1>
|
||||
{/* Product content will go here */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user