hey-pharmacist-ecommerce 1.0.0

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "hey-pharmacist-ecommerce",
+  "version": "1.0.0",
+  "description": "Multi-tenant e-commerce package for Next.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "tsup",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "next": "^14.0.0",
+    "axios": "^1.6.0",
+    "framer-motion": "^10.16.0",
+    "lucide-react": "^0.294.0",
+    "react-hook-form": "^7.48.0",
+    "zod": "^3.22.0",
+    "@hookform/resolvers": "^3.3.0",
+    "sonner": "^1.2.0",
+    "zustand": "^4.4.0",
+    "cookies-next": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.3.0",
+    "tailwindcss": "^3.3.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0",
+    "tsup": "^8.0.0",
+    "eslint": "^8.0.0",
+    "eslint-config-next": "^14.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "next": "^14.0.0"
+  },
+  "keywords": [
+    "ecommerce",
+    "nextjs",
+    "multi-tenant",
+    "react",
+    "tailwindcss",
+    "stripe",
+    "pharmacy",
+    "online-store"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/hey-pharmacist-customer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/hey-pharmacist-customer/issues"
+  },
+  "homepage": "https://github.com/yourusername/hey-pharmacist-customer#readme"
+}
+

package/src/components/CartItem.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Minus, Plus, Trash2 } from 'lucide-react';
+import { CartItem as CartItemType } from '@/lib/types';
+import { formatPrice } from '@/lib/utils/format';
+import { useCart } from '@/providers/CartProvider';
+import Image from 'next/image';
+
+interface CartItemProps {
+  item: CartItemType;
+}
+
+export function CartItem({ item }: CartItemProps) {
+  const { updateQuantity, removeFromCart } = useCart();
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const handleUpdateQuantity = async (newQuantity: number) => {
+    if (newQuantity < 1) return;
+    setIsUpdating(true);
+    try {
+      await updateQuantity(item.productId, newQuantity);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleRemove = async () => {
+    await removeFromCart(item.productId);
+  };
+
+  const itemTotal = item.product.price * item.quantity;
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, x: -100 }}
+      className="flex gap-4 bg-white p-4 rounded-xl border border-gray-200 hover:border-primary-300 transition-colors"
+    >
+      {/* Product Image */}
+      <div className="relative w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100">
+        <Image
+          src={item.product.images[0] || '/placeholder-product.jpg'}
+          alt={item.product.name}
+          fill
+          className="object-cover"
+        />
+      </div>
+
+      {/* Product Info */}
+      <div className="flex-1 min-w-0">
+        <h3 className="text-lg font-semibold text-gray-900 truncate">
+          {item.product.name}
+        </h3>
+        <p className="text-sm text-gray-500 mt-1">
+          {formatPrice(item.product.price)} each
+        </p>
+
+        {/* Quantity Controls */}
+        <div className="flex items-center gap-3 mt-3">
+          <div className="flex items-center border-2 border-gray-200 rounded-lg">
+            <button
+              onClick={() => handleUpdateQuantity(item.quantity - 1)}
+              disabled={isUpdating || item.quantity <= 1}
+              className="p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <Minus className="w-4 h-4" />
+            </button>
+            <span className="px-4 font-medium min-w-[3rem] text-center">
+              {item.quantity}
+            </span>
+            <button
+              onClick={() => handleUpdateQuantity(item.quantity + 1)}
+              disabled={isUpdating}
+              className="p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <Plus className="w-4 h-4" />
+            </button>
+          </div>
+
+          <button
+            onClick={handleRemove}
+            className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+            aria-label="Remove item"
+          >
+            <Trash2 className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Item Total */}
+      <div className="text-right">
+        <p className="text-xl font-bold text-gray-900">
+          {formatPrice(itemTotal)}
+        </p>
+      </div>
+    </motion.div>
+  );
+}
+

package/src/components/EmptyState.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Button } from './ui/Button';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+export function EmptyState({ icon: Icon, title, description, actionLabel, onAction }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 px-4">
+      <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-6">
+        <Icon className="w-12 h-12 text-gray-400" />
+      </div>
+      <h3 className="text-2xl font-bold text-gray-900 mb-2">{title}</h3>
+      <p className="text-gray-600 text-center max-w-md mb-8">{description}</p>
+      {actionLabel && onAction && (
+        <Button onClick={onAction}>{actionLabel}</Button>
+      )}
+    </div>
+  );
+}
+

package/src/components/Footer.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React from 'react';
+import { Mail, Phone, MapPin, Facebook, Twitter, Instagram } from 'lucide-react';
+import { useTheme } from '@/providers/ThemeProvider';
+import Link from 'next/link';
+
+export function Footer() {
+  const { config } = useTheme();
+
+  const footerLinks = {
+    shop: [
+      { label: 'All Products', href: '/shop' },
+      { label: 'Categories', href: '/categories' },
+      { label: 'Featured', href: '/featured' },
+      { label: 'New Arrivals', href: '/new' },
+    ],
+    account: [
+      { label: 'My Account', href: '/account' },
+      { label: 'Orders', href: '/orders' },
+      { label: 'Wishlist', href: '/wishlist' },
+      { label: 'Cart', href: '/cart' },
+    ],
+    support: [
+      { label: 'Contact Us', href: '/contact' },
+      { label: 'FAQs', href: '/faqs' },
+      { label: 'Shipping Info', href: '/shipping' },
+      { label: 'Returns', href: '/returns' },
+    ],
+    legal: [
+      { label: 'Privacy Policy', href: '/privacy' },
+      { label: 'Terms of Service', href: '/terms' },
+      { label: 'Cookie Policy', href: '/cookies' },
+    ],
+  };
+
+  return (
+    <footer className="bg-gray-900 text-gray-300">
+      <div className="container mx-auto px-4 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
+          {/* Brand Column */}
+          <div className="lg:col-span-2">
+            <h3 className="text-2xl font-bold text-white mb-4">{config.storeName}</h3>
+            <p className="text-gray-400 mb-6 max-w-md">
+              Your trusted online store for quality products. We deliver excellence with every order.
+            </p>
+            <div className="space-y-3">
+              <div className="flex items-center gap-3">
+                <Mail className="w-5 h-5 text-primary-500" />
+                <span>support@{config.storeName.toLowerCase().replace(/\s+/g, '')}.com</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <Phone className="w-5 h-5 text-primary-500" />
+                <span>+1 (555) 123-4567</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <MapPin className="w-5 h-5 text-primary-500" />
+                <span>123 Store Street, City, Country</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Shop Links */}
+          <div>
+            <h4 className="text-lg font-semibold text-white mb-4">Shop</h4>
+            <ul className="space-y-2">
+              {footerLinks.shop.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="hover:text-primary-500 transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Account Links */}
+          <div>
+            <h4 className="text-lg font-semibold text-white mb-4">Account</h4>
+            <ul className="space-y-2">
+              {footerLinks.account.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="hover:text-primary-500 transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Support Links */}
+          <div>
+            <h4 className="text-lg font-semibold text-white mb-4">Support</h4>
+            <ul className="space-y-2">
+              {footerLinks.support.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="hover:text-primary-500 transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-gray-400 text-sm">
+            © {new Date().getFullYear()} {config.storeName}. All rights reserved.
+          </p>
+          
+          {/* Social Links */}
+          <div className="flex items-center gap-4">
+            <a
+              href="#"
+              className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
+            >
+              <Facebook className="w-5 h-5" />
+            </a>
+            <a
+              href="#"
+              className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
+            >
+              <Twitter className="w-5 h-5" />
+            </a>
+            <a
+              href="#"
+              className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
+            >
+              <Instagram className="w-5 h-5" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+

package/src/components/Header.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ShoppingCart, User, Menu, X, Search, Heart } from 'lucide-react';
+import { useAuth } from '@/providers/AuthProvider';
+import { useCart } from '@/providers/CartProvider';
+import { useTheme } from '@/providers/ThemeProvider';
+import Link from 'next/link';
+import Image from 'next/image';
+
+export function Header() {
+  const { config } = useTheme();
+  const { user, isAuthenticated } = useAuth();
+  const { cart } = useCart();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const navLinks = [
+    { href: '/shop', label: 'Shop' },
+    { href: '/categories', label: 'Categories' },
+    { href: '/about', label: 'About' },
+    { href: '/contact', label: 'Contact' },
+  ];
+
+  return (
+    <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-20">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-3">
+            <div className="relative w-12 h-12">
+              <Image
+                src={config.logo}
+                alt={config.storeName}
+                fill
+                className="object-contain"
+              />
+            </div>
+            <span className="text-2xl font-bold text-gray-900 hidden sm:block">
+              {config.storeName}
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden lg:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-gray-700 hover:text-primary-600 font-medium transition-colors relative group"
+              >
+                {link.label}
+                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary-600 group-hover:w-full transition-all duration-300" />
+              </Link>
+            ))}
+          </nav>
+
+          {/* Actions */}
+          <div className="flex items-center gap-4">
+            {/* Search */}
+            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+              <Search className="w-5 h-5 text-gray-700" />
+            </button>
+
+            {/* Favorites */}
+            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors relative">
+              <Heart className="w-5 h-5 text-gray-700" />
+            </button>
+
+            {/* Cart */}
+            <Link
+              href="/cart"
+              className="p-2 hover:bg-gray-100 rounded-lg transition-colors relative"
+            >
+              <ShoppingCart className="w-5 h-5 text-gray-700" />
+              {cart && cart.itemCount > 0 && (
+                <span className="absolute -top-1 -right-1 w-5 h-5 bg-primary-600 text-white text-xs font-bold rounded-full flex items-center justify-center">
+                  {cart.itemCount}
+                </span>
+              )}
+            </Link>
+
+            {/* User Menu */}
+            {isAuthenticated ? (
+              <Link
+                href="/account"
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                <User className="w-5 h-5 text-gray-700" />
+              </Link>
+            ) : (
+              <Link
+                href="/login"
+                className="hidden sm:block px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
+              >
+                Sign In
+              </Link>
+            )}
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="lg:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              {isMobileMenuOpen ? (
+                <X className="w-6 h-6" />
+              ) : (
+                <Menu className="w-6 h-6" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              className="lg:hidden overflow-hidden border-t border-gray-200"
+            >
+              <nav className="py-4 space-y-2">
+                {navLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="block px-4 py-3 hover:bg-gray-50 rounded-lg text-gray-700 font-medium"
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+                {!isAuthenticated && (
+                  <Link
+                    href="/login"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="block px-4 py-3 bg-primary-600 text-white rounded-lg text-center font-medium"
+                  >
+                    Sign In
+                  </Link>
+                )}
+              </nav>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </header>
+  );
+}
+

package/src/components/OrderCard.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Package, Calendar, CreditCard, ExternalLink } from 'lucide-react';
+import { Order, OrderStatus } from '@/lib/types';
+import { formatPrice, formatDate } from '@/lib/utils/format';
+import { Badge } from './ui/Badge';
+import Link from 'next/link';
+
+interface OrderCardProps {
+  order: Order;
+}
+
+const statusConfig: Record<OrderStatus, { variant: 'success' | 'warning' | 'primary' | 'danger' | 'gray', label: string }> = {
+  [OrderStatus.PENDING]: { variant: 'warning', label: 'Pending' },
+  [OrderStatus.PROCESSING]: { variant: 'primary', label: 'Processing' },
+  [OrderStatus.SHIPPED]: { variant: 'primary', label: 'Shipped' },
+  [OrderStatus.DELIVERED]: { variant: 'success', label: 'Delivered' },
+  [OrderStatus.CANCELLED]: { variant: 'danger', label: 'Cancelled' },
+};
+
+export function OrderCard({ order }: OrderCardProps) {
+  const config = statusConfig[order.status];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      whileHover={{ y: -4 }}
+      className="bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100"
+    >
+      {/* Header */}
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
+            <Package className="w-5 h-5 text-primary-600" />
+            Order #{order.orderNumber}
+          </h3>
+          <p className="text-sm text-gray-500 mt-1 flex items-center gap-2">
+            <Calendar className="w-4 h-4" />
+            {formatDate(order.createdAt, 'long')}
+          </p>
+        </div>
+        <Badge variant={config.variant}>{config.label}</Badge>
+      </div>
+
+      {/* Items Preview */}
+      <div className="space-y-2 mb-4">
+        {order.items.slice(0, 2).map((item) => (
+          <div key={item.id} className="flex items-center gap-3 text-sm">
+            <div className="w-12 h-12 rounded-lg bg-gray-100 flex-shrink-0" />
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-gray-900 truncate">{item.productName}</p>
+              <p className="text-gray-500">Qty: {item.quantity}</p>
+            </div>
+            <p className="font-semibold text-gray-900">{formatPrice(item.price)}</p>
+          </div>
+        ))}
+        {order.items.length > 2 && (
+          <p className="text-sm text-gray-500 pl-15">
+            +{order.items.length - 2} more item{order.items.length - 2 > 1 ? 's' : ''}
+          </p>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex justify-between items-center pt-4 border-t border-gray-200">
+        <div>
+          <p className="text-sm text-gray-500">Total Amount</p>
+          <p className="text-2xl font-bold text-gray-900">{formatPrice(order.total)}</p>
+        </div>
+        
+        <div className="flex gap-2">
+          {order.stripeCheckoutUrl && order.paymentStatus !== 'paid' && (
+            <a
+              href={order.stripeCheckoutUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+            >
+              <CreditCard className="w-4 h-4" />
+              Pay Now
+            </a>
+          )}
+          <Link
+            href={`/orders/${order.id}`}
+            className="inline-flex items-center gap-2 px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            View Details
+            <ExternalLink className="w-4 h-4" />
+          </Link>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+