Update page.tsx
This commit is contained in:
@@ -61,6 +61,14 @@ interface Order {
|
|||||||
}>;
|
}>;
|
||||||
totalPrice: number;
|
totalPrice: number;
|
||||||
trackingNumber?: string;
|
trackingNumber?: string;
|
||||||
|
telegramUsername?: string;
|
||||||
|
telegramBuyerId?: string;
|
||||||
|
review?: {
|
||||||
|
text: string;
|
||||||
|
date: string;
|
||||||
|
stars: number;
|
||||||
|
_id: string;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
interface OrderInList extends Order {
|
interface OrderInList extends Order {
|
||||||
@@ -551,19 +559,19 @@ export default function OrderDetailsPage() {
|
|||||||
{productNames[product.productId] || "Loading..."}
|
{productNames[product.productId] || "Loading..."}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right">{product.quantity}</TableCell>
|
<TableCell className="text-right">{product.quantity}</TableCell>
|
||||||
<TableCell className="text-right">${product.pricePerUnit.toFixed(2)}</TableCell>
|
<TableCell className="text-right">£{product.pricePerUnit.toFixed(2)}</TableCell>
|
||||||
<TableCell className="text-right">${product.totalItemPrice.toFixed(2)}</TableCell>
|
<TableCell className="text-right">£{product.totalItemPrice.toFixed(2)}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={2} />
|
<TableCell colSpan={2} />
|
||||||
<TableCell className="text-right font-medium">Shipping ({order?.shippingMethod.type})</TableCell>
|
<TableCell className="text-right font-medium">Shipping ({order?.shippingMethod.type})</TableCell>
|
||||||
<TableCell className="text-right">${order?.shippingMethod.price.toFixed(2)}</TableCell>
|
<TableCell className="text-right">£{order?.shippingMethod.price.toFixed(2)}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={2} />
|
<TableCell colSpan={2} />
|
||||||
<TableCell className="text-right font-bold">Total</TableCell>
|
<TableCell className="text-right font-bold">Total</TableCell>
|
||||||
<TableCell className="text-right font-bold">${order?.totalPrice.toFixed(2)}</TableCell>
|
<TableCell className="text-right font-bold">£{order?.totalPrice.toFixed(2)}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
@@ -576,6 +584,44 @@ export default function OrderDetailsPage() {
|
|||||||
<CardTitle className="text-lg font-medium">Customer Details</CardTitle>
|
<CardTitle className="text-lg font-medium">Customer Details</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
|
{(order?.telegramUsername || order?.telegramBuyerId) && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-sm font-medium text-zinc-500">Telegram Information</Label>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{order?.telegramUsername && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-zinc-400">Username</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="px-2 py-1 text-sm bg-zinc-950 rounded">@{order.telegramUsername}</code>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => copyToClipboard(order.telegramUsername || "")}
|
||||||
|
>
|
||||||
|
<Clipboard className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{order?.telegramBuyerId && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-zinc-400">Buyer ID</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="px-2 py-1 text-sm bg-zinc-950 rounded">{order?.telegramBuyerId}</code>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => copyToClipboard(order?.telegramBuyerId?.toString() || "")}
|
||||||
|
>
|
||||||
|
<Clipboard className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Label className="text-sm font-medium text-zinc-500">PGP Address</Label>
|
<Label className="text-sm font-medium text-zinc-500">PGP Address</Label>
|
||||||
<div className="flex items-start gap-2 mt-1">
|
<div className="flex items-start gap-2 mt-1">
|
||||||
@@ -741,6 +787,47 @@ export default function OrderDetailsPage() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Review Card */}
|
||||||
|
{order?.review && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg font-medium">Customer Review</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<svg
|
||||||
|
key={i}
|
||||||
|
className={`w-4 h-4 ${
|
||||||
|
i < (order?.review?.stars || 0)
|
||||||
|
? "text-yellow-400"
|
||||||
|
: "text-zinc-600"
|
||||||
|
}`}
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||||
|
</svg>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-zinc-400">
|
||||||
|
{new Date(order?.review?.date || '').toLocaleString('en-GB', {
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
hour12: false
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm">
|
||||||
|
{order?.review?.text}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user