hey-pharmacist-ecommerce 1.1.20 → 1.1.22

package/src/screens/ProductDetailScreen.tsx

@@ -27,6 +27,7 @@ import { Badge } from '@/components/ui/Badge';
 import { ProductCard } from '@/components/ProductCard';
 import { useProduct } from '@/hooks/useProducts';
 import { useCart } from '@/providers/CartProvider';
+import { useAuth } from '@/providers/AuthProvider';
 import { formatDate, formatPrice } from '@/lib/utils/format';
 import { useNotification } from '@/providers/NotificationProvider';
 import { useRouter } from 'next/navigation';
@@ -58,6 +59,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   const { buildPath } = useBasePath();
   const { product: productData, isLoading } = useProduct(productId);
   const { addToCart } = useCart();
+  const { isAuthenticated } = useAuth();
   const notification = useNotification();
 
   // State declarations
@@ -219,6 +221,15 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   };
 
   const handleAddToCart = async () => {
+    if (!isAuthenticated) {
+      notification.error(
+        'Sign-in required',
+        'Please sign in to add items to your cart.'
+      );
+      router.push(buildPath(`/login?redirect=${encodeURIComponent(window.location.pathname + window.location.search)}`));
+      return;
+    }
+
     if (!product || !selectedVariant) return;
 
     setIsAddingToCart(true);
@@ -414,8 +425,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                             type="button"
                             onClick={() => setActiveImageIndex(index)}
                             className={`relative aspect-square overflow-hidden rounded-lg border-2 transition-all ${activeImageIndex === index
-                                ? 'border-primary/50 ring-2 ring-primary/80 ring-offset-2 shadow-md'
-                                : 'border-slate-200 hover:border-primary/50'
+                              ? 'border-primary/50 ring-2 ring-primary/80 ring-offset-2 shadow-md'
+                              : 'border-slate-200 hover:border-primary/50'
                               }`}
                           >
                             <Image
@@ -436,50 +447,49 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
 
               <aside className="space-y-6 lg:sticky lg:top-24">
-                  {/* Category Path */}
-                  <div className="mb-4">
+                {/* 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}
                   </p>
                   <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3">
                     {selectedVariant?.name || product.name}
                   </h1>
-                    {/* Rating */}
-                <div className="flex items-center gap-3">
-                  <div className="flex items-center gap-1">
-                    {[...Array(5)].map((_, i) => (
-                      <Star
-                        key={i}
-                        className={`size-4 ${
-                          i < Math.floor(product.rating)
+                  {/* Rating */}
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-1">
+                      {[...Array(5)].map((_, i) => (
+                        <Star
+                          key={i}
+                          className={`size-4 ${i < Math.floor(product.rating)
                             ? 'text-[#E67E50] fill-[#E67E50]'
                             : 'text-gray-300'
-                        }`}
-                      />
-                    ))}
+                            }`}
+                        />
+                      ))}
+                    </div>
+                    <span className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                      {product.rating} ({product.reviewCount ? product.reviewCount : 0} reviews)
+                    </span>
                   </div>
-                  <span className="font-['Poppins',sans-serif] text-[14px] text-muted">
-                    {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)}
+                      <>
+                        <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 && (
@@ -494,26 +504,26 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                             </span>
                           </>
                         ) : 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">
-                            Only {selectedVariant.inventoryCount} left in stock - Order soon!
-                          </span>
-                        </>
-                      ) : (
-                        <>
-                          <div className="size-3 rounded-full bg-green-500" />
-                          <span className="font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium">
-                            In Stock
-                          </span>
-                        </>
-                      )}
-                      
+                          <>
+                            <div className="size-3 rounded-full bg-primary animate-pulse" />
+                            <span className="font-['Poppins',sans-serif] text-[13px] text-primary font-medium">
+                              Only {selectedVariant.inventoryCount} left in stock - Order soon!
+                            </span>
+                          </>
+                        ) : (
+                          <>
+                            <div className="size-3 rounded-full bg-green-500" />
+                            <span className="font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium">
+                              In Stock
+                            </span>
+                          </>
+                        )}
+
+                      </div>
+                      <p className="font-['Poppins',sans-serif] text-[12px] text-muted">
+                        SKU: {selectedVariant?.sku}
+                      </p>
                     </div>
-                    <p className="font-['Poppins',sans-serif] text-[12px] text-muted">
-                      SKU: {selectedVariant?.sku}
-                    </p>
-                  </div>
                   )}
 
                   {/* Description */}
@@ -526,7 +536,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Variant Selector with Images */}
                   {product?.productVariants && product.productVariants.length > 0 && (
                     <div className="mb-6">
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
+                      <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
                         Select Variant
                       </h3>
                       <div className="flex flex-wrap gap-3">
@@ -541,11 +551,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                               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
+                              className={`flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${isSelected
                                 ? 'border-primary bg-primary/5'
                                 : 'border-gray-200 hover:border-primary/50'
-                            }`}
+                                }`}
                             >
                               <div className={`relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
                                 <Image
@@ -577,9 +586,9 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                   {/* Quantity Selector */}
                   <div className="mb-8">
-                  <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
-                    Quantity
-                  </h3>
+                    <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
+                      Quantity
+                    </h3>
                     <div className="flex items-center gap-3">
                       <div className="flex items-center gap-4 bg-gray-100 rounded-full px-6 py-3">
 
@@ -592,20 +601,20 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         >
                           -
                         </button>
-                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary min-w-[30px] text-center">
+                        <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary min-w-[30px] text-center">
                           {quantity}
-                      </span>
-                      <button
-                        onClick={() => setQuantity(Math.min(selectedVariant?.inventoryCount || product.inventoryCount || 999, quantity + 1))}
-                        disabled={quantity >= (selectedVariant?.inventoryCount || product.inventoryCount || 0)} 
-                        className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors disabled:opacity-50"
-                      >
-                        +
-                      </button>
+                        </span>
+                        <button
+                          onClick={() => setQuantity(Math.min(selectedVariant?.inventoryCount || product.inventoryCount || 999, quantity + 1))}
+                          disabled={quantity >= (selectedVariant?.inventoryCount || product.inventoryCount || 0)}
+                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors disabled:opacity-50"
+                        >
+                          +
+                        </button>
                       </div>
                       {selectedVariant && (
                         <span className="text-sm text-slate-500">
-                          {selectedVariant.inventoryCount || product.inventoryCount || 0} available
+                          {selectedVariant.inventoryCount || 0} available
                         </span>
                       )}
                     </div>
@@ -640,68 +649,68 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       }
                     </button>
                     <button className="sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary/5 transition-all flex items-center justify-center"
-                    onClick={handleToggleFavorite}>
-                    <Heart className={`h-4 w-4  ${isFavorited ? 'fill-red-500 text-red-500' : 'text-primary'}`}/>
-                  </button>
+                      onClick={handleToggleFavorite}>
+                      <Heart className={`h-4 w-4  ${isFavorited ? 'fill-red-500 text-red-500' : 'text-primary'}`} />
+                    </button>
                   </div>
 
                 </div>
 
                 {/* Benefits */}
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
-                <div className="flex items-start gap-3">
-                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                    <Truck className="size-5 text-primary" />
-                  </div>
-                  <div>
-                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
-                      Free Shipping
-                    </p>
-                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
-                      On all orders
-                    </p>
-                  </div>
-                </div>
-                <div className="flex items-start gap-3">
-                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                    <RotateCcw className="size-5 text-primary" />
-                  </div>
-                  <div>
-                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
-                      Easy Returns
-                    </p>
-                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
-                      30-day return policy
-                    </p>
-                  </div>
-                </div>
-                <div className="flex items-start gap-3">
-                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                    <Shield className="size-5 text-primary" />
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
+                  <div className="flex items-start gap-3">
+                    <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                      <Truck className="size-5 text-primary" />
+                    </div>
+                    <div>
+                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                        Free Shipping
+                      </p>
+                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                        On all orders
+                      </p>
+                    </div>
                   </div>
-                  <div>
-                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
-                      Secure Checkout
-                    </p>
-                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
-                      Safe & protected
-                    </p>
+                  <div className="flex items-start gap-3">
+                    <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                      <RotateCcw className="size-5 text-primary" />
+                    </div>
+                    <div>
+                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                        Easy Returns
+                      </p>
+                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                        30-day return policy
+                      </p>
+                    </div>
                   </div>
-                </div>
-                <div className="flex items-start gap-3">
-                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                    <Package className="size-5 text-primary" />
+                  <div className="flex items-start gap-3">
+                    <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                      <Shield className="size-5 text-primary" />
+                    </div>
+                    <div>
+                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                        Secure Checkout
+                      </p>
+                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                        Safe & protected
+                      </p>
+                    </div>
                   </div>
-                  <div>
-                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
-                      Quality Guaranteed
-                    </p>
-                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
-                      Premium materials
-                    </p>
+                  <div className="flex items-start gap-3">
+                    <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                      <Package className="size-5 text-primary" />
+                    </div>
+                    <div>
+                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                        Quality Guaranteed
+                      </p>
+                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                        Premium materials
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </div>
               </aside>
             </div>
 
@@ -713,11 +722,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   <button
                     key={tab}
                     onClick={() => setActiveTab(tab)}
-                    className={`font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 transition-all ${
-                      activeTab === tab
-                        ? 'text-primary border-b-2 border-primary -mb-0.5'
-                        : 'text-muted hover:text-primary'
-                    }`}
+                    className={`font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab
+                      ? 'text-primary border-b-2 border-primary -mb-0.5'
+                      : 'text-muted hover:text-primary'
+                      }`}
                   >
                     {tab.charAt(0).toUpperCase() + tab.slice(1)}
                   </button>
@@ -750,7 +758,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         Shipped from:
                       </h4>
                       <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
-                         Local pharmacy distribution center
+                        Local pharmacy distribution center
                       </p>
                     </div>
                   </div>
@@ -771,14 +779,14 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
             </div>
 
 
-          {/* Related Products */}
-          {relatedProducts.length > 0 && (
-            <div>
-              <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-8 text-2xl">
-                You May Also Like
-              </h2>
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-                {relatedProducts.map(relatedProduct => (
+            {/* Related Products */}
+            {relatedProducts.length > 0 && (
+              <div>
+                <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-8 text-2xl">
+                  You May Also Like
+                </h2>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {relatedProducts.map(relatedProduct => (
 
                     <ProductCard
                       key={relatedProduct.id}

package/src/styles/globals.css

@@ -10,7 +10,8 @@
   --color-primary-300: rgb(var(--color-primary-300));
   --color-primary-400: rgb(var(--color-primary-400));
   --color-primary-500: rgb(var(--color-primary-500));
-  --color-primary-600: rgb(var(--color-primary-600));
+  --color-primary-600: var(--color-primary-600, #E67E50);
+  ;
   --color-primary-700: rgb(var(--color-primary-700));
   --color-primary-800: rgb(var(--color-primary-800));
   --color-primary-900: rgb(var(--color-primary-900));
@@ -57,35 +58,42 @@
     0% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
   }
+
   @keyframes slideUp {
     0% {
       transform: translateY(10px);
       opacity: 0;
     }
+
     100% {
       transform: translateY(0);
       opacity: 1;
     }
   }
+
   @keyframes slideDown {
     0% {
       transform: translateY(-10px);
       opacity: 0;
     }
+
     100% {
       transform: translateY(0);
       opacity: 1;
     }
   }
+
   @keyframes scaleIn {
     0% {
       transform: scale(0.95);
       opacity: 0;
     }
+
     100% {
       transform: scale(1);
       opacity: 1;
@@ -102,6 +110,7 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+
   *,
   ::after,
   ::before,
@@ -129,21 +138,23 @@
   * {
     @apply border-gray-200;
   }
-  
+
   body {
     @apply bg-gray-50 text-gray-900 antialiased;
   }
 }
 
 @layer utilities {
-  
+
   @keyframes gradient {
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }
@@ -166,5 +177,4 @@
 
 ::-webkit-scrollbar-thumb:hover {
   @apply bg-gray-400;
-}
-
+}