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

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

@@ -0,0 +1,81 @@
+import { getTotalSessionWithCartAdditionMetric, getTotalSessionReachedCheckoutMetric, getTotalSessionCompletedCheckoutMetric } from './metricHelpers.mjs';
+import { formatPercentage } from '../../../utils/percentage.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+
+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 };

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

@@ -0,0 +1,36 @@
+const removeDuplicates = (data, keys) => {
+    if (!Array.isArray(data))
+        return [];
+    return [
+        ...new Map(data.map((item) => [
+            keys.map((key) => item[key]).join('|'),
+            item,
+        ])).values(),
+    ];
+};
+const buildTree = (items) => {
+    const map = {};
+    const tree = [];
+    items.forEach((item) => {
+        if (!item.parentID)
+            return;
+        map[item.parentID] = [...(map[item.parentID] || []), item];
+    });
+    const buildChildren = (parentId, visited) => {
+        const children = map[parentId] || [];
+        return children
+            .filter((child) => child.id !== parentId && !visited.has(child.id))
+            .map((child) => ({
+            ...child,
+            children: buildChildren(child.id, new Set(visited).add(child.id)),
+        }));
+    };
+    items
+        .filter((item) => item.level === 1)
+        .forEach((rootItem) => {
+        tree.push({ ...rootItem, children: buildChildren(rootItem.id, new Set([rootItem.id])) });
+    });
+    return tree;
+};
+
+export { buildTree, removeDuplicates };

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

@@ -0,0 +1,36 @@
+const removeDuplicates = (data, keys) => {
+    if (!Array.isArray(data))
+        return [];
+    return [
+        ...new Map(data.map((item) => [
+            keys.map((key) => item[key]).join('|'),
+            item,
+        ])).values(),
+    ];
+};
+const buildTree = (items) => {
+    const map = {};
+    const tree = [];
+    items.forEach((item) => {
+        if (!item.parentID)
+            return;
+        map[item.parentID] = [...(map[item.parentID] || []), item];
+    });
+    const buildChildren = (parentId, visited) => {
+        const children = map[parentId] || [];
+        return children
+            .filter((child) => child.id !== parentId && !visited.has(child.id))
+            .map((child) => ({
+            ...child,
+            children: buildChildren(child.id, new Set(visited).add(child.id)),
+        }));
+    };
+    items
+        .filter((item) => item.level === 1)
+        .forEach((rootItem) => {
+        tree.push({ ...rootItem, children: buildChildren(rootItem.id, new Set([rootItem.id])) });
+    });
+    return tree;
+};
+
+export { buildTree, removeDuplicates };

package/dist/esm/components/CardPathAnalysis/hooks/usePathAnalysisChart.d.ts

@@ -1,9 +1,10 @@
-import type { IFunnelSelectionItem } from '@/shared/charts/components/GFunnelChart/components/FunnelSelection/type';
-import type { IOnChangeFunnelParams } from '@/shared/charts/components/GFunnelChart/components/types';
+import type { IFunnelSelectionItem } from '../../../shared/charts/components/GFunnelChart/components/FunnelSelection/type';
+import type { IOnChangeFunnelParams } from '../../../shared/charts/components/GFunnelChart/components/types';
 export declare const usePathAnalysisChart: () => {
     lengthDisplayedLevels: number;
     listFunnelSelection: IFunnelSelectionItem[];
     isDisabledAddICon: boolean;
+    hideAddIcon: boolean;
     funnelData: import("@shopify/polaris-viz-core").DataSeries[];
     onDeleteFunnel: (id?: string) => void;
     onAddNextFunnel: (id: string) => void;

package/dist/esm/components/CardPathAnalysis/hooks/usePathAnalysisChart.js

@@ -0,0 +1,240 @@
+import { EMetricKey } from '../../../types/metric.js';
+import { getTotalSessionWithCartAdditionMetric, getTotalSessionReachedCheckoutMetric, getTotalSessionCompletedCheckoutMetric } from '../helpers/metricHelpers.js';
+import { getFunnelChartTooltip } from '../helpers/pathAnalysis.js';
+import { calculateConversionFunnelTrends } from '../helpers/pathAnalysisChart.js';
+import { usePathAnalysisConfig } from '../contexts/PathAnalysisConfigProvider.js';
+import { METRICS_COLUMNS } from '../../../modules/analytics/constants/index.js';
+import { IPAMetricKey } from '../../../modules/analytics/types/index.js';
+import { numberWithCommas } from '../../../utils/number.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import { parseTemplateType } from '../../../utils/template-type.js';
+import { MAX_FUNNEL_ADDITIONAL_LEVEL } from '../configs/index.js';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants/analytic-metric-tooltip.js';
+import '../../../constants/breakdown-targets.js';
+import { useConvertMoneyContext } from '../../../providers/ConvertMoneyProvider.js';
+import '../../../providers/MetricChartProvider.js';
+import '../../../providers/TimezoneProvider.js';
+import { usePathAnalysisContext } from '../contexts/PathAnalysisProvider.js';
+import { DeleteIcon } from '@shopify/polaris-icons';
+import { TemplateType } from '../../../types/template.js';
+import { useTranslation } from 'react-i18next';
+import { useMemo, useCallback } from 'react';
+
+const FUNNEL_NAME = 'Conversion';
+// Checkout pages don't support heatmap viewing
+const NON_HEATMAP_PAGE_TYPES = new Set([TemplateType.CHECKOUT]);
+const usePathAnalysisChart = () => {
+    const { t } = useTranslation();
+    const { getTextPrice } = useConvertMoneyContext();
+    const { heatmap, autoExpandLevels } = usePathAnalysisConfig();
+    const { shopifyPageType, pageWithMetric, nextLevelPages, dynamicLevels, previousPathAnalyticsMap, handleAddNextLevel, handleChangeLevel, getPagesByParentID, handleDeleteLevel, } = usePathAnalysisContext();
+    const orderedPages = useMemo(() => [pageWithMetric, ...dynamicLevels].filter(Boolean), [pageWithMetric, dynamicLevels]);
+    const chartTooltipPrimaryAction = useMemo(() => {
+        if (!heatmap.isEnabledV1)
+            return undefined;
+        return {
+            content: t('View heatmap'),
+            onClick: (item) => {
+                if (!item?.id)
+                    return;
+                const level = orderedPages.findIndex((page) => page?.id === item.id);
+                if (level === -1)
+                    return;
+                heatmap.onView(level, orderedPages);
+            },
+        };
+    }, [heatmap, orderedPages, t]);
+    const lengthDisplayedLevels = dynamicLevels.length;
+    const isDisabledAddICon = !nextLevelPages.length || lengthDisplayedLevels >= MAX_FUNNEL_ADDITIONAL_LEVEL;
+    const lastLevel = useMemo(() => {
+        return dynamicLevels[dynamicLevels.length - 1] || pageWithMetric;
+    }, [dynamicLevels, pageWithMetric]);
+    const getTooltipAction = useCallback((pageType) => {
+        if (pageType && NON_HEATMAP_PAGE_TYPES.has(pageType))
+            return undefined;
+        return chartTooltipPrimaryAction;
+    }, [chartTooltipPrimaryAction]);
+    const onDeleteFunnel = useCallback((id) => {
+        handleDeleteLevel(id);
+    }, [handleDeleteLevel]);
+    const getConversionFunnelData = useCallback((item) => {
+        const metric = item?.metric;
+        const totalAddedToCart = getTotalSessionWithCartAdditionMetric({ metric }).value;
+        const totalReachedCheckout = getTotalSessionReachedCheckoutMetric({ metric }).value;
+        const totalCompletedCheckout = getTotalSessionCompletedCheckoutMetric({ metric }).value;
+        return [
+            {
+                value: Number(totalAddedToCart ?? 0),
+                key: METRICS_COLUMNS[IPAMetricKey.PAGE_ADDED_TO_CART]?.label ?? t('Added to cart'),
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.CART_ADDITION],
+            },
+            {
+                value: Number(totalReachedCheckout ?? 0),
+                key: t('Reached checkout'),
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.REACHED_CHECKOUT],
+            },
+            {
+                value: Number(totalCompletedCheckout ?? 0),
+                key: t('Completed checkout'),
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.COMPLETE_CHECKOUT],
+            },
+        ];
+    }, [t]);
+    const listFunnelDataMiddle = useMemo(() => dynamicLevels.reduce((acc, item) => {
+        const key = parseTemplateType(item?.pageType) + `-${item.id}` || 'unknown';
+        // Current data
+        acc.currentData.push({
+            value: item.metric?.totalSessions || 0,
+            key,
+            parentID: item.parentID,
+            id: item.id,
+            chartTooltip: getFunnelChartTooltip({
+                page: item,
+                getTextPrice,
+            }),
+            chartTooltipPrimaryAction: heatmap.isEnabledV2
+                ? getTooltipAction(item?.pageType ?? undefined)
+                : undefined,
+            // Auto-expand mode is a read-only view: hide the delete (trash) action.
+            secondaryActions: autoExpandLevels
+                ? undefined
+                : [
+                    {
+                        onAction: () => onDeleteFunnel(item.id),
+                        icon: DeleteIcon,
+                    },
+                ],
+            title: item.pageTitle ?? undefined,
+        });
+        // Previous data
+        acc.previousData.push({
+            value: previousPathAnalyticsMap[item.id]?.metric?.totalSessions || 0,
+            key,
+            title: item.pageTitle ?? undefined,
+        });
+        return acc;
+    }, { currentData: [], previousData: [] }), [
+        dynamicLevels,
+        previousPathAnalyticsMap,
+        onDeleteFunnel,
+        getTextPrice,
+        getTooltipAction,
+        heatmap.isEnabledV2,
+        autoExpandLevels,
+    ]);
+    const lastLevelPreviousData = previousPathAnalyticsMap[lastLevel?.id ?? ''];
+    const funnelData = useMemo(() => {
+        const firstLevelKey = pageWithMetric?.pageTitle ||
+            parseTemplateType(pageWithMetric?.pageType ?? shopifyPageType) ||
+            'unknown';
+        return [
+            {
+                data: [
+                    {
+                        value: pageWithMetric?.metric?.totalSessions || 0,
+                        key: firstLevelKey,
+                        title: pageWithMetric?.pageTitle,
+                        id: pageWithMetric?.id,
+                        chartTooltip: getFunnelChartTooltip({ page: pageWithMetric, getTextPrice }),
+                        chartTooltipPrimaryAction: getTooltipAction(pageWithMetric?.pageType ?? undefined),
+                    },
+                    ...listFunnelDataMiddle.currentData,
+                    ...getConversionFunnelData(lastLevel),
+                ],
+                name: FUNNEL_NAME,
+                metadata: {
+                    trends: calculateConversionFunnelTrends({
+                        pageWithMetric,
+                        previousPathAnalyticsMap,
+                        dynamicLevels,
+                    }),
+                },
+            },
+            {
+                name: FUNNEL_NAME,
+                data: [
+                    {
+                        value: previousPathAnalyticsMap[pageWithMetric?.id || '']?.metric?.totalSessions || 0,
+                        key: firstLevelKey,
+                    },
+                    ...listFunnelDataMiddle.previousData,
+                    ...getConversionFunnelData(lastLevelPreviousData),
+                ],
+                isComparison: true,
+                isEmptyData: !lastLevelPreviousData || lastLevelPreviousData.metric?.totalSessions === 0,
+            },
+        ];
+    }, [
+        dynamicLevels,
+        pageWithMetric,
+        shopifyPageType,
+        getTextPrice,
+        previousPathAnalyticsMap,
+        listFunnelDataMiddle,
+        getConversionFunnelData,
+        lastLevel,
+        lastLevelPreviousData,
+        getTooltipAction,
+    ]);
+    const formatFunnelSelection = (item) => {
+        const childrenSessions = item.metric?.totalSessions || 0;
+        return {
+            id: item.id,
+            title: item.pageTitle || parseTemplateType(item.pageType),
+            path: item.locationPath ?? undefined,
+            percentage: numberWithCommas(childrenSessions.toString()),
+            parentID: item.parentID,
+        };
+    };
+    const sortByPercentage = (a, b) => {
+        const numericPattern = /[^0-9.-]/g;
+        const aPercentage = Number(a.percentage.replace(numericPattern, ''));
+        const bPercentage = Number(b.percentage.replace(numericPattern, ''));
+        return bPercentage - aPercentage;
+    };
+    // const sortByTitle = (a: IFunnelSelectionItem, b: IFunnelSelectionItem) => {
+    //   const aTitle = a.title || '';
+    //   const bTitle = b.title || '';
+    //   return aTitle.localeCompare(bTitle);
+    // };
+    //list funnel selection to add new funnel
+    const listFunnelSelection = useMemo(() => {
+        if (!nextLevelPages)
+            return [];
+        return nextLevelPages.map(formatFunnelSelection).sort(sortByPercentage);
+    }, [nextLevelPages]);
+    //list funnel selection to change funnel
+    const getListFunnelByID = (data) => {
+        // Auto-expand mode is read-only: collapse the change-path popover to a static label.
+        if (autoExpandLevels)
+            return [];
+        const { level, parentID } = data;
+        const availableChildPages = getPagesByParentID({ level, parentID });
+        // if (level === 0) {
+        //   return availableChildPages.map(formatFunnelSelection).sort(sortByTitle);
+        // }
+        return availableChildPages.map(formatFunnelSelection).sort(sortByPercentage);
+    };
+    const onAddNextFunnel = (id) => {
+        handleAddNextLevel(id);
+    };
+    const onChangeFunnel = (data) => {
+        if (!data.selectedID)
+            return;
+        handleChangeLevel(data);
+    };
+    return {
+        lengthDisplayedLevels,
+        listFunnelSelection,
+        isDisabledAddICon,
+        hideAddIcon: !!autoExpandLevels,
+        funnelData,
+        onDeleteFunnel,
+        onAddNextFunnel,
+        onChangeFunnel,
+        getListFunnelByID,
+    };
+};
+
+export { usePathAnalysisChart };

package/dist/esm/components/CardPathAnalysis/hooks/usePathAnalysisChart.mjs

@@ -0,0 +1,240 @@
+import { EMetricKey } from '../../../types/metric.mjs';
+import { getTotalSessionWithCartAdditionMetric, getTotalSessionReachedCheckoutMetric, getTotalSessionCompletedCheckoutMetric } from '../helpers/metricHelpers.mjs';
+import { getFunnelChartTooltip } from '../helpers/pathAnalysis.mjs';
+import { calculateConversionFunnelTrends } from '../helpers/pathAnalysisChart.mjs';
+import { usePathAnalysisConfig } from '../contexts/PathAnalysisConfigProvider.mjs';
+import { METRICS_COLUMNS } from '../../../modules/analytics/constants/index.mjs';
+import { IPAMetricKey } from '../../../modules/analytics/types/index.mjs';
+import { numberWithCommas } from '../../../utils/number.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import { parseTemplateType } from '../../../utils/template-type.mjs';
+import { MAX_FUNNEL_ADDITIONAL_LEVEL } from '../configs/index.mjs';
+import { ANALYTICS_METRIC_TOOLTIP } from '../../../constants/analytic-metric-tooltip.mjs';
+import '../../../constants/breakdown-targets.mjs';
+import { useConvertMoneyContext } from '../../../providers/ConvertMoneyProvider.mjs';
+import '../../../providers/MetricChartProvider.mjs';
+import '../../../providers/TimezoneProvider.mjs';
+import { usePathAnalysisContext } from '../contexts/PathAnalysisProvider.mjs';
+import { DeleteIcon } from '@shopify/polaris-icons';
+import { TemplateType } from '../../../types/template.mjs';
+import { useTranslation } from 'react-i18next';
+import { useMemo, useCallback } from 'react';
+
+const FUNNEL_NAME = 'Conversion';
+// Checkout pages don't support heatmap viewing
+const NON_HEATMAP_PAGE_TYPES = new Set([TemplateType.CHECKOUT]);
+const usePathAnalysisChart = () => {
+    const { t } = useTranslation();
+    const { getTextPrice } = useConvertMoneyContext();
+    const { heatmap, autoExpandLevels } = usePathAnalysisConfig();
+    const { shopifyPageType, pageWithMetric, nextLevelPages, dynamicLevels, previousPathAnalyticsMap, handleAddNextLevel, handleChangeLevel, getPagesByParentID, handleDeleteLevel, } = usePathAnalysisContext();
+    const orderedPages = useMemo(() => [pageWithMetric, ...dynamicLevels].filter(Boolean), [pageWithMetric, dynamicLevels]);
+    const chartTooltipPrimaryAction = useMemo(() => {
+        if (!heatmap.isEnabledV1)
+            return undefined;
+        return {
+            content: t('View heatmap'),
+            onClick: (item) => {
+                if (!item?.id)
+                    return;
+                const level = orderedPages.findIndex((page) => page?.id === item.id);
+                if (level === -1)
+                    return;
+                heatmap.onView(level, orderedPages);
+            },
+        };
+    }, [heatmap, orderedPages, t]);
+    const lengthDisplayedLevels = dynamicLevels.length;
+    const isDisabledAddICon = !nextLevelPages.length || lengthDisplayedLevels >= MAX_FUNNEL_ADDITIONAL_LEVEL;
+    const lastLevel = useMemo(() => {
+        return dynamicLevels[dynamicLevels.length - 1] || pageWithMetric;
+    }, [dynamicLevels, pageWithMetric]);
+    const getTooltipAction = useCallback((pageType) => {
+        if (pageType && NON_HEATMAP_PAGE_TYPES.has(pageType))
+            return undefined;
+        return chartTooltipPrimaryAction;
+    }, [chartTooltipPrimaryAction]);
+    const onDeleteFunnel = useCallback((id) => {
+        handleDeleteLevel(id);
+    }, [handleDeleteLevel]);
+    const getConversionFunnelData = useCallback((item) => {
+        const metric = item?.metric;
+        const totalAddedToCart = getTotalSessionWithCartAdditionMetric({ metric }).value;
+        const totalReachedCheckout = getTotalSessionReachedCheckoutMetric({ metric }).value;
+        const totalCompletedCheckout = getTotalSessionCompletedCheckoutMetric({ metric }).value;
+        return [
+            {
+                value: Number(totalAddedToCart ?? 0),
+                key: METRICS_COLUMNS[IPAMetricKey.PAGE_ADDED_TO_CART]?.label ?? t('Added to cart'),
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.CART_ADDITION],
+            },
+            {
+                value: Number(totalReachedCheckout ?? 0),
+                key: t('Reached checkout'),
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.REACHED_CHECKOUT],
+            },
+            {
+                value: Number(totalCompletedCheckout ?? 0),
+                key: t('Completed checkout'),
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.COMPLETE_CHECKOUT],
+            },
+        ];
+    }, [t]);
+    const listFunnelDataMiddle = useMemo(() => dynamicLevels.reduce((acc, item) => {
+        const key = parseTemplateType(item?.pageType) + `-${item.id}` || 'unknown';
+        // Current data
+        acc.currentData.push({
+            value: item.metric?.totalSessions || 0,
+            key,
+            parentID: item.parentID,
+            id: item.id,
+            chartTooltip: getFunnelChartTooltip({
+                page: item,
+                getTextPrice,
+            }),
+            chartTooltipPrimaryAction: heatmap.isEnabledV2
+                ? getTooltipAction(item?.pageType ?? undefined)
+                : undefined,
+            // Auto-expand mode is a read-only view: hide the delete (trash) action.
+            secondaryActions: autoExpandLevels
+                ? undefined
+                : [
+                    {
+                        onAction: () => onDeleteFunnel(item.id),
+                        icon: DeleteIcon,
+                    },
+                ],
+            title: item.pageTitle ?? undefined,
+        });
+        // Previous data
+        acc.previousData.push({
+            value: previousPathAnalyticsMap[item.id]?.metric?.totalSessions || 0,
+            key,
+            title: item.pageTitle ?? undefined,
+        });
+        return acc;
+    }, { currentData: [], previousData: [] }), [
+        dynamicLevels,
+        previousPathAnalyticsMap,
+        onDeleteFunnel,
+        getTextPrice,
+        getTooltipAction,
+        heatmap.isEnabledV2,
+        autoExpandLevels,
+    ]);
+    const lastLevelPreviousData = previousPathAnalyticsMap[lastLevel?.id ?? ''];
+    const funnelData = useMemo(() => {
+        const firstLevelKey = pageWithMetric?.pageTitle ||
+            parseTemplateType(pageWithMetric?.pageType ?? shopifyPageType) ||
+            'unknown';
+        return [
+            {
+                data: [
+                    {
+                        value: pageWithMetric?.metric?.totalSessions || 0,
+                        key: firstLevelKey,
+                        title: pageWithMetric?.pageTitle,
+                        id: pageWithMetric?.id,
+                        chartTooltip: getFunnelChartTooltip({ page: pageWithMetric, getTextPrice }),
+                        chartTooltipPrimaryAction: getTooltipAction(pageWithMetric?.pageType ?? undefined),
+                    },
+                    ...listFunnelDataMiddle.currentData,
+                    ...getConversionFunnelData(lastLevel),
+                ],
+                name: FUNNEL_NAME,
+                metadata: {
+                    trends: calculateConversionFunnelTrends({
+                        pageWithMetric,
+                        previousPathAnalyticsMap,
+                        dynamicLevels,
+                    }),
+                },
+            },
+            {
+                name: FUNNEL_NAME,
+                data: [
+                    {
+                        value: previousPathAnalyticsMap[pageWithMetric?.id || '']?.metric?.totalSessions || 0,
+                        key: firstLevelKey,
+                    },
+                    ...listFunnelDataMiddle.previousData,
+                    ...getConversionFunnelData(lastLevelPreviousData),
+                ],
+                isComparison: true,
+                isEmptyData: !lastLevelPreviousData || lastLevelPreviousData.metric?.totalSessions === 0,
+            },
+        ];
+    }, [
+        dynamicLevels,
+        pageWithMetric,
+        shopifyPageType,
+        getTextPrice,
+        previousPathAnalyticsMap,
+        listFunnelDataMiddle,
+        getConversionFunnelData,
+        lastLevel,
+        lastLevelPreviousData,
+        getTooltipAction,
+    ]);
+    const formatFunnelSelection = (item) => {
+        const childrenSessions = item.metric?.totalSessions || 0;
+        return {
+            id: item.id,
+            title: item.pageTitle || parseTemplateType(item.pageType),
+            path: item.locationPath ?? undefined,
+            percentage: numberWithCommas(childrenSessions.toString()),
+            parentID: item.parentID,
+        };
+    };
+    const sortByPercentage = (a, b) => {
+        const numericPattern = /[^0-9.-]/g;
+        const aPercentage = Number(a.percentage.replace(numericPattern, ''));
+        const bPercentage = Number(b.percentage.replace(numericPattern, ''));
+        return bPercentage - aPercentage;
+    };
+    // const sortByTitle = (a: IFunnelSelectionItem, b: IFunnelSelectionItem) => {
+    //   const aTitle = a.title || '';
+    //   const bTitle = b.title || '';
+    //   return aTitle.localeCompare(bTitle);
+    // };
+    //list funnel selection to add new funnel
+    const listFunnelSelection = useMemo(() => {
+        if (!nextLevelPages)
+            return [];
+        return nextLevelPages.map(formatFunnelSelection).sort(sortByPercentage);
+    }, [nextLevelPages]);
+    //list funnel selection to change funnel
+    const getListFunnelByID = (data) => {
+        // Auto-expand mode is read-only: collapse the change-path popover to a static label.
+        if (autoExpandLevels)
+            return [];
+        const { level, parentID } = data;
+        const availableChildPages = getPagesByParentID({ level, parentID });
+        // if (level === 0) {
+        //   return availableChildPages.map(formatFunnelSelection).sort(sortByTitle);
+        // }
+        return availableChildPages.map(formatFunnelSelection).sort(sortByPercentage);
+    };
+    const onAddNextFunnel = (id) => {
+        handleAddNextLevel(id);
+    };
+    const onChangeFunnel = (data) => {
+        if (!data.selectedID)
+            return;
+        handleChangeLevel(data);
+    };
+    return {
+        lengthDisplayedLevels,
+        listFunnelSelection,
+        isDisabledAddICon,
+        hideAddIcon: !!autoExpandLevels,
+        funnelData,
+        onDeleteFunnel,
+        onAddNextFunnel,
+        onChangeFunnel,
+        getListFunnelByID,
+    };
+};
+
+export { usePathAnalysisChart };

package/dist/esm/components/CardPathAnalysis/hooks/usePathAnalysisFunnel.d.ts

@@ -1,4 +1,4 @@
-import type { IOnChangeFunnelParams } from '@/shared/charts/components/GFunnelChart/components/types';
+import type { IOnChangeFunnelParams } from '../../../shared/charts/components/GFunnelChart/components/types';
 import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
 import type { IPathAnalysisFirstLevel } from '../contexts';
 interface IUsePathAnalysisFunnelProps {
@@ -6,8 +6,9 @@ interface IUsePathAnalysisFunnelProps {
     pathAnalysisCacheKey: string;
     dataFirstLevels?: IPathAnalysisFirstLevel[];
     locationPath?: string;
+    autoExpandLevels?: boolean;
 }
-export declare const usePathAnalysisFunnel: ({ pathAnalytics, pathAnalysisCacheKey, dataFirstLevels, locationPath, }: IUsePathAnalysisFunnelProps) => {
+export declare const usePathAnalysisFunnel: ({ pathAnalytics, pathAnalysisCacheKey, dataFirstLevels, locationPath, autoExpandLevels, }: IUsePathAnalysisFunnelProps) => {
     pageWithMetric: IBasePathAnalyticPageWithChild | undefined;
     dynamicLevels: IBasePathAnalyticPageWithChild[];
     nextLevelPages: IBasePathAnalyticPageWithChild[];