@datlv-trustshop/shopify-inapp-components 0.1.24 → 0.1.25

package/dist/hooks/useFloatingCards.js

@@ -9,7 +9,7 @@ export function useFloatingCards(options = {}) {
     const dashboardContext = useDashboardContext();
     const contextLocale = dashboardContext?.locale;
     // Use props locale if provided, otherwise use context locale, fallback to 'en'
-    const locale = propsLocale || contextLocale || 'en';
+    const locale = propsLocale || contextLocale || "en";
     const [cards, setCards] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -23,7 +23,6 @@ export function useFloatingCards(options = {}) {
         setError(null);
         try {
             const id = shopId;
-            // Use proxy in development
             const apiUrl = typeof window !== "undefined" &&
                 window.location.hostname === "localhost"
                 ? `/api/campaigns?shop_id=${id}&locale=${locale}`
@@ -41,7 +40,6 @@ export function useFloatingCards(options = {}) {
             }
             const data = await response.json();
             if (data.success && Array.isArray(data.data)) {
-                // Transform the API response to match our FloatingCardData interface
                 const transformedCards = data.data.map((card) => ({
                     ...card,
                     // Ensure date format
@@ -138,19 +136,36 @@ export function useVisibleFloatingCards(options = {}) {
             return false;
         }
         // Check display_pages logic
-        if (card.display_pages !== undefined) {
+        if (card.display_pages !== undefined && card.display_pages !== null) {
             // If display_pages is empty array, show on all pages
             if (card.display_pages.length === 0) {
                 return true;
             }
             // If display_pages has values, check if current route matches
-            if (currentRoute) {
-                // Extract the page key from the route (e.g., "/settings" -> "settings")
-                const currentPage = currentRoute.replace(/^\//, '').split('/')[0];
+            if (currentRoute !== undefined) {
+                // Extract the page key from the route
+                // Special handling: "/" or "" should map to "dashboard"
+                let currentPage = currentRoute.replace(/^\//, "").split("/")[0];
+                // Map root route to dashboard (in-app convention)
+                if (!currentPage || currentPage === "" || currentRoute === "/") {
+                    currentPage = "dashboard";
+                }
+                // Debug log for development
+                if (typeof window !== "undefined" &&
+                    window.location.hostname === "localhost") {
+                    console.log("[FloatingCard] Route matching:", {
+                        cardId: card.id,
+                        currentRoute,
+                        currentPage,
+                        display_pages: card.display_pages,
+                        matches: card.display_pages.includes(currentPage),
+                    });
+                }
+                // Check if current page is in display_pages
                 return card.display_pages.includes(currentPage);
             }
-            // If no current route provided, don't show the card
-            return false;
+            // If no current route provided, assume dashboard
+            return card.display_pages.includes("dashboard");
         }
         // If display_pages is not defined, show on all pages (backward compatibility)
         return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datlv-trustshop/shopify-inapp-components",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "private": false,
   "description": "React TypeScript components for Shopify in-app dashboard content",
   "main": "dist/index.js",