@datlv-trustshop/shopify-inapp-components 0.2.5 → 0.2.6
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/TopBanner.js +68 -4
- package/package.json +1 -1
|
@@ -1,11 +1,61 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState, useEffect } from "react";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect, useContext } from "react";
|
|
3
3
|
import { Banner, Button, Text, BlockStack, InlineStack, } from "@shopify/polaris";
|
|
4
4
|
import { ExternalIcon } from "@shopify/polaris-icons";
|
|
5
5
|
import { useTopBanner } from "../hooks/useBanner";
|
|
6
|
+
import { DashboardContext } from "../provider/DashboardProvider";
|
|
7
|
+
const BANNER_MIN_HEIGHT = 100;
|
|
8
|
+
const TopBannerSkeleton = ({ className }) => {
|
|
9
|
+
return (_jsxs("div", { className: className, style: { width: "100%" }, children: [_jsxs("div", { style: {
|
|
10
|
+
minHeight: `${BANNER_MIN_HEIGHT}px`,
|
|
11
|
+
padding: "16px",
|
|
12
|
+
borderRadius: "8px",
|
|
13
|
+
border: "1px solid var(--p-color-border-subdued)",
|
|
14
|
+
backgroundColor: "var(--p-color-bg-surface)",
|
|
15
|
+
display: "flex",
|
|
16
|
+
alignItems: "center",
|
|
17
|
+
gap: "16px",
|
|
18
|
+
}, children: [_jsx("div", { style: {
|
|
19
|
+
width: 72,
|
|
20
|
+
height: 72,
|
|
21
|
+
borderRadius: "8px",
|
|
22
|
+
backgroundColor: "var(--p-color-bg-surface-secondary)",
|
|
23
|
+
flexShrink: 0,
|
|
24
|
+
animation: "pulse 1.5s ease-in-out infinite",
|
|
25
|
+
} }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
|
|
26
|
+
height: 20,
|
|
27
|
+
width: "30%",
|
|
28
|
+
backgroundColor: "var(--p-color-bg-surface-secondary)",
|
|
29
|
+
borderRadius: "4px",
|
|
30
|
+
marginBottom: "8px",
|
|
31
|
+
animation: "pulse 1.5s ease-in-out infinite",
|
|
32
|
+
} }), _jsx("div", { style: {
|
|
33
|
+
height: 16,
|
|
34
|
+
width: "70%",
|
|
35
|
+
backgroundColor: "var(--p-color-bg-surface-secondary)",
|
|
36
|
+
borderRadius: "4px",
|
|
37
|
+
animation: "pulse 1.5s ease-in-out infinite",
|
|
38
|
+
} })] })] }), _jsx("style", { children: `
|
|
39
|
+
@keyframes pulse {
|
|
40
|
+
0% {
|
|
41
|
+
opacity: 1;
|
|
42
|
+
}
|
|
43
|
+
50% {
|
|
44
|
+
opacity: 0.6;
|
|
45
|
+
}
|
|
46
|
+
100% {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
` })] }));
|
|
51
|
+
};
|
|
6
52
|
export const TopBanner = ({ className = "", onClose, onAction, closable = true, renderBanner, }) => {
|
|
53
|
+
const context = useContext(DashboardContext);
|
|
54
|
+
const isInitialized = context?.isInitialized ?? false;
|
|
55
|
+
const isLoading = context?.state?.loading ?? true;
|
|
7
56
|
const banner = useTopBanner();
|
|
8
57
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
58
|
+
const [dismissChecked, setDismissChecked] = useState(false);
|
|
9
59
|
const DISMISS_KEY = "ts-top-banner-dismissed";
|
|
10
60
|
const DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000;
|
|
11
61
|
useEffect(() => {
|
|
@@ -25,6 +75,7 @@ export const TopBanner = ({ className = "", onClose, onAction, closable = true,
|
|
|
25
75
|
localStorage.removeItem(DISMISS_KEY);
|
|
26
76
|
}
|
|
27
77
|
}
|
|
78
|
+
setDismissChecked(true);
|
|
28
79
|
}, []);
|
|
29
80
|
const handleClose = () => {
|
|
30
81
|
const dismissData = {
|
|
@@ -43,7 +94,17 @@ export const TopBanner = ({ className = "", onClose, onAction, closable = true,
|
|
|
43
94
|
onAction?.(banner);
|
|
44
95
|
}
|
|
45
96
|
};
|
|
46
|
-
if (!
|
|
97
|
+
if (!dismissChecked) {
|
|
98
|
+
return _jsx(TopBannerSkeleton, { className: className });
|
|
99
|
+
}
|
|
100
|
+
if (isDismissed) {
|
|
101
|
+
// Banner was dismissed, don't show anything
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
if (!isInitialized || isLoading) {
|
|
105
|
+
return _jsx(TopBannerSkeleton, { className: className });
|
|
106
|
+
}
|
|
107
|
+
if (!banner) {
|
|
47
108
|
return null;
|
|
48
109
|
}
|
|
49
110
|
if (renderBanner) {
|
|
@@ -52,5 +113,8 @@ export const TopBanner = ({ className = "", onClose, onAction, closable = true,
|
|
|
52
113
|
onAction: handleAction,
|
|
53
114
|
}) }));
|
|
54
115
|
}
|
|
55
|
-
return (_jsx("div", { className: className, style: {
|
|
116
|
+
return (_jsx("div", { className: className, style: {
|
|
117
|
+
width: "100%",
|
|
118
|
+
minHeight: `${BANNER_MIN_HEIGHT}px`,
|
|
119
|
+
}, 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" }) }))] }) })] }) }) }));
|
|
56
120
|
};
|