hey-pharmacist-ecommerce 1.1.30 → 1.1.32

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}

package/src/screens/ProductDetailScreen.tsx

@@ -36,6 +36,8 @@ import { useWishlist } from '@/providers/WishlistProvider';
 import { ProductsApi, ProductVariant, ProductVariantInventoryStatusEnum } from '@/lib/Apis';
 import { useBasePath } from '@/providers/BasePathProvider';
 import { Category } from '@/lib/types';
+import { useProductReviews } from '@/hooks/useReviews';
+import { ProductReviewsSection } from '@/components/ProductReviewsSection';
 
 const safeFormatDate = (date?: Date | string, format: 'long' | 'short' = 'long'): string => {
   if (!date) return 'N/A';
@@ -60,6 +62,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   const { addToCart } = useCart();
   const { isAuthenticated } = useAuth();
   const notification = useNotification();
+  const { reviews, isLoading: reviewsLoading } = useProductReviews(productId);
 
   // State declarations
   const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
@@ -97,6 +100,24 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
     return productData;
   }, [productData, selectedVariant, initialProductData]);
 
+  // Calculate average rating and review count from actual reviews
+  const reviewStats = useMemo(() => {
+    if (!reviews || reviews.length === 0) {
+      return {
+        averageRating: product?.rating || 0,
+        reviewCount: 0,
+      };
+    }
+
+    const totalRating = reviews.reduce((sum, review) => sum + (review.rating || 0), 0);
+    const averageRating = totalRating / reviews.length;
+
+    return {
+      averageRating: Math.round(averageRating * 10) / 10, // Round to 1 decimal place
+      reviewCount: reviews.length,
+    };
+  }, [reviews, product?.rating]);
+
   const getVariantImages = () => {
     if (selectedVariant?.media?.length) {
       return selectedVariant.media.map((media: any) => ({
@@ -450,7 +471,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       {[...Array(5)].map((_, i) => (
                         <Star
                           key={i}
-                          className={`size-4 ${i < Math.floor(product.rating)
+                          className={`size-4 ${i < Math.floor(reviewStats.averageRating)
                             ? 'text-[#E67E50] fill-[#E67E50]'
                             : 'text-gray-300'
                             }`}
@@ -458,7 +479,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       ))}
                     </div>
                     <span className="font-['Poppins',sans-serif] text-[14px] text-muted">
-                      {product.rating} ({product.reviewCount ? product.reviewCount : 0} reviews)
+                      {reviewStats.averageRating} ({reviewStats.reviewCount} {reviewStats.reviewCount === 1 ? 'review' : 'reviews'})
                     </span>
                   </div>
                   {selectedVariant && (
@@ -754,15 +775,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 )}
 
                 {activeTab === 'reviews' && (
-                  <div className="text-center py-8">
-                    <Star className="size-12 text-[#E67E50] mx-auto mb-4" />
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-2">
-                      {product.rating} out of 5 stars
-                    </h3>
-                    <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
-                      Based on {product.reviewCount} customer reviews
-                    </p>
-                  </div>
+                  <ProductReviewsSection productId={productId} />
                 )}
               </div>
             </div>

package/src/screens/ProfileScreen.tsx

@@ -11,6 +11,7 @@ import {
   Settings,
   LogOut,
   ChevronDown,
+  Star,
 } from 'lucide-react';
 import { useAuth } from '@/providers/AuthProvider';
 import { useBasePath } from '@/providers/BasePathProvider';
@@ -22,10 +23,12 @@ import { AccountSavedItemsTab } from '@/components/AccountSavedItemsTab';
 import { AccountPaymentTab } from '@/components/AccountPaymentTab';
 import { AccountAddressesTab } from '@/components/AccountAddressesTab';
 import { AccountSettingsTab } from '@/components/AccountSettingsTab';
+import { AccountReviewsTab } from '@/components/AccountReviewsTab';
 
 const tabs = [
   { id: 'overview', label: 'Overview', icon: User },
   { id: 'orders', label: 'Orders', icon: Package },
+  { id: 'reviews', label: 'My Reviews', icon: Star },
   { id: 'saved-items', label: 'Saved Items', icon: Heart },
   // { id: 'payment', label: 'Payment', icon: CreditCard },
   { id: 'addresses', label: 'Addresses', icon: MapPin },
@@ -75,6 +78,8 @@ export default function AccountPage() {
         return <AccountOverviewTab />;
       case 'orders':
         return <AccountOrdersTab />;
+      case 'reviews':
+        return <AccountReviewsTab />;
       case 'saved-items':
         return <AccountSavedItemsTab />;
       // case 'payment':

package/src/styles/globals.css

@@ -142,6 +142,10 @@
   body {
     @apply bg-gray-50 text-gray-900 antialiased;
   }
+
+  button {
+    cursor: pointer;
+  }
 }
 
 @layer utilities {

package/styles/base.css

@@ -32,3 +32,9 @@ body {
 ::-webkit-scrollbar-thumb:hover { background-color: rgb(156 163 175); }
 
 
+
+
+/* Global button cursor */
+button {
+  cursor: pointer;
+}

package/styles/globals.css

@@ -1,3 +1,6 @@
 @import "../src/styles/globals.css";
 
 
+button {
+  cursor: pointer !important;
+}

package/src/lib/Apis/models/create-notification-dto.ts

@@ -1,75 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * Hey Pharamcist API
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: 1.0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-/**
- * 
- * @export
- * @interface CreateNotificationDto
- */
-export interface CreateNotificationDto {
-  _id?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof CreateNotificationDto
-     */
-    title: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof CreateNotificationDto
-     */
-    content: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof CreateNotificationDto
-     */
-    notificationType: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof CreateNotificationDto
-     */
-    notificationLink: string;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof CreateNotificationDto
-     */
-    sentTo: Array<string>;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof CreateNotificationDto
-     */
-    readBy: Array<string>;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof CreateNotificationDto
-     */
-    clearedBy: Array<string>;
-    /**
-     * 
-     * @type {boolean}
-     * @memberof CreateNotificationDto
-     */
-    isAdminNotification: boolean;
-    /**
-     * 
-     * @type {string}
-     * @memberof CreateNotificationDto
-     */
-    storeId: string;
-}