@datlv-trustshop/shopify-inapp-components 0.1.23 → 0.1.25
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import { Card, BlockStack, InlineStack, Text, Badge, Button, Box, } from "@shopify/polaris";
|
|
3
4
|
import { XIcon } from "@shopify/polaris-icons";
|
|
4
5
|
export const FloatingCard = ({ data, onDismiss, onPrimaryAction, onSecondaryAction, position = 'bottom-right', showCloseButton = true, }) => {
|
|
@@ -40,8 +41,81 @@ export const FloatingCard = ({ data, onDismiss, onPrimaryAction, onSecondaryActi
|
|
|
40
41
|
}
|
|
41
42
|
}
|
|
42
43
|
};
|
|
43
|
-
//
|
|
44
|
-
|
|
44
|
+
// CSS-in-JS styles - no external CSS file needed
|
|
45
|
+
const floatingCardStyles = {
|
|
46
|
+
position: 'fixed',
|
|
47
|
+
zIndex: 9999,
|
|
48
|
+
width: '300px',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
flexDirection: 'column',
|
|
51
|
+
alignItems: 'flex-start',
|
|
52
|
+
borderRadius: '8px',
|
|
53
|
+
boxShadow: '0 4px 26px 0 rgba(0, 0, 0, 0.10)',
|
|
54
|
+
overflow: 'hidden',
|
|
55
|
+
animation: 'slideInUp 0.3s ease-out',
|
|
56
|
+
...(position === 'bottom-right' && { bottom: '20px', right: '20px' }),
|
|
57
|
+
...(position === 'bottom-left' && { bottom: '20px', left: '20px' }),
|
|
58
|
+
...(position === 'top-right' && { top: '20px', right: '20px' }),
|
|
59
|
+
...(position === 'top-left' && { top: '20px', left: '20px' }),
|
|
60
|
+
};
|
|
61
|
+
const closeButtonStyles = {
|
|
62
|
+
display: 'flex',
|
|
63
|
+
padding: '4px 2px',
|
|
64
|
+
justifyContent: 'center',
|
|
65
|
+
alignItems: 'center',
|
|
66
|
+
gap: '2px',
|
|
67
|
+
position: 'absolute',
|
|
68
|
+
right: '7px',
|
|
69
|
+
top: '7px',
|
|
70
|
+
borderRadius: '8px',
|
|
71
|
+
background: 'rgba(255, 255, 255, 0.20)',
|
|
72
|
+
border: 'none',
|
|
73
|
+
cursor: 'pointer',
|
|
74
|
+
transition: 'background 0.2s ease',
|
|
75
|
+
zIndex: 10,
|
|
76
|
+
backdropFilter: 'blur(10px)',
|
|
77
|
+
WebkitBackdropFilter: 'blur(10px)',
|
|
78
|
+
};
|
|
79
|
+
const imageContainerStyles = {
|
|
80
|
+
position: 'relative',
|
|
81
|
+
height: '168.75px',
|
|
82
|
+
aspectRatio: '16/9',
|
|
83
|
+
width: '100%',
|
|
84
|
+
overflow: 'hidden',
|
|
85
|
+
borderRadius: '8px 8px 0 0',
|
|
86
|
+
backgroundColor: '#f5f5f5',
|
|
87
|
+
};
|
|
88
|
+
// Add keyframe animation dynamically
|
|
89
|
+
React.useEffect(() => {
|
|
90
|
+
// Check if animation already exists
|
|
91
|
+
const styleId = 'floating-card-animations';
|
|
92
|
+
if (!document.getElementById(styleId)) {
|
|
93
|
+
const style = document.createElement('style');
|
|
94
|
+
style.id = styleId;
|
|
95
|
+
style.innerHTML = `
|
|
96
|
+
@keyframes slideInUp {
|
|
97
|
+
from {
|
|
98
|
+
transform: translateY(100%);
|
|
99
|
+
opacity: 0;
|
|
100
|
+
}
|
|
101
|
+
to {
|
|
102
|
+
transform: translateY(0);
|
|
103
|
+
opacity: 1;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
@keyframes fadeIn {
|
|
107
|
+
from { opacity: 0; }
|
|
108
|
+
to { opacity: 1; }
|
|
109
|
+
}
|
|
110
|
+
`;
|
|
111
|
+
document.head.appendChild(style);
|
|
112
|
+
}
|
|
113
|
+
}, []);
|
|
114
|
+
return (_jsx("div", { style: floatingCardStyles, children: _jsxs(Card, { padding: "0", roundedAbove: "sm", children: [(showCloseButton && data.dismissible !== false) && (_jsx("button", { style: closeButtonStyles, onMouseEnter: (e) => {
|
|
115
|
+
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.30)';
|
|
116
|
+
}, onMouseLeave: (e) => {
|
|
117
|
+
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.20)';
|
|
118
|
+
}, onClick: onDismiss, "aria-label": "Close", children: _jsx(XIcon, { style: { width: '20px', height: '20px', color: 'rgba(255, 255, 255, 0.9)' } }) })), _jsxs(BlockStack, { gap: "0", children: [data.img_url && (_jsx("div", { style: imageContainerStyles, children: _jsx("img", { src: data.img_url, alt: data.image_alt || data.title, style: {
|
|
45
119
|
width: "100%",
|
|
46
120
|
height: "100%",
|
|
47
121
|
objectFit: "cover",
|
|
@@ -9,7 +9,7 @@ export function useFloatingCards(options = {}) {
|
|
|
9
9
|
const dashboardContext = useDashboardContext();
|
|
10
10
|
const contextLocale = dashboardContext?.locale;
|
|
11
11
|
// Use props locale if provided, otherwise use context locale, fallback to 'en'
|
|
12
|
-
const locale = propsLocale || contextLocale ||
|
|
12
|
+
const locale = propsLocale || contextLocale || "en";
|
|
13
13
|
const [cards, setCards] = useState([]);
|
|
14
14
|
const [loading, setLoading] = useState(false);
|
|
15
15
|
const [error, setError] = useState(null);
|
|
@@ -23,7 +23,6 @@ export function useFloatingCards(options = {}) {
|
|
|
23
23
|
setError(null);
|
|
24
24
|
try {
|
|
25
25
|
const id = shopId;
|
|
26
|
-
// Use proxy in development
|
|
27
26
|
const apiUrl = typeof window !== "undefined" &&
|
|
28
27
|
window.location.hostname === "localhost"
|
|
29
28
|
? `/api/campaigns?shop_id=${id}&locale=${locale}`
|
|
@@ -41,7 +40,6 @@ export function useFloatingCards(options = {}) {
|
|
|
41
40
|
}
|
|
42
41
|
const data = await response.json();
|
|
43
42
|
if (data.success && Array.isArray(data.data)) {
|
|
44
|
-
// Transform the API response to match our FloatingCardData interface
|
|
45
43
|
const transformedCards = data.data.map((card) => ({
|
|
46
44
|
...card,
|
|
47
45
|
// Ensure date format
|
|
@@ -138,19 +136,36 @@ export function useVisibleFloatingCards(options = {}) {
|
|
|
138
136
|
return false;
|
|
139
137
|
}
|
|
140
138
|
// Check display_pages logic
|
|
141
|
-
if (card.display_pages !== undefined) {
|
|
139
|
+
if (card.display_pages !== undefined && card.display_pages !== null) {
|
|
142
140
|
// If display_pages is empty array, show on all pages
|
|
143
141
|
if (card.display_pages.length === 0) {
|
|
144
142
|
return true;
|
|
145
143
|
}
|
|
146
144
|
// If display_pages has values, check if current route matches
|
|
147
|
-
if (currentRoute) {
|
|
148
|
-
// Extract the page key from the route
|
|
149
|
-
|
|
145
|
+
if (currentRoute !== undefined) {
|
|
146
|
+
// Extract the page key from the route
|
|
147
|
+
// Special handling: "/" or "" should map to "dashboard"
|
|
148
|
+
let currentPage = currentRoute.replace(/^\//, "").split("/")[0];
|
|
149
|
+
// Map root route to dashboard (in-app convention)
|
|
150
|
+
if (!currentPage || currentPage === "" || currentRoute === "/") {
|
|
151
|
+
currentPage = "dashboard";
|
|
152
|
+
}
|
|
153
|
+
// Debug log for development
|
|
154
|
+
if (typeof window !== "undefined" &&
|
|
155
|
+
window.location.hostname === "localhost") {
|
|
156
|
+
console.log("[FloatingCard] Route matching:", {
|
|
157
|
+
cardId: card.id,
|
|
158
|
+
currentRoute,
|
|
159
|
+
currentPage,
|
|
160
|
+
display_pages: card.display_pages,
|
|
161
|
+
matches: card.display_pages.includes(currentPage),
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
// Check if current page is in display_pages
|
|
150
165
|
return card.display_pages.includes(currentPage);
|
|
151
166
|
}
|
|
152
|
-
// If no current route provided,
|
|
153
|
-
return
|
|
167
|
+
// If no current route provided, assume dashboard
|
|
168
|
+
return card.display_pages.includes("dashboard");
|
|
154
169
|
}
|
|
155
170
|
// If display_pages is not defined, show on all pages (backward compatibility)
|
|
156
171
|
return true;
|