hey-pharmacist-ecommerce 1.1.8 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/screens/CartScreen.tsx

@@ -10,7 +10,6 @@ import {
   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';
@@ -25,16 +24,127 @@ export function CartScreen() {
   const { buildPath } = useBasePath();
 
   if (!cart || cart.cartBody.items.length === 0) {
+    const highlights = [
+      {
+        icon: ShieldCheck,
+        title: 'Pharmacist approved',
+        description:
+          'Every product passes pharmacist review and cold-chain handling standards.',
+      },
+      {
+        icon: BadgePercent,
+        title: 'Bundle savings',
+        description: 'Unlock tiered discounts when you combine vitamins, OTC, and wellness kits.',
+      },
+      {
+        icon: HeartPulse,
+        title: 'Personalized guidance',
+        description: 'Follow curated collections tailored to your health goals and routines.',
+      },
+    ];
+
     return (
-      <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 bag feels a little empty"
-            description="Add pharmacy favorites to unlock quick shipping, curated bundles, and personalized recommendations."
-            actionLabel="Discover products"
-            onAction={() => router.push(buildPath('/shop'))}
-          />
+      <div className="relative min-h-screen overflow-hidden bg-slate-950">
+        <div className="absolute inset-0 bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))]" />
+        <div className="absolute inset-0">
+          <div className="pointer-events-none absolute -top-24 -left-20 h-96 w-96 rounded-full bg-white/20 blur-3xl opacity-60" />
+          <div className="pointer-events-none absolute bottom-0 right-0 h-[28rem] w-[28rem] rounded-full bg-secondary-500/40 blur-[220px] opacity-70" />
+        </div>
+
+        <div className="relative z-10 flex min-h-screen items-center px-6 py-20">
+          <div className="mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)] lg:items-center">
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4 }}
+              className="space-y-8 text-white"
+            >
+              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-1 text-sm font-semibold uppercase tracking-[0.3em] text-white/80 backdrop-blur">
+                <ShoppingBag className="h-4 w-4" />
+                Cart status
+              </span>
+              <div className="space-y-4">
+                <h1 className="text-4xl font-bold md:text-5xl">
+                  Your wellness cart is waiting for a refill
+                </h1>
+                <p className="max-w-xl text-lg text-white/75">
+                  Build a pharmacist-curated bundle with fast shipping, personalized recommendations,
+                  and exclusive member perks designed to keep you feeling your best.
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-4">
+                <Button
+                  size="lg"
+                  className="bg-white text-primary-700 shadow-xl shadow-white/30 hover:bg-white/90 hover:text-primary-700"
+                  onClick={() => router.push(buildPath('/shop'))}
+                >
+                  Discover products
+                  <ArrowRight className="h-5 w-5" />
+                </Button>
+                <button
+                  type="button"
+                  onClick={() => router.push(buildPath('/categories'))}
+                  className="inline-flex items-center gap-2 rounded-full border border-white/40 px-5 py-3 text-sm font-semibold text-white/80 transition hover:border-white hover:bg-white/10"
+                >
+                  Browse categories
+                  <ArrowRight className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                {highlights.map(({ icon: Icon, title, description }) => (
+                  <div
+                    key={title}
+                    className="rounded-2xl border border-white/15 bg-white/10 p-5 backdrop-blur transition hover:border-white/25 hover:bg-white/15"
+                  >
+                    <Icon className="h-6 w-6 text-white/90" />
+                    <p className="mt-3 text-sm font-semibold text-white">{title}</p>
+                    <p className="mt-1 text-xs text-white/70">{description}</p>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1, duration: 0.4 }}
+              className="rounded-[32px] border border-white/10 bg-white/10 p-10 backdrop-blur-2xl shadow-[0_40px_120px_-45px_rgba(12,5,40,0.6)]"
+            >
+              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20">
+                <ShoppingBag className="h-8 w-8 text-white" />
+              </div>
+              <h2 className="mt-6 text-3xl font-semibold text-white">
+                Still building your bag?
+              </h2>
+              <p className="mt-3 text-sm text-white/80">
+                Add supplements, wellness tools, and everyday pharmacy favorites to personalize your
+                routine. We&apos;ll keep them chilled, curated, and ready for doorstep delivery.
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-white/80">
+                <li className="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-3">
+                  <ShieldCheck className="h-5 w-5 text-white" />
+                  Pharmacist oversight on every order
+                </li>
+                <li className="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-3">
+                  <BadgePercent className="h-5 w-5 text-white" />
+                  Member-only savings unlock at checkout
+                </li>
+                <li className="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-3">
+                  <HeartPulse className="h-5 w-5 text-white" />
+                  Personalized care plans for each purchase
+                </li>
+              </ul>
+              <Button
+                size="lg"
+                variant="outline"
+                className="mt-8 w-full border-white/40 text-white hover:border-white hover:bg-white/10"
+                onClick={() => router.push(buildPath('/shop'))}
+              >
+                Start building my cart
+                <ArrowRight className="h-5 w-5" />
+              </Button>
+            </motion.div>
+          </div>
         </div>
       </div>
     );
@@ -175,4 +285,3 @@ export function CartScreen() {
     </div>
   );
 }
-

package/src/screens/LoginScreen.tsx

@@ -100,7 +100,7 @@ export function LoginScreen() {
           <div className="flex items-center gap-6 text-sm text-white/80">
             <span>Need an account?</span>
             <Link
-              href="/register"
+              href={buildPath('/register')}
               className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 font-semibold transition hover:bg-white/25"
             >
               Create one now
@@ -159,7 +159,7 @@ export function LoginScreen() {
                   Remember me
                 </label>
                 <Link
-                  href="/forgot-password"
+                  href={buildPath('/forgot-password')}
                   className="font-medium text-primary-600 transition hover:text-primary-700"
                 >
                   Forgot password?

package/src/screens/RegisterScreen.tsx

@@ -115,7 +115,7 @@ export function RegisterScreen() {
           <div className="flex items-center gap-6 text-sm text-white/80">
             <span>Already part of the community?</span>
             <Link
-              href="/login"
+              href={buildPath('/login')}
               className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 font-semibold transition hover:bg-white/25"
             >
               Sign in
@@ -206,12 +206,12 @@ export function RegisterScreen() {
                 <Shield className="mt-0.5 h-5 w-5 text-primary-500" />
                 <span>
                   By creating an account, you agree to our{' '}
-                  <Link href="/terms" className="font-semibold text-primary-600 hover:text-primary-700">
+                  <Link href={buildPath('/terms')} className="font-semibold text-primary-600 hover:text-primary-700">
                     Terms of Service
                   </Link>{' '}
                   and{' '}
                   <Link
-                    href="/privacy"
+                    href={buildPath('/privacy')}
                     className="font-semibold text-primary-600 hover:text-primary-700"
                   >
                     Privacy Policy

package/src/screens/ShopScreen.tsx

@@ -1027,8 +1027,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                             <ProductCard
                               product={product}
                               onClickProduct={(item) => {
-                                const productData = encodeURIComponent(JSON.stringify(item));
-                                router.push(buildPath(`/products/${item.id}?product=${productData}`));
+                                router.push(buildPath(`/products/${item.id}`));
                               }}
                             />
                           </div>