hey-pharmacist-ecommerce 1.0.4 → 1.0.6

package/src/screens/ProfileScreen.tsx

@@ -5,19 +5,30 @@ import { motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { User, Mail, Phone, LogOut, Package, Heart } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+  Heart,
+  HeartPulse,
+  LogOut,
+  Mail,
+  MapPin,
+  Package,
+  Phone,
+  ShieldCheck,
+  Sparkles,
+  User,
+} from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useAuth } from '@/providers/AuthProvider';
-import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { getInitials } from '@/lib/utils/format';
-import Link from 'next/link';
 
 const profileSchema = z.object({
   firstName: z.string().min(2, 'First name is required'),
   lastName: z.string().min(2, 'Last name is required'),
-  email: z.string().email('Invalid email address'),
+  email: z.string().email('Enter a valid email address'),
   phone: z.string().optional(),
 });
 
@@ -35,10 +46,10 @@ export function ProfileScreen() {
   } = useForm<ProfileFormData>({
     resolver: zodResolver(profileSchema),
     defaultValues: {
-      firstName: user?.firstName || '',
-      lastName: user?.lastName || '',
+      firstName: user?.firstname || '',
+      lastName: user?.lastname || '',
       email: user?.email || '',
-      phone: user?.phone || '',
+      phone: user?.phoneNumber || '',
     },
   });
 
@@ -65,147 +76,212 @@ export function ProfileScreen() {
     return null;
   }
 
-  const menuItems = [
+  const quickLinks = [
     {
       icon: Package,
-      label: 'My Orders',
+      label: 'Order history',
+      description: 'Track shipments and download invoices',
       href: '/orders',
-      description: 'View and track your orders',
     },
     {
       icon: Heart,
       label: 'Wishlist',
+      description: 'Curate go-to remedies and favorites',
       href: '/wishlist',
-      description: 'Your saved products',
+    },
+    {
+      icon: MapPin,
+      label: 'Delivery addresses',
+      description: 'Manage saved delivery locations',
+      href: '/account/addresses',
     },
   ];
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
-      <div className="container mx-auto px-4 max-w-4xl">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">My Account</h1>
-          <p className="text-gray-600">Manage your profile and preferences</p>
-        </motion.div>
-
-        <div className="grid md:grid-cols-3 gap-8">
-          {/* Sidebar */}
-          <div className="md:col-span-1">
+    <div className="min-h-screen bg-slate-50">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+        <div className="relative container mx-auto px-4 py-16">
+          <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between"
+          >
+            <div className="space-y-5">
+              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
+                <HeartPulse className="h-4 w-4" />
+                My account
+              </span>
+              <h1 className="text-4xl font-bold md:text-5xl">
+                Hello, {user.firstname} {user.lastname}
+              </h1>
+              <p className="max-w-2xl text-white/80 md:text-lg">
+                Manage profile details, shipping preferences, and personalized recommendations. Our
+                pharmacists keep your care plan up to date.
+              </p>
+              <div className="flex flex-wrap items-center gap-4 text-sm text-white/80">
+                <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2">
+                  <ShieldCheck className="h-4 w-4" />
+                  Account secured with multi-factor ready login
+                </span>
+              </div>
+            </div>
+            <div className="flex flex-col items-center gap-4 rounded-3xl bg-white/15 p-6 text-center backdrop-blur">
+              <div className="flex h-24 w-24 items-center justify-center rounded-full bg-white/20 text-3xl font-bold text-white">
+                {getInitials(user?.firstname || '', user?.lastname || '') || ''}
+              </div>
+              <p className="text-sm text-white/80">{user.email}</p>
+              <Button
+                variant="ghost"
+                className="text-white hover:bg-white/20"
+                onClick={() => router.push('/account/change-password')}
+              >
+                Change password
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      <div className="relative -mt-16 pb-20">
+        <div className="container mx-auto px-4">
+          <div className="grid gap-10 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
             <motion.div
-              initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 }}
-              className="bg-white rounded-2xl p-6 shadow-sm"
+              className="space-y-6"
             >
-              {/* Avatar */}
-              <div className="flex flex-col items-center mb-6">
-                <div className="w-24 h-24 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full flex items-center justify-center text-white text-3xl font-bold mb-4">
-                  {getInitials(user.firstName, user.lastName)}
+              <section className="rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50">
+                <div className="flex items-center justify-between">
+                  <h2 className="text-xl font-semibold text-slate-900">
+                    Personal information
+                  </h2>
+                  <Sparkles className="h-5 w-5 text-primary-500" />
                 </div>
-                <h3 className="text-xl font-bold text-gray-900">
-                  {user.firstName} {user.lastName}
-                </h3>
-                <p className="text-gray-600">{user.email}</p>
-              </div>
 
-              {/* Menu Items */}
-              <nav className="space-y-2">
-                {menuItems.map((item) => (
+                <form onSubmit={handleSubmit(onSubmit)} className="mt-6 space-y-6">
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <Input
+                      label="First name"
+                      placeholder="Taylor"
+                      {...register('firstName')}
+                      error={errors.firstName?.message}
+                    />
+                    <Input
+                      label="Last name"
+                      placeholder="Reed"
+                      {...register('lastName')}
+                      error={errors.lastName?.message}
+                    />
+                  </div>
+
+                  <div className="relative">
+                    <Input
+                      type="email"
+                      label="Email address"
+                      placeholder="you@example.com"
+                      className="pl-10"
+                      {...register('email')}
+                      error={errors.email?.message}
+                    />
+                    <Mail className="absolute left-3 top-[38px] h-4 w-4 text-slate-400" />
+                  </div>
+
+                  <div className="relative">
+                    <Input
+                      type="tel"
+                      label="Phone number"
+                      placeholder="+1 (555) 123-4567"
+                      className="pl-10"
+                      {...register('phone')}
+                      error={errors.phone?.message}
+                    />
+                    <Phone className="absolute left-3 top-[38px] h-4 w-4 text-slate-400" />
+                  </div>
+
+                  <div className="flex flex-wrap gap-4">
+                    <Button
+                      type="submit"
+                      size="lg"
+                      isLoading={isSubmitting}
+                    >
+                      Save changes
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="lg"
+                      onClick={() => router.push('/orders')}
+                    >
+                      View recent orders
+                    </Button>
+                  </div>
+                </form>
+              </section>
+
+              <section className="grid gap-4 md:grid-cols-2">
+                {quickLinks.map((item) => (
                   <Link
                     key={item.href}
                     href={item.href}
-                    className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors group"
+                    className="group rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
                   >
-                    <item.icon className="w-5 h-5 text-gray-500 group-hover:text-primary-600 mt-0.5" />
-                    <div>
-                      <p className="font-medium text-gray-900 group-hover:text-primary-600">
-                        {item.label}
-                      </p>
-                      <p className="text-sm text-gray-500">{item.description}</p>
+                    <div className="flex items-center gap-3">
+                      <span className="rounded-2xl bg-primary-50 p-3 text-primary-600">
+                        <item.icon className="h-5 w-5" />
+                      </span>
+                      <div>
+                        <p className="text-base font-semibold text-slate-900 group-hover:text-primary-600">
+                          {item.label}
+                        </p>
+                        <p className="text-sm text-slate-500">{item.description}</p>
+                      </div>
                     </div>
                   </Link>
                 ))}
-              </nav>
-
-              {/* Logout Button */}
-              <button
-                onClick={handleLogout}
-                className="w-full mt-6 flex items-center justify-center gap-2 p-3 text-red-600 hover:bg-red-50 rounded-lg transition-colors font-medium"
-              >
-                <LogOut className="w-5 h-5" />
-                Logout
-              </button>
+              </section>
             </motion.div>
-          </div>
 
-          {/* Main Content */}
-          <div className="md:col-span-2">
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
+            <motion.aside
+              initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.2 }}
-              className="bg-white rounded-2xl p-8 shadow-sm"
+              transition={{ delay: 0.1 }}
+              className="space-y-6"
             >
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">
-                Personal Information
-              </h2>
-
-              <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-                <div className="grid grid-cols-2 gap-4">
-                  <Input
-                    label="First Name"
-                    {...register('firstName')}
-                    error={errors.firstName?.message}
-                  />
-                  <Input
-                    label="Last Name"
-                    {...register('lastName')}
-                    error={errors.lastName?.message}
-                  />
-                </div>
+              <div className="rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50">
+                <h3 className="text-lg font-semibold text-slate-900">Care preferences</h3>
+                <p className="mt-3 text-sm text-slate-600">
+                  Customize how we support you. Set refill reminders or manage communication
+                  preferences to stay aligned with your wellness goals.
+                </p>
+                <Button
+                  variant="outline"
+                  className="mt-4 w-full"
+                  onClick={() => router.push('/account/preferences')}
+                >
+                  Manage preferences
+                </Button>
+              </div>
 
-                <Input
-                  type="email"
-                  label="Email Address"
-                  {...register('email')}
-                  error={errors.email?.message}
-                />
-
-                <Input
-                  type="tel"
-                  label="Phone Number"
-                  {...register('phone')}
-                  error={errors.phone?.message}
-                />
-
-                <div className="flex gap-4">
-                  <Button
-                    type="submit"
-                    size="lg"
-                    isLoading={isSubmitting}
-                  >
-                    Save Changes
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="lg"
-                    onClick={() => router.push('/account/change-password')}
-                  >
-                    Change Password
-                  </Button>
-                </div>
-              </form>
-            </motion.div>
+              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm">
+                <p className="font-semibold uppercase tracking-[0.3em]">Pharmacist tip</p>
+                <p className="mt-3 leading-relaxed">
+                  Keep your phone number current so pharmacists can reach you quickly with dosage
+                  advice or time-sensitive updates about your order.
+                </p>
+              </div>
+
+              <button
+                onClick={handleLogout}
+                className="flex w-full items-center justify-center gap-2 rounded-3xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-600 transition hover:bg-red-100"
+              >
+                <LogOut className="h-4 w-4" />
+                Log out
+              </button>
+            </motion.aside>
           </div>
         </div>
       </div>
     </div>
   );
 }
-