hey-pharmacist-ecommerce 1.1.29 → 1.1.31

package/src/components/NotificationDrawer.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Settings, CheckCheck, BellOff } from 'lucide-react';
+import { useNotificationCenter } from '@/providers/NotificationCenterProvider';
+import { NotificationCard } from './NotificationCard';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+export function NotificationDrawer() {
+    const {
+        isDrawerOpen,
+        closeDrawer,
+        notifications,
+        unreadCount,
+        isLoading,
+        markAsRead,
+        markAllAsRead,
+        deleteNotification,
+        loadMore,
+        hasMore,
+    } = useNotificationCenter();
+
+    const router = useRouter();
+    const { buildPath } = useBasePath();
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+    // Debug logging
+    console.log('NotificationDrawer render:', {
+        isDrawerOpen,
+        notificationsCount: notifications.length,
+        notifications: notifications.slice(0, 2), // First 2 for brevity
+        unreadCount,
+        isLoading,
+    });
+
+    // Handle scroll for infinite loading
+    const handleScroll = () => {
+        if (!scrollContainerRef.current || isLoading || !hasMore) return;
+
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+        if (scrollPercentage > 0.8) {
+            loadMore();
+        }
+    };
+
+    // Close drawer on escape key
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && isDrawerOpen) {
+                closeDrawer();
+            }
+        };
+
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isDrawerOpen, closeDrawer]);
+
+    // Prevent body scroll when drawer is open
+    useEffect(() => {
+        if (isDrawerOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isDrawerOpen]);
+
+    const handleSettingsClick = () => {
+        closeDrawer();
+        router.push(buildPath('/account/notifications'));
+    };
+
+    return (
+        <AnimatePresence>
+            {isDrawerOpen && (
+                <>
+                    {/* Backdrop */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black/50 z-40"
+                        onClick={closeDrawer}
+                    />
+
+                    {/* Drawer */}
+                    <motion.div
+                        initial={{ x: '100%' }}
+                        animate={{ x: 0 }}
+                        exit={{ x: '100%' }}
+                        transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+                        className="fixed right-0 top-0 bottom-0 w-full sm:w-[480px] bg-white shadow-2xl z-50 flex flex-col"
+                    >
+                        {/* Header */}
+                        <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-white">
+                            <div className="flex items-center gap-3">
+                                <h2 className="text-xl font-bold text-gray-900">Notifications</h2>
+                                {unreadCount > 0 && (
+                                    <span className="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
+                                        {unreadCount}
+                                    </span>
+                                )}
+                            </div>
+
+                            <div className="flex items-center gap-2">
+                                {/* Mark all as read */}
+                                {unreadCount > 0 && (
+                                    <button
+                                        onClick={markAllAsRead}
+                                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                                        title="Mark all as read"
+                                    >
+                                        <CheckCheck className="w-5 h-5 text-gray-600" />
+                                    </button>
+                                )}
+
+                                {/* Settings */}
+                                <button
+                                    onClick={handleSettingsClick}
+                                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                                    title="Notification settings"
+                                >
+                                    <Settings className="w-5 h-5 text-gray-600" />
+                                </button>
+
+                                {/* Close */}
+                                <button
+                                    onClick={closeDrawer}
+                                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                                    aria-label="Close"
+                                >
+                                    <X className="w-5 h-5 text-gray-600" />
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Notification List */}
+                        <div
+                            ref={scrollContainerRef}
+                            onScroll={handleScroll}
+                            className="flex-1 overflow-y-auto p-4 space-y-3"
+                        >
+                            {notifications.length === 0 && !isLoading ? (
+                                // Empty state
+                                <div className="flex flex-col items-center justify-center h-full text-center py-12">
+                                    <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                                        <BellOff className="w-10 h-10 text-gray-400" />
+                                    </div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                        No notifications yet
+                                    </h3>
+                                    <p className="text-sm text-gray-500 max-w-xs">
+                                        When you receive notifications, they'll appear here
+                                    </p>
+                                </div>
+                            ) : (
+                                <>
+                                    {notifications.map((notification) => (
+                                        <NotificationCard
+                                            key={notification._id}
+                                            notification={notification}
+                                            onMarkAsRead={markAsRead}
+                                            onDelete={deleteNotification}
+                                        />
+                                    ))}
+
+                                    {/* Loading indicator */}
+                                    {isLoading && (
+                                        <div className="flex justify-center py-4">
+                                            <div className="w-6 h-6 border-2 border-primary-600 border-t-transparent rounded-full animate-spin" />
+                                        </div>
+                                    )}
+
+                                    {/* End of list indicator */}
+                                    {!hasMore && notifications.length > 0 && (
+                                        <div className="text-center py-4 text-sm text-gray-500">
+                                            You're all caught up! 🎉
+                                        </div>
+                                    )}
+                                </>
+                            )}
+                        </div>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+}

package/src/components/OrderCard.tsx

@@ -1,126 +1,191 @@
 'use client';
 
-import React from 'react';
-import { motion } from 'framer-motion';
-import { CreditCard } from 'lucide-react';
+import React, { useRef, useState } from 'react';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { CreditCard, Star, Trash2 } from 'lucide-react';
 import { PaymentPaymentMethodEnum, PaymentPaymentStatusEnum, PopulatedOrder } from '@/lib/Apis';
 import { formatPrice, formatDate } from '@/lib/utils/format';
 import { Badge } from './ui/Badge';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 interface OrderCardProps {
   order: PopulatedOrder;
+  onDelete?: (id: string) => void;
 }
 
-export function OrderCard({ order }: OrderCardProps) {
+export function OrderCard({ order, onDelete }: OrderCardProps) {
+  const router = useRouter();
+  const { buildPath } = useBasePath();
+  const [isDragging, setIsDragging] = useState(false);
+  const dragX = useMotionValue(0);
+
+  // Create an opacity transformation based on the drag distance
+  const deleteOpacity = useTransform(dragX, [-100, -20], [1, 0]);
+
   const config = order.orderStatus;
   const itemCount = order.items?.length || 0;
   const showPriceBreakdown = (order.shippingCost && order.shippingCost > 0) ||
     (order.tax && order.tax > 0) ||
     (order.discountedAmount && order.discountedAmount > 0);
 
+  const isCompletedOrder = order.orderStatus &&
+    ['Delivered', 'Picked Up', 'Fulfilled'].includes(order.orderStatus);
+
+  const handleReviewClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    router.push(buildPath('/reviews'));
+  };
+
+  const handleCardClick = () => {
+    if (isDragging) return;
+    router.push(buildPath(`/account/orders/${order._id || order.id}`));
+  };
+
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="rounded-lg border border-slate-200 bg-white p-4 shadow-xs hover:shadow-md transition-shadow"
-    >
-      {/* Header - Compact */}
-      <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
-        <div className="flex items-center gap-3">
-          <h3 className="text-base font-bold text-slate-900">
-            Order #{order?._id?.slice(0, 8) || ''}
-          </h3>
-          <Badge variant={config as 'success' | 'warning' | 'primary' | 'danger' | 'gray'}>{config}</Badge>
-          <span className="text-xs text-gray-500">
-            {formatDate(order.createdAt || new Date(), 'short')}
-          </span>
+    <div className="relative overflow-hidden rounded-lg bg-slate-100">
+      {/* Delete Background Layer */}
+      <motion.div
+        style={{ opacity: deleteOpacity }}
+        className="absolute inset-0 bg-red-600 flex items-center justify-end px-8"
+      >
+        <div className="flex flex-col items-center gap-1 text-white">
+          <Trash2 className="w-6 h-6" />
+          <span className="text-[10px] font-bold uppercase tracking-wider">Delete</span>
         </div>
-        <div className="text-right">
-          <p className="text-lg font-bold text-slate-900">{formatPrice(order.grandTotal || 0)}</p>
-          {itemCount > 0 && (
-            <p className="text-xs text-gray-500">{itemCount} {itemCount === 1 ? 'item' : 'items'}</p>
-          )}
+      </motion.div>
+
+      {/* Swipeable Foreground Card */}
+      <motion.div
+        drag="x"
+        dragDirectionLock
+        dragConstraints={{ left: -100, right: 0 }}
+        dragElastic={0.05}
+        onDragStart={() => setIsDragging(true)}
+        onDragEnd={(_, info) => {
+          // Reset dragging state after a short delay to prevent accidental click
+          setTimeout(() => setIsDragging(false), 50);
+
+          if (info.offset.x < -70 && onDelete && (order._id || order.id)) {
+            onDelete((order._id || order.id) as string);
+          }
+        }}
+        style={{ x: dragX }}
+        whileTap={{ cursor: 'grabbing' }}
+        className="relative z-10 bg-white border border-slate-200 p-4 shadow-xs hover:shadow-md transition-shadow cursor-pointer touch-pan-y"
+        onClick={handleCardClick}
+      >
+        {/* Header - Compact */}
+        <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
+          <div className="flex items-center gap-3">
+            <h3 className="text-base font-bold text-slate-900 group-hover:text-primary transition-colors">
+              Order #{(order._id || order.id || '').slice(-8).toUpperCase()}
+            </h3>
+            <Badge variant={config as any}>{config}</Badge>
+            <span className="text-xs text-gray-500">
+              {formatDate(order.createdAt || new Date(), 'short')}
+            </span>
+          </div>
+          <div className="text-right">
+            <p className="text-lg font-bold text-slate-900">{formatPrice(order.grandTotal || 0)}</p>
+            {itemCount > 0 && (
+              <p className="text-xs text-gray-500">{itemCount} {itemCount === 1 ? 'item' : 'items'}</p>
+            )}
+          </div>
         </div>
-      </div>
-
-      {/* Items List - Compact */}
-      <div className="space-y-2 mb-4">
-        {order.items && order.items.length > 0 ? (
-          order.items.slice(0, 3).map((item) => {
-            const itemPrice = item.productVariantData?.finalPrice || 0;
-            const itemTotal = itemPrice * item.quantity;
-
-            return (
-              <div key={item.productVariantId || item._id} className="flex items-center gap-2 text-sm">
-                <div className="relative w-12 h-12 rounded-sm bg-gray-100 shrink-0 overflow-hidden">
-                  <Image
-                    src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'}
-                    alt={item?.productVariantData?.name || 'Product image'}
-                    fill
-                    className="object-cover"
-                    sizes="48px"
-                  />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="font-medium text-slate-900 truncate text-sm">
-                    {item.productVariantData?.name || 'Unknown Product'}
-                  </p>
-                  <p className="text-xs text-gray-500">Qty: {item.quantity}</p>
+
+        {/* Items List - Compact */}
+        <div className="space-y-2 mb-4">
+          {order.items && order.items.length > 0 ? (
+            order.items.slice(0, 3).map((item) => {
+              const itemPrice = item.productVariantData?.finalPrice || 0;
+              const itemTotal = itemPrice * item.quantity;
+
+              return (
+                <div key={item.productVariantId || item._id} className="flex items-center gap-2 text-sm">
+                  <div className="relative w-12 h-12 rounded-sm bg-gray-100 shrink-0 overflow-hidden">
+                    <Image
+                      src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'}
+                      alt={item?.productVariantData?.name || 'Product image'}
+                      fill
+                      className="object-cover"
+                      sizes="48px"
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-slate-900 truncate text-sm">
+                      {item.productVariantData?.name || 'Unknown Product'}
+                    </p>
+                    <p className="text-xs text-gray-500">Qty: {item.quantity}</p>
+                  </div>
+                  <p className="font-semibold text-slate-900 text-sm">{formatPrice(itemTotal)}</p>
                 </div>
-                <p className="font-semibold text-slate-900 text-sm">{formatPrice(itemTotal)}</p>
-              </div>
-            );
-          })
-        ) : (
-          <p className="text-sm text-gray-500 text-center py-2">No items found</p>
-        )}
-        {order.items && order.items.length > 3 && (
-          <p className="text-xs text-gray-500 text-center pt-1">
-            +{order.items.length - 3} more {order.items.length - 3 === 1 ? 'item' : 'items'}
-          </p>
-        )}
-      </div>
-
-      {/* Price Breakdown - Only if needed */}
-      {showPriceBreakdown && (
-        <div className="mb-4 pb-4 border-b border-gray-200 space-y-1 text-xs">
-          {order.shippingCost !== undefined && order.shippingCost > 0 && (
-            <div className="flex justify-between text-gray-600">
-              <span>Shipping</span>
-              <span>{formatPrice(order.shippingCost)}</span>
-            </div>
-          )}
-          {order.tax !== undefined && order.tax > 0 && (
-            <div className="flex justify-between text-gray-600">
-              <span>Tax</span>
-              <span>{formatPrice(order.tax)}</span>
-            </div>
+              );
+            })
+          ) : (
+            <p className="text-sm text-gray-500 text-center py-2">No items found</p>
           )}
-          {order.discountedAmount !== undefined && order.discountedAmount > 0 && (
-            <div className="flex justify-between text-green-600">
-              <span>Discount</span>
-              <span>-{formatPrice(order.discountedAmount)}</span>
-            </div>
+          {order.items && order.items.length > 3 && (
+            <p className="text-xs text-gray-500 text-center pt-1">
+              +{order.items.length - 3} more {order.items.length - 3 === 1 ? 'item' : 'items'}
+            </p>
           )}
         </div>
-      )}
-
-      {/* Footer Actions */}
-      {order.payment?.paymentStatus !== PaymentPaymentStatusEnum.Paid && order.payment?.paymentMethod === PaymentPaymentMethodEnum.Card && (
-        <div className="flex justify-end">
-          <button
-            onClick={() => {
-              window.open(order?.payment?.hostedInvoiceUrl || '', '_blank')
-            }}
-            className="inline-flex items-center gap-2 rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 text-sm font-medium transition-colors"
-          >
-            <CreditCard className="w-4 h-4" />
-            Pay Now
-          </button>
+
+        {/* Price Breakdown - Only if needed */}
+        {showPriceBreakdown && (
+          <div className="mb-4 pb-4 border-b border-gray-200 space-y-1 text-xs">
+            {order.shippingCost !== undefined && order.shippingCost > 0 && (
+              <div className="flex justify-between text-gray-600">
+                <span>Shipping</span>
+                <span>{formatPrice(order.shippingCost)}</span>
+              </div>
+            )}
+            {order.tax !== undefined && order.tax > 0 && (
+              <div className="flex justify-between text-gray-600">
+                <span>Tax</span>
+                <span>{formatPrice(order.tax)}</span>
+              </div>
+            )}
+            {order.discountedAmount !== undefined && order.discountedAmount > 0 && (
+              <div className="flex justify-between text-green-600">
+                <span>Discount</span>
+                <span>-{formatPrice(order.discountedAmount)}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Footer Actions */}
+        <div className="flex items-center justify-end gap-3 font-medium">
+          {order.payment?.paymentStatus !== PaymentPaymentStatusEnum.Paid &&
+            order.payment?.paymentMethod === PaymentPaymentMethodEnum.Card && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  window.open(order?.payment?.hostedInvoiceUrl || '', '_blank');
+                }}
+                className="inline-flex items-center gap-2 rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 text-sm transition-colors"
+                onPointerDown={(e) => e.stopPropagation()}
+              >
+                <CreditCard className="w-4 h-4" />
+                Pay Now
+              </button>
+            )}
+
+          {isCompletedOrder && (
+            <button
+              onClick={handleReviewClick}
+              className="inline-flex items-center gap-2 rounded-lg border border-[#E67E50] bg-white hover:bg-[#E67E50]/5 text-[#E67E50] px-4 py-2 text-sm transition-colors"
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              <Star className="w-4 h-4" />
+              Write Review
+            </button>
+          )}
         </div>
-      )}
-    </motion.div>
+      </motion.div>
+    </div>
   );
 }
-

package/src/components/ProductReviewsSection.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React from 'react';
+import { useProductReviews } from '@/hooks/useReviews';
+import { RatingDistribution } from './RatingDistribution';
+import { ReviewsList } from './ReviewsList';
+
+interface ProductReviewsSectionProps {
+  productId: string;
+}
+
+export function ProductReviewsSection({ productId }: ProductReviewsSectionProps) {
+  const { reviews, isLoading, error } = useProductReviews(productId);
+
+  if (error) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-600 mb-2">Failed to load reviews</p>
+        <p className="text-sm text-gray-500">{error.message}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <RatingDistribution reviews={reviews} />
+      <ReviewsList reviews={reviews} isLoading={isLoading} />
+    </div>
+  );
+}

package/src/components/RatingDistribution.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { Review } from '@/lib/Apis/models';
+import { StarRating } from './StarRating';
+import { Star } from 'lucide-react';
+
+interface RatingDistributionProps {
+  reviews: Review[];
+  averageRating?: number;
+}
+
+export function RatingDistribution({ reviews, averageRating }: RatingDistributionProps) {
+  const totalReviews = reviews.length;
+
+  const ratingCounts = reviews.reduce(
+    (acc, review) => {
+      const rating = Math.floor(review.rating);
+      acc[rating] = (acc[rating] || 0) + 1;
+      return acc;
+    },
+    {} as Record<number, number>
+  );
+
+  const calculatedAverage =
+    averageRating ||
+    (totalReviews > 0
+      ? reviews.reduce((sum, r) => sum + r.rating, 0) / totalReviews
+      : 0);
+
+  const getRatingPercentage = (rating: number) => {
+    const count = ratingCounts[rating] || 0;
+    return totalReviews > 0 ? (count / totalReviews) * 100 : 0;
+  };
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-6">
+      <div className="flex flex-col md:flex-row gap-8">
+        <div className="flex flex-col items-center justify-center border-r border-gray-200 pr-8">
+          <div className="text-5xl font-bold text-gray-900 mb-2">
+            {calculatedAverage.toFixed(1)}
+          </div>
+          <StarRating rating={calculatedAverage} size="md" showNumber={false} />
+          <p className="text-sm text-gray-600 mt-2">
+            Based on {totalReviews} {totalReviews === 1 ? 'review' : 'reviews'}
+          </p>
+        </div>
+
+        <div className="flex-1 space-y-3">
+          {[5, 4, 3, 2, 1].map((rating) => {
+            const percentage = getRatingPercentage(rating);
+            const count = ratingCounts[rating] || 0;
+
+            return (
+              <div key={rating} className="flex items-center gap-3">
+                <div className="flex items-center gap-1 w-16">
+                  <span className="text-sm font-medium text-gray-700">{rating}</span>
+                  <Star className="size-3 fill-[#E67E50] text-[#E67E50]" />
+                </div>
+
+                <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-[#E67E50] transition-all duration-300"
+                    style={{ width: `${percentage}%` }}
+                  />
+                </div>
+
+                <span className="text-sm text-gray-600 w-12 text-right">
+                  {count}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {totalReviews === 0 && (
+        <div className="text-center py-8">
+          <Star className="size-12 text-gray-300 mx-auto mb-4" />
+          <p className="text-gray-600 font-medium mb-1">No reviews yet</p>
+          <p className="text-sm text-gray-500">Be the first to review this product!</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ReviewCard.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import { Review } from '@/lib/Apis/models';
+import { StarRating } from './StarRating';
+import { MessageCircle, User } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+interface ReviewCardProps {
+  review: Review;
+  showProductInfo?: boolean;
+}
+
+export function ReviewCard({ review, showProductInfo = false }: ReviewCardProps) {
+  const reviewDate = new Date(review.createdAt);
+  const replyDate = review.replyDate ? new Date(review.replyDate) : null;
+
+  return (
+    <div className="border border-gray-200 rounded-lg p-4 bg-white">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-[#E67E50]/10 rounded-full flex items-center justify-center">
+            <User className="size-5 text-[#E67E50]" />
+          </div>
+          <div>
+            <p className="font-medium text-gray-900">Customer Review</p>
+            <p className="text-xs text-gray-500">
+              {formatDistanceToNow(reviewDate, { addSuffix: true })}
+            </p>
+          </div>
+        </div>
+        <StarRating rating={review.rating} size="sm" />
+      </div>
+
+      {review.reviewType && (
+        <span className="inline-block px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded mb-2">
+          {review.reviewType}
+        </span>
+      )}
+
+      <p className="text-gray-700 text-sm leading-relaxed mb-3">{review.review}</p>
+
+      {review.reply && (
+        <div className="mt-4 pl-4 border-l-2 border-[#E67E50] bg-gray-50 p-3 rounded">
+          <div className="flex items-center gap-2 mb-2">
+            <MessageCircle className="size-4 text-[#E67E50]" />
+            <p className="text-xs font-medium text-gray-900">Store Response</p>
+            {replyDate && (
+              <p className="text-xs text-gray-500">
+                {formatDistanceToNow(replyDate, { addSuffix: true })}
+              </p>
+            )}
+          </div>
+          <p className="text-sm text-gray-700">{review.reply}</p>
+        </div>
+      )}
+    </div>
+  );
+}