@datlv-trustshop/shopify-inapp-components 0.3.2 → 0.3.4

package/dist/components/FloatingCard.d.ts

@@ -6,7 +6,7 @@ export interface FloatingCardData {
     priority: number;
     title: string;
     description: string;
-    date: string;
+    date?: string | null;
     tag?: {
         label: string;
         tone: "success" | "info" | "warning" | "critical" | "new";
@@ -38,8 +38,8 @@ interface FloatingCardProps {
     onDismiss?: () => void;
     onPrimaryAction?: (data: FloatingCardData) => void;
     onSecondaryAction?: (data: FloatingCardData) => void;
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    animationType?: 'slide' | 'fade';
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    animationType?: "slide" | "fade";
     showCloseButton?: boolean;
 }
 export declare const FloatingCard: React.FC<FloatingCardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingCard.d.ts","sourceRoot":"","sources":["../../src/components/FloatingCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAa7C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;KAC3D,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;KAClC,CAAC;IACF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;KAClC,CAAC;IACF,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkQpD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FloatingCard.d.ts","sourceRoot":"","sources":["../../src/components/FloatingCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAc7C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;KAC3D,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;KAClC,CAAC;IACF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;KAClC,CAAC;IACF,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2OpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/FloatingCard.js

@@ -3,125 +3,91 @@ import React from "react";
 import { Card, BlockStack, InlineStack, Text, Badge, Button, Box, } from "@shopify/polaris";
 import { useCampaignTracking } from "../hooks/useCampaignTracking";
 import { useSDK } from "../core/SDKManager";
-export const FloatingCard = ({ data, shopId: propsShopId, onDismiss, onPrimaryAction, onSecondaryAction, position = 'bottom-right', showCloseButton = true, }) => {
-    // Get shopId from SDK shopInfo if not provided via props
+import { ExternalIcon } from "@shopify/polaris-icons";
+export const FloatingCard = ({ data, shopId: propsShopId, onDismiss, onPrimaryAction, onSecondaryAction, position = "bottom-right", showCloseButton = true, }) => {
     const sdk = useSDK({});
     const contextShopId = sdk.shopInfo?.id;
     const shopId = propsShopId || contextShopId;
-    // Early return if no data
     if (!data) {
         return null;
     }
-    // Use the campaign ID from data or fallback to regular id
     const campaignId = data.campaign_id || data.id;
-    // Set up campaign tracking
-    const tracking = shopId && campaignId ? useCampaignTracking({
-        shopId,
-        campaignId,
-        threshold: 0.5, // Track when 50% visible
-        visibilityDuration: 1000, // Track view after 1 second
-        metadata: {
-            card_type: data.type,
-            card_key: data.key,
-        },
-    }) : null;
+    const tracking = shopId && campaignId
+        ? useCampaignTracking({
+            shopId,
+            campaignId,
+            threshold: 0.5,
+            visibilityDuration: 1000,
+            metadata: {
+                card_type: data.type,
+                card_key: data.key,
+            },
+        })
+        : null;
     const handlePrimaryAction = () => {
-        // Track the click
         tracking?.trackPrimaryAction();
         if (data.primary_action) {
-            const url = data.primary_action.url;
-            // Check if it's an external URL
-            if (data.primary_action.external) {
-                window.open(url, "_blank");
-            }
-            // Check if it's a modal trigger
-            else if (url === "modal" || url === "/pricing") {
-                // Pass the full card data to the handler for modal handling
-                onPrimaryAction?.(data);
-            }
-            // Check if it's an internal route
-            else if (url?.startsWith("/")) {
-                // Pass the full card data for internal navigation
-                onPrimaryAction?.(data);
-            }
-            // Default: just call the handler
-            else {
-                onPrimaryAction?.(data);
-            }
+            onPrimaryAction?.(data);
         }
     };
     const handleSecondaryAction = () => {
-        // Track the click
         tracking?.trackSecondaryAction();
         if (data.secondary_action) {
-            const url = data.secondary_action.url;
-            if (data.secondary_action.external) {
-                window.open(url, "_blank");
-            }
-            else if (url?.startsWith("/") || url === "modal") {
-                // Pass the full card data for internal handling
-                onSecondaryAction?.(data);
-            }
-            else {
-                onSecondaryAction?.(data);
-            }
+            onSecondaryAction?.(data);
         }
     };
     const handleDismiss = () => {
-        // Track the dismiss
         tracking?.trackDismiss();
         onDismiss?.();
     };
-    // CSS-in-JS styles - no external CSS file needed
     const floatingCardStyles = {
-        position: 'fixed',
+        position: "fixed",
         zIndex: 9999,
-        width: '300px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        borderRadius: '8px',
-        boxShadow: '0 4px 26px 0 rgba(0, 0, 0, 0.10)',
-        overflow: 'hidden',
-        animation: 'slideInUp 0.3s ease-out',
-        ...(position === 'bottom-right' && { bottom: '20px', right: '20px' }),
-        ...(position === 'bottom-left' && { bottom: '20px', left: '20px' }),
-        ...(position === 'top-right' && { top: '20px', right: '20px' }),
-        ...(position === 'top-left' && { top: '20px', left: '20px' }),
+        width: "300px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        borderRadius: "8px",
+        boxShadow: "0 4px 26px 0 rgba(0, 0, 0, 0.10)",
+        overflow: "hidden",
+        animation: "slideInUp 0.3s ease-out",
+        ...(position === "bottom-right" && { bottom: "20px", right: "20px" }),
+        ...(position === "bottom-left" && { bottom: "20px", left: "20px" }),
+        ...(position === "top-right" && { top: "20px", right: "20px" }),
+        ...(position === "top-left" && { top: "20px", left: "20px" }),
     };
     const closeButtonStyles = {
-        display: 'flex',
-        padding: '4px 2px',
-        justifyContent: 'center',
-        alignItems: 'center',
-        gap: '2px',
-        position: 'absolute',
-        right: '7px',
-        top: '7px',
-        borderRadius: '8px',
-        background: 'rgba(255, 255, 255, 0.10)',
-        border: 'none',
-        cursor: 'pointer',
-        transition: 'background 0.2s ease',
+        display: "flex",
+        height: "28px",
+        width: "28px",
+        padding: "8.75px",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8.75px",
+        position: "absolute",
+        right: "7px",
+        top: "7px",
+        borderRadius: "7875px",
+        border: "1.167px solid rgba(0, 0, 0, 0.08)",
+        background: "#FFF",
+        cursor: "pointer",
+        transition: "all 0.2s ease",
         zIndex: 10,
-        backdropFilter: 'blur(10px)',
-        WebkitBackdropFilter: 'blur(10px)',
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
     };
     const imageContainerStyles = {
-        position: 'relative',
-        height: '168.75px',
-        aspectRatio: '16/9',
-        width: '100%',
-        overflow: 'hidden',
-        borderRadius: '8px 8px 0 0',
-        backgroundColor: '#f5f5f5',
+        position: "relative",
+        height: "168.75px",
+        aspectRatio: "16/9",
+        width: "100%",
+        overflow: "hidden",
+        borderRadius: "8px 8px 0 0",
+        backgroundColor: "#f5f5f5",
     };
-    // Add keyframe animation dynamically
     React.useEffect(() => {
-        // Check if animation already exists
-        const styleId = 'floating-card-animations';
+        const styleId = "floating-card-animations";
         if (!document.getElementById(styleId)) {
-            const style = document.createElement('style');
+            const style = document.createElement("style");
             style.id = styleId;
             style.innerHTML = `
         @keyframes slideInUp {
@@ -142,10 +108,7 @@ export const FloatingCard = ({ data, shopId: propsShopId, onDismiss, onPrimaryAc
             document.head.appendChild(style);
         }
     }, []);
-    return (_jsx("div", { ref: tracking?.elementRef, style: floatingCardStyles, children: _jsxs(Card, { padding: "0", roundedAbove: "sm", children: [(showCloseButton && data.dismissible !== false) && (_jsx("button", { style: closeButtonStyles, onClick: handleDismiss, "aria-label": "Close", children: _jsx("div", { style: {
-                            width: "20px",
-                            height: "20ox"
-                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: _jsx("path", { d: "M6.71967 7.78033C7.01256 8.07322 7.48744 8.07322 7.78033 7.78033C8.07322 7.48744 8.07322 7.01256 7.78033 6.71967L5.06066 4L7.78033 1.28033C8.07322 0.987437 8.07322 0.512563 7.78033 0.21967C7.48744 -0.073223 7.01256 -0.073223 6.71967 0.21967L4 2.93934L1.28033 0.21967C0.987437 -0.0732233 0.512564 -0.0732233 0.21967 0.21967C-0.0732225 0.512563 -0.0732226 0.987437 0.21967 1.28033L2.93934 4L0.21967 6.71967C-0.0732233 7.01256 -0.0732233 7.48744 0.21967 7.78033C0.512563 8.07322 0.987437 8.07322 1.28033 7.78033L4 5.06066L6.71967 7.78033Z", fill: "white", fillOpacity: "0.6" }) }) }) })), _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: {
+    return (_jsx("div", { ref: tracking?.elementRef, style: floatingCardStyles, children: _jsxs(Card, { padding: "0", roundedAbove: "sm", children: [showCloseButton && data.dismissible !== false && (_jsx("button", { style: closeButtonStyles, onClick: handleDismiss, "aria-label": "Close", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "#111111", children: _jsx("path", { d: "M8.06721 8.99529C8.32349 9.25157 8.73901 9.25157 8.99529 8.99529C9.25157 8.73901 9.25157 8.32349 8.99529 8.06721L5.52183 4.59375L8.99529 1.12029C9.25157 0.864008 9.25157 0.448493 8.99529 0.192212C8.73901 -0.06407 8.32349 -0.06407 8.06721 0.192212L4.59375 3.66567L1.12029 0.192211C0.864007 -0.0640704 0.448493 -0.0640704 0.192211 0.192211C-0.0640704 0.448493 -0.0640705 0.864007 0.192211 1.12029L3.66567 4.59375L0.192212 8.06721C-0.06407 8.32349 -0.06407 8.73901 0.192212 8.99529C0.448493 9.25157 0.864008 9.25157 1.12029 8.99529L4.59375 5.52183L8.06721 8.99529Z", fill: "#111111" }) }) })), _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: {
                                     width: "100%",
                                     height: "100%",
                                     objectFit: "cover",
@@ -158,10 +121,14 @@ export const FloatingCard = ({ data, shopId: propsShopId, onDismiss, onPrimaryAc
                                                     gap: "6px",
                                                 }, children: [_jsxs("div", { style: {
                                                             display: "flex",
-                                                            flexDirection: "row",
+                                                            flexDirection: "column",
                                                             gap: "6px",
-                                                            alignItems: "start"
-                                                        }, children: [_jsx(Text, { as: "h2", variant: "bodyLg", fontWeight: "semibold", children: data.title }), data.tag && (_jsx(Badge, { tone: data.tag.tone || "success", children: data.tag.label }))] }), _jsx(Text, { as: "p", variant: "bodySm", children: data.date })] }), _jsx(Text, { as: "p", variant: "bodyMd", children: data.description })] }), _jsxs(InlineStack, { gap: "200", children: [data.primary_action && (_jsx(Button, { variant: data.primary_action.variant === "primary"
+                                                            alignItems: "start",
+                                                        }, children: [data.tag && (_jsx(Badge
+                                                            // tone={data.tag.tone || "success"}
+                                                            , { 
+                                                                // tone={data.tag.tone || "success"}
+                                                                tone: "success", children: data.tag.label })), _jsx(Text, { as: "h2", variant: "bodyLg", fontWeight: "semibold", children: data.title })] }), data.date && (_jsx(Text, { as: "p", variant: "bodySm", children: data.date }))] }), _jsx(Text, { as: "p", variant: "bodyMd", children: data.description })] }), _jsxs(InlineStack, { gap: "200", children: [data.primary_action && (_jsx(Button, { icon: ExternalIcon, variant: data.primary_action.variant === "primary"
                                                     ? "primary"
                                                     : "plain", onClick: handlePrimaryAction, children: data.primary_action.label })), data.secondary_action && (_jsx(Button, { variant: "tertiary", onClick: handleSecondaryAction, children: data.secondary_action.label }))] })] }) })] })] }) }));
 };

package/dist/components/FloatingCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingCard.js","sourceRoot":"","sources":["../../src/components/FloatingCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,IAAI,EACJ,KAAK,EACL,MAAM,EACN,GAAG,GACJ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AA+C5C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,EACJ,MAAM,EAAE,WAAW,EACnB,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,QAAQ,GAAG,cAAc,EACzB,eAAe,GAAG,IAAI,GACvB,EAAE,EAAE;IACH,yDAAyD;IACzD,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IACvB,MAAM,aAAa,GAAG,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC;IACvC,MAAM,MAAM,GAAG,WAAW,IAAI,aAAa,CAAC;IAE5C,0BAA0B;IAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0DAA0D;IAC1D,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,EAAE,CAAC;IAE/C,2BAA2B;IAC3B,MAAM,QAAQ,GAAG,MAAM,IAAI,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC;QAC1D,MAAM;QACN,UAAU;QACV,SAAS,EAAE,GAAG,EAAE,yBAAyB;QACzC,kBAAkB,EAAE,IAAI,EAAE,4BAA4B;QACtD,QAAQ,EAAE;YACR,SAAS,EAAE,IAAI,CAAC,IAAI;YACpB,QAAQ,EAAE,IAAI,CAAC,GAAG;SACnB;KACF,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACV,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,kBAAkB;QAClB,QAAQ,EAAE,kBAAkB,EAAE,CAAC;QAE/B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;YAEpC,gCAAgC;YAChC,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;gBACjC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC7B,CAAC;YACD,gCAAgC;iBAC3B,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC/C,4DAA4D;gBAC5D,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;YACD,kCAAkC;iBAC7B,IAAI,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC9B,kDAAkD;gBAClD,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;YACD,iCAAiC;iBAC5B,CAAC;gBACJ,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,kBAAkB;QAClB,QAAQ,EAAE,oBAAoB,EAAE,CAAC;QAEjC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC;YAEtC,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;gBACnC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC7B,CAAC;iBAAM,IAAI,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;gBACnD,gDAAgD;gBAChD,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,oBAAoB;QACpB,QAAQ,EAAE,YAAY,EAAE,CAAC;QACzB,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,iDAAiD;IACjD,MAAM,kBAAkB,GAAkB;QACxC,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,YAAY;QACxB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,kCAAkC;QAC7C,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,yBAAyB;QACpC,GAAG,CAAC,QAAQ,KAAK,cAAc,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACrE,GAAG,CAAC,QAAQ,KAAK,aAAa,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QACnE,GAAG,CAAC,QAAQ,KAAK,WAAW,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAC/D,GAAG,CAAC,QAAQ,KAAK,UAAU,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;KAC9D,CAAC;IAEF,MAAM,iBAAiB,GAAkB;QACvC,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,SAAS;QAClB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;QACV,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,KAAK;QACV,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,2BAA2B;QACvC,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,sBAAsB;QAClC,MAAM,EAAE,EAAE;QACV,cAAc,EAAE,YAAY;QAC5B,oBAAoB,EAAE,YAAY;KACnC,CAAC;IAEF,MAAM,oBAAoB,GAAkB;QAC1C,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,UAAU;QAClB,WAAW,EAAE,MAAM;QACnB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,aAAa;QAC3B,eAAe,EAAE,SAAS;KAC3B,CAAC;IAEF,qCAAqC;IACrC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,oCAAoC;QACpC,MAAM,OAAO,GAAG,0BAA0B,CAAC;QAC3C,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;YACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC9C,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC;YACnB,KAAK,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;OAejB,CAAC;YACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cAAK,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,YACvD,MAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,YAAY,EAAC,IAAI,aAChC,CAAC,eAAe,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,IAAI,CAClD,iBACE,KAAK,EAAE,iBAAiB,EACxB,OAAO,EAAE,aAAa,gBACX,OAAO,YAElB,cAAK,KAAK,EAAE;4BACV,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,MAAM;yBACf,YACG,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1F,eAAM,CAAC,EAAC,yhBAAyhB,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,GAAE,GAC9jB,GACF,GACC,CACV,EAED,MAAC,UAAU,IAAC,GAAG,EAAC,GAAG,aAChB,IAAI,CAAC,OAAO,IAAI,CACf,cAAK,KAAK,EAAE,oBAAoB,YAC9B,cACE,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EACjC,KAAK,EAAE;oCACL,KAAK,EAAE,MAAM;oCACb,MAAM,EAAE,MAAM;oCACd,SAAS,EAAE,OAAO;iCACnB,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oCACb,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;oCACpD,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gCACxD,CAAC,GACD,GACE,CACP,EAED,KAAC,GAAG,IAAC,OAAO,EAAC,KAAK,YAChB,MAAC,UAAU,IAAC,GAAG,EAAC,KAAK,aACnB,MAAC,UAAU,IAAC,GAAG,EAAC,KAAK,aACnB,eACE,KAAK,EAAE;oDACL,OAAO,EAAE,MAAM;oDACf,aAAa,EAAE,QAAQ;oDACvB,GAAG,EAAE,KAAK;iDACX,aAED,eAAK,KAAK,EAAE;4DACV,OAAO,EAAE,MAAM;4DACf,aAAa,EAAE,KAAK;4DACpB,GAAG,EAAE,KAAK;4DACV,UAAU,EAAE,OAAO;yDACpB,aACC,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAC,UAAU,EAAC,UAAU,YACjD,IAAI,CAAC,KAAK,GACN,EACN,IAAI,CAAC,GAAG,IAAI,CACX,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,SAAS,YACpC,IAAI,CAAC,GAAG,CAAC,KAAK,GACT,CACT,IACG,EAEN,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAC,QAAQ,YAC1B,IAAI,CAAC,IAAI,GACL,IACH,EAEN,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAC,QAAQ,YAC1B,IAAI,CAAC,WAAW,GACZ,IACI,EACb,MAAC,WAAW,IAAC,GAAG,EAAC,KAAK,aACnB,IAAI,CAAC,cAAc,IAAI,CACtB,KAAC,MAAM,IACL,OAAO,EACL,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,SAAS;oDACvC,CAAC,CAAC,SAAS;oDACX,CAAC,CAAC,OAAO,EAEb,OAAO,EAAE,mBAAmB,YAE3B,IAAI,CAAC,cAAc,CAAC,KAAK,GACnB,CACV,EACA,IAAI,CAAC,gBAAgB,IAAI,CACxB,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,qBAAqB,YACtD,IAAI,CAAC,gBAAgB,CAAC,KAAK,GACrB,CACV,IACW,IACH,GACT,IACK,IACR,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, { CSSProperties } from \"react\";\nimport {\n  Card,\n  BlockStack,\n  InlineStack,\n  Text,\n  Badge,\n  Button,\n  Box,\n} from \"@shopify/polaris\";\nimport { useCampaignTracking } from \"../hooks/useCampaignTracking\";\nimport { useSDK } from \"../core/SDKManager\";\n\nexport interface FloatingCardData {\n  id: number;\n  key: string;\n  type: string;\n  priority: number;\n  title: string;\n  description: string;\n  date: string;\n  tag?: {\n    label: string;\n    tone: \"success\" | \"info\" | \"warning\" | \"critical\" | \"new\";\n  };\n  img_url: string;\n  image_alt?: string | null;\n  image_type: string;\n  primary_action?: {\n    label: string;\n    url: string;\n    external: boolean;\n    variant: \"primary\" | \"secondary\";\n  };\n  secondary_action?: {\n    label: string;\n    url: string;\n    external: boolean;\n    variant: \"primary\" | \"secondary\";\n  };\n  dismissible: boolean;\n  auto_close_after?: number | null;\n  reappear_interval?: number | null;\n  display_pages?: string[];\n  campaign_id?: string | number; // Added for tracking purposes\n}\n\ninterface FloatingCardProps {\n  data: FloatingCardData;\n  shopId?: string; // Required for tracking\n  onDismiss?: () => void;\n  onPrimaryAction?: (data: FloatingCardData) => void;\n  onSecondaryAction?: (data: FloatingCardData) => void;\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n  animationType?: 'slide' | 'fade';\n  showCloseButton?: boolean;\n}\n\nexport const FloatingCard: React.FC<FloatingCardProps> = ({\n  data,\n  shopId: propsShopId,\n  onDismiss,\n  onPrimaryAction,\n  onSecondaryAction,\n  position = 'bottom-right',\n  showCloseButton = true,\n}) => {\n  // Get shopId from SDK shopInfo if not provided via props\n  const sdk = useSDK({});\n  const contextShopId = sdk.shopInfo?.id;\n  const shopId = propsShopId || contextShopId;\n  \n  // Early return if no data\n  if (!data) {\n    return null;\n  }\n  \n  // Use the campaign ID from data or fallback to regular id\n  const campaignId = data.campaign_id || data.id;\n  \n  // Set up campaign tracking\n  const tracking = shopId && campaignId ? useCampaignTracking({\n    shopId,\n    campaignId,\n    threshold: 0.5, // Track when 50% visible\n    visibilityDuration: 1000, // Track view after 1 second\n    metadata: {\n      card_type: data.type,\n      card_key: data.key,\n    },\n  }) : null;\n  const handlePrimaryAction = () => {\n    // Track the click\n    tracking?.trackPrimaryAction();\n    \n    if (data.primary_action) {\n      const url = data.primary_action.url;\n      \n      // Check if it's an external URL\n      if (data.primary_action.external) {\n        window.open(url, \"_blank\");\n      } \n      // Check if it's a modal trigger\n      else if (url === \"modal\" || url === \"/pricing\") {\n        // Pass the full card data to the handler for modal handling\n        onPrimaryAction?.(data);\n      }\n      // Check if it's an internal route\n      else if (url?.startsWith(\"/\")) {\n        // Pass the full card data for internal navigation\n        onPrimaryAction?.(data);\n      }\n      // Default: just call the handler\n      else {\n        onPrimaryAction?.(data);\n      }\n    }\n  };\n\n  const handleSecondaryAction = () => {\n    // Track the click\n    tracking?.trackSecondaryAction();\n    \n    if (data.secondary_action) {\n      const url = data.secondary_action.url;\n      \n      if (data.secondary_action.external) {\n        window.open(url, \"_blank\");\n      } else if (url?.startsWith(\"/\") || url === \"modal\") {\n        // Pass the full card data for internal handling\n        onSecondaryAction?.(data);\n      } else {\n        onSecondaryAction?.(data);\n      }\n    }\n  };\n  \n  const handleDismiss = () => {\n    // Track the dismiss\n    tracking?.trackDismiss();\n    onDismiss?.();\n  };\n\n  // CSS-in-JS styles - no external CSS file needed\n  const floatingCardStyles: CSSProperties = {\n    position: 'fixed',\n    zIndex: 9999,\n    width: '300px',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    borderRadius: '8px',\n    boxShadow: '0 4px 26px 0 rgba(0, 0, 0, 0.10)',\n    overflow: 'hidden',\n    animation: 'slideInUp 0.3s ease-out',\n    ...(position === 'bottom-right' && { bottom: '20px', right: '20px' }),\n    ...(position === 'bottom-left' && { bottom: '20px', left: '20px' }),\n    ...(position === 'top-right' && { top: '20px', right: '20px' }),\n    ...(position === 'top-left' && { top: '20px', left: '20px' }),\n  };\n\n  const closeButtonStyles: CSSProperties = {\n    display: 'flex',\n    padding: '4px 2px',\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: '2px',\n    position: 'absolute',\n    right: '7px',\n    top: '7px',\n    borderRadius: '8px',\n    background: 'rgba(255, 255, 255, 0.10)',\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'background 0.2s ease',\n    zIndex: 10,\n    backdropFilter: 'blur(10px)',\n    WebkitBackdropFilter: 'blur(10px)',\n  };\n\n  const imageContainerStyles: CSSProperties = {\n    position: 'relative',\n    height: '168.75px',\n    aspectRatio: '16/9',\n    width: '100%',\n    overflow: 'hidden',\n    borderRadius: '8px 8px 0 0',\n    backgroundColor: '#f5f5f5',\n  };\n\n  // Add keyframe animation dynamically\n  React.useEffect(() => {\n    // Check if animation already exists\n    const styleId = 'floating-card-animations';\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement('style');\n      style.id = styleId;\n      style.innerHTML = `\n        @keyframes slideInUp {\n          from {\n            transform: translateY(100%);\n            opacity: 0;\n          }\n          to {\n            transform: translateY(0);\n            opacity: 1;\n          }\n        }\n        @keyframes fadeIn {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n      `;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  return (\n    <div ref={tracking?.elementRef} style={floatingCardStyles}>\n      <Card padding=\"0\" roundedAbove=\"sm\">\n        {(showCloseButton && data.dismissible !== false) && (\n          <button\n            style={closeButtonStyles}\n            onClick={handleDismiss}\n            aria-label=\"Close\"\n          >\n            <div style={{\n              width: \"20px\",\n              height: \"20ox\"\n            }}>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\n                <path d=\"M6.71967 7.78033C7.01256 8.07322 7.48744 8.07322 7.78033 7.78033C8.07322 7.48744 8.07322 7.01256 7.78033 6.71967L5.06066 4L7.78033 1.28033C8.07322 0.987437 8.07322 0.512563 7.78033 0.21967C7.48744 -0.073223 7.01256 -0.073223 6.71967 0.21967L4 2.93934L1.28033 0.21967C0.987437 -0.0732233 0.512564 -0.0732233 0.21967 0.21967C-0.0732225 0.512563 -0.0732226 0.987437 0.21967 1.28033L2.93934 4L0.21967 6.71967C-0.0732233 7.01256 -0.0732233 7.48744 0.21967 7.78033C0.512563 8.07322 0.987437 8.07322 1.28033 7.78033L4 5.06066L6.71967 7.78033Z\" fill=\"white\" fillOpacity=\"0.6\"/>\n              </svg>\n            </div>\n          </button>\n        )}\n\n        <BlockStack gap=\"0\">\n          {data.img_url && (\n            <div style={imageContainerStyles}>\n              <img\n                src={data.img_url}\n                alt={data.image_alt || data.title}\n                style={{\n                  width: \"100%\",\n                  height: \"100%\",\n                  objectFit: \"cover\",\n                }}\n                onError={(e) => {\n                  console.error(\"Image failed to load:\", data.img_url);\n                  (e.target as HTMLImageElement).style.display = \"none\";\n                }}\n              />\n            </div>\n          )}\n\n          <Box padding=\"400\">\n            <BlockStack gap=\"500\">\n              <BlockStack gap=\"300\">\n                <div\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    gap: \"6px\",\n                  }}\n                >\n                  <div style={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    gap: \"6px\",\n                    alignItems: \"start\"\n                  }}>\n                    <Text as=\"h2\" variant=\"bodyLg\" fontWeight=\"semibold\">\n                      {data.title}\n                    </Text>\n                    {data.tag && (\n                      <Badge tone={data.tag.tone || \"success\"}>\n                        {data.tag.label}\n                      </Badge>\n                    )}\n                  </div>\n\n                  <Text as=\"p\" variant=\"bodySm\">\n                    {data.date}\n                  </Text>\n                </div>\n\n                <Text as=\"p\" variant=\"bodyMd\">\n                  {data.description}\n                </Text>\n              </BlockStack>\n              <InlineStack gap=\"200\">\n                {data.primary_action && (\n                  <Button\n                    variant={\n                      data.primary_action.variant === \"primary\"\n                        ? \"primary\"\n                        : \"plain\"\n                    }\n                    onClick={handlePrimaryAction}\n                  >\n                    {data.primary_action.label}\n                  </Button>\n                )}\n                {data.secondary_action && (\n                  <Button variant=\"tertiary\" onClick={handleSecondaryAction}>\n                    {data.secondary_action.label}\n                  </Button>\n                )}\n              </InlineStack>\n            </BlockStack>\n          </Box>\n        </BlockStack>\n      </Card>\n    </div>\n  );\n};\n\nexport default FloatingCard;\n"]}
+{"version":3,"file":"FloatingCard.js","sourceRoot":"","sources":["../../src/components/FloatingCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties } from \"react\";\nimport {\n  Card,\n  BlockStack,\n  InlineStack,\n  Text,\n  Badge,\n  Button,\n  Box,\n} from \"@shopify/polaris\";\nimport { useCampaignTracking } from \"../hooks/useCampaignTracking\";\nimport { useSDK } from \"../core/SDKManager\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\n\nexport interface FloatingCardData {\n  id: number;\n  key: string;\n  type: string;\n  priority: number;\n  title: string;\n  description: string;\n  date?: string | null;\n  tag?: {\n    label: string;\n    tone: \"success\" | \"info\" | \"warning\" | \"critical\" | \"new\";\n  };\n  img_url: string;\n  image_alt?: string | null;\n  image_type: string;\n  primary_action?: {\n    label: string;\n    url: string;\n    external: boolean;\n    variant: \"primary\" | \"secondary\";\n  };\n  secondary_action?: {\n    label: string;\n    url: string;\n    external: boolean;\n    variant: \"primary\" | \"secondary\";\n  };\n  dismissible: boolean;\n  auto_close_after?: number | null;\n  reappear_interval?: number | null;\n  display_pages?: string[];\n  campaign_id?: string | number;\n}\n\ninterface FloatingCardProps {\n  data: FloatingCardData;\n  shopId?: string;\n  onDismiss?: () => void;\n  onPrimaryAction?: (data: FloatingCardData) => void;\n  onSecondaryAction?: (data: FloatingCardData) => void;\n  position?: \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n  animationType?: \"slide\" | \"fade\";\n  showCloseButton?: boolean;\n}\n\nexport const FloatingCard: React.FC<FloatingCardProps> = ({\n  data,\n  shopId: propsShopId,\n  onDismiss,\n  onPrimaryAction,\n  onSecondaryAction,\n  position = \"bottom-right\",\n  showCloseButton = true,\n}) => {\n  const sdk = useSDK({});\n  const contextShopId = sdk.shopInfo?.id;\n  const shopId = propsShopId || contextShopId;\n\n  if (!data) {\n    return null;\n  }\n\n  const campaignId = data.campaign_id || data.id;\n\n  const tracking =\n    shopId && campaignId\n      ? useCampaignTracking({\n          shopId,\n          campaignId,\n          threshold: 0.5,\n          visibilityDuration: 1000,\n          metadata: {\n            card_type: data.type,\n            card_key: data.key,\n          },\n        })\n      : null;\n  const handlePrimaryAction = () => {\n    tracking?.trackPrimaryAction();\n\n    if (data.primary_action) {\n      onPrimaryAction?.(data);\n    }\n  };\n\n  const handleSecondaryAction = () => {\n    tracking?.trackSecondaryAction();\n    if (data.secondary_action) {\n      onSecondaryAction?.(data);\n    }\n  };\n\n  const handleDismiss = () => {\n    tracking?.trackDismiss();\n    onDismiss?.();\n  };\n\n  const floatingCardStyles: CSSProperties = {\n    position: \"fixed\",\n    zIndex: 9999,\n    width: \"300px\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    borderRadius: \"8px\",\n    boxShadow: \"0 4px 26px 0 rgba(0, 0, 0, 0.10)\",\n    overflow: \"hidden\",\n    animation: \"slideInUp 0.3s ease-out\",\n    ...(position === \"bottom-right\" && { bottom: \"20px\", right: \"20px\" }),\n    ...(position === \"bottom-left\" && { bottom: \"20px\", left: \"20px\" }),\n    ...(position === \"top-right\" && { top: \"20px\", right: \"20px\" }),\n    ...(position === \"top-left\" && { top: \"20px\", left: \"20px\" }),\n  };\n\n  const closeButtonStyles: CSSProperties = {\n    display: \"flex\",\n    height: \"28px\",\n    width: \"28px\",\n    padding: \"8.75px\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    gap: \"8.75px\",\n    position: \"absolute\",\n    right: \"7px\",\n    top: \"7px\",\n    borderRadius: \"7875px\",\n    border: \"1.167px solid rgba(0, 0, 0, 0.08)\",\n    background: \"#FFF\",\n    cursor: \"pointer\",\n    transition: \"all 0.2s ease\",\n    zIndex: 10,\n    boxShadow: \"0 2px 4px rgba(0, 0, 0, 0.1)\",\n  };\n\n  const imageContainerStyles: CSSProperties = {\n    position: \"relative\",\n    height: \"168.75px\",\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    overflow: \"hidden\",\n    borderRadius: \"8px 8px 0 0\",\n    backgroundColor: \"#f5f5f5\",\n  };\n\n  React.useEffect(() => {\n    const styleId = \"floating-card-animations\";\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement(\"style\");\n      style.id = styleId;\n      style.innerHTML = `\n        @keyframes slideInUp {\n          from {\n            transform: translateY(100%);\n            opacity: 0;\n          }\n          to {\n            transform: translateY(0);\n            opacity: 1;\n          }\n        }\n        @keyframes fadeIn {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n      `;\n      document.head.appendChild(style);\n    }\n  }, []);\n\n  return (\n    <div ref={tracking?.elementRef} style={floatingCardStyles}>\n      <Card padding=\"0\" roundedAbove=\"sm\">\n        {showCloseButton && data.dismissible !== false && (\n          <button\n            style={closeButtonStyles}\n            onClick={handleDismiss}\n            aria-label=\"Close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"10\"\n              height=\"10\"\n              viewBox=\"0 0 10 10\"\n              fill=\"#111111\"\n            >\n              <path\n                d=\"M8.06721 8.99529C8.32349 9.25157 8.73901 9.25157 8.99529 8.99529C9.25157 8.73901 9.25157 8.32349 8.99529 8.06721L5.52183 4.59375L8.99529 1.12029C9.25157 0.864008 9.25157 0.448493 8.99529 0.192212C8.73901 -0.06407 8.32349 -0.06407 8.06721 0.192212L4.59375 3.66567L1.12029 0.192211C0.864007 -0.0640704 0.448493 -0.0640704 0.192211 0.192211C-0.0640704 0.448493 -0.0640705 0.864007 0.192211 1.12029L3.66567 4.59375L0.192212 8.06721C-0.06407 8.32349 -0.06407 8.73901 0.192212 8.99529C0.448493 9.25157 0.864008 9.25157 1.12029 8.99529L4.59375 5.52183L8.06721 8.99529Z\"\n                fill=\"#111111\"\n              />\n            </svg>\n          </button>\n        )}\n\n        <BlockStack gap=\"0\">\n          {data.img_url && (\n            <div style={imageContainerStyles}>\n              <img\n                src={data.img_url}\n                alt={data.image_alt || data.title}\n                style={{\n                  width: \"100%\",\n                  height: \"100%\",\n                  objectFit: \"cover\",\n                }}\n                onError={(e) => {\n                  console.error(\"Image failed to load:\", data.img_url);\n                  (e.target as HTMLImageElement).style.display = \"none\";\n                }}\n              />\n            </div>\n          )}\n\n          <Box padding=\"400\">\n            <BlockStack gap=\"500\">\n              <BlockStack gap=\"300\">\n                <div\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    gap: \"6px\",\n                  }}\n                >\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"column\",\n                      gap: \"6px\",\n                      alignItems: \"start\",\n                    }}\n                  >\n                    {data.tag && (\n                      <Badge\n                        // tone={data.tag.tone || \"success\"}\n                        tone=\"success\"\n                      >\n                        {data.tag.label}\n                      </Badge>\n                    )}\n                    <Text as=\"h2\" variant=\"bodyLg\" fontWeight=\"semibold\">\n                      {data.title}\n                    </Text>\n                  </div>\n\n                  {data.date && (\n                    <Text as=\"p\" variant=\"bodySm\">\n                      {data.date}\n                    </Text>\n                  )}\n                </div>\n\n                <Text as=\"p\" variant=\"bodyMd\">\n                  {data.description}\n                </Text>\n              </BlockStack>\n              <InlineStack gap=\"200\">\n                {data.primary_action && (\n                  <Button\n                    icon={ExternalIcon}\n                    variant={\n                      data.primary_action.variant === \"primary\"\n                        ? \"primary\"\n                        : \"plain\"\n                    }\n                    onClick={handlePrimaryAction}\n                  >\n                    {data.primary_action.label}\n                  </Button>\n                )}\n                {data.secondary_action && (\n                  <Button variant=\"tertiary\" onClick={handleSecondaryAction}>\n                    {data.secondary_action.label}\n                  </Button>\n                )}\n              </InlineStack>\n            </BlockStack>\n          </Box>\n        </BlockStack>\n      </Card>\n    </div>\n  );\n};\n\nexport default FloatingCard;\n"]}

package/dist/components/MarketingCampaignCard.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export interface MarketingCampaignData {
+    id: number;
+    key: string;
+    type: string;
+    priority: number;
+    title: string;
+    subtitle?: string;
+    description: string;
+    badge_text?: string;
+    badge_tone?: "success" | "info" | "warning" | "critical" | "new";
+    tag?: {
+        label: string;
+        tone?: "success" | "info" | "warning" | "critical" | "new" | "primary";
+    };
+    highlight_text?: string;
+    img_url: string;
+    image_alt?: string | null;
+    image_type: string;
+    primary_action?: {
+        label: string;
+        url: string;
+        external: boolean;
+        variant?: "primary" | "secondary";
+    };
+    secondary_action?: {
+        label: string;
+        url: string;
+        external: boolean;
+        variant?: "primary" | "secondary";
+    };
+    dismissible: boolean;
+    campaign_id?: string | number;
+}
+export interface MarketingCampaignCardProps {
+    shopId?: string;
+    locale?: string;
+    onDismiss?: (data: MarketingCampaignData) => void;
+    onPrimaryAction?: (data: MarketingCampaignData) => void;
+    onSecondaryAction?: (data: MarketingCampaignData) => void;
+}
+export declare const MarketingCampaignCard: React.FC<MarketingCampaignCardProps>;
+export default MarketingCampaignCard;
+//# sourceMappingURL=MarketingCampaignCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingCampaignCard.d.ts","sourceRoot":"","sources":["../../src/components/MarketingCampaignCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkBnD,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;IACjE,GAAG,CAAC,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,CAAC;KACxE,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;KACnC,CAAC;IACF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;KACnC,CAAC;IACF,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAsYtE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/MarketingCampaignCard.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { Card, BlockStack, InlineGrid, Text, Button, Box, Badge, InlineStack, Icon, Popover, ActionList, } from "@shopify/polaris";
+import { MenuHorizontalIcon, XIcon } from "@shopify/polaris-icons";
+import { useCampaignTracking } from "../hooks/useCampaignTracking";
+import { useSDK } from "../core/SDKManager";
+export const MarketingCampaignCard = ({ shopId: propsShopId, locale = "en", onDismiss, onPrimaryAction, onSecondaryAction, }) => {
+    const [campaignData, setCampaignData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [isDismissed, setIsDismissed] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [popoverActive, setPopoverActive] = useState(false);
+    const sdk = useSDK({});
+    const contextShopId = sdk.shopInfo?.id;
+    const shopId = propsShopId || contextShopId;
+    const currentLocale = locale || sdk.locale || "en";
+    const tracking = useCampaignTracking(shopId && campaignData
+        ? {
+            shopId,
+            campaignId: campaignData.campaign_id || campaignData.id,
+            threshold: 0.5,
+            visibilityDuration: 1000,
+            metadata: {
+                card_type: campaignData.type,
+                card_key: campaignData.key,
+            },
+        }
+        : {
+            shopId: "",
+            campaignId: "",
+            threshold: 0.5,
+            visibilityDuration: 1000,
+        });
+    useEffect(() => {
+        const fetchCampaignData = async () => {
+            if (!shopId) {
+                setLoading(false);
+                return;
+            }
+            try {
+                setLoading(true);
+                let baseUrl;
+                if (sdk.config?.apiUrl) {
+                    const configUrl = sdk.config.apiUrl;
+                    if (configUrl.includes("/dashboard")) {
+                        baseUrl = configUrl.replace("/dashboard", "");
+                    }
+                    else {
+                        baseUrl = configUrl;
+                    }
+                }
+                else {
+                    baseUrl =
+                        typeof window !== "undefined" &&
+                            window.location.hostname === "localhost"
+                            ? "/api"
+                            : "https://ops.trustshop.io/api";
+                }
+                const apiUrl = `${baseUrl}/campaigns?shop_id=${shopId}&locale=${currentLocale}`;
+                const response = await fetch(apiUrl, {
+                    method: "GET",
+                    headers: {
+                        Accept: "application/json",
+                        "Content-Type": "application/json",
+                        "Accept-Language": currentLocale,
+                        ...(sdk.config?.headers || {}),
+                    },
+                    credentials: "include",
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch campaigns: ${response.statusText}`);
+                }
+                const data = await response.json();
+                if (data.success && Array.isArray(data.data) && data.data.length > 0) {
+                    const marketingCampaigns = data.data.filter((campaign) => campaign.type === "marketing-card");
+                    if (marketingCampaigns.length > 0) {
+                        const campaign = marketingCampaigns[0];
+                        const dismissKey = `trustshop_marketing_campaign_dismissed_${campaign.key || campaign.id}`;
+                        try {
+                            const dismissedData = localStorage.getItem(dismissKey);
+                            if (dismissedData) {
+                                const parsed = JSON.parse(dismissedData);
+                                const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
+                                if (parsed.timestamp > sevenDaysAgo) {
+                                    setIsDismissed(true);
+                                    return;
+                                }
+                            }
+                        }
+                        catch (error) {
+                            console.error("Failed to check dismiss state:", error);
+                        }
+                        setCampaignData(campaign);
+                    }
+                }
+            }
+            catch (err) {
+                console.error("Failed to fetch marketing campaign:", err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchCampaignData();
+        const handleCampaignsRefresh = (event) => {
+            if (event.detail?.data && Array.isArray(event.detail.data)) {
+                const marketingCampaigns = event.detail.data.filter((campaign) => campaign.type === "marketing-card");
+                if (marketingCampaigns.length > 0) {
+                    setCampaignData(marketingCampaigns[0]);
+                }
+            }
+        };
+        window.addEventListener("trustshop-campaigns-refresh", handleCampaignsRefresh);
+        return () => {
+            window.removeEventListener("trustshop-campaigns-refresh", handleCampaignsRefresh);
+        };
+    }, [shopId, currentLocale, sdk.config]);
+    const handlePrimaryAction = () => {
+        tracking?.trackPrimaryAction();
+        if (campaignData?.primary_action) {
+            onPrimaryAction?.(campaignData);
+        }
+    };
+    const handleSecondaryAction = () => {
+        tracking?.trackSecondaryAction();
+        if (campaignData?.secondary_action) {
+            onSecondaryAction?.(campaignData);
+        }
+    };
+    const handleDismiss = () => {
+        tracking?.trackDismiss();
+        setIsDismissed(true);
+        setPopoverActive(false);
+        if (campaignData) {
+            const dismissKey = `trustshop_marketing_campaign_dismissed_${campaignData.key || campaignData.id}`;
+            const dismissData = {
+                timestamp: Date.now(),
+                dismissed: true,
+                campaignId: campaignData.id,
+                campaignKey: campaignData.key,
+            };
+            try {
+                localStorage.setItem(dismissKey, JSON.stringify(dismissData));
+            }
+            catch (error) {
+                console.error("Failed to save dismiss state:", error);
+            }
+        }
+        onDismiss?.(campaignData);
+    };
+    const togglePopoverActive = () => setPopoverActive((active) => !active);
+    React.useEffect(() => {
+        const styleId = "marketing-campaign-responsive";
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement("style");
+            style.id = styleId;
+            style.innerHTML = `
+        @media (max-width: 768px) {
+          .marketing-campaign-grid {
+            display: flex !important;
+            flex-direction: column !important;
+          }
+          .marketing-campaign-content {
+            order: 2;
+          }
+          .marketing-campaign-image {
+            order: 1;
+            padding: 16px 16px 0 16px !important;
+          }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        return () => {
+            const existingStyle = document.getElementById(styleId);
+            if (existingStyle &&
+                document.querySelectorAll(".marketing-campaign-grid").length === 0) {
+                existingStyle.remove();
+            }
+        };
+    }, []);
+    if (loading || !campaignData || isDismissed) {
+        return null;
+    }
+    return (_jsx("div", { ref: tracking?.elementRef, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: { position: "relative" }, children: _jsx(Card, { children: _jsx("div", { className: "marketing-campaign-grid", children: _jsxs(InlineGrid, { columns: {
+                        xs: 1,
+                        sm: 1,
+                        md: ["twoThirds", "oneThird"],
+                        lg: ["twoThirds", "oneThird"],
+                        xl: ["twoThirds", "oneThird"],
+                    }, gap: "1000", children: [_jsx("div", { className: "marketing-campaign-content", children: _jsx(Box, { paddingInline: { xs: "200", sm: "200", md: "300" }, children: _jsxs(BlockStack, { gap: "300", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Box, { children: campaignData.tag?.label && (_jsx(Badge, { tone: campaignData.tag.tone === "primary"
+                                                            ? "success"
+                                                            : campaignData.tag.tone || "success", children: campaignData.tag.label })) }), _jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { as: "h2", variant: "headingLg", fontWeight: "bold", children: campaignData.title }), campaignData.subtitle && (_jsx(Text, { as: "p", variant: "headingXl", fontWeight: "bold", children: campaignData.subtitle })), _jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: campaignData.description })] })] }), _jsxs(InlineStack, { gap: "200", children: [campaignData.primary_action && (_jsx(Button, { variant: "primary", onClick: handlePrimaryAction, children: campaignData.primary_action.label })), campaignData.secondary_action && (_jsx(Button, { onClick: handleSecondaryAction, children: campaignData.secondary_action.label }))] })] }) }) }), _jsx("div", { className: "marketing-campaign-image", children: _jsxs(Box, { padding: "0", position: "relative", minHeight: "200", children: [campaignData.dismissible && isHovered && (_jsx("div", { style: {
+                                            position: "absolute",
+                                            right: "-5px",
+                                            top: "-5px",
+                                            zIndex: 10,
+                                        }, children: _jsx(Popover, { active: popoverActive, activator: _jsx(Button, { size: "slim", icon: _jsx(Icon, { source: MenuHorizontalIcon }), onClick: togglePopoverActive, accessibilityLabel: "More actions" }), onClose: togglePopoverActive, preferredPosition: "below", preferredAlignment: "right", children: _jsx(ActionList, { items: [
+                                                    {
+                                                        content: "Dismiss",
+                                                        icon: XIcon,
+                                                        onAction: handleDismiss,
+                                                    },
+                                                ] }) }) })), _jsxs("div", { style: {
+                                            width: "100%",
+                                            height: "100%",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            position: "relative",
+                                        }, children: [campaignData.img_url && (_jsx("img", { src: campaignData.img_url, alt: campaignData.image_alt || campaignData.title, style: {
+                                                    width: "100%",
+                                                    maxWidth: "300px",
+                                                    height: "auto",
+                                                    objectFit: "contain",
+                                                    margin: "0 auto",
+                                                }, onError: (e) => {
+                                                    console.error("Image failed to load:", campaignData.img_url);
+                                                    e.target.style.display = "none";
+                                                } })), campaignData.highlight_text && (_jsx("div", { style: {
+                                                    position: "absolute",
+                                                    top: "20px",
+                                                    right: "40px",
+                                                    background: "#00B251",
+                                                    color: "white",
+                                                    padding: "12px 24px",
+                                                    borderRadius: "8px",
+                                                    fontWeight: "bold",
+                                                    fontSize: "24px",
+                                                    transform: "rotate(-5deg)",
+                                                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                                                }, children: campaignData.highlight_text }))] })] }) })] }) }) }) }));
+};
+export default MarketingCampaignCard;
+//# sourceMappingURL=MarketingCampaignCard.js.map