hey-pharmacist-ecommerce 1.1.28 → 1.1.30

package/src/screens/ResetPasswordScreen.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useRouter, useParams } from 'next/navigation';
+import Link from 'next/link';
+import { Eye, EyeOff, Lock, ShieldCheck } from 'lucide-react';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { AuthApi } from '@/lib/Apis/apis/auth-api';
+import { AXIOS_CONFIG } from '@/lib/Apis/sharedConfig';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+const resetPasswordSchema = z
+  .object({
+    newPassword: z.string().min(8, 'Password must be at least 8 characters'),
+    confirmPassword: z.string().min(8, 'Confirm your new password'),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    path: ['confirmPassword'],
+    message: 'Passwords do not match',
+  });
+
+type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+
+export function ResetPasswordScreen() {
+  const router = useRouter();
+  const { buildPath } = useBasePath();
+  const params = useParams();
+  const token = params?.token as string | undefined;
+  const storeId = params?.storeId as string | undefined;
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(
+    null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ResetPasswordFormData>({
+    resolver: zodResolver(resetPasswordSchema),
+  });
+
+  useEffect(() => {
+    if (!token) {
+      setStatus({
+        type: 'error',
+        message: 'Invalid or missing reset token. Please request a new password reset link.',
+      });
+    }
+  }, [token]);
+
+  const onSubmit = async (data: ResetPasswordFormData) => {
+    if (!token) {
+      setStatus({
+        type: 'error',
+        message: 'Reset token is missing. Please use the link from your email.',
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+    setStatus(null);
+    try {
+      const authApi = new AuthApi(AXIOS_CONFIG);
+      if (!storeId) {
+        setStatus({
+          type: 'error',
+          message: 'Store ID is missing. Please use the link from your email.',
+        });
+        return;
+      }
+      await authApi.resetPassword(data.newPassword, token, storeId);
+      setStatus({
+        type: 'success',
+        message: 'Password reset successfully! Redirecting to login...',
+      });
+      setTimeout(() => router.push(buildPath('/login')), 2000);
+    } catch (error: any) {
+      setStatus({
+        type: 'error',
+        message:
+          error?.response?.data?.message ||
+          'Unable to reset password. The link may have expired.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-linear-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 text-center">
+            <div className="space-y-2">
+              <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">Reset Password</h2>
+              <p className="text-sm text-muted">
+                Enter your new password below to reset your account password.
+              </p>
+            </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="relative text-start text-secondary">
+                <h2 className="text-sm text-secondary mb-3">
+                  New Password <span className="text-primary-500">*</span>
+                </h2>
+                <Input
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="Enter new password (min. 8 characters)"
+                  {...register('newPassword')}
+                  error={errors.newPassword?.message}
+                  className="text-secondary"
+                />
+                <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 text-start text-secondary">
+                <h2 className="text-sm text-secondary mb-3">
+                  Confirm Password <span className="text-primary-500">*</span>
+                </h2>
+                <Input
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  placeholder="Re-enter new password"
+                  {...register('confirmPassword')}
+                  error={errors.confirmPassword?.message}
+                  className="text-secondary"
+                />
+                <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>
+
+              <button
+                type="submit"
+                disabled={isSubmitting || !token}
+                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"
+              >
+                {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
+              </button>
+
+              <div className="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+                <ShieldCheck className="h-4 w-4 text-primary-600" />
+                Use a strong password that you haven't used elsewhere.
+              </div>
+
+              <div className="pt-4 border-t border-slate-200">
+                <Link
+                  href={buildPath('/login')}
+                  className="text-sm font-medium text-primary transition hover:opacity-80"
+                >
+                  Back to login
+                </Link>
+              </div>
+            </form>
+          </div>
+        </motion.section>
+      </div>
+    </div>
+  );
+}

package/src/screens/SearchResultsScreen.tsx

@@ -1,87 +1,204 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { ProductsApi } from '@/lib/Apis';
-import { ExtendedProductDTO } from '@/lib/Apis';
+import { Product } 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 { Search, X, TrendingUp, Clock } 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';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export default function SearchPage() {
     const router = useRouter();
     const { buildPath } = useBasePath();
     const searchParams = useSearchParams();
     const searchQuery = searchParams.get('q') || '';
-    const [products, setProducts] = useState<ExtendedProductDTO[]>([]);
+    const [products, setProducts] = useState<Product[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [searchInput, setSearchInput] = useState(searchQuery);
     const [hasSearched, setHasSearched] = useState(false);
     const { isInWishlist } = useWishlist();
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [recentSearches, setRecentSearches] = useState<string[]>([]);
+
+    // Load recent searches from localStorage
+    useEffect(() => {
+        const stored = localStorage.getItem('recent_searches');
+        if (stored) {
+            try {
+                setRecentSearches(JSON.parse(stored));
+            } catch (e) {
+                console.error('Failed to parse recent searches', e);
+            }
+        }
+    }, []);
+
+    // Save search query to recent searches
+    const saveRecentSearch = useCallback((query: string) => {
+        if (!query.trim()) return;
+
+        setRecentSearches((prev) => {
+            const updated = [query, ...prev.filter(s => s !== query)].slice(0, 5);
+            localStorage.setItem('recent_searches', JSON.stringify(updated));
+            return updated;
+        });
+    }, []);
+
+    // Generate suggestions based on product data
+    const generateSuggestions = useMemo(() => {
+        if (!searchInput.trim() || searchInput.length < 2) {
+            return [];
+        }
+
+        const query = searchInput.toLowerCase().trim();
+        const suggestionSet = new Set<string>();
+
+        // Extract suggestions from product names, brands, categories, and tags
+        products.forEach((product) => {
+            // Product name matches
+            if (product.name?.toLowerCase().includes(query)) {
+                suggestionSet.add(product.name);
+            }
+
+            // Brand matches
+            if (product.brand?.toLowerCase().includes(query)) {
+                suggestionSet.add(product.brand);
+            }
+
+            // Tag matches
+            product.tags?.forEach((tag) => {
+                if (tag.toLowerCase().includes(query)) {
+                    suggestionSet.add(tag);
+                }
+            });
+        });
+
+        return Array.from(suggestionSet).slice(0, 5);
+    }, [searchInput, products]);
+
+    useEffect(() => {
+        setSuggestions(generateSuggestions);
+    }, [generateSuggestions]);
+
+    // Sanitize search input to handle special characters
+    const sanitizeSearchInput = useCallback((input: string): string => {
+        // Remove leading/trailing whitespace
+        let sanitized = input.trim();
+
+        // Replace multiple spaces with single space
+        sanitized = sanitized.replace(/\s+/g, ' ');
+
+        // Escape special regex characters for safe processing
+        // but keep the original input for search API
+        return sanitized;
+    }, []);
 
     useEffect(() => {
         const fetchSearchResults = async () => {
-            if (!searchQuery.trim()) {
+            const sanitizedQuery = sanitizeSearchInput(searchQuery);
+
+            if (!sanitizedQuery) {
                 setProducts([]);
                 setIsLoading(false);
+                setHasSearched(false);
                 return;
             }
 
             try {
                 setIsLoading(true);
                 const api = new ProductsApi(AXIOS_CONFIG);
-                const response = await api.getAllProductsForStore(
-                    searchQuery,
-                    undefined, // productType
-                    undefined, // categoryId
+
+                // Search for products using getAllProducts
+                let response = await api.getAllProducts(
+                    sanitizedQuery, // searchTerm
                     undefined, // maxPrice
                     undefined, // minPrice
                     undefined, // brandFilter
-                    'in-stock', // availability
+                    undefined, // availability
                     'relevance', // sort
-                    true, // includeNoVariantProducts
+                    undefined, // subCategoryId
+                    undefined, // categoryId
                     true, // isActive
                     20, // limit
                     1 // page
                 );
 
+                console.log('Search API Response:', {
+                    query: sanitizedQuery,
+                    status: response.status,
+                    dataLength: response.data?.data?.length,
+                    totalItems: response.data?.totalItems
+                });
+
                 if (response.data?.data) {
-                    const transformedProducts = response.data.data.map((item: ExtendedProductDTO) => ({
+                    const transformedProducts = response.data.data.map((item: Product) => ({
                         ...item,
                         id: item._id || '',
                     }));
 
                     setProducts(transformedProducts);
+
+                    // Save to recent searches if results found
+                    if (transformedProducts.length > 0) {
+                        saveRecentSearch(sanitizedQuery);
+                    }
                 } else {
                     setProducts([]);
                 }
                 setHasSearched(true);
             } catch (error) {
                 console.error('Error fetching search results:', error);
+                if (error instanceof Error) {
+                    console.error('Error details:', error.message);
+                }
                 setProducts([]);
+                setHasSearched(true);
             } finally {
                 setIsLoading(false);
             }
         };
 
         fetchSearchResults();
-    }, [searchQuery]);
+    }, [searchQuery, sanitizeSearchInput, saveRecentSearch]);
 
     const handleSearch = (e: React.FormEvent) => {
         e.preventDefault();
-        if (searchInput.trim()) {
-            window.location.href = `/search?q=${encodeURIComponent(searchInput.trim())}`;
+        const sanitized = sanitizeSearchInput(searchInput);
+        if (sanitized) {
+            setShowSuggestions(false);
+            router.push(buildPath(`/search?q=${encodeURIComponent(sanitized)}`));
         }
     };
 
     const clearSearch = () => {
         setSearchInput('');
+        setShowSuggestions(false);
+    };
+
+    const handleSuggestionClick = (suggestion: string) => {
+        setSearchInput(suggestion);
+        setShowSuggestions(false);
+        router.push(buildPath(`/search?q=${encodeURIComponent(suggestion)}`));
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setSearchInput(value);
+        setShowSuggestions(value.trim().length >= 2);
+    };
+
+    const handleInputFocus = () => {
+        if (searchInput.trim().length >= 2) {
+            setShowSuggestions(true);
+        }
     };
 
     return (
@@ -93,9 +210,12 @@ export default function SearchPage() {
                         <Input
                             type="text"
                             value={searchInput}
-                            onChange={(e) => setSearchInput(e.target.value)}
+                            onChange={handleInputChange}
+                            onFocus={handleInputFocus}
+                            onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
                             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"
+                            autoComplete="off"
                         />
                         {searchInput && (
                             <button
@@ -106,10 +226,70 @@ export default function SearchPage() {
                                 <X className="h-5 w-5" />
                             </button>
                         )}
+
+                        {/* Search Suggestions Dropdown */}
+                        <AnimatePresence>
+                            {showSuggestions && (suggestions.length > 0 || recentSearches.length > 0) && (
+                                <motion.div
+                                    initial={{ opacity: 0, y: -10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: -10 }}
+                                    transition={{ duration: 0.2 }}
+                                    className="absolute z-50 w-full mt-2 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden"
+                                >
+                                    {/* Real-time Suggestions */}
+                                    {suggestions.length > 0 && (
+                                        <div className="p-2">
+                                            <div className="px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
+                                                <TrendingUp className="h-3 w-3" />
+                                                Suggestions
+                                            </div>
+                                            {suggestions.map((suggestion, index) => (
+                                                <button
+                                                    key={index}
+                                                    type="button"
+                                                    onClick={() => handleSuggestionClick(suggestion)}
+                                                    className="w-full text-left px-3 py-2.5 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2 group"
+                                                >
+                                                    <Search className="h-4 w-4 text-gray-400 group-hover:text-primary-500" />
+                                                    <span className="text-sm text-gray-700 group-hover:text-gray-900">
+                                                        {suggestion}
+                                                    </span>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    )}
+
+                                    {/* Recent Searches */}
+                                    {recentSearches.length > 0 && !searchInput.trim() && (
+                                        <div className="p-2 border-t border-gray-100">
+                                            <div className="px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
+                                                <Clock className="h-3 w-3" />
+                                                Recent Searches
+                                            </div>
+                                            {recentSearches.map((search, index) => (
+                                                <button
+                                                    key={index}
+                                                    type="button"
+                                                    onClick={() => handleSuggestionClick(search)}
+                                                    className="w-full text-left px-3 py-2.5 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2 group"
+                                                >
+                                                    <Clock className="h-4 w-4 text-gray-400 group-hover:text-primary-500" />
+                                                    <span className="text-sm text-gray-700 group-hover:text-gray-900">
+                                                        {search}
+                                                    </span>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    )}
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
                     </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"
+                        className="mt-4 w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                        disabled={!searchInput.trim()}
                     >
                         Search
                     </button>
@@ -144,21 +324,79 @@ export default function SearchPage() {
                     </div>
                 ) : hasSearched ? (
                     <div className="text-center py-12">
-                        <div className="text-gray-500 text-lg mb-4">
-                            No products found for &quot;{searchQuery}&quot;
+                        <div className="mb-6">
+                            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                                <Search className="h-8 w-8 text-gray-400" />
+                            </div>
+                            <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                                No products found
+                            </h3>
+                            <p className="text-gray-500 text-base mb-1">
+                                We couldn&apos;t find any products matching &quot;{searchQuery}&quot;
+                            </p>
+                            <button
+                                onClick={clearSearch}
+                                className="px-6 py-2.5 mt-4 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium border border-gray-300 bg-white cursor-pointer"
+                            >
+                                Clear Search
+                            </button>
                         </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
+
+                        <div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
+
+                            <Link
+                                href={buildPath('/shop')}
+                                className="px-6 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
+                            >
+                                Browse All Products
                             </Link>
-                        </p>
+                        </div>
+
+                        {recentSearches.length > 0 && (
+                            <div className="mt-8 pt-8 border-t border-gray-200">
+                                <p className="text-sm font-medium text-gray-700 mb-3">Recent Searches:</p>
+                                <div className="flex flex-wrap gap-2 justify-center">
+                                    {recentSearches.map((search, index) => (
+                                        <button
+                                            key={index}
+                                            onClick={() => handleSuggestionClick(search)}
+                                            className="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors"
+                                        >
+                                            {search}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
                     </div>
                 ) : (
                     <div className="text-center py-12">
-                        <p className="text-gray-500">
-                            Enter a search term to find products
+                        <div className="w-16 h-16 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <Search className="h-8 w-8 text-primary-500" />
+                        </div>
+                        <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                            Start Searching
+                        </h3>
+                        <p className="text-gray-500 mb-6">
+                            Enter a search term above to find products
                         </p>
+                        {recentSearches.length > 0 && (
+                            <div className="max-w-md mx-auto">
+                                <p className="text-sm font-medium text-gray-700 mb-3">Recent Searches:</p>
+                                <div className="flex flex-wrap gap-2 justify-center">
+                                    {recentSearches.map((search, index) => (
+                                        <button
+                                            key={index}
+                                            onClick={() => handleSuggestionClick(search)}
+                                            className="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors flex items-center gap-2"
+                                        >
+                                            <Clock className="h-3 w-3" />
+                                            {search}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
                     </div>
                 )}
             </div>