hey-pharmacist-ecommerce 1.0.5 → 1.0.6

package/src/screens/CartScreen.tsx

@@ -2,37 +2,35 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { ShoppingBag, ArrowRight } from 'lucide-react';
+import {
+  ArrowRight,
+  BadgePercent,
+  HeartPulse,
+  ShieldCheck,
+  ShoppingBag,
+} from 'lucide-react';
 import { CartItem } from '@/components/CartItem';
 import { EmptyState } from '@/components/EmptyState';
 import { Button } from '@/components/ui/Button';
 import { useCart } from '@/providers/CartProvider';
 import { formatPrice } from '@/lib/utils/format';
 import { useRouter } from 'next/navigation';
+import { CartItemPopulated } from '@/lib/Apis';
+
 
 export function CartScreen() {
   const router = useRouter();
   const { cart, isLoading } = useCart();
 
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-50 py-12">
-        <div className="container mx-auto px-4">
-          <p>Loading cart...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!cart || cart.items.length === 0) {
+  if (!cart || cart.cartBody.items.length === 0) {
     return (
-      <div className="min-h-screen bg-gray-50 py-12">
-        <div className="container mx-auto px-4">
+      <div className="min-h-screen bg-gradient-to-br from-primary-700 via-primary-600 to-secondary-600 flex items-center justify-center">
+        <div className="mx-auto px-20 py-5 bg-white rounded-3xl">
           <EmptyState
             icon={ShoppingBag}
-            title="Your cart is empty"
-            description="Add some products to your cart and they will appear here"
-            actionLabel="Continue Shopping"
+            title="Your bag feels a little empty"
+            description="Add pharmacy favorites to unlock quick shipping, curated bundles, and personalized recommendations."
+            actionLabel="Discover products"
             onAction={() => router.push('/shop')}
           />
         </div>
@@ -41,100 +39,138 @@ export function CartScreen() {
   }
 
   const subtotal = cart.total;
-  const shipping = subtotal > 50 ? 0 : 10;
-  const tax = subtotal * 0.1; // 10% tax
+  const shipping = 0;
+  const tax = 0;
   const total = subtotal + shipping + tax;
+ 
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
-      <div className="container mx-auto px-4">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">Shopping Cart</h1>
-          <p className="text-gray-600">{cart.itemCount} items in your cart</p>
-        </motion.div>
+    <div className="min-h-screen bg-slate-50">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+        <div className="relative container mx-auto px-4 py-16 mb-8">
+          <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between"
+          >
+            <div className="max-w-2xl space-y-4">
+              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold tracking-wide text-white/80 backdrop-blur">
+                <HeartPulse className="h-4 w-4" />
+                Wellness essentials, ready when you are
+              </span>
+              <h1 className="text-4xl font-bold md:text-5xl">Your curated cart</h1>
+              <p className="text-white/75 md:text-lg">
+                Review your selections, unlock exclusive perks, and check out with pharmacist-backed
+                confidence.
+              </p>
+            </div>
+            <div className="rounded-3xl bg-white/15 p-6 backdrop-blur-md">
+              <p className="text-sm font-semibold uppercase tracking-[0.35em] text-white/70">
+                Cart summary
+              </p>
+              <p className="mt-4 text-4xl font-semibold">{formatPrice(total)}</p>
+              <p className="text-sm text-white/70">Taxes and shipping calculated below</p>
+            </div>
+          </motion.div>
+        </div>
+      </section>
 
-        <div className="grid lg:grid-cols-3 gap-8">
-          {/* Cart Items */}
-          <div className="lg:col-span-2">
-            <div className="space-y-4">
-              {cart.items.map((item) => (
-                <CartItem key={item.productId} item={item} />
+    <div className="relative -mt-16 pb-20">
+      <div className="container mx-auto px-4">
+        <div className="grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+          <motion.section
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.05 }}
+            className="space-y-6 rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-4">
+              <h2 className="text-xl font-semibold text-slate-900">
+                Items ({cart.cartBody.items.length})
+              </h2>
+              <div className="inline-flex items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-primary-700">
+                <ShieldCheck className="h-4 w-4" />
+                Guaranteed cold-chain handling
+              </div>
+            </div>
+            {isLoading && (
+              <div className="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600">
+                <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600" />
+                Updating cart…
+              </div>
+            )}
+            <div className="space-y-5">
+              {cart.cartBody.items.map((item: CartItemPopulated) => (
+                <CartItem key={item.productVariantId} item={item} />
               ))}
             </div>
-          </div>
-
-          {/* Order Summary */}
-          <div className="lg:col-span-1">
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 }}
-              className="bg-white rounded-2xl p-6 shadow-sm sticky top-24"
-            >
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">Order Summary</h2>
+          </motion.section>
 
-              <div className="space-y-4 mb-6">
-                <div className="flex justify-between text-gray-700">
+          <motion.aside
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="space-y-6 lg:sticky lg:top-28"
+          >
+            <div className="rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-slate-900">Checkout summary</h2>
+                <span className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-3 py-1 text-xs font-semibold text-primary-700">
+                  <BadgePercent className="h-4 w-4" />
+                  Savings applied
+                </span>
+              </div>
+              <div className="mt-6 space-y-4 text-sm text-slate-600">
+                <div className="flex items-center justify-between">
                   <span>Subtotal</span>
-                  <span className="font-medium">{formatPrice(subtotal)}</span>
+                  <span className="font-semibold text-slate-900">{formatPrice(subtotal)}</span>
                 </div>
-                <div className="flex justify-between text-gray-700">
+                <div className="flex items-center justify-between">
                   <span>Shipping</span>
-                  <span className="font-medium">
-                    {shipping === 0 ? (
-                      <span className="text-green-600">FREE</span>
-                    ) : (
-                      formatPrice(shipping)
-                    )}
+                  <span className="font-semibold">
+           Will be calculated at checkout
                   </span>
                 </div>
-                <div className="flex justify-between text-gray-700">
-                  <span>Tax (10%)</span>
-                  <span className="font-medium">{formatPrice(tax)}</span>
-                </div>
-                <div className="border-t border-gray-200 pt-4">
-                  <div className="flex justify-between">
-                    <span className="text-xl font-bold text-gray-900">Total</span>
-                    <span className="text-2xl font-bold text-gray-900">
-                      {formatPrice(total)}
-                    </span>
+                <div className="rounded-2xl bg-slate-50 p-4">
+                  <div className="flex items-center justify-between text-base font-semibold text-slate-900">
+                    <span>Order total</span>
+                    <span>{formatPrice(total)}</span>
                   </div>
-                </div>
-              </div>
-
-              {shipping > 0 && (
-                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
-                  <p className="text-sm text-blue-800">
-                    Add {formatPrice(50 - subtotal)} more to get FREE shipping!
+                  <p className="mt-2 text-xs text-slate-500">
+                    Prices include pharmacy-grade quality control and packaging.
                   </p>
                 </div>
-              )}
-
+              </div>
               <Button
                 size="lg"
+                className="mt-6 w-full"
                 onClick={() => router.push('/checkout')}
-                className="w-full"
               >
-                Proceed to Checkout
-                <ArrowRight className="w-5 h-5" />
+                Secure checkout
+                <ArrowRight className="h-5 w-5" />
               </Button>
-
               <button
+                type="button"
                 onClick={() => router.push('/shop')}
-                className="w-full mt-4 text-primary-600 hover:text-primary-700 font-medium transition-colors"
+                className="mt-4 w-full text-sm font-semibold text-primary-600 transition hover:text-primary-700"
               >
-                Continue Shopping
+                Continue shopping
               </button>
-            </motion.div>
-          </div>
+            </div>
+
+            <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm">
+              <p className="font-semibold uppercase tracking-[0.3em]">Need help?</p>
+              <p className="mt-2 leading-relaxed">
+                Chat with a pharmacist to optimize your regimen or discuss substitutions before you
+                check out.
+              </p>
+            </div>
+          </motion.aside>
         </div>
       </div>
     </div>
+    </div>
   );
 }
 

package/src/screens/CategoriesScreen.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Package, Sparkles } from 'lucide-react';
+import { EmptyState } from '@/components/EmptyState';
+import { useCategories } from '@/hooks/useProducts';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+export function CategoriesScreen() {
+  const { categories, isLoading } = useCategories();
+  const router = useRouter();
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+        <div className="relative container mx-auto px-4 py-16">
+          <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            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">
+              <Package className="h-4 w-4" />
+              Product Categories
+            </span>
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+              <div className="space-y-4">
+                <h1 className="text-4xl font-bold md:text-5xl">Browse Our Product Range</h1>
+                <p className="max-w-2xl text-white/80 md:text-lg">
+                  Explore our comprehensive selection of healthcare products, carefully curated by our pharmacists to meet all your wellness needs.
+                </p>
+              </div>
+              <div className="rounded-3xl bg-white/15 p-6 backdrop-blur">
+                <p className="text-sm font-semibold uppercase tracking-[0.35em] text-white/70">
+                  Quick tip
+                </p>
+                <p className="mt-3 text-sm text-white/80">
+                  Use the categories below to quickly find the products you&apos;re looking for, or use the search function for specific items.
+                </p>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      <div className="relative -mt-16 pb-16">
+        <div className="container mx-auto px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
+          >
+            <div className="flex items-center gap-3 text-sm text-slate-500 mb-6">
+              <Sparkles className="h-4 w-4 text-primary-500" />
+              <span>Browse our complete product catalog organized by categories.</span>
+            </div>
+
+            {isLoading ? (
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                {[...Array(8)].map((_, i) => (
+                  <div key={i} className="animate-pulse">
+                    <div className="bg-gray-200 rounded-lg aspect-square mb-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-3/4 mb-1"></div>
+                    <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+                  </div>
+                ))}
+              </div>
+            ) : categories.length > 0 ? (
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                {categories.map((category) => (
+                  <Link
+                    key={category.id}
+                    href={`/shop?category=${category.name}`}
+                    className="group block overflow-hidden rounded-xl border border-gray-100 bg-white p-4 text-center transition hover:shadow-lg hover:border-primary-500"
+                  >
+                    <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-gray-50 mb-3">
+                      {category.image ? (
+                        <Image
+                          src={category.image}
+                          alt={category.name || 'Category Image'}
+                          fill
+                          className="object-cover transition-transform group-hover:scale-105"
+                          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
+                        />
+                      ) : (
+                        <div className="flex h-full w-full items-center justify-center bg-gray-100 text-gray-400">
+                          <Package className="h-12 w-12" />
+                        </div>
+                      )}
+                    </div>
+                    <h3 className="text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
+                      {category.name}
+                    </h3>
+                    {category.productCount > 0 && (
+                      <p className="mt-1 text-sm text-gray-500">
+                        {category.productCount} {category.productCount === 1 ? 'product' : 'products'}
+                      </p>
+                    )}
+                  </Link>
+                ))}
+              </div>
+            ) : (
+              <EmptyState
+                title="No categories found"
+                description="There are currently no product categories available."
+                icon={Package}
+                actionLabel="Shop products"
+                onAction={() => router.push('/shop')}
+              />
+            )}
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+}