hey-pharmacist-ecommerce 1.0.5 → 1.0.6

package/src/screens/RegisterScreen.tsx

@@ -5,28 +5,45 @@ import { motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { UserPlus, Eye, EyeOff } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+  CheckCircle2,
+  Eye,
+  EyeOff,
+  Heart,
+  HeartPulse,
+  Shield,
+  UserPlus,
+} from 'lucide-react';
 import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
 import { useAuth } from '@/providers/AuthProvider';
-import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
-import Link from 'next/link';
-
-const registerSchema = 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'),
-  phone: z.string().optional(),
-  password: z.string().min(6, 'Password must be at least 6 characters'),
-  confirmPassword: z.string(),
-}).refine((data) => data.password === data.confirmPassword, {
-  message: "Passwords don't match",
-  path: ['confirmPassword'],
-});
+import { CreateUserDtoCustomerTypeEnum, CreateUserDtoRoleEnum } from '@/lib/Apis/models';
+
+const registerSchema = 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'),
+    phone: z.string().optional(),
+    password: z.string().min(6, 'Password must be at least 6 characters'),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  });
 
 type RegisterFormData = z.infer<typeof registerSchema>;
 
+const BENEFITS = [
+  'Personalized care plans from licensed pharmacists',
+  'Express delivery with cold-chain handling',
+  'Automatic refills and refill reminders',
+];
+
 export function RegisterScreen() {
   const router = useRouter();
   const { register: registerUser } = useAuth();
@@ -46,7 +63,12 @@ export function RegisterScreen() {
     setIsSubmitting(true);
     try {
       const { confirmPassword, ...registerData } = data;
-      await registerUser(registerData);
+      await registerUser({
+        ...registerData,
+        addresses: [],
+        customerType: CreateUserDtoCustomerTypeEnum.Regular,
+        role: CreateUserDtoRoleEnum.User,
+      });
       toast.success('Account created successfully!');
       router.push('/');
     } catch (error: any) {
@@ -57,144 +79,171 @@ export function RegisterScreen() {
   };
 
   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">
-              <UserPlus className="w-8 h-8 text-primary-600" />
-            </div>
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">Create Account</h1>
-            <p className="text-gray-600">Join us and start shopping</p>
+    <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-[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" />
+              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>
 
-          {/* Form */}
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-            <div className="grid grid-cols-2 gap-4">
-              <Input
-                label="First Name"
-                placeholder="John"
-                {...register('firstName')}
-                error={errors.firstName?.message}
-              />
-              <Input
-                label="Last Name"
-                placeholder="Doe"
-                {...register('lastName')}
-                error={errors.lastName?.message}
-              />
-            </div>
-
-            <Input
-              type="email"
-              label="Email Address"
-              placeholder="you@example.com"
-              {...register('email')}
-              error={errors.email?.message}
-            />
+          <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>
 
-            <Input
-              type="tel"
-              label="Phone Number (Optional)"
-              placeholder="+1 (555) 000-0000"
-              {...register('phone')}
-              error={errors.phone?.message}
-            />
+          <div className="flex items-center gap-6 text-sm text-white/80">
+            <span>Already part of the community?</span>
+            <Link
+              href="/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>
+
+        <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.
+              </p>
+            </div>
 
-            <div className="relative">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="space-y-6 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-50"
+            >
+              <div className="grid gap-4 md:grid-cols-2">
+                <Input
+                  label="First name"
+                  placeholder="Alex"
+                  {...register('firstName')}
+                  error={errors.firstName?.message}
+                />
+                <Input
+                  label="Last name"
+                  placeholder="Morgan"
+                  {...register('lastName')}
+                  error={errors.lastName?.message}
+                />
+              </div>
               <Input
-                type={showPassword ? 'text' : 'password'}
-                label="Password"
-                placeholder="••••••••"
-                {...register('password')}
-                error={errors.password?.message}
+                type="email"
+                label="Email address"
+                placeholder="you@example.com"
+                {...register('email')}
+                error={errors.email?.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>
-
-            <div className="relative">
               <Input
-                type={showConfirmPassword ? 'text' : 'password'}
-                label="Confirm Password"
-                placeholder="••••••••"
-                {...register('confirmPassword')}
-                error={errors.confirmPassword?.message}
+                type="tel"
+                label="Phone number (optional)"
+                placeholder="+1 (555) 123-4567"
+                {...register('phone')}
+                error={errors.phone?.message}
               />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-[42px] text-gray-500 hover:text-gray-700"
+              <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>
+              <div className="relative">
+                <Input
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  label="Confirm password"
+                  placeholder="••••••••"
+                  {...register('confirmPassword')}
+                  error={errors.confirmPassword?.message}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword((prev) => !prev)}
+                  className="absolute right-3 top-[42px] text-slate-400 transition hover:text-slate-600"
+                >
+                  {showConfirmPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                </button>
+              </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" />
+                <span>
+                  By creating an account, you agree to our{' '}
+                  <Link href="/terms" className="font-semibold text-primary-600 hover:text-primary-700">
+                    Terms of Service
+                  </Link>{' '}
+                  and{' '}
+                  <Link
+                    href="/privacy"
+                    className="font-semibold text-primary-600 hover:text-primary-700"
+                  >
+                    Privacy Policy
+                  </Link>
+                  . We protect your information with bank-level encryption.
+                </span>
+              </div>
+
+              <Button
+                type="submit"
+                size="lg"
+                isLoading={isSubmitting}
+                className="w-full"
               >
-                {showConfirmPassword ? (
-                  <EyeOff className="w-5 h-5" />
-                ) : (
-                  <Eye className="w-5 h-5" />
-                )}
-              </button>
-            </div>
-
-            <div className="flex items-start gap-2">
-              <input
-                type="checkbox"
-                required
-                className="w-4 h-4 text-primary-600 rounded mt-1"
-              />
-              <label className="text-sm text-gray-700">
-                I agree to the{' '}
-                <Link href="/terms" className="text-primary-600 hover:text-primary-700">
-                  Terms of Service
-                </Link>{' '}
-                and{' '}
-                <Link href="/privacy" className="text-primary-600 hover:text-primary-700">
-                  Privacy Policy
-                </Link>
-              </label>
-            </div>
-
-            <Button
-              type="submit"
-              size="lg"
-              isLoading={isSubmitting}
-              className="w-full"
-            >
-              Create Account
-            </Button>
-          </form>
-
-          {/* 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">Already have an account?</span>
+                <UserPlus className="h-5 w-5" />
+                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="flex items-start gap-3">
+                <Heart className="mt-0.5 h-5 w-5 text-primary-500" />
+                <div>
+                  <p className="font-semibold text-slate-800">Members love us</p>
+                  <p>
+                    92% of patients report improved adherence after receiving pharmacist touchpoints
+                    through their Hey Pharmacist account.
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
-
-          {/* Login Link */}
-          <Link href="/login">
-            <Button variant="outline" size="lg" className="w-full">
-              Sign In
-            </Button>
-          </Link>
-        </div>
-      </motion.div>
+        </motion.section>
+      </div>
     </div>
   );
 }
-

package/src/screens/SearchResultsScreen.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { ProductsApi } from '@/lib/Apis';
+import { ExtendedProductDTO } from '@/lib/Apis';
+import { ProductCard } from '@/components/ProductCard';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { Input } from '@/components/ui/Input';
+import { Search, X } from 'lucide-react';
+import Link from 'next/link';
+import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
+import { useWishlist } from '@/providers/WishlistProvider';
+import { useRouter } from 'next/navigation';
+
+export default function SearchPage() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const searchQuery = searchParams.get('q') || '';
+    const [products, setProducts] = useState<ExtendedProductDTO[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [searchInput, setSearchInput] = useState(searchQuery);
+    const [hasSearched, setHasSearched] = useState(false);
+    const { isInWishlist } = useWishlist();
+
+    useEffect(() => {
+        const fetchSearchResults = async () => {
+            if (!searchQuery.trim()) {
+                setProducts([]);
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                console.log(searchQuery);
+                const api = new ProductsApi(AXIOS_CONFIG);
+                const response = await api.getAllProductsForStore(
+                    searchQuery,
+                    undefined, // productType
+                    undefined, // categoryId
+                    undefined, // maxPrice
+                    undefined, // minPrice
+                    undefined, // brandFilter
+                    'in-stock', // availability
+                    'relevance', // sort
+                    true, // includeNoVariantProducts
+                    true, // isActive
+                    20, // limit
+                    1 // page
+                );
+
+                if (response.data?.data) {
+                    const transformedProducts = response.data.data.map((item: ExtendedProductDTO) => ({
+                        ...item,
+                        id: item._id || '',
+                    }));
+
+                    setProducts(transformedProducts);
+                } else {
+                    setProducts([]);
+                }
+                setHasSearched(true);
+            } catch (error) {
+                console.error('Error fetching search results:', error);
+                setProducts([]);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchSearchResults();
+    }, [searchQuery]);
+
+    const handleSearch = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (searchInput.trim()) {
+            window.location.href = `/search?q=${encodeURIComponent(searchInput.trim())}`;
+        }
+    };
+
+    const clearSearch = () => {
+        setSearchInput('');
+    };
+
+    return (
+        <div className="container mx-auto px-4 py-8">
+            <div className="max-w-2xl mx-auto mb-8">
+                <form onSubmit={handleSearch} className="relative">
+                    <div className="relative">
+                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+                        <Input
+                            type="text"
+                            value={searchInput}
+                            onChange={(e) => setSearchInput(e.target.value)}
+                            placeholder="Search for products..."
+                            className="pl-10 pr-10 py-6 text-base rounded-lg border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                        />
+                        {searchInput && (
+                            <button
+                                type="button"
+                                onClick={clearSearch}
+                                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                            >
+                                <X className="h-5 w-5" />
+                            </button>
+                        )}
+                    </div>
+                    <button
+                        type="submit"
+                        className="mt-4 w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+                    >
+                        Search
+                    </button>
+                </form>
+            </div>
+
+            <div>
+                <h1 className="text-2xl font-bold text-gray-900 mb-6">
+                    {searchQuery ? `Search results for "${searchQuery}"` : 'Search Products'}
+                </h1>
+
+                {isLoading ? (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                        {[...Array(8)].map((_, i) => (
+                            <div key={i} className="space-y-3">
+                                <Skeleton className="h-48 w-full rounded-lg" />
+                                <Skeleton className="h-4 w-3/4" />
+                                <Skeleton className="h-4 w-1/2" />
+                            </div>
+                        ))}
+                    </div>
+                ) : products.length > 0 ? (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                        {products.map((product) => (
+                            <ProductCard
+                                product={product}
+                                isFavorited={isInWishlist(product.id)}
+                                onClickProduct={(p) => router.push(`/products/${p.id}`)}
+                            />
+                        ))}
+                    </div>
+                ) : hasSearched ? (
+                    <div className="text-center py-12">
+                        <div className="text-gray-500 text-lg mb-4">
+                            No products found for "{searchQuery}"
+                        </div>
+                        <p className="text-gray-500 mb-6">
+                            Try different keywords or check out our{" "}
+                            <Link href="/shop" className="text-primary-600 hover:underline ml-1 font-medium">
+                                featured products
+                            </Link>
+                        </p>
+                    </div>
+                ) : (
+                    <div className="text-center py-12">
+                        <p className="text-gray-500">
+                            Enter a search term to find products
+                        </p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}