hey-pharmacist-ecommerce 1.1.13 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "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",
@@ -37,7 +37,7 @@
     "autoprefixer": "^10.4.0",
     "eslint": "^8.0.0",
     "eslint-config-next": "^14.0.0",
-    "next": "^14.0.0",
+    "next": "^16.0.10",
     "postcss": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -46,7 +46,7 @@
     "typescript": "^5.3.0"
   },
   "peerDependencies": {
-    "next": "^14.0.0",
+    "next": "^16.0.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.0.0"

package/src/components/AccountAddressesTab.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import React, { useState } from 'react';
+import { MapPin, Plus, Edit3, Trash2, Star } from 'lucide-react';
+import { useAddresses } from '@/hooks/useAddresses';
+import { EmptyState } from './EmptyState';
+import { Button } from './ui/Button';
+import { Address } from '@/lib/Apis';
+import { AddressFormModal } from './AddressFormModal';
+import { useNotification } from '@/providers/NotificationProvider';
+import { ConfirmModal } from './ui/ConfirmModal';
+
+export function AccountAddressesTab() {
+    const { addresses, isLoading, error, removeAddress, markAsDefault, refresh } = useAddresses();
+    const [deletingId, setDeletingId] = useState<string | null>(null);
+    const [editingAddress, setEditingAddress] = useState<Address | undefined>(undefined);
+    const [isAddressModalOpen, setIsAddressModalOpen] = useState(false);
+    const [selectedAddressId, setSelectedAddressId] = useState<string | null>(null);
+    const [addressToDelete, setAddressToDelete] = useState<Address | null>(null);
+    const notification = useNotification();
+
+    const handleDelete = async (address: Address) => {
+        if (!confirm(`Remove ${address.name}'s address?\nYou can add it back at any time.`)) return;
+
+        setDeletingId(address.id);
+        try {
+            await removeAddress(address.id);
+        } catch (error) {
+            console.error('Failed to delete address:', error);
+            alert('Failed to delete address. Please try again.');
+        } finally {
+            setDeletingId(null);
+        }
+    };
+
+    const handleSetDefault = async (address: Address) => {
+        try {
+            await markAsDefault(address.id);
+        } catch (error) {
+            console.error('Failed to set default address:', error);
+            alert('Failed to set default address. Please try again.');
+        }
+    };
+
+    const handleConfirmDelete = async () => {
+        if (!addressToDelete) return;
+
+        setDeletingId(addressToDelete.id);
+        try {
+            await removeAddress(addressToDelete.id);
+            if (selectedAddressId === addressToDelete.id) {
+                setSelectedAddressId(null);
+            }
+            notification.success('Address deleted successfully');
+        } catch (error) {
+            console.error('Failed to delete address:', error);
+            notification.error('Failed to delete address. Please try again.');
+        } finally {
+            setDeletingId(null);
+            setAddressToDelete(null);
+        }
+    };
+
+    if (isLoading) {
+        return (
+            <div className="p-6">
+                <div className="grid gap-4 sm:grid-cols-2">
+                    {Array.from({ length: 2 }).map((_, index) => (
+                        <div
+                            key={index}
+                            className="h-48 animate-pulse rounded-lg border border-slate-100 bg-slate-50"
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="p-6">
+                <div className="rounded-lg border border-red-100 bg-red-50 p-6 text-sm text-red-700">
+                    {error.message}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <div className="p-6 bg-white rounded-xl">
+                <div className="mb-6 flex items-center justify-between">
+                    <div>
+                        <h3 className="text-lg font-semibold text-secondary">Saved Addresses</h3>
+                        <p className="text-sm text-muted">Manage your delivery and billing addresses</p>
+                    </div>
+                    <button
+                        className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-secondary text-white text-sm'
+                        onClick={() => {
+                            setEditingAddress(undefined);
+                            setIsAddressModalOpen(true);
+                        }}
+                    >
+                        <Plus className="h-4 w-4" />
+                        Add Address
+                    </button>
+                </div>
+
+                {addresses.length === 0 ? (
+                    <EmptyState
+                        icon={MapPin}
+                        title="No addresses yet"
+                        description="Save a shipping or billing address to speed through checkout."
+                        actionLabel="Add your first address"
+                        onAction={() => {
+                            setEditingAddress(undefined);
+                            setIsAddressModalOpen(true);
+                        }}
+                    />
+                ) : (
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        {addresses.map((address) => (
+                            <div
+                                key={address.id}
+                                className="relative rounded-xl border border-slate-200 bg-white p-4 hover:shadow-md transition-shadow"
+                            >
+
+                                <div className="mb-3">
+                                    <div className='justify-between flex items-center'>
+                                        <div className="flex items-center gap-x-2">
+                                            <MapPin className="h-4 w-4 text-secondary" />
+                                            <p className="font-semibold text-secondary">{address.name}</p>
+                                            {address.isDefault && (
+                                                <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-semibold text-green-700">
+                                                    Default
+                                                </span>
+                                            )}
+                                        </div>
+                                        <div className="flex items-center gap-x-2">
+                                            <button
+                                                onClick={() => {
+                                                    setEditingAddress(address);
+                                                    setIsAddressModalOpen(true);
+                                                }}
+                                                className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs font-medium text-muted transition hover:border-primary-300 hover:text-primary-600"
+                                            >
+                                                <Edit3 className="h-3 w-3" />
+                                            </button>
+                                            {/* {!address.isDefault && (
+                                                <button
+                                                    onClick={() => handleSetDefault(address)}
+                                                    className="inline-flex items-center gap-1 rounded-full border border-amber-200 px-2 py-1 text-xs font-semibold text-amber-600 transition hover:border-amber-300 hover:text-amber-700"
+                                                >
+                                                    <Star className="h-3 w-3" />
+                                                    Make default
+                                                </button>
+                                            )} */}
+                                            <button
+                                                onClick={() => setAddressToDelete(address)}
+                                                disabled={deletingId === address.id}
+                                                className="inline-flex items-center gap-1 rounded-full border border-red-200 px-2 py-1 text-xs font-semibold text-red-600 transition hover:border-red-300 hover:text-red-700 disabled:opacity-50"
+                                            >
+                                                <Trash2 className="h-3 w-3" />
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <p className="text-sm text-muted mt-1">
+                                        {address.street1}
+                                        {address.street2 && `, ${address.street2}`}
+                                    </p>
+                                    <p className="text-sm text-muted">
+                                        {address.city}, {address.state} {address.zip}
+                                    </p>
+                                    <p className="text-sm text-muted">{address.country}</p>
+                                    {address.phone && (
+                                        <p className="text-sm text-slate-500 mt-1">{address.phone}</p>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+            <AddressFormModal
+                isOpen={isAddressModalOpen}
+                onClose={() => setIsAddressModalOpen(false)}
+                initialAddress={editingAddress}
+                onAddressAdded={() => {
+                    refresh();
+                }}
+                onAddressUpdated={() => {
+                    refresh();
+                }}
+            />
+
+            <ConfirmModal
+                isOpen={!!addressToDelete}
+                onClose={() => setAddressToDelete(null)}
+                onConfirm={handleConfirmDelete}
+                title="Delete Address"
+                message={`Are you sure you want to delete ${addressToDelete?.name}'s address? This action cannot be undone.`}
+                confirmText="Delete"
+                cancelText="Cancel"
+                variant="danger"
+                isLoading={deletingId === addressToDelete?.id}
+            />
+        </>
+    );
+}

package/src/components/AccountOrdersTab.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import React from 'react';
+import { Package, Truck } from 'lucide-react';
+import { useCurrentOrders } from '@/hooks/useOrders';
+import { EmptyState } from './EmptyState';
+import { Badge } from './ui/Badge';
+import { formatPrice, formatDate } from '@/lib/utils/format';
+import Image from 'next/image';
+
+export function AccountOrdersTab() {
+    const { orders, isLoading, error } = useCurrentOrders();
+
+    if (isLoading) {
+        return (
+            <div className="py-6 px-3 pb-24">
+                <div className="space-y-4">
+                    {Array.from({ length: 3 }).map((_, index) => (
+                        <div
+                            key={index}
+                            className="h-64 animate-pulse rounded-xl bg-slate-50"
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="py-6 px-3 pb-24">
+                <div className="rounded-lg border border-red-100 bg-red-50 p-6 text-sm text-red-700">
+                    {error.message}
+                </div>
+            </div>
+        );
+    }
+
+    if (orders.length === 0) {
+        return (
+            <div className="py-6 px-3 pb-24">
+                <EmptyState
+                    icon={Package}
+                    title="No orders yet"
+                    description="When you place orders, they'll appear here for easy tracking."
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className="py-6 px-3 space-y-4 pb-24">
+            {orders.map((order) => {
+                const itemCount = order.items?.length || 0;
+
+                return (
+                    <div
+                        key={order._id}
+                        className="rounded-xl border border-slate-200 bg-white p-6 hover:shadow-md transition-shadow"
+                    >
+                        {/* Order Header */}
+                        <div className="flex items-start justify-between mb-4 pb-4 border-b border-slate-200">
+                            <div className="flex items-center gap-3">
+                                <div>
+                                    <h3 className="text-base font-semibold text-secondary">
+                                        Order ORD-{order._id?.slice(-6).toUpperCase()}
+                                    </h3>
+                                    {/* Order Date */}
+                                    <p className="text-xs text-muted mb-4">
+                                        Placed on {formatDate(order.createdAt || new Date(), 'long')}
+                                    </p>
+                                </div>
+                                <Badge
+                                    className="text-xs"
+                                    variant={
+                                        order.orderStatus === 'Delivered' ? 'success' :
+                                            order.orderStatus === 'In Transit' ? 'primary' :
+                                                order.orderStatus === 'Pending' ? 'warning' : 'gray'
+                                    }
+                                >
+                                    {order.orderStatus}
+                                </Badge>
+                            </div>
+                            <div className="text-right">
+                                <p className="text-xs text-muted mb-1">Total Amount</p>
+                                <p className="text-lg font-bold text-secondary">
+                                    {formatPrice(order.grandTotal || 0)}
+                                </p>
+                            </div>
+                        </div>
+
+
+
+                        {/* Order Items */}
+                        <div className="space-y-3 mb-4">
+                            {order.items && order.items.length > 0 ? (
+                                order.items.map((item, index) => {
+                                    const itemPrice = item.productVariantData?.finalPrice || 0;
+                                    const itemTotal = itemPrice * item.quantity;
+
+                                    return (
+                                        <div key={item.productVariantId || index} className="flex items-center gap-3">
+                                            <div className="relative w-12 h-12 rounded-lg bg-slate-100 flex-shrink-0 overflow-hidden">
+                                                <Image
+                                                    src={item?.productVariantData?.productMedia?.[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-secondary text-sm truncate">
+                                                    {item.productVariantData?.name || 'Unknown Product'}
+                                                </p>
+                                                <p className="text-xs text-muted">Qty: {item.quantity}</p>
+                                            </div>
+                                            <p className="font-semibold text-secondary text-sm">
+                                                {formatPrice(itemTotal)}
+                                            </p>
+                                        </div>
+                                    );
+                                })
+                            ) : (
+                                <p className="text-sm text-muted text-center py-2">No items found</p>
+                            )}
+                        </div>
+
+                        {/* Tracking Information */}
+                        {/* {order.trackingNumber && (
+                            <div className="mt-4 pt-4 border-t border-slate-200">
+                                <div className="flex items-center gap-2 bg-blue-50 rounded-lg p-3">
+                                    <Truck className="h-4 w-4 text-blue-600" />
+                                    <div className="flex-1">
+                                        <p className="text-xs text-muted">Tracking Number:</p>
+                                        <p className="text-sm font-medium text-secondary">
+                                            {order.trackingNumber}
+                                        </p>
+                                    </div>
+                                    <button className="text-xs text-primary-600 hover:text-primary-700 font-medium">
+                                        Track
+                                    </button>
+                                </div>
+                            </div>
+                        )} */}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/src/components/AccountOverviewTab.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import React from 'react';
+import { User, Mail, Phone, MapPin, Package, CheckCircle, Heart, Clock, Edit } from 'lucide-react';
+import { useAuth } from '@/providers/AuthProvider';
+import { useCurrentOrders } from '@/hooks/useOrders';
+import { useWishlist } from '@/providers/WishlistProvider';
+import { formatPrice, formatDate } from '@/lib/utils/format';
+import { Badge } from './ui/Badge';
+import { Button } from './ui/Button';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+export function AccountOverviewTab() {
+    const { user } = useAuth();
+    const { orders, isLoading: ordersLoading } = useCurrentOrders();
+    const { getWishlistCount } = useWishlist();
+    const router = useRouter();
+    const { buildPath } = useBasePath();
+
+    if (!user) return null;
+
+    // Calculate stats
+    const totalOrders = orders?.length || 0;
+    const deliveredOrders = orders?.filter(order => order.orderStatus === 'Delivered')?.length || 0;
+    const inTransitOrders = orders?.filter(order => order.orderStatus === 'In Transit')?.length || 0;
+    const savedItemsCount = getWishlistCount();
+
+    // Get recent orders (last 3)
+    const recentOrders = orders?.slice(0, 3) || [];
+
+    const stats = [
+        {
+            icon: Package,
+            label: 'Total Orders',
+            value: totalOrders,
+            color: 'bg-[#DBEAFE] text-[#5B9BD5]',
+        },
+        {
+            icon: CheckCircle,
+            label: 'Delivered',
+            value: deliveredOrders,
+            color: 'bg-[#DCFCE7] text-[#00A63E]',
+        },
+        {
+            icon: Heart,
+            label: 'Saved Items',
+            value: savedItemsCount,
+            color: 'bg-[#FFEDD4] text-[#FF6B35]',
+        },
+        {
+            icon: Clock,
+            label: 'In Transit',
+            value: inTransitOrders,
+            color: 'bg-[#F3E8FF] text-[#9810FA]',
+        },
+    ];
+
+    return (
+        <div className="py-6 px-3 space-y-6 pb-24">
+            {/* Stats Cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                {stats.map((stat, index) => {
+                    const Icon = stat.icon;
+                    return (
+                        <div
+                            key={index}
+                            className="rounded-xl border border-slate-200 bg-white p-4 hover:shadow-md transition-shadow"
+                        >
+                            <div className="flex items-center gap-3">
+                                <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${stat.color}`}>
+                                    <Icon className="h-6 w-6" />
+                                </div>
+                                <div>
+                                    <p className="text-2xl font-bold text-secondary">{stat.value}</p>
+                                    <p className="text-sm text-slate-600">{stat.label}</p>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+
+            {/* Profile Information */}
+            <div className="rounded-xl border border-slate-200 bg-white p-6">
+                <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-lg font-semibold text-secondary">Profile Information</h3>
+                    <button
+                        onClick={() => router.push(buildPath('/account/edit'))}
+                        className="flex items-center gap-1 text-sm text-primary-600 hover:text-primary-700"
+                    >
+                        <Edit className="h-4 w-4" />
+                        Edit
+                    </button>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="flex items-start gap-3">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                            <User className="h-5 w-5 text-[#5B9BD5]" />
+                        </div>
+                        <div>
+                            <p className="text-xs text-muted">Full Name</p>
+                            <p className="text-sm font-medium text-secondary">
+                                {user.firstname} {user.lastname}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-3">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                            <Mail className="h-5 w-5 text-[#5B9BD5]" />
+                        </div>
+                        <div>
+                            <p className="text-xs text-muted">E-mail Address</p>
+                            <p className="text-sm font-medium text-secondary">{user.email}</p>
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-3">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                            <Phone className="h-5 w-5 text-[#5B9BD5]" />
+                        </div>
+                        <div>
+                            <p className="text-xs text-muted">Phone Number</p>
+                            <p className="text-sm font-medium text-secondary">
+                                {user.phoneNumber || 'Not provided'}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-3">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
+                            <MapPin className="h-5 w-5 text-[#5B9BD5]" />
+                        </div>
+                        <div>
+                            <p className="text-xs text-muted">Date of Birth</p>
+                            <p className="text-sm font-medium text-secondary">Not provided</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Recent Orders */}
+            <div className="rounded-xl border border-slate-200 bg-white p-6">
+                <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-lg font-semibold text-secondary">Recent Orders</h3>
+                    <button
+                        onClick={() => {
+                            // Switch to orders tab
+                            const event = new CustomEvent('switchTab', { detail: 'orders' });
+                            window.dispatchEvent(event);
+                        }}
+                        className="text-sm text-primary-600 hover:text-primary-700"
+                    >
+                        View All →
+                    </button>
+                </div>
+                {ordersLoading ? (
+                    <div className="space-y-3">
+                        {Array.from({ length: 3 }).map((_, index) => (
+                            <div
+                                key={index}
+                                className="h-16 animate-pulse rounded-lg bg-slate-50"
+                            />
+                        ))}
+                    </div>
+                ) : recentOrders.length === 0 ? (
+                    <p className="text-sm text-muted text-center py-8">No orders yet</p>
+                ) : (
+                    <div className="space-y-3">
+                        {recentOrders.map((order) => (
+                            <div
+                                key={order._id}
+                                className="flex items-center justify-between rounded-lg bg-slate-50 p-4 hover:bg-slate-100 transition-colors"
+                            >
+                                <div className="flex items-center gap-3">
+                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">
+                                        <Package className="h-5 w-5 text-slate-600" />
+                                    </div>
+                                    <div>
+                                        <div className='flex items-center gap-2'>
+                                            <p className="text-sm font-medium text-secondary">
+                                                ORD-{order._id?.slice(-6).toUpperCase()}
+                                            </p>
+                                            <Badge className='p-1 text-xs'
+                                                variant={
+                                                    order.orderStatus === 'Delivered' ? 'success' :
+                                                        order.orderStatus === 'In Transit' ? 'primary' :
+                                                            order.orderStatus === 'Pending' ? 'warning' : 'gray'
+                                                }>
+                                                {order.orderStatus}
+                                            </Badge>
+                                        </div>
+                                        <p className="text-xs text-muted">
+                                            {formatDate(order.createdAt || new Date(), 'short')}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-3">
+
+                                    <p className="text-sm font-semibold text-secondary">
+                                        {formatPrice(order.grandTotal || 0)}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}