hey-pharmacist-ecommerce 1.1.1 → 1.1.3

package/package.json

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

@@ -61,7 +61,7 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
       root.style.setProperty(`--header-via`, primaryShades[600]);
       root.style.setProperty(`--header-to`, secondaryShades[600]);
     }
-  }, [config.colors]);
+  }, [config]);
 
   return (
     <ThemeContext.Provider value={{ config }}>

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();
 
@@ -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>
                                 );

package/src/screens/SearchResultsScreen.tsx

@@ -12,9 +12,11 @@ import Link from 'next/link';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 export default function SearchPage() {
-    const router = useRouter();
+  const router = useRouter();
+  const { buildPath } = useBasePath();
     const searchParams = useSearchParams();
     const searchQuery = searchParams.get('q') || '';
     const [products, setProducts] = useState<ExtendedProductDTO[]>([]);
@@ -136,7 +138,7 @@ export default function SearchPage() {
                             <ProductCard
                                 product={product}
                                 isFavorited={isInWishlist(product.id)}
-                                onClickProduct={(p) => router.push(`/products/${p.id}`)}
+                                onClickProduct={(p) => router.push(buildPath(`/products/${p.id}`))}
                             />
                         ))}
                     </div>

package/src/screens/ShopScreen.tsx

@@ -23,6 +23,7 @@ import {
 } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
 import { ProductCard } from '@/components/ProductCard';
 import { ProductCardSkeleton } from '@/components/ui/Skeleton';
 import { EmptyState } from '@/components/EmptyState';
@@ -42,6 +43,7 @@ interface ShopScreenProps {
 
 export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProps) {
   const router = useRouter();
+  const { buildPath } = useBasePath();
   const [filters, setFilters] = useState<ProductFilters>(initialFilters);
   const [page, setPage] = useState(1);
   const [showFilters, setShowFilters] = useState(false);
@@ -1026,7 +1028,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                               product={product}
                               onClickProduct={(item) => {
                                 const productData = encodeURIComponent(JSON.stringify(item));
-                                router.push(`/products/${item.id}?product=${productData}`);
+                                router.push(buildPath(`/products/${item.id}?product=${productData}`));
                               }}
                             />
                           </div>
@@ -1049,7 +1051,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                               key={product.id}
                               whileHover={{ y: -4 }}
                               className="group flex cursor-pointer flex-col gap-6 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition hover:shadow-xl md:flex-row md:items-start"
-                              onClick={() => router.push(`/products/${product.id}`)}
+                              onClick={() => router.push(buildPath(`/products/${product.id}`))}
                             >
                               <div className="relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40">
                                 <Image
@@ -1111,7 +1113,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                   size="sm"
                                   onClick={(event) => {
                                     event.stopPropagation();
-                                    router.push(`/products/${product._id}`);
+                                    router.push(buildPath(`/products/${product._id}`));
                                   }}
                                 >
                                   View product

package/src/screens/WishlistScreen.tsx

@@ -23,6 +23,7 @@ import { useWishlistProducts } from '@/hooks/useWishlistProducts';
 import Image from 'next/image';
 import { formatPrice } from '@/lib/utils/format';
 import { ExtendedProductDTO } from '@/lib/Apis';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 type SortOption = 'featured' | 'price-low' | 'price-high' | 'name' | 'availability';
 
@@ -45,6 +46,7 @@ interface InsightCardProps {
 
 export default function WishlistScreen() {
     const router = useRouter();
+  const { buildPath } = useBasePath();
     const { isAuthenticated } = useAuth() || {};
     const {
         products: wishlistItems,
@@ -314,7 +316,7 @@ export default function WishlistScreen() {
                                                     >
                                                         <ProductCard
                                                             product={product as ExtendedProductDTO}
-                                                            onClickProduct={(p) => router.push(`/products/${p.id}`)}
+                                                          onClickProduct={(p) => router.push(buildPath(`/products/${p.id}`))}
                                                             onFavorite={() => handleRemoveFromWishlist(product.id)}
                                                             isFavorited
                                                         />