hey-pharmacist-ecommerce 1.0.5 → 1.0.7

package/src/components/Header.tsx

@@ -6,18 +6,24 @@ import { ShoppingCart, User, Menu, X, Search, Heart } from 'lucide-react';
 import { useAuth } from '@/providers/AuthProvider';
 import { useCart } from '@/providers/CartProvider';
 import { useTheme } from '@/providers/ThemeProvider';
+import { useWishlist } from '@/providers/WishlistProvider';
 import Link from 'next/link';
 import Image from 'next/image';
 
 export function Header() {
   const { config } = useTheme();
   const { user, isAuthenticated } = useAuth();
-  const { cart } = useCart();
+  const { cart } = useCart() || { cart: { itemCount: 0 } };
+  const { getWishlistCount } = useWishlist();
+  const wishlistCount = getWishlistCount?.() || 0;
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
 
   const navLinks = [
     { href: '/shop', label: 'Shop' },
     { href: '/categories', label: 'Categories' },
+    { href: '/orders', label: 'Orders' },
     { href: '/about', label: 'About' },
     { href: '/contact', label: 'Contact' },
   ];
@@ -58,49 +64,94 @@ export function Header() {
           {/* Actions */}
           <div className="flex items-center gap-4">
             {/* Search */}
-            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
-              <Search className="w-5 h-5 text-gray-700" />
-            </button>
-
-            {/* Favorites */}
-            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors relative">
-              <Heart className="w-5 h-5 text-gray-700" />
-            </button>
-
-            {/* Cart */}
-            <Link
-              href="/cart"
-              className="p-2 hover:bg-gray-100 rounded-lg transition-colors relative"
-            >
-              <ShoppingCart className="w-5 h-5 text-gray-700" />
-              {cart && cart.itemCount > 0 && (
-                <span className="absolute -top-1 -right-1 w-5 h-5 bg-primary-600 text-white text-xs font-bold rounded-full flex items-center justify-center">
-                  {cart.itemCount}
-                </span>
-              )}
-            </Link>
-
-            {/* User Menu */}
-            {isAuthenticated ? (
-              <Link
-                href="/account"
+            <div className="relative">
+              <button
+                onClick={() => setIsSearchOpen(!isSearchOpen)}
                 className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                aria-label="Search"
               >
-                <User className="w-5 h-5 text-gray-700" />
+                <Search className="w-5 h-5 text-gray-700" />
+              </button>
+
+              <AnimatePresence>
+                {isSearchOpen && (
+                  <motion.div
+                    initial={{ opacity: 0, width: 0 }}
+                    animate={{ opacity: 1, width: 'auto' }}
+                    exit={{ opacity: 0, width: 0 }}
+                    className="absolute right-0 top-full mt-2 bg-white rounded-lg shadow-lg overflow-hidden"
+                  >
+                    <div className="flex items-center p-2 w-64">
+                      <Search className="w-5 h-5 text-gray-400 mr-2" />
+                      <input
+                        type="text"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' && searchQuery.trim()) {
+                            window.location.href = `/search?q=${encodeURIComponent(searchQuery.trim())}`;
+                          }
+                        }}
+                        placeholder="Search products..."
+                        className="w-full outline-none text-gray-700"
+                        autoFocus
+                      />
+                      {searchQuery && (
+                        <button
+                          onClick={() => setSearchQuery('')}
+                          className="text-gray-400 hover:text-gray-600"
+                        >
+                          <X className="w-4 h-4" />
+                        </button>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            {/* Wishlist and Cart */}
+            <div className="flex items-center gap-4">
+              <Link href="/wishlist" className="relative p-2 text-gray-700 hover:text-red-500 transition-colors">
+                <Heart className="w-6 h-6" />
+                {wishlistCount > 0 && (
+                  <span 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">
+                    {wishlistCount}
+                  </span>
+                )}
               </Link>
-            ) : (
-              <Link
-                href="/login"
-                className="hidden sm:block px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
-              >
-                Sign In
+
+              <Link href="/cart" className="relative p-2 text-gray-700 hover:text-primary-600 transition-colors">
+                <ShoppingCart className="w-6 h-6" />
+                {cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? (
+                  <span 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">
+                    {cart.cartBody?.items?.length}
+                  </span>
+                ) : null}
               </Link>
-            )}
+
+              {/* User Menu */}
+              {isAuthenticated ? (
+                <Link
+                  href="/account"
+                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <User className="w-6 h-6 text-gray-700" />
+                </Link>
+              ) : (
+                <Link
+                  href="/login"
+                  className="hidden sm:block px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
+                >
+                  Sign In
+                </Link>
+              )}
+            </div>
 
             {/* Mobile Menu Button */}
             <button
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
               className="lg:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
             >
               {isMobileMenuOpen ? (
                 <X className="w-6 h-6" />
@@ -109,43 +160,42 @@ export function Header() {
               )}
             </button>
           </div>
-        </div>
 
-        {/* Mobile Menu */}
-        <AnimatePresence>
-          {isMobileMenuOpen && (
-            <motion.div
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: 'auto', opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              className="lg:hidden overflow-hidden border-t border-gray-200"
-            >
-              <nav className="py-4 space-y-2">
-                {navLinks.map((link) => (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-4 py-3 hover:bg-gray-50 rounded-lg text-gray-700 font-medium"
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-                {!isAuthenticated && (
-                  <Link
-                    href="/login"
-                    onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-4 py-3 bg-primary-600 text-white rounded-lg text-center font-medium"
-                  >
-                    Sign In
-                  </Link>
-                )}
-              </nav>
-            </motion.div>
-          )}
-        </AnimatePresence>
+          {/* Mobile Menu */}
+          <AnimatePresence>
+            {isMobileMenuOpen && (
+              <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                exit={{ opacity: 0, height: 0 }}
+                className="lg:hidden overflow-hidden border-t border-gray-200"
+              >
+                <nav className="flex flex-col gap-1 py-2">
+                  {navLinks.map((link) => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      className="px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg font-medium"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                    >
+                      {link.label}
+                    </Link>
+                  ))}
+                  {!isAuthenticated && (
+                    <Link
+                      href="/login"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className="px-4 py-3 text-primary-600 hover:bg-gray-50 rounded-lg font-medium"
+                    >
+                      Sign In
+                    </Link>
+                  )}
+                </nav>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       </div>
     </header>
   );
 }
-

package/src/components/OrderCard.tsx

@@ -3,25 +3,18 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Package, Calendar, CreditCard, ExternalLink } from 'lucide-react';
-import { Order, OrderStatus } from '@/lib/types';
+import { PaymentPaymentMethodEnum, PaymentPaymentStatusEnum, PopulatedOrder } from '@/lib/Apis';
 import { formatPrice, formatDate } from '@/lib/utils/format';
 import { Badge } from './ui/Badge';
 import Link from 'next/link';
+import Image from 'next/image';
 
 interface OrderCardProps {
-  order: Order;
+  order: PopulatedOrder;
 }
 
-const statusConfig: Record<OrderStatus, { variant: 'success' | 'warning' | 'primary' | 'danger' | 'gray', label: string }> = {
-  [OrderStatus.PENDING]: { variant: 'warning', label: 'Pending' },
-  [OrderStatus.PROCESSING]: { variant: 'primary', label: 'Processing' },
-  [OrderStatus.SHIPPED]: { variant: 'primary', label: 'Shipped' },
-  [OrderStatus.DELIVERED]: { variant: 'success', label: 'Delivered' },
-  [OrderStatus.CANCELLED]: { variant: 'danger', label: 'Cancelled' },
-};
-
 export function OrderCard({ order }: OrderCardProps) {
-  const config = statusConfig[order.status];
+  const config = order.orderStatus;
 
   return (
     <motion.div
@@ -35,29 +28,29 @@ export function OrderCard({ order }: OrderCardProps) {
         <div>
           <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
             <Package className="w-5 h-5 text-primary-600" />
-            Order #{order.orderNumber}
+            Order #{order?._id?.slice(0, 6) || ''}
           </h3>
           <p className="text-sm text-gray-500 mt-1 flex items-center gap-2">
             <Calendar className="w-4 h-4" />
-            {formatDate(order.createdAt, 'long')}
+            {formatDate(order.createdAt || new Date(), 'long')}
           </p>
         </div>
-        <Badge variant={config.variant}>{config.label}</Badge>
+        <Badge variant={config as 'success' | 'warning' | 'primary' | 'danger' | 'gray'}>{config}</Badge>
       </div>
 
       {/* Items Preview */}
       <div className="space-y-2 mb-4">
-        {order.items.slice(0, 2).map((item) => (
-          <div key={item.id} className="flex items-center gap-3 text-sm">
-            <div className="w-12 h-12 rounded-lg bg-gray-100 flex-shrink-0" />
+        {order.items?.slice(0, 2).map((item) => (
+          <div key={item.productVariantId} className="flex items-center gap-3 text-sm">
+            <Image src={item?.productVariantData?.productMedia?.[0]?.file || '/placeholder-product.jpg'} alt={item?.productVariantData?.name || 'Product image'} width={48} height={48} className="w-12 h-12 rounded-lg bg-gray-100 flex-shrink-0" />
             <div className="flex-1 min-w-0">
-              <p className="font-medium text-gray-900 truncate">{item.productName}</p>
+              <p className="font-medium text-gray-900 truncate">{item.productVariantData.name}</p>
               <p className="text-gray-500">Qty: {item.quantity}</p>
             </div>
-            <p className="font-semibold text-gray-900">{formatPrice(item.price)}</p>
+            <p className="font-semibold text-gray-900">{formatPrice(item.productVariantData.finalPrice)}</p>
           </div>
         ))}
-        {order.items.length > 2 && (
+        {order.items?.length && order.items?.length > 2 && (
           <p className="text-sm text-gray-500 pl-15">
             +{order.items.length - 2} more item{order.items.length - 2 > 1 ? 's' : ''}
           </p>
@@ -68,13 +61,13 @@ export function OrderCard({ order }: OrderCardProps) {
       <div className="flex justify-between items-center pt-4 border-t border-gray-200">
         <div>
           <p className="text-sm text-gray-500">Total Amount</p>
-          <p className="text-2xl font-bold text-gray-900">{formatPrice(order.total)}</p>
+          <p className="text-2xl font-bold text-gray-900">{formatPrice(order.grandTotal || 0)}</p>
         </div>
         
         <div className="flex gap-2">
-          {order.stripeCheckoutUrl && order.paymentStatus !== 'paid' && (
+          {order.payment.paymentStatus !== PaymentPaymentStatusEnum.Paid && order.payment.paymentMethod === PaymentPaymentMethodEnum.Card && (
             <a
-              href={order.stripeCheckoutUrl}
+              href={order?.payment?.paymentIntent?.hostedInvoiceUrl || ''}
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
@@ -83,13 +76,13 @@ export function OrderCard({ order }: OrderCardProps) {
               Pay Now
             </a>
           )}
-          <Link
+          {/* <Link
             href={`/orders/${order.id}`}
             className="inline-flex items-center gap-2 px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
           >
             View Details
             <ExternalLink className="w-4 h-4" />
-          </Link>
+          </Link> */}
         </div>
       </div>
     </motion.div>