hey-pharmacist-ecommerce 1.0.5 → 1.0.6

package/src/screens/LoginScreen.tsx

@@ -5,16 +5,24 @@ import { motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { Lock, Mail, Eye, EyeOff } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import {
+  ArrowRight,
+  Eye,
+  EyeOff,
+  HeartPulse,
+  Lock,
+  ShieldCheck,
+  Sparkles,
+} from 'lucide-react';
 import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
 import { useAuth } from '@/providers/AuthProvider';
-import { useRouter, useSearchParams } from 'next/navigation';
 import { toast } from 'sonner';
-import Link from 'next/link';
 
 const loginSchema = z.object({
-  email: z.string().email('Invalid email address'),
+  email: z.string().email('Enter a valid email address'),
   password: z.string().min(6, 'Password must be at least 6 characters'),
 });
 
@@ -50,100 +58,137 @@ export function LoginScreen() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-600 via-primary-700 to-secondary-600 flex items-center justify-center p-4">
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="w-full max-w-md"
-      >
-        <div className="bg-white rounded-3xl shadow-2xl p-8">
-          {/* Header */}
-          <div className="text-center mb-8">
-            <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <Lock className="w-8 h-8 text-primary-600" />
-            </div>
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">Welcome Back</h1>
-            <p className="text-gray-600">Sign in to your account to continue</p>
+    <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-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] 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>
 
-          {/* Form */}
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-            <div>
-              <Input
-                type="email"
-                label="Email Address"
-                placeholder="you@example.com"
-                {...register('email')}
-                error={errors.email?.message}
-              />
+          <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="relative">
-              <Input
-                type={showPassword ? 'text' : 'password'}
-                label="Password"
-                placeholder="••••••••"
-                {...register('password')}
-                error={errors.password?.message}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-[42px] text-gray-500 hover:text-gray-700"
-              >
-                {showPassword ? (
-                  <EyeOff className="w-5 h-5" />
-                ) : (
-                  <Eye className="w-5 h-5" />
-                )}
-              </button>
+          <div className="flex items-center gap-6 text-sm text-white/80">
+            <span>Need an account?</span>
+            <Link
+              href="/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>
+
+        <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="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.
+              </p>
             </div>
 
-            <div className="flex items-center justify-between">
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  className="w-4 h-4 text-primary-600 rounded"
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50">
+              <div>
+                <Input
+                  type="email"
+                  label="Email address"
+                  placeholder="you@example.com"
+                  {...register('email')}
+                  error={errors.email?.message}
                 />
-                <span className="text-sm text-gray-700">Remember me</span>
-              </label>
-              <Link
-                href="/forgot-password"
-                className="text-sm text-primary-600 hover:text-primary-700 font-medium"
-              >
-                Forgot password?
-              </Link>
-            </div>
+              </div>
+              <div className="relative">
+                <Input
+                  type={showPassword ? 'text' : 'password'}
+                  label="Password"
+                  placeholder="••••••••"
+                  {...register('password')}
+                  error={errors.password?.message}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                  className="absolute right-3 top-[42px] text-slate-400 transition hover:text-slate-600"
+                >
+                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                </button>
+              </div>
 
-            <Button
-              type="submit"
-              size="lg"
-              isLoading={isSubmitting}
-              className="w-full"
-            >
-              Sign In
-            </Button>
-          </form>
+              <div className="flex items-center justify-between text-sm">
+                <label className="flex items-center gap-2 text-slate-600">
+                  <input
+                    type="checkbox"
+                    className="h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  Remember me
+                </label>
+                <Link
+                  href="/forgot-password"
+                  className="font-medium text-primary-600 transition hover:text-primary-700"
+                >
+                  Forgot password?
+                </Link>
+              </div>
 
-          {/* Divider */}
-          <div className="relative my-8">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-gray-200"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="px-4 bg-white text-gray-500">New to our store?</span>
+              <Button
+                type="submit"
+                size="lg"
+                isLoading={isSubmitting}
+                className="w-full"
+              >
+                Sign in securely
+              </Button>
+            </form>
+
+            <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>
+                  <p className="font-semibold text-slate-800">Secure by design</p>
+                  <p>
+                    Encrypted sessions, multi-factor ready, and privacy-first policies keep your
+                    personal data safe.
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
-
-          {/* Register Link */}
-          <Link href="/register">
-            <Button variant="outline" size="lg" className="w-full">
-              Create an Account
-            </Button>
-          </Link>
-        </div>
-      </motion.div>
+        </motion.section>
+      </div>
     </div>
   );
 }
-

package/src/screens/NewAddressScreen.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@/components/ui/Button';
+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';
+
+export default function NewAddressPage() {
+    const router = useRouter();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors }
+    } = useForm<AddressFormData>({
+        resolver: zodResolver(addressSchema),
+        defaultValues: {
+            country: 'United States'
+        }
+    });
+
+    const onSubmit = async (data: AddressFormData) => {
+        setIsSubmitting(true);
+        try {
+            console.log('Submitting address data:', data);
+            const api = new AddressesApi(AXIOS_CONFIG);
+            const response = await api.createAddressForUser({
+                name: data.name,
+                street1: data.street1,
+                street2: data.street2,
+                city: data.city,
+                state: data.state,
+                zip: data.zip,
+                country: data.country,
+                phone: data.phone,
+            });
+
+            toast.success('Address added successfully');
+            router.back();
+
+        } catch (error: any) {
+            let errorMessage = 'An unexpected error occurred';
+
+            // Handle specific API errors
+            if (error.response?.data?.message) {
+                errorMessage = error.response.data.message;
+            } else if (error.message) {
+                errorMessage = error.message;
+            }
+
+            // Handle validation errors
+            if (error.response?.status === 400) {
+                errorMessage = error.response.data?.message || 'Please check your address details and try again';
+            }
+
+            // Handle network errors
+            if (error.message === 'Network Error') {
+                errorMessage = 'Unable to connect to the server. Please check your internet connection.';
+            }
+
+            toast.error('Unable to save address', {
+                description: errorMessage,
+                duration: 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
+                });
+            }
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-slate-50">
+            <div className="relative bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+                <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-8">
+                    <button
+                        onClick={() => router.back()}
+                        className="inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm font-medium text-white hover:bg-white/20 transition-colors"
+                    >
+                        <ArrowLeft className="h-4 w-4" />
+                        Back
+                    </button>
+                    <div className="mt-6 flex items-center gap-4">
+                        <div className="rounded-full bg-white/10 p-3">
+                            <MapPin className="h-6 w-6" />
+                        </div>
+                        <div>
+                            <h1 className="text-3xl font-bold">Add New Address</h1>
+                            <p className="mt-1 text-white/75">
+                                Enter your delivery address details below.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="container mx-auto px-4 py-8">
+                <div className="max-w-2xl mx-auto">
+                    <div className="bg-white rounded-2xl shadow-xl p-6">
+                        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <Input
+                                    label="Full name"
+                                    placeholder="John Doe"
+                                    {...register('name')}
+                                    error={errors.name?.message}
+                                />
+                                <Input
+                                    label="Phone number"
+                                    placeholder="+1 (555) 123-4567"
+                                    {...register('phone')}
+                                    error={errors.phone?.message}
+                                />
+                                <div className="md:col-span-2">
+                                    <Input
+                                        label="Address line 1"
+                                        placeholder="123 Main St"
+                                        {...register('street1')}
+                                        error={errors.street1?.message}
+                                    />
+                                </div>
+                                <div className="md:col-span-2">
+                                    <Input
+                                        label="Address line 2 (optional)"
+                                        placeholder="Apt 4B"
+                                        {...register('street2')}
+                                    />
+                                </div>
+                                <Input
+                                    label="City"
+                                    placeholder="New York"
+                                    {...register('city')}
+                                    error={errors.city?.message}
+                                />
+                                <Input
+                                    label="State"
+                                    placeholder="NY"
+                                    {...register('state')}
+                                    error={errors.state?.message}
+                                />
+                                <Input
+                                    label="ZIP code"
+                                    placeholder="10001"
+                                    {...register('zip')}
+                                    error={errors.zip?.message}
+                                />
+                                <Input
+                                    label="Country"
+                                    placeholder="United States"
+                                    {...register('country')}
+                                    error={errors.country?.message}
+                                />
+                            </div>
+                            <div className="flex justify-end gap-4">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => router.back()}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button type="submit" disabled={isSubmitting}>
+                                    {isSubmitting ? 'Adding Address...' : 'Add Address'}
+                                </Button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}