@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

package/src/components/CardPathAnalysis/helpers/treeUtils.ts

@@ -0,0 +1,38 @@
+export const removeDuplicates = <T extends object>(data: T[] | undefined, keys: (keyof T)[]): T[] => {
+  if (!Array.isArray(data)) return [];
+  return [
+    ...new Map(
+      data.map((item) => [keys.map((key) => (item as Record<string, unknown>)[key as string]).join('|'), item]),
+    ).values(),
+  ];
+};
+
+export const buildTree = <T extends { id: string; parentID: string; children?: T[]; level?: number | null }>(
+  items: T[],
+): T[] => {
+  const map: Record<string, T[]> = {};
+  const tree: T[] = [];
+
+  items.forEach((item) => {
+    if (!item.parentID) return;
+    map[item.parentID] = [...(map[item.parentID] || []), item];
+  });
+
+  const buildChildren = (parentId: string, visited: Set<string>): T[] => {
+    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;
+};

package/src/components/CardPathAnalysis/hooks/usePathAnalysisChart.tsx

@@ -0,0 +1,292 @@
+import type { GDataPoint, GVizFunnelChartProps } from '@/shared/charts';
+import type { IFunnelSelectionItem } from '@/shared/charts/components/GFunnelChart/components/FunnelSelection/type';
+import type { IOnChangeFunnelParams } from '@/shared/charts/components/GFunnelChart/components/types';
+import { EMetricKey, type IBasePageAnalyticMetric } from '@/types/metric';
+import type { IBasePathAnalyticPageWithChild } from '../types';
+
+import { IPAMetricKey, METRICS_COLUMNS } from '@/modules/analytics';
+import { useConvertMoneyContext } from '@/providers';
+import { TemplateType } from '@/types/template';
+import { numberWithCommas, parseTemplateType } from '@/utils';
+import { DeleteIcon } from '@shopify/polaris-icons';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MAX_FUNNEL_ADDITIONAL_LEVEL } from '../configs';
+import { usePathAnalysisContext } from '../contexts';
+import { usePathAnalysisConfig } from '../contexts/PathAnalysisConfigProvider';
+import { calculateConversionFunnelTrends, getFunnelChartTooltip } from '../helpers';
+import {
+  getTotalSessionCompletedCheckoutMetric,
+  getTotalSessionReachedCheckoutMetric,
+  getTotalSessionWithCartAdditionMetric,
+} from '../helpers/metricHelpers';
+import { ANALYTICS_METRIC_TOOLTIP } from '@/constants';
+
+const FUNNEL_NAME = 'Conversion';
+// Checkout pages don't support heatmap viewing
+const NON_HEATMAP_PAGE_TYPES = new Set<string>([TemplateType.CHECKOUT]);
+
+export 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?: GDataPoint) => {
+        if (!item?.id) return;
+
+        const level = orderedPages.findIndex((page) => page?.id === item.id);
+        if (level === -1) return;
+
+        heatmap.onView(level, orderedPages as IBasePathAnalyticPageWithChild[]);
+      },
+    };
+  }, [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?: string) => {
+      if (pageType && NON_HEATMAP_PAGE_TYPES.has(pageType)) return undefined;
+      return chartTooltipPrimaryAction;
+    },
+    [chartTooltipPrimaryAction],
+  );
+
+  const onDeleteFunnel = useCallback(
+    (id?: string) => {
+      handleDeleteLevel(id);
+    },
+    [handleDeleteLevel],
+  );
+
+  const getConversionFunnelData = useCallback(
+    (item?: IBasePathAnalyticPageWithChild) => {
+      const metric = item?.metric as IBasePageAnalyticMetric;
+
+      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 as TemplateType) + `-${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: [] as GDataPoint[], previousData: [] as GDataPoint[] },
+      ),
+    [
+      dynamicLevels,
+      previousPathAnalyticsMap,
+      onDeleteFunnel,
+      getTextPrice,
+      getTooltipAction,
+      heatmap.isEnabledV2,
+      autoExpandLevels,
+    ],
+  );
+  const lastLevelPreviousData = previousPathAnalyticsMap[lastLevel?.id ?? ''];
+  const funnelData = useMemo<GVizFunnelChartProps['data']>(() => {
+    const firstLevelKey =
+      pageWithMetric?.pageTitle ||
+      parseTemplateType((pageWithMetric?.pageType as TemplateType) ?? 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: IBasePathAnalyticPageWithChild): IFunnelSelectionItem => {
+    const childrenSessions = item.metric?.totalSessions || 0;
+
+    return {
+      id: item.id,
+      title: item.pageTitle || parseTemplateType(item.pageType as TemplateType),
+      path: item.locationPath ?? undefined,
+      percentage: numberWithCommas(childrenSessions.toString()),
+      parentID: item.parentID,
+    };
+  };
+
+  const sortByPercentage = (a: IFunnelSelectionItem, b: IFunnelSelectionItem) => {
+    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((): IFunnelSelectionItem[] => {
+    if (!nextLevelPages) return [];
+    return nextLevelPages.map(formatFunnelSelection).sort(sortByPercentage);
+  }, [nextLevelPages]);
+
+  //list funnel selection to change funnel
+  const getListFunnelByID = (data: { level?: number; parentID?: string }): IFunnelSelectionItem[] => {
+    // 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: string) => {
+    handleAddNextLevel(id);
+  };
+
+  const onChangeFunnel = (data: IOnChangeFunnelParams) => {
+    if (!data.selectedID) return;
+    handleChangeLevel(data);
+  };
+
+  return {
+    lengthDisplayedLevels,
+    listFunnelSelection,
+    isDisabledAddICon,
+    hideAddIcon: !!autoExpandLevels,
+    funnelData,
+    onDeleteFunnel,
+    onAddNextFunnel,
+    onChangeFunnel,
+    getListFunnelByID,
+  };
+};

package/src/components/CardPathAnalysis/hooks/usePathAnalysisFunnel.ts

@@ -0,0 +1,206 @@
+import type { IOnChangeFunnelParams } from '@/shared/charts/components/GFunnelChart/components/types';
+import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
+import type { IPathAnalysisFirstLevel } from '../contexts';
+
+import { processPathAnalytics, processPathAnalyticsTree } from '../helpers/pathAnalysis';
+import { useFunnelChartStore, usePathAnalysisStore } from '../stores';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { MAX_FUNNEL_ADDITIONAL_LEVEL } from '../configs';
+import { getFunnelChildrenPages } from '../helpers';
+
+interface IUsePathAnalysisFunnelProps {
+  pathAnalytics: IBasePathAnalyticPageWithParent[];
+  pathAnalysisCacheKey: string;
+  dataFirstLevels?: IPathAnalysisFirstLevel[];
+  locationPath?: string;
+  autoExpandLevels?: boolean;
+}
+
+export const usePathAnalysisFunnel = ({
+  pathAnalytics,
+  pathAnalysisCacheKey,
+  dataFirstLevels,
+  locationPath,
+  autoExpandLevels,
+}: IUsePathAnalysisFunnelProps) => {
+  const setFirstLevelLocationPath = usePathAnalysisStore((state) => state.setFirstLevelLocationPath);
+  const firstLevelLocationPath = usePathAnalysisStore((state) => state.firstLevelLocationPath) || locationPath;
+
+  const setCachedFunnelChartData = useFunnelChartStore((state) => state.setCachedFunnelChartData);
+  const resetCachedFunnelChartData = useFunnelChartStore((state) => state.resetData);
+  const cachedFunnelChartData = useFunnelChartStore((state) => state.cachedFunnelChartData);
+
+  const [firstLevelPage, setFirstLevelPage] = useState<string | undefined>(undefined);
+  const [dynamicLevels, setDynamicLevels] = useState<IBasePathAnalyticPageWithChild[]>([]);
+
+  const dataTree = useMemo(() => processPathAnalyticsTree(pathAnalytics), [pathAnalytics]);
+
+  const listPageAnalyticFirstLevel = useMemo(() => {
+    return dataTree?.filter((item) => item.level === 1 && item.id) || [];
+  }, [dataTree]);
+
+  //pageWithMetric: Build path tree by level 1
+  const pageWithMetric = useMemo(
+    () => processPathAnalytics(pathAnalytics, firstLevelPage || ''),
+    [pathAnalytics, firstLevelPage],
+  );
+
+  const nextLevelPages = useMemo(() => {
+    const lastLevel = dynamicLevels[dynamicLevels.length - 1] || pageWithMetric;
+    const nextLevelPages = getFunnelChildrenPages(lastLevel);
+    return nextLevelPages;
+  }, [dynamicLevels, pageWithMetric]);
+
+  const handleSetFirstLevelPage = (path: string) => {
+    setFirstLevelPage(path);
+
+    const cachedData = cachedFunnelChartData[pathAnalysisCacheKey];
+    setDynamicLevels(cachedData?.dynamicLevels || []);
+  };
+
+  const handleAddNextLevel = useCallback(
+    (childId: string) => {
+      if (dynamicLevels.length >= MAX_FUNNEL_ADDITIONAL_LEVEL) {
+        return;
+      }
+      const selectedPage = nextLevelPages.find((page) => page.id === childId);
+      if (selectedPage) {
+        setDynamicLevels((prev) => [...prev, selectedPage]);
+      }
+    },
+    [dynamicLevels.length, nextLevelPages],
+  );
+
+  const getPagesByParentID = (data: { level?: number; parentID?: string }) => {
+    const { level, parentID } = data;
+
+    if (level === 0 && dataTree) {
+      return dataTree;
+    }
+
+    if (!parentID) return [];
+
+    const findCurrentLevel = dynamicLevels.find((item) => item.id === parentID);
+    if (findCurrentLevel) {
+      return findCurrentLevel.children || [];
+    }
+    //Children of first level
+    return pageWithMetric?.children || [];
+  };
+
+  const handleChangeLevel = (data: IOnChangeFunnelParams) => {
+    const { id: newPathId, parentID, selectedID: oldPathId, level, locationPath } = data;
+    //Change first level
+    if (level === 0) {
+      setDynamicLevels([]);
+      setFirstLevelLocationPath(locationPath);
+      setCachedFunnelChartData(pathAnalysisCacheKey, {
+        firstLocationPath: locationPath,
+        dynamicLevels: [],
+      });
+      return;
+    }
+
+    const oldIndex = dynamicLevels.findIndex((level) => level.id === oldPathId);
+    if (oldIndex === -1) return;
+
+    //Remove all levels after oldId
+    const updatedLevels = dynamicLevels.slice(0, oldIndex + 1);
+
+    //Find new page based on newId and parentID
+    const availableChildren = getPagesByParentID({ parentID });
+    const selectedPage = availableChildren.find((page) => page.id === newPathId);
+    if (selectedPage) {
+      //Replace old page with new page
+      updatedLevels[oldIndex] = selectedPage;
+      setDynamicLevels(updatedLevels);
+    }
+  };
+
+  const handleDeleteLevel = (id?: string) => {
+    if (!id) return;
+
+    const index = dynamicLevels.findIndex((level) => level.id === id);
+    if (index === -1) return;
+
+    const updatedLevels = dynamicLevels.slice(0, index);
+    setDynamicLevels(updatedLevels);
+  };
+
+  const updateFirstLevel = () => {
+    if (!listPageAnalyticFirstLevel.length || !firstLevelLocationPath) return;
+
+    const matchingPage = listPageAnalyticFirstLevel.find((page) => page.locationPath === firstLevelLocationPath);
+
+    if (matchingPage?.id) {
+      handleSetFirstLevelPage(matchingPage.id);
+      return;
+    }
+    if (listPageAnalyticFirstLevel[0]?.id) {
+      handleSetFirstLevelPage(listPageAnalyticFirstLevel[0].id);
+    }
+  };
+
+  useEffect(() => {
+    updateFirstLevel();
+  }, [listPageAnalyticFirstLevel, firstLevelLocationPath]);
+
+  useEffect(() => {
+    if (dataFirstLevels && dataFirstLevels.length > 0) {
+      const cachedData = cachedFunnelChartData[pathAnalysisCacheKey];
+      const firstLocationPath = cachedData?.firstLocationPath || dataFirstLevels[0]!.locationPath;
+
+      setFirstLevelLocationPath(firstLocationPath);
+    }
+  }, [dataFirstLevels]);
+
+  useEffect(() => {
+    if (!pathAnalysisCacheKey) return;
+
+    setCachedFunnelChartData(pathAnalysisCacheKey, {
+      dynamicLevels: dynamicLevels,
+    });
+  }, [dynamicLevels]);
+
+  // Auto-expand the dominant path down every level when the flag is enabled:
+  // first level → highest-traffic child → ... up to MAX_FUNNEL_ADDITIONAL_LEVEL,
+  // stopping as soon as a level has no further paths.
+  useEffect(() => {
+    if (!autoExpandLevels || !pageWithMetric) return;
+
+    const expandedLevels: IBasePathAnalyticPageWithChild[] = [];
+    let currentPage: IBasePathAnalyticPageWithChild = pageWithMetric;
+
+    while (expandedLevels.length < MAX_FUNNEL_ADDITIONAL_LEVEL) {
+      const childrenPages = getFunnelChildrenPages(currentPage);
+      if (!childrenPages.length) break;
+
+      // Pick the dominant child (highest sessions) — matches the top of the "+" popover.
+      const nextPage = childrenPages.reduce((prev, curr) =>
+        (curr.metric?.totalSessions || 0) > (prev.metric?.totalSessions || 0) ? curr : prev,
+      );
+
+      expandedLevels.push(nextPage);
+      currentPage = nextPage;
+    }
+
+    setDynamicLevels(expandedLevels);
+  }, [autoExpandLevels, pageWithMetric]);
+
+  useEffect(() => {
+    return () => {
+      setFirstLevelLocationPath(undefined);
+      resetCachedFunnelChartData();
+    };
+  }, []);
+
+  return {
+    pageWithMetric,
+    dynamicLevels,
+    nextLevelPages,
+    handleAddNextLevel,
+    handleChangeLevel,
+    getPagesByParentID,
+    handleDeleteLevel,
+  };
+};

package/src/components/CardPathAnalysis/hooks/usePathAnalyticsMerger.ts

@@ -0,0 +1,43 @@
+import type { PathAnalyticPageSelectFragment } from '@/api/graphql/fragments/pathAnalytic.generated';
+import type { IPathAnalysisFirstLevel } from '../contexts';
+
+import { useMemo } from 'react';
+
+interface IUsePathAnalysisFunnelProps {
+  pathAnalytics: PathAnalyticPageSelectFragment[];
+  dataFirstLevels?: IPathAnalysisFirstLevel[];
+}
+export const usePathAnalyticsMerger = ({ pathAnalytics, dataFirstLevels }: IUsePathAnalysisFunnelProps) => {
+  const { firstLevelData, otherLevelsData } = useMemo(() => {
+    return pathAnalytics.reduce(
+      (acc, item) => {
+        if (item.level === 1) {
+          acc.firstLevelData[item.locationPath ?? ''] = item;
+        } else {
+          acc.otherLevelsData.push(item);
+        }
+        return acc;
+      },
+      {
+        firstLevelData: {} as Record<string, PathAnalyticPageSelectFragment>,
+        otherLevelsData: [] as PathAnalyticPageSelectFragment[],
+      },
+    );
+  }, [pathAnalytics]);
+
+  const processedPathAnalytics = useMemo(() => {
+    if (!dataFirstLevels) return pathAnalytics;
+
+    const mergedFirstLevels: PathAnalyticPageSelectFragment[] = dataFirstLevels.map((item) => {
+      const firstLevelDataItem = firstLevelData[item.locationPath];
+      if (!firstLevelDataItem) {
+        return item as PathAnalyticPageSelectFragment;
+      }
+
+      return firstLevelDataItem;
+    });
+    return [...mergedFirstLevels, ...otherLevelsData];
+  }, [pathAnalytics, dataFirstLevels, firstLevelData, otherLevelsData]);
+
+  return { processedPathAnalytics };
+};

package/src/components/CardPathAnalysis/index.ts

@@ -0,0 +1,5 @@
+export * from './CardJourneyAnalysis';
+export * from './components';
+export * from './contexts';
+export * from './constants';
+export * from './stores';

package/src/components/CardPathAnalysis/stores/funnel-chart.ts

@@ -0,0 +1,30 @@
+import type { IBasePathAnalyticPageWithChild } from '../types';
+
+import { deepCopy } from '@/utils';
+import { create } from 'zustand';
+
+export interface ICachedFunnelChartDataValue {
+  firstLocationPath?: string;
+  dynamicLevels?: IBasePathAnalyticPageWithChild[];
+}
+interface IFunnelChartStoreState {
+  cachedFunnelChartData: Record<string, ICachedFunnelChartDataValue>;
+  setCachedFunnelChartData: (key: string, funnelChartData: ICachedFunnelChartDataValue) => void;
+  resetData: () => void;
+}
+
+export const useFunnelChartStore = create<IFunnelChartStoreState>()((set, get) => ({
+  cachedFunnelChartData: {},
+  setCachedFunnelChartData: (key: string, funnelChartData: ICachedFunnelChartDataValue) => {
+    const currentFunnelChartData = deepCopy(get().cachedFunnelChartData);
+    currentFunnelChartData[key] = {
+      ...currentFunnelChartData[key],
+      ...funnelChartData,
+    };
+
+    set({ cachedFunnelChartData: currentFunnelChartData });
+  },
+  resetData: () => {
+    set({ cachedFunnelChartData: {} });
+  },
+}));

package/src/components/CardPathAnalysis/stores/index.ts

@@ -0,0 +1,3 @@
+export * from './path-analysis';
+export * from './path-analysis-campaign';
+export * from './funnel-chart';

package/src/components/CardPathAnalysis/stores/path-analysis-campaign.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+export enum IVariantType {
+  VARIANT_A = 'A',
+  VARIANT_B = 'B',
+}
+
+interface IPathAnalysisCampaignStoreState {
+  selectedVariantType: IVariantType;
+  setSelectedVariantType: (selectedVariantType: IVariantType) => void;
+}
+
+export const usePathAnalysisCampaignStore = create<IPathAnalysisCampaignStoreState>()((set) => ({
+  selectedVariantType: IVariantType.VARIANT_A,
+  setSelectedVariantType: (selectedVariantType) => set({ selectedVariantType }),
+}));

package/src/components/CardPathAnalysis/stores/path-analysis.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface IPathAnalyticStoreState {
+  firstLevelLocationPath?: string;
+  setFirstLevelLocationPath: (firstLevelLocationPath?: string) => void;
+}
+
+export const usePathAnalysisStore = create<IPathAnalyticStoreState>()((set) => ({
+  firstLevelLocationPath: undefined,
+  setFirstLevelLocationPath: (firstLevelLocationPath) => set({ firstLevelLocationPath }),
+}));

package/src/components/CardPathAnalysis/types/index.ts

@@ -0,0 +1 @@
+export * from './path-analysis';

package/src/components/CardPathAnalysis/types/path-analysis.ts

@@ -0,0 +1,10 @@
+import type {
+  PathAnalyticMetricSelectFragment,
+  PathAnalyticPageSelectFragment,
+} from '@/api/graphql/fragments/pathAnalytic.generated';
+
+export interface IBasePathAnalyticPageWithChild extends PathAnalyticPageSelectFragment {
+  children?: IBasePathAnalyticPageWithChild[];
+  metrics?: PathAnalyticMetricSelectFragment[];
+}
+export type IBasePathAnalyticPageWithParent = PathAnalyticPageSelectFragment;