@datlv-trustshop/shopify-inapp-components 0.2.12 → 0.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/PartnerIntegration.d.ts.map +1 -1
- package/dist/components/PartnerIntegration.js +22 -22
- package/dist/components/PartnerIntegration.js.map +1 -1
- package/dist/components/TopBanner.d.ts +1 -0
- package/dist/components/TopBanner.d.ts.map +1 -1
- package/dist/components/TopBanner.js +24 -98
- package/dist/components/TopBanner.js.map +1 -1
- package/dist/translations/locales/cn.json +3 -2
- package/dist/translations/locales/de.json +2 -1
- package/dist/translations/locales/dk.json +3 -2
- package/dist/translations/locales/en.json +2 -1
- package/dist/translations/locales/es.json +3 -2
- package/dist/translations/locales/fr.json +2 -1
- package/dist/translations/locales/ie.json +3 -2
- package/dist/translations/locales/in.json +3 -2
- package/dist/translations/locales/it.json +3 -2
- package/dist/translations/locales/jp.json +3 -2
- package/dist/translations/locales/nl.json +3 -2
- package/dist/translations/locales/nz.json +3 -2
- package/dist/translations/locales/pt.json +3 -2
- package/dist/translations/locales/se.json +3 -2
- package/dist/translations/locales/vi.json +3 -2
- package/dist/types/translations.d.ts +1 -0
- package/dist/types/translations.d.ts.map +1 -1
- package/dist/types/translations.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PartnerIntegration.d.ts","sourceRoot":"","sources":["../../src/components/PartnerIntegration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PartnerIntegration.d.ts","sourceRoot":"","sources":["../../src/components/PartnerIntegration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,CACtC,WAAW,EAAE,eAAe,KACzB,qBAAqB,GAAG,SAAS,CAAC;AAEvC,MAAM,WAAW,uBAAwB,SAAQ,aAAa;IAC5D,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sDAAsD;IACtD,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAE3C,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAE3C,4BAA4B;IAC5B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAE5C,yBAAyB;IACzB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAEzC,2BAA2B;IAC3B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAEjD,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmThE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Badge, BlockStack, Box, Button, Card, InlineStack, Text, Grid, SkeletonBodyText, EmptyState, } from "@shopify/polaris";
|
|
2
|
+
import { Badge, BlockStack, Box, Button, Card, InlineStack, Text, Grid, SkeletonBodyText, EmptyState, Tooltip, } from "@shopify/polaris";
|
|
3
3
|
import { ExternalIcon } from "@shopify/polaris-icons";
|
|
4
4
|
import { usePartnerIntegrations } from "../hooks/usePartnerIntegration";
|
|
5
5
|
import { useSDK } from "../core/SDKManager";
|
|
@@ -88,27 +88,27 @@ shopInfo, locale, translations: translationOverrides, config, }) => {
|
|
|
88
88
|
width: "40px",
|
|
89
89
|
height: "40px",
|
|
90
90
|
borderRadius: "8px",
|
|
91
|
-
} })), _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: {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
91
|
+
} })), _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 && (_jsx(Tooltip, { content: status.upgradeBadgeTooltip || translations.partnerIntegration?.upgradeBadge?.upgradeBadgeTooltip || "Available from Unlimited plan", dismissOnMouseOut: true, children: _jsxs("div", { onClick: () => onUpgradeClick?.(item), style: {
|
|
92
|
+
cursor: "pointer",
|
|
93
|
+
display: "inline-flex",
|
|
94
|
+
alignItems: "center",
|
|
95
|
+
padding: "4px 6px",
|
|
96
|
+
gap: "4px",
|
|
97
|
+
borderRadius: "var(--p-border-radius-150)",
|
|
98
|
+
backgroundColor: status.upgradeBadgePlan === "pro"
|
|
99
|
+
? "#F0F2FF"
|
|
100
|
+
: "#FFF1E3",
|
|
101
|
+
color: status.upgradeBadgePlan === "pro"
|
|
102
|
+
? "#7126FF"
|
|
103
|
+
: "#4F4700",
|
|
104
|
+
fontSize: "12px",
|
|
105
|
+
fontWeight: 500,
|
|
106
|
+
}, children: [status.upgradeBadgeIcon && (_jsx("span", { style: {
|
|
107
|
+
display: "inline-flex",
|
|
108
|
+
alignItems: "center",
|
|
109
|
+
}, children: status.upgradeBadgeIcon })), _jsx("span", { style: {
|
|
110
|
+
fontSize: "13px",
|
|
111
|
+
}, children: status.upgradeBadgeText || translations.partnerIntegration?.upgradeBadge?.upgradeToUnlimited || "From Unlimited" })] }) }))] }), 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" || item.key === "aftership" ? (status.showUpgradeBadge === true) : false, children: item.button_manage_text }))] })) : (_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), children: item.button_manage_text }))] })) })] }) })] }) }) }, `integration--${item.id || item.key}`));
|
|
112
112
|
};
|
|
113
113
|
// Loading state
|
|
114
114
|
if (loading) {
|
|
@@ -1 +1 @@
|
|
|
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\";\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 /** Status provider for custom integration statuses */\n statusProvider?: IntegrationStatusProvider;\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 /** Show empty state when no integrations available */\n showEmptyState?: boolean;\n}\n\nexport const PartnerIntegration: React.FC<PartnerIntegrationProps> = ({\n className = \"\",\n statusProvider,\n onManage,\n onInstall,\n onOpen,\n onUpgradeClick,\n showEmptyState = true,\n // SDK options (optional)\n shopInfo,\n locale,\n translations: translationOverrides,\n config,\n}) => {\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 // Get status from provider if available\n const status = statusProvider?.(item);\n\n const getBadgeInfo = () => {\n // Check status provider first\n if (status) {\n if (status.isConnected === true) {\n return {\n text: translations.partnerIntegration?.active || \"Active\",\n tone: \"success\" as const,\n };\n }\n if (status.isConnected === false) {\n return {\n text: translations.partnerIntegration?.inactive || \"Inactive\",\n tone: undefined,\n };\n }\n if (status.isActive === true) {\n return {\n text: translations.partnerIntegration?.active || \"Active\",\n tone: \"success\" as const,\n };\n }\n if (status.isPending) {\n return {\n text: \"Pending\",\n tone: \"warning\" as const,\n };\n }\n if (status.isActive === false) {\n return {\n text: translations.partnerIntegration?.inactive || \"Inactive\",\n tone: undefined,\n };\n }\n }\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 - controlled by status provider */}\n {status?.showUpgradeBadge && (\n <div\n onClick={() => onUpgradeClick?.(item)}\n style={{\n cursor: \"pointer\",\n display: \"inline-flex\",\n alignItems: \"center\",\n padding: \"4px 6px\",\n gap: \"4px\",\n borderRadius: \"var(--p-border-radius-150)\",\n backgroundColor:\n status.upgradeBadgePlan === \"pro\"\n ? \"#F0F2FF\"\n : \"#FFF1E3\",\n color:\n status.upgradeBadgePlan === \"pro\"\n ? \"#7126FF\"\n : \"#4F4700\",\n fontSize: \"12px\",\n fontWeight: 500,\n }}\n title={status.upgradeBadgeTooltip}\n >\n {status.upgradeBadgeIcon && (\n <span\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n }}\n >\n {status.upgradeBadgeIcon}\n </span>\n )}\n <span style={{\n fontSize: \"13px\",\n }}>{status.upgradeBadgeText || \"Upgrade\"}</span>\n </div>\n )}\n </InlineStack>\n {item.content && (\n <Text as=\"p\" variant=\"bodyMd\">\n {item.content}\n </Text>\n )}\n </BlockStack>\n <InlineStack gap=\"200\">\n {status ? (\n <>\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 disabled={item.key === \"after_ship\" || item.key === \"aftership\" ? (status.showUpgradeBadge === true) : false}\n >\n {item.button_manage_text}\n </Button>\n )}\n </>\n ) : (\n <>\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 </>\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"]}
|
|
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 Tooltip,\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\";\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 /** Status provider for custom integration statuses */\n statusProvider?: IntegrationStatusProvider;\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 /** Show empty state when no integrations available */\n showEmptyState?: boolean;\n}\n\nexport const PartnerIntegration: React.FC<PartnerIntegrationProps> = ({\n className = \"\",\n statusProvider,\n onManage,\n onInstall,\n onOpen,\n onUpgradeClick,\n showEmptyState = true,\n // SDK options (optional)\n shopInfo,\n locale,\n translations: translationOverrides,\n config,\n}) => {\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 // Get status from provider if available\n const status = statusProvider?.(item);\n\n const getBadgeInfo = () => {\n // Check status provider first\n if (status) {\n if (status.isConnected === true) {\n return {\n text: translations.partnerIntegration?.active || \"Active\",\n tone: \"success\" as const,\n };\n }\n if (status.isConnected === false) {\n return {\n text: translations.partnerIntegration?.inactive || \"Inactive\",\n tone: undefined,\n };\n }\n if (status.isActive === true) {\n return {\n text: translations.partnerIntegration?.active || \"Active\",\n tone: \"success\" as const,\n };\n }\n if (status.isPending) {\n return {\n text: \"Pending\",\n tone: \"warning\" as const,\n };\n }\n if (status.isActive === false) {\n return {\n text: translations.partnerIntegration?.inactive || \"Inactive\",\n tone: undefined,\n };\n }\n }\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 - controlled by status provider */}\n {status?.showUpgradeBadge && (\n <Tooltip\n content={status.upgradeBadgeTooltip || (translations.partnerIntegration?.upgradeBadge as any)?.upgradeBadgeTooltip || \"Available from Unlimited plan\"}\n dismissOnMouseOut\n >\n <div\n onClick={() => onUpgradeClick?.(item)}\n style={{\n cursor: \"pointer\",\n display: \"inline-flex\",\n alignItems: \"center\",\n padding: \"4px 6px\",\n gap: \"4px\",\n borderRadius: \"var(--p-border-radius-150)\",\n backgroundColor:\n status.upgradeBadgePlan === \"pro\"\n ? \"#F0F2FF\"\n : \"#FFF1E3\",\n color:\n status.upgradeBadgePlan === \"pro\"\n ? \"#7126FF\"\n : \"#4F4700\",\n fontSize: \"12px\",\n fontWeight: 500,\n }}\n >\n {status.upgradeBadgeIcon && (\n <span\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n }}\n >\n {status.upgradeBadgeIcon}\n </span>\n )}\n <span style={{\n fontSize: \"13px\",\n }}>{status.upgradeBadgeText || translations.partnerIntegration?.upgradeBadge?.upgradeToUnlimited || \"From Unlimited\"}</span>\n </div>\n </Tooltip>\n )}\n </InlineStack>\n {item.content && (\n <Text as=\"p\" variant=\"bodyMd\">\n {item.content}\n </Text>\n )}\n </BlockStack>\n <InlineStack gap=\"200\">\n {status ? (\n <>\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 disabled={item.key === \"after_ship\" || item.key === \"aftership\" ? (status.showUpgradeBadge === true) : false}\n >\n {item.button_manage_text}\n </Button>\n )}\n </>\n ) : (\n <>\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 </>\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"]}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6H9C,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -5,81 +5,32 @@ import { ExternalIcon } from "@shopify/polaris-icons";
|
|
|
5
5
|
import { useTopBanner } from "../hooks/useBanner";
|
|
6
6
|
import { useSDK } from "../core/SDKManager";
|
|
7
7
|
import { COMPONENT_DEFAULTS } from "../config/component-defaults";
|
|
8
|
-
const BANNER_MIN_HEIGHT = 100;
|
|
9
|
-
const TopBannerSkeleton = ({ className, visible }) => {
|
|
10
|
-
// When not visible, return zero-space container
|
|
11
|
-
if (!visible) {
|
|
12
|
-
return (_jsx("div", { className: className, style: {
|
|
13
|
-
width: "100%",
|
|
14
|
-
height: 0,
|
|
15
|
-
overflow: "hidden",
|
|
16
|
-
position: "absolute",
|
|
17
|
-
pointerEvents: "none",
|
|
18
|
-
}, "aria-hidden": "true" }));
|
|
19
|
-
}
|
|
20
|
-
return (_jsxs("div", { className: className, style: {
|
|
21
|
-
width: "100%",
|
|
22
|
-
}, children: [_jsxs("div", { style: {
|
|
23
|
-
minHeight: `${BANNER_MIN_HEIGHT}px`,
|
|
24
|
-
padding: "16px",
|
|
25
|
-
borderRadius: "8px",
|
|
26
|
-
border: "1px solid var(--p-color-border-subdued)",
|
|
27
|
-
backgroundColor: "var(--p-color-bg-surface)",
|
|
28
|
-
display: "flex",
|
|
29
|
-
alignItems: "center",
|
|
30
|
-
gap: "16px",
|
|
31
|
-
}, children: [_jsx("div", { style: {
|
|
32
|
-
width: 72,
|
|
33
|
-
height: 72,
|
|
34
|
-
borderRadius: "8px",
|
|
35
|
-
backgroundColor: "var(--p-color-bg-surface-secondary)",
|
|
36
|
-
flexShrink: 0,
|
|
37
|
-
animation: "pulse 1.5s ease-in-out infinite",
|
|
38
|
-
} }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
|
|
39
|
-
height: 20,
|
|
40
|
-
width: "30%",
|
|
41
|
-
backgroundColor: "var(--p-color-bg-surface-secondary)",
|
|
42
|
-
borderRadius: "4px",
|
|
43
|
-
marginBottom: "8px",
|
|
44
|
-
animation: "pulse 1.5s ease-in-out infinite",
|
|
45
|
-
} }), _jsx("div", { style: {
|
|
46
|
-
height: 16,
|
|
47
|
-
width: "70%",
|
|
48
|
-
backgroundColor: "var(--p-color-bg-surface-secondary)",
|
|
49
|
-
borderRadius: "4px",
|
|
50
|
-
animation: "pulse 1.5s ease-in-out infinite",
|
|
51
|
-
} })] })] }), _jsx("style", { children: `
|
|
52
|
-
@keyframes pulse {
|
|
53
|
-
0% {
|
|
54
|
-
opacity: 1;
|
|
55
|
-
}
|
|
56
|
-
50% {
|
|
57
|
-
opacity: 0.6;
|
|
58
|
-
}
|
|
59
|
-
100% {
|
|
60
|
-
opacity: 1;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
` })] }));
|
|
64
|
-
};
|
|
65
8
|
export const TopBanner = ({ className = "", open = true, onClose, onAction,
|
|
66
|
-
// SDK options (optional
|
|
9
|
+
// SDK options (optional)
|
|
67
10
|
shopInfo, locale, translations, config, }) => {
|
|
68
|
-
//
|
|
69
|
-
|
|
11
|
+
// Early return if not open - no rendering at all to prevent CLS
|
|
12
|
+
if (!open) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
// Initialize SDK (auto-initializes if needed)
|
|
16
|
+
useSDK({ shopInfo, locale, translations, config });
|
|
70
17
|
const banner = useTopBanner();
|
|
71
|
-
const [isDismissed, setIsDismissed] = useState(false);
|
|
72
|
-
const [dismissChecked, setDismissChecked] = useState(false);
|
|
73
18
|
// Use internal defaults
|
|
74
19
|
const { closable } = COMPONENT_DEFAULTS.topBanner;
|
|
75
|
-
|
|
76
|
-
const
|
|
20
|
+
// Dismiss state management
|
|
21
|
+
const [isDismissed, setIsDismissed] = useState(false);
|
|
22
|
+
const DISMISS_KEY = `trustshop_banner_dismissed_${banner?.id || "default"}`;
|
|
23
|
+
const DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 days
|
|
24
|
+
// Check dismiss state on mount
|
|
77
25
|
useEffect(() => {
|
|
78
|
-
|
|
79
|
-
|
|
26
|
+
if (!banner)
|
|
27
|
+
return;
|
|
28
|
+
const dismissDataStr = localStorage.getItem(DISMISS_KEY);
|
|
29
|
+
if (dismissDataStr) {
|
|
80
30
|
try {
|
|
81
|
-
const
|
|
31
|
+
const dismissData = JSON.parse(dismissDataStr);
|
|
82
32
|
const now = Date.now();
|
|
33
|
+
const timestamp = dismissData.timestamp || 0;
|
|
83
34
|
if (now - timestamp < DISMISS_DURATION) {
|
|
84
35
|
setIsDismissed(true);
|
|
85
36
|
}
|
|
@@ -91,8 +42,7 @@ shopInfo, locale, translations, config, }) => {
|
|
|
91
42
|
localStorage.removeItem(DISMISS_KEY);
|
|
92
43
|
}
|
|
93
44
|
}
|
|
94
|
-
|
|
95
|
-
}, []);
|
|
45
|
+
}, [banner, DISMISS_KEY, DISMISS_DURATION]);
|
|
96
46
|
const handleClose = () => {
|
|
97
47
|
const dismissData = {
|
|
98
48
|
timestamp: Date.now(),
|
|
@@ -110,38 +60,14 @@ shopInfo, locale, translations, config, }) => {
|
|
|
110
60
|
onAction?.(banner);
|
|
111
61
|
}
|
|
112
62
|
};
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
// Always render skeleton during loading, but control visibility
|
|
117
|
-
if (!dismissChecked || !sdk.initialized || sdk.loading || sdk.isInitializing) {
|
|
118
|
-
return _jsx(TopBannerSkeleton, { className: className, visible: showSkeleton });
|
|
119
|
-
}
|
|
120
|
-
// No banner data available - render invisible container to maintain mount
|
|
121
|
-
if (!banner) {
|
|
122
|
-
return (_jsx("div", { className: className, style: {
|
|
123
|
-
width: "100%",
|
|
124
|
-
height: 0,
|
|
125
|
-
overflow: "hidden",
|
|
126
|
-
position: "absolute",
|
|
127
|
-
pointerEvents: "none",
|
|
128
|
-
}, "aria-hidden": "true" }));
|
|
129
|
-
}
|
|
130
|
-
// Removed custom render function - using SDK default rendering
|
|
131
|
-
// Default banner render with visibility control
|
|
132
|
-
// When not showing, render zero-space container
|
|
133
|
-
if (!showBanner) {
|
|
134
|
-
return (_jsx("div", { className: className, style: {
|
|
135
|
-
width: "100%",
|
|
136
|
-
height: 0,
|
|
137
|
-
overflow: "hidden",
|
|
138
|
-
position: "absolute",
|
|
139
|
-
pointerEvents: "none",
|
|
140
|
-
}, "aria-hidden": "true" }));
|
|
63
|
+
// Don't render if dismissed or no banner data
|
|
64
|
+
if (isDismissed || !banner) {
|
|
65
|
+
return null;
|
|
141
66
|
}
|
|
67
|
+
// Render the actual banner
|
|
142
68
|
return (_jsx("div", { className: className, style: {
|
|
143
69
|
width: "100%",
|
|
144
|
-
minHeight: `${BANNER_MIN_HEIGHT}px`,
|
|
145
70
|
}, 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" }) }))] }) })] }) }) }));
|
|
146
71
|
};
|
|
72
|
+
export default TopBanner;
|
|
147
73
|
//# sourceMappingURL=TopBanner.js.map
|
|
@@ -1 +1 @@
|
|
|
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};"]}
|
|
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\nexport const TopBanner: React.FC<TopBannerProps> = ({\n className = \"\",\n open = true,\n onClose,\n onAction,\n // SDK options (optional)\n shopInfo,\n locale,\n translations,\n config,\n}) => {\n // Early return if not open - no rendering at all to prevent CLS\n if (!open) {\n return null;\n }\n\n // Initialize SDK (auto-initializes if needed)\n useSDK({ shopInfo, locale, translations, config });\n const banner = useTopBanner();\n\n // Use internal defaults\n const { closable } = COMPONENT_DEFAULTS.topBanner;\n\n // Dismiss state management\n const [isDismissed, setIsDismissed] = useState(false);\n const DISMISS_KEY = `trustshop_banner_dismissed_${banner?.id || \"default\"}`;\n const DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 days\n\n // Check dismiss state on mount\n useEffect(() => {\n if (!banner) return;\n\n const dismissDataStr = localStorage.getItem(DISMISS_KEY);\n if (dismissDataStr) {\n try {\n const dismissData = JSON.parse(dismissDataStr);\n const now = Date.now();\n const timestamp = dismissData.timestamp || 0;\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 }, [banner, DISMISS_KEY, DISMISS_DURATION]);\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 // Don't render if dismissed or no banner data\n if (isDismissed || !banner) {\n return null;\n }\n\n // Render the actual banner\n return (\n <div\n className={className}\n style={{\n width: \"100%\",\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};\n\nexport default TopBanner;"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../src/types/translations.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE;YACL,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE;YACb,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;YAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,aAAa,CAAC,EAAE,MAAM,CAAC;YACvB,OAAO,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../src/types/translations.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE;YACL,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE;YACb,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;YAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,aAAa,CAAC,EAAE,MAAM,CAAC;YACvB,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;SAC9B,CAAC;KACH,CAAA;CACF;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translations.js","sourceRoot":"","sources":["../../src/types/translations.ts"],"names":[],"mappings":"","sourcesContent":["export interface SDKTranslations {\n whatsNew?: {\n title?: string;\n tabs?: {\n article?: string;\n productUpdate?: string;\n };\n buttonViewAll?: {\n article?: string;\n productUpdate?: string;\n };\n noData?: string;\n };\n growApps?: {\n title?: string;\n subtitle?: string;\n exploreApps?: string;\n install?: string;\n installed?: string;\n dismiss?: string;\n noData?: string;\n };\n banner?: {\n learnMore?: string;\n dismiss?: string;\n };\n partnerIntegration?: {\n title?: string;\n reviewSourcesTitle?: string;\n postPurchaseTitle?: string;\n seoSnippetsTitle?: string;\n noData?: string;\n noDataMessage?: string;\n errorTitle?: string;\n errorMessage?: string;\n install?: string;\n installed?: string;\n manage?: string;\n open?: string;\n connect?: string;\n connected?: string;\n inactive?: string;\n active?: string;\n pending?: string;\n upgradeBadge?: {\n upgradeToBasic?: string;\n upgradeToPro?: string;\n upgradeToUnlimited?: string;\n fromBasic?: string;\n fromPro?: string;\n fromUnlimited?: string;\n upgrade?: string;\n };\n }\n}\n\nexport type TranslationKey = keyof SDKTranslations;"]}
|
|
1
|
+
{"version":3,"file":"translations.js","sourceRoot":"","sources":["../../src/types/translations.ts"],"names":[],"mappings":"","sourcesContent":["export interface SDKTranslations {\n whatsNew?: {\n title?: string;\n tabs?: {\n article?: string;\n productUpdate?: string;\n };\n buttonViewAll?: {\n article?: string;\n productUpdate?: string;\n };\n noData?: string;\n };\n growApps?: {\n title?: string;\n subtitle?: string;\n exploreApps?: string;\n install?: string;\n installed?: string;\n dismiss?: string;\n noData?: string;\n };\n banner?: {\n learnMore?: string;\n dismiss?: string;\n };\n partnerIntegration?: {\n title?: string;\n reviewSourcesTitle?: string;\n postPurchaseTitle?: string;\n seoSnippetsTitle?: string;\n noData?: string;\n noDataMessage?: string;\n errorTitle?: string;\n errorMessage?: string;\n install?: string;\n installed?: string;\n manage?: string;\n open?: string;\n connect?: string;\n connected?: string;\n inactive?: string;\n active?: string;\n pending?: string;\n upgradeBadge?: {\n upgradeToBasic?: string;\n upgradeToPro?: string;\n upgradeToUnlimited?: string;\n fromBasic?: string;\n fromPro?: string;\n fromUnlimited?: string;\n upgrade?: string;\n upgradeBadgeTooltip?: string;\n };\n }\n}\n\nexport type TranslationKey = keyof SDKTranslations;"]}
|