hey-pharmacist-ecommerce 1.1.13 → 1.1.14

package/src/screens/EditProfileScreen.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import { Mail, Phone, User } from 'lucide-react';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { useAuth } from '@/providers/AuthProvider';
+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'),
+  phoneNumber: z.string().optional(),
+});
+
+type ProfileFormData = z.infer<typeof profileSchema>;
+
+export function EditProfileScreen() {
+  const router = useRouter();
+  const { user, updateUser } = useAuth();
+  const { buildPath } = useBasePath();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(
+    null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ProfileFormData>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      firstname: user?.firstname || '',
+      lastname: user?.lastname || '',
+      email: user?.email || '',
+      phoneNumber: user?.phoneNumber || '',
+    },
+  });
+
+  if (!user) {
+    router.push(buildPath('/login'));
+    return null;
+  }
+
+  const onSubmit = async (data: ProfileFormData) => {
+    setIsSubmitting(true);
+    setStatus(null);
+    try {
+      await updateUser(data);
+      setStatus({ type: 'success', message: 'Profile updated successfully' });
+      router.push(buildPath('/account'));
+    } catch (error: any) {
+      setStatus({
+        type: 'error',
+        message: error.response?.data?.message || 'Failed to update profile',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900">
+      <div className="container mx-auto px-4 pb-16 pt-10">
+        <motion.div
+          initial={{ opacity: 0, y: 18 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mx-auto max-w-3xl rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-primary-50"
+        >
+          <div className="flex items-center gap-3">
+            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary-50 text-primary-600">
+              <User className="h-5 w-5" />
+            </span>
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.32em] text-slate-500">
+                Profile
+              </p>
+              <h1 className="text-2xl font-semibold text-slate-900">Edit core information</h1>
+            </div>
+          </div>
+          <p className="mt-3 text-sm text-slate-600">
+            Update your name, email, and contact information so we can keep your deliveries and
+            pharmacist support aligned with your preferences.
+          </p>
+
+          {status && (
+            <div
+              className={`mt-4 flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${
+                status.type === 'success'
+                  ? 'border-green-200 bg-green-50 text-green-800'
+                  : 'border-red-200 bg-red-50 text-red-700'
+              }`}
+            >
+              <span className="mt-[2px] text-base">{status.type === 'success' ? '✔' : '!'}</span>
+              <span>{status.message}</span>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit(onSubmit)} className="mt-8 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('phoneNumber')}
+                error={errors.phoneNumber?.message}
+              />
+              <Phone className="absolute left-3 top-[38px] h-4 w-4 text-slate-400" />
+            </div>
+
+            <div className="flex flex-wrap gap-3">
+              <Button type="submit" size="lg" isLoading={isSubmitting}>
+                Save changes
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="lg"
+                className="border-slate-300 text-slate-800 hover:bg-slate-50"
+                onClick={() => router.push(buildPath('/account'))}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/src/screens/LoginScreen.tsx

@@ -19,7 +19,6 @@ import {
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { useAuth } from '@/providers/AuthProvider';
-import { toast } from 'sonner';
 import { useBasePath } from '@/providers/BasePathProvider';
 
 const loginSchema = z.object({
@@ -34,9 +33,12 @@ export function LoginScreen() {
   const { buildPath } = useBasePath();
   const searchParams = useSearchParams();
   const redirectUrl = searchParams?.get('redirect') || buildPath('/');
-  const { login } = useAuth();
+  const { login, user, isLoading } = useAuth();
   const [showPassword, setShowPassword] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(
+    null
+  );
 
   const {
     register,
@@ -48,95 +50,76 @@ export function LoginScreen() {
 
   const onSubmit = async (data: LoginFormData) => {
     setIsSubmitting(true);
+    setStatus(null);
     try {
       await login(data);
-      toast.success('Welcome back!');
+      setStatus({ type: 'success', message: 'Welcome back!' });
       router.push(redirectUrl);
     } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Invalid credentials');
+      setStatus({
+        type: 'error',
+        message: error?.response?.data?.message || 'Invalid credentials',
+      });
     } finally {
       setIsSubmitting(false);
     }
   };
 
-  return (
-    <div className="min-h-screen bg-slate-50">
-      <div className="grid min-h-screen overflow-hidden bg-white lg:grid-cols-[1.1fr_0.9fr]">
-        <motion.section
-          initial={{ opacity: 0, x: -24 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.4 }}
-          className="relative flex flex-col justify-between bg-gradient-to-br from-slate-700 via-slate-600 to-slate-700 px-10 py-14 text-white"
-        >
-          <div className="space-y-6">
-            <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" />
-              Hey Pharmacist
-            </span>
-            <h1 className="text-4xl font-bold leading-tight lg:text-5xl">
-              Pharmacy-grade care for your household
-            </h1>
-            <p className="max-w-xl text-white/80">
-              Log in to unlock personalized regimens, pharmacist support, and fast delivery on
-              wellness essentials curated just for you.
-            </p>
-          </div>
-
-          <div className="grid gap-4 rounded-3xl bg-white/10 p-6 backdrop-blur">
-            <div className="flex items-center gap-3">
-              <ShieldCheck className="h-5 w-5 text-white" />
-              <p className="text-sm text-white/80">
-                HIPAA-compliant security keeps your health information protected.
-              </p>
-            </div>
-            <div className="flex items-center gap-3">
-              <Sparkles className="h-5 w-5 text-white" />
-              <p className="text-sm text-white/80">
-                Pharmacists ready to chat in under 10 minutes for medication support.
-              </p>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-6 text-sm text-white/80">
-            <span>Need an account?</span>
-            <Link
-              href={buildPath('/register')}
-              className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 font-semibold transition hover:bg-white/25"
-            >
-              Create one now
-              <ArrowRight className="h-4 w-4" />
-            </Link>
-          </div>
-        </motion.section>
+  if (!isLoading && user) {
+    router.push(buildPath('/account'));
+    return null;
+  }
 
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+      <div className="grid min-h-screen overflow-hidden pb-12">
         <motion.section
           initial={{ opacity: 0, x: 24 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.4 }}
           className="flex items-center justify-center px-6 py-12 lg:px-16"
         >
-          <div className="w-full max-w-md space-y-10">
+          <div className="w-full max-w-lg space-y-10 text-center">
             <div className="space-y-2">
-              <h2 className="text-3xl font-bold text-slate-900">Sign in</h2>
-              <p className="text-sm text-slate-500">
-                Welcome back! Enter your details to continue your personalized care plan.
+              <Lock strokeWidth={2} className='h-16 w-16 mx-auto text-white rounded-full bg-secondary m-2 mb-4 px-4' />
+              <h2 className="text-4xl text-secondary">Welcome Back</h2>
+              <p className="text-sm text-muted">Sign in to access your patient portal
               </p>
             </div>
 
-            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50">
-              <div>
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 rounded-3xl border bg-white p-8"
+            style={{
+              boxShadow: '0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A',
+            }}>
+              {status && (
+                <div
+                  className={`flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${
+                    status.type === 'success'
+                      ? 'border-green-200 bg-green-50 text-green-800'
+                      : 'border-red-200 bg-red-50 text-red-700'
+                  }`}
+                >
+                  <span className="mt-[2px] text-base">{status.type === 'success' ? '✔' : '!'}</span>
+                  <span>{status.message}</span>
+                </div>
+              )}
+
+              <div className='text-start text-secondary'>
+                <h2 className="text-sm text-secondary mb-3">Email Address <span className='text-primary-500'>*</span></h2>
                 <Input
                   type="email"
-                  label="Email address"
+                  // label="Email address"
                   placeholder="you@example.com"
                   {...register('email')}
                   error={errors.email?.message}
+                  className='text-secondary'
                 />
               </div>
-              <div className="relative">
+              <div className="relative text-start text-secondary">
+                <h2 className="text-sm text-secondary mb-3">Password <span className='text-primary-500'>*</span></h2>
+
                 <Input
                   type={showPassword ? 'text' : 'password'}
-                  label="Password"
                   placeholder="••••••••"
                   {...register('password')}
                   error={errors.password?.message}
@@ -160,23 +143,27 @@ export function LoginScreen() {
                 </label>
                 <Link
                   href={buildPath('/forgot-password')}
-                  className="font-medium text-primary-600 transition hover:text-primary-700"
+                  className="font-medium text-primary transition hover:opacity-80"
                 >
                   Forgot password?
                 </Link>
               </div>
 
-              <Button
+              <button
                 type="submit"
-                size="lg"
-                isLoading={isSubmitting}
-                className="w-full"
+                disabled={isSubmitting}
+                className="w-full bg-secondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
               >
-                Sign in securely
-              </Button>
+                {isSubmitting ? 'Signing in...' : 'Sign in'}
+              </button>
             </form>
 
-            <div className="rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600">
+              <div className="mt-4">
+                <p className="text-muted">Don't have an account? <Link href={buildPath('/register')} className="font-medium text-primary transition hover:opacity-90">Sign up</Link></p>
+              </div>
+
+
+            {/* <div className="rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600">
               <div className="flex items-start gap-3">
                 <Lock className="mt-0.5 h-5 w-5 text-primary-500" />
                 <div>
@@ -187,10 +174,10 @@ export function LoginScreen() {
                   </p>
                 </div>
               </div>
-            </div>
+            </div> */}
           </div>
         </motion.section>
       </div>
     </div>
   );
-}
+}

package/src/screens/NewAddressScreen.tsx

@@ -9,12 +9,13 @@ import { Input } from '@/components/ui/Input';
 import { addressSchema, type AddressFormData } from '@/lib/validations/address';
 import { AddressesApi } from '@/lib/Apis/apis/addresses-api';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
-import { toast } from 'sonner';
 import { ArrowLeft, MapPin } from 'lucide-react';
+import { useNotification } from '@/providers/NotificationProvider';
 
 export default function NewAddressPage() {
     const router = useRouter();
     const [isSubmitting, setIsSubmitting] = useState(false);
+  const notification = useNotification();
 
     const {
         register,
@@ -43,7 +44,10 @@ export default function NewAddressPage() {
                 phone: data.phone,
             });
 
-            toast.success('Address added successfully');
+            notification.success(
+              'Address added',
+              'Your new address has been saved to your account.'
+            );
             router.back();
 
         } catch (error: any) {
@@ -66,17 +70,19 @@ export default function NewAddressPage() {
                 errorMessage = 'Unable to connect to the server. Please check your internet connection.';
             }
 
-            toast.error('Unable to save address', {
-                description: errorMessage,
-                duration: 5000
-            });
+            notification.error(
+              'Unable to save address',
+              errorMessage,
+              5000
+            );
 
             // Show additional guidance for certain error types
             if (error.response?.status === 422) {
-                toast.info('Address validation failed', {
-                    description: 'Make sure your address is complete and formatted correctly.',
-                    duration: 6000
-                });
+                notification.info(
+                  'Address validation failed',
+                  'Make sure your address is complete and formatted correctly.',
+                  6000
+                );
             }
         } finally {
             setIsSubmitting(false);