@datlv-trustshop/shopify-inapp-components 0.1.16 → 0.1.18

package/dist/components/GrowApps.js

@@ -10,7 +10,7 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
     const slidesContainerRef = useRef(null);
     const currentPositionRef = useRef(0);
     const { data } = useDashboard();
-    const t = useTranslation('growApps');
+    const growAppsTranslations = useTranslation('growApps');
     const allGrowApps = data?.grow_apps || [];
     const displayLimit = data?.grow_apps_display_limit || maxItems;
     const growApps = allGrowApps.slice(0, displayLimit);
@@ -134,12 +134,12 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
         return null;
     }
     if (growApps.length === 0) {
-        return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: t.noData || "No apps available" }) }) }) }));
+        return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: growAppsTranslations?.noData || "No apps available" }) }) }) }));
     }
     const activator = (_jsx(Button, { icon: MenuHorizontalIcon, variant: "tertiary", onClick: togglePopoverActive, ariaExpanded: popoverActive }));
-    return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsxs(BlockStack, { gap: "200", children: [_jsxs(InlineStack, { align: "space-between", blockAlign: "center", wrap: false, gap: "300", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingMd", as: "h3", children: t.title || "Grow faster with apps" }), _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: t.subtitle || "Discover powerful apps to enhance your store, streamline workflows, and boost sales." })] }), _jsxs(InlineStack, { gap: "100", wrap: false, children: [showDismiss && (_jsx(Box, { padding: "150", children: _jsx(Popover, { active: popoverActive, activator: activator, onClose: togglePopoverActive, ariaHaspopup: false, children: _jsx(ActionList, { actionRole: "menuitem", items: [
+    return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsxs(BlockStack, { gap: "200", children: [_jsxs(InlineStack, { align: "space-between", blockAlign: "center", wrap: false, gap: "300", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingMd", as: "h3", children: growAppsTranslations?.title || "Grow faster with apps" }), _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: growAppsTranslations?.subtitle || "Discover powerful apps to enhance your store, streamline workflows, and boost sales." })] }), _jsxs(InlineStack, { gap: "100", wrap: false, children: [showDismiss && (_jsx(Box, { padding: "150", children: _jsx(Popover, { active: popoverActive, activator: activator, onClose: togglePopoverActive, ariaHaspopup: false, children: _jsx(ActionList, { actionRole: "menuitem", items: [
                                                         {
-                                                            content: t.dismiss || "Dismiss",
+                                                            content: growAppsTranslations?.dismiss || "Dismiss",
                                                             onAction: handleDismiss,
                                                         },
                                                     ] }) }) })), showNavigation && growApps.length > 3 && (_jsxs("div", { style: {
@@ -189,7 +189,7 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
                                     transform: "translateX(0px)",
                                 }, children: growApps.map((app, index) => {
                                     const iconUrl = app.icon_url || app.imageUrl || "";
-                                    const buttonText = app.button_text || app.button_get_app || t.install || "Get app";
+                                    const buttonText = app.button_text || app.button_get_app || growAppsTranslations?.install || "Get app";
                                     return (_jsx("div", { "data-index": index, style: {
                                             flexShrink: 0,
                                             width: "282px",

package/dist/components/PartnerIntegration.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { IntegrationItem } from "../types/integration";
 export type IntegrationStatusInfo = {
-    isInstalled?: boolean;
     isConnected?: boolean;
     isActive?: boolean;
     isPending?: boolean;

package/dist/components/PartnerIntegration.js

@@ -9,9 +9,7 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
     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 {
@@ -43,37 +41,33 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                 },
             });
         }
-        // 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) {
+                if (status.isConnected === true) {
                     return {
-                        text: translations.partnerIntegration?.connected || "Connected",
+                        text: translations.partnerIntegration?.active || "Active",
                         tone: "success",
                     };
                 }
-                if (status.isActive) {
+                if (status.isConnected === false) {
                     return {
-                        text: translations.partnerIntegration?.active || "Active",
-                        tone: "success",
+                        text: translations.partnerIntegration?.inactive || "Inactive",
+                        tone: undefined,
                     };
                 }
-                if (status.isInstalled) {
+                if (status.isActive === true) {
                     return {
-                        text: translations.partnerIntegration?.installed || "Installed",
-                        tone: "info",
+                        text: translations.partnerIntegration?.active || "Active",
+                        tone: "success",
                     };
                 }
                 if (status.isPending) {
                     return {
-                        text: "Pending",
+                        text: translations.partnerIntegration?.pending || "Pending",
                         tone: "warning",
                     };
                 }
-                // If status explicitly says inactive
                 if (status.isActive === false) {
                     return {
                         text: translations.partnerIntegration?.inactive || "Inactive",
@@ -81,7 +75,6 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                     };
                 }
             }
-            // Fallback to default logic based on key
             if (item.key === "google_reviews") {
                 return {
                     text: translations.partnerIntegration?.connected || "Connected",
@@ -89,21 +82,17 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                 };
             }
             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",
@@ -135,25 +124,12 @@ 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 || "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}`));
+                                                                }, 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: status.isActive === false || 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) {
         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, { columns: { xs: 1, sm: 1, md: 2, lg: 2, xl: 2 }, children: [1, 2].map((cardIndex) => (_jsx(Grid.Cell, { 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 ||

package/dist/hooks/usePartnerIntegration.js

@@ -12,7 +12,8 @@ export function usePartnerIntegrations() {
         const reviewSources = integrations.filter((item) => item.category_key === "review_sources");
         if (reviewSources.length > 0) {
             groupsMap.push({
-                title: translations.partnerIntegration?.reviewSourcesTitle || "Review Sources",
+                title: translations.partnerIntegration?.reviewSourcesTitle ||
+                    "Review Sources",
                 key: "review_sources",
                 items: reviewSources.sort((a, b) => a.position - b.position),
             });
@@ -20,7 +21,8 @@ export function usePartnerIntegrations() {
         const postPurchase = integrations.filter((item) => item.category_key === "post_purchase_automation");
         if (postPurchase.length > 0) {
             groupsMap.push({
-                title: translations.partnerIntegration?.postPurchaseTitle || "Post-purchase & Automation",
+                title: translations.partnerIntegration?.postPurchaseTitle ||
+                    "Post-purchase & Automation",
                 key: "post_purchase_automation",
                 items: postPurchase.sort((a, b) => a.position - b.position),
             });
@@ -28,16 +30,18 @@ export function usePartnerIntegrations() {
         const seoSnippets = integrations.filter((item) => item.category_key === "seo_rich_snippets");
         if (seoSnippets.length > 0) {
             groupsMap.push({
-                title: translations.partnerIntegration?.seoSnippetsTitle || "SEO & Rich Snippets",
+                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]);
+    const isLoading = state.loading || (!state.data && !state.error);
     return {
         groups,
-        loading: state.loading,
+        loading: isLoading,
         error: state.error,
         integrations: state.data?.integrations || [],
     };
@@ -61,8 +65,8 @@ export function usePartnerIntegrationStatus(key) {
             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 isConnected = key === "google_reviews";
+        const isActive = key !== "after_ship";
         const isInstalled = !integration.button_install_text;
         return { isConnected, isActive, isInstalled };
     }, [integration, key]);

package/dist/translations/default.js

@@ -40,6 +40,16 @@ export const defaultTranslations = {
         connect: "Connect",
         connected: "Connected",
         inactive: "Inactive",
-        active: "Active"
+        active: "Active",
+        pending: "Pending",
+        upgradeBadge: {
+            upgradeToBasic: "Upgrade to Basic",
+            upgradeToPro: "Upgrade to Pro",
+            upgradeToUnlimited: "Upgrade to Unlimited",
+            fromBasic: "From Basic",
+            fromPro: "From Pro",
+            fromUnlimited: "From Unlimited",
+            upgrade: "Upgrade",
+        }
     }
 };

package/dist/types/translations.d.ts

@@ -41,6 +41,16 @@ export interface SDKTranslations {
         connected?: string;
         inactive?: string;
         active?: string;
+        pending?: string;
+        upgradeBadge?: {
+            upgradeToBasic?: string;
+            upgradeToPro?: string;
+            upgradeToUnlimited?: string;
+            fromBasic?: string;
+            fromPro?: string;
+            fromUnlimited?: string;
+            upgrade?: string;
+        };
     };
 }
 export type TranslationKey = keyof SDKTranslations;

package/package.json

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