@datlv-trustshop/shopify-inapp-components 0.1.9

package/dist/components/TopBanner.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Banner, Button, Text, BlockStack, InlineStack, } from "@shopify/polaris";
+import { ExternalIcon } from "@shopify/polaris-icons";
+import { useTopBanner } from "../hooks/useBanner";
+export const TopBanner = ({ className = "", onClose, onAction, closable = true, renderBanner, }) => {
+    const banner = useTopBanner();
+    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;
+    }
+    if (renderBanner) {
+        return (_jsx(_Fragment, { children: renderBanner(banner, {
+                onClose: handleClose,
+                onAction: handleAction,
+            }) }));
+    }
+    return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Banner, { hideIcon: true, onDismiss: closable ? handleClose : undefined, children: _jsxs(InlineStack, { gap: "400", blockAlign: "center", wrap: false, children: [banner.icon && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx("img", { src: banner.icon, alt: "", width: 72, height: 72, style: { borderRadius: "8px" } }) })), _jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsxs(BlockStack, { gap: "100", align: "space-between", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingSm", as: "h3", children: banner.title }), banner.description && (_jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: banner.description }))] }), banner.link && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Button, { icon: ExternalIcon, onClick: handleAction, children: banner.linkText || "Learn More" }) }))] }) })] }) }) }));
+};

package/dist/components/WhatsNew.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ArticleItem, ProductUpdateItem } from "../types";
+export interface WhatsNewProps {
+    className?: string;
+    onProductUpdateClick?: (update: ProductUpdateItem) => void;
+    onArticleClick?: (article: ArticleItem) => void;
+    onViewAllUpdates?: () => void;
+    onViewAllArticles?: () => void;
+    maxUpdates?: number;
+    showNavigation?: boolean;
+    showViewAllButton?: boolean;
+    navigate?: (url: string) => void;
+}
+export declare const WhatsNew: React.FC<WhatsNewProps>;

package/dist/components/WhatsNew.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import { Button, Tabs, Text, BlockStack, InlineStack, Box, Card, } from "@shopify/polaris";
+import { ExternalIcon } from "@shopify/polaris-icons";
+import { ArticleList } from "./ArticleList";
+import ImageLoading from "./ImageLoading";
+import { useArticles, useWhatsNew } from "../hooks";
+import { useTranslation } from "../hooks/useTranslations";
+import { sdkStyles, mergeStyles } from "./styles";
+export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick, onViewAllUpdates, onViewAllArticles, maxUpdates = 5, showNavigation = true, showViewAllButton = true, navigate, }) => {
+    const [productUpdateIndex, setProductUpdateIndex] = useState(0);
+    const [articleIndex, setArticleIndex] = useState(0);
+    const [selectedTab, setSelectedTab] = useState(0);
+    const [isMobile, setIsMobile] = useState(false);
+    const touchStartX = useRef(null);
+    const touchEndX = useRef(null);
+    const swiping = useRef(false);
+    const slideContainerRef = useRef(null);
+    const articles = useArticles();
+    const whatsNew = useWhatsNew();
+    const t = useTranslation('whatsNew');
+    const limitedUpdates = whatsNew.updates.slice(0, maxUpdates);
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    React.useEffect(() => {
+        if (limitedUpdates.length > 0) {
+        }
+    }, [limitedUpdates]);
+    const articlesList = articles.articles;
+    const nextSlide = () => {
+        if (selectedTab === 0) {
+            setProductUpdateIndex((prevIndex) => {
+                const newIndex = Math.min(prevIndex + 1, limitedUpdates.length - 1);
+                return newIndex;
+            });
+        }
+        else {
+            setArticleIndex((prevIndex) => {
+                if (isMobile) {
+                    const newIndex = Math.min(prevIndex + 1, articlesList.length - 1);
+                    return newIndex;
+                }
+                else {
+                    const visibleItems = 3;
+                    const maxIndex = Math.max(0, articlesList.length - visibleItems);
+                    const newIndex = Math.min(prevIndex + 1, maxIndex);
+                    return newIndex;
+                }
+            });
+        }
+    };
+    const prevSlide = () => {
+        if (selectedTab === 0) {
+            setProductUpdateIndex((prevIndex) => {
+                const newIndex = Math.max(prevIndex - 1, 0);
+                return newIndex;
+            });
+        }
+        else {
+            setArticleIndex((prevIndex) => {
+                const newIndex = Math.max(prevIndex - 1, 0);
+                return newIndex;
+            });
+        }
+    };
+    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) {
+                nextSlide();
+            }
+            else {
+                prevSlide();
+            }
+        }
+        swiping.current = false;
+        touchStartX.current = null;
+        touchEndX.current = null;
+    };
+    const handleProductUpdateClick = (update) => {
+        const tryUrl = update.button_try_url || update.link;
+        if (update.id === "feature_up_vote") {
+            window.dispatchEvent(new CustomEvent("openFeatureBoard", {
+                detail: { source: "whatsnew" },
+            }));
+            onProductUpdateClick?.(update);
+            return;
+        }
+        if (tryUrl && tryUrl !== "modal") {
+            if (tryUrl.startsWith("/")) {
+                if (navigate) {
+                    navigate(tryUrl);
+                }
+                else {
+                    const currentUrl = window.location.href;
+                    const shopifyAdminMatch = currentUrl.match(/https:\/\/admin\.shopify\.com\/store\/([^\/]+)\/apps\/([^\/]+)/);
+                    if (shopifyAdminMatch) {
+                        const [, storeName, appName] = shopifyAdminMatch;
+                        const shopifyAppUrl = `https://admin.shopify.com/store/${storeName}/apps/${appName}${tryUrl}`;
+                        window.location.href = shopifyAppUrl;
+                    }
+                    else {
+                        window.location.href = tryUrl;
+                    }
+                }
+            }
+            else if (tryUrl.startsWith("http://") ||
+                tryUrl.startsWith("https://")) {
+                window.open(tryUrl, "_blank");
+            }
+        }
+        else if (tryUrl === "modal") {
+            // console.log("Modal action for:", update.id);
+        }
+        onProductUpdateClick?.(update);
+    };
+    const handleArticleClick = (article) => {
+        if (article.link) {
+            window.open(article.link, "_blank");
+        }
+        onArticleClick?.(article);
+    };
+    const handleViewAllUpdates = () => {
+        if (onViewAllUpdates) {
+            onViewAllUpdates();
+        }
+        else {
+            window.open("https://trust1.io/updates/", "_blank");
+        }
+    };
+    const handleViewAllArticles = () => {
+        if (onViewAllArticles) {
+            onViewAllArticles();
+        }
+        else {
+            window.open("https://trust1.io/blog/", "_blank");
+        }
+    };
+    const tabs = [
+        { id: "product-update", content: t.tabs?.productUpdate || "Product Updates" },
+        { id: "article", content: t.tabs?.article || "Articles" },
+    ];
+    const isPrevDisabled = selectedTab === 0 ? productUpdateIndex === 0 : articleIndex === 0;
+    const isNextDisabled = selectedTab === 0
+        ? productUpdateIndex === limitedUpdates.length - 1
+        : (() => {
+            if (isMobile) {
+                return articleIndex === articlesList.length - 1;
+            }
+            else {
+                const visibleItems = 3;
+                const maxIndex = Math.max(0, articlesList.length - visibleItems);
+                return articleIndex >= maxIndex;
+            }
+        })();
+    if (limitedUpdates.length === 0 && articlesList.length === 0) {
+        return (_jsx("div", { style: mergeStyles(sdkStyles.dashboardWhatsNew), className: className, children: _jsx(Card, { children: _jsx(BlockStack, { gap: "400", children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: t.noData || "No updates available" }) }) }) }));
+    }
+    const mobileStyles = isMobile
+        ? {
+            slidesContainer: {
+                overflowX: "auto",
+                scrollSnapType: "x mandatory",
+                WebkitOverflowScrolling: "touch",
+                scrollbarWidth: "none",
+                msOverflowStyle: "none",
+            },
+            slidesWrapper: {
+                scrollSnapAlign: "start",
+            },
+            slideBox: {
+                scrollSnapAlign: "center",
+                flex: "0 0 85%",
+                maxWidth: "85%",
+            },
+            slideImage: {
+                display: "none",
+            },
+            hideScrollbar: {
+                "&::-webkit-scrollbar": {
+                    display: "none",
+                },
+            },
+        }
+        : {};
+    return (_jsxs("div", { style: mergeStyles(sdkStyles.dashboardWhatsNew), className: className, children: [_jsx("style", { children: `
+        .whats-new-mobile-scrollbar::-webkit-scrollbar {
+          display: none;
+        }
+      ` }), _jsx(Card, { children: _jsxs(BlockStack, { gap: "400", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx("div", { style: {
+                                        fontSize: "16px",
+                                        fontWeight: "650",
+                                        lineHeight: "24px",
+                                        color: "#303030",
+                                        marginBottom: "8px",
+                                        margin: 0,
+                                    }, children: t.title || "What's New" }), _jsxs(InlineStack, { gap: "300", blockAlign: "center", align: "space-between", children: [_jsxs("div", { className: "custom-tabs--wrapper-dashboard", style: {
+                                                margin: "0",
+                                                padding: "0",
+                                            }, children: [_jsx("style", { children: `
+                  .custom-tabs--wrapper-dashboard .Polaris-Box {
+                    --pc-box-padding-inline-start-md: 0 !important;
+                    --pc-box-padding-inline-end-md: 0 !important;
+                  }
+                  .custom-tabs--wrapper-dashboard .Polaris-Tabs {
+                    padding: 0 !important;
+                  }
+                  .custom-tabs--wrapper-dashboard .Polaris-Tabs__Wrapper {
+                    padding: 0 !important;
+                    overflow-y: hidden;
+                  }
+                ` }), _jsx(Tabs, { tabs: tabs, selected: selectedTab, onSelect: setSelectedTab })] }), _jsxs(InlineStack, { gap: "200", children: [showViewAllButton && (_jsx(Button, { icon: ExternalIcon, onClick: selectedTab === 0
+                                                        ? handleViewAllUpdates
+                                                        : handleViewAllArticles, children: selectedTab === 0
+                                                        ? (t.buttonViewAll?.productUpdate || "View all updates")
+                                                        : (t.buttonViewAll?.article || "View all articles") })), showNavigation && !isMobile && (_jsxs("div", { style: sdkStyles.slideNavigation, children: [_jsx("button", { onClick: prevSlide, disabled: isPrevDisabled, style: mergeStyles(sdkStyles.slideButton, isPrevDisabled ? sdkStyles.slideButtonDisabled : {}, {
+                                                                cursor: isPrevDisabled ? "not-allowed" : "pointer",
+                                                                opacity: isPrevDisabled ? 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: nextSlide, disabled: isNextDisabled, style: mergeStyles(sdkStyles.slideButton, isNextDisabled ? sdkStyles.slideButtonDisabled : {}, {
+                                                                cursor: isNextDisabled ? "not-allowed" : "pointer",
+                                                                opacity: isNextDisabled ? 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(Box, { children: selectedTab === 0 ? (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, mobileStyles.slidesContainer, { scrollbarWidth: "none" }), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx("div", { style: mergeStyles(sdkStyles.slidesWrapper, mobileStyles.slidesWrapper, {
+                                        transform: isMobile
+                                            ? "none"
+                                            : `translateX(-${productUpdateIndex * 90}%)`,
+                                    }), children: limitedUpdates.map((update) => (_jsxs("div", { style: mergeStyles(sdkStyles.slideBox, isMobile ? mobileStyles.slideBox : {}), children: [_jsxs("div", { style: sdkStyles.slideContent, children: [_jsx(Text, { variant: "headingMd", as: "h3", children: update.title }), (update.releaseDate || update.date_time) && (_jsx(Text, { variant: "bodySm", tone: "subdued", as: "p", children: update.releaseDate || update.date_time })), (update.description || update.content?.text) && (_jsx(Text, { as: "p", children: update.description || update.content?.text })), update.features && update.features.length > 0 && (_jsx("ul", { style: { paddingLeft: "20px", margin: 0 }, children: update.features.map((item, idx) => (_jsx("li", { style: {
+                                                                fontSize: "13px",
+                                                                lineHeight: 1.4,
+                                                                marginBottom: "4px",
+                                                            }, children: item }, idx))) })), _jsxs(InlineStack, { gap: "200", children: [(update.button_try_url || update.link) && (_jsx(Button, { onClick: () => handleProductUpdateClick(update), children: update.button_try_it_now || "Try it now" })), (update.button_learn_url || update.link) && (_jsx(Button, { variant: !(update.button_try_url || update.link)
+                                                                    ? "secondary"
+                                                                    : "monochromePlain", onClick: () => {
+                                                                    const learnUrl = update.button_learn_url || update.link;
+                                                                    if (learnUrl && learnUrl !== "modal") {
+                                                                        window.open(learnUrl, "_blank");
+                                                                    }
+                                                                }, children: update.button_learn_more || "Learn more" }))] })] }), _jsx("div", { style: mergeStyles(sdkStyles.slideImage, isMobile ? mobileStyles.slideImage : {}), children: _jsx(ImageLoading, { src: update.imageUrl ||
+                                                        update.image_url ||
+                                                        "https://asset.trustshop.io/dashboard/news-review-summary.png", alt: `what-new-${update.id}`, width: 712, height: 400, borderRadius: 12 }) })] }, update.id))) }) })) : (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, { overflow: "hidden", scrollbarWidth: "none" }, mobileStyles.slidesContainer), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx(ArticleList, { layout: "slide", onArticleClick: handleArticleClick, showThumbnail: true, showAuthor: true, showDate: true, currentIndex: articleIndex, onSlideChange: setArticleIndex, showNavigation: false }) })) })] }) })] }));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./PopupBanner";
+export * from "./TopBanner";
+export * from "./FooterBanner";
+export * from "./AppList";
+export * from "./ArticleList";
+export * from "./ArticleSlide";
+export * from "./WhatsNew";
+export * from "./GrowApps";
+export * from "./PartnerList";

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export * from "./PopupBanner";
+export * from "./TopBanner";
+export * from "./FooterBanner";
+export * from "./AppList";
+export * from "./ArticleList";
+export * from "./ArticleSlide";
+export * from "./WhatsNew";
+export * from "./GrowApps";
+export * from "./PartnerList";

package/dist/components/inlineStyles.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Inline styles for SDK components
+ * These replace external CSS dependencies to make components self-contained
+ */
+import { CSSProperties } from "react";
+export declare const slideStyles: {
+    slidesContainer: {
+        position: "relative";
+        width: string;
+        overflow: string;
+        margin: number;
+    };
+    slidesWrapper: {
+        display: string;
+        transition: string;
+        gap: string;
+        willChange: string;
+    };
+    slideNavigation: {
+        position: "relative";
+        width: string;
+        boxSizing: "content-box";
+        padding: string;
+        display: string;
+        flexDirection: "row";
+        flexWrap: "nowrap";
+        gap: string;
+        borderRadius: string;
+        backgroundColor: string;
+    };
+    slideButton: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        width: string;
+        height: string;
+        padding: number;
+        border: string;
+        borderRadius: string;
+        backgroundColor: string;
+        cursor: string;
+        transition: string;
+    };
+    slideButtonDisabled: {
+        cursor: string;
+        opacity: number;
+    };
+    slideItem: {
+        flex: string;
+        width: string;
+    };
+    slideItemMobile: {
+        width: string;
+    };
+    slideNav: {
+        position: "absolute";
+        top: string;
+        transform: string;
+        background: string;
+        border: string;
+        borderRadius: string;
+        width: string;
+        height: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        cursor: string;
+        zIndex: number;
+        transition: string;
+    };
+    slideNavPrev: {
+        left: string;
+    };
+    slideNavNext: {
+        right: string;
+    };
+    slideDots: {
+        display: string;
+        justifyContent: string;
+        gap: string;
+        marginTop: string;
+    };
+    slideDot: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        backgroundColor: string;
+        cursor: string;
+        transition: string;
+    };
+    slideDotActive: {
+        backgroundColor: string;
+    };
+};
+export declare const growAppsStyles: {
+    truncateText: {
+        display: string;
+        WebkitLineClamp: number;
+        WebkitBoxOrient: "vertical";
+        overflow: string;
+        textOverflow: string;
+        fontSize: string;
+        color: string;
+        lineHeight: number;
+    };
+    dashboardGrowApps: {
+        width: string;
+    };
+};
+export declare const mergeStyles: (...styles: (CSSProperties | undefined)[]) => CSSProperties;

package/dist/components/inlineStyles.js

@@ -0,0 +1,114 @@
+/**
+ * Inline styles for SDK components
+ * These replace external CSS dependencies to make components self-contained
+ */
+// Slide container and wrapper styles
+export const slideStyles = {
+    slidesContainer: {
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
+        margin: 0,
+    },
+    slidesWrapper: {
+        display: "flex",
+        transition: "transform 0.5s ease-in-out",
+        gap: "20px",
+        willChange: "transform",
+    },
+    slideNavigation: {
+        position: "relative",
+        width: "fit-content",
+        boxSizing: "content-box",
+        padding: "4px 6px",
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        gap: "4px",
+        borderRadius: "8px",
+        backgroundColor: "#e3e3e3",
+    },
+    slideButton: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "24px",
+        height: "24px",
+        padding: 0,
+        border: "none",
+        borderRadius: "4px",
+        backgroundColor: "transparent",
+        cursor: "pointer",
+        transition: "background-color 0.2s ease",
+    },
+    slideButtonDisabled: {
+        cursor: "not-allowed",
+        opacity: 0.5,
+    },
+    slideItem: {
+        flex: "0 0 auto",
+        width: "270px",
+    },
+    slideItemMobile: {
+        width: "90%",
+    },
+    slideNav: {
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        background: "rgba(255, 255, 255, 0.9)",
+        border: "1px solid #e3e3e3",
+        borderRadius: "50%",
+        width: "32px",
+        height: "32px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        zIndex: 10,
+        transition: "background-color 0.2s",
+    },
+    slideNavPrev: {
+        left: "10px",
+    },
+    slideNavNext: {
+        right: "10px",
+    },
+    slideDots: {
+        display: "flex",
+        justifyContent: "center",
+        gap: "8px",
+        marginTop: "16px",
+    },
+    slideDot: {
+        width: "8px",
+        height: "8px",
+        borderRadius: "50%",
+        backgroundColor: "#e3e3e3",
+        cursor: "pointer",
+        transition: "background-color 0.3s",
+    },
+    slideDotActive: {
+        backgroundColor: "#303030",
+    },
+};
+// GrowApps specific styles
+export const growAppsStyles = {
+    truncateText: {
+        display: "-webkit-box",
+        WebkitLineClamp: 3,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        fontSize: "13px",
+        color: "#616161",
+        lineHeight: 1.4,
+    },
+    dashboardGrowApps: {
+        width: "100%",
+    },
+};
+// Helper function to merge styles
+export const mergeStyles = (...styles) => {
+    return Object.assign({}, ...styles.filter(Boolean));
+};