hey-pharmacist-ecommerce 1.1.29 → 1.1.31

package/src/components/ReviewForm.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { StarRating } from './StarRating';
+import { useCreateReview } from '@/hooks/useReviews';
+import { useNotification } from '@/providers/NotificationProvider';
+import { Loader2 } from 'lucide-react';
+
+const reviewSchema = z.object({
+  rating: z.number().min(1, 'Please select a rating').max(5),
+  reviewType: z.string().optional(),
+  review: z
+    .string()
+    .min(10, 'Review must be at least 10 characters')
+    .max(1000, 'Review must be less than 1000 characters'),
+  productId: z.string().optional(), // Made optional since backend API says it's optional
+  productVariantId: z.string().optional(),
+});
+
+type ReviewFormData = z.infer<typeof reviewSchema>;
+
+interface ReviewFormProps {
+  productId: string;
+  productVariantId?: string;
+  orderId: string;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export function ReviewForm({
+  productId,
+  productVariantId,
+  orderId,
+  onSuccess,
+  onCancel,
+}: ReviewFormProps) {
+  const [rating, setRating] = useState(0);
+  const { createReview, isLoading } = useCreateReview();
+  const notification = useNotification();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+  } = useForm<ReviewFormData>({
+    resolver: zodResolver(reviewSchema),
+    defaultValues: {
+      productId,
+      productVariantId,
+      rating: 0,
+      reviewType: 'Product Review',
+    },
+  });
+
+  const onSubmit = async (data: ReviewFormData) => {
+    try {
+      const reviewPayload: any = {
+        rating: data.rating,
+        review: data.review,
+        reviewType: data.reviewType || 'Product Review',
+      };
+
+      // Only include productId if it's not empty
+      if (data.productId) {
+        reviewPayload.productId = data.productId;
+      }
+
+      // Only include productVariantId if it's not empty
+      if (data.productVariantId) {
+        reviewPayload.productVariantId = data.productVariantId;
+      }
+
+      console.log('Submitting review with orderId:', orderId);
+      console.log('Submitting review with payload:', reviewPayload);
+
+      await createReview(orderId, reviewPayload);
+
+      notification.success('Review submitted', 'Thank you for your feedback!');
+      reset();
+      setRating(0);
+      onSuccess?.();
+    } catch (error: any) {
+      const errorMessage = error.response?.data?.message || 'Failed to submit review';
+
+      console.error('=== REVIEW SUBMISSION ERROR ===');
+      console.error('Status:', error.response?.status);
+      console.error('Error message:', errorMessage);
+      console.error('Full error response:', JSON.stringify(error.response?.data, null, 2));
+      console.error('Request URL:', error.config?.url);
+      console.error('Request method:', error.config?.method);
+      console.error('Request data:', error.config?.data);
+
+      if (error.response?.status === 403) {
+        notification.error('Cannot submit review', 'You can only review your own completed orders. Please refresh the page and try again.');
+      } else if (error.response?.status === 400) {
+        notification.error('Invalid review', errorMessage);
+      } else {
+        notification.error('Submission failed', errorMessage);
+      }
+    }
+  };
+
+  const handleRatingChange = (newRating: number) => {
+    setRating(newRating);
+    setValue('rating', newRating, { shouldValidate: true });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Your Rating <span className="text-red-500">*</span>
+        </label>
+        <div className="flex items-center gap-3">
+          <StarRating
+            rating={rating}
+            size="lg"
+            interactive
+            onChange={handleRatingChange}
+          />
+          {rating > 0 && (
+            <span className="text-sm text-gray-600">
+              {rating === 1 && 'Poor'}
+              {rating === 2 && 'Fair'}
+              {rating === 3 && 'Good'}
+              {rating === 4 && 'Very Good'}
+              {rating === 5 && 'Excellent'}
+            </span>
+          )}
+        </div>
+        {errors.rating && (
+          <p className="text-red-500 text-xs mt-1">{errors.rating.message}</p>
+        )}
+      </div>
+
+      <div>
+        <label
+          htmlFor="reviewType"
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          Review Type
+        </label>
+        <select
+          id="reviewType"
+          {...register('reviewType')}
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#E67E50] focus:border-transparent"
+        >
+          <option value="Product Review">Product Review</option>
+          <option value="Quality Review">Quality Review</option>
+          <option value="Service Review">Service Review</option>
+          <option value="Delivery Review">Delivery Review</option>
+        </select>
+      </div>
+
+      <div>
+        <label
+          htmlFor="review"
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          Your Review <span className="text-red-500">*</span>
+        </label>
+        <textarea
+          id="review"
+          {...register('review')}
+          rows={5}
+          placeholder="Share your experience with this product..."
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#E67E50] focus:border-transparent resize-none"
+        />
+        {errors.review && (
+          <p className="text-red-500 text-xs mt-1">{errors.review.message}</p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="flex-1 bg-[#E67E50] text-white py-3 px-6 rounded-lg font-medium hover:bg-[#d66f40] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="size-4 animate-spin" />
+              Submitting...
+            </>
+          ) : (
+            'Submit Review'
+          )}
+        </button>
+        {onCancel && (
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={isLoading}
+            className="px-6 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}

package/src/components/ReviewPromptBanner.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Star, X } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+interface ReviewPromptBannerProps {
+  orderId: string;
+  orderNumber?: string;
+  itemCount: number;
+  onDismiss?: () => void;
+}
+
+export function ReviewPromptBanner({
+  orderId,
+  orderNumber,
+  itemCount,
+  onDismiss,
+}: ReviewPromptBannerProps) {
+  const router = useRouter();
+  const { buildPath } = useBasePath();
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Check if this prompt has been dismissed before
+  useEffect(() => {
+    const dismissedPrompts = JSON.parse(
+      localStorage.getItem('dismissedReviewPrompts') || '[]'
+    );
+
+    if (!dismissedPrompts.includes(orderId)) {
+      setIsVisible(true);
+    }
+  }, [orderId]);
+
+  const handleDismiss = () => {
+    // Save to localStorage that this prompt was dismissed
+    const dismissedPrompts = JSON.parse(
+      localStorage.getItem('dismissedReviewPrompts') || '[]'
+    );
+
+    if (!dismissedPrompts.includes(orderId)) {
+      dismissedPrompts.push(orderId);
+      localStorage.setItem('dismissedReviewPrompts', JSON.stringify(dismissedPrompts));
+    }
+
+    setIsVisible(false);
+    onDismiss?.();
+  };
+
+  const handleReviewClick = () => {
+    router.push(buildPath('/reviews'));
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="bg-gradient-to-r from-[#E67E50]/10 to-[#E67E50]/5 border border-[#E67E50]/20 rounded-lg p-4 mb-4">
+      <div className="flex items-start gap-4">
+        <div className="flex-shrink-0">
+          <div className="size-10 rounded-full bg-[#E67E50]/20 flex items-center justify-center">
+            <Star className="size-5 text-[#E67E50]" />
+          </div>
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h3 className="font-semibold text-gray-900 mb-1">
+                How was your order?
+              </h3>
+              <p className="text-sm text-gray-600">
+                {orderNumber ? `Order #${orderNumber}` : 'Your order'} has been delivered.
+                Share your experience with {itemCount} {itemCount === 1 ? 'item' : 'items'}.
+              </p>
+            </div>
+
+            <button
+              onClick={handleDismiss}
+              className="flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors"
+              aria-label="Dismiss"
+            >
+              <X className="size-5" />
+            </button>
+          </div>
+
+          <button
+            onClick={handleReviewClick}
+            className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-[#E67E50] text-white text-sm font-medium rounded-lg hover:bg-[#d66f40] transition-colors"
+          >
+            <Star className="size-4" />
+            Write a Review
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ReviewsList.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Review } from '@/lib/Apis/models';
+import { ReviewCard } from './ReviewCard';
+import { Filter, Star } from 'lucide-react';
+
+interface ReviewsListProps {
+  reviews: Review[];
+  isLoading?: boolean;
+}
+
+type FilterOption = 'all' | 1 | 2 | 3 | 4 | 5;
+type SortOption = 'recent' | 'oldest' | 'highest' | 'lowest';
+
+export function ReviewsList({ reviews, isLoading }: ReviewsListProps) {
+  const [filterRating, setFilterRating] = useState<FilterOption>('all');
+  const [sortBy, setSortBy] = useState<SortOption>('recent');
+
+  const filteredReviews = React.useMemo(() => {
+    let filtered = [...reviews];
+
+    if (filterRating !== 'all') {
+      filtered = filtered.filter((review) => Math.floor(review.rating) === filterRating);
+    }
+
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'recent':
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        case 'oldest':
+          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+        case 'highest':
+          return b.rating - a.rating;
+        case 'lowest':
+          return a.rating - b.rating;
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  }, [reviews, filterRating, sortBy]);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="border border-gray-200 rounded-lg p-4 bg-white animate-pulse"
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-gray-200 rounded-full" />
+                <div>
+                  <div className="h-4 w-24 bg-gray-200 rounded mb-2" />
+                  <div className="h-3 w-16 bg-gray-200 rounded" />
+                </div>
+              </div>
+              <div className="h-4 w-20 bg-gray-200 rounded" />
+            </div>
+            <div className="space-y-2">
+              <div className="h-3 w-full bg-gray-200 rounded" />
+              <div className="h-3 w-3/4 bg-gray-200 rounded" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 bg-white p-4 rounded-lg border border-gray-200">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Filter className="size-5 text-gray-600" />
+          <span className="text-sm font-medium text-gray-700">Filter by rating:</span>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setFilterRating('all')}
+              className={`px-3 py-1 text-sm rounded-full transition-colors ${
+                filterRating === 'all'
+                  ? 'bg-[#E67E50] text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              All
+            </button>
+            {[5, 4, 3, 2, 1].map((rating) => (
+              <button
+                key={rating}
+                onClick={() => setFilterRating(rating as FilterOption)}
+                className={`flex items-center gap-1 px-3 py-1 text-sm rounded-full transition-colors ${
+                  filterRating === rating
+                    ? 'bg-[#E67E50] text-white'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                {rating}
+                <Star className="size-3 fill-current" />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-gray-700">Sort by:</span>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as SortOption)}
+            className="px-3 py-1 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#E67E50] focus:border-transparent"
+          >
+            <option value="recent">Most Recent</option>
+            <option value="oldest">Oldest First</option>
+            <option value="highest">Highest Rating</option>
+            <option value="lowest">Lowest Rating</option>
+          </select>
+        </div>
+      </div>
+
+      {filteredReviews.length === 0 ? (
+        <div className="text-center py-12 bg-white rounded-lg border border-gray-200">
+          <Star className="size-12 text-gray-300 mx-auto mb-4" />
+          <p className="text-gray-600 font-medium mb-1">
+            {filterRating === 'all' ? 'No reviews yet' : `No ${filterRating}-star reviews yet`}
+          </p>
+          <p className="text-sm text-gray-500">
+            {filterRating === 'all'
+              ? 'Be the first to review this product!'
+              : 'Try selecting a different rating filter'}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {filteredReviews.map((review) => (
+            <ReviewCard key={review.id || review._id} review={review} />
+          ))}
+        </div>
+      )}
+
+      {filteredReviews.length > 0 && (
+        <div className="text-center py-4">
+          <p className="text-sm text-gray-600">
+            Showing {filteredReviews.length} of {reviews.length} reviews
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/StarRating.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+import { Star } from 'lucide-react';
+
+interface StarRatingProps {
+  rating: number;
+  maxRating?: number;
+  size?: 'sm' | 'md' | 'lg';
+  showNumber?: boolean;
+  interactive?: boolean;
+  onChange?: (rating: number) => void;
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'size-3',
+  md: 'size-5',
+  lg: 'size-6',
+};
+
+export function StarRating({
+  rating,
+  maxRating = 5,
+  size = 'md',
+  showNumber = false,
+  interactive = false,
+  onChange,
+  className,
+}: StarRatingProps) {
+  const [hoverRating, setHoverRating] = React.useState(0);
+
+  const handleClick = (index: number) => {
+    if (interactive && onChange) {
+      onChange(index + 1);
+    }
+  };
+
+  const handleMouseEnter = (index: number) => {
+    if (interactive) {
+      setHoverRating(index + 1);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (interactive) {
+      setHoverRating(0);
+    }
+  };
+
+  const displayRating = hoverRating || rating;
+
+  return (
+    <div className={'flex items-center gap-1'}>
+      <div className="flex items-center">
+        {Array.from({ length: maxRating }).map((_, index) => {
+          const isFilled = index < Math.floor(displayRating);
+          const isHalfFilled = index === Math.floor(displayRating) && displayRating % 1 !== 0;
+
+          return (
+            <button
+              key={index}
+              type="button"
+              disabled={!interactive}
+              onClick={() => handleClick(index)}
+              onMouseEnter={() => handleMouseEnter(index)}
+              onMouseLeave={handleMouseLeave}
+              className={`transition-all ${interactive && 'cursor-pointer hover:scale-110'} ${!interactive && 'cursor-default'
+                }`}
+            >
+              {isHalfFilled ? (
+                <div className="relative">
+                  <Star className={`${sizeClasses[size]} text-gray-300`} />
+                  <div className="absolute inset-0 overflow-hidden" style={{ width: '50%' }}>
+                    <Star className={`${sizeClasses[size]} fill-[#E67E50] text-[#E67E50]`} />
+                  </div>
+                </div>
+              ) : (
+                <Star
+                  className={`
+                    ${sizeClasses[size]}
+                    ${isFilled ? 'fill-[#E67E50] text-[#E67E50]' : 'text-gray-300'}
+                    ${interactive && hoverRating > 0 && index < hoverRating ? 'fill-[#E67E50] text-[#E67E50]' : ''}
+                  `}
+                />
+              )}
+            </button>
+          );
+        })}
+      </div>
+      {showNumber && (
+        <span className="text-sm text-gray-600 ml-1">
+          {rating.toFixed(1)}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/hooks/useDiscounts.ts

@@ -0,0 +1,7 @@
+'use client';
+
+import { useDiscountsContext } from '@/providers/DiscountProvider';
+
+export function useDiscounts() {
+  return useDiscountsContext();
+}

package/src/hooks/useOrders.ts

@@ -54,12 +54,27 @@ export function useOrders(
     fetchOrders();
   }, [fetchOrders]);
 
+  const deleteOrder = async (id: string) => {
+    try {
+      await new OrdersApi(getApiConfiguration()).deleteOrder(id);
+      // Remove from local state to give immediate feedback
+      setOrders((prev) => prev.filter((o) => (o._id || o.id) !== id));
+      // Optionally refetch to ensure pagination is correct
+      // fetchOrders();
+      return true;
+    } catch (err) {
+      console.error('Failed to delete order:', err);
+      return false;
+    }
+  };
+
   return {
     orders,
     isLoading,
     error,
     pagination,
     refetch: fetchOrders,
+    deleteOrder,
   };
 }