@datlv-trustshop/shopify-inapp-components 0.1.20 → 0.1.22

package/dist/components/FloatingCard.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+export interface FloatingCardData {
+    id: number;
+    key: string;
+    type: string;
+    priority: number;
+    title: string;
+    description: string;
+    date: string;
+    tag?: {
+        label: string;
+        tone: "success" | "info" | "warning" | "critical" | "new";
+    };
+    img_url: string;
+    image_alt?: string | null;
+    image_type: string;
+    primary_action?: {
+        label: string;
+        url: string;
+        external: boolean;
+        variant: "primary" | "secondary";
+    };
+    secondary_action?: {
+        label: string;
+        url: string;
+        external: boolean;
+        variant: "primary" | "secondary";
+    };
+    dismissible: boolean;
+    auto_close_after?: number | null;
+    reappear_interval?: number | null;
+    display_pages?: string[];
+}
+interface FloatingCardProps {
+    data: FloatingCardData;
+    onDismiss?: () => void;
+    onPrimaryAction?: (data: FloatingCardData) => void;
+    onSecondaryAction?: (data: FloatingCardData) => void;
+}
+export declare const FloatingCard: React.FC<FloatingCardProps>;
+export default FloatingCard;

package/dist/components/FloatingCard.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, BlockStack, InlineStack, Text, Badge, Button, Box, } from "@shopify/polaris";
+import { XIcon } from "@shopify/polaris-icons";
+export const FloatingCard = ({ data, onDismiss, onPrimaryAction, onSecondaryAction, }) => {
+    const handlePrimaryAction = () => {
+        if (data.primary_action) {
+            const url = data.primary_action.url;
+            // Check if it's an external URL
+            if (data.primary_action.external) {
+                window.open(url, "_blank");
+            }
+            // Check if it's a modal trigger
+            else if (url === "modal" || url === "/pricing") {
+                // Pass the full card data to the handler for modal handling
+                onPrimaryAction?.(data);
+            }
+            // Check if it's an internal route
+            else if (url?.startsWith("/")) {
+                // Pass the full card data for internal navigation
+                onPrimaryAction?.(data);
+            }
+            // Default: just call the handler
+            else {
+                onPrimaryAction?.(data);
+            }
+        }
+    };
+    const handleSecondaryAction = () => {
+        if (data.secondary_action) {
+            const url = data.secondary_action.url;
+            if (data.secondary_action.external) {
+                window.open(url, "_blank");
+            }
+            else if (url?.startsWith("/") || url === "modal") {
+                // Pass the full card data for internal handling
+                onSecondaryAction?.(data);
+            }
+            else {
+                onSecondaryAction?.(data);
+            }
+        }
+    };
+    return (_jsx("div", { className: "floating-card", children: _jsxs(Card, { padding: "0", roundedAbove: "sm", children: [data.dismissible && (_jsx("button", { className: "floating-card-close", onClick: onDismiss, "aria-label": "Close", children: _jsx(XIcon, {}) })), _jsxs(BlockStack, { gap: "0", children: [data.img_url && (_jsx("div", { className: "floating-card-image-container", children: _jsx("img", { src: data.img_url, alt: data.image_alt || data.title, style: {
+                                    width: "100%",
+                                    height: "100%",
+                                    objectFit: "cover",
+                                }, onError: (e) => {
+                                    console.error("Image failed to load:", data.img_url);
+                                    e.target.style.display = "none";
+                                } }) })), _jsx(Box, { padding: "400", children: _jsxs(BlockStack, { gap: "500", children: [_jsxs(BlockStack, { gap: "300", children: [_jsxs("div", { style: {
+                                                    display: "flex",
+                                                    flexDirection: "column",
+                                                    gap: "6px",
+                                                }, children: [_jsxs("div", { style: {
+                                                            display: "flex",
+                                                            flexDirection: "row",
+                                                            gap: "6px",
+                                                            alignItems: "start"
+                                                        }, children: [_jsx(Text, { as: "h2", variant: "bodyLg", fontWeight: "semibold", children: data.title }), data.tag && (_jsx(Badge, { tone: data.tag.tone || "success", children: data.tag.label }))] }), _jsx(Text, { as: "p", variant: "bodySm", children: data.date })] }), _jsx(Text, { as: "p", variant: "bodyMd", children: data.description })] }), _jsxs(InlineStack, { gap: "200", children: [data.primary_action && (_jsx(Button, { variant: data.primary_action.variant === "primary"
+                                                    ? "primary"
+                                                    : "plain", onClick: handlePrimaryAction, children: data.primary_action.label })), data.secondary_action && (_jsx(Button, { variant: "tertiary", onClick: handleSecondaryAction, children: data.secondary_action.label }))] })] }) })] })] }) }));
+};
+export default FloatingCard;

package/dist/components/PartnerIntegration.js

@@ -113,7 +113,7 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                                                         }, title: status.upgradeBadgeTooltip, children: [status.upgradeBadgeIcon && (_jsx("span", { style: {
                                                                     display: "inline-flex",
                                                                     alignItems: "center",
-                                                                }, children: status.upgradeBadgeIcon })), _jsx("span", { children: status.upgradeBadgeText || translations.partnerIntegration?.upgradeBadge?.upgrade || "Upgrade" })] }))] }), item.content && (_jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: item.content }))] }), _jsx(InlineStack, { gap: "200", children: status ? (_jsxs(_Fragment, { children: [item.button_install_text && (_jsx(Button, { icon: ExternalIcon, onClick: () => handleInstall(item), children: item.button_install_text })), item.button_manage_text && (_jsx(Button, { onClick: () => handleManage(item), disabled: item.key === "after_ship" ? (status.showUpgradeBadge === true) : status.showUpgradeBadge === true, children: item.button_manage_text }))] })) : (_jsxs(_Fragment, { children: [item.button_manage_text && (_jsx(Button, { onClick: () => handleManage(item), children: item.button_manage_text })), item.button_install_text && (_jsx(Button, { icon: ExternalIcon, onClick: () => handleInstall(item), children: item.button_install_text }))] })) })] }) })] }) }) }, `integration--${item.id || item.key}`));
+                                                                }, children: status.upgradeBadgeIcon })), _jsx("span", { children: status.upgradeBadgeText || translations.partnerIntegration?.upgradeBadge?.upgrade || "Upgrade" })] }))] }), item.content && (_jsx(Text, { as: "p", variant: "bodyMd", children: item.content }))] }), _jsx(InlineStack, { gap: "200", children: status ? (_jsxs(_Fragment, { children: [item.button_install_text && (_jsx(Button, { icon: ExternalIcon, onClick: () => handleInstall(item), children: item.button_install_text })), item.button_manage_text && (_jsx(Button, { onClick: () => handleManage(item), disabled: item.key === "after_ship" ? (status.showUpgradeBadge === true) : status.showUpgradeBadge === true, children: item.button_manage_text }))] })) : (_jsxs(_Fragment, { children: [item.button_manage_text && (_jsx(Button, { onClick: () => handleManage(item), children: item.button_manage_text })), item.button_install_text && (_jsx(Button, { icon: ExternalIcon, onClick: () => handleInstall(item), children: item.button_install_text }))] })) })] }) })] }) }) }, `integration--${item.id || item.key}`));
     };
     // Loading state
     if (loading) {

package/dist/components/index.d.ts

@@ -8,3 +8,4 @@ export * from "./WhatsNew";
 export * from "./GrowApps";
 export * from "./PartnerList";
 export * from "./PartnerIntegration";
+export * from "./FloatingCard";

package/dist/components/index.js

@@ -8,3 +8,4 @@ export * from "./WhatsNew";
 export * from "./GrowApps";
 export * from "./PartnerList";
 export * from "./PartnerIntegration";
+export * from "./FloatingCard";

package/dist/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from "./useArticles";
 export * from "./useWhatsNew";
 export * from "./useGrowApps";
 export * from "./usePartnerIntegration";
+export * from "./useFloatingCards";

package/dist/hooks/index.js

@@ -5,3 +5,4 @@ export * from "./useArticles";
 export * from "./useWhatsNew";
 export * from "./useGrowApps";
 export * from "./usePartnerIntegration";
+export * from "./useFloatingCards";

package/dist/hooks/useFloatingCards.d.ts

@@ -0,0 +1,32 @@
+import type { FloatingCardData } from "../components/FloatingCard";
+export type { FloatingCardData } from "../components/FloatingCard";
+interface UseFloatingCardsOptions {
+    shopId?: string;
+    autoFetch?: boolean;
+    currentRoute?: string;
+    locale?: string;
+}
+interface UseFloatingCardsReturn {
+    cards: FloatingCardData[];
+    loading: boolean;
+    error: Error | null;
+    dismissedCards: Set<number>;
+    dismissCard: (cardId: number) => void;
+    resetDismissedCards: () => void;
+    fetchCards: () => Promise<void>;
+}
+/**
+ * Hook to fetch and manage floating cards (campaigns)
+ */
+export declare function useFloatingCards(options?: UseFloatingCardsOptions): UseFloatingCardsReturn;
+/**
+ * Get visible (non-dismissed) cards
+ */
+export declare function useVisibleFloatingCards(options?: UseFloatingCardsOptions): {
+    visibleCards: FloatingCardData[];
+    loading: boolean;
+    error: Error | null;
+    dismissCard: (cardId: number) => void;
+    resetDismissedCards: () => void;
+    hasDismissedCards: boolean;
+};

package/dist/hooks/useFloatingCards.js

@@ -0,0 +1,167 @@
+import { useState, useEffect, useCallback } from "react";
+import { useDashboardContext } from "../provider/DashboardProvider";
+/**
+ * Hook to fetch and manage floating cards (campaigns)
+ */
+export function useFloatingCards(options = {}) {
+    const { shopId, autoFetch = true, locale: propsLocale } = options;
+    // Get locale from DashboardProvider context
+    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 [cards, setCards] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [dismissedCards, setDismissedCards] = useState(new Set());
+    const fetchCards = useCallback(async () => {
+        if (!shopId) {
+            setError(new Error("Shop ID is required"));
+            return;
+        }
+        setLoading(true);
+        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}`
+                : `https://ops.trustshop.io/api/campaigns?shop_id=${id}&locale=${locale}`;
+            const response = await fetch(apiUrl, {
+                method: "GET",
+                headers: {
+                    Accept: "application/json",
+                    "Content-Type": "application/json",
+                },
+                credentials: "include",
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch campaigns: ${response.statusText}`);
+            }
+            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
+                    date: card.date || `Updated: ${new Date().toLocaleDateString()}`,
+                    // Transform tag tone if needed
+                    tag: card.tag
+                        ? {
+                            ...card.tag,
+                            tone: card.tag.tone || "info",
+                        }
+                        : undefined,
+                }));
+                setCards(transformedCards);
+            }
+            else {
+                setCards([]);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Unknown error"));
+            setCards([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [shopId, locale]);
+    const dismissCard = useCallback((cardId) => {
+        setDismissedCards((prev) => {
+            const newSet = new Set(prev);
+            newSet.add(cardId);
+            // Store in localStorage for persistence
+            try {
+                localStorage.setItem("trustshop_dismissed_cards", JSON.stringify(Array.from(newSet)));
+            }
+            catch (e) {
+                console.error("Failed to save dismissed cards:", e);
+            }
+            return newSet;
+        });
+    }, []);
+    const resetDismissedCards = useCallback(() => {
+        setDismissedCards(new Set());
+        try {
+            localStorage.removeItem("trustshop_dismissed_cards");
+        }
+        catch (e) {
+            console.error("Failed to clear dismissed cards:", e);
+        }
+    }, []);
+    // Load dismissed cards from localStorage on mount
+    useEffect(() => {
+        try {
+            const stored = localStorage.getItem("trustshop_dismissed_cards");
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                if (Array.isArray(parsed)) {
+                    setDismissedCards(new Set(parsed));
+                }
+            }
+        }
+        catch (e) {
+            console.error("Failed to load dismissed cards:", e);
+        }
+    }, []);
+    // Auto-fetch on mount or when shopId/locale changes
+    useEffect(() => {
+        if (autoFetch && shopId) {
+            fetchCards();
+        }
+    }, [autoFetch, shopId, fetchCards]); // fetchCards already depends on locale
+    return {
+        cards,
+        loading,
+        error,
+        dismissedCards,
+        dismissCard,
+        resetDismissedCards,
+        fetchCards,
+    };
+}
+/**
+ * Get visible (non-dismissed) cards
+ */
+export function useVisibleFloatingCards(options = {}) {
+    const { currentRoute, ...restOptions } = options;
+    // Note: locale is passed through in restOptions
+    const { cards, loading, error, dismissedCards, dismissCard, resetDismissedCards, } = useFloatingCards(restOptions);
+    // Filter cards based on:
+    // 1. Not dismissed
+    // 2. Route matching (if display_pages is set)
+    const visibleCards = cards.filter((card) => {
+        // Check if card is dismissed
+        if (dismissedCards.has(card.id)) {
+            return false;
+        }
+        // Check display_pages logic
+        if (card.display_pages !== undefined) {
+            // 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];
+                return card.display_pages.includes(currentPage);
+            }
+            // If no current route provided, don't show the card
+            return false;
+        }
+        // If display_pages is not defined, show on all pages (backward compatibility)
+        return true;
+    });
+    const hasDismissedCards = dismissedCards.size > 0;
+    return {
+        visibleCards,
+        loading,
+        error,
+        dismissCard,
+        resetDismissedCards,
+        hasDismissedCards,
+    };
+}

package/dist/hooks/usePartnerIntegration.js

@@ -9,7 +9,7 @@ export function usePartnerIntegrations() {
         const integrations = state.data?.integrations || [];
         const groupsMap = [];
         // Group by category_key
-        const reviewSources = integrations.filter((item) => item.category_key === "review_sources");
+        const reviewSources = integrations.filter((item) => item.category_key === "review_sources" && item.key !== "google_reviews");
         if (reviewSources.length > 0) {
             groupsMap.push({
                 title: translations.partnerIntegration?.reviewSourcesTitle ||

package/package.json

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