@datlv-trustshop/shopify-inapp-components 0.1.12 → 0.1.14

package/dist/components/PartnerIntegration.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { IntegrationItem } from "../types/integration";
+export type IntegrationStatusInfo = {
+    isInstalled?: boolean;
+    isConnected?: boolean;
+    isActive?: boolean;
+    isPending?: boolean;
+    showUpgradeBadge?: boolean;
+    upgradeBadgeText?: string;
+    upgradeBadgeIcon?: React.ReactNode;
+    upgradeBadgeTooltip?: string;
+    upgradeBadgePlan?: "basic" | "pro";
+};
+export type IntegrationStatusProvider = (integration: IntegrationItem) => IntegrationStatusInfo | undefined;
+export interface PartnerIntegrationProps {
+    className?: string;
+    onManage?: (item: IntegrationItem) => void;
+    onInstall?: (item: IntegrationItem) => void;
+    onOpen?: (item: IntegrationItem) => void;
+    onUpgradeClick?: (item: IntegrationItem) => void;
+    renderCard?: (item: IntegrationItem, handlers: {
+        onManage: () => void;
+        onInstall: () => void;
+        onOpen: () => void;
+    }) => React.ReactNode;
+    maxColumns?: 1 | 2 | 3;
+    showEmptyState?: boolean;
+    statusProvider?: IntegrationStatusProvider;
+}
+export declare const PartnerIntegration: React.FC<PartnerIntegrationProps>;
+export default PartnerIntegration;

package/dist/components/PartnerIntegration.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, BlockStack, Box, Button, Card, InlineStack, Text, Grid, SkeletonBodyText, EmptyState, } from "@shopify/polaris";
+import { ExternalIcon } from "@shopify/polaris-icons";
+import { usePartnerIntegrations } from "../hooks/usePartnerIntegration";
+import { useDashboardContext } from "../provider/DashboardProvider";
+export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen, onUpgradeClick, renderCard, maxColumns = 2, showEmptyState = true, statusProvider, }) => {
+    const { groups, loading, error } = usePartnerIntegrations();
+    const { translations } = useDashboardContext();
+    const handleManage = (item) => {
+        const url = item.button_manage_url;
+        if (url) {
+            // Check if it's an internal route (starts with /)
+            if (url.startsWith("/")) {
+                // Let the parent handle internal navigation
+                onManage?.(item);
+            }
+            else {
+                window.open(url, "_blank");
+                onOpen?.(item);
+            }
+        }
+        else {
+            onManage?.(item);
+        }
+    };
+    const handleInstall = (item) => {
+        const url = item.button_install_link || item.button_install_url || item.app_url;
+        if (url) {
+            window.open(url, "_blank");
+        }
+        onInstall?.(item);
+    };
+    const renderIntegrationCard = (item) => {
+        if (renderCard) {
+            return renderCard(item, {
+                onManage: () => handleManage(item),
+                onInstall: () => handleInstall(item),
+                onOpen: () => {
+                    if (item.app_url) {
+                        window.open(item.app_url, "_blank");
+                    }
+                    onOpen?.(item);
+                },
+            });
+        }
+        // Get status from provider or use defaults
+        const status = statusProvider?.(item);
+        // Determine badge based on status or integration key
+        const getBadgeInfo = () => {
+            // Use external status if provided
+            if (status) {
+                if (status.isConnected) {
+                    return {
+                        text: translations.partnerIntegration?.connected || "Connected",
+                        tone: "success",
+                    };
+                }
+                if (status.isActive) {
+                    return {
+                        text: translations.partnerIntegration?.active || "Active",
+                        tone: "success",
+                    };
+                }
+                if (status.isInstalled) {
+                    return {
+                        text: translations.partnerIntegration?.installed || "Installed",
+                        tone: "info",
+                    };
+                }
+                if (status.isPending) {
+                    return {
+                        text: "Pending",
+                        tone: "warning",
+                    };
+                }
+                // If status explicitly says inactive
+                if (status.isActive === false) {
+                    return {
+                        text: translations.partnerIntegration?.inactive || "Inactive",
+                        tone: undefined,
+                    };
+                }
+            }
+            // Fallback to default logic based on key
+            if (item.key === "google_reviews") {
+                return {
+                    text: translations.partnerIntegration?.connected || "Connected",
+                    tone: "success",
+                };
+            }
+            if (item.key === "after_ship") {
+                // AfterShip shows both buttons, so it's likely installed but inactive by default
+                return {
+                    text: translations.partnerIntegration?.inactive || "Inactive",
+                    tone: undefined,
+                };
+            }
+            // Check if installed based on having both manage and install buttons
+            // Items with both buttons are typically installed but may be inactive
+            if (item.button_manage_text && item.button_install_text) {
+                return {
+                    text: translations.partnerIntegration?.inactive || "Inactive",
+                    tone: undefined,
+                };
+            }
+            // Only manage button = installed and active
+            if (item.button_manage_text && !item.button_install_text) {
+                return {
+                    text: translations.partnerIntegration?.active || "Active",
+                    tone: "success",
+                };
+            }
+            return null;
+        };
+        const badgeInfo = getBadgeInfo();
+        return (_jsx(Card, { children: _jsx(InlineStack, { gap: "300", children: _jsxs(InlineStack, { gap: "300", wrap: false, children: [item.icon_url && (_jsx("img", { src: item.icon_url, alt: item.title, style: {
+                                width: "40px",
+                                height: "40px",
+                                borderRadius: "8px",
+                            } })), _jsx(Box, { children: _jsxs(BlockStack, { gap: "300", children: [_jsxs(BlockStack, { gap: "100", children: [_jsxs(InlineStack, { gap: "200", align: "start", children: [_jsx(Text, { as: "p", variant: "bodyLg", fontWeight: "bold", children: item.title }), badgeInfo && (_jsx(Badge, { tone: badgeInfo.tone, children: badgeInfo.text })), status?.showUpgradeBadge && (_jsxs("div", { onClick: () => onUpgradeClick?.(item), style: {
+                                                            cursor: "pointer",
+                                                            display: "inline-flex",
+                                                            alignItems: "center",
+                                                            padding: "4px 6px",
+                                                            gap: "4px",
+                                                            borderRadius: "var(--p-border-radius-150)",
+                                                            backgroundColor: status.upgradeBadgePlan === "pro"
+                                                                ? "#F0F2FF"
+                                                                : "#FFF1E3",
+                                                            color: status.upgradeBadgePlan === "pro"
+                                                                ? "#7126FF"
+                                                                : "#4F4700",
+                                                            fontSize: "12px",
+                                                            fontWeight: 500,
+                                                        }, title: status.upgradeBadgeTooltip, children: [status.upgradeBadgeIcon && (_jsx("span", { style: {
+                                                                    display: "inline-flex",
+                                                                    alignItems: "center",
+                                                                }, children: status.upgradeBadgeIcon })), _jsx("span", { children: status.upgradeBadgeText || "Upgrade" })] }))] }), item.content && (_jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: item.content }))] }), _jsx(InlineStack, { gap: "200", children: status ? (
+                                        // Status provider exists, use it for button logic
+                                        status.isConnected ? (
+                                        // Connected: show manage button
+                                        _jsx(Button, { onClick: () => handleManage(item), children: item.button_manage_text ||
+                                                translations.partnerIntegration?.manage ||
+                                                "Manage" })) : status.isInstalled ? (
+                                        // Installed but not connected
+                                        _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 }))] })) : (
+                                        // Not installed: show install button
+                                        item.button_install_text && (_jsx(Button, { icon: ExternalIcon, onClick: () => handleInstall(item), children: item.button_install_text })))) : (
+                                        // No status provider, show all available buttons from API
+                                        _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) {
+        return (_jsx("div", { className: className, children: _jsx(BlockStack, { gap: "600", children: [1, 2, 3].map((groupIndex) => (_jsxs(BlockStack, { gap: "400", children: [_jsx(Box, { paddingInlineStart: { xs: "200", md: "0" }, children: _jsx(SkeletonBodyText, { lines: 1 }) }), _jsx(Grid, { children: [1, 2].map((cardIndex) => (_jsx(Grid.Cell, { columnSpan: { xs: 6, md: maxColumns === 1 ? 6 : 6 }, children: _jsx(Card, { children: _jsx(BlockStack, { gap: "300", children: _jsx(SkeletonBodyText, { lines: 3 }) }) }) }, `skeleton-card-${groupIndex}-${cardIndex}`))) })] }, `skeleton-group-${groupIndex}`))) }) }));
+    }
+    // Error state
+    if (error) {
+        return (_jsx("div", { className: className, children: _jsx(Card, { children: _jsx(EmptyState, { heading: translations.partnerIntegration?.errorTitle ||
+                        "Unable to load integrations", image: "", children: _jsx("p", { children: translations.partnerIntegration?.errorMessage ||
+                            "Please try again later" }) }) }) }));
+    }
+    // Empty state
+    if (groups.length === 0) {
+        if (!showEmptyState)
+            return null;
+        return (_jsx("div", { className: className, children: _jsx(Card, { children: _jsx(EmptyState, { heading: translations.partnerIntegration?.noData ||
+                        "No integrations available", image: "", children: _jsx("p", { children: translations.partnerIntegration?.noDataMessage ||
+                            "Check back later for available integrations" }) }) }) }));
+    }
+    // Render groups
+    return (_jsx("div", { className: className, children: _jsx(BlockStack, { gap: "600", children: groups.map((group) => (_jsxs(BlockStack, { gap: "400", children: [_jsx(Box, { paddingInlineStart: { xs: "200", md: "0" }, children: _jsx(Text, { as: "h3", variant: "headingMd", fontWeight: "semibold", children: group.title }) }), _jsx(Grid, { children: group.items.map((item) => (_jsx(Grid.Cell, { columnSpan: {
+                                xs: 6,
+                                md: maxColumns === 1 ? 6 : maxColumns === 3 ? 2 : 3,
+                            }, children: renderIntegrationCard(item) }, `integration-cell--${item.id || item.key}`))) })] }, `integration-group--${group.key}`))) }) }));
+};
+export default PartnerIntegration;

package/dist/components/TopBanner.js

@@ -1,13 +1,38 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Banner, Button, Text, BlockStack, InlineStack, } from "@shopify/polaris";
 import { ExternalIcon } from "@shopify/polaris-icons";
 import { useTopBanner } from "../hooks/useBanner";
 export const TopBanner = ({ className = "", onClose, onAction, closable = true, renderBanner, }) => {
     const banner = useTopBanner();
-    const [isVisible, setIsVisible] = useState(true);
+    const [isDismissed, setIsDismissed] = useState(false);
+    const DISMISS_KEY = "ts-top-banner-dismissed";
+    const DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000;
+    useEffect(() => {
+        const dismissedData = localStorage.getItem(DISMISS_KEY);
+        if (dismissedData) {
+            try {
+                const { timestamp } = JSON.parse(dismissedData);
+                const now = Date.now();
+                if (now - timestamp < DISMISS_DURATION) {
+                    setIsDismissed(true);
+                }
+                else {
+                    localStorage.removeItem(DISMISS_KEY);
+                }
+            }
+            catch (error) {
+                localStorage.removeItem(DISMISS_KEY);
+            }
+        }
+    }, []);
     const handleClose = () => {
-        setIsVisible(false);
+        const dismissData = {
+            timestamp: Date.now(),
+            dismissed: true,
+        };
+        localStorage.setItem(DISMISS_KEY, JSON.stringify(dismissData));
+        setIsDismissed(true);
         onClose?.();
     };
     const handleAction = () => {
@@ -18,7 +43,7 @@ export const TopBanner = ({ className = "", onClose, onAction, closable = true,
             onAction?.(banner);
         }
     };
-    if (!banner || !isVisible) {
+    if (!banner || isDismissed) {
         return null;
     }
     if (renderBanner) {

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/core/adapter.js

@@ -16,6 +16,8 @@ export function adaptDashboardData(rawData) {
     const whatsNew = data.whats_new?.product_update || [];
     const growApps = data.grow_apps || [];
     const growAppsDisplayLimit = data.grow_apps_display_limit;
+    // Keep the raw integrations data for the Integration component
+    const integrations = data.integrations || [];
     return {
         banners: adaptBanners(banners),
         apps: adaptApps(allApps),
@@ -23,6 +25,7 @@ export function adaptDashboardData(rawData) {
         whatsNew: adaptProductUpdates(whatsNew),
         grow_apps: growApps,
         grow_apps_display_limit: growAppsDisplayLimit,
+        integrations: integrations, // Add raw integrations
     };
 }
 function adaptBanners(banners) {

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/hooks/usePartnerIntegration.d.ts

@@ -0,0 +1,22 @@
+import { IntegrationItem, IntegrationGroup } from "../types/integration";
+/**
+ * Hook to get all partner integrations from dashboard data
+ */
+export declare function usePartnerIntegrations(): {
+    groups: IntegrationGroup[];
+    loading: boolean;
+    error: Error | null;
+    integrations: any[];
+};
+/**
+ * Hook to get a specific integration by key
+ */
+export declare function usePartnerIntegrationByKey(key: string): IntegrationItem | null;
+/**
+ * Hook to get integration status
+ */
+export declare function usePartnerIntegrationStatus(key: string): {
+    isConnected: boolean;
+    isActive: boolean;
+    isInstalled: boolean;
+};

package/dist/hooks/usePartnerIntegration.js

@@ -0,0 +1,69 @@
+import { useMemo } from "react";
+import { useDashboardContext } from "../provider/DashboardProvider";
+/**
+ * Hook to get all partner integrations from dashboard data
+ */
+export function usePartnerIntegrations() {
+    const { state, translations } = useDashboardContext();
+    const groups = useMemo(() => {
+        const integrations = state.data?.integrations || [];
+        const groupsMap = [];
+        // Group by category_key
+        const reviewSources = integrations.filter((item) => item.category_key === "review_sources");
+        if (reviewSources.length > 0) {
+            groupsMap.push({
+                title: translations.partnerIntegration?.reviewSourcesTitle || "Review Sources",
+                key: "review_sources",
+                items: reviewSources.sort((a, b) => a.position - b.position),
+            });
+        }
+        const postPurchase = integrations.filter((item) => item.category_key === "post_purchase_automation");
+        if (postPurchase.length > 0) {
+            groupsMap.push({
+                title: translations.partnerIntegration?.postPurchaseTitle || "Post-purchase & Automation",
+                key: "post_purchase_automation",
+                items: postPurchase.sort((a, b) => a.position - b.position),
+            });
+        }
+        const seoSnippets = integrations.filter((item) => item.category_key === "seo_rich_snippets");
+        if (seoSnippets.length > 0) {
+            groupsMap.push({
+                title: translations.partnerIntegration?.seoSnippetsTitle || "SEO & Rich Snippets",
+                key: "seo_rich_snippets",
+                items: seoSnippets.sort((a, b) => a.position - b.position),
+            });
+        }
+        return groupsMap;
+    }, [state.data?.integrations, translations]);
+    return {
+        groups,
+        loading: state.loading,
+        error: state.error,
+        integrations: state.data?.integrations || [],
+    };
+}
+/**
+ * Hook to get a specific integration by key
+ */
+export function usePartnerIntegrationByKey(key) {
+    const { integrations } = usePartnerIntegrations();
+    return useMemo(() => {
+        return integrations.find((item) => item.key === key) || null;
+    }, [integrations, key]);
+}
+/**
+ * Hook to get integration status
+ */
+export function usePartnerIntegrationStatus(key) {
+    const integration = usePartnerIntegrationByKey(key);
+    return useMemo(() => {
+        if (!integration) {
+            return { isConnected: false, isActive: false, isInstalled: false };
+        }
+        // Check based on integration key and button states
+        const isConnected = key === 'google_reviews';
+        const isActive = key !== 'after_ship';
+        const isInstalled = !integration.button_install_text;
+        return { isConnected, isActive, isInstalled };
+    }, [integration, key]);
+}

package/dist/provider/DashboardProvider.js

@@ -156,6 +156,10 @@ export const DashboardProvider = ({ children, config, locale, translations, auto
                 ...defaultTranslations.banner,
                 ...translations.banner,
             },
+            partnerIntegration: {
+                ...defaultTranslations.partnerIntegration,
+                ...translations.partnerIntegration,
+            },
         };
     }, [translations]);
     // Get engine from manager (might be null initially)

package/dist/translations/default.js

@@ -24,4 +24,22 @@ export const defaultTranslations = {
         learnMore: "Learn more",
         dismiss: "Dismiss",
     },
+    partnerIntegration: {
+        title: "Partner Integrations",
+        reviewSourcesTitle: "Review Sources",
+        postPurchaseTitle: "Post-purchase & Automation",
+        seoSnippetsTitle: "SEO & Rich Snippets",
+        noData: "No integrations available",
+        noDataMessage: "Check back later for available integrations",
+        errorTitle: "Unable to load integrations",
+        errorMessage: "Please try again later",
+        install: "Install app",
+        installed: "Installed",
+        manage: "Manage",
+        open: "Open",
+        connect: "Connect",
+        connected: "Connected",
+        inactive: "Inactive",
+        active: "Active"
+    }
 };

package/dist/types/dashboard.d.ts

@@ -25,6 +25,7 @@ export interface DashboardData {
     grow_apps?: GrowApp[];
     grow_apps_display_limit?: number;
     partner_list?: PartnerItem[];
+    integrations?: any[];
 }
 export interface DashboardConfig {
     apiUrl: string;

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export * from "./article";
 export * from "./product-update";
 export * from "./dashboard";
 export * from "./partner";
+export * from "./integration";

package/dist/types/index.js

@@ -4,3 +4,4 @@ export * from "./article";
 export * from "./product-update";
 export * from "./dashboard";
 export * from "./partner";
+export * from "./integration";

package/dist/types/integration.d.ts

@@ -0,0 +1,33 @@
+export type IntegrationCategory = "review_sources" | "post_purchase_automation" | "seo_rich_snippets";
+export type IntegrationStatus = "connected" | "active" | "inactive";
+export interface IntegrationItem {
+    id?: string | number;
+    key?: string;
+    title: string;
+    badge_text?: string;
+    sub_title?: string;
+    content?: string;
+    icon_url?: string;
+    category?: IntegrationCategory;
+    category_key?: string;
+    status?: IntegrationStatus;
+    installed?: boolean;
+    button_text?: string;
+    button_install_text?: string | null;
+    button_install_link?: string | null;
+    button_install_url?: string;
+    button_manage_text?: string | null;
+    button_manage_url?: string | null;
+    button_connect_text?: string;
+    button_connect_url?: string;
+    app_url?: string;
+    position: number;
+    requires_plan?: string;
+    source?: string;
+    group_type?: string;
+}
+export interface IntegrationGroup {
+    title: string;
+    key: IntegrationCategory;
+    items: IntegrationItem[];
+}

package/dist/types/integration.js

@@ -0,0 +1 @@
+export {};

package/dist/types/translations.d.ts

@@ -24,5 +24,23 @@ export interface SDKTranslations {
         learnMore?: string;
         dismiss?: string;
     };
+    partnerIntegration?: {
+        title?: string;
+        reviewSourcesTitle?: string;
+        postPurchaseTitle?: string;
+        seoSnippetsTitle?: string;
+        noData?: string;
+        noDataMessage?: string;
+        errorTitle?: string;
+        errorMessage?: string;
+        install?: string;
+        installed?: string;
+        manage?: string;
+        open?: string;
+        connect?: string;
+        connected?: string;
+        inactive?: string;
+        active?: string;
+    };
 }
 export type TranslationKey = keyof SDKTranslations;

package/package.json

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