@levi-gemcommerce/analytics 2.0.4-dev.1 → 2.1.0-test.0

package/dist/esm/components/CardPathAnalysis/constants/path-analysis.mjs

@@ -0,0 +1,163 @@
+const FUNNEL_POPOVER_KEY = {
+    LEVEL_1: 'LEVEL_1',
+    LEVEL_2: 'LEVEL_2',
+    LEVEL_3: 'LEVEL_3',
+    LEVEL_4: 'LEVEL_4',
+    LEVEL_5: 'LEVEL_5',
+    LEVEL_6: 'LEVEL_6',
+    LEVEL_7: 'LEVEL_7',
+    ADD_LEVEL: 'ADD_LEVEL',
+};
+const MOCK_DATA_PATH_ANALYSIS = [
+    {
+        data: [
+            {
+                value: 8500,
+                key: 'Home page',
+                id: '2552a8bf748314b0',
+                chartTooltip: [
+                    {
+                        key: 'GemX: CRO & A/B Testing',
+                        value: '/en-vn',
+                    },
+                    {
+                        key: 'Sessions',
+                        value: '20',
+                    },
+                    {
+                        key: 'Continuation sessions',
+                        value: '16',
+                    },
+                    {
+                        key: 'Visitors',
+                        value: '20',
+                    },
+                    {
+                        key: 'Bounce rate',
+                        value: '20%',
+                    },
+                    {
+                        key: 'Click-through rate',
+                        value: '76.19%',
+                    },
+                ],
+            },
+            {
+                value: 7000,
+                key: 'Landing page',
+                id: '2552a8bf748314b02',
+                chartTooltip: [
+                    {
+                        key: 'GemX: CRO & A/B Testing',
+                        value: '/en-vn/products/1',
+                    },
+                    {
+                        key: 'Sessions',
+                        value: '10',
+                    },
+                    {
+                        key: 'Continuation sessions',
+                        value: '16',
+                    },
+                    {
+                        key: 'Visitors',
+                        value: '20',
+                    },
+                    {
+                        key: 'Bounce rate',
+                        value: '20%',
+                    },
+                    {
+                        key: 'Click-through rate',
+                        value: '76.19%',
+                    },
+                ],
+            },
+            {
+                value: 4800,
+                key: 'Added to cart',
+                labelTooltip: {
+                    title: 'Sessions with cart additions',
+                    content: 'Sessions in your online store in which a visitor added item to the cart',
+                },
+            },
+            {
+                value: 2900,
+                key: 'Reached checkout',
+                labelTooltip: {
+                    title: 'Sessions that reached checkout',
+                    content: 'Sessions in your online store in which the checkout page was reached',
+                },
+            },
+            {
+                value: 1100,
+                key: 'Completed checkout',
+                labelTooltip: {
+                    title: 'Sessions that completed checkout',
+                    content: 'Sessions in your online store in which a purchase was completed',
+                },
+            },
+        ],
+        name: 'Conversion',
+        metadata: {
+            trends: {
+                '0': {
+                    value: '33.33%',
+                    trend: 'negative',
+                    direction: 'downward',
+                },
+                '1': {
+                    value: '46.15%',
+                    trend: 'positive',
+                    direction: 'upward',
+                },
+                '2': {
+                    value: '46.15%',
+                    trend: 'positive',
+                    direction: 'upward',
+                },
+                '3': {
+                    value: '46.15%',
+                    trend: 'positive',
+                    direction: 'upward',
+                },
+            },
+        },
+    },
+    {
+        name: 'Conversion',
+        data: [
+            {
+                value: 1350,
+                key: 'Home page',
+            },
+            {
+                value: 1253,
+                key: 'Added to cart',
+                labelTooltip: {
+                    title: 'Sessions with cart additions',
+                    content: 'Sessions in your online store in which a visitor added item to the cart',
+                },
+            },
+            {
+                value: 1103,
+                key: 'Reached checkout',
+                labelTooltip: {
+                    title: 'Sessions that reached checkout',
+                    content: 'Sessions in your online store in which the checkout page was reached',
+                },
+            },
+            {
+                value: 400,
+                key: 'Completed checkout',
+                labelTooltip: {
+                    title: 'Sessions that completed checkout',
+                    content: 'Sessions in your online store in which a purchase was completed',
+                },
+            },
+        ],
+        isComparison: true,
+    },
+];
+
+export { FUNNEL_POPOVER_KEY, MOCK_DATA_PATH_ANALYSIS };

package/dist/esm/components/CardPathAnalysis/contexts/PathAnalysisConfigProvider.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import type { IBasePathAnalyticPageWithChild } from '../types';
+import type { ReactNode } from 'react';
 export interface IPathAnalysisPricingConfig {
     isLoading: boolean;
     isPathAnalysisEnabled: boolean;
@@ -13,11 +13,18 @@ export interface IPathAnalysisHeatmapConfig {
 export interface IPathAnalysisConfig {
     pricing: IPathAnalysisPricingConfig;
     heatmap: IPathAnalysisHeatmapConfig;
+    /**
+     * When enabled, the funnel auto-expands every level along the dominant path
+     * (first level → highest-traffic child → ... up to MAX_FUNNEL_ADDITIONAL_LEVEL,
+     * stopping early when a level has no further paths) and the "+" add button is hidden.
+     */
+    autoExpandLevels?: boolean;
 }
 export interface IPathAnalysisConfigProviderProps {
     children: ReactNode;
     pricing: IPathAnalysisPricingConfig;
     heatmap: IPathAnalysisHeatmapConfig;
+    autoExpandLevels?: boolean;
 }
-export declare const PathAnalysisConfigProvider: ({ children, pricing, heatmap }: IPathAnalysisConfigProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PathAnalysisConfigProvider: ({ children, pricing, heatmap, autoExpandLevels, }: IPathAnalysisConfigProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const usePathAnalysisConfig: () => IPathAnalysisConfig;

package/dist/esm/components/CardPathAnalysis/contexts/PathAnalysisConfigProvider.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+const DEFAULT_CONFIG = {
+    pricing: {
+        isLoading: false,
+        isPathAnalysisEnabled: false,
+        onOpenModalPricing: () => { },
+    },
+    heatmap: {
+        isEnabledV1: false,
+        isEnabledV2: false,
+        onView: () => { },
+    },
+    autoExpandLevels: false,
+};
+const PathAnalysisConfigContext = createContext(DEFAULT_CONFIG);
+const PathAnalysisConfigProvider = ({ children, pricing, heatmap, autoExpandLevels, }) => {
+    const value = useMemo(() => ({ pricing, heatmap, autoExpandLevels }), [pricing, heatmap, autoExpandLevels]);
+    return (jsx(PathAnalysisConfigContext.Provider, { value: value, children: children }));
+};
+const usePathAnalysisConfig = () => useContext(PathAnalysisConfigContext);
+
+export { PathAnalysisConfigProvider, usePathAnalysisConfig };

package/dist/esm/components/CardPathAnalysis/contexts/PathAnalysisConfigProvider.mjs

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+const DEFAULT_CONFIG = {
+    pricing: {
+        isLoading: false,
+        isPathAnalysisEnabled: false,
+        onOpenModalPricing: () => { },
+    },
+    heatmap: {
+        isEnabledV1: false,
+        isEnabledV2: false,
+        onView: () => { },
+    },
+    autoExpandLevels: false,
+};
+const PathAnalysisConfigContext = createContext(DEFAULT_CONFIG);
+const PathAnalysisConfigProvider = ({ children, pricing, heatmap, autoExpandLevels, }) => {
+    const value = useMemo(() => ({ pricing, heatmap, autoExpandLevels }), [pricing, heatmap, autoExpandLevels]);
+    return (jsx(PathAnalysisConfigContext.Provider, { value: value, children: children }));
+};
+const usePathAnalysisConfig = () => useContext(PathAnalysisConfigContext);
+
+export { PathAnalysisConfigProvider, usePathAnalysisConfig };

package/dist/esm/components/CardPathAnalysis/contexts/PathAnalysisProvider.d.ts

@@ -1,6 +1,6 @@
-import type { OnChangeFunnelType } from '@/shared/charts';
-import type { EAnalyticMode } from '@/types';
 import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
+import type { OnChangeFunnelType } from '../../../shared/charts';
+import type { EAnalyticMode } from '../../../types';
 export interface IPathAnalysisFirstLevel {
     id: string;
     locationPath: string;

package/dist/esm/components/CardPathAnalysis/contexts/PathAnalysisProvider.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { usePathAnalyticsMerger } from '../hooks/usePathAnalyticsMerger.js';
+import { usePathAnalysisFunnel } from '../hooks/usePathAnalysisFunnel.js';
+import { usePathAnalysisConfig } from './PathAnalysisConfigProvider.js';
+import { createContext, useContext } from 'react';
+
+const PathAnalysisContext = createContext(undefined);
+const PathAnalysisProvider = (props) => {
+    const { children, campaignID, campaignGroupID, campaignVariantID, campaignVersionID, mode, campaignPathsData, analyticsData, } = props;
+    const dataFirstLevels = campaignPathsData?.paths;
+    const isFetchingFirstLevelPaths = campaignPathsData?.isLoading ?? false;
+    const pathAnalytics = analyticsData?.pathAnalytics ?? [];
+    const previousPathAnalyticsMap = analyticsData?.previousPathAnalyticsMap ?? {};
+    const isLoadingMetric = analyticsData?.isLoading ?? false;
+    const locationPath = analyticsData?.locationPath;
+    const shopifyPageType = analyticsData?.shopifyPageType;
+    const pathAnalysisCacheKey = JSON.stringify({ mode, campaignVariantID, campaignVersionID });
+    const { autoExpandLevels } = usePathAnalysisConfig();
+    const { processedPathAnalytics } = usePathAnalyticsMerger({ pathAnalytics, dataFirstLevels });
+    const pathAnalysisFunnelData = usePathAnalysisFunnel({
+        pathAnalytics: processedPathAnalytics,
+        pathAnalysisCacheKey,
+        dataFirstLevels,
+        locationPath,
+        autoExpandLevels,
+    });
+    const isLoading = isLoadingMetric || isFetchingFirstLevelPaths;
+    return (jsx(PathAnalysisContext.Provider, { value: {
+            mode,
+            campaignID,
+            campaignGroupID,
+            campaignVariantID,
+            campaignVersionID,
+            shopifyPageType,
+            pathAnalytics: processedPathAnalytics,
+            previousPathAnalyticsMap,
+            isLoadingMetric: isLoading,
+            ...pathAnalysisFunnelData,
+        }, children: children }));
+};
+const usePathAnalysisContext = () => {
+    const context = useContext(PathAnalysisContext);
+    if (!context) {
+        throw new Error('usePathAnalysisContext must be used within a PathAnalysisProvider');
+    }
+    return context;
+};
+
+export { PathAnalysisContext, PathAnalysisProvider, usePathAnalysisContext };

package/dist/esm/components/CardPathAnalysis/contexts/PathAnalysisProvider.mjs

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { usePathAnalyticsMerger } from '../hooks/usePathAnalyticsMerger.mjs';
+import { usePathAnalysisFunnel } from '../hooks/usePathAnalysisFunnel.mjs';
+import { usePathAnalysisConfig } from './PathAnalysisConfigProvider.mjs';
+import { createContext, useContext } from 'react';
+
+const PathAnalysisContext = createContext(undefined);
+const PathAnalysisProvider = (props) => {
+    const { children, campaignID, campaignGroupID, campaignVariantID, campaignVersionID, mode, campaignPathsData, analyticsData, } = props;
+    const dataFirstLevels = campaignPathsData?.paths;
+    const isFetchingFirstLevelPaths = campaignPathsData?.isLoading ?? false;
+    const pathAnalytics = analyticsData?.pathAnalytics ?? [];
+    const previousPathAnalyticsMap = analyticsData?.previousPathAnalyticsMap ?? {};
+    const isLoadingMetric = analyticsData?.isLoading ?? false;
+    const locationPath = analyticsData?.locationPath;
+    const shopifyPageType = analyticsData?.shopifyPageType;
+    const pathAnalysisCacheKey = JSON.stringify({ mode, campaignVariantID, campaignVersionID });
+    const { autoExpandLevels } = usePathAnalysisConfig();
+    const { processedPathAnalytics } = usePathAnalyticsMerger({ pathAnalytics, dataFirstLevels });
+    const pathAnalysisFunnelData = usePathAnalysisFunnel({
+        pathAnalytics: processedPathAnalytics,
+        pathAnalysisCacheKey,
+        dataFirstLevels,
+        locationPath,
+        autoExpandLevels,
+    });
+    const isLoading = isLoadingMetric || isFetchingFirstLevelPaths;
+    return (jsx(PathAnalysisContext.Provider, { value: {
+            mode,
+            campaignID,
+            campaignGroupID,
+            campaignVariantID,
+            campaignVersionID,
+            shopifyPageType,
+            pathAnalytics: processedPathAnalytics,
+            previousPathAnalyticsMap,
+            isLoadingMetric: isLoading,
+            ...pathAnalysisFunnelData,
+        }, children: children }));
+};
+const usePathAnalysisContext = () => {
+    const context = useContext(PathAnalysisContext);
+    if (!context) {
+        throw new Error('usePathAnalysisContext must be used within a PathAnalysisProvider');
+    }
+    return context;
+};
+
+export { PathAnalysisContext, PathAnalysisProvider, usePathAnalysisContext };

package/dist/esm/components/CardPathAnalysis/helpers/metricHelpers.d.ts

@@ -1,15 +1,15 @@
-import type { IBasePageAnalyticMetric } from '@/types/metric';
-export declare const getTotalSessionWithCartAdditionMetric: ({ metric }: {
+import type { IBasePageAnalyticMetric } from '../../../types/metric';
+export declare const getTotalSessionWithCartAdditionMetric: ({ metric, }: {
     metric?: IBasePageAnalyticMetric;
 }) => {
     value: number | undefined;
 };
-export declare const getTotalSessionReachedCheckoutMetric: ({ metric }: {
+export declare const getTotalSessionReachedCheckoutMetric: ({ metric, }: {
     metric?: IBasePageAnalyticMetric;
 }) => {
     value: number | undefined;
 };
-export declare const getTotalSessionCompletedCheckoutMetric: ({ metric }: {
+export declare const getTotalSessionCompletedCheckoutMetric: ({ metric, }: {
     metric?: IBasePageAnalyticMetric;
 }) => {
     value: number | undefined;

package/dist/esm/components/CardPathAnalysis/helpers/metricHelpers.js

@@ -0,0 +1,11 @@
+const getTotalSessionWithCartAdditionMetric = ({ metric, }) => ({
+    value: metric?.totalSessionsWithCartAdditions ?? undefined,
+});
+const getTotalSessionReachedCheckoutMetric = ({ metric, }) => ({
+    value: metric?.totalSessionsThatReachedCheckout ?? undefined,
+});
+const getTotalSessionCompletedCheckoutMetric = ({ metric, }) => ({
+    value: metric?.totalSessionsThatCompletedCheckout ?? undefined,
+});
+
+export { getTotalSessionCompletedCheckoutMetric, getTotalSessionReachedCheckoutMetric, getTotalSessionWithCartAdditionMetric };

package/dist/esm/components/CardPathAnalysis/helpers/metricHelpers.mjs

@@ -0,0 +1,11 @@
+const getTotalSessionWithCartAdditionMetric = ({ metric, }) => ({
+    value: metric?.totalSessionsWithCartAdditions ?? undefined,
+});
+const getTotalSessionReachedCheckoutMetric = ({ metric, }) => ({
+    value: metric?.totalSessionsThatReachedCheckout ?? undefined,
+});
+const getTotalSessionCompletedCheckoutMetric = ({ metric, }) => ({
+    value: metric?.totalSessionsThatCompletedCheckout ?? undefined,
+});
+
+export { getTotalSessionCompletedCheckoutMetric, getTotalSessionReachedCheckoutMetric, getTotalSessionWithCartAdditionMetric };

package/dist/esm/components/CardPathAnalysis/helpers/pathAnalysis.d.ts

@@ -1,5 +1,5 @@
-import type { IGetTextPrice } from '@/core/gemxql';
 import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
+import type { IGetTextPrice } from '../../../core/gemxql';
 export declare const processPathAnalytics: (analyticsData: IBasePathAnalyticPageWithParent[] | undefined, locationPath: string) => IBasePathAnalyticPageWithChild | undefined;
 export declare const processPathAnalyticsTree: (analyticsData: IBasePathAnalyticPageWithParent[] | undefined) => IBasePathAnalyticPageWithChild[] | undefined;
 export declare const getFunnelChildrenPages: (page: IBasePathAnalyticPageWithChild | undefined) => IBasePathAnalyticPageWithChild[];

package/dist/esm/components/CardPathAnalysis/helpers/pathAnalysis.js

@@ -0,0 +1,80 @@
+import { PAGE_ANALYTIC_MAPPING } from '../../../modules/analytics/constants/index.js';
+import { IPAMetricKey } from '../../../modules/analytics/types/index.js';
+import { formatMetricByFormatter } from '../../../modules/analytics/utils/formatMetric.js';
+import { getPAMetricValueV2 } from '../../../modules/analytics/utils/getPAMetricValue.js';
+import { numberWithCommas } from '../../../utils/number.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import { parseTemplateType } from '../../../utils/template-type.js';
+import { removeDuplicates, buildTree } from './treeUtils.js';
+
+const processPathAnalytics = (analyticsData, locationPath) => {
+    if (!analyticsData)
+        return undefined;
+    const dataTree = processPathAnalyticsTree(analyticsData);
+    return dataTree?.find((item) => item.id === locationPath);
+};
+const processPathAnalyticsTree = (analyticsData) => {
+    if (!analyticsData)
+        return undefined;
+    const uniqueData = removeDuplicates(analyticsData, ['id', 'parentID', 'level', 'locationPath']);
+    const updateData = uniqueData.map((item) => ({
+        ...item,
+        metric: item?.metric,
+    }));
+    const dataTree = buildTree(updateData);
+    return dataTree;
+};
+const getFunnelChildrenPages = (page) => {
+    if (!page || !page.children) {
+        return [];
+    }
+    return page.children
+        .filter((child) => child.id)
+        .map((child) => ({
+        ...child,
+        children: getFunnelChildrenPages(child),
+    }));
+};
+const getFunnelChartTooltip = (data) => {
+    const CONTINUATION_SESSIONS_KEY = 'CONTINUATION_SESSIONS_KEY';
+    const keys = [
+        IPAMetricKey.PAGE_SESSIONS,
+        CONTINUATION_SESSIONS_KEY,
+        IPAMetricKey.PAGE_VISITORS,
+        IPAMetricKey.PAGE_BR,
+        IPAMetricKey.PAGE_CTR,
+    ];
+    const { page, getTextPrice } = data;
+    if (!page)
+        return [];
+    const metric = page.metric;
+    const totalContinuationSession = numberWithCommas((page.metric?.totalContinuationSession || 0).toString());
+    const baseInfo = [
+        {
+            key: page.pageTitle || parseTemplateType(page.pageType),
+            value: page.locationPath,
+        },
+    ];
+    const metricInfo = keys.map((key) => {
+        if (key === CONTINUATION_SESSIONS_KEY) {
+            return {
+                key: 'Continuation sessions',
+                value: totalContinuationSession,
+            };
+        }
+        const metricKey = key;
+        const value = getPAMetricValueV2(metric, metricKey);
+        return {
+            key: PAGE_ANALYTIC_MAPPING[metricKey].heading.title,
+            value: formatMetricByFormatter({
+                value: value.value,
+                formatter: value.formatter,
+                getTextPrice,
+            }),
+        };
+    });
+    return baseInfo.concat(metricInfo);
+};
+
+export { getFunnelChartTooltip, getFunnelChildrenPages, processPathAnalytics, processPathAnalyticsTree };

package/dist/esm/components/CardPathAnalysis/helpers/pathAnalysis.mjs

@@ -0,0 +1,80 @@
+import { PAGE_ANALYTIC_MAPPING } from '../../../modules/analytics/constants/index.mjs';
+import { IPAMetricKey } from '../../../modules/analytics/types/index.mjs';
+import { formatMetricByFormatter } from '../../../modules/analytics/utils/formatMetric.mjs';
+import { getPAMetricValueV2 } from '../../../modules/analytics/utils/getPAMetricValue.mjs';
+import { numberWithCommas } from '../../../utils/number.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import { parseTemplateType } from '../../../utils/template-type.mjs';
+import { removeDuplicates, buildTree } from './treeUtils.mjs';
+
+const processPathAnalytics = (analyticsData, locationPath) => {
+    if (!analyticsData)
+        return undefined;
+    const dataTree = processPathAnalyticsTree(analyticsData);
+    return dataTree?.find((item) => item.id === locationPath);
+};
+const processPathAnalyticsTree = (analyticsData) => {
+    if (!analyticsData)
+        return undefined;
+    const uniqueData = removeDuplicates(analyticsData, ['id', 'parentID', 'level', 'locationPath']);
+    const updateData = uniqueData.map((item) => ({
+        ...item,
+        metric: item?.metric,
+    }));
+    const dataTree = buildTree(updateData);
+    return dataTree;
+};
+const getFunnelChildrenPages = (page) => {
+    if (!page || !page.children) {
+        return [];
+    }
+    return page.children
+        .filter((child) => child.id)
+        .map((child) => ({
+        ...child,
+        children: getFunnelChildrenPages(child),
+    }));
+};
+const getFunnelChartTooltip = (data) => {
+    const CONTINUATION_SESSIONS_KEY = 'CONTINUATION_SESSIONS_KEY';
+    const keys = [
+        IPAMetricKey.PAGE_SESSIONS,
+        CONTINUATION_SESSIONS_KEY,
+        IPAMetricKey.PAGE_VISITORS,
+        IPAMetricKey.PAGE_BR,
+        IPAMetricKey.PAGE_CTR,
+    ];
+    const { page, getTextPrice } = data;
+    if (!page)
+        return [];
+    const metric = page.metric;
+    const totalContinuationSession = numberWithCommas((page.metric?.totalContinuationSession || 0).toString());
+    const baseInfo = [
+        {
+            key: page.pageTitle || parseTemplateType(page.pageType),
+            value: page.locationPath,
+        },
+    ];
+    const metricInfo = keys.map((key) => {
+        if (key === CONTINUATION_SESSIONS_KEY) {
+            return {
+                key: 'Continuation sessions',
+                value: totalContinuationSession,
+            };
+        }
+        const metricKey = key;
+        const value = getPAMetricValueV2(metric, metricKey);
+        return {
+            key: PAGE_ANALYTIC_MAPPING[metricKey].heading.title,
+            value: formatMetricByFormatter({
+                value: value.value,
+                formatter: value.formatter,
+                getTextPrice,
+            }),
+        };
+    });
+    return baseInfo.concat(metricInfo);
+};
+
+export { getFunnelChartTooltip, getFunnelChildrenPages, processPathAnalytics, processPathAnalyticsTree };

package/dist/esm/components/CardPathAnalysis/helpers/pathAnalysisChart.js

@@ -0,0 +1,81 @@
+import { getTotalSessionWithCartAdditionMetric, getTotalSessionReachedCheckoutMetric, getTotalSessionCompletedCheckoutMetric } from './metricHelpers.js';
+import { formatPercentage } from '../../../utils/percentage.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+
+const calculateFunnelTrendChange = ({ currentValue, previousValue, }) => {
+    const shouldSkipComparison = typeof currentValue !== 'number' || typeof previousValue !== 'number' || previousValue === 0;
+    if (shouldSkipComparison)
+        return {};
+    const changePercentage = ((currentValue - previousValue) / previousValue) * 100;
+    const formattedChange = formatPercentage(Math.abs(changePercentage));
+    const trend = changePercentage > 0 ? 'positive' : changePercentage < 0 ? 'negative' : 'neutral';
+    const direction = changePercentage > 0 ? 'upward' : changePercentage < 0 ? 'downward' : undefined;
+    return { value: formattedChange, trend, direction };
+};
+const calculateFirstLevelTrend = ({ pageWithMetric, previousPathAnalyticsMap, }) => {
+    if (!pageWithMetric)
+        return null;
+    const currentValue = pageWithMetric?.metric?.totalSessions ?? undefined;
+    const previousValue = previousPathAnalyticsMap[`${pageWithMetric?.id}`]?.metric?.totalSessions ?? undefined;
+    return calculateFunnelTrendChange({ currentValue, previousValue });
+};
+const calculateDynamicLevelsTrends = (dynamicLevels, previousPathAnalyticsMap) => {
+    const trends = {};
+    dynamicLevels.forEach((level, index) => {
+        const levelPreviousData = previousPathAnalyticsMap[level.id];
+        const levelTrend = calculateFunnelTrendChange({
+            currentValue: level.metric?.totalSessions ?? undefined,
+            previousValue: levelPreviousData?.metric?.totalSessions ?? undefined,
+        });
+        trends[`${index + 1}`] = levelTrend;
+    });
+    return trends;
+};
+const calculateConversionMetricsTrends = (dynamicLevels, previousPathAnalyticsMap, pageWithMetric) => {
+    const lastLevel = dynamicLevels[dynamicLevels.length - 1] || pageWithMetric;
+    const lastLevelPreviousData = previousPathAnalyticsMap[lastLevel.id];
+    const metric = lastLevel?.metric;
+    const previousMetric = lastLevelPreviousData?.metric;
+    const totalAddedToCart = getTotalSessionWithCartAdditionMetric({ metric }).value ?? 0;
+    const totalReachedCheckout = getTotalSessionReachedCheckoutMetric({ metric }).value ?? 0;
+    const totalCompletedCheckout = getTotalSessionCompletedCheckoutMetric({ metric }).value ?? 0;
+    const totalAddedToCartPrevious = getTotalSessionWithCartAdditionMetric({ metric: previousMetric }).value ?? 0;
+    const totalReachedCheckoutPrevious = getTotalSessionReachedCheckoutMetric({ metric: previousMetric }).value ?? 0;
+    const totalCompletedCheckoutPrevious = getTotalSessionCompletedCheckoutMetric({ metric: previousMetric }).value ?? 0;
+    const trends = {};
+    const conversionLevelIndex = dynamicLevels.length + 1;
+    const cartTrend = calculateFunnelTrendChange({
+        currentValue: Number(totalAddedToCart ?? 0),
+        previousValue: Number(totalAddedToCartPrevious ?? 0),
+    });
+    const checkoutTrend = calculateFunnelTrendChange({
+        currentValue: Number(totalReachedCheckout ?? 0),
+        previousValue: Number(totalReachedCheckoutPrevious ?? 0),
+    });
+    const completedTrend = calculateFunnelTrendChange({
+        currentValue: Number(totalCompletedCheckout ?? 0),
+        previousValue: Number(totalCompletedCheckoutPrevious ?? 0),
+    });
+    trends[`${conversionLevelIndex}`] = cartTrend;
+    trends[`${conversionLevelIndex + 1}`] = checkoutTrend;
+    trends[`${conversionLevelIndex + 2}`] = completedTrend;
+    return trends;
+};
+const calculateConversionFunnelTrends = ({ pageWithMetric, previousPathAnalyticsMap, dynamicLevels, }) => {
+    const firstLevelTrend = calculateFirstLevelTrend({
+        pageWithMetric,
+        previousPathAnalyticsMap,
+    });
+    if (!firstLevelTrend)
+        return {};
+    const trends = {
+        '0': firstLevelTrend,
+        ...calculateDynamicLevelsTrends(dynamicLevels, previousPathAnalyticsMap),
+        ...calculateConversionMetricsTrends(dynamicLevels, previousPathAnalyticsMap, pageWithMetric),
+    };
+    return trends;
+};
+
+export { calculateConversionFunnelTrends, calculateConversionMetricsTrends, calculateDynamicLevelsTrends, calculateFirstLevelTrend, calculateFunnelTrendChange };