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

Contect with order api

Browse Source
This commit is contained in:
Jelaletdin12
2025-12-09 23:01:18 +05:00
parent d6c163dd06
commit 14f9bd400e
18 changed files with 910 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,11 +18,12 @@ import type { DeliveryType, PaymentType } from "@/lib/types/api";
export default function CartPage() { export default function CartPage() {
const [isClient, setIsClient] = useState(false); const [isClient, setIsClient] = useState(false);
const [paymentType, setPaymentType] = useState<PaymentType | null>(null); const [paymentType, setPaymentType] = useState<PaymentType | null>(null);
const [deliveryType, setDeliveryType] = useState<DeliveryType>("SELECTED_DELIVERY"); const [deliveryType, setDeliveryType] =
useState<DeliveryType>("SELECTED_DELIVERY");
const [selectedRegion, setSelectedRegion] = useState<string>(""); const [selectedRegion, setSelectedRegion] = useState<string>("");
const [selectedProvince, setSelectedProvince] = useState<number | null>(null); const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
const [note, setNote] = useState<string>(""); const [note, setNote] = useState<string>("");
const [phone, setPhone] = useState<string>("");
const router = useRouter(); const router = useRouter();
const t = useTranslations(); const t = useTranslations();
@@ -48,7 +49,10 @@ export default function CartPage() {
}, {} as Record<string, typeof provinces>); }, {} as Record<string, typeof provinces>);
}, [provinces]); }, [provinces]);
const availableRegions = useMemo(() => Object.keys(regionGroups), [regionGroups]); const availableRegions = useMemo(
() => Object.keys(regionGroups),
[regionGroups]
);
// Memoize items grouped by seller // Memoize items grouped by seller
const itemsBySeller = useMemo(() => { const itemsBySeller = useMemo(() => {
@@ -86,7 +90,9 @@ export default function CartPage() {
return; return;
} }
const selectedProvinceData = provinces.find((p) => p.id === selectedProvince); const selectedProvinceData = provinces.find(
(p) => p.id === selectedProvince
);
if (!selectedProvinceData) return; if (!selectedProvinceData) return;
const orderData = userStore.getOrderData(); const orderData = userStore.getOrderData();
@@ -99,7 +105,7 @@ export default function CartPage() {
createOrder( createOrder(
{ {
customer_name: orderData.customer_name, customer_name: orderData.customer_name,
customer_phone: orderData.customer_phone, customer_phone: phone,
customer_address: selectedProvinceData.name, customer_address: selectedProvinceData.name,
shipping_method: deliveryType === "PICK_UP" ? "pickup" : "standart", shipping_method: deliveryType === "PICK_UP" ? "pickup" : "standart",
payment_type_id: paymentType.id, payment_type_id: paymentType.id,
@@ -141,48 +147,52 @@ export default function CartPage() {
<div className="flex flex-col md:flex-row gap-6"> <div className="flex flex-col md:flex-row gap-6">
<div className="flex-1"> <div className="flex-1">
<Card className="p-6 rounded-xl"> <Card className="p-6 rounded-xl">
{Object.entries(itemsBySeller).map(([sellerId, { seller, items }]) => ( {Object.entries(itemsBySeller).map(
<div key={sellerId} className="mb-6"> ([sellerId, { seller, items }]) => (
<p className="text-base font-semibold mb-3">{seller.name}</p> <div key={sellerId} className="mb-6">
<div className="space-y-4"> <p className="text-base font-semibold mb-3">{seller.name}</p>
{items.map((item) => { <div className="space-y-4">
const price = parseFloat(item.product.price_amount || "0"); {items.map((item) => {
const quantity = item.product_quantity; const price = parseFloat(
const total = price * quantity; item.product.price_amount || "0"
);
const quantity = item.product_quantity;
const total = price * quantity;
return ( return (
<CartItemCard <CartItemCard
key={item.id} key={item.id}
item={{ item={{
...item, ...item,
quantity: quantity, quantity: quantity,
price: price, price: price,
total: total, total: total,
seller: seller, seller: seller,
price_formatted: `${item.product.price_amount} TMT`, price_formatted: `${item.product.price_amount} TMT`,
sub_total_formatted: `${item.product.price_amount} TMT`, sub_total_formatted: `${item.product.price_amount} TMT`,
total_formatted: `${total.toFixed(2)} TMT`, total_formatted: `${total.toFixed(2)} TMT`,
discount_formatted: "0 TMT", discount_formatted: "0 TMT",
product: { product: {
...item.product, ...item.product,
image: image:
item.product.media?.[0]?.images_800x800 || item.product.media?.[0]?.images_800x800 ||
item.product.media?.[0]?.thumbnail, item.product.media?.[0]?.thumbnail,
images: images:
item.product.media?.map( item.product.media?.map(
(m) => m.images_800x800 || m.thumbnail (m) => m.images_800x800 || m.thumbnail
) || [], ) || [],
}, },
}} }}
/> />
); );
})} })}
</div>
{Object.entries(itemsBySeller).length > 1 && (
<Separator className="mt-4" />
)}
</div> </div>
{Object.entries(itemsBySeller).length > 1 && ( )
<Separator className="mt-4" /> )}
)}
</div>
))}
</Card> </Card>
</div> </div>
@@ -217,8 +227,10 @@ export default function CartPage() {
onNoteChange={setNote} onNoteChange={setNote}
onCompleteOrder={handleCompleteOrder} onCompleteOrder={handleCompleteOrder}
isLoading={isCreatingOrder} isLoading={isCreatingOrder}
phone={phone}
onPhoneChange={setPhone}
/> />
</div> </div>
</div> </div>
); );
} }

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

@@ -1,76 +1,17 @@
"use client"; "use client";
import {
useFavorites, import { useFavorites } from "@/lib/hooks";
useAddToCart,
useRemoveFromFavorites,
} from "@/lib/hooks";
import { useState, useCallback, useMemo } 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 { Skeleton } from "@/components/ui/skeleton";
import { useToast } from "@/hooks/use-toast";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import ProductCard from "@/features/home/components/ProductCard";
import type { Favorite } from "@/lib/types/api"; import type { Favorite } from "@/lib/types/api";
export default function FavoritesPage() { export default function FavoritesPage() {
const [isHovered, setIsHovered] = useState<number | null>(null);
const { toast } = useToast();
const t = useTranslations(); const t = useTranslations();
const { data: favorites, isLoading, isError } = useFavorites(); const { data: favorites, isLoading, isError } = useFavorites();
const { mutate: removeFromFavorites, isPending: isRemoving } =
useRemoveFromFavorites();
const { mutate: addToCart, isPending: isAddingToCart } = useAddToCart();
const handleRemoveFromFavorites = useCallback( if (isLoading) {
(productId: number) => { return (
removeFromFavorites(productId, {
onSuccess: () => {
toast({
title: t("removed_from_favorites"),
});
},
onError: (error) => {
toast({
title: t("error"),
description: error.message,
variant: "destructive",
});
},
});
},
[removeFromFavorites, toast, t]
);
const handleAddToCart = useCallback(
(productId: number) => {
addToCart(
{ productId },
{
onSuccess: () => {
toast({
title: t("added_to_cart"),
});
},
onError: (error) => {
toast({
title: t("error"),
description: error.message,
variant: "destructive",
});
},
}
);
},
[addToCart, toast, t]
);
const loadingSkeleton = useMemo(
() => (
<div className="container mx-auto px-4 py-8 min-h-screen"> <div className="container mx-auto px-4 py-8 min-h-screen">
<h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1> <h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
@@ -79,17 +20,12 @@ export default function FavoritesPage() {
))} ))}
</div> </div>
</div> </div>
), );
[t]
);
if (isLoading) {
return loadingSkeleton;
} }
if (isError || !favorites || favorites.length === 0) { if (isError || !favorites || favorites.length === 0) {
return ( return (
<div className="container mx-auto px-4 py-8 min-h-screen"> <div className="container mx-auto px-6 py-8 bg-white">
<h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1> <h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
<div className="flex items-center justify-center min-h-[60vh]"> <div className="flex items-center justify-center min-h-[60vh]">
<p className="text-2xl text-gray-400">{t("empty_favorites")}</p> <p className="text-2xl text-gray-400">{t("empty_favorites")}</p>
@@ -99,145 +35,48 @@ export default function FavoritesPage() {
} }
return ( return (
<div className="container mx-auto px-4 py-8 min-h-screen"> <div className="container mx-auto px-6
<h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1> md:px-4 lg:px-6 pb-12 space-y-8 max-w-[1504px]
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> ">
{favorites.map((favorite: Favorite) => ( <h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">{t("favorite_products")}</h1>
<ProductCard <div className="bg-white grid grid-cols-2 sm:grid-cols-3 rounded-lg md:grid-cols-4 lg:grid-cols-5 gap-3 p-4">
key={favorite.product.id} {favorites.map((favorite: Favorite) => {
productId={favorite.product.id} const product = favorite.product;
product={favorite.product}
onRemove={() => handleRemoveFromFavorites(favorite.product.id)} const allImages = product.media
onAddToCart={() => handleAddToCart(favorite.product.id)} ?.map(
onHover={setIsHovered} (media) =>
isHovered={isHovered === favorite.product.id} media.images_800x800 ||
isRemoving={isRemoving} media.images_720x720 ||
isAddingToCart={isAddingToCart} media.images_400x400 ||
/> media.thumbnail
))} )
.filter(Boolean) || ["/placeholder-product.jpg"];
const formattedPrice = product.price_amount
? `${parseFloat(product.price_amount).toFixed(2)} TMT`
: "Price not available";
return (
<ProductCard
key={product.id}
id={product.id}
name={product.name}
price={
product.price_amount ? parseFloat(product.price_amount) : null
}
struct_price_text={formattedPrice}
images={allImages}
labels={[]}
price_color="#0059ff"
height={360}
width={250}
button={true}
stock={product.stock}
/>
);
})}
</div> </div>
</div> </div>
); );
} }
interface Product {
id: number;
name: string;
slug: string;
price_amount: string;
old_price_amount?: string | null;
media: Array<{
thumbnail: string;
images_400x400: string;
images_720x720: string;
images_800x800: string;
images_1200x1200: string;
}>;
stock: number;
}
interface ProductCardProps {
productId: number;
product: Product;
onRemove: () => void;
onAddToCart: () => void;
onHover: (id: number | null) => void;
isHovered: boolean;
isRemoving: boolean;
isAddingToCart: boolean;
}
function ProductCard({
productId,
product,
onRemove,
onAddToCart,
onHover,
isHovered,
isRemoving,
isAddingToCart,
}: ProductCardProps) {
const t = useTranslations();
if (!product) return null;
const imageUrl =
product.media?.[0]?.images_800x800 ||
product.media?.[0]?.thumbnail ||
"/placeholder.svg";
const price = `${parseFloat(product.price_amount).toFixed(2)} TMT`;
const oldPrice = product.old_price_amount
? `${parseFloat(product.old_price_amount).toFixed(2)} TMT`
: null;
return (
<Card
className="group overflow-hidden rounded-xl transition-shadow hover:shadow-lg relative border-none"
onMouseEnter={() => onHover(productId)}
onMouseLeave={() => onHover(null)}
>
<Link href={`/product/${productId || product.slug}`} className="block">
<div className="relative aspect-square bg-gray-50">
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onRemove();
}}
disabled={isRemoving}
className="absolute top-2 right-2 z-10 bg-white rounded-full p-2 shadow-md hover:scale-110 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
>
<Heart className="h-5 w-5 fill-red-500 text-red-500" />
</button>
<Image
src={imageUrl}
alt={product.name}
fill
sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
className="object-contain p-4 group-hover:scale-105 transition-transform"
priority={false}
/>
{product.stock === 0 && (
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
<Badge variant="secondary" className="text-sm">
{t("out_of_stock")}
</Badge>
</div>
)}
</div>
<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">
{oldPrice && (
<p className="text-sm text-gray-400 line-through">{oldPrice}</p>
)}
<p className="text-lg font-bold text-blue-600">{price}</p>
</div>
</div>
</Link>
{isHovered && product.stock > 0 && (
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-white via-white to-transparent">
<Button
onClick={(e) => {
e.preventDefault();
onAddToCart();
}}
disabled={isAddingToCart}
className="w-full rounded-xl gap-2"
size="sm"
>
<ShoppingCart className="h-4 w-4" />
{t("add_to_cart")}
</Button>
</div>
)}
</Card>
);
}

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

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

42
components/layout/Header.tsx
View File

@@ -3,14 +3,8 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { X, Menu, Search, Store, LogOut, User as UserIcon } from "lucide-react"; import { X, Search, Store, User as UserIcon } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Logo from "@/public/logo.webp"; import Logo from "@/public/logo.webp";
import CategoryMenu from "./ui/CategoryMenu"; import CategoryMenu from "./ui/CategoryMenu";
import SearchBar from "./ui/SearchBar"; import SearchBar from "./ui/SearchBar";
@@ -65,10 +59,16 @@ export default function Header({ locale = "ru" }: HeaderProps) {
<> <>
<header className="sticky top-0 z-50 w-full border-b bg-white shadow-sm"> <header className="sticky top-0 z-50 w-full border-b bg-white shadow-sm">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between gap-4"> <div className="flex h-16 items-center justify-between gap-3">
<Link href="/" className="shrink-0"> <Link href="/" className="shrink-0">
<div className="relative h-8 w-[180px]"> <div className="relative h-8 w-[180px]">
<Image src={Logo} alt="Logo" fill className="object-contain" priority /> <Image
src={Logo}
alt="Logo"
fill
className="object-contain"
priority
/>
</div> </div>
</Link> </Link>
@@ -77,12 +77,16 @@ export default function Header({ locale = "ru" }: HeaderProps) {
className="hidden gap-2 rounded-xl font-bold sm:flex hover:bg-[#005bff] bg-[#005bff] text-white" className="hidden gap-2 rounded-xl font-bold sm:flex hover:bg-[#005bff] bg-[#005bff] text-white"
size="lg" size="lg"
> >
{isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />} {isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />}
{t("common.catalog")} {t("common.catalog")}
</Button> </Button>
<div className="flex items-center gap-2 sm:hidden"> <div className="flex items-center gap-2 sm:hidden">
<Button variant="ghost" size="icon" onClick={() => setIsMobileSearchOpen(true)}> <Button
variant="ghost"
size="icon"
onClick={() => setIsMobileSearchOpen(true)}
>
<Search className="h-5 w-5" /> <Search className="h-5 w-5" />
</Button> </Button>
<LanguageSelector /> <LanguageSelector />
@@ -99,20 +103,13 @@ export default function Header({ locale = "ru" }: HeaderProps) {
locale={locale} locale={locale}
/> />
<ActionButtons <ActionButtons
isAuthenticated={isAuthenticated} isAuthenticated={isAuthenticated}
onAuthClick={handleAuthClick} onAuthClick={handleAuthClick}
/> />
</div> </div>
<Link href="/openStore">
<Button variant="ghost" size="sm" className="relative flex gap-0.5 h-auto pb-2">
<Store className="h-5 w-5 text-gray-600" />
<span className="text-xs text-gray-700">{t("common.openStore")}</span>
</Button>
</Link>
</div> </div>
</header> </header>
@@ -126,10 +123,7 @@ export default function Header({ locale = "ru" }: HeaderProps) {
locale={locale} locale={locale}
/> />
<AuthDialog <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
isOpen={isLoginOpen}
onClose={() => setIsLoginOpen(false)}
/>
</> </>
); );
} }

123
components/layout/ui/ActionButtons.tsx
View File

@@ -3,7 +3,7 @@
import { useMemo } from "react"; import { useMemo } from "react";
import type React from "react"; import type React from "react";
import Link from "next/link"; import Link from "next/link";
import { User, Truck, Heart, ShoppingCart, LogOut } from "lucide-react"; import { User, Truck, Heart, Store, LogOut } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { import {
@@ -16,7 +16,12 @@ import { useCart, useFavorites, useOrders } from "@/lib/hooks";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useLogout } from "@/lib/hooks/useAuth"; import { useLogout } from "@/lib/hooks/useAuth";
import { CartIcon, FavoriteIcon, OrderIcon, ProfileIcon } from "@/components/icons"; import {
CartIcon,
FavoriteIcon,
OrderIcon,
ProfileIcon,
} from "@/components/icons";
interface ActionButtonsProps { interface ActionButtonsProps {
isAuthenticated: boolean; isAuthenticated: boolean;
@@ -34,15 +39,15 @@ interface ActionButtonData {
isLoading?: boolean; isLoading?: boolean;
} }
export default function ActionButtons({ export default function ActionButtons({
isAuthenticated, isAuthenticated,
onAuthClick, onAuthClick,
isLoading: authLoading, isLoading: authLoading,
locale = "ru" locale = "ru",
}: ActionButtonsProps) { }: ActionButtonsProps) {
const t = useTranslations(); const t = useTranslations();
const { mutate: logout, isPending: isLoggingOut } = useLogout(); const { mutate: logout, isPending: isLoggingOut } = useLogout();
const { data: cartData, isLoading: cartLoading } = useCart(); const { data: cartData, isLoading: cartLoading } = useCart();
const { data: favoritesData, isLoading: favoritesLoading } = useFavorites(); const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
const { data: ordersData, isLoading: ordersLoading } = useOrders(); const { data: ordersData, isLoading: ordersLoading } = useOrders();
@@ -69,29 +74,46 @@ export default function ActionButtons({
logout(); logout();
}; };
const buttons: ActionButtonData[] = useMemo(() => [ const buttons: ActionButtonData[] = useMemo(
{ () => [
icon: <OrderIcon />, {
label: t("common.orders"), icon: <Store />,
href: "/orders", label: t("common.openStore"),
badgeCount: ordersCount, href: "/openStore",
isLoading: ordersLoading, },
}, {
{ icon: <OrderIcon />,
icon: <FavoriteIcon />, label: t("common.orders"),
label: t("common.favorites"), href: "/orders",
href: "/favorites", badgeCount: ordersCount,
badgeCount: favoritesCount, isLoading: ordersLoading,
isLoading: favoritesLoading, },
}, {
{ icon: <FavoriteIcon />,
icon: <CartIcon />, label: t("common.favorites"),
label: t("common.cart"), href: "/favorites",
href: "/cart", badgeCount: favoritesCount,
badgeCount: cartCount, isLoading: favoritesLoading,
isLoading: cartLoading, },
}, {
], [ordersCount, ordersLoading, favoritesCount, favoritesLoading, cartCount, cartLoading, t]); icon: <CartIcon />,
label: t("common.cart"),
href: "/cart",
badgeCount: cartCount,
isLoading: cartLoading,
}
],
[
ordersCount,
ordersLoading,
favoritesCount,
favoritesLoading,
cartCount,
cartLoading,
t,
]
);
return ( return (
<div className="hidden items-center gap-1 md:flex"> <div className="hidden items-center gap-1 md:flex">
@@ -101,13 +123,19 @@ export default function ActionButtons({
) : isAuthenticated ? ( ) : isAuthenticated ? (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2"> <Button
variant="ghost"
size="sm"
className="flex-col gap-0.5 h-auto px-2 py-2"
>
<ProfileIcon /> <ProfileIcon />
<span className="text-xs text-gray-700">{t("profile")}</span> <span className="text-xs text-gray-700">{t("profile")}</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => (window.location.href = `/${locale}/me`)}> <DropdownMenuItem
onClick={() => (window.location.href = `/${locale}/me`)}
>
<User className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4" />
{t("profile")} {t("profile")}
</DropdownMenuItem> </DropdownMenuItem>
@@ -118,7 +146,12 @@ export default function ActionButtons({
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
) : ( ) : (
<Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={onAuthClick}> <Button
variant="ghost"
size="sm"
className="flex-col gap-0.5 h-auto px-2 py-2"
onClick={onAuthClick}
>
<ProfileIcon /> <ProfileIcon />
<span className="text-xs text-gray-700">{t("common.login")}</span> <span className="text-xs text-gray-700">{t("common.login")}</span>
</Button> </Button>
@@ -132,9 +165,21 @@ export default function ActionButtons({
); );
} }
function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: ActionButtonData) { function ActionButton({
icon,
label,
href,
onClick,
badgeCount,
isLoading,
}: ActionButtonData) {
const buttonContent = ( const buttonContent = (
<Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2" onClick={onClick}> <Button
variant="ghost"
size="sm"
className="relative flex-col gap-0.5 h-auto px-2 py-2"
onClick={onClick}
>
<div className="relative"> <div className="relative">
{icon} {icon}
{badgeCount !== undefined && badgeCount > 0 && ( {badgeCount !== undefined && badgeCount > 0 && (
@@ -142,7 +187,11 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
variant="destructive" variant="destructive"
className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]" className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
> >
{isLoading ? <Skeleton className="h-3 w-3 rounded-full" /> : badgeCount} {isLoading ? (
<Skeleton className="h-3 w-3 rounded-full" />
) : (
badgeCount
)}
</Badge> </Badge>
)} )}
</div> </div>
@@ -155,4 +204,4 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
} }
return buttonContent; return buttonContent;
} }

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

@@ -140,7 +140,7 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
<Button <Button
onClick={otpSent ? handleLogin : handleSendOtp} onClick={otpSent ? handleLogin : handleSendOtp}
className="w-full h-12 rounded-xl font-bold text-base" className="w-full h-12 rounded-xl font-bold text-base bg-[#005bff] hover:bg-[#0041c4]"
size="lg" size="lg"
disabled={isLoginLoading || isVerifyLoading} disabled={isLoginLoading || isVerifyLoading}
> >

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

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

55
components/layout/ui/LanguageSelector.tsx
View File

@@ -1,29 +1,39 @@
"use client" "use client";
import { useRouter } from "next/navigation" import { useRouter, usePathname } from "next/navigation";
import Image from "next/image" import Image from "next/image";
import { useLocale } from "next-intl" import { useLocale } from "next-intl";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import {
import tm from "@/public/tm.png" Select,
import ru from "@/public/ru.png" SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import tm from "@/public/tm.png";
import ru from "@/public/ru.png";
interface Language { interface Language {
code: string code: string;
name: string name: string;
flag: any flag: any;
} }
const LANGUAGES: Language[] = [ const LANGUAGES: Language[] = [
{ code: "ru", name: "Russian", flag: ru }, { code: "ru", name: "Russian", flag: ru },
{ code: "tm", name: "Turkmen", flag: tm }, { code: "tm", name: "Turkmen", flag: tm },
] ];
export default function LanguageSelector() { export default function LanguageSelector() {
const locale = useLocale() const locale = useLocale();
const router = useRouter() const router = useRouter();
const pathname = usePathname(); // Şu anki path'i al
const handleLanguageChange = (newLocale: string) => { const handleLanguageChange = (newLocale: string) => {
router.push(`/${newLocale}`) // Mevcut path'i yeni locale ile değiştir
} // Örnek: /tm/cart -> /ru/cart
const currentPath = pathname.replace(`/${locale}`, "");
router.push(`/${newLocale}${currentPath}`);
};
return ( return (
<Select value={locale} onValueChange={handleLanguageChange}> <Select value={locale} onValueChange={handleLanguageChange}>
@@ -43,17 +53,22 @@ export default function LanguageSelector() {
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
) );
} }
function FlagIcon({ locale }: { locale: string }) { function FlagIcon({ locale }: { locale: string }) {
const language = LANGUAGES.find((lang) => lang.code === locale) const language = LANGUAGES.find((lang) => lang.code === locale);
if (!language) return null if (!language) return null;
return ( return (
<div className="relative h-5 w-7"> <div className="relative h-5 w-7">
<Image src={language.flag || "/placeholder.svg"} alt={language.name} fill className="object-cover rounded" /> <Image
src={language.flag || "/placeholder.svg"}
alt={language.name}
fill
className="object-cover rounded"
/>
</div> </div>
) );
} }

12
features/cart/components/CartItemCard.tsx
View File

@@ -329,15 +329,13 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
<p className="text-sm font-semibold"> <p className="text-sm font-semibold">
{t("unit_price")} <span className="text-primary">{item.price_formatted}</span> {t("unit_price")} <span className="text-primary">{item.price_formatted}</span>
</p> </p>
<p className="text-sm font-semibold">
{t("extra_price")} {item.sub_total_formatted}
</p>
{item.discount_formatted && item.discount_formatted !== "0 TMT" && ( {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"> <div className="flex items-center gap-2">
<span className="text-sm font-semibold">{t("total_price")}</span> <span className="text-sm font-semibold">{t("total_price")}</span>
<span className="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base"> <span className="bg-green-500 text-white px-3 py-1 rounded-lg font-semibold text-base">
{(parseFloat(item.product.price_amount || "0") * localQuantity).toFixed(2)} TMT {(parseFloat(item.product.price_amount || "0") * localQuantity).toFixed(2)} TMT
</span> </span>
</div> </div>
@@ -348,7 +346,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
variant="outline" variant="outline"
size="icon" size="icon"
onClick={handleQuantityDecrease} onClick={handleQuantityDecrease}
className={`rounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''}`} className={` cursor-pointerrounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''}`}
> >
<Minus className="h-4 w-4" /> <Minus className="h-4 w-4" />
</Button> </Button>
@@ -368,11 +366,11 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
size="icon" size="icon"
onClick={handleQuantityIncrease} onClick={handleQuantityIncrease}
disabled={localQuantity >= availableStock} disabled={localQuantity >= availableStock}
className={`rounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''} ${ className={`rounded-xl cursor-pointer bg-blue-50 ${isSyncing ? 'opacity-70' : ''} ${
localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : '' localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : ''
}`} }`}
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4 text-[#007AFF]" />
</Button> </Button>
</div> </div>
</div> </div>

17
features/cart/components/OrderSummary.tsx
View File

@@ -15,6 +15,7 @@ import {
import DeliveryTypeSelector from "./DeliveryTypeSelector"; import DeliveryTypeSelector from "./DeliveryTypeSelector";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import type { DeliveryType, PaymentType, Province } from "@/lib/types/api"; import type { DeliveryType, PaymentType, Province } from "@/lib/types/api";
import { Input } from "@/components/ui/input";
interface OrderBillingItem { interface OrderBillingItem {
title: string; title: string;
@@ -42,6 +43,8 @@ interface OrderSummaryProps {
regionGroups: Record<string, Province[]>; regionGroups: Record<string, Province[]>;
availableRegions: string[]; availableRegions: string[];
paymentTypes: PaymentType[]; paymentTypes: PaymentType[];
phone: string;
onPhoneChange: (phone: string) => void;
onPaymentTypeChange: (type: PaymentType) => void; onPaymentTypeChange: (type: PaymentType) => void;
onDeliveryTypeChange: (type: DeliveryType) => void; onDeliveryTypeChange: (type: DeliveryType) => void;
onRegionChange: (regionCode: string) => void; onRegionChange: (regionCode: string) => void;
@@ -61,6 +64,7 @@ export default function OrderSummary({
regionGroups, regionGroups,
availableRegions, availableRegions,
paymentTypes, paymentTypes,
phone, onPhoneChange,
onPaymentTypeChange, onPaymentTypeChange,
onDeliveryTypeChange, onDeliveryTypeChange,
onRegionChange, onRegionChange,
@@ -74,7 +78,7 @@ export default function OrderSummary({
const provincesForSelectedRegion = selectedRegion const provincesForSelectedRegion = selectedRegion
? regionGroups[selectedRegion] || [] ? regionGroups[selectedRegion] || []
: []; : [];
const isFormValid = selectedRegion && selectedProvince && paymentType; const isFormValid = selectedRegion && selectedProvince && paymentType && phone;
return ( return (
<Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20"> <Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
@@ -167,6 +171,17 @@ export default function OrderSummary({
</div> </div>
)} )}
{/* Phone Number */}
<div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">{t("phone")}</Label>
<Input
type="tel"
value={phone}
onChange={(e) => onPhoneChange(e.target.value)}
placeholder={t("phone")}
className="rounded-xl"
/>
</div>
{/* Note */} {/* Note */}
<div className="mb-6"> <div className="mb-6">
<Label className="text-lg font-semibold mb-3 block">{t("note")}</Label> <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>

2
features/cart/hooks/useCart.ts
View File

@@ -224,7 +224,7 @@ export function useCreateOrder() {
return useMutation({ return useMutation({
mutationFn: async (payload: { mutationFn: async (payload: {
customer_name?: string customer_name?: string
customer_phone?: string customer_phone: string
customer_address: string customer_address: string
shipping_method: string shipping_method: string
payment_type_id: number payment_type_id: number

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

@@ -23,7 +23,7 @@ import {
useCategoryFilters, useCategoryFilters,
useFilteredCategoryProducts, useFilteredCategoryProducts,
} from "@/features/category/hooks/useCategories"; } from "@/features/category/hooks/useCategories";
import { notFound } from "next/navigation";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import type { Category, Product } from "@/lib/types/api"; import type { Category, Product } from "@/lib/types/api";
@@ -232,50 +232,14 @@ export default function CategoryPageClient({
[] []
); );
const renderBreadcrumbs = useCallback(() => {
if (!categoriesData || !selectedCategory) return null;
const breadcrumbs: Category[] = [];
let currentCategory = selectedCategory;
let parentId = currentCategory.parent_id;
breadcrumbs.unshift(currentCategory);
while (parentId) {
const parentCategory = findCategoryById(categoriesData, parentId);
if (parentCategory) {
breadcrumbs.unshift(parentCategory);
parentId = parentCategory.parent_id;
} else {
break;
}
}
return (
<div className="flex items-center gap-2 mb-4 text-sm">
{breadcrumbs.map((category, index) => (
<div key={category.id} className="flex items-center gap-2">
<button
onClick={() =>
router.push(`/${locale}/category/${category.slug}`)
}
className="hover:text-primary transition-colors"
>
{category.name}
</button>
{index < breadcrumbs.length - 1 && <span>/</span>}
</div>
))}
</div>
);
}, [categoriesData, selectedCategory, findCategoryById, locale, router]);
const FiltersContent = useCallback( const FiltersContent = useCallback(
() => ( () => (
<div className="space-y-6"> <div className="space-y-6">
{filtersData?.categories && filtersData.categories.length > 0 && ( {filtersData?.categories && filtersData.categories.length > 0 && (
<div> <div>
<h3 className="text-lg font-semibold mb-3">{t("categories")}</h3> <h3 className="text-lg font-semibold mb-3">{t("category")}</h3>
<div className="space-y-2"> <div className="space-y-2">
{filtersData.categories.map((category) => ( {filtersData.categories.map((category) => (
<label <label
@@ -388,21 +352,20 @@ export default function CategoryPageClient({
productsData?.pagination?.total || sortedProducts.length || 0; productsData?.pagination?.total || sortedProducts.length || 0;
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col mx-auto max-w-[1504px]
{renderBreadcrumbs()} px-2 md:px-4 lg:px-6 pb-12
<h2 className="text-3xl font-bold">{selectedCategory.name}</h2> ">
<p className="text-gray-600"> <h2 className="p-4 text-3xl font-bold pb-6 rounded-lg mb-0 bg-white">{selectedCategory.name}</h2>
{t("total")}: {totalItems} {t("products")}
</p>
<div className="flex gap-4"> <div className="flex gap-4 bg-white rounded-lg">
<div className="hidden sm:block w-[280px] flex-shrink-0 border-r pr-4"> <div className="hidden sm:block w-[280px] shrink-0 border-r px-4 ">
<ScrollArea className="h-[calc(100vh-200px)]"> <ScrollArea className="h-[calc(100vh-200px)] ">
<FiltersContent /> <FiltersContent />
</ScrollArea> </ScrollArea>
</div> </div>
<div className="flex-1"> <div className="flex-1 bg-white rounded-lg">
{sortedProducts.length > 0 ? ( {sortedProducts.length > 0 ? (
<InfiniteScroll <InfiniteScroll
dataLength={sortedProducts.length} dataLength={sortedProducts.length}
@@ -416,7 +379,7 @@ export default function CategoryPageClient({
</div> </div>
} }
> >
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="bg-white rounded-lg grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
{sortedProducts.map((product) => ( {sortedProducts.map((product) => (
<ProductCard <ProductCard
key={product.id} key={product.id}
@@ -429,8 +392,8 @@ export default function CategoryPageClient({
} }
struct_price_text={`${product.price_amount} TMT`} struct_price_text={`${product.price_amount} TMT`}
images={[product.media?.[0]?.images_400x400]} images={[product.media?.[0]?.images_400x400]}
is_favorite={false}
/> button={true} />
))} ))}
</div> </div>
</InfiniteScroll> </InfiniteScroll>

267
features/home/components/ProductCard.tsx
View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import { useState, MouseEvent, useEffect, useRef } from "react"; import { useState, MouseEvent, useEffect, useRef, useCallback } from "react";
import { Heart } from "lucide-react"; import { Heart, ShoppingCart, Loader2, Plus, Minus } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { import {
Carousel, Carousel,
@@ -13,8 +13,14 @@ import {
} from "@/components/ui/carousel"; } from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useToggleFavorite, useIsFavorite } from "@/lib/hooks"; import { useToggleFavorite, useIsFavorite } from "@/lib/hooks";
import {
useAddToCart,
useUpdateCartItemQuantity,
useCart,
} from "@/features/cart/hooks/useCart";
import { useTranslations } from "next-intl";
type ProductCardProps = { type ProductCardProps = {
id: number; id: number;
name: string; name: string;
@@ -27,6 +33,8 @@ type ProductCardProps = {
price_color?: string; price_color?: string;
height?: number; height?: number;
width?: number; width?: number;
button?: boolean;
stock?: number;
}; };
export default function ProductCard({ export default function ProductCard({
@@ -41,19 +49,35 @@ export default function ProductCard({
price_color = "#005bff", price_color = "#005bff",
height = 360, height = 360,
width = 280, width = 280,
button = false,
stock,
}: ProductCardProps) { }: ProductCardProps) {
const { isFavorite, isLoading: isFavoriteLoading } = useIsFavorite(id); const { isFavorite, isLoading: isFavoriteLoading } = useIsFavorite(id);
const { mutate: toggleFavorite, isPending } = useToggleFavorite(); const { mutate: toggleFavorite, isPending: isFavoriteToggling } =
useToggleFavorite();
const addToCartMutation = useAddToCart();
const updateCartMutation = useUpdateCartItemQuantity();
const { data: cartData, refetch: refetchCart } = useCart();
const [api, setApi] = useState<CarouselApi>(); const [api, setApi] = useState<CarouselApi>();
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const [localQuantity, setLocalQuantity] = useState(1);
const [isSyncing, setIsSyncing] = useState(false);
const autoplayRef = useRef<NodeJS.Timeout | null>(null); const autoplayRef = useRef<NodeJS.Timeout | null>(null);
const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const isRequestInFlightRef = useRef(false);
const pendingQuantityRef = useRef<number | null>(null);
const hasMultipleImages = images.length > 1; const hasMultipleImages = images.length > 1;
const cartItem = cartData?.data?.find((item: any) => item.product?.id === id);
const isInCart = !!cartItem;
const isOutOfStock = stock !== undefined && stock === 0;
const availableStock = stock || 999;
const t = useTranslations();
useEffect(() => { useEffect(() => {
if (!api) return; if (!api) return;
setCurrent(api.selectedScrollSnap()); setCurrent(api.selectedScrollSnap());
api.on("select", () => { api.on("select", () => {
setCurrent(api.selectedScrollSnap()); setCurrent(api.selectedScrollSnap());
@@ -73,37 +97,158 @@ export default function ProductCard({
}, 3000); }, 3000);
}; };
const stopAutoplay = () => { startAutoplay();
return () => {
if (autoplayRef.current) { if (autoplayRef.current) {
clearInterval(autoplayRef.current); clearInterval(autoplayRef.current);
autoplayRef.current = null;
} }
}; };
startAutoplay();
return () => stopAutoplay();
}, [api, hasMultipleImages]); }, [api, hasMultipleImages]);
const handleFavorite = (e: MouseEvent<HTMLButtonElement>) => { // Sync localQuantity with cart
e.preventDefault(); useEffect(() => {
e.stopPropagation(); if (cartItem?.product_quantity) {
setLocalQuantity(cartItem.product_quantity);
} else {
setLocalQuantity(1);
}
}, [cartItem]);
toggleFavorite( const syncToServer = useCallback(
{ productId: id, isFavorite }, async (quantity: number) => {
{ if (isRequestInFlightRef.current) {
onSuccess: (data) => { pendingQuantityRef.current = quantity;
toast.success( return;
data.wasAdded
? "Товар добавлен в избранное"
: "Товар удален из избранного"
);
},
onError: () => {
toast.error("Ошибка. Попробуйте снова");
},
} }
);
}; isRequestInFlightRef.current = true;
setIsSyncing(true);
try {
await updateCartMutation.mutateAsync({
productId: id,
quantity: quantity,
});
isRequestInFlightRef.current = false;
setIsSyncing(false);
await refetchCart();
if (pendingQuantityRef.current !== null) {
const nextQuantity = pendingQuantityRef.current;
pendingQuantityRef.current = null;
setTimeout(() => syncToServer(nextQuantity), 100);
}
} catch (error) {
console.error("Sync failed:", error);
isRequestInFlightRef.current = false;
setIsSyncing(false);
setLocalQuantity(cartItem?.product_quantity || 1);
}
},
[id, updateCartMutation, cartItem, refetchCart]
);
// Debounced sync
useEffect(() => {
if (!isInCart) return;
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
if (localQuantity === (cartItem?.product_quantity || 1)) {
return;
}
debounceTimerRef.current = setTimeout(() => {
syncToServer(localQuantity);
}, 800);
return () => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
};
}, [localQuantity, isInCart, cartItem, syncToServer]);
const handleFavorite = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
toggleFavorite(
{ productId: id, isFavorite },
{
onSuccess: (data) => {
toast.success(
data.wasAdded ? "Added to favorites" : "Removed from favorites"
);
},
onError: () => {
toast.error("Error. Try again");
},
}
);
},
[id, isFavorite, toggleFavorite]
);
const handleAddToCart = useCallback(
async (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
setIsSyncing(true);
try {
await addToCartMutation.mutateAsync({
productId: id,
quantity: localQuantity,
});
await refetchCart();
setIsSyncing(false);
toast.success("Added to cart", {
description: `${name} has been added to your cart`,
});
} catch (error) {
console.error("Add to cart error:", error);
setIsSyncing(false);
toast.error("Failed to add to cart");
}
},
[id, name, localQuantity, addToCartMutation, refetchCart]
);
const handleQuantityIncrease = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
if (localQuantity >= availableStock) {
toast.error("Stock limit reached", {
description: `Only ${availableStock} items available`,
});
return;
}
setLocalQuantity((prev) => prev + 1);
},
[localQuantity, availableStock]
);
const handleQuantityDecrease = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
if (localQuantity <= 1) return;
setLocalQuantity((prev) => prev - 1);
},
[localQuantity]
);
const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => { const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
@@ -172,10 +317,10 @@ export default function ProductCard({
)} )}
</Carousel> </Carousel>
{/* Favorite button - show skeleton while loading favorites */} {/* Favorite button */}
<button <button
onClick={handleFavorite} onClick={handleFavorite}
disabled={isPending || isFavoriteLoading} disabled={isFavoriteToggling || isFavoriteLoading}
className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50" className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
> >
{isFavoriteLoading ? ( {isFavoriteLoading ? (
@@ -215,6 +360,15 @@ export default function ProductCard({
))} ))}
</div> </div>
)} )}
{/* Out of Stock Overlay */}
{isOutOfStock && (
<div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
<Badge variant="secondary" className="text-sm font-bold">
Out of Stock
</Badge>
</div>
)}
</div> </div>
<CardContent className="p-0 space-y-1"> <CardContent className="p-0 space-y-1">
@@ -228,6 +382,59 @@ export default function ProductCard({
{name} {name}
</p> </p>
</CardContent> </CardContent>
{/* Cart controls - show on hover if button enabled */}
{button && !isOutOfStock && (
<div className=" px-1">
{!isInCart ? (
<Button
onClick={handleAddToCart}
disabled={isSyncing}
className="w-full rounded-lg gap-2 bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
size="sm"
>
{isSyncing ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Adding...
</>
) : (
<>
<ShoppingCart className="h-4 w-4" />
{t("checkout")}
</>
)}
</Button>
) : (
<div className="flex items-center gap-2">
<Button
variant="outline"
size="icon"
onClick={handleQuantityDecrease}
disabled={isSyncing || localQuantity <= 1}
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
>
<Minus className="h-4 w-4" />
</Button>
<div className="flex-1 text-center font-semibold text-sm border rounded-lg h-9 flex items-center justify-center bg-white relative">
{localQuantity}
{isSyncing && (
<Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-1 text-blue-500" />
)}
</div>
<Button
variant="outline"
size="icon"
onClick={handleQuantityIncrease}
disabled={localQuantity >= availableStock || isSyncing}
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
>
<Plus className="h-4 w-4 text-[#005bff]" />
</Button>
</div>
)}
</div>
)}
</Card> </Card>
</a> </a>
); );

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

@@ -101,6 +101,7 @@ export default function CollectionSection({ collection, locale }: Props) {
price_color="#0059ff" price_color="#0059ff"
height={360} height={360}
width={250} width={250}
/> />
); );
})} })}

372
features/orders/components/OrderPage.tsx
View File

@@ -15,6 +15,15 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import {
ChevronDown,
ChevronUp,
Package,
Calendar,
MapPin,
CreditCard,
ShoppingBag,
} from "lucide-react";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { useOrders, useCancelOrder } from "@/lib/hooks"; import { useOrders, useCancelOrder } from "@/lib/hooks";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@@ -27,11 +36,25 @@ interface OrdersPageClientProps {
export default function OrdersPageClient({ locale }: OrdersPageClientProps) { export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false); const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
const [orderToCancel, setOrderToCancel] = useState<Order | null>(null); const [orderToCancel, setOrderToCancel] = useState<Order | null>(null);
const [expandedOrders, setExpandedOrders] = useState<Set<number>>(new Set());
const { toast } = useToast(); const { toast } = useToast();
const t = useTranslations(); const t = useTranslations();
const { data: orders, isLoading, isError, error } = useOrders(); const { data: orders, isLoading, isError } = useOrders();
const { mutate: cancelOrder, isPending: isCancellingOrder } = useCancelOrder(); const { mutate: cancelOrder, isPending: isCancellingOrder } =
useCancelOrder();
const toggleOrderExpand = useCallback((orderId: number) => {
setExpandedOrders((prev) => {
const newSet = new Set(prev);
if (newSet.has(orderId)) {
newSet.delete(orderId);
} else {
newSet.add(orderId);
}
return newSet;
});
}, []);
const handleCancelOrder = useCallback((order: Order) => { const handleCancelOrder = useCallback((order: Order) => {
setOrderToCancel(order); setOrderToCancel(order);
@@ -62,72 +85,101 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
const getStatusBadge = useCallback((status: string) => { const getStatusBadge = useCallback((status: string) => {
const lowerStatus = status.toLowerCase(); const lowerStatus = status.toLowerCase();
if (lowerStatus.includes("ожидается") || lowerStatus.includes("pending") || lowerStatus.includes("garaşlama")) { if (
return <Badge variant="outline">{status}</Badge>; lowerStatus.includes("ожидается") ||
lowerStatus.includes("pending") ||
lowerStatus.includes("garaşlama")
) {
return (
<Badge
variant="outline"
className="bg-yellow-50 text-yellow-700 border-yellow-300"
>
{status}
</Badge>
);
} }
if (lowerStatus.includes("обработка") || lowerStatus.includes("processing") || lowerStatus.includes("işlenýär")) { if (
return <Badge variant="secondary">{status}</Badge>; lowerStatus.includes("обработка") ||
lowerStatus.includes("processing") ||
lowerStatus.includes("işlenýär")
) {
return (
<Badge variant="secondary" className="bg-blue-50 text-blue-700">
{status}
</Badge>
);
} }
if (lowerStatus.includes("отправлен") || lowerStatus.includes("shipped") || lowerStatus.includes("iberildi")) { if (
return <Badge>{status}</Badge>; lowerStatus.includes("отправлен") ||
lowerStatus.includes("shipped") ||
lowerStatus.includes("iberildi")
) {
return <Badge className="bg-purple-500">{status}</Badge>;
} }
if (lowerStatus.includes("доставлен") || lowerStatus.includes("delivered") || lowerStatus.includes("eltildi")) { if (
lowerStatus.includes("доставлен") ||
lowerStatus.includes("delivered") ||
lowerStatus.includes("eltildi")
) {
return <Badge className="bg-green-600">{status}</Badge>; return <Badge className="bg-green-600">{status}</Badge>;
} }
if (lowerStatus.includes("отменен") || lowerStatus.includes("cancelled") || lowerStatus.includes("ýatyryldy")) { if (
lowerStatus.includes("отменен") ||
lowerStatus.includes("cancelled") ||
lowerStatus.includes("ýatyryldy")
) {
return <Badge variant="destructive">{status}</Badge>; return <Badge variant="destructive">{status}</Badge>;
} }
return <Badge>{status}</Badge>; return <Badge>{status}</Badge>;
}, []); }, []);
const isActiveOrder = useCallback((status: string) => { const isActiveOrder = useCallback((status: string) => {
const lower = status.toLowerCase(); const lower = status.toLowerCase();
return lower.includes("ожидается") || lower.includes("обработка") || lower.includes("отправлен") || return (
lower.includes("pending") || lower.includes("processing") || lower.includes("shipped") || lower.includes("ожидается") ||
lower.includes("garaşlama") || lower.includes("işlenýär") || lower.includes("iberildi"); lower.includes("обработка") ||
lower.includes("отправлен") ||
lower.includes("pending") ||
lower.includes("processing") ||
lower.includes("shipped") ||
lower.includes("garaşylýar") ||
lower.includes("işlenýär") ||
lower.includes("iberildi")
);
}, []); }, []);
const activeOrders = useMemo(() => orders?.filter((o) => isActiveOrder(o.status)) || [], [orders, isActiveOrder]); const activeOrders = useMemo(
const completedOrders = useMemo(() => orders?.filter((o) => !isActiveOrder(o.status)) || [], [orders, isActiveOrder]); () => orders?.filter((o) => isActiveOrder(o.status)) || [],
[orders, isActiveOrder]
);
const completedOrders = useMemo(
() => orders?.filter((o) => !isActiveOrder(o.status)) || [],
[orders, isActiveOrder]
);
const calculateTotal = useCallback((order: Order) => { const calculateTotal = useCallback((order: Order) => {
return order.orderItems.reduce((sum, item) => { return order.orderItems.reduce((sum, item) => {
return sum + (parseFloat(item.unit_price_amount) * item.quantity); return sum + parseFloat(item.unit_price_amount) * item.quantity;
}, 0); }, 0);
}, []); }, []);
const loadingSkeleton = useMemo(() => (
<div className="container mx-auto p-4 min-h-screen">
<h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
<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>
</div>
), [t]);
if (isLoading) { if (isLoading) {
return loadingSkeleton;
}
if (isError) {
return ( return (
<div className="container mx-auto p-4 min-h-screen"> <div className="container mx-auto p-4 min-h-screen">
<h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1> <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
<div className="bg-red-50 p-4 rounded-lg border border-red-200"> <div className="space-y-4">
<p className="text-red-600">{t("load_orders_error")}</p> {Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} className="h-32 rounded-lg" />
))}
</div> </div>
</div> </div>
); );
} }
if (!orders || orders.length === 0) { if (isError || !orders || orders.length === 0) {
return ( return (
<div className="container mx-auto p-4 min-h-screen"> <div className="container mx-auto p-4 min-h-screen">
<h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1> <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
@@ -158,16 +210,19 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
<p className="text-xl text-gray-400">{t("no_active_orders")}</p> <p className="text-xl text-gray-400">{t("no_active_orders")}</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="space-y-4">
{activeOrders.map((order) => ( {activeOrders.map((order) => (
<OrderCard <CompactOrderCard
key={order.id} key={order.id}
order={order} order={order}
isExpanded={expandedOrders.has(order.id)}
onToggle={() => toggleOrderExpand(order.id)}
onCancel={handleCancelOrder} onCancel={handleCancelOrder}
isCancelling={isCancellingOrder} isCancelling={isCancellingOrder}
getStatusBadge={getStatusBadge} getStatusBadge={getStatusBadge}
calculateTotal={calculateTotal} calculateTotal={calculateTotal}
showCancelButton showCancelButton
t={t}
/> />
))} ))}
</div> </div>
@@ -177,19 +232,24 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
<TabsContent value="completed"> <TabsContent value="completed">
{completedOrders.length === 0 ? ( {completedOrders.length === 0 ? (
<div className="flex items-center justify-center min-h-[40vh]"> <div className="flex items-center justify-center min-h-[40vh]">
<p className="text-xl text-gray-400">{t("no_completed_orders")}</p> <p className="text-xl text-gray-400">
{t("no_completed_orders")}
</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="space-y-4">
{completedOrders.map((order) => ( {completedOrders.map((order) => (
<OrderCard <CompactOrderCard
key={order.id} key={order.id}
order={order} order={order}
isExpanded={expandedOrders.has(order.id)}
onToggle={() => toggleOrderExpand(order.id)}
onCancel={handleCancelOrder} onCancel={handleCancelOrder}
isCancelling={isCancellingOrder} isCancelling={isCancellingOrder}
getStatusBadge={getStatusBadge} getStatusBadge={getStatusBadge}
calculateTotal={calculateTotal} calculateTotal={calculateTotal}
showCancelButton={false} showCancelButton={false}
t={t}
/> />
))} ))}
</div> </div>
@@ -213,7 +273,11 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
> >
{t("keep_order")} {t("keep_order")}
</Button> </Button>
<Button variant="destructive" onClick={confirmCancelOrder} disabled={isCancellingOrder}> <Button
variant="destructive"
onClick={confirmCancelOrder}
disabled={isCancellingOrder}
>
{isCancellingOrder ? t("cancelling") : t("cancel_order")} {isCancellingOrder ? t("cancelling") : t("cancel_order")}
</Button> </Button>
</DialogFooter> </DialogFooter>
@@ -223,92 +287,190 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
); );
} }
interface OrderCardProps { interface CompactOrderCardProps {
order: Order; order: Order;
isExpanded: boolean;
onToggle: () => void;
onCancel: (order: Order) => void; onCancel: (order: Order) => void;
isCancelling: boolean; isCancelling: boolean;
getStatusBadge: (status: string) => React.ReactNode; getStatusBadge: (status: string) => React.ReactNode;
calculateTotal: (order: Order) => number; calculateTotal: (order: Order) => number;
showCancelButton: boolean; showCancelButton: boolean;
t: any;
} }
function OrderCard({ function CompactOrderCard({
order, order,
isExpanded,
onToggle,
onCancel, onCancel,
isCancelling, isCancelling,
getStatusBadge, getStatusBadge,
calculateTotal, calculateTotal,
showCancelButton, showCancelButton,
}: OrderCardProps) { t,
const t = useTranslations(); }: CompactOrderCardProps) {
const total = useMemo(() => calculateTotal(order), [calculateTotal, order]); const total = useMemo(() => calculateTotal(order), [calculateTotal, order]);
const itemCount = order.orderItems.length;
return ( return (
<Card className="p-4 flex flex-col justify-between"> <Card className="overflow-hidden transition-all hover:shadow-md">
<div> {/* Compact Header - Always Visible */}
<div className="flex justify-between items-center mb-3"> <div
<h3 className="text-lg font-semibold"> className="p-4 mx-4 rounded-lg cursor-pointer bg-linear-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-colors"
{t("order_number")}{order.id} onClick={onToggle}
</h3> >
{getStatusBadge(order.status)} <div className="flex items-center justify-between">
</div> <div className="flex items-center gap-4 flex-1">
<div className="flex items-center gap-2">
<div className="mb-3 space-y-1 text-sm"> <Package className="h-5 w-5 text-gray-500" />
<p className="text-gray-600"> <div>
<span className="font-medium">{t("delivery_time")}:</span> {order.delivery_time} <h3 className="font-semibold text-lg">
</p> {t("order_number")} {order.id}
<p className="text-gray-600"> </h3>
<span className="font-medium">{t("delivery_date")}:</span>{" "} <p className="text-sm text-gray-500">
{new Date(order.delivery_at).toLocaleDateString()} {itemCount} {itemCount === 1 ? t("product") : t("products")}
</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("payment_method")}:</span> {order.payment_type}
</p>
</div>
<div className="space-y-2 mb-3 max-h-48 overflow-y-auto">
{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-xs text-gray-500">
{t("product_quantity")}: {item.quantity} × {item.unit_price_amount} TMT
</p> </p>
</div> </div>
</div> </div>
))} </div>
</div>
<div className="border-t pt-3"> <div className="flex items-center gap-4">
<div className="flex justify-between font-semibold"> {getStatusBadge(order.status)}
<span>{t("total_price")}</span> <div className="text-right">
<span>{total.toFixed(2)} TMT</span> <p className="font-bold text-lg text-green-600">
{total.toFixed(2)} TMT
</p>
</div>
{isExpanded ? (
<ChevronUp className="h-5 w-5 text-gray-400" />
) : (
<ChevronDown className="h-5 w-5 text-gray-400" />
)}
</div> </div>
</div> </div>
</div> </div>
{showCancelButton && ( {/* Expandable Details */}
<div className="mt-4"> {isExpanded && (
<Button <div className="border-t bg-white">
variant="destructive" {/* Order Info Grid */}
onClick={() => onCancel(order)} <div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50">
disabled={isCancelling} <div className="flex items-start gap-3">
className="w-full" <Calendar className="h-5 w-5 text-blue-500 mt-0.5" />
> <div>
{t("cancel_order")} <p className="text-sm font-medium text-gray-700">
</Button> {t("delivery_date")}
</p>
<p className="text-sm text-gray-900">
{new Date(order.delivery_at).toLocaleDateString()} •{" "}
{order.delivery_time}
</p>
</div>
</div>
<div className="flex items-start gap-3">
<MapPin className="h-5 w-5 text-red-500 mt-0.5" />
<div>
<p className="text-sm font-medium text-gray-700">
{t("address")}
</p>
<p className="text-sm text-gray-900">
{order.customer_address}
</p>
</div>
</div>
<div className="flex items-start gap-3">
<CreditCard className="h-5 w-5 text-green-500 mt-0.5" />
<div>
<p className="text-sm font-medium text-gray-700">
{t("payment_method")}
</p>
<p className="text-sm text-gray-900">{order.payment_type}</p>
</div>
</div>
<div className="flex items-start gap-3">
<ShoppingBag className="h-5 w-5 text-purple-500 mt-0.5" />
<div>
<p className="text-sm font-medium text-gray-700">
{t("shipping_method")}
</p>
<p className="text-sm text-gray-900">{order.shipping_method}</p>
</div>
</div>
</div>
{/* Products List */}
<div className="p-4">
<h4 className="font-semibold mb-3 text-gray-700">
{t("products")}:
</h4>
<div className="space-y-3 max-h-96 overflow-y-auto">
{order.orderItems.map((item, index) => (
<div
key={index}
className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
>
<div className="relative w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-white border">
<Image
src={
item.product.images_400x400 || item.product.thumbnail
}
alt={item.product.name}
fill
className="object-contain p-1"
/>
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-sm line-clamp-2">
{item.product.name}
</p>
<p className="text-xs text-gray-500 mt-1">
{item.quantity} × {item.unit_price_amount} TMT
</p>
</div>
<div className="text-right">
<p className="font-semibold text-sm">
{(
parseFloat(item.unit_price_amount) * item.quantity
).toFixed(2)}{" "}
TMT
</p>
</div>
</div>
))}
</div>
</div>
{/* Footer with Total and Actions */}
<div className="border-t p-4 bg-gray-50">
<div className="flex items-center justify-between mb-3">
<span className="text-base font-semibold text-gray-700">
{t("total_price")}:
</span>
<span className="text-xl font-bold text-green-600">
{total.toFixed(2)} TMT
</span>
</div>
{showCancelButton && (
<Button
variant="destructive"
onClick={(e) => {
e.stopPropagation();
onCancel(order);
}}
disabled={isCancelling}
className="w-full"
>
{t("cancel_order")}
</Button>
)}
</div>
</div> </div>
)} )}
</Card> </Card>
); );
} }

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

@@ -506,7 +506,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
</div> </div>
<div className="lg:w-[380px] space-y-4"> <div className="lg:w-[380px] space-y-4">
<Card className="p-6 rounded-xl shadow-lg sticky top-4"> <Card className="p-6 rounded-xl ">
<div className="flex justify-between items-start mb-6"> <div className="flex justify-between items-start mb-6">
<span className="text-lg text-gray-500">{t("price")}:</span> <span className="text-lg text-gray-500">{t("price")}:</span>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">

2
i18n/messages/ru.json
View File

@@ -50,7 +50,7 @@
"cash": "Наличные", "cash": "Наличные",
"card": "Карта", "card": "Карта",
"choose_address": "Выберите адрес", "choose_address": "Выберите адрес",
"brand": "Бренд", "brands": "Бренд",
"color": "Цвет", "color": "Цвет",
"price": "Цена", "price": "Цена",
"price_from": "От", "price_from": "От",

4
i18n/messages/tm.json
View File

@@ -10,7 +10,7 @@
"login": "Girmek", "login": "Girmek",
"logout": "Çykmak", "logout": "Çykmak",
"profile": "Profil", "profile": "Profil",
"openStore": "Dükan açmak", "openStore": "Satyjy bolmak",
"phone": "Telefon", "phone": "Telefon",
"code": "Kod", "code": "Kod",
"send": "Ugrat", "send": "Ugrat",
@@ -50,7 +50,7 @@
"cash": "Nagt", "cash": "Nagt",
"card": "Kartdan tölemek", "card": "Kartdan tölemek",
"choose_address": "Adres saýla", "choose_address": "Adres saýla",
"brand": "Brend", "brands": "Brendler",
"color": "Reňk", "color": "Reňk",
"price": "Baha", "price": "Baha",
"price_from": "Pesi", "price_from": "Pesi",