@datlv-trustshop/shopify-inapp-components 0.1.9

package/dist/components/FooterBanner.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFooterBanner } from "../hooks/useBanner";
+export const FooterBanner = ({ className = "", onClose, onAction, closable = true, sticky = true, }) => {
+    const banner = useFooterBanner();
+    const [isVisible, setIsVisible] = useState(true);
+    const handleClose = () => {
+        setIsVisible(false);
+        onClose?.();
+    };
+    const handleAction = () => {
+        if (banner) {
+            if (banner.link) {
+                window.open(banner.link, banner.openType === "new_tab" ? "_blank" : "_self");
+            }
+            onAction?.(banner);
+        }
+    };
+    if (!banner || !isVisible) {
+        return null;
+    }
+    const styles = {
+        backgroundColor: banner.style?.backgroundColor || "#333333",
+        color: banner.style?.textColor || "#ffffff",
+    };
+    const buttonStyles = {
+        backgroundColor: banner.style?.buttonColor || "#ffffff",
+        color: banner.style?.buttonTextColor || "#333333",
+    };
+    return (_jsxs("div", { className: `footer-banner ${className}`, style: {
+            ...styles,
+            position: sticky ? "fixed" : "relative",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            padding: "16px 20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            zIndex: sticky ? 1000 : "auto",
+            boxShadow: "0 -2px 4px rgba(0, 0, 0, 0.1)",
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [banner.icon && (_jsx("img", { src: banner.icon, alt: "", style: {
+                            width: "32px",
+                            height: "32px",
+                            marginRight: "16px",
+                        } })), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: {
+                                    fontSize: "16px",
+                                    fontWeight: "bold",
+                                    marginBottom: "4px",
+                                }, children: banner.title }), banner.description && (_jsx("div", { style: { fontSize: "14px", opacity: 0.9 }, children: banner.description }))] }), banner.image && (_jsx("img", { src: banner.image, alt: "", style: {
+                            maxHeight: "60px",
+                            marginLeft: "20px",
+                            borderRadius: "4px",
+                        } }))] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [banner.link && (_jsx("button", { onClick: handleAction, style: {
+                            ...buttonStyles,
+                            padding: "8px 20px",
+                            border: "none",
+                            borderRadius: "4px",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            cursor: "pointer",
+                            whiteSpace: "nowrap",
+                        }, children: banner.linkText || "Learn More" })), closable && (_jsx("button", { onClick: handleClose, style: {
+                            background: "none",
+                            border: "none",
+                            fontSize: "24px",
+                            cursor: "pointer",
+                            color: styles.color,
+                            opacity: 0.7,
+                            padding: "0 4px",
+                        }, "aria-label": "Close banner", children: "\u00D7" }))] })] }));
+};

package/dist/components/GrowApps.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { GrowApp } from "../types/dashboard";
+export interface GrowAppsProps {
+    className?: string;
+    onAppClick?: (app: GrowApp) => void;
+    onDismiss?: () => void;
+    dismissKey?: string;
+    dismissDuration?: number;
+    showDismiss?: boolean;
+    showNavigation?: boolean;
+    maxItems?: number;
+}
+export declare const GrowApps: React.FC<GrowAppsProps>;

package/dist/components/GrowApps.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Card, Text, BlockStack, Box, InlineStack, Button, Popover, ActionList, } from "@shopify/polaris";
+import { ExternalIcon, MenuHorizontalIcon } from "@shopify/polaris-icons";
+import { useDashboard } from "../hooks/useDashboard";
+import { useTranslation } from "../hooks/useTranslations";
+const DEFAULT_DISMISS_KEY = "ts-dashboard-growapps-dismissed";
+const DEFAULT_DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000;
+export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = DEFAULT_DISMISS_KEY, dismissDuration = DEFAULT_DISMISS_DURATION, showDismiss = true, showNavigation = true, maxItems = 6, }) => {
+    const slidesContainerRef = useRef(null);
+    const currentPositionRef = useRef(0);
+    const { data } = useDashboard();
+    const t = useTranslation('growApps');
+    const allGrowApps = data?.grow_apps || [];
+    const displayLimit = data?.grow_apps_display_limit || maxItems;
+    const growApps = allGrowApps.slice(0, displayLimit);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [maxIndex, setMaxIndex] = useState(0);
+    const [popoverActive, setPopoverActive] = useState(false);
+    const [isVisible, setIsVisible] = useState(true);
+    const touchStartX = useRef(null);
+    const touchEndX = useRef(null);
+    const swiping = useRef(false);
+    const togglePopoverActive = () => setPopoverActive((active) => !active);
+    const handleDismiss = () => {
+        setIsVisible(false);
+        setPopoverActive(false);
+        const dismissData = {
+            timestamp: Date.now(),
+            dismissed: true,
+        };
+        localStorage.setItem(dismissKey, JSON.stringify(dismissData));
+        onDismiss?.();
+    };
+    useEffect(() => {
+        const dismissedData = localStorage.getItem(dismissKey);
+        if (dismissedData) {
+            try {
+                const { timestamp } = JSON.parse(dismissedData);
+                const now = Date.now();
+                if (now - timestamp < dismissDuration) {
+                    setIsVisible(false);
+                }
+                else {
+                    localStorage.removeItem(dismissKey);
+                }
+            }
+            catch (error) {
+                localStorage.removeItem(dismissKey);
+            }
+        }
+    }, [dismissKey, dismissDuration]);
+    const handleGetAppClick = (app) => {
+        const url = app.app_url || app.get_app || "#";
+        if (url && url !== "#") {
+            window.open(url, "_blank");
+        }
+        onAppClick?.(app);
+    };
+    const handleSlide = useCallback((direction) => {
+        if (!slidesContainerRef.current) {
+            return;
+        }
+        const slideWrap = slidesContainerRef.current.querySelector(".slides-wrapper");
+        if (!slideWrap)
+            return;
+        const containerWidth = slidesContainerRef.current.offsetWidth;
+        const totalWidth = slideWrap.scrollWidth;
+        const slideWidth = 282;
+        const gap = 20;
+        const slideStep = slideWidth + gap;
+        const maxSlides = Math.max(0, Math.ceil((totalWidth - containerWidth) / slideStep));
+        const newIndex = Math.max(0, Math.min(currentIndex + direction, maxSlides));
+        if ((direction < 0 && currentIndex === 0) ||
+            (direction > 0 && currentIndex >= maxSlides)) {
+            return;
+        }
+        const newPosition = -newIndex * slideStep;
+        slideWrap.style.transform = `translateX(${newPosition}px)`;
+        currentPositionRef.current = newPosition;
+        setCurrentIndex(newIndex);
+        setMaxIndex(maxSlides);
+    }, [currentIndex]);
+    const handleTouchStart = (e) => {
+        touchStartX.current = e.touches[0].clientX;
+        swiping.current = true;
+    };
+    const handleTouchMove = (e) => {
+        if (!swiping.current)
+            return;
+        touchEndX.current = e.touches[0].clientX;
+    };
+    const handleTouchEnd = () => {
+        if (!swiping.current)
+            return;
+        const swipeThreshold = 50;
+        const diff = (touchStartX.current || 0) - (touchEndX.current || 0);
+        if (Math.abs(diff) > swipeThreshold) {
+            if (diff > 0) {
+                handleSlide(1);
+            }
+            else {
+                handleSlide(-1);
+            }
+        }
+        swiping.current = false;
+        touchStartX.current = null;
+        touchEndX.current = null;
+    };
+    useEffect(() => {
+        const calculateMaxIndex = () => {
+            if (!slidesContainerRef.current)
+                return;
+            const slideWrap = slidesContainerRef.current.querySelector(".slides-wrapper");
+            if (!slideWrap)
+                return;
+            const containerWidth = slidesContainerRef.current.offsetWidth;
+            const totalWidth = slideWrap.scrollWidth;
+            const slideWidth = 282;
+            const gap = 20;
+            const slideStep = slideWidth + gap;
+            const maxSlides = Math.max(0, Math.ceil((totalWidth - containerWidth) / slideStep));
+            setMaxIndex(maxSlides);
+        };
+        setTimeout(calculateMaxIndex, 100);
+        const handleResize = () => calculateMaxIndex();
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [growApps.length]);
+    useEffect(() => { }, [growApps]);
+    if (!isVisible) {
+        return null;
+    }
+    if (growApps.length === 0) {
+        return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: t.noData || "No apps available" }) }) }) }));
+    }
+    const activator = (_jsx(Button, { icon: MenuHorizontalIcon, variant: "tertiary", onClick: togglePopoverActive, ariaExpanded: popoverActive }));
+    return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsxs(BlockStack, { gap: "200", children: [_jsxs(InlineStack, { align: "space-between", blockAlign: "center", wrap: false, gap: "300", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingMd", as: "h3", children: t.title || "Grow faster with apps" }), _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: t.subtitle || "Discover powerful apps to enhance your store, streamline workflows, and boost sales." })] }), _jsxs(InlineStack, { gap: "100", wrap: false, children: [showDismiss && (_jsx(Box, { padding: "150", children: _jsx(Popover, { active: popoverActive, activator: activator, onClose: togglePopoverActive, ariaHaspopup: false, children: _jsx(ActionList, { actionRole: "menuitem", items: [
+                                                        {
+                                                            content: t.dismiss || "Dismiss",
+                                                            onAction: handleDismiss,
+                                                        },
+                                                    ] }) }) })), showNavigation && growApps.length > 3 && (_jsxs("div", { style: {
+                                                position: "relative",
+                                                width: "fit-content",
+                                                boxSizing: "content-box",
+                                                padding: "4px 6px",
+                                                display: "flex",
+                                                flexDirection: "row",
+                                                flexWrap: "nowrap",
+                                                gap: "4px",
+                                                borderRadius: "8px",
+                                                backgroundColor: "#e3e3e3",
+                                            }, children: [_jsx("button", { onClick: () => handleSlide(-1), disabled: currentIndex === 0, style: {
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        justifyContent: "center",
+                                                        width: "24px",
+                                                        height: "24px",
+                                                        padding: 0,
+                                                        border: "none",
+                                                        borderRadius: "4px",
+                                                        backgroundColor: "transparent",
+                                                        cursor: currentIndex === 0 ? "not-allowed" : "pointer",
+                                                        transition: "background-color 0.2s ease",
+                                                        opacity: currentIndex === 0 ? 0.5 : 1,
+                                                    }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M10.5 13L5.5 8l5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) }), _jsx("button", { onClick: () => handleSlide(1), disabled: currentIndex >= maxIndex, style: {
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        justifyContent: "center",
+                                                        width: "24px",
+                                                        height: "24px",
+                                                        padding: 0,
+                                                        border: "none",
+                                                        borderRadius: "4px",
+                                                        backgroundColor: "transparent",
+                                                        cursor: currentIndex >= maxIndex ? "not-allowed" : "pointer",
+                                                        transition: "background-color 0.2s ease",
+                                                        opacity: currentIndex >= maxIndex ? 0.5 : 1,
+                                                    }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M5.5 13l5-5-5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) })] }))] })] }), _jsx("div", { className: "slides-container", style: {
+                                overflow: "hidden",
+                                width: "100%",
+                            }, ref: slidesContainerRef, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: _jsx("div", { className: "slides-wrapper", style: {
+                                    display: "flex",
+                                    gap: "20px",
+                                    transition: "transform 0.3s ease-in-out",
+                                    transform: "translateX(0px)",
+                                }, children: growApps.map((app, index) => {
+                                    const iconUrl = app.icon_url || app.imageUrl || "";
+                                    const buttonText = app.button_text || app.button_get_app || t.install || "Get app";
+                                    return (_jsx("div", { "data-index": index, style: {
+                                            flexShrink: 0,
+                                            width: "282px",
+                                            transition: "transform 0.2s ease",
+                                        }, children: _jsx(Card, { children: _jsx(Box, { minWidth: "250px", children: _jsxs(BlockStack, { gap: "300", children: [_jsx(InlineStack, { gap: "400", blockAlign: "start", children: iconUrl && (_jsx("img", { src: iconUrl, alt: app.title, width: 60, height: 60, style: {
+                                                                    borderRadius: "8px",
+                                                                    flexShrink: 0,
+                                                                } })) }), _jsxs(BlockStack, { gap: "200", children: [_jsx(Text, { variant: "headingSm", as: "h4", children: app.title }), _jsx("div", { style: {
+                                                                        display: "-webkit-box",
+                                                                        WebkitLineClamp: 3,
+                                                                        WebkitBoxOrient: "vertical",
+                                                                        overflow: "hidden",
+                                                                        textOverflow: "ellipsis",
+                                                                        fontSize: "13px",
+                                                                        color: "#616161",
+                                                                        lineHeight: 1.4,
+                                                                    }, children: app.content }), _jsx("div", { style: {
+                                                                        alignSelf: "flex-start",
+                                                                    }, children: _jsx(Button, { icon: ExternalIcon, variant: "secondary", size: "medium", onClick: () => handleGetAppClick(app), children: buttonText }) })] })] }) }) }) }, app.id || index));
+                                }) }) })] }) }) }) }));
+};

package/dist/components/ImageLoading.d.ts

@@ -0,0 +1,15 @@
+interface ImageLoadingProps {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    background?: string;
+    className?: string;
+    onLoad?: () => void;
+    onError?: () => void;
+    aspectRatio?: number;
+    borderRadius?: number;
+    overflow?: string;
+}
+declare const ImageLoading: import("react").NamedExoticComponent<ImageLoadingProps>;
+export default ImageLoading;

package/dist/components/ImageLoading.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+const ImageLoading = memo(({ src, alt, width, height, background = "var(--p-color-bg-fill-tertiary)", className = "", onLoad, onError, aspectRatio, borderRadius = 0, overflow = "hidden", }) => {
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        canvas.width = width * devicePixelRatio;
+        canvas.height = height * devicePixelRatio;
+        ctx.scale(devicePixelRatio, devicePixelRatio);
+        ctx.fillStyle = "#f3f4f6";
+        ctx.fillRect(0, 0, width, height);
+        const img = new Image();
+        img.onload = () => {
+            ctx.clearRect(0, 0, width, height);
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = "high";
+            const imgAspect = img.naturalWidth / img.naturalHeight;
+            const canvasAspect = width / height;
+            let drawWidth, drawHeight, offsetX, offsetY;
+            if (imgAspect > canvasAspect) {
+                drawHeight = height;
+                drawWidth = height * imgAspect;
+                offsetX = (width - drawWidth) / 2;
+                offsetY = 0;
+            }
+            else {
+                drawWidth = width;
+                drawHeight = width / imgAspect;
+                offsetX = 0;
+                offsetY = (height - drawHeight) / 2;
+            }
+            ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+            onLoad?.();
+        };
+        img.onerror = () => {
+            onError?.();
+        };
+        img.src = src;
+        return () => {
+            img.onload = null;
+            img.onerror = null;
+        };
+    }, [src, width, height, onLoad, onError]);
+    return (_jsx("div", { style: {
+            width: "100%",
+            aspectRatio: height ? `${width / height}` : `${aspectRatio}`,
+            background: background,
+            borderRadius: borderRadius + "px",
+            overflow: overflow,
+        }, className: className, children: _jsx("canvas", { ref: canvasRef, role: "img", "aria-label": alt, style: {
+                display: "block",
+                width: "100%",
+                height: "100%",
+                maxWidth: width + "px",
+                maxHeight: height + "px",
+                aspectRatio: width / height,
+            } }) }));
+});
+ImageLoading.displayName = "ImageLoading";
+export default ImageLoading;

package/dist/components/PartnerList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { PartnerItem } from "../types";
+export interface PartnerListProps {
+    className?: string;
+    onPartnerClick?: (partner: PartnerItem) => void;
+    onSetupClick?: (partner: PartnerItem) => void;
+    showIntegrationStatus?: boolean;
+}
+export declare const PartnerList: React.FC<PartnerListProps>;

package/dist/components/PartnerList.js

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

package/dist/components/PopupBanner.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { BannerItem } from "../types";
+export interface PopupBannerProps {
+    className?: string;
+    onClose?: () => void;
+    onAction?: (banner: BannerItem) => void;
+    autoShow?: boolean;
+    showDelay?: number;
+    persistClose?: boolean;
+    storageKey?: string;
+}
+export declare const PopupBanner: React.FC<PopupBannerProps>;

package/dist/components/PopupBanner.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { usePopupBanner } from "../hooks/useBanner";
+export const PopupBanner = ({ className = "", onClose, onAction, autoShow = true, showDelay = 0, persistClose = true, storageKey = "shopify-dashboard-popup-closed", }) => {
+    const banner = usePopupBanner();
+    const [isVisible, setIsVisible] = useState(false);
+    const [hasBeenClosed, setHasBeenClosed] = useState(false);
+    useEffect(() => {
+        if (!banner || !autoShow)
+            return;
+        if (persistClose && typeof window !== "undefined") {
+            const closedBanners = localStorage.getItem(storageKey);
+            if (closedBanners) {
+                const closed = JSON.parse(closedBanners);
+                if (closed[banner.id]) {
+                    setHasBeenClosed(true);
+                    return;
+                }
+            }
+        }
+        const timer = setTimeout(() => {
+            setIsVisible(true);
+        }, showDelay);
+        return () => clearTimeout(timer);
+    }, [banner, autoShow, showDelay, persistClose, storageKey]);
+    const handleClose = () => {
+        setIsVisible(false);
+        if (persistClose && banner && typeof window !== "undefined") {
+            const closedBanners = localStorage.getItem(storageKey);
+            const closed = closedBanners ? JSON.parse(closedBanners) : {};
+            closed[banner.id] = true;
+            localStorage.setItem(storageKey, JSON.stringify(closed));
+        }
+        onClose?.();
+    };
+    const handleAction = () => {
+        if (banner) {
+            if (banner.link) {
+                window.open(banner.link, banner.openType === "new_tab" ? "_blank" : "_self");
+            }
+            onAction?.(banner);
+        }
+    };
+    if (!banner || hasBeenClosed || !isVisible) {
+        return null;
+    }
+    const styles = {
+        backgroundColor: banner.style?.backgroundColor || "#ffffff",
+        color: banner.style?.textColor || "#000000",
+    };
+    const buttonStyles = {
+        backgroundColor: banner.style?.buttonColor || "#007bff",
+        color: banner.style?.buttonTextColor || "#ffffff",
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `popup-banner-overlay ${className}`, style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 9999,
+                }, onClick: handleClose }), _jsxs("div", { className: `popup-banner ${className}`, style: {
+                    ...styles,
+                    position: "fixed",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    maxWidth: "500px",
+                    width: "90%",
+                    padding: "24px",
+                    borderRadius: "8px",
+                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                    zIndex: 10000,
+                }, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { onClick: handleClose, style: {
+                            position: "absolute",
+                            top: "12px",
+                            right: "12px",
+                            background: "none",
+                            border: "none",
+                            fontSize: "24px",
+                            cursor: "pointer",
+                            color: styles.color,
+                        }, "aria-label": "Close popup", children: "\u00D7" }), banner.icon && (_jsx("div", { style: { marginBottom: "16px" }, children: _jsx("img", { src: banner.icon, alt: "", style: { width: "48px", height: "48px" } }) })), banner.image && (_jsx("div", { style: { marginBottom: "16px" }, children: _jsx("img", { src: banner.image, alt: "", style: { width: "100%", borderRadius: "4px" } }) })), _jsx("h2", { style: { margin: "0 0 12px 0", fontSize: "20px", fontWeight: "bold" }, children: banner.title }), banner.description && (_jsx("p", { style: {
+                            margin: "0 0 20px 0",
+                            fontSize: "14px",
+                            lineHeight: "1.5",
+                        }, children: banner.description })), banner.link && (_jsx("button", { onClick: handleAction, style: {
+                            ...buttonStyles,
+                            padding: "10px 20px",
+                            border: "none",
+                            borderRadius: "4px",
+                            fontSize: "14px",
+                            fontWeight: "bold",
+                            cursor: "pointer",
+                        }, children: banner.linkText || "Learn More" }))] })] }));
+};

package/dist/components/TopBanner.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { BannerItem } from "../types";
+export interface TopBannerProps {
+    className?: string;
+    onClose?: () => void;
+    onAction?: (banner: BannerItem) => void;
+    closable?: boolean;
+    sticky?: boolean;
+    renderBanner?: (banner: BannerItem, handlers: {
+        onClose: () => void;
+        onAction: () => void;
+    }) => React.ReactNode;
+}
+export declare const TopBanner: React.FC<TopBannerProps>;