hey-pharmacist-ecommerce 1.1.15 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "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",

package/src/index.ts

@@ -15,7 +15,7 @@ export { CartScreen } from './screens/CartScreen';
 export { CheckoutScreen } from './screens/CheckoutScreen';
 export { LoginScreen } from './screens/LoginScreen';
 export { RegisterScreen } from './screens/RegisterScreen';
-export { ProfileScreen } from './screens/ProfileScreen';
+export { default as ProfileScreen } from './screens/ProfileScreen';
 export { OrdersScreen } from './screens/OrdersScreen';
 export { CurrentOrdersScreen } from './screens/CurrentOrdersScreen';
 export { AddressesScreen } from './screens/AddressesScreen';

package/src/screens/ProfileScreen.tsx

@@ -1,42 +1,63 @@
 'use client';
 
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import {
-  ArrowRight,
+  User,
+  Package,
   Heart,
-  HeartPulse,
-  LogOut,
-  Mail,
+  CreditCard,
   MapPin,
-  Package,
-  Phone,
-  ShieldCheck,
-  Sparkles,
-  User,
+  Settings,
+  LogOut,
+  ChevronDown,
 } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
 import { useAuth } from '@/providers/AuthProvider';
-import { getInitials } from '@/lib/utils/format';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { getInitials } from '@/lib/utils/format';
+import { TabNavigation } from '@/components/TabNavigation';
+import { AccountOverviewTab } from '@/components/AccountOverviewTab';
+import { AccountOrdersTab } from '@/components/AccountOrdersTab';
+import { AccountSavedItemsTab } from '@/components/AccountSavedItemsTab';
+import { AccountPaymentTab } from '@/components/AccountPaymentTab';
+import { AccountAddressesTab } from '@/components/AccountAddressesTab';
+import { AccountSettingsTab } from '@/components/AccountSettingsTab';
 
-export function ProfileScreen() {
+const tabs = [
+  { id: 'overview', label: 'Overview', icon: User },
+  { id: 'orders', label: 'Orders', icon: Package },
+  { id: 'saved-items', label: 'Saved Items', icon: Heart },
+  // { id: 'payment', label: 'Payment', icon: CreditCard },
+  { id: 'addresses', label: 'Addresses', icon: MapPin },
+  { id: 'settings', label: 'Settings', icon: Settings },
+];
+
+export default function AccountPage() {
   const router = useRouter();
   const { user, logout, isLoading } = useAuth();
   const { buildPath } = useBasePath();
+  const [activeTab, setActiveTab] = useState('overview');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isLoggingOut, setIsLoggingOut] = useState(false);
-  const [logoutError, setLogoutError] = useState<string | null>(null);
+
+  // Listen for tab switch events from child components
+  React.useEffect(() => {
+    const handleTabSwitch = (event: CustomEvent) => {
+      setActiveTab(event.detail);
+    };
+    window.addEventListener('switchTab', handleTabSwitch as EventListener);
+    return () => {
+      window.removeEventListener('switchTab', handleTabSwitch as EventListener);
+    };
+  }, []);
 
   const handleLogout = async () => {
     setIsLoggingOut(true);
-    setLogoutError(null);
     try {
       await logout();
       router.push(buildPath('/'));
     } catch (error: any) {
-      setLogoutError(error?.response?.data?.message || 'Failed to logout. Please try again.');
+      console.error('Logout failed:', error);
     } finally {
       setIsLoggingOut(false);
     }
@@ -48,230 +69,49 @@ export function ProfileScreen() {
     return null;
   }
 
-  const quickLinks = [
-    {
-      icon: Package,
-      label: 'Orders & invoices',
-      description: 'Track shipments, invoices, and receipts',
-      href: buildPath('/orders'),
-    },
-    {
-      icon: Heart,
-      label: 'Wishlist',
-      description: 'Curate go-to remedies and favorites',
-      href: buildPath('/wishlist'),
-    },
-    {
-      icon: MapPin,
-      label: 'Delivery addresses',
-      description: 'Manage saved delivery locations',
-      href: buildPath('/account/addresses'),
-    },
-  ];
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'overview':
+        return <AccountOverviewTab />;
+      case 'orders':
+        return <AccountOrdersTab />;
+      case 'saved-items':
+        return <AccountSavedItemsTab />;
+      // case 'payment':
+      //   return <AccountPaymentTab />;
+      case 'addresses':
+        return <AccountAddressesTab />;
+      case 'settings':
+        return <AccountSettingsTab />;
+      default:
+        return <AccountOverviewTab />;
+    }
+  };
 
   return (
-    <div className="min-h-screen bg-slate-50 text-slate-900">
-      <div className="relative container mx-auto px-4 pb-16 pt-10">
-        <div className="rounded-3xl border border-slate-200 bg-white/95 p-8 shadow-xl shadow-primary-50 backdrop-blur">
-          <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
-            <div className="text-sm text-slate-500">
-              Stay signed in to keep prescriptions and deliveries synced.
-            </div>
-            <div className="flex items-center gap-3">
-              {logoutError && (
-                <div className="flex items-start gap-2 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
-                  <ShieldCheck className="mt-[1px] h-4 w-4 text-red-500" />
-                  <span>{logoutError}</span>
-                </div>
-              )}
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="border-red-200 text-red-600 hover:bg-red-50"
-                onClick={handleLogout}
-                disabled={isLoggingOut}
-              >
-                <LogOut className="h-4 w-4" />
-                {isLoggingOut ? 'Logging out...' : 'Log out'}
-              </Button>
-            </div>
-          </div>
-          <motion.div
-            initial={{ opacity: 0, y: 18 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="grid gap-8 md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center"
-          >
-            <div className="space-y-4">
-              <div className="inline-flex items-center gap-2 rounded-full bg-slate-900 text-white px-4 py-1 text-xs font-semibold uppercase tracking-[0.32em]">
-                <HeartPulse className="h-4 w-4" />
-                Account
-              </div>
-              <div>
-                <h1 className="text-4xl font-semibold md:text-5xl">
-                  Welcome back, {user.firstname} {user.lastname}
-                </h1>
-                <p className="mt-3 max-w-2xl text-base text-slate-600">
-                  Keep your identity and delivery details accurate for smoother refills, faster
-                  shipping, and timely pharmacist guidance.
-                </p>
-              </div>
-              <div className="flex flex-wrap gap-3 text-sm text-slate-600">
-                <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2">
-                  <ShieldCheck className="h-4 w-4 text-primary-600" />
-                  Secure login enabled
-                </span>
-                <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2">
-                  <Mail className="h-4 w-4 text-primary-600" />
-                  {user.email}
-                </span>
-                <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2">
-                  <Phone className="h-4 w-4 text-primary-600" />
-                  {user.phoneNumber || 'Add phone for urgent updates'}
-                </span>
-              </div>
+    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+      {/* Header */}
+      <div className="">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-semibold text-secondary">My Account</h1>
+              <p className="text-sm text-muted">
+                Manage your profile, orders, and preferences
+              </p>
             </div>
 
-            <div className="flex flex-col gap-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-6 shadow-sm">
-              <div className="flex items-center gap-4">
-                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-2xl font-semibold text-slate-900 shadow-sm">
-                  {getInitials(user?.firstname || '', user?.lastname || '') || ''}
-                </div>
-                <div className="space-y-1">
-                  <p className="text-sm text-slate-500">Signed in as</p>
-                  <p className="text-lg font-semibold text-slate-900">{user.firstname}</p>
-                  <p className="text-sm text-slate-500">{user.email}</p>
-                </div>
-              </div>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <Button
-                  variant="outline"
-                  size="md"
-                  className="border-slate-300 text-slate-800 hover:bg-white"
-                  onClick={() => router.push(buildPath('/account/edit'))}
-                >
-                  Edit profile
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="md"
-                  className="text-slate-700 hover:bg-white"
-                  onClick={() => router.push(buildPath('/account/change-password'))}
-                >
-                  Change password
-                </Button>
-              </div>
-            </div>
-          </motion.div>
+          </div>
         </div>
+      </div>
 
-        <div className="mt-10 grid gap-8 lg:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)] items-stretch">
-          <motion.div
-            initial={{ opacity: 0, y: 18 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="space-y-6"
-          >
-            <section className="rounded-3xl border border-slate-200 bg-white p-7 shadow-lg shadow-primary-50/40 min-h-[420px] h-full flex flex-col">
-              <div className="flex items-center justify-between gap-3">
-                <div>
-                  <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-400">
-                    Essentials
-                  </p>
-                  <h2 className="mt-1 text-xl font-semibold text-slate-900">Profile snapshot</h2>
-                </div>
-                <Sparkles className="h-5 w-5 text-primary-500" />
-              </div>
-              <div className="mt-6 grid gap-4 md:grid-cols-2">
-                <div className="rounded-2xl border border-slate-200 bg-slate-50/70 p-5">
-                  <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">
-                    Contact
-                  </p>
-                  <div className="mt-3 space-y-2 text-sm text-slate-600">
-                    <p className="flex items-center gap-2 font-semibold text-slate-900">
-                      <User className="h-4 w-4 text-primary-500" />
-                      {user.firstname} {user.lastname}
-                    </p>
-                    <p className="flex items-center gap-2">
-                      <Mail className="h-4 w-4 text-primary-500" />
-                      {user.email}
-                    </p>
-                    <p className="flex items-center gap-2">
-                      <Phone className="h-4 w-4 text-primary-500" />
-                      {user.phoneNumber || 'Not provided'}
-                    </p>
-                  </div>
-                  <Button
-                    variant="outline"
-                    size="md"
-                    className="mt-4 w-full border-slate-300 text-slate-800 hover:bg-white"
-                    onClick={() => router.push(buildPath('/account/edit'))}
-                  >
-                    Update information
-                  </Button>
-                </div>
-
-                <div className="rounded-2xl border border-slate-200 bg-slate-50/70 p-5">
-                  <p className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">
-                    Security
-                  </p>
-                  <div className="mt-3 space-y-2 text-sm text-slate-600">
-                    <p className="flex items-center gap-2 font-semibold text-slate-900">
-                      <ShieldCheck className="h-4 w-4 text-primary-500" />
-                      Multi-factor ready
-                    </p>
-                    <p>Protect your account with a fresh password and keep notifications on.</p>
-                  </div>
-                  <Button
-                    variant="primary"
-                    size="md"
-                    className="mt-4 w-full"
-                    onClick={() => router.push(buildPath('/account/change-password'))}
-                  >
-                    Change password
-                  </Button>
-                </div>
-              </div>
-            </section>
-          </motion.div>
+      {/* Tab Navigation */}
+      <TabNavigation tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />
 
-          <motion.aside
-            initial={{ opacity: 0, y: 18 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.05 }}
-            className="space-y-4 h-full"
-          >
-            <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm min-h-[420px] h-full flex flex-col">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-400">
-                    Quick links
-                  </p>
-                  <h3 className="mt-1 text-lg font-semibold text-slate-900">Next steps</h3>
-                </div>
-                <Heart className="h-5 w-5 text-primary-500" />
-              </div>
-              <div className="mt-5 grid gap-3">
-                {quickLinks.map((item) => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className="group relative flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50/70 p-4 transition duration-200 hover:-translate-y-0.5 hover:border-primary-200 hover:bg-white hover:shadow-md"
-                  >
-                    <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-white text-primary-600 shadow-sm group-hover:bg-primary-600 group-hover:text-white">
-                      <item.icon className="h-5 w-5" />
-                    </span>
-                    <div className="flex-1">
-                      <p className="flex items-center gap-2 text-base font-semibold text-slate-900 group-hover:text-primary-700">
-                        {item.label}
-                        <ArrowRight className="h-4 w-4 opacity-0 transition group-hover:opacity-100" />
-                      </p>
-                      <p className="text-sm text-slate-500">{item.description}</p>
-                    </div>
-                  </Link>
-                ))}
-              </div>
-            </section>
-          </motion.aside>
+      {/* Tab Content */}
+      <div className="container mx-auto max-w-7xl">
+        <div className="rounded-2xl shadow-sm">
+          {renderTabContent()}
         </div>
       </div>
     </div>

package/src/screens/ShopScreen.tsx

@@ -921,7 +921,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
       {/* Shop by Category Section */}
       <section className="py-8 bg-white">
-        <div className="max-w-[1400px] mx-auto px-8 md:px-12">
+        <div className="container mx-auto px-4">
           <h2 className="text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-secondary mb-6">
             Shop by Category
           </h2>