@levi-gemcommerce/analytics 3.0.1-dev.3 → 3.0.1-dev.4

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

@@ -1,162 +0,0 @@
-export 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',
-} as const;
-
-export 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,
-  },
-];

package/src/components/CardPathAnalysis/contexts/PathAnalysisConfigProvider.tsx

@@ -1,66 +0,0 @@
-import type { ReactNode } from 'react';
-import type { IBasePathAnalyticPageWithChild } from '../types';
-
-import { createContext, useContext, useMemo } from 'react';
-
-export interface IPathAnalysisPricingConfig {
-  isLoading: boolean;
-  isPathAnalysisEnabled: boolean;
-  onOpenModalPricing: () => void;
-}
-
-export interface IPathAnalysisHeatmapConfig {
-  isEnabledV1: boolean;
-  isEnabledV2: boolean;
-  onView: (level: number, pages: IBasePathAnalyticPageWithChild[]) => void;
-}
-
-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;
-}
-
-const DEFAULT_CONFIG: IPathAnalysisConfig = {
-  pricing: {
-    isLoading: false,
-    isPathAnalysisEnabled: false,
-    onOpenModalPricing: () => {},
-  },
-  heatmap: {
-    isEnabledV1: false,
-    isEnabledV2: false,
-    onView: () => {},
-  },
-  autoExpandLevels: false,
-};
-
-const PathAnalysisConfigContext = createContext<IPathAnalysisConfig>(DEFAULT_CONFIG);
-
-export interface IPathAnalysisConfigProviderProps {
-  children: ReactNode;
-  pricing: IPathAnalysisPricingConfig;
-  heatmap: IPathAnalysisHeatmapConfig;
-  autoExpandLevels?: boolean;
-}
-
-export const PathAnalysisConfigProvider = ({
-  children,
-  pricing,
-  heatmap,
-  autoExpandLevels,
-}: IPathAnalysisConfigProviderProps) => {
-  const value = useMemo<IPathAnalysisConfig>(
-    () => ({ pricing, heatmap, autoExpandLevels }),
-    [pricing, heatmap, autoExpandLevels],
-  );
-
-  return <PathAnalysisConfigContext.Provider value={value}>{children}</PathAnalysisConfigContext.Provider>;
-};
-
-export const usePathAnalysisConfig = (): IPathAnalysisConfig => useContext(PathAnalysisConfigContext);

package/src/components/CardPathAnalysis/contexts/PathAnalysisProvider.tsx

@@ -1,130 +0,0 @@
-import type { OnChangeFunnelType } from '@/shared/charts';
-import type { EAnalyticMode } from '@/types';
-import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
-
-import { createContext, useContext } from 'react';
-import { usePathAnalysisFunnel } from '../hooks/usePathAnalysisFunnel';
-import { usePathAnalyticsMerger } from '../hooks/usePathAnalyticsMerger';
-import { usePathAnalysisConfig } from './PathAnalysisConfigProvider';
-
-export interface IPathAnalysisFirstLevel {
-  id: string;
-  locationPath: string;
-  pageTitle: string;
-  pageType: string;
-  parentID: string;
-  level: number;
-  metric: {
-    totalSessions: number;
-  };
-}
-
-export interface ICampaignPathsData {
-  paths?: IPathAnalysisFirstLevel[];
-  isLoading?: boolean;
-}
-
-export interface IAnalyticsData {
-  pathAnalytics?: IBasePathAnalyticPageWithParent[];
-  previousPathAnalyticsMap?: Record<string, IBasePathAnalyticPageWithParent>;
-  isLoading?: boolean;
-  locationPath?: string;
-  shopifyPageType?: string;
-}
-
-export interface PathAnalysisType {
-  mode: EAnalyticMode;
-  campaignID?: string;
-  campaignGroupID?: string;
-  campaignVariantID?: string;
-  campaignVersionID?: string;
-  pathAnalytics?: IBasePathAnalyticPageWithParent[];
-  isLoadingMetric: boolean;
-  shopifyPageType?: string;
-  pageWithMetric: IBasePathAnalyticPageWithChild | undefined;
-  dynamicLevels: IBasePathAnalyticPageWithChild[];
-  nextLevelPages: IBasePathAnalyticPageWithChild[];
-  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithParent>;
-  handleAddNextLevel: (childId: string) => void;
-  handleChangeLevel: OnChangeFunnelType;
-  getPagesByParentID: (data: { level?: number; parentID?: string }) => IBasePathAnalyticPageWithChild[];
-  handleDeleteLevel: (id?: string) => void;
-}
-
-export interface PathAnalysisProviderProps {
-  children: React.ReactNode;
-  campaignID?: string;
-  campaignGroupID?: string;
-  campaignVariantID?: string;
-  campaignVersionID?: string;
-  mode: EAnalyticMode;
-  campaignPathsData?: ICampaignPathsData;
-  analyticsData?: IAnalyticsData;
-}
-
-export const PathAnalysisContext = createContext<PathAnalysisType | undefined>(undefined);
-
-export const PathAnalysisProvider = (props: PathAnalysisProviderProps) => {
-  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 (
-    <PathAnalysisContext.Provider
-      value={{
-        mode,
-        campaignID,
-        campaignGroupID,
-        campaignVariantID,
-        campaignVersionID,
-        shopifyPageType,
-        pathAnalytics: processedPathAnalytics,
-        previousPathAnalyticsMap,
-        isLoadingMetric: isLoading,
-        ...pathAnalysisFunnelData,
-      }}
-    >
-      {children}
-    </PathAnalysisContext.Provider>
-  );
-};
-
-export const usePathAnalysisContext = () => {
-  const context = useContext(PathAnalysisContext);
-  if (!context) {
-    throw new Error('usePathAnalysisContext must be used within a PathAnalysisProvider');
-  }
-  return context;
-};

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

@@ -1,2 +0,0 @@
-export * from './PathAnalysisConfigProvider';
-export * from './PathAnalysisProvider';

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

@@ -1,2 +0,0 @@
-export * from './pathAnalysis';
-export * from './pathAnalysisChart';

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

@@ -1,13 +0,0 @@
-import type { IBasePageAnalyticMetric } from '@/types/metric';
-
-export const getTotalSessionWithCartAdditionMetric = ({ metric }: { metric?: IBasePageAnalyticMetric }) => ({
-  value: metric?.totalSessionsWithCartAdditions ?? undefined,
-});
-
-export const getTotalSessionReachedCheckoutMetric = ({ metric }: { metric?: IBasePageAnalyticMetric }) => ({
-  value: metric?.totalSessionsThatReachedCheckout ?? undefined,
-});
-
-export const getTotalSessionCompletedCheckoutMetric = ({ metric }: { metric?: IBasePageAnalyticMetric }) => ({
-  value: metric?.totalSessionsThatCompletedCheckout ?? undefined,
-});

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

@@ -1,96 +0,0 @@
-import type { IGetTextPrice } from '@/core/gemxql';
-import type { IBasePageAnalyticMetric } from '@/types/metric';
-import type { TemplateType } from '@/types/template';
-import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
-
-import { formatMetricByFormatter, getPAMetricValueV2, PAGE_ANALYTIC_MAPPING } from '@/modules/analytics';
-import { IPAMetricKey } from '@/modules/analytics/types';
-import { numberWithCommas, parseTemplateType } from '@/utils';
-
-import { buildTree, removeDuplicates } from './treeUtils';
-
-export const processPathAnalytics = (
-  analyticsData: IBasePathAnalyticPageWithParent[] | undefined,
-  locationPath: string,
-): IBasePathAnalyticPageWithChild | undefined => {
-  if (!analyticsData) return undefined;
-
-  const dataTree = processPathAnalyticsTree(analyticsData);
-  return dataTree?.find((item) => item.id === locationPath);
-};
-
-export const processPathAnalyticsTree = (
-  analyticsData: IBasePathAnalyticPageWithParent[] | undefined,
-): IBasePathAnalyticPageWithChild[] | undefined => {
-  if (!analyticsData) return undefined;
-
-  const uniqueData = removeDuplicates(analyticsData, ['id', 'parentID', 'level', 'locationPath']);
-
-  const updateData = uniqueData.map((item) => ({
-    ...item,
-    metric: item?.metric,
-  })) as IBasePathAnalyticPageWithParent[];
-
-  const dataTree = buildTree<IBasePathAnalyticPageWithChild>(updateData);
-
-  return dataTree;
-};
-
-export const getFunnelChildrenPages = (
-  page: IBasePathAnalyticPageWithChild | undefined,
-): IBasePathAnalyticPageWithChild[] => {
-  if (!page || !page.children) {
-    return [];
-  }
-  return page.children
-    .filter((child) => child.id)
-    .map((child) => ({
-      ...child,
-      children: getFunnelChildrenPages(child),
-    }));
-};
-
-export const getFunnelChartTooltip = (data: { page?: IBasePathAnalyticPageWithChild; getTextPrice: IGetTextPrice }) => {
-  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 as IBasePageAnalyticMetric;
-  const totalContinuationSession = numberWithCommas((page.metric?.totalContinuationSession || 0).toString());
-
-  const baseInfo = [
-    {
-      key: page.pageTitle || parseTemplateType(page.pageType as TemplateType),
-      value: page.locationPath as string,
-    },
-  ];
-
-  const metricInfo = keys.map((key) => {
-    if (key === CONTINUATION_SESSIONS_KEY) {
-      return {
-        key: 'Continuation sessions',
-        value: totalContinuationSession,
-      };
-    }
-
-    const metricKey = key as IPAMetricKey;
-    const value = getPAMetricValueV2(metric, metricKey);
-    return {
-      key: PAGE_ANALYTIC_MAPPING[metricKey].heading.title as string,
-      value: formatMetricByFormatter({
-        value: value.value,
-        formatter: value.formatter,
-        getTextPrice,
-      }),
-    };
-  });
-
-  return baseInfo.concat(metricInfo);
-};

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

@@ -1,128 +0,0 @@
-import type { IBasePageAnalyticMetric } from '@/types/metric';
-import type { TrendIndicatorProps } from '@shopify/polaris-viz';
-import type { IBasePathAnalyticPageWithChild } from '../types';
-
-import {
-  getTotalSessionCompletedCheckoutMetric,
-  getTotalSessionReachedCheckoutMetric,
-  getTotalSessionWithCartAdditionMetric,
-} from './metricHelpers';
-import { formatPercentage } from '@/utils';
-export const calculateFunnelTrendChange = ({
-  currentValue,
-  previousValue,
-}: {
-  currentValue?: number;
-  previousValue?: number;
-}): TrendIndicatorProps => {
-  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 };
-};
-
-export const calculateFirstLevelTrend = ({
-  pageWithMetric,
-  previousPathAnalyticsMap,
-}: {
-  pageWithMetric?: IBasePathAnalyticPageWithChild;
-  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>;
-}) => {
-  if (!pageWithMetric) return null;
-
-  const currentValue = pageWithMetric?.metric?.totalSessions ?? undefined;
-  const previousValue = previousPathAnalyticsMap[`${pageWithMetric?.id}`]?.metric?.totalSessions ?? undefined;
-
-  return calculateFunnelTrendChange({ currentValue, previousValue });
-};
-
-export const calculateDynamicLevelsTrends = (
-  dynamicLevels: IBasePathAnalyticPageWithChild[],
-  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>,
-) => {
-  const trends: Record<string, TrendIndicatorProps> = {};
-
-  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;
-};
-
-export const calculateConversionMetricsTrends = (
-  dynamicLevels: IBasePathAnalyticPageWithChild[],
-  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>,
-  pageWithMetric?: IBasePathAnalyticPageWithChild,
-) => {
-  const lastLevel = dynamicLevels[dynamicLevels.length - 1] || pageWithMetric;
-  const lastLevelPreviousData = previousPathAnalyticsMap[lastLevel!.id];
-
-  const metric = lastLevel?.metric as IBasePageAnalyticMetric;
-  const previousMetric = lastLevelPreviousData?.metric as IBasePageAnalyticMetric;
-  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: Record<string, TrendIndicatorProps> = {};
-  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;
-};
-
-export const calculateConversionFunnelTrends = ({
-  pageWithMetric,
-  previousPathAnalyticsMap,
-  dynamicLevels,
-}: {
-  pageWithMetric?: IBasePathAnalyticPageWithChild;
-  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>;
-  dynamicLevels: IBasePathAnalyticPageWithChild[];
-}) => {
-  const firstLevelTrend = calculateFirstLevelTrend({
-    pageWithMetric,
-    previousPathAnalyticsMap,
-  });
-  if (!firstLevelTrend) return {};
-
-  const trends: Record<string, TrendIndicatorProps> = {
-    '0': firstLevelTrend,
-    ...calculateDynamicLevelsTrends(dynamicLevels, previousPathAnalyticsMap),
-    ...calculateConversionMetricsTrends(dynamicLevels, previousPathAnalyticsMap, pageWithMetric),
-  };
-
-  return trends;
-};

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

@@ -1,38 +0,0 @@
-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;
-};