@datlv-trustshop/shopify-inapp-components 0.1.9

package/dist/hooks/useArticles.d.ts

@@ -0,0 +1,11 @@
+import { ArticleItem } from "../types";
+export interface UseArticlesResult {
+    articles: ArticleItem[];
+    loading: boolean;
+    getArticle: (id: string | number) => ArticleItem | undefined;
+    getArticlesByCategory: (category: string) => ArticleItem[];
+    getLatestArticles: (limit: number) => ArticleItem[];
+}
+export declare function useArticles(limit?: number): UseArticlesResult;
+export declare function useLatestArticles(limit?: number): ArticleItem[];
+export declare function useArticleCategories(): string[];

package/dist/hooks/useArticles.js

@@ -0,0 +1,49 @@
+import { useMemo } from "react";
+import { useDashboardContext } from "../provider/DashboardProvider";
+export function useArticles(limit) {
+    const { engine, state } = useDashboardContext();
+    const articles = useMemo(() => {
+        if (!engine || !state.data)
+            return [];
+        return engine.getArticles(limit);
+    }, [engine, limit, state.data]);
+    const getArticle = (id) => {
+        return articles.find((article) => article.id === id);
+    };
+    const getArticlesByCategory = (category) => {
+        return articles.filter((article) => article.category === category);
+    };
+    const getLatestArticles = (limitCount) => {
+        const sorted = [...articles].sort((a, b) => {
+            const dateA = new Date(a.publishedDate || 0).getTime();
+            const dateB = new Date(b.publishedDate || 0).getTime();
+            return dateB - dateA;
+        });
+        return sorted.slice(0, limitCount);
+    };
+    return {
+        articles,
+        loading: state.loading,
+        getArticle,
+        getArticlesByCategory,
+        getLatestArticles,
+    };
+}
+export function useLatestArticles(limit = 5) {
+    const { articles, getLatestArticles } = useArticles();
+    return useMemo(() => {
+        return getLatestArticles(limit);
+    }, [articles, limit]);
+}
+export function useArticleCategories() {
+    const { articles } = useArticles();
+    return useMemo(() => {
+        const categories = new Set();
+        articles.forEach((article) => {
+            if (article.category) {
+                categories.add(article.category);
+            }
+        });
+        return Array.from(categories);
+    }, [articles]);
+}

package/dist/hooks/useBanner.d.ts

@@ -0,0 +1,5 @@
+import { BannerItem, BannerType } from "../types";
+export declare function useBanners(type?: BannerType): BannerItem[];
+export declare function useTopBanner(): BannerItem | null;
+export declare function usePopupBanner(): BannerItem | null;
+export declare function useFooterBanner(): BannerItem | null;

package/dist/hooks/useBanner.js

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { useDashboardContext } from "../provider/DashboardProvider";
+export function useBanners(type) {
+    const { engine, state } = useDashboardContext();
+    return useMemo(() => {
+        if (!engine || !state.data)
+            return [];
+        return engine.getBanners(type);
+    }, [engine, type, state.data]);
+}
+export function useTopBanner() {
+    const banners = useBanners("top_banner");
+    return banners[0] || null;
+}
+export function usePopupBanner() {
+    const banners = useBanners("popup");
+    return banners[0] || null;
+}
+export function useFooterBanner() {
+    const banners = useBanners("footer_banner");
+    return banners[0] || null;
+}

package/dist/hooks/useDashboard.d.ts

@@ -0,0 +1,11 @@
+import { DashboardData } from "../types";
+export interface UseDashboardResult {
+    data: DashboardData | null;
+    loading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+    isInitialized: boolean;
+    lastFetch: Date | null;
+    locale: string;
+}
+export declare function useDashboard(): UseDashboardResult;

package/dist/hooks/useDashboard.js

@@ -0,0 +1,13 @@
+import { useDashboardContext } from "../provider/DashboardProvider";
+export function useDashboard() {
+    const { state, refresh, isInitialized, locale } = useDashboardContext();
+    return {
+        data: state.data,
+        loading: state.loading,
+        error: state.error,
+        refresh,
+        isInitialized,
+        lastFetch: state.lastFetch,
+        locale,
+    };
+}

package/dist/hooks/useGrowApps.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook to access grow apps data from the dashboard context
+ * @returns Object containing grow apps array and loading/error states
+ */
+export declare function useGrowApps(): {
+    apps: import("..").GrowApp[];
+    loading: boolean;
+    error: Error | null;
+    isEmpty: boolean;
+};

package/dist/hooks/useGrowApps.js

@@ -0,0 +1,14 @@
+import { useDashboard } from "./useDashboard";
+/**
+ * Hook to access grow apps data from the dashboard context
+ * @returns Object containing grow apps array and loading/error states
+ */
+export function useGrowApps() {
+    const { data, loading, error } = useDashboard();
+    return {
+        apps: data?.grow_apps || [],
+        loading,
+        error,
+        isEmpty: !data?.grow_apps || data.grow_apps.length === 0,
+    };
+}

package/dist/hooks/useTranslations.d.ts

@@ -0,0 +1,3 @@
+import { SDKTranslations } from '../types/translations';
+export declare function useTranslations(): Required<SDKTranslations>;
+export declare function useTranslation<K extends keyof SDKTranslations>(key: K): Required<SDKTranslations>[K];

package/dist/hooks/useTranslations.js

@@ -0,0 +1,9 @@
+import { useDashboardContext } from '../provider/DashboardProvider';
+export function useTranslations() {
+    const context = useDashboardContext();
+    return context.translations;
+}
+export function useTranslation(key) {
+    const translations = useTranslations();
+    return translations[key];
+}

package/dist/hooks/useWhatsNew.d.ts

@@ -0,0 +1,11 @@
+import { ProductUpdateItem } from "../types";
+export interface UseWhatsNewResult {
+    updates: ProductUpdateItem[];
+    loading: boolean;
+    getUpdate: (id: string | number) => ProductUpdateItem | undefined;
+    getUpdatesByType: (type: "major" | "minor" | "patch") => ProductUpdateItem[];
+    getLatestUpdate: () => ProductUpdateItem | null;
+}
+export declare function useWhatsNew(limit?: number): UseWhatsNewResult;
+export declare function useLatestUpdate(): ProductUpdateItem | null;
+export declare function useMajorUpdates(): ProductUpdateItem[];

package/dist/hooks/useWhatsNew.js

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { useDashboardContext } from "../provider/DashboardProvider";
+export function useWhatsNew(limit) {
+    const { engine, state } = useDashboardContext();
+    const updates = useMemo(() => {
+        if (!engine || !state.data)
+            return [];
+        return engine.getWhatsNew(limit);
+    }, [engine, limit, state.data]);
+    const getUpdate = (id) => {
+        return updates.find((update) => update.id === id);
+    };
+    const getUpdatesByType = (type) => {
+        return updates.filter((update) => update.type === type);
+    };
+    const getLatestUpdate = () => {
+        return updates[0] || null;
+    };
+    return {
+        updates,
+        loading: state.loading,
+        getUpdate,
+        getUpdatesByType,
+        getLatestUpdate,
+    };
+}
+export function useLatestUpdate() {
+    const { updates } = useWhatsNew(1);
+    return updates[0] || null;
+}
+export function useMajorUpdates() {
+    const { getUpdatesByType } = useWhatsNew();
+    return getUpdatesByType("major");
+}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { DashboardEngine } from "./core/engine";
+export { GlobalDashboardManager } from "./core/global-manager";
+export { adaptDashboardData, adaptBanner, adaptApp, adaptArticle, adaptProductUpdate, } from "./core/adapter";
+export { fetchDashboard, clearCache, getCacheSize } from "./core/fetcher";
+export * from "./types";
+export { DashboardProvider, DashboardContext, useDashboardContext, } from "./provider/DashboardProvider";
+export type { DashboardProviderProps, DashboardContextValue, } from "./provider/DashboardProvider";
+export * from "./hooks";
+export * from "./components";
+export type { SDKTranslations } from './types/translations';
+export { defaultTranslations } from './translations/default';
+export { useTranslations, useTranslation } from './hooks/useTranslations';
+import { DashboardEngine } from "./core/engine";
+declare const _default: {
+    DashboardEngine: typeof DashboardEngine;
+    DashboardProvider: import("react").FC<import("./provider/DashboardProvider").DashboardProviderProps>;
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,16 @@
+export { DashboardEngine } from "./core/engine";
+export { GlobalDashboardManager } from "./core/global-manager";
+export { adaptDashboardData, adaptBanner, adaptApp, adaptArticle, adaptProductUpdate, } from "./core/adapter";
+export { fetchDashboard, clearCache, getCacheSize } from "./core/fetcher";
+export * from "./types";
+export { DashboardProvider, DashboardContext, useDashboardContext, } from "./provider/DashboardProvider";
+export * from "./hooks";
+export * from "./components";
+export { defaultTranslations } from './translations/default';
+export { useTranslations, useTranslation } from './hooks/useTranslations';
+import { DashboardEngine } from "./core/engine";
+import { DashboardProvider } from "./provider/DashboardProvider";
+export default {
+    DashboardEngine,
+    DashboardProvider,
+};

package/dist/provider/DashboardProvider.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react";
+import { DashboardEngine } from "../core/engine";
+import { DashboardData, DashboardConfig, DashboardState } from "../types";
+import { SDKTranslations } from "../types/translations";
+export interface DashboardContextValue {
+    engine: DashboardEngine;
+    state: DashboardState;
+    refresh: () => Promise<void>;
+    isInitialized: boolean;
+    locale: string;
+    translations: Required<SDKTranslations>;
+}
+export declare const DashboardContext: React.Context<DashboardContextValue | null>;
+export declare const useDashboardContext: () => DashboardContextValue;
+export interface DashboardProviderProps {
+    children: ReactNode;
+    config: DashboardConfig;
+    locale?: string;
+    translations?: SDKTranslations;
+    autoInit?: boolean;
+    autoRefreshOnLocaleChange?: boolean;
+    onError?: (error: Error) => void;
+    onLoad?: (data: DashboardData) => void;
+    onLocaleChange?: (newLocale: string, oldLocale: string) => void;
+    onFallbackUsed?: (requested: string, actual: string) => void;
+}
+/**
+ * DashboardProvider - Lightweight provider that connects to the global manager
+ *
+ * Multiple providers can be used throughout the app and they will all share:
+ * - The same engine instance
+ * - The same data/cache
+ * - The same locale state
+ * - Deduplicated API calls
+ */
+export declare const DashboardProvider: React.FC<DashboardProviderProps>;

package/dist/provider/DashboardProvider.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useEffect, useState, useCallback, useMemo, useRef, } from "react";
+import { GlobalDashboardManager } from "../core/global-manager";
+import { defaultTranslations } from "../translations/default";
+export const DashboardContext = createContext(null);
+export const useDashboardContext = () => {
+    const context = React.useContext(DashboardContext);
+    if (!context) {
+        throw new Error('useDashboardContext must be used within a DashboardProvider');
+    }
+    return context;
+};
+/**
+ * DashboardProvider - Lightweight provider that connects to the global manager
+ *
+ * Multiple providers can be used throughout the app and they will all share:
+ * - The same engine instance
+ * - The same data/cache
+ * - The same locale state
+ * - Deduplicated API calls
+ */
+export const DashboardProvider = ({ children, config, locale, translations, autoInit = true, autoRefreshOnLocaleChange = true, onError, onLoad, onLocaleChange, onFallbackUsed, }) => {
+    const [state, setState] = useState({
+        data: null,
+        loading: false,
+        error: null,
+        lastFetch: null,
+    });
+    // Generate unique ID for this provider instance
+    const providerIdRef = useRef(`provider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
+    // Track if we've called onLoad for this data
+    const lastDataRef = useRef(null);
+    const lastLocaleRef = useRef(locale || config.locale || "en");
+    // Get the global manager
+    const manager = useMemo(() => GlobalDashboardManager.getInstance(), []);
+    // Create config with current locale
+    const currentConfig = useMemo(() => ({
+        ...config,
+        locale: locale || config.locale || "en",
+    }), [config, locale]);
+    // Register this provider
+    useEffect(() => {
+        const providerId = providerIdRef.current;
+        manager.registerProvider(providerId, currentConfig);
+        return () => {
+            manager.unregisterProvider(providerId);
+        };
+    }, [manager, currentConfig]);
+    // Subscribe to global state changes
+    useEffect(() => {
+        const providerId = providerIdRef.current;
+        const unsubscribe = manager.subscribe(providerId, (globalState) => {
+            setState(globalState);
+            // Handle callbacks
+            if (globalState.data && globalState.data !== lastDataRef.current) {
+                lastDataRef.current = globalState.data;
+                // Check for fallback usage
+                if (globalState.data.fallback_used && onFallbackUsed) {
+                    onFallbackUsed(globalState.data.requested_locale || locale || "en", globalState.data.locale || "en");
+                }
+                if (onLoad) {
+                    onLoad(globalState.data);
+                }
+            }
+            if (globalState.error && onError) {
+                onError(globalState.error);
+            }
+        });
+        return unsubscribe;
+    }, [manager, locale, onError, onLoad, onFallbackUsed]);
+    // Handle locale changes
+    useEffect(() => {
+        if (!locale)
+            return;
+        const currentLocale = manager.getCurrentLocale();
+        if (currentLocale !== locale) {
+            const oldLocale = lastLocaleRef.current;
+            lastLocaleRef.current = locale;
+            if (autoRefreshOnLocaleChange) {
+                manager.setLocale(locale).catch((error) => {
+                    console.error('Failed to set locale:', error);
+                    if (onError) {
+                        onError(error instanceof Error ? error : new Error('Failed to set locale'));
+                    }
+                });
+            }
+            else {
+                // Just update config without refresh
+                const engine = manager.getEngine();
+                if (engine) {
+                    engine.updateLocale(locale);
+                }
+            }
+            if (onLocaleChange) {
+                onLocaleChange(locale, oldLocale);
+            }
+        }
+    }, [locale, manager, autoRefreshOnLocaleChange, onLocaleChange, onError]);
+    // Auto-init on mount if requested
+    useEffect(() => {
+        if (autoInit && !manager.isInitialized()) {
+            manager.init(currentConfig).catch((error) => {
+                console.error("Failed to auto-initialize dashboard:", error);
+                if (onError) {
+                    onError(error instanceof Error
+                        ? error
+                        : new Error("Failed to initialize dashboard"));
+                }
+            });
+        }
+    }, [autoInit, manager, currentConfig, onError]);
+    // Create refresh function
+    const refresh = useCallback(async () => {
+        try {
+            await manager.refresh();
+        }
+        catch (error) {
+            console.error("Failed to refresh dashboard:", error);
+            if (onError) {
+                onError(error instanceof Error
+                    ? error
+                    : new Error("Failed to refresh dashboard"));
+            }
+            throw error;
+        }
+    }, [manager, onError]);
+    // Merge translations with defaults
+    const mergedTranslations = useMemo(() => {
+        if (!translations)
+            return defaultTranslations;
+        return {
+            whatsNew: {
+                ...defaultTranslations.whatsNew,
+                ...translations.whatsNew,
+                tabs: {
+                    ...defaultTranslations.whatsNew.tabs,
+                    ...translations.whatsNew?.tabs,
+                },
+                buttonViewAll: {
+                    ...defaultTranslations.whatsNew.buttonViewAll,
+                    ...translations.whatsNew?.buttonViewAll,
+                },
+            },
+            growApps: {
+                ...defaultTranslations.growApps,
+                ...translations.growApps,
+            },
+            banner: {
+                ...defaultTranslations.banner,
+                ...translations.banner,
+            },
+        };
+    }, [translations]);
+    // Get engine from manager (might be null initially)
+    const engine = manager.getEngine();
+    // Create stable context value
+    const contextValue = useMemo(() => {
+        if (!engine)
+            return null;
+        return {
+            engine,
+            state,
+            refresh,
+            isInitialized: manager.isInitialized(),
+            locale: manager.getCurrentLocale(),
+            translations: mergedTranslations,
+        };
+    }, [engine, state, refresh, manager, mergedTranslations]);
+    // If engine not ready yet, we can still render children
+    // This allows components to mount even if engine isn't initialized
+    if (!contextValue) {
+        // Create a placeholder context that will update once engine is ready
+        const placeholderContext = {
+            engine: null, // Will be replaced when ready
+            state,
+            refresh,
+            isInitialized: false,
+            locale: manager.getCurrentLocale(),
+            translations: mergedTranslations,
+        };
+        return (_jsx(DashboardContext.Provider, { value: placeholderContext, children: children }));
+    }
+    return (_jsx(DashboardContext.Provider, { value: contextValue, children: children }));
+};

package/dist/translations/default.d.ts

@@ -0,0 +1,2 @@
+import { SDKTranslations } from '../types/translations';
+export declare const defaultTranslations: Required<SDKTranslations>;

package/dist/translations/default.js

@@ -0,0 +1,27 @@
+export const defaultTranslations = {
+    whatsNew: {
+        title: "What's New",
+        tabs: {
+            article: "Articles",
+            productUpdate: "Product Updates",
+        },
+        buttonViewAll: {
+            article: "View all articles",
+            productUpdate: "View all updates",
+        },
+        noData: "No updates available",
+    },
+    growApps: {
+        title: "Grow faster with apps",
+        subtitle: "Discover powerful apps to enhance your store and boost your business",
+        exploreApps: "Explore apps",
+        install: "Install",
+        installed: "Installed",
+        dismiss: "Dismiss",
+        noData: "No apps available",
+    },
+    banner: {
+        learnMore: "Learn more",
+        dismiss: "Dismiss",
+    },
+};

package/dist/types/app.d.ts

@@ -0,0 +1,14 @@
+export type AppGroup = "grow_faster" | "integration" | "marketing" | "analytics" | "other";
+export interface AppItem {
+    id: string | number;
+    key: string;
+    title: string;
+    description: string;
+    icon: string;
+    link: string;
+    group: AppGroup;
+    rating?: number;
+    installs?: number;
+    price?: string;
+    featured?: boolean;
+}

package/dist/types/app.js

@@ -0,0 +1 @@
+export {};

package/dist/types/article.d.ts

@@ -0,0 +1,14 @@
+export interface ArticleItem {
+    id: string | number;
+    title: string;
+    description?: string;
+    content?: string;
+    thumbnail?: string;
+    imageUrl?: string;
+    link: string;
+    author?: string;
+    publishedDate?: string;
+    category?: string;
+    readTime?: number;
+    tags?: string[];
+}

package/dist/types/article.js

@@ -0,0 +1 @@
+export {};

package/dist/types/banner.d.ts

@@ -0,0 +1,22 @@
+export type BannerType = "popup" | "top_banner" | "footer_banner";
+export type OpenType = "new_tab" | "same_tab";
+export interface BannerStyle {
+    backgroundColor?: string;
+    textColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+}
+export interface BannerItem {
+    id: string | number;
+    type: BannerType;
+    title: string;
+    description?: string;
+    image?: string;
+    icon?: string;
+    link: string;
+    linkText?: string;
+    openType: OpenType;
+    style?: BannerStyle;
+    priority?: number;
+    isActive?: boolean;
+}

package/dist/types/banner.js

@@ -0,0 +1 @@
+export {};

package/dist/types/dashboard.d.ts

@@ -0,0 +1,42 @@
+import { BannerItem } from "./banner";
+import { AppItem, AppGroup } from "./app";
+import { ArticleItem } from "./article";
+import { ProductUpdateItem } from "./product-update";
+import { PartnerItem } from "./partner";
+export interface GrowApp {
+    id: string | number;
+    title: string;
+    content: string;
+    icon_url?: string;
+    imageUrl?: string;
+    button_text?: string;
+    button_get_app?: string;
+    app_url?: string;
+    get_app?: string;
+}
+export interface DashboardData {
+    locale?: string;
+    requested_locale?: string;
+    fallback_used?: boolean;
+    banners: BannerItem[];
+    apps: Record<AppGroup, AppItem[]>;
+    articles: ArticleItem[];
+    whatsNew: ProductUpdateItem[];
+    grow_apps?: GrowApp[];
+    grow_apps_display_limit?: number;
+    partner_list?: PartnerItem[];
+}
+export interface DashboardConfig {
+    apiUrl: string;
+    locale?: string;
+    cacheTime?: number;
+    retryAttempts?: number;
+    retryDelay?: number;
+    headers?: Record<string, string>;
+}
+export interface DashboardState {
+    data: DashboardData | null;
+    loading: boolean;
+    error: Error | null;
+    lastFetch: Date | null;
+}

package/dist/types/dashboard.js

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./banner";
+export * from "./app";
+export * from "./article";
+export * from "./product-update";
+export * from "./dashboard";
+export * from "./partner";

package/dist/types/index.js

@@ -0,0 +1,6 @@
+export * from "./banner";
+export * from "./app";
+export * from "./article";
+export * from "./product-update";
+export * from "./dashboard";
+export * from "./partner";

package/dist/types/partner.d.ts

@@ -0,0 +1,8 @@
+export interface PartnerItem {
+    title: string;
+    content: string;
+    icon_url: string;
+    button_text: string;
+    app_url: string;
+    key: string;
+}

package/dist/types/partner.js

@@ -0,0 +1 @@
+export {};

package/dist/types/product-update.d.ts

@@ -0,0 +1,23 @@
+export interface ProductUpdateItem {
+    id: string | number;
+    title: string;
+    description?: string;
+    version?: string;
+    releaseDate?: string;
+    date_time?: string;
+    features?: string[];
+    improvements?: string[];
+    fixes?: string[];
+    link?: string;
+    imageUrl?: string;
+    image_url?: string;
+    type?: "major" | "minor" | "patch";
+    position?: number;
+    button_try_it_now?: string;
+    button_try_url?: string;
+    button_learn_more?: string;
+    button_learn_url?: string;
+    content?: {
+        text?: string;
+    };
+}

package/dist/types/product-update.js

@@ -0,0 +1 @@
+export {};