hey-pharmacist-ecommerce 1.1.30 → 1.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.30",
+  "version": "1.1.32",
   "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,9 +20,10 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.0",
-    "@tanstack/react-query": "^5.90.5",
+    "@tanstack/react-query": "^5.90.16",
     "axios": "^1.6.0",
     "cookies-next": "^4.0.0",
+    "date-fns": "^4.1.0",
     "framer-motion": "^10.12.18",
     "lucide-react": "^0.294.0",
     "react-hook-form": "^7.0.0",
@@ -71,4 +72,4 @@
     "url": "https://github.com/yourusername/hey-pharmacist-customer/issues"
   },
   "homepage": "https://github.com/yourusername/hey-pharmacist-customer#readme"
-}
+}

package/src/components/AccountReviewsTab.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+import { Star, MessageSquare } from 'lucide-react';
+import { useUserReviews } from '@/hooks/useReviews';
+import { ReviewCard } from './ReviewCard';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+export function AccountReviewsTab() {
+  const router = useRouter();
+  const { buildPath } = useBasePath();
+  const { reviews, isLoading, error } = useUserReviews();
+
+  if (isLoading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse space-y-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-32 bg-gray-200 rounded-lg" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="text-center py-12">
+          <p className="text-red-600 mb-4">Failed to load reviews</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="text-[#E67E50] hover:underline text-sm"
+          >
+            Try again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!reviews || reviews.length === 0) {
+    return (
+      <div className="p-6">
+        <div className="text-center py-12">
+          <div className="size-16 rounded-full bg-[#E67E50]/10 flex items-center justify-center mx-auto mb-4">
+            <Star className="size-8 text-[#E67E50]" />
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            No reviews yet
+          </h3>
+          <p className="text-gray-600 mb-6">
+            Share your experience with products you've purchased
+          </p>
+          <button
+            onClick={() => router.push(buildPath('/reviews'))}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-[#E67E50] text-white rounded-lg font-medium hover:bg-[#d66f40] transition-colors"
+          >
+            <Star className="size-4" />
+            Write Your First Review
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-semibold text-gray-900">My Reviews</h2>
+          <p className="text-sm text-gray-600 mt-1">
+            {reviews.length} {reviews.length === 1 ? 'review' : 'reviews'}
+          </p>
+        </div>
+        <button
+          onClick={() => router.push(buildPath('/reviews'))}
+          className="inline-flex items-center gap-2 px-4 py-2 border border-[#E67E50] text-[#E67E50] rounded-lg font-medium hover:bg-[#E67E50]/5 transition-colors text-sm"
+        >
+          <MessageSquare className="size-4" />
+          Write a Review
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        {reviews.map((review) => (
+          <ReviewCard
+            key={review.id || review._id}
+            review={review}
+            showProductInfo={true}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/AccountSettingsTab.tsx

@@ -14,9 +14,6 @@ export function AccountSettingsTab() {
     const router = useRouter();
     const { buildPath } = useBasePath();
     const { logout } = useAuth();
-    const [emailNotifications, setEmailNotifications] = useState(true);
-    const [orderUpdates, setOrderUpdates] = useState(true);
-    const [promotionalEmails, setPromotionalEmails] = useState(false);
     const [showDeleteModal, setShowDeleteModal] = useState(false);
     const [isDeleting, setIsDeleting] = useState(false);
     const [deleteError, setDeleteError] = useState<string | null>(null);
@@ -40,53 +37,6 @@ export function AccountSettingsTab() {
 
     return (
         <div className="p-6 space-y-6">
-            {/* Account Preferences */}
-            <div className="rounded-2xl border border-slate-200 bg-white p-6">
-                <div className="flex items-center gap-2 mb-4">
-                    <Bell className="h-5 w-5 text-secondary" />
-                    <h3 className="text-lg font-semibold text-secondary">Account Preferences</h3>
-                </div>
-                <div className="space-y-4">
-                    <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
-                        <div>
-                            <p className="text-sm font-medium text-secondary">Email Notifications</p>
-                            <p className="text-xs text-muted">Receive updates about your orders</p>
-                        </div>
-                        <input
-                            type="checkbox"
-                            checked={emailNotifications}
-                            onChange={(e) => setEmailNotifications(e.target.checked)}
-                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
-                        />
-                    </label>
-                    <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
-                        <div>
-                            <p className="text-sm font-medium text-secondary">Order Updates</p>
-                            <p className="text-xs text-muted">Get notified about shipping status</p>
-                        </div>
-                        <input
-                            type="checkbox"
-                            checked={orderUpdates}
-                            onChange={(e) => setOrderUpdates(e.target.checked)}
-                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
-                        />
-                    </label>
-                    <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
-                        <div>
-                            <p className="text-sm font-medium text-secondary">Promotional Emails</p>
-                            <p className="text-xs text-muted">Receive special offers and discounts</p>
-                        </div>
-                        <input
-                            type="checkbox"
-                            checked={promotionalEmails}
-                            onChange={(e) => setPromotionalEmails(e.target.checked)}
-                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
-                        />
-                    </label>
-                </div>
-            </div>
-
-            {/* Security */}
             <div className="rounded-2xl border border-slate-200 bg-white p-6">
                 <div className="flex items-center gap-2 mb-4">
                     <Lock className="h-5 w-5 text-secondary" />

package/src/components/CouponCodeInput.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import React, { useState, useRef, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2, X, Check, Gift, Tag, AlertCircle } from 'lucide-react';
+
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { couponCodeSchema, type CouponCodeFormData } from '@/lib/validations/discount';
+import { useDiscounts } from '@/hooks/useDiscounts';
+import { formatDiscountDisplay } from '@/lib/utils/discount';
+
+interface CouponCodeInputProps {
+  onApplyCoupon?: (code: string) => void;
+  onRemoveCoupon?: () => void;
+  userId?: string;
+  className?: string;
+}
+
+export function CouponCodeInput({
+  onApplyCoupon,
+  onRemoveCoupon,
+  userId,
+  className = '',
+}: CouponCodeInputProps) {
+  const {
+    appliedCoupon,
+    couponError,
+    isValidatingCoupon,
+    validateAndApplyCoupon,
+    removeCoupon,
+  } = useDiscounts();
+
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors, isSubmitting },
+  } = useForm<CouponCodeFormData>({
+    resolver: zodResolver(couponCodeSchema),
+  });
+
+  const couponCodeValue = watch('code');
+  const errorMessage =
+    errors.code?.message || localError || couponError || null;
+
+  const triggerShake = () => {
+    if (!inputRef.current) return;
+    inputRef.current.classList.add('animate-shake');
+    setTimeout(() => {
+      inputRef.current?.classList.remove('animate-shake');
+    }, 400);
+  };
+
+  const onSubmit = useCallback(
+    async (data: CouponCodeFormData) => {
+      setLocalError(null);
+      const result = await validateAndApplyCoupon(data.code, userId);
+
+      if (!result.success) {
+        setLocalError(result.error || 'Invalid coupon code');
+        triggerShake();
+        return;
+      }
+
+      reset();
+      onApplyCoupon?.(data.code);
+      inputRef.current?.blur();
+    },
+    [onApplyCoupon, reset, userId, validateAndApplyCoupon]
+  );
+
+  const handleRemove = () => {
+    removeCoupon();
+    onRemoveCoupon?.();
+    reset();
+    setLocalError(null);
+  };
+
+
+  if (appliedCoupon) {
+    return (
+      <div
+        className={`relative rounded-xl border border-emerald-200 bg-gradient-to-r from-emerald-50 to-green-50 p-4 shadow-sm ${className}`}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
+              <Check className="h-5 w-5 text-emerald-600" />
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-emerald-900">
+                Coupon Applied
+              </p>
+              <p className="text-sm font-medium text-emerald-700">
+                {appliedCoupon.code} • {formatDiscountDisplay(appliedCoupon)}
+              </p>
+            </div>
+          </div>
+
+          <button
+            onClick={handleRemove}
+            aria-label="Remove coupon"
+            className="group flex h-8 w-8 items-center justify-center rounded-lg border border-emerald-200 bg-white transition hover:border-red-300 hover:bg-red-50"
+          >
+            <X className="h-4 w-4 text-emerald-600 group-hover:text-red-600" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center gap-2">
+        <Gift className="h-5 w-5 text-slate-500" />
+        <label
+          htmlFor="coupon-code"
+          className="text-sm font-semibold text-slate-700"
+        >
+          Have a coupon code?
+        </label>
+      </div>
+
+      <div className="flex gap-3">
+        <div className="relative flex-1">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
+            <Tag
+              className={`h-5 w-5 transition-colors ${
+                isFocused ? 'text-slate-400' : 'text-slate-400'
+              }`}
+            />
+          </div>
+
+          <Input
+            id="coupon-code"
+            {...register('code')}
+            placeholder="Enter code (e.g. SAVE10)"
+            maxLength={50}
+            disabled={isValidatingCoupon || isSubmitting}
+            aria-invalid={!!errorMessage}
+            className={`pl-12 h-11 rounded-lg transition-all shadow-sm ${
+              errorMessage
+                ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-red-500/20'
+                : 'border-slate-200 bg-white hover:border-slate-300'
+            }`}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+          />
+        </div>
+
+        <Button
+          type="button"
+          onClick={handleSubmit(onSubmit)}
+          disabled={!couponCodeValue || isValidatingCoupon || isSubmitting}
+          className='h-11 px-5 rounded-lg disabled:bg-slate-300 disabled:text-white text-white hover:opacity-80 transition-colors'
+          style={{
+            backgroundColor:'#04AA6D',
+          }}
+        >
+          {isValidatingCoupon ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Checking
+            </>
+          ) : (
+            'Apply'
+          )}
+        </Button>
+      </div>
+      {/* </div> */}
+
+      {errorMessage && (
+        <div
+          role="alert"
+          className="flex items-start gap-2 rounded-lg border border-red-200 bg-red-50 p-3"
+        >
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />
+          <p className="text-sm text-red-700">{errorMessage}</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Header.tsx

@@ -12,6 +12,7 @@ import { getInitials } from '@/lib/utils/format';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
+import { NotificationBell } from './NotificationBell';
 
 export function Header() {
   const { config } = useTheme();
@@ -129,8 +130,11 @@ export function Header() {
               </AnimatePresence>
             </div>
 
-            {/* Wishlist and Cart */}
+            {/* Wishlist, Cart, and Notifications */}
             <div className="flex items-center gap-4">
+              {/* Notifications - only show when authenticated */}
+              {isAuthenticated && <NotificationBell />}
+
               <Link href={buildPath('/wishlist')} className="relative p-2 text-gray-700 hover:text-red-500 transition-colors">
                 <Heart className="w-6 h-6" />
                 {wishlistCount > 0 && (

package/src/components/Notification.tsx

@@ -135,7 +135,7 @@ interface NotificationContainerProps {
 
 export function NotificationContainer({ notifications, onDismiss }: NotificationContainerProps) {
     return (
-        <div className="fixed top-4 right-4 z-9999 flex flex-col gap-3 pointer-events-none">
+        <div className="fixed top-4 right-4 z-50 flex flex-col gap-3 pointer-events-none">
             <AnimatePresence mode="popLayout">
                 {notifications.map((notification) => (
                     <div key={notification.id} className="pointer-events-auto">

package/src/components/NotificationBell.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { Bell } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useNotificationCenter } from '@/providers/NotificationCenterProvider';
+
+export function NotificationBell() {
+    const { unreadCount, openDrawer } = useNotificationCenter();
+
+    return (
+        <button
+            onClick={openDrawer}
+            className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            aria-label="Notifications"
+        >
+            <Bell className="w-6 h-6 text-gray-700" />
+
+            <AnimatePresence>
+                {unreadCount > 0 && (
+                    <motion.span
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        exit={{ scale: 0 }}
+                        className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
+                    >
+                        {unreadCount > 99 ? '99+' : unreadCount}
+                    </motion.span>
+                )}
+            </AnimatePresence>
+        </button>
+    );
+}

package/src/components/NotificationCard.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import React, { useRef } from 'react';
+import { motion, PanInfo } from 'framer-motion';
+import {
+    X,
+    Package,
+    CreditCard,
+    Lock,
+    ShoppingCart,
+    TrendingDown,
+    Bell as BellIcon,
+    Trash2
+} from 'lucide-react';
+import { NotificationData, NotificationType } from '@/providers/NotificationCenterProvider';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+interface NotificationCardProps {
+    notification: NotificationData;
+    onMarkAsRead: (id: string) => void;
+    onDelete: (id: string) => void;
+}
+
+/* ---------------------------------- */
+/* Helpers                            */
+/* ---------------------------------- */
+
+const getNotificationIcon = (type: NotificationType) => {
+    const className = 'w-5 h-5';
+
+    switch (type) {
+        case 'ORDER_CONFIRMATION':
+        case 'ORDER_SHIPPED':
+        case 'ORDER_DELIVERED':
+            return <Package className={className} />;
+        case 'PAYMENT_FAILED':
+        case 'REFUND_PROCESSED':
+            return <CreditCard className={className} />;
+        case 'PASSWORD_RESET':
+        case 'NEW_DEVICE_LOGIN':
+        case 'TWO_FA_CODE':
+            return <Lock className={className} />;
+        case 'ABANDONED_CART_REMINDER':
+            return <ShoppingCart className={className} />;
+        case 'PRICE_DROP_ALERT':
+            return <TrendingDown className={className} />;
+        case 'BACK_IN_STOCK':
+        default:
+            return <BellIcon className={className} />;
+    }
+};
+
+const getNotificationColor = (type: NotificationType) => {
+    switch (type) {
+        case 'ORDER_CONFIRMATION':
+        case 'ORDER_DELIVERED':
+        case 'REFUND_PROCESSED':
+            return 'bg-green-100 text-green-600';
+        case 'ORDER_SHIPPED':
+            return 'bg-blue-100 text-blue-600';
+        case 'PAYMENT_FAILED':
+            return 'bg-red-100 text-red-600';
+        case 'PASSWORD_RESET':
+        case 'NEW_DEVICE_LOGIN':
+        case 'TWO_FA_CODE':
+            return 'bg-purple-100 text-purple-600';
+        case 'ABANDONED_CART_REMINDER':
+        case 'PRICE_DROP_ALERT':
+        case 'BACK_IN_STOCK':
+            return 'bg-orange-100 text-orange-600';
+        default:
+            return 'bg-gray-100 text-gray-600';
+    }
+};
+
+const formatRelativeTime = (dateString: string): string => {
+    const date = new Date(dateString);
+    const diff = Date.now() - date.getTime();
+    const mins = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (mins < 1) return 'Just now';
+    if (mins < 60) return `${mins} min ago`;
+    if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`;
+
+    return date.toLocaleDateString();
+};
+
+/* ---------------------------------- */
+/* Component                          */
+/* ---------------------------------- */
+
+export function NotificationCard({
+    notification,
+    onMarkAsRead,
+    onDelete
+}: NotificationCardProps) {
+    const router = useRouter();
+    const { buildPath } = useBasePath();
+
+    const hasDragged = useRef(false);
+
+    const handleClick = () => {
+        if (hasDragged.current) return;
+
+        if (!notification.isRead) {
+            onMarkAsRead(notification._id);
+        }
+
+        if (notification.data?.orderId) {
+            router.push(buildPath(`/account/orders/${notification.data.orderId}`));
+        } else if (notification.data?.productId) {
+            router.push(buildPath(`/products/${notification.data.productId}`));
+        }
+    };
+
+    const handleDelete = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onDelete(notification._id);
+    };
+
+    const handleDragStart = () => {
+        hasDragged.current = false;
+    };
+
+    const handleDrag = (_: any, info: PanInfo) => {
+        if (Math.abs(info.offset.x) > 5) {
+            hasDragged.current = true;
+        }
+    };
+
+    const handleDragEnd = (_: any, info: PanInfo) => {
+        if (info.offset.x < -100) {
+            onDelete(notification._id);
+        }
+    };
+
+    return (
+        <div className="relative overflow-hidden rounded-lg">
+            {/* Delete background */}
+            <div className="absolute inset-0 flex items-center justify-end px-6">
+                <div className="flex flex-col items-center gap-1 text-white">
+                    <Trash2 className="w-5 h-5" />
+                    <span className="text-[10px] font-bold uppercase tracking-wider">
+                        Remove
+                    </span>
+                </div>
+            </div>
+
+            {/* Swipeable card */}
+            <motion.div
+                drag="x"
+                initial={{ opacity: 0, x: 0 }}
+                animate={{ opacity: 1, x: 0 }}
+                className={`relative z-10 p-4 border cursor-pointer select-none touch-pan-y transition-colors ${notification.isRead
+                    ? 'bg-white border-gray-200'
+                    : 'bg-blue-50 border-blue-200'
+                    }`}
+                onClick={handleClick}
+            >
+                <div className="flex gap-3">
+                    {/* Icon */}
+                    <div
+                        className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${getNotificationColor(
+                            notification.type
+                        )}`}
+                    >
+                        {getNotificationIcon(notification.type)}
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-start justify-between gap-2">
+                            <h4 className="font-semibold text-gray-900 text-sm line-clamp-1">
+                                {notification.title}
+                            </h4>
+
+                            <button
+                                onClick={handleDelete}
+                                className="flex-shrink-0 p-1 bg-gray-100 rounded-full hover:bg-red-50"
+                                aria-label="Delete notification"
+                            >
+                                <X className="w-4 h-4 text-gray-400 hover:text-red-500" />
+                            </button>
+                        </div>
+
+                        <p className="text-sm text-gray-600 mt-1 line-clamp-2">
+                            {notification.body}
+                        </p>
+
+                        <div className="flex items-center gap-2 mt-2">
+                            <span className="text-xs text-gray-500">
+                                {formatRelativeTime(notification.createdAt)}
+                            </span>
+
+                            {!notification.isRead && (
+                                <span
+                                    className="w-2 h-2 bg-blue-500 rounded-full"
+                                    aria-label="Unread"
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </div>
+    );
+}