hey-pharmacist-ecommerce 1.1.28 → 1.1.29

package/src/screens/ProductDetailScreen.tsx

@@ -31,7 +31,6 @@ import { useAuth } from '@/providers/AuthProvider';
 import { formatDate, formatPrice } from '@/lib/utils/format';
 import { useNotification } from '@/providers/NotificationProvider';
 import { useRouter } from 'next/navigation';
-import { ProductVariantsApi } from '@/lib/Apis/apis/product-variants-api';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { ProductsApi, ProductVariant, ProductVariantInventoryStatusEnum } from '@/lib/Apis';
@@ -84,13 +83,13 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
     if (!productData) return null;
 
-    if (productData.productVariants?.length && selectedVariant) {
+    if (productData.variants?.length && selectedVariant) {
       return {
         ...productData,
         price: selectedVariant.finalPrice,
         inStock: selectedVariant.isActive,
         sku: selectedVariant.sku || productData.sku,
-        variantId: selectedVariant.id,
+        variantId: selectedVariant._id,
         variantName: selectedVariant.name
       };
     }
@@ -99,8 +98,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   }, [productData, selectedVariant, initialProductData]);
 
   const getVariantImages = () => {
-    if (selectedVariant?.productMedia?.length) {
-      return selectedVariant.productMedia.map((media: any) => ({
+    if (selectedVariant?.media?.length) {
+      return selectedVariant.media.map((media: any) => ({
         src: media.file,
         width: 800,
         height: 1000,
@@ -111,8 +110,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
     }
 
     // Fallback to product media if no variant media
-    if (product?.productMedia?.length) {
-      return product.productMedia.map((media: any) => ({
+    if (product?.media?.length) {
+      return product.media.map((media: any) => ({
         src: media.file,
         width: 800,
         height: 1000,
@@ -122,14 +121,14 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
       }));
     }
 
-    if (product?.images?.length) {
-      return product.images.map((image: string) => ({
-        src: image,
+    if (product?.media?.length) {
+      return product.media.map((media: any) => ({
+        src: media.file,
         width: 800,
         height: 1000,
         alt: product?.name || 'Product image',
-        url: image,
-        file: image,
+        url: media.file,
+        file: media.file,
         type: 'image' as const
       }));
     }
@@ -189,26 +188,19 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   }, [product?.productVariants]);
 
   useEffect(() => {
-    if (!product?.id) return;
+    if (!product?._id) return;
 
-    let isMounted = true;
     const fetchRelated = async () => {
       try {
-        const response = await new ProductsApi(AXIOS_CONFIG).getRelatedProducts(product.id, {
-          params: {
-            limit: 4
-          }
-        });
+        const response = await new ProductsApi(AXIOS_CONFIG).getRelatedProducts(product._id, 4);
+        console.log("response.data", response.data);
         setRelatedProducts(response.data || []);
       } catch (error: any) {
         console.error('Failed to fetch related products', error);
       }
     };
     fetchRelated();
-    return () => {
-      isMounted = false;
-    };
-  }, [product?.id]);
+  }, [product?._id]);
 
 
   const handleVariantSelect = async (variant: ProductVariant) => {
@@ -232,9 +224,9 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
     setIsAddingToCart(true);
     try {
       await addToCart(
-        product.id,
+        product._id,
         quantity,
-        selectedVariant.id
+        selectedVariant._id
       );
       notification.success(
         'Added to cart',
@@ -256,7 +248,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   // Initialize isFavorited based on whether the product is in the wishlist
   useEffect(() => {
     if (product) {
-      setIsFavorited(isInWishlist(product.id));
+      setIsFavorited(isInWishlist(product._id));
     }
   }, [product, isInWishlist]);
 
@@ -265,7 +257,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
     try {
       if (isFavorited) {
-        await removeFromWishlist(product.id);
+        await removeFromWishlist(product._id);
         notification.info(
           'Removed from saved items',
           `${product.name} was removed from your saved items.`
@@ -362,7 +354,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 <section className="rounded-3xl ">
                   <div className="space-y-6">
                     <motion.div
-                      key={selectedVariant?.id || 'default'}
+                      key={selectedVariant?._id || 'default'}
                       initial={{ opacity: 0.4, scale: 0.98 }}
                       animate={{ opacity: 1, scale: 1 }}
                       transition={{ duration: 0.35 }}
@@ -447,7 +439,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 {/* Category Path */}
                 <div className="mb-4">
                   <p className="font-['Poppins',sans-serif] text-[12px] text-primary uppercase tracking-wide font-medium mb-2">
-                    {product.brand} • {product.parentCategories?.[0]?.name || 'Uncategorized'}
+                    {product.brand} • {product.categoryIds?.[0]?.name || 'Uncategorized'}
                   </p>
                   <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3">
                     {selectedVariant?.name || product.name}
@@ -469,38 +461,37 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       {product.rating} ({product.reviewCount ? product.reviewCount : 0} reviews)
                     </span>
                   </div>
-
-                  <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
-                    <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
-                      ${variantPrice.toFixed(2)}
-                    </span>
-                    {variantComparePrice && variantComparePrice > variantPrice && (
-                      <>
-                        <span className="font-['Poppins',sans-serif] text-[24px] text-muted line-through">
-                          ${variantComparePrice.toFixed(2)}
-                        </span>
-                        <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
-                          <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
-                            Save ${formatPrice(variantComparePrice - variantPrice)}
+                  {selectedVariant && (
+                    <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
+                      <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
+                        ${variantPrice.toFixed(2)}
+                      </span>
+                      {variantComparePrice && variantComparePrice > variantPrice && (
+                        <>
+                          <span className="font-['Poppins',sans-serif] text-[24px] text-muted line-through">
+                            ${variantComparePrice.toFixed(2)}
                           </span>
-                        </div>
-                      </>
-                    )}
-                  </div>
-
+                          <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
+                            <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
+                              Save ${formatPrice(variantComparePrice - variantPrice)}
+                            </span>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  )}
                   {/* Stock Status */}
                   {selectedVariant && (
                     <div className="mb-6">
                       <div className="flex items-center gap-2 mb-2">
-                        {selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK ||
-                          selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.LOWSTOCK ? (
+                        {selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK ? (
                           <>
                             <div className="size-3 rounded-full bg-red-500" />
                             <span className="font-['Poppins',sans-serif] text-[13px] text-red-600 font-medium">
                               Out of Stock
                             </span>
                           </>
-                        ) : selectedVariant.inventoryCount <= 10 ? (
+                        ) : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.LOWSTOCK || selectedVariant.inventoryCount <= 10 ? (
                           <>
                             <div className="size-3 rounded-full bg-primary animate-pulse" />
                             <span className="font-['Poppins',sans-serif] text-[13px] text-primary font-medium">
@@ -518,7 +509,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                       </div>
                       <p className="font-['Poppins',sans-serif] text-[12px] text-muted">
-                        SKU: {selectedVariant?.sku}
+                        SKU: {selectedVariant?.sku || product?.sku}
                       </p>
                     </div>
                   )}
@@ -532,21 +523,21 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   )}
 
                   {/* Variant Selector with Images */}
-                  {product?.productVariants && product.productVariants.length > 0 && (
+                  {product?.variants && product.variants.length > 0 && (
                     <div className="mb-6">
                       <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
                         Select Variant
                       </h3>
                       <div className="flex flex-wrap gap-3">
-                        {product.productVariants.map((variant: ProductVariant) => {
-                          const isSelected = selectedVariant?.id === variant.id;
-                          const variantImage = variant.productMedia?.[0]?.file
-                            || product.productMedia?.[0]?.file
+                        {product.variants.map((variant: ProductVariant) => {
+                          const isSelected = selectedVariant?._id === variant._id;
+                          const variantImage = variant.media?.[0]?.file
+                            || product.media?.[0]?.file
                             || product.images?.[0]
                             || '/placeholder-product.jpg';
                           return (
                             <button
-                              key={variant.id}
+                              key={variant._id}
                               type="button"
                               onClick={() => handleVariantSelect(variant)}
                               className={`flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${isSelected
@@ -623,7 +614,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                     <button
                       className="flex-1 font-['Poppins',sans-serif] font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                       onClick={handleAddToCart}
-                      disabled={!selectedVariant || selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK}
+                      disabled={!selectedVariant || selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK || isAddingToCart}
                     >
                       {isAddingToCart ? (
                         <>
@@ -631,7 +622,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                           </svg>
-                          Loading...
+                          Adding...
                         </>
                       ) : (
                         <>
@@ -787,7 +778,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {relatedProducts.map(relatedProduct => (
 
                     <ProductCard
-                      key={relatedProduct.id}
+                      key={relatedProduct._id}
                       product={relatedProduct}
                       // viewMode="grid"
                       onClickProduct={(item) => {

package/src/screens/RegisterScreen.tsx

@@ -25,8 +25,8 @@ import { useBasePath } from '@/providers/BasePathProvider';
 
 const registerSchema = z
   .object({
-    firstName: z.string().min(2, 'First name is required'),
-    lastName: z.string().min(2, 'Last name is required'),
+    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'),
@@ -108,44 +108,44 @@ export function RegisterScreen() {
               onSubmit={handleSubmit(onSubmit)}
               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',
-            }}
+                boxShadow: '0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A',
+              }}
             >
               <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
-                  placeholder="Alex"
-                  {...register('firstName')}
-                  error={errors.firstName?.message}
-                />
+                <div>
+                  <h2 className="text-sm text-secondary mb-3">First name <span className='text-primary-500'>*</span></h2>
+                  <Input
+                    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
-                  placeholder="Morgan"
-                  {...register('lastName')}
-                  error={errors.lastName?.message}
-                />
+                  <h2 className="text-sm text-secondary mb-3">Last name <span className='text-primary-500'>*</span></h2>
+                  <Input
+                    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"
-                placeholder="you@example.com"
-                {...register('email')}
-                error={errors.email?.message}
-              />
+                <h2 className="text-sm text-secondary mb-3">Email Address <span className='text-primary-500'>*</span></h2>
+                <Input
+                  type="email"
+                  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"
-                placeholder="+1 (555) 123-4567"
-                {...register('phone')}
-                error={errors.phone?.message}
-              />
+                <h2 className="text-sm text-secondary mb-3">Phone Number</h2>
+                <Input
+                  type="tel"
+                  placeholder="+1 (555) 123-4567"
+                  {...register('phone')}
+                  error={errors.phone?.message}
+                />
               </div>
               <div className="relative">
 

package/src/screens/ResetPasswordScreen.tsx

@@ -0,0 +1,202 @@
+'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);
+      await authApi.resetPassword(data.newPassword, token);
+      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>
+  );
+}