hey-pharmacist-ecommerce 1.1.13 → 1.1.15

package/src/screens/ProfileScreen.tsx

@@ -2,12 +2,10 @@
 
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import {
+  ArrowRight,
   Heart,
   HeartPulse,
   LogOut,
@@ -20,60 +18,32 @@ import {
   User,
 } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
 import { useAuth } from '@/providers/AuthProvider';
-import { toast } from 'sonner';
 import { getInitials } from '@/lib/utils/format';
 import { useBasePath } from '@/providers/BasePathProvider';
 
-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('Enter a valid email address'),
-  phone: z.string().optional(),
-});
-
-type ProfileFormData = z.infer<typeof profileSchema>;
-
 export function ProfileScreen() {
   const router = useRouter();
-  const { user, updateUser, logout } = useAuth();
+  const { user, logout, isLoading } = useAuth();
   const { buildPath } = useBasePath();
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [logoutError, setLogoutError] = useState<string | null>(null);
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<ProfileFormData>({
-    resolver: zodResolver(profileSchema),
-    defaultValues: {
-      firstName: user?.firstname || '',
-      lastName: user?.lastname || '',
-      email: user?.email || '',
-      phone: user?.phoneNumber || '',
-    },
-  });
-
-  const onSubmit = async (data: ProfileFormData) => {
-    setIsSubmitting(true);
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    setLogoutError(null);
     try {
-      await updateUser(data);
-      toast.success('Profile updated successfully!');
+      await logout();
+      router.push(buildPath('/'));
     } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Failed to update profile');
+      setLogoutError(error?.response?.data?.message || 'Failed to logout. Please try again.');
     } finally {
-      setIsSubmitting(false);
+      setIsLoggingOut(false);
     }
   };
 
-  const handleLogout = async () => {
-    await logout();
-    toast.success('Logged out successfully');
-    router.push(buildPath('/'));
-  };
-
   if (!user) {
+    if (isLoading) return null;
     router.push(buildPath('/login'));
     return null;
   }
@@ -81,8 +51,8 @@ export function ProfileScreen() {
   const quickLinks = [
     {
       icon: Package,
-      label: 'Order history',
-      description: 'Track shipments and download invoices',
+      label: 'Orders & invoices',
+      description: 'Track shipments, invoices, and receipts',
       href: buildPath('/orders'),
     },
     {
@@ -100,188 +70,208 @@ export function ProfileScreen() {
   ];
 
   return (
-    <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">
+    <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: 24 }}
+            initial={{ opacity: 0, y: 18 }}
             animate={{ opacity: 1, y: 0 }}
-            className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between"
+            className="grid gap-8 md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center"
           >
-            <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">
+            <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" />
-                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
+                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>
-            <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 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>
-              <p className="text-sm text-white/80">{user.email}</p>
-              <Button
-                variant="ghost"
-                className="text-white hover:bg-white/20"
-                onClick={() => router.push(buildPath('/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: 24 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="space-y-6"
-            >
-              <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 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>
-
-                <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" />
+                <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="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(buildPath('/orders'))}
-                    >
-                      View recent orders
-                    </Button>
+                <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>
-                </form>
-              </section>
+                  <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>
 
-              <section className="grid gap-4 md:grid-cols-2">
+          <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 rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
+                    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"
                   >
-                    <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>
+                    <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>
                 ))}
-              </section>
-            </motion.div>
-
-            <motion.aside
-              initial={{ opacity: 0, y: 24 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 }}
-              className="space-y-6"
-            >
-              <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(buildPath('/account/preferences'))}
-                >
-                  Manage preferences
-                </Button>
               </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>
+            </section>
+          </motion.aside>
         </div>
       </div>
     </div>