@datlv-trustshop/shopify-inapp-components 0.2.8 → 0.2.9

package/dist/components/PartnerIntegration.js

@@ -1,11 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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, showEmptyState = true, statusProvider, }) => {
+import { useSDK } from "../core/SDKManager";
+import { COMPONENT_DEFAULTS } from "../config/component-defaults";
+export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen, onUpgradeClick: _onUpgradeClick, // Keep for API compatibility
+// SDK options (optional)
+shopInfo, locale, translations: translationOverrides, config, }) => {
+    // Use internal defaults
+    const { showEmptyState } = COMPONENT_DEFAULTS.partnerIntegration;
     const { groups, loading, error } = usePartnerIntegrations();
-    const { translations } = useDashboardContext();
+    const sdk = useSDK({ shopInfo, locale, translations: translationOverrides, config });
+    const translations = sdk.translations;
     const handleManage = (item) => {
         const url = item.button_manage_url;
         if (url) {
@@ -29,52 +35,8 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
         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);
-                },
-            });
-        }
-        const status = statusProvider?.(item);
+        // SDK now handles status internally
         const getBadgeInfo = () => {
-            if (status) {
-                if (status.isConnected === true) {
-                    return {
-                        text: translations.partnerIntegration?.active || "Active",
-                        tone: "success",
-                    };
-                }
-                if (status.isConnected === false) {
-                    return {
-                        text: translations.partnerIntegration?.inactive || "Inactive",
-                        tone: undefined,
-                    };
-                }
-                if (status.isActive === true) {
-                    return {
-                        text: translations.partnerIntegration?.active || "Active",
-                        tone: "success",
-                    };
-                }
-                if (status.isPending) {
-                    return {
-                        text: translations.partnerIntegration?.pending || "Pending",
-                        tone: "warning",
-                    };
-                }
-                if (status.isActive === false) {
-                    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 {
@@ -95,46 +57,23 @@ export const PartnerIntegration = ({ className = "", onManage, onInstall, onOpen
                                 width: "40px",
                                 height: "40px",
                                 borderRadius: "8px",
-                            } })), _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",
-                                                            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", { style: {
-                                                                    fontSize: "13px",
-                                                                }, 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}`));
+                            } })), _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 }))] }), item.content && (_jsx(Text, { as: "p", variant: "bodyMd", children: item.content }))] }), _jsxs(InlineStack, { gap: "200", 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), children: item.button_manage_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}`))) }) }));
     }
     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" }) }) }) }));
+        return (_jsx("div", { className: className, children: _jsx(Card, { children: _jsx(EmptyState, { heading: "Unable to load integrations", image: "", children: _jsx("p", { children: "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" }) }) }) }));
+        return (_jsx("div", { className: className, children: _jsx(Card, { children: _jsx(EmptyState, { heading: "No integrations available", image: "", children: _jsx("p", { children: "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, { columns: { xs: 1, sm: 1, md: 2, lg: 2, xl: 2 }, children: group.items.map((item) => (_jsx(Grid.Cell, { children: renderIntegrationCard(item) }, `integration-cell--${item.id || item.key}`))) })] }, `integration-group--${group.key}`))) }) }));
 };
 export default PartnerIntegration;
+//# sourceMappingURL=PartnerIntegration.js.map

package/dist/components/PartnerIntegration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartnerIntegration.js","sourceRoot":"","sources":["../../src/components/PartnerIntegration.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport {\n  Badge,\n  BlockStack,\n  Box,\n  Button,\n  Card,\n  InlineStack,\n  Text,\n  Grid,\n  SkeletonBodyText,\n  EmptyState,\n} from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { usePartnerIntegrations } from \"../hooks/usePartnerIntegration\";\nimport { useSDK, type UseSDKOptions } from \"../core/SDKManager\";\nimport { IntegrationItem } from \"../types/integration\";\nimport { COMPONENT_DEFAULTS } from \"../config/component-defaults\";\n\nexport type IntegrationStatusInfo = {\n  isConnected?: boolean;\n  isActive?: boolean;\n  isPending?: boolean;\n  showUpgradeBadge?: boolean;\n  upgradeBadgeText?: string;\n  upgradeBadgeIcon?: React.ReactNode;\n  upgradeBadgeTooltip?: string;\n  upgradeBadgePlan?: \"basic\" | \"pro\";\n};\n\nexport type IntegrationStatusProvider = (\n  integration: IntegrationItem,\n) => IntegrationStatusInfo | undefined;\n\nexport interface PartnerIntegrationProps extends UseSDKOptions {\n  /** Optional CSS class */\n  className?: string;\n  \n  /** Handle manage action */\n  onManage?: (item: IntegrationItem) => void;\n  \n  /** Handle install action */\n  onInstall?: (item: IntegrationItem) => void;\n  \n  /** Handle open action */\n  onOpen?: (item: IntegrationItem) => void;\n  \n  /** Handle upgrade click */\n  onUpgradeClick?: (item: IntegrationItem) => void;\n}\n\nexport const PartnerIntegration: React.FC<PartnerIntegrationProps> = ({\n  className = \"\",\n  onManage,\n  onInstall,\n  onOpen,\n  onUpgradeClick: _onUpgradeClick, // Keep for API compatibility\n  // SDK options (optional)\n  shopInfo,\n  locale,\n  translations: translationOverrides,\n  config,\n}) => {\n  // Use internal defaults\n  const { showEmptyState } = COMPONENT_DEFAULTS.partnerIntegration;\n  const { groups, loading, error } = usePartnerIntegrations();\n  const sdk = useSDK({ shopInfo, locale, translations: translationOverrides, config });\n  const translations = sdk.translations;\n\n  const handleManage = (item: IntegrationItem) => {\n    const url = item.button_manage_url;\n    if (url) {\n      if (url.startsWith(\"/\")) {\n        onManage?.(item);\n      } else {\n        window.open(url, \"_blank\");\n        onOpen?.(item);\n      }\n    } else {\n      onManage?.(item);\n    }\n  };\n\n  const handleInstall = (item: IntegrationItem) => {\n    const url =\n      item.button_install_link || item.button_install_url || item.app_url;\n    if (url) {\n      window.open(url, \"_blank\");\n    }\n    onInstall?.(item);\n  };\n\n  const renderIntegrationCard = (item: IntegrationItem) => {\n    // SDK now handles status internally\n\n    const getBadgeInfo = () => {\n\n      // Fall back to button-based logic only if no status provider\n      if (item.button_manage_text && item.button_install_text) {\n        return {\n          text: translations.partnerIntegration?.inactive || \"Inactive\",\n          tone: undefined,\n        };\n      }\n\n      if (item.button_manage_text && !item.button_install_text) {\n        return {\n          text: translations.partnerIntegration?.active || \"Active\",\n          tone: \"success\" as const,\n        };\n      }\n\n      return null;\n    };\n\n    const badgeInfo = getBadgeInfo();\n\n    return (\n      <Card key={`integration--${item.id || item.key}`}>\n        <InlineStack gap=\"300\">\n          <InlineStack gap=\"300\" wrap={false}>\n            {item.icon_url && (\n              <img\n                src={item.icon_url}\n                alt={item.title}\n                style={{\n                  width: \"40px\",\n                  height: \"40px\",\n                  borderRadius: \"8px\",\n                }}\n              />\n            )}\n            <Box minHeight=\"130px\">\n              <BlockStack gap=\"300\">\n                <BlockStack gap=\"100\">\n                  <InlineStack gap=\"200\" align=\"start\">\n                    <Text as=\"p\" variant=\"bodyLg\" fontWeight=\"bold\">\n                      {item.title}\n                    </Text>\n                    {badgeInfo && (\n                      <Badge tone={badgeInfo.tone}>{badgeInfo.text}</Badge>\n                    )}\n                    {/* Upgrade badge handled internally */}\n                  </InlineStack>\n                  {item.content && (\n                    <Text as=\"p\" variant=\"bodyMd\">\n                      {item.content}\n                    </Text>\n                  )}\n                </BlockStack>\n                <InlineStack gap=\"200\">\n                  {item.button_install_text && (\n                    <Button\n                      icon={ExternalIcon}\n                      onClick={() => handleInstall(item)}\n                    >\n                      {item.button_install_text}\n                    </Button>\n                  )}\n                  {item.button_manage_text && (\n                    <Button\n                      onClick={() => handleManage(item)}\n                    >\n                      {item.button_manage_text}\n                    </Button>\n                  )}\n                </InlineStack>\n              </BlockStack>\n            </Box>\n          </InlineStack>\n        </InlineStack>\n      </Card>\n    );\n  };\n\n  // Loading state\n  if (loading) {\n    return (\n      <div className={className}>\n        <BlockStack gap=\"600\">\n          {[1, 2, 3].map((groupIndex) => (\n            <BlockStack key={`skeleton-group-${groupIndex}`} gap=\"400\">\n              <Box paddingInlineStart={{ xs: \"200\", md: \"0\" }}>\n                <SkeletonBodyText lines={1} />\n              </Box>\n              <Grid columns={{ xs: 1, sm: 1, md: 2, lg: 2, xl: 2 }}>\n                {[1, 2].map((cardIndex) => (\n                  <Grid.Cell key={`skeleton-card-${groupIndex}-${cardIndex}`}>\n                    <Card>\n                      <BlockStack gap=\"300\">\n                        <SkeletonBodyText lines={3} />\n                      </BlockStack>\n                    </Card>\n                  </Grid.Cell>\n                ))}\n              </Grid>\n            </BlockStack>\n          ))}\n        </BlockStack>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className={className}>\n        <Card>\n          <EmptyState\n            heading=\"Unable to load integrations\"\n            image=\"\"\n          >\n            <p>Please try again later</p>\n          </EmptyState>\n        </Card>\n      </div>\n    );\n  }\n\n  // Empty state\n  if (groups.length === 0) {\n    if (!showEmptyState) return null;\n\n    return (\n      <div className={className}>\n        <Card>\n          <EmptyState\n            heading=\"No integrations available\"\n            image=\"\"\n          >\n            <p>Check back later for available integrations</p>\n          </EmptyState>\n        </Card>\n      </div>\n    );\n  }\n\n  // Render groups\n  return (\n    <div className={className}>\n      <BlockStack gap=\"600\">\n        {groups.map((group) => (\n          <BlockStack key={`integration-group--${group.key}`} gap=\"400\">\n            <Box paddingInlineStart={{ xs: \"200\", md: \"0\" }}>\n              <Text as=\"h3\" variant=\"headingMd\" fontWeight=\"semibold\">\n                {group.title}\n              </Text>\n            </Box>\n            <Grid columns={{ xs: 1, sm: 1, md: 2, lg: 2, xl: 2 }}>\n              {group.items.map((item: any) => (\n                <Grid.Cell key={`integration-cell--${item.id || item.key}`}>\n                  {renderIntegrationCard(item)}\n                </Grid.Cell>\n              ))}\n            </Grid>\n          </BlockStack>\n        ))}\n      </BlockStack>\n    </div>\n  );\n};\n\nexport default PartnerIntegration;\n"]}

package/dist/components/PartnerList.d.ts

@@ -7,3 +7,4 @@ export interface PartnerListProps {
     showIntegrationStatus?: boolean;
 }
 export declare const PartnerList: React.FC<PartnerListProps>;
+//# sourceMappingURL=PartnerList.d.ts.map

package/dist/components/PartnerList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartnerList.d.ts","sourceRoot":"","sources":["../../src/components/PartnerList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAQD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqPlD,CAAC"}

package/dist/components/PartnerList.js

@@ -100,3 +100,4 @@ export const PartnerList = ({ className = "", onPartnerClick, onSetupClick, show
                                             objectFit: "cover",
                                         } }) })), _jsx(Text, { as: "p", variant: "bodyMd", children: modalContent.type === "setup" ? (_jsxs(_Fragment, { children: ["To use ", modalContent.partner?.title, ", you'll need to:", _jsx("br", {}), _jsx("br", {}), "1. Install the app from the Shopify App Store", _jsx("br", {}), "2. Connect your account", _jsx("br", {}), "3. Configure your settings", _jsx("br", {}), _jsx("br", {}), "Click \"Continue Setup\" to open the app page."] })) : (modalContent.partner?.content) }), modalContent.partner?.app_url && (_jsxs(Text, { as: "p", variant: "bodySm", tone: "subdued", children: ["This will open:", " ", new URL(modalContent.partner.app_url).hostname] }))] }) }) }) })] }));
 };
+//# sourceMappingURL=PartnerList.js.map

package/dist/components/PartnerList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartnerList.js","sourceRoot":"","sources":["../../src/components/PartnerList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Badge,\n  BlockStack,\n  Box,\n  Button,\n  Card,\n  InlineStack,\n  Modal,\n  Text,\n  TextContainer,\n} from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { useDashboard } from \"../hooks\";\nimport { PartnerItem } from \"../types\";\n\nexport interface PartnerListProps {\n  className?: string;\n  onPartnerClick?: (partner: PartnerItem) => void;\n  onSetupClick?: (partner: PartnerItem) => void;\n  showIntegrationStatus?: boolean;\n}\n\ninterface ModalContent {\n  isOpen: boolean;\n  partner: PartnerItem | null;\n  type: \"setup\" | \"info\" | null;\n}\n\nexport const PartnerList: React.FC<PartnerListProps> = ({\n  className = \"\",\n  onPartnerClick,\n  onSetupClick,\n  showIntegrationStatus = false,\n}) => {\n  const [modalContent, setModalContent] = useState<ModalContent>({\n    isOpen: false,\n    partner: null,\n    type: null,\n  });\n\n  const { data: dashboardData } = useDashboard();\n  const partnerList = dashboardData?.partner_list || [];\n\n  const handlePartnerAction = (partner: PartnerItem) => {\n    if (shouldShowModal(partner.key)) {\n      setModalContent({\n        isOpen: true,\n        partner,\n        type: getModalType(partner.key),\n      });\n    } else if (partner.app_url) {\n      window.open(partner.app_url, \"_blank\");\n    }\n\n    onPartnerClick?.(partner);\n  };\n\n  const shouldShowModal = (key: string): boolean => {\n    const modalPartners = [\n      \"aftership\",\n      \"after_ship\",\n      \"langwill\",\n      \"lang_will\",\n      \"searchanise\",\n      \"tidio\",\n    ];\n\n    return modalPartners.includes(key.toLowerCase());\n  };\n\n  const getModalType = (key: string): \"setup\" | \"info\" => {\n    const setupPartners = [\"aftership\", \"after_ship\", \"langwill\", \"lang_will\"];\n    return setupPartners.includes(key.toLowerCase()) ? \"setup\" : \"info\";\n  };\n\n  const handleModalClose = () => {\n    setModalContent({\n      isOpen: false,\n      partner: null,\n      type: null,\n    });\n  };\n\n  const handleModalSetup = () => {\n    if (modalContent.partner) {\n      onSetupClick?.(modalContent.partner);\n\n      if (modalContent.partner.app_url) {\n        window.open(modalContent.partner.app_url, \"_blank\");\n      }\n    }\n    handleModalClose();\n  };\n\n  const getIntegrationStatus = (partner: PartnerItem): boolean => {\n    const activePartners = [\"aftership\", \"after_ship\"];\n    return activePartners.includes(partner.key.toLowerCase());\n  };\n\n  if (partnerList.length === 0) {\n    return (\n      <div className={className} style={{ width: \"100%\" }}>\n        <Card>\n          <Box padding=\"400\">\n            <Text as=\"p\" variant=\"bodyMd\" tone=\"subdued\">\n              No partner apps available\n            </Text>\n          </Box>\n        </Card>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`dashboard-partner-list ${className}`}>\n      <Card>\n        <BlockStack gap=\"400\">\n          <Box paddingInlineStart={{ xs: \"200\", md: \"0\" }}>\n            <Text variant=\"headingMd\" as=\"h2\">\n              Partner Apps & Integrations\n            </Text>\n          </Box>\n\n          <BlockStack gap=\"400\">\n            {partnerList.map((partner: PartnerItem, index: number) => {\n              const uniqueKey = `${partner.key}-${index}`;\n              const isActive =\n                showIntegrationStatus && getIntegrationStatus(partner);\n              const requiresModal = shouldShowModal(partner.key);\n\n              return (\n                <Card key={uniqueKey}>\n                  <BlockStack gap=\"200\">\n                    <InlineStack\n                      blockAlign=\"center\"\n                      align=\"space-between\"\n                      gap=\"100\"\n                    >\n                      <InlineStack blockAlign=\"center\" gap=\"200\">\n                        {partner.icon_url && (\n                          <img\n                            src={partner.icon_url}\n                            alt={partner.title}\n                            style={{\n                              width: \"40px\",\n                              height: \"40px\",\n                              borderRadius: \"8px\",\n                              objectFit: \"cover\",\n                            }}\n                          />\n                        )}\n                        <Text as=\"h3\" variant=\"bodyLg\" fontWeight=\"semibold\">\n                          {partner.title}\n                        </Text>\n                        {showIntegrationStatus && (\n                          <Badge tone={isActive ? \"success\" : \"info\"}>\n                            {isActive ? \"Active\" : \"Inactive\"}\n                          </Badge>\n                        )}\n                      </InlineStack>\n\n                      <InlineStack gap=\"200\">\n                        <Button\n                          icon={requiresModal ? undefined : ExternalIcon}\n                          onClick={() => handlePartnerAction(partner)}\n                        >\n                          {partner.button_text || \"Install App\"}\n                        </Button>\n\n                        {isActive && (\n                          <Button\n                            variant=\"plain\"\n                            onClick={() => {\n                              setModalContent({\n                                isOpen: true,\n                                partner,\n                                type: \"setup\",\n                              });\n                            }}\n                          >\n                            Manage\n                          </Button>\n                        )}\n                      </InlineStack>\n                    </InlineStack>\n\n                    <Text as=\"p\" variant=\"bodyMd\">\n                      {partner.content}\n                    </Text>\n                  </BlockStack>\n                </Card>\n              );\n            })}\n          </BlockStack>\n        </BlockStack>\n      </Card>\n\n      <Modal\n        open={modalContent.isOpen}\n        onClose={handleModalClose}\n        title={\n          modalContent.type === \"setup\"\n            ? `Set up ${modalContent.partner?.title}`\n            : modalContent.partner?.title || \"Partner App\"\n        }\n        primaryAction={\n          modalContent.type === \"setup\"\n            ? {\n                content: \"Continue Setup\",\n                onAction: handleModalSetup,\n              }\n            : {\n                content: \"Got it\",\n                onAction: handleModalClose,\n              }\n        }\n        secondaryActions={[\n          {\n            content: \"Cancel\",\n            onAction: handleModalClose,\n          },\n        ]}\n      >\n        <Modal.Section>\n          <TextContainer>\n            <BlockStack gap=\"300\">\n              {modalContent.partner?.icon_url && (\n                <Box>\n                  <img\n                    src={modalContent.partner.icon_url}\n                    alt={modalContent.partner.title}\n                    style={{\n                      width: \"60px\",\n                      height: \"60px\",\n                      borderRadius: \"12px\",\n                      objectFit: \"cover\",\n                    }}\n                  />\n                </Box>\n              )}\n\n              <Text as=\"p\" variant=\"bodyMd\">\n                {modalContent.type === \"setup\" ? (\n                  <>\n                    To use {modalContent.partner?.title}, you'll need to:\n                    <br />\n                    <br />\n                    1. Install the app from the Shopify App Store\n                    <br />\n                    2. Connect your account\n                    <br />\n                    3. Configure your settings\n                    <br />\n                    <br />\n                    Click \"Continue Setup\" to open the app page.\n                  </>\n                ) : (\n                  modalContent.partner?.content\n                )}\n              </Text>\n\n              {modalContent.partner?.app_url && (\n                <Text as=\"p\" variant=\"bodySm\" tone=\"subdued\">\n                  This will open:{\" \"}\n                  {new URL(modalContent.partner.app_url).hostname}\n                </Text>\n              )}\n            </BlockStack>\n          </TextContainer>\n        </Modal.Section>\n      </Modal>\n    </div>\n  );\n};\n"]}

package/dist/components/PopupBanner.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { BannerItem } from "../types";
 export interface PopupBannerProps {
+    /** Optional CSS class */
     className?: string;
+    /** Handle close */
     onClose?: () => void;
+    /** Handle action */
     onAction?: (banner: BannerItem) => void;
-    autoShow?: boolean;
-    showDelay?: number;
-    persistClose?: boolean;
-    storageKey?: string;
 }
 export declare const PopupBanner: React.FC<PopupBannerProps>;
+//# sourceMappingURL=PopupBanner.d.ts.map

package/dist/components/PopupBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupBanner.d.ts","sourceRoot":"","sources":["../../src/components/PopupBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyLlD,CAAC"}

package/dist/components/PopupBanner.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { usePopupBanner } from "../hooks/useBanner";
-export const PopupBanner = ({ className = "", onClose, onAction, autoShow = true, showDelay = 0, persistClose = true, storageKey = "shopify-dashboard-popup-closed", }) => {
+import { COMPONENT_DEFAULTS } from "../config/component-defaults";
+export const PopupBanner = ({ className = "", onClose, onAction, }) => {
+    // Use internal defaults
+    const { autoShow, showDelay, persistClose, storageKey, } = COMPONENT_DEFAULTS.popupBanner;
     const banner = usePopupBanner();
     const [isVisible, setIsVisible] = useState(false);
     const [hasBeenClosed, setHasBeenClosed] = useState(false);
@@ -98,3 +101,4 @@ export const PopupBanner = ({ className = "", onClose, onAction, autoShow = true
                             cursor: "pointer",
                         }, children: banner.linkText || "Learn More" }))] })] }));
 };
+//# sourceMappingURL=PopupBanner.js.map

package/dist/components/PopupBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupBanner.js","sourceRoot":"","sources":["../../src/components/PopupBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { BannerItem } from \"../types\";\nimport { usePopupBanner } from \"../hooks/useBanner\";\nimport { COMPONENT_DEFAULTS } from \"../config/component-defaults\";\n\nexport interface PopupBannerProps {\n  /** Optional CSS class */\n  className?: string;\n  \n  /** Handle close */\n  onClose?: () => void;\n  \n  /** Handle action */\n  onAction?: (banner: BannerItem) => void;\n}\n\nexport const PopupBanner: React.FC<PopupBannerProps> = ({\n  className = \"\",\n  onClose,\n  onAction,\n}) => {\n  // Use internal defaults\n  const {\n    autoShow,\n    showDelay,\n    persistClose,\n    storageKey,\n  } = COMPONENT_DEFAULTS.popupBanner;\n  const banner = usePopupBanner();\n  const [isVisible, setIsVisible] = useState(false);\n  const [hasBeenClosed, setHasBeenClosed] = useState(false);\n\n  useEffect(() => {\n    if (!banner || !autoShow) return;\n\n    if (persistClose && typeof window !== \"undefined\") {\n      const closedBanners = localStorage.getItem(storageKey);\n      if (closedBanners) {\n        const closed = JSON.parse(closedBanners);\n        if (closed[banner.id]) {\n          setHasBeenClosed(true);\n          return;\n        }\n      }\n    }\n\n    const timer = setTimeout(() => {\n      setIsVisible(true);\n    }, showDelay);\n\n    return () => clearTimeout(timer);\n  }, [banner, autoShow, showDelay, persistClose, storageKey]);\n\n  const handleClose = () => {\n    setIsVisible(false);\n\n    if (persistClose && banner && typeof window !== \"undefined\") {\n      const closedBanners = localStorage.getItem(storageKey);\n      const closed = closedBanners ? JSON.parse(closedBanners) : {};\n      closed[banner.id] = true;\n      localStorage.setItem(storageKey, JSON.stringify(closed));\n    }\n\n    onClose?.();\n  };\n\n  const handleAction = () => {\n    if (banner) {\n      if (banner.link) {\n        window.open(\n          banner.link,\n          banner.openType === \"new_tab\" ? \"_blank\" : \"_self\",\n        );\n      }\n      onAction?.(banner);\n    }\n  };\n\n  if (!banner || hasBeenClosed || !isVisible) {\n    return null;\n  }\n\n  const styles: React.CSSProperties = {\n    backgroundColor: banner.style?.backgroundColor || \"#ffffff\",\n    color: banner.style?.textColor || \"#000000\",\n  };\n\n  const buttonStyles: React.CSSProperties = {\n    backgroundColor: banner.style?.buttonColor || \"#007bff\",\n    color: banner.style?.buttonTextColor || \"#ffffff\",\n  };\n\n  return (\n    <>\n      <div\n        className={`popup-banner-overlay ${className}`}\n        style={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          zIndex: 9999,\n        }}\n        onClick={handleClose}\n      />\n      <div\n        className={`popup-banner ${className}`}\n        style={{\n          ...styles,\n          position: \"fixed\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n          maxWidth: \"500px\",\n          width: \"90%\",\n          padding: \"24px\",\n          borderRadius: \"8px\",\n          boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\n          zIndex: 10000,\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <button\n          onClick={handleClose}\n          style={{\n            position: \"absolute\",\n            top: \"12px\",\n            right: \"12px\",\n            background: \"none\",\n            border: \"none\",\n            fontSize: \"24px\",\n            cursor: \"pointer\",\n            color: styles.color,\n          }}\n          aria-label=\"Close popup\"\n        >\n          ×\n        </button>\n\n        {banner.icon && (\n          <div style={{ marginBottom: \"16px\" }}>\n            <img\n              src={banner.icon}\n              alt=\"\"\n              style={{ width: \"48px\", height: \"48px\" }}\n            />\n          </div>\n        )}\n\n        {banner.image && (\n          <div style={{ marginBottom: \"16px\" }}>\n            <img\n              src={banner.image}\n              alt=\"\"\n              style={{ width: \"100%\", borderRadius: \"4px\" }}\n            />\n          </div>\n        )}\n\n        <h2\n          style={{ margin: \"0 0 12px 0\", fontSize: \"20px\", fontWeight: \"bold\" }}\n        >\n          {banner.title}\n        </h2>\n\n        {banner.description && (\n          <p\n            style={{\n              margin: \"0 0 20px 0\",\n              fontSize: \"14px\",\n              lineHeight: \"1.5\",\n            }}\n          >\n            {banner.description}\n          </p>\n        )}\n\n        {banner.link && (\n          <button\n            onClick={handleAction}\n            style={{\n              ...buttonStyles,\n              padding: \"10px 20px\",\n              border: \"none\",\n              borderRadius: \"4px\",\n              fontSize: \"14px\",\n              fontWeight: \"bold\",\n              cursor: \"pointer\",\n            }}\n          >\n            {banner.linkText || \"Learn More\"}\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"]}

package/dist/components/TopBanner.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
 import { BannerItem } from "../types";
-export interface TopBannerProps {
+import { type UseSDKOptions } from "../core/SDKManager";
+export interface TopBannerProps extends UseSDKOptions {
+    /** Optional CSS class for styling */
     className?: string;
+    /** Control visibility (default: true) */
     open?: boolean;
+    /** Handle close event */
     onClose?: () => void;
+    /** Handle primary action click */
     onAction?: (banner: BannerItem) => void;
-    closable?: boolean;
-    sticky?: boolean;
-    renderBanner?: (banner: BannerItem, handlers: {
-        onClose: () => void;
-        onAction: () => void;
-    }) => React.ReactNode;
 }
 export declare const TopBanner: React.FC<TopBannerProps>;
+//# sourceMappingURL=TopBanner.d.ts.map

package/dist/components/TopBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBanner.d.ts","sourceRoot":"","sources":["../../src/components/TopBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGhE,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AA6FD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8J9C,CAAC"}

package/dist/components/TopBanner.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useContext } 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";
-import { DashboardContext } from "../provider/DashboardProvider";
+import { useSDK } from "../core/SDKManager";
+import { COMPONENT_DEFAULTS } from "../config/component-defaults";
 const BANNER_MIN_HEIGHT = 100;
 const TopBannerSkeleton = ({ className, visible }) => {
     // When not visible, return zero-space container
@@ -61,13 +62,16 @@ const TopBannerSkeleton = ({ className, visible }) => {
         }
       ` })] }));
 };
-export const TopBanner = ({ className = "", open = true, onClose, onAction, closable = true, renderBanner, }) => {
-    const context = useContext(DashboardContext);
-    const isInitialized = context?.isInitialized ?? false;
-    const isLoading = context?.state?.loading ?? true;
+export const TopBanner = ({ className = "", open = true, onClose, onAction, 
+// SDK options (optional - for customization)
+shopInfo, locale, translations, config, }) => {
+    // Connect to SDK Manager (auto-initializes)
+    const sdk = useSDK({ shopInfo, locale, translations, config });
     const banner = useTopBanner();
     const [isDismissed, setIsDismissed] = useState(false);
     const [dismissChecked, setDismissChecked] = useState(false);
+    // Use internal defaults
+    const { closable } = COMPONENT_DEFAULTS.topBanner;
     const DISMISS_KEY = "ts-top-banner-dismissed";
     const DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000;
     useEffect(() => {
@@ -107,10 +111,10 @@ export const TopBanner = ({ className = "", open = true, onClose, onAction, clos
         }
     };
     const shouldShow = open && !isDismissed;
-    const showSkeleton = shouldShow && (!dismissChecked || !isInitialized || isLoading);
-    const showBanner = shouldShow && dismissChecked && isInitialized && !isLoading && banner;
+    const showSkeleton = shouldShow && (!dismissChecked || !sdk.initialized || sdk.loading || sdk.isInitializing);
+    const showBanner = shouldShow && dismissChecked && sdk.initialized && !sdk.loading && !sdk.isInitializing && banner;
     // Always render skeleton during loading, but control visibility
-    if (!dismissChecked || !isInitialized || isLoading) {
+    if (!dismissChecked || !sdk.initialized || sdk.loading || sdk.isInitializing) {
         return _jsx(TopBannerSkeleton, { className: className, visible: showSkeleton });
     }
     // No banner data available - render invisible container to maintain mount
@@ -123,27 +127,7 @@ export const TopBanner = ({ className = "", open = true, onClose, onAction, clos
                 pointerEvents: "none",
             }, "aria-hidden": "true" }));
     }
-    // Custom render function with visibility control
-    if (renderBanner) {
-        // When not showing, render zero-space container
-        if (!showBanner) {
-            return (_jsx("div", { className: className, style: {
-                    width: "100%",
-                    height: 0,
-                    overflow: "hidden",
-                    position: "absolute",
-                    pointerEvents: "none",
-                }, "aria-hidden": "true" }));
-        }
-        return (_jsx("div", { style: {
-                opacity: 1,
-                visibility: "visible",
-                transition: "opacity 0.3s ease",
-            }, children: renderBanner(banner, {
-                onClose: handleClose,
-                onAction: handleAction,
-            }) }));
-    }
+    // Removed custom render function - using SDK default rendering
     // Default banner render with visibility control
     // When not showing, render zero-space container
     if (!showBanner) {
@@ -160,3 +144,4 @@ export const TopBanner = ({ className = "", open = true, onClose, onAction, clos
             minHeight: `${BANNER_MIN_HEIGHT}px`,
         }, children: _jsx(Banner, { hideIcon: true, onDismiss: closable ? handleClose : undefined, children: _jsxs(InlineStack, { gap: "400", blockAlign: "center", wrap: false, children: [banner.icon && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx("img", { src: banner.icon, alt: "", width: 72, height: 72, style: { borderRadius: "8px" }, loading: "eager" }) })), _jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsxs(BlockStack, { gap: "100", align: "space-between", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingSm", as: "h3", children: banner.title }), banner.description && (_jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: banner.description }))] }), banner.link && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Button, { icon: ExternalIcon, onClick: handleAction, children: banner.linkText || "Learn More" }) }))] }) })] }) }) }));
 };
+//# sourceMappingURL=TopBanner.js.map

package/dist/components/TopBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBanner.js","sourceRoot":"","sources":["../../src/components/TopBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport {\n  Banner,\n  Button,\n  Text,\n  BlockStack,\n  InlineStack,\n} from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { BannerItem } from \"../types\";\nimport { useTopBanner } from \"../hooks/useBanner\";\nimport { useSDK, type UseSDKOptions } from \"../core/SDKManager\";\nimport { COMPONENT_DEFAULTS } from \"../config/component-defaults\";\n\nexport interface TopBannerProps extends UseSDKOptions {\n  /** Optional CSS class for styling */\n  className?: string;\n  \n  /** Control visibility (default: true) */\n  open?: boolean;\n  \n  /** Handle close event */\n  onClose?: () => void;\n  \n  /** Handle primary action click */\n  onAction?: (banner: BannerItem) => void;\n}\n\nconst BANNER_MIN_HEIGHT = 100;\n\nconst TopBannerSkeleton: React.FC<{ \n  className?: string;\n  visible: boolean;\n}> = ({ className, visible }) => {\n  // When not visible, return zero-space container\n  if (!visible) {\n    return (\n      <div \n        className={className}\n        style={{\n          width: \"100%\",\n          height: 0,\n          overflow: \"hidden\",\n          position: \"absolute\",\n          pointerEvents: \"none\",\n        }}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  return (\n    <div \n      className={className} \n      style={{ \n        width: \"100%\",\n      }}\n    >\n      <div\n        style={{\n          minHeight: `${BANNER_MIN_HEIGHT}px`,\n          padding: \"16px\",\n          borderRadius: \"8px\",\n          border: \"1px solid var(--p-color-border-subdued)\",\n          backgroundColor: \"var(--p-color-bg-surface)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: \"16px\",\n        }}\n      >\n        <div\n          style={{\n            width: 72,\n            height: 72,\n            borderRadius: \"8px\",\n            backgroundColor: \"var(--p-color-bg-surface-secondary)\",\n            flexShrink: 0,\n            animation: \"pulse 1.5s ease-in-out infinite\",\n          }}\n        />\n        <div style={{ flex: 1, minWidth: 0 }}>\n          <div\n            style={{\n              height: 20,\n              width: \"30%\",\n              backgroundColor: \"var(--p-color-bg-surface-secondary)\",\n              borderRadius: \"4px\",\n              marginBottom: \"8px\",\n              animation: \"pulse 1.5s ease-in-out infinite\",\n            }}\n          />\n          <div\n            style={{\n              height: 16,\n              width: \"70%\",\n              backgroundColor: \"var(--p-color-bg-surface-secondary)\",\n              borderRadius: \"4px\",\n              animation: \"pulse 1.5s ease-in-out infinite\",\n            }}\n          />\n        </div>\n      </div>\n      <style>{`\n        @keyframes pulse {\n          0% {\n            opacity: 1;\n          }\n          50% {\n            opacity: 0.6;\n          }\n          100% {\n            opacity: 1;\n          }\n        }\n      `}</style>\n    </div>\n  );\n};\n\nexport const TopBanner: React.FC<TopBannerProps> = ({\n  className = \"\",\n  open = true,\n  onClose,\n  onAction,\n  // SDK options (optional - for customization)\n  shopInfo,\n  locale,\n  translations,\n  config,\n}) => {\n  // Connect to SDK Manager (auto-initializes)\n  const sdk = useSDK({ shopInfo, locale, translations, config });\n  \n  const banner = useTopBanner();\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [dismissChecked, setDismissChecked] = useState(false);\n\n  // Use internal defaults\n  const { closable } = COMPONENT_DEFAULTS.topBanner;\n  const DISMISS_KEY = \"ts-top-banner-dismissed\";\n  const DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000;\n\n  useEffect(() => {\n    const dismissedData = localStorage.getItem(DISMISS_KEY);\n    if (dismissedData) {\n      try {\n        const { timestamp } = JSON.parse(dismissedData);\n        const now = Date.now();\n\n        if (now - timestamp < DISMISS_DURATION) {\n          setIsDismissed(true);\n        } else {\n          localStorage.removeItem(DISMISS_KEY);\n        }\n      } catch (error) {\n        localStorage.removeItem(DISMISS_KEY);\n      }\n    }\n    setDismissChecked(true);\n  }, []);\n\n  const handleClose = () => {\n    const dismissData = {\n      timestamp: Date.now(),\n      dismissed: true,\n    };\n    localStorage.setItem(DISMISS_KEY, JSON.stringify(dismissData));\n\n    setIsDismissed(true);\n    onClose?.();\n  };\n\n  const handleAction = () => {\n    if (banner) {\n      if (banner.link) {\n        window.open(\n          banner.link,\n          banner.openType === \"new_tab\" ? \"_blank\" : \"_self\",\n        );\n      }\n      onAction?.(banner);\n    }\n  };\n\n  const shouldShow = open && !isDismissed;\n  const showSkeleton = shouldShow && (!dismissChecked || !sdk.initialized || sdk.loading || sdk.isInitializing);\n  const showBanner = shouldShow && dismissChecked && sdk.initialized && !sdk.loading && !sdk.isInitializing && banner;\n\n  // Always render skeleton during loading, but control visibility\n  if (!dismissChecked || !sdk.initialized || sdk.loading || sdk.isInitializing) {\n    return <TopBannerSkeleton className={className} visible={showSkeleton} />;\n  }\n\n  // No banner data available - render invisible container to maintain mount\n  if (!banner) {\n    return (\n      <div \n        className={className}\n        style={{\n          width: \"100%\",\n          height: 0,\n          overflow: \"hidden\",\n          position: \"absolute\",\n          pointerEvents: \"none\",\n        }}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  // Removed custom render function - using SDK default rendering\n\n  // Default banner render with visibility control\n  // When not showing, render zero-space container\n  if (!showBanner) {\n    return (\n      <div \n        className={className}\n        style={{\n          width: \"100%\",\n          height: 0,\n          overflow: \"hidden\",\n          position: \"absolute\",\n          pointerEvents: \"none\",\n        }}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  return (\n    <div\n      className={className}\n      style={{\n        width: \"100%\",\n        minHeight: `${BANNER_MIN_HEIGHT}px`,\n      }}\n    >\n      <Banner hideIcon onDismiss={closable ? handleClose : undefined}>\n        <InlineStack gap=\"400\" blockAlign=\"center\" wrap={false}>\n          {banner.icon && (\n            <div style={{ flexShrink: 0 }}>\n              <img\n                src={banner.icon}\n                alt=\"\"\n                width={72}\n                height={72}\n                style={{ borderRadius: \"8px\" }}\n                loading=\"eager\"\n              />\n            </div>\n          )}\n          <div style={{ flex: 1, minWidth: 0 }}>\n            <BlockStack gap=\"100\" align=\"space-between\">\n              <BlockStack gap=\"100\">\n                <Text variant=\"headingSm\" as=\"h3\">\n                  {banner.title}\n                </Text>\n                {banner.description && (\n                  <Text variant=\"bodyMd\" tone=\"subdued\" as=\"p\">\n                    {banner.description}\n                  </Text>\n                )}\n              </BlockStack>\n              {banner.link && (\n                <div style={{ flexShrink: 0 }}>\n                  <Button icon={ExternalIcon} onClick={handleAction}>\n                    {banner.linkText || \"Learn More\"}\n                  </Button>\n                </div>\n              )}\n            </BlockStack>\n          </div>\n        </InlineStack>\n      </Banner>\n    </div>\n  );\n};"]}

package/dist/components/WhatsNew.d.ts

@@ -1,14 +1,13 @@
 import React from "react";
 import { ArticleItem, ProductUpdateItem } from "../types";
-export interface WhatsNewProps {
+import { type UseSDKOptions } from "../core/SDKManager";
+export interface WhatsNewProps extends UseSDKOptions {
+    /** Optional CSS class */
     className?: string;
+    /** Handle product update clicks */
     onProductUpdateClick?: (update: ProductUpdateItem) => void;
+    /** Handle article clicks */
     onArticleClick?: (article: ArticleItem) => void;
-    onViewAllUpdates?: () => void;
-    onViewAllArticles?: () => void;
-    maxUpdates?: number;
-    showNavigation?: boolean;
-    showViewAllButton?: boolean;
-    navigate?: (url: string) => void;
 }
 export declare const WhatsNew: React.FC<WhatsNewProps>;
+//# sourceMappingURL=WhatsNew.d.ts.map

package/dist/components/WhatsNew.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WhatsNew.d.ts","sourceRoot":"","sources":["../../src/components/WhatsNew.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAiBpE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG1D,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKhE,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE3D,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAojB5C,CAAC"}

package/dist/components/WhatsNew.js

@@ -7,9 +7,18 @@ import ImageLoading from "./ImageLoading";
 import { useArticles, useWhatsNew } from "../hooks";
 import { useTranslation } from "../hooks/useTranslations";
 import { sdkStyles, mergeStyles } from "./styles";
+import { COMPONENT_DEFAULTS } from "../config/component-defaults";
+import { useSDK } from "../core/SDKManager";
 // Fixed dimensions to prevent CLS - reduced to avoid excessive white space
 const CONTAINER_MIN_HEIGHT = 300; // Reduced from 450
-export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick, onViewAllUpdates, onViewAllArticles, maxUpdates = 5, showNavigation = true, showViewAllButton = true, navigate, }) => {
+export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick, 
+// SDK options (optional)
+shopInfo, locale, translations, config, }) => {
+    // Connect to SDK Manager (auto-initializes)
+    // @ts-ignore - Will be used in future refactoring
+    const _sdk = useSDK({ shopInfo, locale, translations, config });
+    // Use internal defaults
+    const { maxUpdates, showNavigation, showViewAllButton, } = COMPONENT_DEFAULTS.whatsNew;
     const [productUpdateIndex, setProductUpdateIndex] = useState(0);
     const [articleIndex, setArticleIndex] = useState(0);
     const [selectedTab, setSelectedTab] = useState(0);
@@ -121,20 +130,16 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
         }
         if (tryUrl && tryUrl !== "modal") {
             if (tryUrl.startsWith("/")) {
-                if (navigate) {
-                    navigate(tryUrl);
+                // Internal navigation - use SDK default behavior
+                const currentUrl = window.location.href;
+                const shopifyAdminMatch = currentUrl.match(/https:\/\/admin\.shopify\.com\/store\/([^\/]+)\/apps\/([^\/]+)/);
+                if (shopifyAdminMatch) {
+                    const [, storeName, appName] = shopifyAdminMatch;
+                    const shopifyAppUrl = `https://admin.shopify.com/store/${storeName}/apps/${appName}${tryUrl}`;
+                    window.location.href = shopifyAppUrl;
                 }
                 else {
-                    const currentUrl = window.location.href;
-                    const shopifyAdminMatch = currentUrl.match(/https:\/\/admin\.shopify\.com\/store\/([^\/]+)\/apps\/([^\/]+)/);
-                    if (shopifyAdminMatch) {
-                        const [, storeName, appName] = shopifyAdminMatch;
-                        const shopifyAppUrl = `https://admin.shopify.com/store/${storeName}/apps/${appName}${tryUrl}`;
-                        window.location.href = shopifyAppUrl;
-                    }
-                    else {
-                        window.location.href = tryUrl;
-                    }
+                    window.location.href = tryUrl;
                 }
             }
             else if (tryUrl.startsWith("http://") ||
@@ -154,20 +159,12 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
         onArticleClick?.(article);
     };
     const handleViewAllUpdates = () => {
-        if (onViewAllUpdates) {
-            onViewAllUpdates();
-        }
-        else {
-            window.open("https://trust1.io/updates/", "_blank");
-        }
+        // Use SDK default behavior
+        window.open("https://trust1.io/updates/", "_blank");
     };
     const handleViewAllArticles = () => {
-        if (onViewAllArticles) {
-            onViewAllArticles();
-        }
-        else {
-            window.open("https://trust1.io/blog/", "_blank");
-        }
+        // Use SDK default behavior
+        window.open("https://trust1.io/blog/", "_blank");
     };
     const tabs = [
         { id: "product-update", content: t.tabs?.productUpdate || "Product Updates" },
@@ -283,3 +280,4 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
                                     scrollbarWidth: "none",
                                 }, mobileStyles.slidesContainer), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx(ArticleList, { layout: "slide", onArticleClick: handleArticleClick, showThumbnail: true, showAuthor: true, showDate: true, currentIndex: articleIndex, onSlideChange: setArticleIndex, showNavigation: false }) })) })] }) })] }));
 };
+//# sourceMappingURL=WhatsNew.js.map