hey-pharmacist-ecommerce 1.1.13 → 1.1.14

package/src/screens/RegisterScreen.tsx

@@ -19,7 +19,7 @@ import {
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { useAuth } from '@/providers/AuthProvider';
-import { toast } from 'sonner';
+import { useNotification } from '@/providers/NotificationProvider';
 import { CreateUserDtoCustomerTypeEnum, CreateUserDtoRoleEnum } from '@/lib/Apis/models';
 import { useBasePath } from '@/providers/BasePathProvider';
 
@@ -52,6 +52,7 @@ export function RegisterScreen() {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const notification = useNotification();
 
   const {
     register,
@@ -71,108 +72,86 @@ export function RegisterScreen() {
         customerType: CreateUserDtoCustomerTypeEnum.Regular,
         role: CreateUserDtoRoleEnum.User,
       });
-      toast.success('Account created successfully!');
+      notification.success(
+        'Account created',
+        'Your Hey Pharmacist account is ready to use.'
+      );
       router.push(buildPath('/'));
     } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Failed to create account');
+      notification.error(
+        'Could not create account',
+        error.response?.data?.message || 'Something went wrong while creating your account. Please try again.'
+      );
     } 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-[0.95fr_1.05fr]">
-        <motion.section
-          initial={{ opacity: 0, x: -24 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.4 }}
-          className="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" />
-              Join Hey Pharmacist
-            </span>
-            <h1 className="text-4xl font-bold leading-tight lg:text-5xl">
-              Create your wellness account
-            </h1>
-            <p className="max-w-xl text-white/80">
-              Unlock concierge-level pharmacy support, curated product recommendations, and smarter
-              refills designed for busy families.
-            </p>
-          </div>
-
-          <div className="space-y-4 rounded-3xl bg-white/10 p-6 backdrop-blur">
-            {BENEFITS.map((benefit) => (
-              <div key={benefit} className="flex items-center gap-3">
-                <CheckCircle2 className="h-5 w-5 text-white" />
-                <p className="text-sm text-white/85">{benefit}</p>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex items-center gap-6 text-sm text-white/80">
-            <span>Already part of the community?</span>
-            <Link
-              href={buildPath('/login')}
-              className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 font-semibold transition hover:bg-white/25"
-            >
-              Sign in
-            </Link>
-          </div>
-        </motion.section>
-
+    <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-lg space-y-10">
-            <div className="space-y-3">
-              <h2 className="text-3xl font-bold text-slate-900">Create an account</h2>
-              <p className="text-sm text-slate-500">
-                Start your personalized care journey with pharmacist-backed guidance.
+          <div className="w-full max-w-xl space-y-10 text-center">
+            <div className="space-y-2">
+              <UserPlus strokeWidth={2} className='h-16 w-16 mx-auto text-white rounded-full bg-primary m-2 mb-4 px-4' />
+              <h2 className="text-4xl text-secondary">Create Your Account</h2>
+              <p className="text-sm text-muted">Join Holmdel Pharmacy Care for convenient healthcare access
               </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"
+              className="text-start space-y-6 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50"
+              style={{
+              boxShadow: '0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A',
+            }}
             >
-              <div className="grid gap-4 md:grid-cols-2">
+              <div className="grid gap-4 md:grid-cols-2 text-start">
+               <div>
+                <h2 className="text-sm text-secondary mb-3">First name <span className='text-primary-500'>*</span></h2>
                 <Input
-                  label="First name"
                   placeholder="Alex"
                   {...register('firstName')}
                   error={errors.firstName?.message}
                 />
+                </div>
+                <div>
+                <h2 className="text-sm text-secondary mb-3">Last name <span className='text-primary-500'>*</span></h2>
                 <Input
-                  label="Last name"
                   placeholder="Morgan"
                   {...register('lastName')}
                   error={errors.lastName?.message}
                 />
+                </div>
               </div>
+              <div>
+              <h2 className="text-sm text-secondary mb-3">Email Address <span className='text-primary-500'>*</span></h2>
               <Input
                 type="email"
-                label="Email address"
                 placeholder="you@example.com"
                 {...register('email')}
                 error={errors.email?.message}
               />
+              </div>
+              <div>
+              <h2 className="text-sm text-secondary mb-3">Phone Number</h2>
               <Input
                 type="tel"
-                label="Phone number (optional)"
                 placeholder="+1 (555) 123-4567"
                 {...register('phone')}
                 error={errors.phone?.message}
               />
+              </div>
               <div className="relative">
+
+                <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}
@@ -186,9 +165,9 @@ export function RegisterScreen() {
                 </button>
               </div>
               <div className="relative">
+                <h2 className="text-sm text-secondary mb-3">Confirm Password <span className='text-primary-500'>*</span></h2>
                 <Input
                   type={showConfirmPassword ? 'text' : 'password'}
-                  label="Confirm password"
                   placeholder="••••••••"
                   {...register('confirmPassword')}
                   error={errors.confirmPassword?.message}
@@ -203,16 +182,16 @@ export function RegisterScreen() {
               </div>
 
               <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600">
-                <Shield className="mt-0.5 h-5 w-5 text-primary-500" />
+                <Shield strokeWidth={2} className="mt-0.5 h-8 w-8 text-primary" />
                 <span>
                   By creating an account, you agree to our{' '}
-                  <Link href={buildPath('/terms')} className="font-semibold text-primary-600 hover:text-primary-700">
+                  <Link href={buildPath('/terms')} className="font-semibold text-primary hover:opacity-70">
                     Terms of Service
                   </Link>{' '}
                   and{' '}
                   <Link
                     href={buildPath('/privacy')}
-                    className="font-semibold text-primary-600 hover:text-primary-700"
+                    className="font-semibold text-primary hover:opacity-70"
                   >
                     Privacy Policy
                   </Link>
@@ -220,18 +199,16 @@ export function RegisterScreen() {
                 </span>
               </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"
               >
-                <UserPlus className="h-5 w-5" />
-                Create my account
-              </Button>
+                {isSubmitting ? 'Creating account...' : 'Create my account'}
+              </button>
             </form>
 
-            <div className="rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600">
+            {/* <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">
                 <Heart className="mt-0.5 h-5 w-5 text-primary-500" />
                 <div>
@@ -242,10 +219,14 @@ export function RegisterScreen() {
                   </p>
                 </div>
               </div>
+            </div> */}
+
+            <div className="mt-4">
+              <p className="text-muted">Already have an account? <Link href={buildPath('/login')} className="font-medium text-primary transition hover:opacity-90">Sign in</Link></p>
             </div>
           </div>
         </motion.section>
       </div>
     </div>
   );
-}
+}

package/src/screens/SearchResultsScreen.tsx

@@ -136,6 +136,7 @@ export default function SearchPage() {
                     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                         {products.map((product) => (
                             <ProductCard
+                                key={product.id}
                                 product={product}
                                 isFavorited={isInWishlist(product.id)}
                                 onClickProduct={(p) => router.push(buildPath(`/products/${p.id}`))}
@@ -145,7 +146,7 @@ export default function SearchPage() {
                 ) : hasSearched ? (
                     <div className="text-center py-12">
                         <div className="text-gray-500 text-lg mb-4">
-                            No products found for "{searchQuery}"
+                            No products found for &quot;{searchQuery}&quot;
                         </div>
                         <p className="text-gray-500 mb-6">
                             Try different keywords or check out our{" "}