hey-pharmacist-ecommerce 1.1.30 → 1.1.31

package/src/screens/OrderDetailScreen.tsx

@@ -0,0 +1,283 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+    ChevronLeft,
+    Package,
+    Truck,
+    MapPin,
+    CreditCard,
+    Calendar,
+    ExternalLink,
+    Printer,
+    CheckCircle2,
+    Clock,
+    AlertCircle,
+    Info
+} from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useOrder } from '@/hooks/useOrders';
+import { useBasePath } from '@/providers/BasePathProvider';
+import { formatPrice, formatDate } from '@/lib/utils/format';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import Image from 'next/image';
+
+interface OrderDetailScreenProps {
+    id: string;
+}
+
+export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
+    const router = useRouter();
+    const { buildPath } = useBasePath();
+    const { order, isLoading, error } = useOrder(id);
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
+                <div className="w-16 h-16 border-4 border-primary/20 border-t-primary rounded-full animate-spin mb-4" />
+                <p className="text-muted font-medium animate-pulse">Retrieving order details...</p>
+            </div>
+        );
+    }
+
+    if (error || !order) {
+        return (
+            <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
+                <div className="p-4 bg-red-50 rounded-full mb-4">
+                    <AlertCircle className="w-10 h-10 text-red-500" />
+                </div>
+                <h1 className="text-xl font-bold text-secondary mb-2">Order Not Found</h1>
+                <p className="text-muted mb-6">We couldn't find the order you're looking for.</p>
+                <Button onClick={() => router.push(buildPath('/account'))}>
+                    Back to Account
+                </Button>
+            </div>
+        );
+    }
+
+    const items = order.items || [];
+    const status = order.orderStatus || 'Pending';
+    const isDelivery = order.orderType === 'Delivery';
+
+    const getStatusVariant = (status: string): 'success' | 'warning' | 'primary' | 'danger' | 'gray' => {
+        switch (status.toLowerCase()) {
+            case 'pending': return 'warning';
+            case 'delivered':
+            case 'fulfilled':
+            case 'picked up': return 'success';
+            case 'shipped': return 'primary';
+            case 'cancelled': return 'danger';
+            default: return 'gray';
+        }
+    };
+
+    const shippingAddress = order.shippingInfo?.addressTo;
+    const pickupAddress = order.pickUpAddress;
+    const activeAddress = isDelivery ? shippingAddress : pickupAddress;
+
+    return (
+        <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB] pb-20">
+            {/* Header / Navigation */}
+            <div className="container mx-auto px-4 pt-8 max-w-6xl">
+                <button
+                    onClick={() => router.back()}
+                    className="group flex items-center gap-2 text-muted hover:text-secondary transition-colors mb-6"
+                >
+                    <div className="p-1.5 rounded-full bg-white shadow-xs group-hover:shadow-md transition-all">
+                        <ChevronLeft className="w-4 h-4" />
+                    </div>
+                    <span className="text-sm font-semibold">Back to History</span>
+                </button>
+
+                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
+                    <div>
+                        <div className="flex items-center gap-3 mb-2">
+                            <h1 className="text-3xl font-bold text-secondary">Order Details</h1>
+                            <Badge variant={getStatusVariant(status)}>{status}</Badge>
+                            <Badge variant="primary" className="bg-primary-100 text-primary-700 border-primary-200">
+                                {order.orderType || 'Pickup'}
+                            </Badge>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted">
+                            <span className="flex items-center gap-1.5 font-medium">
+                                <span className="opacity-60 text-xs uppercase tracking-widest font-bold">ID:</span>
+                                <span className="text-secondary font-mono tracking-tight">#{id.toUpperCase()}</span>
+                            </span>
+                            <span className="flex items-center gap-1.5 font-medium">
+                                <Calendar className="w-4 h-4 opacity-60" />
+                                {formatDate(order.createdAt || new Date(), 'long')}
+                            </span>
+                        </div>
+                    </div>
+                    <div className="flex gap-3">
+                        {order.payment?.hostedInvoiceUrl && (
+                            <Button size="sm" onClick={() => window.open(order.payment?.hostedInvoiceUrl, '_blank')} className="bg-accent hover:bg-accent-dark border-none">
+                                <ExternalLink className="w-4 h-4" />
+                                Payment Details
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="container mx-auto px-4 max-w-6xl grid grid-cols-1 lg:grid-cols-3 gap-8">
+                {/* Left Column: Order Tracking & Items */}
+                <div className="lg:col-span-2 space-y-6">
+                    {/* Items Section */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="bg-white rounded-3xl border border-slate-200 shadow-xs overflow-hidden"
+                    >
+                        <div className="p-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                                <Package className="w-5 h-5 text-secondary" />
+                                <h2 className="font-bold text-secondary">Order Items</h2>
+                            </div>
+                            <span className="text-xs font-bold bg-slate-200 text-muted px-2.5 py-1 rounded-full">
+                                {items.length} {items.length === 1 ? 'Product' : 'Products'}
+                            </span>
+                        </div>
+                        <div className="divide-y divide-slate-100">
+                            {items.map((item, idx) => (
+                                <div key={item._id || idx} className="p-6 flex gap-6 group hover:bg-slate-50/50 transition-colors">
+                                    <div className="relative w-20 h-20 bg-slate-100 rounded-2xl overflow-hidden shrink-0 border border-slate-100 group-hover:scale-105 transition-transform duration-300">
+                                        <Image
+                                            src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'}
+                                            alt={item.productVariantData?.name || 'Item'}
+                                            fill
+                                            className="object-cover"
+                                            sizes="80px"
+                                        />
+                                    </div>
+                                    <div className="flex-1 flex flex-col justify-between py-1">
+                                        <div>
+                                            <h3 className="font-bold text-secondary text-lg group-hover:text-primary transition-colors leading-snug mb-1">
+                                                {item.productVariantData?.name}
+                                            </h3>
+                                            <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted">
+                                                <span className="flex items-center gap-1.5">
+                                                    <span className="w-1.5 h-1.5 rounded-full bg-slate-300" />
+                                                    Quantity: <span className="text-secondary font-bold">{item.quantity}</span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div className="flex items-center justify-between">
+                                            <span className="text-muted text-sm">{formatPrice(item.productVariantData?.finalPrice || 0)} per unit</span>
+                                            <span className="font-black text-secondary">{formatPrice((item.productVariantData?.finalPrice || 0) * item.quantity)}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+
+                    {/* Order Meta / Info */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xs">
+                            <div className="flex items-center gap-2 mb-4">
+                                <MapPin className="w-5 h-5 text-accent" />
+                                <h3 className="font-bold text-secondary">{isDelivery ? 'Shipping Address' : 'Pickup Location'}</h3>
+                            </div>
+                            {activeAddress ? (
+                                <div className="text-sm text-muted leading-relaxed">
+                                    <p className="font-bold text-secondary text-base mb-1">
+                                        {activeAddress.name}
+                                    </p>
+                                    <p>{activeAddress.street1}</p>
+                                    {activeAddress.street2 && <p>{activeAddress.street2}</p>}
+                                    <p>{activeAddress.city}, {activeAddress.state} {activeAddress.zip}</p>
+                                    <p>{activeAddress.country}</p>
+                                </div>
+                            ) : (
+                                <p className="text-sm text-muted italic">No address recorded</p>
+                            )}
+                        </div>
+                        <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xs">
+                            <div className="flex items-center gap-2 mb-4">
+                                <CreditCard className="w-5 h-5 text-accent" />
+                                <h3 className="font-bold text-secondary">Payment Method</h3>
+                            </div>
+                            <div className="text-sm text-muted leading-relaxed">
+                                <p className="font-bold text-secondary text-base mb-1">
+                                    {order.payment?.paymentMethod ? order.payment.paymentMethod.replace('_', ' ').toUpperCase() : 'N/A'}
+                                </p>
+                                <p className="flex items-center gap-2 mt-2">
+                                    <span className="opacity-60">Status:</span>
+                                    <Badge variant={order.payment?.paymentStatus === 'Paid' ? 'success' : 'warning'}>
+                                        {order.payment?.paymentStatus || 'Processing'}
+                                    </Badge>
+                                </p>
+                                {order.payment?.transactionId && (
+                                    <p className="mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-tighter">
+                                        Ref: {order.payment.transactionId}
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Column: Order Summary */}
+                <div className="space-y-6">
+                    <motion.div
+                        initial={{ opacity: 0, x: 20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        className="bg-secondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary/20 sticky top-8"
+                    >
+                        <h2 className="text-xl font-bold mb-6 flex items-center gap-2">
+                            Summary View
+                        </h2>
+
+                        <div className="space-y-4 mb-8">
+                            <div className="flex justify-between items-center text-white/70">
+                                <span className="text-sm font-medium">Subtotal</span>
+                                <span className="font-bold text-white">{formatPrice(order.subTotal || 0)}</span>
+                            </div>
+                            <div className="flex justify-between items-center text-white/70">
+                                <span className="text-sm font-medium">Shipping</span>
+                                <span className="font-bold text-white">{formatPrice(order.shippingCost || 0)}</span>
+                            </div>
+                            <div className="flex justify-between items-center text-white/70">
+                                <span className="text-sm font-medium">Tax</span>
+                                <span className="font-bold text-white">{formatPrice(order.tax || 0)}</span>
+                            </div>
+                            {order.discountedAmount !== undefined && order.discountedAmount > 0 && (
+                                <div className="flex justify-between items-center text-primary">
+                                    <span className="text-sm font-medium">Discount</span>
+                                    <span className="font-bold">-{formatPrice(order.discountedAmount)}</span>
+                                </div>
+                            )}
+
+                            <div className="pt-4 border-t border-white/10 mt-4">
+                                <div className="flex justify-between items-end">
+                                    <div>
+                                        <p className="text-xs font-black uppercase tracking-[0.2em] text-white/40 mb-1">Grand Total</p>
+                                        <p className="text-3xl font-black">{formatPrice(order.grandTotal || 0)}</p>
+                                    </div>
+                                    <div className="px-3 py-1 bg-white/10 rounded-lg text-[10px] font-black uppercase tracking-wider text-white/60">
+                                        USD
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {order.orderStatus === 'Pending' && (
+                            <div className="p-4 bg-white/5 rounded-2xl border border-white/10 mb-8">
+                                <div className="flex items-start gap-3">
+                                    <Info className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+                                    <div>
+                                        <p className="text-xs font-bold mb-1">Order is processing</p>
+                                        <p className="text-[11px] text-white/60 leading-relaxed">We've received your request and our pharmacists are reviewing it for safety and accuracy.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </motion.div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/screens/OrderReviewsScreen.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { PopulatedOrder } from '@/lib/Apis/models';
+import { ReviewForm } from '@/components/ReviewForm';
+import { ArrowLeft, Package } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import Image from 'next/image';
+import { useCurrentOrders } from '@/hooks/useOrders';
+import { useAuth } from '@/providers/AuthProvider';
+
+interface SelectedProduct {
+  productId: string;
+  productName: string;
+  productVariantId: string;
+  variantName: string;
+  variantImage?: string;
+}
+
+export function OrderReviewsScreen() {
+  const router = useRouter();
+  const { isAuthenticated } = useAuth();
+  const { orders, isLoading, error, refetch } = useCurrentOrders();
+  const [selectedOrder, setSelectedOrder] = useState<PopulatedOrder | null>(null);
+  const [selectedProduct, setSelectedProduct] = useState<SelectedProduct | null>(null);
+
+  // If not authenticated, redirect to login
+  React.useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  const handleOrderClick = (order: PopulatedOrder) => {
+    console.log('Selected order:', order.id || order._id, 'Status:', order.orderStatus);
+    console.log('Full order data:', JSON.stringify(order, null, 2));
+    setSelectedOrder(order);
+  };
+
+  const handleProductClick = (product: SelectedProduct) => {
+    console.log('Selected product:', product.productId, 'Variant:', product.productVariantId);
+    setSelectedProduct(product);
+  };
+
+  const handleReviewSuccess = () => {
+    console.log('Review submitted successfully!');
+    setSelectedProduct(null);
+    setSelectedOrder(null);
+    refetch();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <div className="animate-pulse space-y-4">
+            <div className="h-8 bg-gray-200 rounded w-1/3" />
+            <div className="space-y-3">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-24 bg-gray-200 rounded" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center py-12">
+            <p className="text-red-600 mb-4">{error.message}</p>
+            <button
+              onClick={() => router.back()}
+              className="text-[#E67E50] hover:underline"
+            >
+              Go Back
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show review form if a product is selected
+  if (selectedProduct && selectedOrder) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-2xl mx-auto">
+          <button
+            onClick={() => setSelectedProduct(null)}
+            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6"
+          >
+            <ArrowLeft className="size-5" />
+            Back to Products
+          </button>
+
+          <div className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+            <div className="flex items-center gap-4 mb-6">
+              {selectedProduct.variantImage && (
+                <div className="relative w-20 h-20 rounded-lg overflow-hidden bg-gray-100">
+                  <Image
+                    src={selectedProduct.variantImage}
+                    alt={selectedProduct.productName}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              )}
+              <div>
+                <h3 className="font-semibold text-lg text-gray-900">
+                  {selectedProduct.productName}
+                </h3>
+                <p className="text-sm text-gray-600">{selectedProduct.variantName}</p>
+              </div>
+            </div>
+
+            <ReviewForm
+              productId={selectedProduct.productId}
+              productVariantId={selectedProduct.productVariantId}
+              orderId={(() => {
+                const resolvedOrderId = selectedOrder.id || selectedOrder._id || '';
+                console.log('Passing orderId to ReviewForm:', resolvedOrderId);
+                console.log('Order userId:', selectedOrder.userId);
+                return resolvedOrderId;
+              })()}
+              onSuccess={handleReviewSuccess}
+              onCancel={() => setSelectedProduct(null)}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show order products if an order is selected
+  if (selectedOrder) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <button
+            onClick={() => setSelectedOrder(null)}
+            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6"
+          >
+            <ArrowLeft className="size-5" />
+            Back to Orders
+          </button>
+
+          <div className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-xl font-semibold text-gray-900">
+                  Order #{(selectedOrder.id || selectedOrder._id || '').slice(-8)}
+                </h2>
+                <p className="text-sm text-gray-600">Status: {selectedOrder.orderStatus}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {selectedOrder.items?.map((item: any, index: number) => {
+              // Debug: Log the full item structure
+              console.log('Order item structure:', JSON.stringify(item, null, 2));
+
+              // CartItemPopulated structure:
+              // - productVariantId: string (the ID we need)
+              // - productVariantData: ProductVariant object
+              // - quantity: number
+              const variantData = item.productVariantData || item.variant;
+              const variantId = item.productVariantId || item._id || item.id;
+
+              // Extract images from media array (ProductVariant uses 'media' not 'images')
+              const variantImages = variantData?.media?.map((m: any) => m.url || m.src || m) || variantData?.images || [];
+              const firstImage = variantImages[0];
+
+              return (
+                <div
+                  key={`${variantId}-${index}`}
+                  className="bg-white rounded-lg border border-gray-200 p-4 cursor-pointer hover:border-[#E67E50] hover:shadow-md transition-all"
+                  onClick={() => {
+                    // Try to extract productId from various possible locations
+                    const possibleProductId =
+                      item.productId ||
+                      item.product?._id ||
+                      item.product?.id ||
+                      variantData?.productId ||
+                      variantData?.product?._id ||
+                      variantData?.product?.id ||
+                      variantId; // Fallback to variantId if no productId found
+
+                    const productData = {
+                      productId: possibleProductId,
+                      productName: variantData?.name || item.product?.name || 'Product',
+                      productVariantId: variantId,
+                      variantName: variantData?.name || 'Default',
+                      variantImage: firstImage,
+                    };
+                    console.log('Extracted product data:', productData);
+                    handleProductClick(productData);
+                  }}
+                >
+                  <div className="flex items-center gap-4">
+                    {firstImage && (
+                      <div className="relative w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
+                        <Image
+                          src={firstImage}
+                          alt={variantData?.name || 'Product'}
+                          fill
+                          className="object-cover"
+                        />
+                      </div>
+                    )}
+                    <div className="flex-1">
+                      <h3 className="font-medium text-gray-900">{variantData?.name || 'Product'}</h3>
+                      <p className="text-sm text-gray-600">{variantData?.description || ''}</p>
+                      <p className="text-xs text-gray-500 mt-1">Quantity: {item.quantity}</p>
+                    </div>
+                    <div className="flex items-center gap-2 text-[#E67E50]">
+                      <span className="text-sm font-medium">Review Now</span>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show completed orders list
+  const completedOrders = orders.filter(order =>
+    order.orderStatus && ['Delivered', 'Picked Up', 'Fulfilled'].includes(order.orderStatus)
+  );
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Review Your Orders</h1>
+          <p className="text-gray-600">
+            Share your experience with products you've purchased
+          </p>
+          <p className="text-xs text-gray-500 mt-2">
+            You can only review orders that have been delivered or completed. Reviews help other customers make informed decisions!
+          </p>
+        </div>
+
+        {completedOrders.length === 0 ? (
+          <div className="text-center py-12 bg-white rounded-lg border border-gray-200">
+            <Package className="size-16 text-gray-300 mx-auto mb-4" />
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+              No completed orders
+            </h3>
+            <p className="text-gray-600 mb-6">
+              Complete an order to leave a review
+            </p>
+            <button
+              onClick={() => router.push('/shop')}
+              className="px-6 py-3 bg-[#E67E50] text-white rounded-lg hover:bg-[#d66f40] transition-colors"
+            >
+              Start Shopping
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {completedOrders.map((order) => (
+              <div
+                key={order.id || order._id}
+                className="bg-white rounded-lg border border-gray-200 p-6 cursor-pointer hover:border-[#E67E50] hover:shadow-md transition-all"
+                onClick={() => handleOrderClick(order)}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-2">
+                      <h3 className="font-semibold text-lg text-gray-900">
+                        Order #{(order.id || order._id || '').slice(-8)}
+                      </h3>
+                      <span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">
+                        {order.orderStatus}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-600 mb-1">
+                      {order.items?.length || 0} {order.items?.length === 1 ? 'item' : 'items'}
+                    </p>
+                    {order.createdAt && (
+                      <p className="text-xs text-gray-500">
+                        {formatDistanceToNow(new Date(order.createdAt), { addSuffix: true })}
+                      </p>
+                    )}
+                  </div>
+                  <div className="text-right">
+                    <div className="flex items-center gap-2 text-[#E67E50]">
+                      <span className="text-sm font-medium">Review Products</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/screens/OrdersScreen.tsx

@@ -12,6 +12,7 @@ import { FilterChips } from '@/components/FilterChips';
 import { useRouter } from 'next/navigation';
 import { ManualOrderDTOOrderStatusEnum, PaymentPaymentStatusEnum } from '@/lib/Apis';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { ReviewPromptBanner } from '@/components/ReviewPromptBanner';
 
 const STATUS_FILTERS = ['All', ...Object.values(ManualOrderDTOOrderStatusEnum)];
 const PAYMENT_FILTERS = ['All', ...Object.values(PaymentPaymentStatusEnum)];
@@ -24,7 +25,7 @@ export function OrdersScreen() {
   const [page, setPage] = useState(1);
   const [selectedFilter, setSelectedFilter] = useState<StatusFilterType>('All');
   const [selectedPaymentFilter, setSelectedPaymentFilter] = useState<PaymentFilterType>('All');
-  const { orders, isLoading, pagination } = useOrders(
+  const { orders, isLoading, pagination, deleteOrder } = useOrders(
     page,
     10,
     selectedFilter,
@@ -44,24 +45,41 @@ export function OrdersScreen() {
     });
   }, [orders, selectedFilter, selectedPaymentFilter]);
 
+  // Find the first completed order that hasn't been dismissed
+  const completedOrderForPrompt = useMemo(() => {
+    return filteredOrders.find(order =>
+      order.orderStatus && ['Delivered', 'Picked Up', 'Fulfilled'].includes(order.orderStatus)
+    );
+  }, [filteredOrders]);
+
   const hasOrders = filteredOrders.length > 0;
   const MAX_VISIBLE_FILTERS = 4;
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
       <div className="container mx-auto px-4 py-8 max-w-6xl">
         <motion.div
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           className="space-y-6"
         >
-          <div className="mb-6">
-            <h1 className="text-2xl font-bold text-slate-900">Orders</h1>
-            <p className="text-sm text-gray-500 mt-1">
-              {filteredOrders.length} {filteredOrders.length === 1 ? 'order' : 'orders'}
+          <div className="mb-8">
+            <h1 className="text-3xl font-black text-secondary tracking-tight">Order History</h1>
+            <p className="text-sm font-medium text-muted mt-1 flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
+              {filteredOrders.length} {filteredOrders.length === 1 ? 'record found' : 'records found'} for your account
             </p>
           </div>
 
+          {/* Review Prompt Banner */}
+          {!isLoading && completedOrderForPrompt && (
+            <ReviewPromptBanner
+              orderId={completedOrderForPrompt.id || completedOrderForPrompt._id || ''}
+              orderNumber={(completedOrderForPrompt.id || completedOrderForPrompt._id || '').slice(-8)}
+              itemCount={completedOrderForPrompt.items?.length || 0}
+            />
+          )}
+
           {/* Filters */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <FilterChips
@@ -96,7 +114,13 @@ export function OrdersScreen() {
             {isLoading ? (
               Array.from({ length: 3 }).map((_, index) => <OrderCardSkeleton key={index} />)
             ) : hasOrders ? (
-              filteredOrders.map((order) => <OrderCard key={order.id} order={order} />)
+              filteredOrders.map((order) => (
+                <OrderCard
+                  key={order.id || order._id}
+                  order={order}
+                  onDelete={deleteOrder}
+                />
+              ))
             ) : (
               <EmptyState
                 icon={Package}