hey-pharmacist-ecommerce 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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/components/Footer.tsx

@@ -3,34 +3,36 @@
 import React from 'react';
 import { Mail, Phone, MapPin, Facebook, Twitter, Instagram } from 'lucide-react';
 import { useTheme } from '@/providers/ThemeProvider';
+import { useBasePath } from '@/providers/BasePathProvider';
 import Link from 'next/link';
 
 export function Footer() {
   const { config } = useTheme();
+  const { buildPath } = useBasePath();
 
   const footerLinks = {
     shop: [
-      { label: 'All Products', href: '/shop' },
-      { label: 'Categories', href: '/categories' },
-      { label: 'Featured', href: '/featured' },
-      { label: 'New Arrivals', href: '/new' },
+      { label: 'All Products', href: buildPath('/shop') },
+      { label: 'Categories', href: buildPath('/categories') },
+      { label: 'Featured', href: buildPath('/featured') },
+      { label: 'New Arrivals', href: buildPath('/new') },
     ],
     account: [
-      { label: 'My Account', href: '/account' },
-      { label: 'Orders', href: '/orders' },
-      { label: 'Wishlist', href: '/wishlist' },
-      { label: 'Cart', href: '/cart' },
+      { label: 'My Account', href: buildPath('/account') },
+      { label: 'Orders', href: buildPath('/orders') },
+      { label: 'Wishlist', href: buildPath('/wishlist') },
+      { label: 'Cart', href: buildPath('/cart') },
     ],
     support: [
-      { label: 'Contact Us', href: '/contact' },
-      { label: 'FAQs', href: '/faqs' },
-      { label: 'Shipping Info', href: '/shipping' },
-      { label: 'Returns', href: '/returns' },
+      { label: 'Contact Us', href: buildPath('/contact') },
+      { label: 'FAQs', href: buildPath('/faqs') },
+      { label: 'Shipping Info', href: buildPath('/shipping') },
+      { label: 'Returns', href: buildPath('/returns') },
     ],
     legal: [
-      { label: 'Privacy Policy', href: '/privacy' },
-      { label: 'Terms of Service', href: '/terms' },
-      { label: 'Cookie Policy', href: '/cookies' },
+      { label: 'Privacy Policy', href: buildPath('/privacy') },
+      { label: 'Terms of Service', href: buildPath('/terms') },
+      { label: 'Cookie Policy', href: buildPath('/cookies') },
     ],
   };
 

package/src/components/Header.tsx

@@ -7,6 +7,7 @@ import { useAuth } from '@/providers/AuthProvider';
 import { useCart } from '@/providers/CartProvider';
 import { useTheme } from '@/providers/ThemeProvider';
 import { useWishlist } from '@/providers/WishlistProvider';
+import { useBasePath } from '@/providers/BasePathProvider';
 import Link from 'next/link';
 import Image from 'next/image';
 
@@ -19,13 +20,14 @@ export function Header() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const { buildPath } = useBasePath();
 
   const navLinks = [
-    { href: '/shop', label: 'Shop' },
-    { href: '/categories', label: 'Categories' },
-    { href: '/orders', label: 'Orders' },
-    { href: '/about', label: 'About' },
-    { href: '/contact', label: 'Contact' },
+    { href: buildPath('/shop'), label: 'Shop' },
+    { href: buildPath('/categories'), label: 'Categories' },
+    { href: buildPath('/orders'), label: 'Orders' },
+    { href: buildPath('/about'), label: 'About' },
+    { href: buildPath('/contact'), label: 'Contact' },
   ];
 
   return (
@@ -33,7 +35,7 @@ export function Header() {
       <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">
+          <Link href={buildPath('/')} className="flex items-center gap-3">
             <div className="relative w-12 h-12">
               <Image
                 src={config.logo}
@@ -89,7 +91,7 @@ export function Header() {
                         onChange={(e) => setSearchQuery(e.target.value)}
                         onKeyDown={(e) => {
                           if (e.key === 'Enter' && searchQuery.trim()) {
-                            window.location.href = `/search?q=${encodeURIComponent(searchQuery.trim())}`;
+                            window.location.href = buildPath(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
                           }
                         }}
                         placeholder="Search products..."
@@ -112,7 +114,7 @@ export function Header() {
 
             {/* Wishlist and Cart */}
             <div className="flex items-center gap-4">
-              <Link href="/wishlist" className="relative p-2 text-gray-700 hover:text-red-500 transition-colors">
+              <Link href={buildPath('/wishlist')} className="relative p-2 text-gray-700 hover:text-red-500 transition-colors">
                 <Heart className="w-6 h-6" />
                 {wishlistCount > 0 && (
                   <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
@@ -121,7 +123,7 @@ export function Header() {
                 )}
               </Link>
 
-              <Link href="/cart" className="relative p-2 text-gray-700 hover:text-primary-600 transition-colors">
+              <Link href={buildPath('/cart')} className="relative p-2 text-gray-700 hover:text-primary-600 transition-colors">
                 <ShoppingCart className="w-6 h-6" />
                 {cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? (
                   <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
@@ -133,14 +135,14 @@ export function Header() {
               {/* User Menu */}
               {isAuthenticated ? (
                 <Link
-                  href="/account"
+                  href={buildPath('/account')}
                   className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                 >
                   <User className="w-6 h-6 text-gray-700" />
                 </Link>
               ) : (
                 <Link
-                  href="/login"
+                  href={buildPath('/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
@@ -183,7 +185,7 @@ export function Header() {
                   ))}
                   {!isAuthenticated && (
                     <Link
-                      href="/login"
+                      href={buildPath('/login')}
                       onClick={() => setIsMobileMenuOpen(false)}
                       className="px-4 py-3 text-primary-600 hover:bg-gray-50 rounded-lg font-medium"
                     >

package/src/components/OrderCard.tsx

@@ -8,12 +8,14 @@ import { formatPrice, formatDate } from '@/lib/utils/format';
 import { Badge } from './ui/Badge';
 import Link from 'next/link';
 import Image from 'next/image';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 interface OrderCardProps {
   order: PopulatedOrder;
 }
 
 export function OrderCard({ order }: OrderCardProps) {
+  const { buildPath } = useBasePath();
   const config = order.orderStatus;
 
   return (
@@ -77,7 +79,7 @@ export function OrderCard({ order }: OrderCardProps) {
             </a>
           )}
           {/* <Link
-            href={`/orders/${order.id}`}
+            href={buildPath(`/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

package/src/components/ProductCard.tsx

@@ -9,6 +9,7 @@ import { useWishlist } from '@/providers/WishlistProvider';
 import Image from 'next/image';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 
 interface ProductCardProps {
@@ -28,6 +29,7 @@ export function ProductCard({
   className
 }: ProductCardProps & { className?: string }) {
   const router = useRouter();
+  const { buildPath } = useBasePath();
   const [isFavorite, setIsFavorite] = useState(isFavorited);
   const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
   const [isHovered, setIsHovered] = useState(false);
@@ -233,7 +235,7 @@ export function ProductCard({
           type="button"
           onClick={(e) => {
             e.stopPropagation();
-            router.push(`/products/${product._id}`);
+            router.push(buildPath(`/products/${product._id}`));
           }}
           className={`w-full flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium  bg-primary-600 hover:bg-primary-700 text-white`}
         >

package/src/index.ts

@@ -6,6 +6,7 @@ export { ThemeProvider, useTheme } from './providers/ThemeProvider';
 export { AuthProvider, useAuth } from './providers/AuthProvider';
 export { CartProvider, useCart } from './providers/CartProvider';
 export { WishlistProvider, useWishlist } from './providers/WishlistProvider';
+export { useBasePath } from './providers/BasePathProvider';
 
 // Screens
 export { ShopScreen } from './screens/ShopScreen';

package/src/lib/api-adapter/config.ts

@@ -44,12 +44,15 @@ export function getCurrentConfig(): EcommerceConfig {
   return currentConfig;
 }
 
-// Token management
-const TOKEN_KEY = 'ecommerce_access_token';
+// Token management with store-scoped keys
+function getTokenKey(): string {
+  const storeId = currentConfig?.storeId || 'default';
+  return `ecommerce_access_token_${storeId}`;
+}
 
 export function setAuthToken(token: string): void {
   if (typeof window !== 'undefined') {
-    localStorage.setItem(TOKEN_KEY, token);
+    localStorage.setItem(getTokenKey(), token);
     // Update the configuration with new token
     if (apiConfiguration) {
       apiConfiguration.accessToken = () => token;
@@ -59,14 +62,14 @@ export function setAuthToken(token: string): void {
 
 export function getAuthToken(): string | null {
   if (typeof window !== 'undefined') {
-    return localStorage.getItem(TOKEN_KEY);
+    return localStorage.getItem(getTokenKey());
   }
   return null;
 }
 
 export function clearAuthToken(): void {
   if (typeof window !== 'undefined') {
-    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(getTokenKey());
     // Clear from configuration
     if (apiConfiguration) {
       apiConfiguration.accessToken = () => '';

package/src/providers/AuthProvider.tsx

@@ -34,7 +34,20 @@ interface AuthProviderProps {
 export function AuthProvider({ children }: AuthProviderProps) {
   const [user, setUser] = useState<UserEntity | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const USER_KEY = 'ecommerce_user';
+  
+  // Get store-scoped key for user cache
+  const getUserKey = () => {
+    if (typeof window === 'undefined') return 'ecommerce_user';
+    const token = getAuthToken();
+    if (!token) return 'ecommerce_user';
+    // Use a hash or storeId from token/config to namespace
+    try {
+      const config = require('@/lib/api-adapter/config').getCurrentConfig();
+      return `ecommerce_user_${config?.storeId || 'default'}`;
+    } catch {
+      return 'ecommerce_user';
+    }
+  };
 
   const refreshUser = useCallback(async () => {
     try {
@@ -55,7 +68,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
     // Hydrate user instantly from localStorage for fast UI, then validate in background
     if (typeof window !== 'undefined') {
       try {
-        const cached = localStorage.getItem(USER_KEY);
+        const userKey = getUserKey();
+        const cached = localStorage.getItem(userKey);
         if (cached) {
           const parsed: UserEntity = JSON.parse(cached);
           setUser(parsed);
@@ -79,7 +93,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
       }
       setUser(response.data.userData);
       if (typeof window !== 'undefined') {
-        localStorage.setItem(USER_KEY, JSON.stringify(response.data.userData));
+        localStorage.setItem(getUserKey(), JSON.stringify(response.data.userData));
       }
       return response.data;
     } finally {
@@ -96,7 +110,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
       }
       setUser(response.data.userData);
       if (typeof window !== 'undefined') {
-        localStorage.setItem(USER_KEY, JSON.stringify(response.data.userData));
+        localStorage.setItem(getUserKey(), JSON.stringify(response.data.userData));
       }
       return response.data;
     } finally {
@@ -110,7 +124,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
       clearAuthToken();
       setUser(null);
       if (typeof window !== 'undefined') {
-        localStorage.removeItem(USER_KEY);
+        localStorage.removeItem(getUserKey());
       }
     } finally {
       setIsLoading(false);

package/src/providers/BasePathProvider.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+
+interface BasePathContextValue {
+  basePath: string;
+  buildPath: (path: string) => string;
+}
+
+const BasePathContext = createContext<BasePathContextValue | undefined>(undefined);
+
+export function BasePathProvider({ basePath = '', children }: { basePath?: string; children: React.ReactNode }) {
+  const normalized = basePath ? (basePath.startsWith('/') ? basePath : `/${basePath}`) : '';
+
+  const buildPath = (path: string) => {
+    if (!normalized) return path;
+    if (!path) return normalized;
+    if (path.startsWith(normalized + '/')) return path; // already prefixed
+    if (path.startsWith('/')) return `${normalized}${path}`;
+    return `${normalized}/${path}`;
+  };
+
+  return (
+    <BasePathContext.Provider value={{ basePath: normalized, buildPath }}>
+      {children}
+    </BasePathContext.Provider>
+  );
+}
+
+export function useBasePath(): BasePathContextValue {
+  const ctx = useContext(BasePathContext);
+  if (!ctx) throw new Error('useBasePath must be used within BasePathProvider');
+  return ctx;
+}
+
+

package/src/providers/EcommerceProvider.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from './ThemeProvider';
 import { AuthProvider } from './AuthProvider';
 import { CartProvider } from './CartProvider';
 import { WishlistProvider } from './WishlistProvider';
+import { BasePathProvider } from './BasePathProvider';
 import { initializeApiAdapter } from '@/lib/api-adapter';
 import { Toaster } from 'sonner';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -15,9 +16,10 @@ interface EcommerceProviderProps {
   config: EcommerceConfig;
   children: React.ReactNode;
   withToaster?: boolean;
+  basePath?: string;
 }
 
-export function EcommerceProvider({ config, children, withToaster = true }: EcommerceProviderProps) {
+export function EcommerceProvider({ config, children, withToaster = true, basePath = '' }: EcommerceProviderProps) {
   useEffect(() => {
     // Initialize API adapter with store configuration
     // This sets up the real backend APIs with proper authentication and store ID
@@ -30,14 +32,16 @@ export function EcommerceProvider({ config, children, withToaster = true }: Ecom
   return (
     <QueryClientProvider client={client}>
     <ThemeProvider config={config}>
-      <AuthProvider>
-        <CartProvider>
-          <WishlistProvider>
-            {children}
-            {withToaster && <Toaster position="top-right" richColors />}
-          </WishlistProvider>
-        </CartProvider>
-      </AuthProvider>
+      <BasePathProvider basePath={basePath}>
+        <AuthProvider>
+          <CartProvider>
+            <WishlistProvider>
+              {children}
+              {withToaster && <Toaster position="top-right" richColors />}
+            </WishlistProvider>
+          </CartProvider>
+        </AuthProvider>
+      </BasePathProvider>
     </ThemeProvider>
     </QueryClientProvider>
   );

package/src/providers/FavoritesProvider.tsx

@@ -18,10 +18,20 @@ export function FavoritesProvider({ children }: { children: ReactNode }) {
   const [favorites, setFavorites] = useState<string[]>([]);
   const [isClient, setIsClient] = useState(false);
 
+  const getFavoritesKey = () => {
+    if (typeof window === 'undefined') return 'favorites';
+    try {
+      const config = require('@/lib/api-adapter/config').getCurrentConfig();
+      return `favorites_${config?.storeId || 'default'}`;
+    } catch {
+      return 'favorites';
+    }
+  };
+
   // Initialize state on client-side to avoid hydration issues
   useEffect(() => {
     setIsClient(true);
-    const savedFavorites = localStorage?.getItem('favorites');
+    const savedFavorites = localStorage?.getItem(getFavoritesKey());
     if (savedFavorites) {
       try {
         setFavorites(JSON.parse(savedFavorites));
@@ -34,7 +44,7 @@ export function FavoritesProvider({ children }: { children: ReactNode }) {
   // Save to localStorage whenever favorites change
   useEffect(() => {
     if (isClient) {
-      localStorage.setItem('favorites', JSON.stringify(favorites));
+      localStorage.setItem(getFavoritesKey(), JSON.stringify(favorites));
     }
   }, [favorites, isClient]);
 

package/src/screens/CartScreen.tsx

@@ -16,11 +16,13 @@ import { useCart } from '@/providers/CartProvider';
 import { formatPrice } from '@/lib/utils/format';
 import { useRouter } from 'next/navigation';
 import { CartItemPopulated } from '@/lib/Apis';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 
 export function CartScreen() {
   const router = useRouter();
   const { cart, isLoading } = useCart();
+  const { buildPath } = useBasePath();
 
   if (!cart || cart.cartBody.items.length === 0) {
     return (
@@ -31,7 +33,7 @@ export function CartScreen() {
             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')}
+            onAction={() => router.push(buildPath('/shop'))}
           />
         </div>
       </div>
@@ -145,14 +147,14 @@ export function CartScreen() {
               <Button
                 size="lg"
                 className="mt-6 w-full"
-                onClick={() => router.push('/checkout')}
+                onClick={() => router.push(buildPath('/checkout'))}
               >
                 Secure checkout
                 <ArrowRight className="h-5 w-5" />
               </Button>
               <button
                 type="button"
-                onClick={() => router.push('/shop')}
+                onClick={() => router.push(buildPath('/shop'))}
                 className="mt-4 w-full text-sm font-semibold text-primary-600 transition hover:text-primary-700"
               >
                 Continue shopping

package/src/screens/CategoriesScreen.tsx

@@ -8,10 +8,12 @@ import { useCategories } from '@/hooks/useProducts';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 export function CategoriesScreen() {
   const { categories, isLoading } = useCategories();
   const router = useRouter();
+  const { buildPath } = useBasePath();
 
   return (
     <div className="min-h-screen bg-slate-50">
@@ -74,7 +76,7 @@ export function CategoriesScreen() {
                 {categories.map((category) => (
                   <Link
                     key={category.id}
-                    href={`/shop?category=${category.name}`}
+                    href={buildPath(`/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">
@@ -109,7 +111,7 @@ export function CategoriesScreen() {
                 description="There are currently no product categories available."
                 icon={Package}
                 actionLabel="Shop products"
-                onAction={() => router.push('/shop')}
+                onAction={() => router.push(buildPath('/shop'))}
               />
             )}
           </motion.div>

package/src/screens/CheckoutScreen.tsx

@@ -29,6 +29,7 @@ import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { Card } from '@/components/ui/Card';
 import { AddressFormModal } from '@/components/AddressFormModal';
 import { Edit3, Trash2 } from 'lucide-react';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 import { addressSchema } from '@/lib/validations/address';
 import Image from 'next/image';
@@ -77,6 +78,7 @@ export function CheckoutScreen() {
   const router = useRouter();
   const { cart, clearCart } = useCart();
   const { isAuthenticated, user } = useAuth();
+  const { buildPath } = useBasePath();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isDelivery, setIsDelivery] = useState(true); // delivery or pickup
   const [paymentMethod, setPaymentMethod] = useState('Card');
@@ -282,7 +284,7 @@ export function CheckoutScreen() {
     setError(null);
     if (!isAuthenticated) {
       toast.error('Please login to continue');
-      setTimeout(() => router.push('/login?redirect=/checkout'), 50);
+      setTimeout(() => router.push(buildPath('/login?redirect=/checkout')), 50);
       return;
     }
     if (!cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
@@ -387,11 +389,11 @@ export function CheckoutScreen() {
         }
         toast.success('Order placed successfully!');
         await clearCart();
-        router.push(`/orders/${response.data?.id}`);
+        router.push(buildPath(`/orders/${response.data?.id}`));
       } else {
         toast.success('Order placed successfully!');
         await clearCart();
-        router.push(`/orders/${response.data?.id}`);
+        router.push(buildPath(`/orders/${response.data?.id}`));
       }
     } catch (err: any) {
       const msg = err?.message || (err?.response?.data?.message) || 'Failed to place order';
@@ -403,7 +405,7 @@ export function CheckoutScreen() {
   };
 
   if (!cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
-    router.push('/cart');
+    router.push(buildPath('/cart'));
     return null;
   }
   const subtotal = cart.total;

package/src/screens/CurrentOrdersScreen.tsx

@@ -15,10 +15,12 @@ import {
   Truck,
   Warehouse,
 } from 'lucide-react';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 export function CurrentOrdersScreen() {
   const router = useRouter();
   const { orders, isLoading } = useCurrentOrders();
+  const { buildPath } = useBasePath();
 
   const hasOrders = orders.length > 0;
 
@@ -54,7 +56,7 @@ export function CurrentOrdersScreen() {
               </p>
               <div className="mt-4 space-y-3 text-sm text-white/80">
                 <Link
-                  href="/orders"
+                  href={buildPath('/orders')}
                   className="flex items-center justify-between rounded-2xl bg-white/10 px-4 py-3 transition hover:bg-white/20"
                 >
                   <span className="font-semibold text-white">View order history</span>
@@ -97,7 +99,7 @@ export function CurrentOrdersScreen() {
                     title="No active orders"
                     description="Start a new order to see live preparation, packing, and delivery updates here."
                     actionLabel="Shop wellness essentials"
-                    onAction={() => router.push('/shop')}
+                    onAction={() => router.push(buildPath('/shop'))}
                   />
                 </div>
               )}

package/src/screens/HomeScreen.tsx

@@ -8,10 +8,12 @@ import { ProductCard } from '@/components/ProductCard';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { ProductCardSkeleton } from '@/components/ui/Skeleton';
 import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
 import { useProducts } from '@/hooks/useProducts';
 
 export default function HomeScreen() {
-    const router = useRouter();
+  const router = useRouter();
+  const { buildPath } = useBasePath();
     const { products, isLoading } = useProducts();
     const { isInWishlist } = useWishlist();
 
@@ -66,7 +68,7 @@ export default function HomeScreen() {
                             <Button
                                 size="lg"
                                 variant="secondary"
-                                onClick={() => router.push('/shop')}
+                                onClick={() => router.push(buildPath('/shop'))}
                                 className="text-lg px-8 py-4"
                             >
                                 Shop Now
@@ -75,7 +77,7 @@ export default function HomeScreen() {
                             <Button
                                 size="lg"
                                 variant="outline"
-                                onClick={() => router.push('/about')}
+                                onClick={() => router.push(buildPath('/about'))}
                                 className="text-lg px-8 py-4 bg-white/10 backdrop-blur-sm border-white text-white hover:bg-white/20"
                             >
                                 Learn More
@@ -156,7 +158,7 @@ export default function HomeScreen() {
                                         <ProductCard
                                             product={product}
                                             isFavorited={isInWishlist(product.id)}
-                                            onClickProduct={(p) => router.push(`/products/${p.id}`)}
+                                            onClickProduct={(p) => router.push(buildPath(`/products/${p.id}`))}
                                         />
                                     </motion.div>
                                 );
@@ -167,7 +169,7 @@ export default function HomeScreen() {
                     <div className="text-center mt-12">
                         <Button
                             size="lg"
-                            onClick={() => router.push('/shop')}
+                            onClick={() => router.push(buildPath('/shop'))}
                         >
                             View All Products
                             <ArrowRight className="w-5 h-5" />
@@ -194,7 +196,7 @@ export default function HomeScreen() {
                         <Button
                             size="lg"
                             variant="secondary"
-                            onClick={() => router.push('/register')}
+                            onClick={() => router.push(buildPath('/register'))}
                             className="text-lg px-8 py-4"
                         >
                             Create an Account

package/src/screens/LoginScreen.tsx

@@ -20,6 +20,7 @@ import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { useAuth } from '@/providers/AuthProvider';
 import { toast } from 'sonner';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 const loginSchema = z.object({
   email: z.string().email('Enter a valid email address'),
@@ -30,8 +31,9 @@ type LoginFormData = z.infer<typeof loginSchema>;
 
 export function LoginScreen() {
   const router = useRouter();
+  const { buildPath } = useBasePath();
   const searchParams = useSearchParams();
-  const redirectUrl = searchParams?.get('redirect') || '/';
+  const redirectUrl = searchParams?.get('redirect') || buildPath('/');
   const { login } = useAuth();
   const [showPassword, setShowPassword] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);