@datlv-trustshop/shopify-inapp-components 0.1.9

package/dist/components/styles.d.ts

@@ -0,0 +1,152 @@
+export declare const sdkStyles: {
+    slidesContainer: {
+        position: "relative";
+        width: string;
+        overflow: string;
+        margin: number;
+    };
+    slidesWrapper: {
+        display: string;
+        transition: string;
+        gap: string;
+        willChange: string;
+    };
+    slideBox: {
+        flex: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        gap: string;
+        border: string;
+        padding: string;
+        borderRadius: string;
+        backgroundColor: string;
+        minHeight: string;
+    };
+    slideContent: {
+        flex: number;
+        display: string;
+        flexDirection: "column";
+        gap: string;
+    };
+    slideImage: {
+        flex: number;
+        display: string;
+        justifyContent: string;
+        alignItems: 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;
+    };
+    slideNavHover: {
+        background: string;
+        boxShadow: 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;
+    };
+    dashboardWhatsNew: {
+        width: string;
+        overflow: string;
+        maxWidth: string;
+    };
+    dashboardGrowApps: {
+        width: string;
+    };
+    dashboardPartnerList: {
+        width: string;
+    };
+    truncateText: {
+        display: string;
+        WebkitLineClamp: number;
+        WebkitBoxOrient: "vertical";
+        overflow: string;
+        textOverflow: string;
+        fontSize: string;
+        color: string;
+        lineHeight: number;
+    };
+    mobile: string;
+    mobileSlideBox: {
+        flexDirection: "column";
+        gap: string;
+    };
+    mobileSlideImage: {
+        width: string;
+        height: string;
+    };
+    mobileSlideItem: {
+        width: string;
+    };
+};
+export declare const mergeStyles: (...styles: Array<React.CSSProperties | undefined>) => React.CSSProperties;
+export declare const useResponsiveStyle: (desktopStyle: React.CSSProperties, _mobileStyle: React.CSSProperties) => import("react").CSSProperties;

package/dist/components/styles.js

@@ -0,0 +1,158 @@
+export const sdkStyles = {
+    // Container styles
+    slidesContainer: {
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
+        margin: 0,
+    },
+    slidesWrapper: {
+        display: "flex",
+        transition: "transform 0.5s ease-in-out",
+        gap: "20px",
+        willChange: "transform",
+    },
+    slideBox: {
+        flex: "0 0 90%",
+        display: "flex",
+        alignItems: "stretch",
+        justifyContent: "space-between",
+        gap: "47px",
+        border: "1px solid #e3e3e3",
+        padding: "16px",
+        borderRadius: "8px",
+        backgroundColor: "#ffffff",
+        minHeight: "280px",
+    },
+    slideContent: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: "9px",
+    },
+    slideImage: {
+        flex: 1,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    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% !important",
+    },
+    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",
+    },
+    slideNavHover: {
+        background: "#ffffff",
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+    },
+    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",
+    },
+    // Dashboard specific styles
+    dashboardWhatsNew: {
+        width: "100%",
+        overflow: "hidden",
+        maxWidth: "950px",
+    },
+    dashboardGrowApps: {
+        width: "100%",
+    },
+    dashboardPartnerList: {
+        width: "100%",
+    },
+    truncateText: {
+        display: "-webkit-box",
+        WebkitLineClamp: 3,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        fontSize: "13px",
+        color: "#616161",
+        lineHeight: 1.4,
+    },
+    mobile: "@media (max-width: 768px)",
+    mobileSlideBox: {
+        flexDirection: "column",
+        gap: "16px",
+    },
+    mobileSlideImage: {
+        width: "100%",
+        height: "auto",
+    },
+    mobileSlideItem: {
+        width: "90%",
+    },
+};
+export const mergeStyles = (...styles) => {
+    return Object.assign({}, ...styles.filter(Boolean));
+};
+export const useResponsiveStyle = (desktopStyle, _mobileStyle) => {
+    return desktopStyle;
+};

package/dist/core/adapter.d.ts

@@ -0,0 +1,6 @@
+import { DashboardData, BannerItem, AppItem, ArticleItem, ProductUpdateItem, AppGroup } from "../types";
+export declare function adaptDashboardData(rawData: any): DashboardData;
+export declare function adaptBanner(apiData: any): BannerItem;
+export declare function adaptApp(apiData: any, defaultGroup?: AppGroup): AppItem;
+export declare function adaptArticle(apiData: any): ArticleItem;
+export declare function adaptProductUpdate(apiData: any): ProductUpdateItem;

package/dist/core/adapter.js

@@ -0,0 +1,301 @@
+export function adaptDashboardData(rawData) {
+    const data = rawData.data || rawData;
+    const banners = [];
+    if (data.banner) {
+        banners.push({
+            ...data.banner,
+            type: "top_banner",
+        });
+    }
+    const allApps = [
+        ...(data.partner_list || []),
+        ...(data.seo_apps || []),
+        ...(data.integrations || []),
+    ];
+    const articles = data.whats_new?.articles || [];
+    const whatsNew = data.whats_new?.product_update || [];
+    const growApps = data.grow_apps || [];
+    const growAppsDisplayLimit = data.grow_apps_display_limit;
+    return {
+        banners: adaptBanners(banners),
+        apps: adaptApps(allApps),
+        articles: adaptArticles(articles),
+        whatsNew: adaptProductUpdates(whatsNew),
+        grow_apps: growApps,
+        grow_apps_display_limit: growAppsDisplayLimit,
+    };
+}
+function adaptBanners(banners) {
+    if (!Array.isArray(banners))
+        return [];
+    return banners.map((banner) => adaptBanner(banner)).filter(Boolean);
+}
+export function adaptBanner(apiData) {
+    const type = determineBannerType(apiData);
+    return {
+        id: apiData.id || generateId(),
+        type,
+        title: apiData.title || "",
+        description: apiData.description || apiData.content || apiData.subtitle || "",
+        image: apiData.image || apiData.image_url || apiData.imageUrl,
+        icon: apiData.icon || apiData.icon_url || apiData.iconUrl,
+        link: apiData.link ||
+            apiData.button_url ||
+            apiData.buttonUrl ||
+            apiData.url ||
+            "#",
+        linkText: apiData.linkText ||
+            apiData.button_text ||
+            apiData.buttonText ||
+            "Learn More",
+        openType: apiData.openType || apiData.open_type || "new_tab",
+        style: {
+            backgroundColor: apiData.background_color || apiData.backgroundColor || apiData.bgColor,
+            textColor: apiData.text_color || apiData.textColor,
+            buttonColor: apiData.button_color || apiData.buttonColor,
+            buttonTextColor: apiData.button_text_color || apiData.buttonTextColor,
+        },
+        priority: apiData.priority || apiData.order || 0,
+        isActive: apiData.isActive !== undefined
+            ? apiData.isActive
+            : apiData.active !== undefined
+                ? apiData.active
+                : apiData.enabled !== undefined
+                    ? apiData.enabled
+                    : true,
+    };
+}
+function determineBannerType(apiData) {
+    if (apiData.type) {
+        const typeMap = {
+            popup: "popup",
+            pop_up: "popup",
+            modal: "popup",
+            top: "top_banner",
+            top_banner: "top_banner",
+            header: "top_banner",
+            footer: "footer_banner",
+            footer_banner: "footer_banner",
+            bottom: "footer_banner",
+        };
+        const normalizedType = apiData.type.toLowerCase().replace(/-/g, "_");
+        return typeMap[normalizedType] || "top_banner";
+    }
+    if (apiData.position) {
+        const positionMap = {
+            top: "top_banner",
+            header: "top_banner",
+            bottom: "footer_banner",
+            footer: "footer_banner",
+            center: "popup",
+            modal: "popup",
+        };
+        const normalizedPosition = apiData.position.toLowerCase();
+        return positionMap[normalizedPosition] || "top_banner";
+    }
+    return "top_banner";
+}
+function adaptApps(apps) {
+    const result = {
+        grow_faster: [],
+        integration: [],
+        marketing: [],
+        analytics: [],
+        other: [],
+    };
+    if (Array.isArray(apps)) {
+        const adaptedApps = apps.map((app) => adaptApp(app)).filter(Boolean);
+        adaptedApps.forEach((app) => {
+            const group = app.group || "other";
+            if (result[group]) {
+                result[group].push(app);
+            }
+        });
+    }
+    else if (typeof apps === "object") {
+        Object.entries(apps).forEach(([key, value]) => {
+            const group = normalizeAppGroup(key);
+            if (Array.isArray(value)) {
+                result[group] = value
+                    .map((app) => adaptApp(app, group))
+                    .filter(Boolean);
+            }
+        });
+    }
+    return result;
+}
+function normalizeAppGroup(group) {
+    const groupMap = {
+        grow_faster: "grow_faster",
+        growfaster: "grow_faster",
+        "grow-faster": "grow_faster",
+        integration: "integration",
+        integrations: "integration",
+        marketing: "marketing",
+        analytics: "analytics",
+        analysis: "analytics",
+    };
+    const normalized = group.toLowerCase().replace(/[\s_-]/g, "");
+    return groupMap[normalized] || "other";
+}
+export function adaptApp(apiData, defaultGroup) {
+    const group = defaultGroup ||
+        normalizeAppGroup(apiData.group || apiData.category || "other");
+    return {
+        id: apiData.id || generateId(),
+        key: apiData.key ||
+            apiData.slug ||
+            apiData.name?.toLowerCase().replace(/\s+/g, "-") ||
+            generateKey(),
+        title: apiData.title || apiData.name || "",
+        description: apiData.description || apiData.subtitle || "",
+        icon: apiData.icon || apiData.icon_url || apiData.iconUrl || apiData.logo || "",
+        link: apiData.link || apiData.url || apiData.app_url || apiData.appUrl || "#",
+        group,
+        rating: apiData.rating || apiData.score,
+        installs: apiData.installs || apiData.installations || apiData.install_count,
+        price: apiData.price || apiData.pricing,
+        featured: apiData.featured || apiData.is_featured || false,
+    };
+}
+function adaptArticles(articles) {
+    if (!Array.isArray(articles))
+        return [];
+    return articles.map((article) => adaptArticle(article)).filter(Boolean);
+}
+export function adaptArticle(apiData) {
+    return {
+        id: apiData.id || generateId(),
+        title: apiData.title || apiData.headline || "",
+        description: apiData.description || apiData.summary || apiData.excerpt || "",
+        content: apiData.content || apiData.body || apiData.text,
+        thumbnail: apiData.thumbnail ||
+            apiData.image ||
+            apiData.cover_image ||
+            apiData.coverImage,
+        imageUrl: apiData.imageUrl ||
+            apiData.image_url ||
+            apiData.image ||
+            apiData.thumbnail,
+        link: apiData.link ||
+            apiData.url ||
+            apiData.article_url ||
+            apiData.button_url ||
+            "#",
+        author: apiData.author || apiData.author_name || apiData.authorName,
+        publishedDate: apiData.published_date ||
+            apiData.publishedDate ||
+            apiData.date ||
+            apiData.created_at,
+        category: apiData.category || apiData.section || apiData.label,
+        readTime: apiData.read_time || apiData.readTime || apiData.reading_time,
+        tags: apiData.tags || apiData.keywords || [],
+    };
+}
+function adaptProductUpdates(updates) {
+    if (!Array.isArray(updates))
+        return [];
+    const mappedUpdates = updates
+        .map((update) => adaptProductUpdate(update))
+        .filter(Boolean);
+    return mappedUpdates.sort((a, b) => {
+        const posA = a.position ?? Number.MAX_VALUE;
+        const posB = b.position ?? Number.MAX_VALUE;
+        return posA - posB;
+    });
+}
+export function adaptProductUpdate(apiData) {
+    const description = apiData.description ||
+        apiData.content?.text ||
+        apiData.content ||
+        apiData.summary ||
+        "";
+    const features = apiData.features || apiData.content?.list || apiData.new_features;
+    // Handle new nested buttons structure
+    const tryButton = apiData.buttons?.try;
+    const learnButton = apiData.buttons?.learn;
+    // Fallback to old format if new format not available
+    const link = tryButton?.url ||
+        learnButton?.url ||
+        apiData.link ||
+        apiData.button_try_url ||
+        apiData.button_learn_url ||
+        apiData.url ||
+        apiData.release_notes_url;
+    return {
+        id: apiData.id || generateId(),
+        title: apiData.title || apiData.name || "",
+        description,
+        version: apiData.version || apiData.release_version,
+        releaseDate: apiData.version || // New: use version field for date display
+            apiData.date_time ||
+            apiData.release_date ||
+            apiData.releaseDate ||
+            apiData.date ||
+            new Date().toISOString(),
+        date_time: apiData.version || apiData.date_time, // New: prioritize version field
+        features: adaptStringArray(features),
+        improvements: adaptStringArray(apiData.improvements || apiData.enhancements),
+        fixes: adaptStringArray(apiData.fixes || apiData.bug_fixes || apiData.bugFixes),
+        link,
+        imageUrl: apiData.image_url ||
+            apiData.imageUrl ||
+            apiData.image ||
+            apiData.thumbnail,
+        image_url: apiData.image_url,
+        type: determineUpdateType(apiData),
+        position: apiData.position || apiData.order || apiData.priority,
+        // Handle new button structure with fallbacks
+        button_try_it_now: tryButton?.text || apiData.button_try_it_now || "Try it now",
+        button_try_url: tryButton?.url || apiData.button_try_url,
+        button_learn_more: learnButton?.text || apiData.button_learn_more || "Learn more",
+        button_learn_url: learnButton?.url || apiData.button_learn_url,
+        content: apiData.content
+            ? {
+                text: apiData.content.text || apiData.content,
+            }
+            : undefined,
+    };
+}
+function determineUpdateType(apiData) {
+    if (apiData.type) {
+        const type = apiData.type.toLowerCase();
+        if (type.includes("major"))
+            return "major";
+        if (type.includes("minor"))
+            return "minor";
+        if (type.includes("patch"))
+            return "patch";
+    }
+    if (apiData.version) {
+        const version = apiData.version.toString();
+        const parts = version.split(".");
+        if (parts.length >= 3) {
+            const [, minor, patch] = parts;
+            if (patch !== "0")
+                return "patch";
+            if (minor !== "0")
+                return "minor";
+            return "major";
+        }
+    }
+    return "minor";
+}
+function adaptStringArray(data) {
+    if (Array.isArray(data)) {
+        return data.filter((item) => typeof item === "string");
+    }
+    if (typeof data === "string") {
+        return data
+            .split(/[,;|\n]/)
+            .map((s) => s.trim())
+            .filter(Boolean);
+    }
+    return [];
+}
+function generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function generateKey() {
+    return `item-${Math.random().toString(36).substr(2, 9)}`;
+}

package/dist/core/engine.d.ts

@@ -0,0 +1,33 @@
+import { DashboardData, DashboardConfig, BannerItem, AppItem, AppGroup, ArticleItem, ProductUpdateItem, BannerType } from "../types";
+export declare class DashboardEngine {
+    private static instance;
+    private data;
+    private config;
+    private initPromise;
+    private lastFetchTime;
+    private listeners;
+    private fetchInProgress;
+    private currentLocale;
+    private constructor();
+    static getInstance(config?: DashboardConfig): DashboardEngine;
+    static resetInstance(): void;
+    init(forceRefresh?: boolean): Promise<void>;
+    private loadData;
+    subscribe(listener: (data: DashboardData | null) => void): () => void;
+    private notifyListeners;
+    getData(): DashboardData | null;
+    getBanners(type?: BannerType): BannerItem[];
+    getActiveBanners(type?: BannerType): BannerItem[];
+    getApps(group?: AppGroup): AppItem[];
+    getAppGroups(): AppGroup[];
+    getArticles(limit?: number): ArticleItem[];
+    getWhatsNew(limit?: number): ProductUpdateItem[];
+    refresh(): Promise<void>;
+    isInitialized(): boolean;
+    getCacheAge(): number;
+    isCacheValid(): boolean;
+    updateLocale(locale: string): boolean;
+    setLocale(locale: string): Promise<void>;
+    updateConfig(newConfig: Partial<DashboardConfig>): void;
+    getCurrentLocale(): string;
+}