hey-pharmacist-ecommerce 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "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/ui/Modal.tsx

@@ -14,6 +14,8 @@ interface ModalProps {
 
 export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalProps) {
   useEffect(() => {
+    if (typeof window === 'undefined') return;
+    
     if (isOpen) {
       document.body.style.overflow = 'hidden';
     } else {

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/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

@@ -68,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
@@ -77,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
@@ -169,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" />
@@ -196,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);

package/src/screens/OrdersScreen.tsx

@@ -11,6 +11,7 @@ import { useOrders } from '@/hooks/useOrders';
 import { FilterChips } from '@/components/FilterChips';
 import { useRouter } from 'next/navigation';
 import { ManualOrderDTOOrderStatusEnum, PaymentPaymentStatusEnum } from '@/lib/Apis';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 const STATUS_FILTERS = ['All', ...Object.values(ManualOrderDTOOrderStatusEnum)];
 const PAYMENT_FILTERS = ['All', ...Object.values(PaymentPaymentStatusEnum)];
@@ -19,6 +20,7 @@ type PaymentFilterType = (typeof PAYMENT_FILTERS)[number];
 
 export function OrdersScreen() {
   const router = useRouter();
+  const { buildPath } = useBasePath();
   const [page, setPage] = useState(1);
   const [selectedFilter, setSelectedFilter] = useState<StatusFilterType>('All');
   const [selectedPaymentFilter, setSelectedPaymentFilter] = useState<PaymentFilterType>('All');
@@ -160,7 +162,7 @@ export function OrdersScreen() {
                   title="No orders found for these filters"
                   description="Adjust the status or payment filters, or browse the shop for new essentials."
                   actionLabel="Shop products"
-                  onAction={() => router.push('/shop')}
+                  onAction={() => router.push(buildPath('/shop'))}
                 />
               )}
             </div>

package/src/screens/ProductDetailScreen.tsx

@@ -32,6 +32,7 @@ import { ProductVariantsApi } from '@/lib/Apis/apis/product-variants-api';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { ProductsApi, ProductVariant, ProductVariantInventoryStatusEnum } from '@/lib/Apis';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 const safeFormatDate = (date?: Date | string, format: 'long' | 'short' = 'long'): string => {
   if (!date) return 'N/A';
@@ -51,6 +52,7 @@ interface ProductDetailScreenProps {
 export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   // Hooks and state at the top level
   const router = useRouter();
+  const { buildPath } = useBasePath();
   const { product: productData, isLoading } = useProduct(productId);
   const { addToCart } = useCart();
 
@@ -330,17 +332,17 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
               <Button
                 variant="ghost"
                 className="text-white hover:bg-white/10"
-                onClick={() => router.push('/shop')}
+                onClick={() => router.push(buildPath('/shop'))}
               >
                 <ArrowLeft className="h-5 w-5" />
                 Continue shopping
               </Button>
               <div className="hidden items-center gap-3 text-sm text-white/80 md:flex">
-                <Link href="/" className="transition hover:text-white">
+                <Link href={buildPath('/')} className="transition hover:text-white">
                   Home
                 </Link>
                 <ChevronRight className="h-4 w-4" />
-                <Link href="/shop" className="transition hover:text-white">
+                <Link href={buildPath('/shop')} className="transition hover:text-white">
                   Shop
                 </Link>
                 <ChevronRight className="h-4 w-4" />