@datlv-trustshop/shopify-inapp-components 0.1.17 → 0.1.19

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.js

@@ -44,13 +44,19 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
         const status = statusProvider?.(item);
         const getBadgeInfo = () => {
             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?.inactive || "Inactive",
+                        tone: undefined,
+                    };
+                }
+                if (status.isActive === true) {
                     return {
                         text: translations.partnerIntegration?.active || "Active",
                         tone: "success",
@@ -58,7 +64,7 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                 }
                 if (status.isPending) {
                     return {
-                        text: "Pending",
+                        text: translations.partnerIntegration?.pending || "Pending",
                         tone: "warning",
                     };
                 }
@@ -69,18 +75,7 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                     };
                 }
             }
-            if (item.key === "google_reviews") {
-                return {
-                    text: translations.partnerIntegration?.connected || "Connected",
-                    tone: "success",
-                };
-            }
-            if (item.key === "after_ship") {
-                return {
-                    text: translations.partnerIntegration?.inactive || "Inactive",
-                    tone: undefined,
-                };
-            }
+            // Fall back to button-based logic only if no status provider
             if (item.button_manage_text && item.button_install_text) {
                 return {
                     text: translations.partnerIntegration?.inactive || "Inactive",
@@ -100,7 +95,7 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                                 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: {
+                            } })), _jsx(Box, { minHeight: "130px", 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",
@@ -118,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 || "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, 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", 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.isConnected === false || 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/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.17",
+  "version": "0.1.19",
   "private": false,
   "description": "React TypeScript components for Shopify in-app dashboard content",
   "main": "dist/index.js",