hey-pharmacist-ecommerce 1.0.0

package/src/providers/EcommerceProvider.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { EcommerceConfig } from '@/lib/types';
+import { ThemeProvider } from './ThemeProvider';
+import { AuthProvider } from './AuthProvider';
+import { CartProvider } from './CartProvider';
+import { initializeApiAdapter } from '@/lib/api-adapter';
+import { Toaster } from 'sonner';
+
+interface EcommerceProviderProps {
+  config: EcommerceConfig;
+  children: React.ReactNode;
+}
+
+export function EcommerceProvider({ config, children }: EcommerceProviderProps) {
+  useEffect(() => {
+    // Initialize API adapter with store configuration
+    // This sets up the real backend APIs with proper authentication and store ID
+    initializeApiAdapter(config);
+  }, [config]);
+
+  return (
+    <ThemeProvider config={config}>
+      <AuthProvider>
+        <CartProvider>
+          {children}
+          <Toaster position="top-right" richColors />
+        </CartProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  );
+}
+

package/src/providers/ThemeProvider.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React, { createContext, useContext, useEffect } from 'react';
+import { EcommerceConfig } from '@/lib/types';
+import { generateColorShades } from '@/lib/utils/colors';
+
+interface ThemeContextValue {
+  config: EcommerceConfig;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+}
+
+interface ThemeProviderProps {
+  config: EcommerceConfig;
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ config, children }: ThemeProviderProps) {
+  useEffect(() => {
+    // Generate color shades and set CSS variables
+    const primaryShades = generateColorShades(config.colors.primary);
+    const secondaryShades = generateColorShades(config.colors.secondary);
+    const accentShades = generateColorShades(config.colors.accent);
+
+    const root = document.documentElement;
+
+    // Set primary color variables
+    Object.entries(primaryShades).forEach(([shade, rgb]) => {
+      root.style.setProperty(`--color-primary-${shade}`, rgb);
+    });
+
+    // Set secondary color variables
+    Object.entries(secondaryShades).forEach(([shade, rgb]) => {
+      root.style.setProperty(`--color-secondary-${shade}`, rgb);
+    });
+
+    // Set accent color variables
+    Object.entries(accentShades).forEach(([shade, rgb]) => {
+      root.style.setProperty(`--color-accent-${shade}`, rgb);
+    });
+  }, [config.colors]);
+
+  return (
+    <ThemeContext.Provider value={{ config }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+

package/src/screens/CartScreen.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ShoppingBag, ArrowRight } 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';
+
+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) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-12">
+        <div className="container mx-auto px-4">
+          <EmptyState
+            icon={ShoppingBag}
+            title="Your cart is empty"
+            description="Add some products to your cart and they will appear here"
+            actionLabel="Continue Shopping"
+            onAction={() => router.push('/shop')}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const subtotal = cart.total;
+  const shipping = subtotal > 50 ? 0 : 10;
+  const tax = subtotal * 0.1; // 10% tax
+  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="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>
+          </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>
+
+              <div className="space-y-4 mb-6">
+                <div className="flex justify-between text-gray-700">
+                  <span>Subtotal</span>
+                  <span className="font-medium">{formatPrice(subtotal)}</span>
+                </div>
+                <div className="flex justify-between text-gray-700">
+                  <span>Shipping</span>
+                  <span className="font-medium">
+                    {shipping === 0 ? (
+                      <span className="text-green-600">FREE</span>
+                    ) : (
+                      formatPrice(shipping)
+                    )}
+                  </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>
+                </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>
+                </div>
+              )}
+
+              <Button
+                size="lg"
+                onClick={() => router.push('/checkout')}
+                className="w-full"
+              >
+                Proceed to Checkout
+                <ArrowRight className="w-5 h-5" />
+              </Button>
+
+              <button
+                onClick={() => router.push('/shop')}
+                className="w-full mt-4 text-primary-600 hover:text-primary-700 font-medium transition-colors"
+              >
+                Continue Shopping
+              </button>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/screens/CheckoutScreen.tsx

@@ -0,0 +1,340 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Lock, CreditCard } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useCart } from '@/providers/CartProvider';
+import { useAuth } from '@/providers/AuthProvider';
+import { ordersApi, CreateOrderData } from '@/lib/api/orders';
+import { formatPrice } from '@/lib/utils/format';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+
+const addressSchema = z.object({
+  fullName: z.string().min(2, 'Full name is required'),
+  addressLine1: z.string().min(5, 'Address is required'),
+  addressLine2: z.string().optional(),
+  city: z.string().min(2, 'City is required'),
+  state: z.string().min(2, 'State is required'),
+  zipCode: z.string().min(5, 'ZIP code is required'),
+  country: z.string().min(2, 'Country is required'),
+  phone: z.string().min(10, 'Phone number is required'),
+});
+
+const checkoutSchema = z.object({
+  shipping: addressSchema,
+  billing: addressSchema,
+  sameAsShipping: z.boolean(),
+});
+
+type CheckoutFormData = z.infer<typeof checkoutSchema>;
+
+export function CheckoutScreen() {
+  const router = useRouter();
+  const { cart } = useCart();
+  const { isAuthenticated, user } = useAuth();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [sameAsShipping, setSameAsShipping] = useState(true);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CheckoutFormData>({
+    resolver: zodResolver(checkoutSchema),
+    defaultValues: {
+      sameAsShipping: true,
+      shipping: {
+        fullName: user ? `${user.firstName} ${user.lastName}` : '',
+        phone: user?.phone || '',
+        country: 'United States',
+      },
+      billing: {
+        fullName: user ? `${user.firstName} ${user.lastName}` : '',
+        phone: user?.phone || '',
+        country: 'United States',
+      },
+    },
+  });
+
+  const onSubmit = async (data: CheckoutFormData) => {
+    if (!isAuthenticated) {
+      toast.error('Please login to continue');
+      router.push('/login?redirect=/checkout');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const orderData: CreateOrderData = {
+        shippingAddress: data.shipping,
+        billingAddress: sameAsShipping ? data.shipping : data.billing,
+        sameAsShipping,
+      };
+
+      const response = await ordersApi.createOrder(orderData);
+      
+      if (response.success && response.data.stripeCheckoutUrl) {
+        // Redirect to Stripe checkout
+        window.location.href = response.data.stripeCheckoutUrl;
+      } else {
+        toast.success('Order placed successfully!');
+        router.push(`/orders/${response.data.id}`);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Failed to place order');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (!cart || cart.items.length === 0) {
+    router.push('/cart');
+    return null;
+  }
+
+  const subtotal = cart.total;
+  const shipping = subtotal > 50 ? 0 : 10;
+  const tax = subtotal * 0.1;
+  const total = subtotal + shipping + tax;
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="container mx-auto px-4 max-w-6xl">
+        {/* 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">Checkout</h1>
+          <p className="text-gray-600">Complete your order</p>
+        </motion.div>
+
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="grid lg:grid-cols-3 gap-8">
+            {/* Forms */}
+            <div className="lg:col-span-2 space-y-6">
+              {/* Shipping Address */}
+              <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"
+              >
+                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                  Shipping Address
+                </h2>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="col-span-2">
+                    <Input
+                      label="Full Name"
+                      {...register('shipping.fullName')}
+                      error={errors.shipping?.fullName?.message}
+                    />
+                  </div>
+                  <div className="col-span-2">
+                    <Input
+                      label="Address Line 1"
+                      {...register('shipping.addressLine1')}
+                      error={errors.shipping?.addressLine1?.message}
+                    />
+                  </div>
+                  <div className="col-span-2">
+                    <Input
+                      label="Address Line 2 (Optional)"
+                      {...register('shipping.addressLine2')}
+                    />
+                  </div>
+                  <Input
+                    label="City"
+                    {...register('shipping.city')}
+                    error={errors.shipping?.city?.message}
+                  />
+                  <Input
+                    label="State"
+                    {...register('shipping.state')}
+                    error={errors.shipping?.state?.message}
+                  />
+                  <Input
+                    label="ZIP Code"
+                    {...register('shipping.zipCode')}
+                    error={errors.shipping?.zipCode?.message}
+                  />
+                  <Input
+                    label="Country"
+                    {...register('shipping.country')}
+                    error={errors.shipping?.country?.message}
+                  />
+                  <div className="col-span-2">
+                    <Input
+                      label="Phone Number"
+                      {...register('shipping.phone')}
+                      error={errors.shipping?.phone?.message}
+                    />
+                  </div>
+                </div>
+              </motion.div>
+
+              {/* Billing Address */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="bg-white rounded-2xl p-6 shadow-sm"
+              >
+                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                  Billing Address
+                </h2>
+                
+                <label className="flex items-center gap-3 mb-6 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={sameAsShipping}
+                    onChange={(e) => setSameAsShipping(e.target.checked)}
+                    className="w-5 h-5 text-primary-600 rounded"
+                  />
+                  <span className="text-gray-700">Same as shipping address</span>
+                </label>
+
+                {!sameAsShipping && (
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="col-span-2">
+                      <Input
+                        label="Full Name"
+                        {...register('billing.fullName')}
+                        error={errors.billing?.fullName?.message}
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <Input
+                        label="Address Line 1"
+                        {...register('billing.addressLine1')}
+                        error={errors.billing?.addressLine1?.message}
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <Input
+                        label="Address Line 2 (Optional)"
+                        {...register('billing.addressLine2')}
+                      />
+                    </div>
+                    <Input
+                      label="City"
+                      {...register('billing.city')}
+                      error={errors.billing?.city?.message}
+                    />
+                    <Input
+                      label="State"
+                      {...register('billing.state')}
+                      error={errors.billing?.state?.message}
+                    />
+                    <Input
+                      label="ZIP Code"
+                      {...register('billing.zipCode')}
+                      error={errors.billing?.zipCode?.message}
+                    />
+                    <Input
+                      label="Country"
+                      {...register('billing.country')}
+                      error={errors.billing?.country?.message}
+                    />
+                    <div className="col-span-2">
+                      <Input
+                        label="Phone Number"
+                        {...register('billing.phone')}
+                        error={errors.billing?.phone?.message}
+                      />
+                    </div>
+                  </div>
+                )}
+              </motion.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.3 }}
+                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>
+
+                {/* Items */}
+                <div className="space-y-4 mb-6 max-h-64 overflow-y-auto">
+                  {cart.items.map((item) => (
+                    <div key={item.productId} className="flex gap-3">
+                      <div className="w-16 h-16 rounded-lg bg-gray-100 flex-shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium text-gray-900 text-sm truncate">
+                          {item.product.name}
+                        </p>
+                        <p className="text-sm text-gray-500">Qty: {item.quantity}</p>
+                      </div>
+                      <p className="font-medium text-gray-900 text-sm">
+                        {formatPrice(item.product.price * item.quantity)}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="space-y-3 border-t border-gray-200 pt-4 mb-6">
+                  <div className="flex justify-between text-gray-700">
+                    <span>Subtotal</span>
+                    <span className="font-medium">{formatPrice(subtotal)}</span>
+                  </div>
+                  <div className="flex justify-between text-gray-700">
+                    <span>Shipping</span>
+                    <span className="font-medium">
+                      {shipping === 0 ? (
+                        <span className="text-green-600">FREE</span>
+                      ) : (
+                        formatPrice(shipping)
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-gray-700">
+                    <span>Tax</span>
+                    <span className="font-medium">{formatPrice(tax)}</span>
+                  </div>
+                  <div className="border-t border-gray-200 pt-3">
+                    <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>
+                  </div>
+                </div>
+
+                <Button
+                  type="submit"
+                  size="lg"
+                  isLoading={isSubmitting}
+                  className="w-full"
+                >
+                  <CreditCard className="w-5 h-5" />
+                  Place Order
+                </Button>
+
+                <div className="flex items-center justify-center gap-2 text-sm text-gray-500 mt-4">
+                  <Lock className="w-4 h-4" />
+                  <span>Secure checkout powered by Stripe</span>
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+

package/src/screens/CurrentOrdersScreen.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Truck, Package } from 'lucide-react';
+import { OrderCard } from '@/components/OrderCard';
+import { OrderCardSkeleton } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/EmptyState';
+import { useCurrentOrders } from '@/hooks/useOrders';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export function CurrentOrdersScreen() {
+  const router = useRouter();
+  const { orders, isLoading } = useCurrentOrders();
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="container mx-auto px-4 max-w-5xl">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center gap-3">
+                <Truck className="w-10 h-10 text-primary-600" />
+                Current Orders
+              </h1>
+              <p className="text-gray-600">
+                Track your active orders and deliveries
+              </p>
+            </div>
+            <Link
+              href="/orders"
+              className="text-primary-600 hover:text-primary-700 font-medium"
+            >
+              View All Orders →
+            </Link>
+          </div>
+        </motion.div>
+
+        {/* Info Banner */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="bg-blue-50 border border-blue-200 rounded-2xl p-6 mb-8"
+        >
+          <h3 className="font-semibold text-blue-900 mb-2">Track Your Orders</h3>
+          <p className="text-blue-700 text-sm">
+            Stay updated on your orders' status. You'll receive notifications when your order is
+            being prepared, shipped, and delivered.
+          </p>
+        </motion.div>
+
+        {/* Orders List */}
+        {isLoading ? (
+          <div className="space-y-4">
+            {Array.from({ length: 2 }).map((_, i) => (
+              <OrderCardSkeleton key={i} />
+            ))}
+          </div>
+        ) : orders.length > 0 ? (
+          <div className="space-y-4">
+            {orders.map((order) => (
+              <OrderCard key={order.id} order={order} />
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            icon={Package}
+            title="No active orders"
+            description="You don't have any orders in progress right now"
+            actionLabel="Start Shopping"
+            onAction={() => router.push('/shop')}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+