first commit
This commit is contained in:
Jelaletdin12
30
features/orders/components/EmptyOrders.tsx
Normal file
30
features/orders/components/EmptyOrders.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ShoppingCart } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function EmptyOrders() {
|
||||
const t=useTranslations();
|
||||
const router=useRouter();
|
||||
return (
|
||||
<div className="flex min-h-[60vh] items-center justify-center px-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
|
||||
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
|
||||
<ShoppingCart className="h-10 w-10 text-blue-600" />
|
||||
</div>
|
||||
|
||||
<h2 className="mb-2 text-2xl font-semibold text-gray-900">
|
||||
{t("orders_empty")}
|
||||
</h2>
|
||||
|
||||
<p className="mb-6 text-sm text-gray-500">
|
||||
{t("orders_empty_message")}
|
||||
</p>
|
||||
|
||||
<Button onClick={()=>router.push("/")} className="w-full rounded-lg cursor-pointer bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
|
||||
{t("start_shopping")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
506
features/orders/components/OrderPage.tsx
Normal file
506
features/orders/components/OrderPage.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback, useMemo } 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 {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Package,
|
||||
Calendar,
|
||||
MapPin,
|
||||
CreditCard,
|
||||
ShoppingBag,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useOrders, useCancelOrder } from "@/lib/hooks";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { Order } from "@/lib/types/api";
|
||||
import EmptyOrders from "./EmptyOrders";
|
||||
import ErrorPage from "@/components/ErrorPage";
|
||||
interface OrdersPageClientProps {
|
||||
locale: string;
|
||||
}
|
||||
|
||||
export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
|
||||
const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
|
||||
const [orderToCancel, setOrderToCancel] = useState<Order | null>(null);
|
||||
const [expandedOrders, setExpandedOrders] = useState<Set<number>>(new Set());
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
const { data: orders, isLoading, isError } = useOrders();
|
||||
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) => {
|
||||
setOrderToCancel(order);
|
||||
setIsCancelDialogOpen(true);
|
||||
}, []);
|
||||
|
||||
const confirmCancelOrder = useCallback(() => {
|
||||
if (!orderToCancel) return;
|
||||
|
||||
cancelOrder(orderToCancel.id, {
|
||||
onSuccess: () => {
|
||||
toast.success(t("order_cancelled"));
|
||||
setIsCancelDialogOpen(false);
|
||||
setOrderToCancel(null);
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error.message || t("cancel_order_failed"));
|
||||
},
|
||||
});
|
||||
}, [orderToCancel, cancelOrder, toast, t]);
|
||||
|
||||
const getStatusBadge = useCallback((status: string) => {
|
||||
const lowerStatus = status.toLowerCase();
|
||||
|
||||
if (
|
||||
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")
|
||||
) {
|
||||
return (
|
||||
<Badge variant="secondary" className="bg-blue-50 text-blue-700">
|
||||
{status}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
if (
|
||||
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")
|
||||
) {
|
||||
return <Badge className="bg-green-600">{status}</Badge>;
|
||||
}
|
||||
if (
|
||||
lowerStatus.includes("отменен") ||
|
||||
lowerStatus.includes("cancelled") ||
|
||||
lowerStatus.includes("ýatyryldy")
|
||||
) {
|
||||
return <Badge variant="destructive">{status}</Badge>;
|
||||
}
|
||||
|
||||
return <Badge>{status}</Badge>;
|
||||
}, []);
|
||||
|
||||
const isActiveOrder = useCallback((status: string) => {
|
||||
const lower = status.toLowerCase();
|
||||
return (
|
||||
lower.includes("ожидается") ||
|
||||
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 completedOrders = useMemo(
|
||||
() => orders?.filter((o) => !isActiveOrder(o.status)) || [],
|
||||
[orders, isActiveOrder]
|
||||
);
|
||||
|
||||
const calculateTotal = useCallback((order: Order) => {
|
||||
return order.orderItems.reduce((sum, item) => {
|
||||
return sum + parseFloat(item.unit_price_amount) * item.quantity;
|
||||
}, 0);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
|
||||
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
|
||||
{t("my_orders")}
|
||||
</h1>
|
||||
|
||||
{/* Tabs Skeleton */}
|
||||
<div className="mb-4 md:mb-6">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Skeleton className="h-10 w-32 rounded-md" />
|
||||
<Skeleton className="h-10 w-32 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Cards Skeleton */}
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Card key={i} className="overflow-hidden py-2 md:py-4 lg:py-6">
|
||||
<div className="p-2 md:p-4 mx-2 md:mx-4 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Left side - Order info */}
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<Skeleton className="h-5 w-5 rounded" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side - Status and price */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col md:flex-row gap-2 items-end">
|
||||
<Skeleton className="h-6 w-20 rounded-full" />
|
||||
<Skeleton className="h-6 w-24" />
|
||||
</div>
|
||||
<Skeleton className="h-5 w-5 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return <ErrorPage />;
|
||||
}
|
||||
if (isError || !orders || orders.length === 0) {
|
||||
return <EmptyOrders />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className=" mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
|
||||
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
|
||||
{t("my_orders")}
|
||||
</h1>
|
||||
|
||||
<Tabs defaultValue="active" className="w-full">
|
||||
<TabsList className="mb-4 md:mb-6 w-full md:w-fit gap-2 p-0">
|
||||
<TabsTrigger value="active">
|
||||
{t("active_orders")} ({activeOrders.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="completed">
|
||||
{t("completed_orders")} ({completedOrders.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="active">
|
||||
{activeOrders.length === 0 ? (
|
||||
<div className="flex items-center justify-center min-h-[40vh]">
|
||||
<p className="text-xl text-gray-400">{t("no_active_orders")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{activeOrders.map((order) => (
|
||||
<CompactOrderCard
|
||||
key={order.id}
|
||||
order={order}
|
||||
isExpanded={expandedOrders.has(order.id)}
|
||||
onToggle={() => toggleOrderExpand(order.id)}
|
||||
onCancel={handleCancelOrder}
|
||||
isCancelling={isCancellingOrder}
|
||||
getStatusBadge={getStatusBadge}
|
||||
calculateTotal={calculateTotal}
|
||||
showCancelButton
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="completed">
|
||||
{completedOrders.length === 0 ? (
|
||||
<div className="flex items-center justify-center min-h-[40vh]">
|
||||
<p className="text-xl text-gray-400">
|
||||
{t("no_completed_orders")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{completedOrders.map((order) => (
|
||||
<CompactOrderCard
|
||||
key={order.id}
|
||||
order={order}
|
||||
isExpanded={expandedOrders.has(order.id)}
|
||||
onToggle={() => toggleOrderExpand(order.id)}
|
||||
onCancel={handleCancelOrder}
|
||||
isCancelling={isCancellingOrder}
|
||||
getStatusBadge={getStatusBadge}
|
||||
calculateTotal={calculateTotal}
|
||||
showCancelButton={false}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<Dialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{t("cancel_order")} #{orderToCancel?.id}
|
||||
</DialogTitle>
|
||||
<DialogDescription>{t("cancel_confirmation")}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCancelDialogOpen(false)}
|
||||
disabled={isCancellingOrder}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{t("keep_order")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={confirmCancelOrder}
|
||||
disabled={isCancellingOrder}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{isCancellingOrder ? t("cancelling") : t("cancel_order")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CompactOrderCardProps {
|
||||
order: Order;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
onCancel: (order: Order) => void;
|
||||
isCancelling: boolean;
|
||||
getStatusBadge: (status: string) => React.ReactNode;
|
||||
calculateTotal: (order: Order) => number;
|
||||
showCancelButton: boolean;
|
||||
t: any;
|
||||
}
|
||||
|
||||
function CompactOrderCard({
|
||||
order,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
onCancel,
|
||||
isCancelling,
|
||||
getStatusBadge,
|
||||
calculateTotal,
|
||||
showCancelButton,
|
||||
t,
|
||||
}: CompactOrderCardProps) {
|
||||
const total = useMemo(() => calculateTotal(order), [calculateTotal, order]);
|
||||
const itemCount = order.orderItems.length;
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden transition-all py-2 md:py-4 lg:py-6 hover:shadow-md">
|
||||
{/* Compact Header - Always Visible */}
|
||||
<div
|
||||
className="p-2 md:p-4 mx-2 md: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"
|
||||
onClick={onToggle}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-5 w-5 text-gray-500" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-base lg:text-lg">
|
||||
{t("order_number")} {order.id}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{itemCount} {itemCount === 1 ? t("product") : t("products")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col md:flex-row gap-2 items-end">
|
||||
{getStatusBadge(order.status)}
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-lg text-green-600">
|
||||
{total.toFixed(2)} TMT
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-5 w-5 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown className="h-5 w-5 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expandable Details */}
|
||||
{isExpanded && (
|
||||
<div className="border-t bg-white">
|
||||
{/* Order Info Grid */}
|
||||
<div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50">
|
||||
{/* <div className="flex items-start gap-3">
|
||||
<Calendar className="h-5 w-5 text-blue-500 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
{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 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 cursor-pointer"
|
||||
>
|
||||
{t("cancel_order")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user