@gem-sdk/analytics 1.0.2-dev.0 → 1.0.2-dev.2

package/dist/esm/index.js

@@ -168,6 +168,20 @@ var ETrafficSourceType;
     ETrafficSourceType["SMS"] = "sms";
 })(ETrafficSourceType || (ETrafficSourceType = {}));
 
+var ICampaignType;
+(function (ICampaignType) {
+    // CONTENT = 'CONTENT',
+    ICampaignType["PRICE"] = "PRICE";
+    ICampaignType["TEMPLATE"] = "TEMPLATE";
+    ICampaignType["TEMPLATE_BUNDLE"] = "TEMPLATE_BUNDLE";
+    // THEME = 'THEME',
+})(ICampaignType || (ICampaignType = {}));
+var IVariantType$1;
+(function (IVariantType) {
+    IVariantType["VARIANT_A"] = "A";
+    IVariantType["VARIANT_B"] = "B";
+})(IVariantType$1 || (IVariantType$1 = {}));
+
 /**
  * Pricing enums mirrored from the host app (`~/modules/pricing/types`).
  *
@@ -205,19 +219,18 @@ var IShopPlanState;
     IShopPlanState["ACTIVE_FUNNEL_OPT_AND_TRIAL_FUNNEL_OPT"] = "ACTIVE_FUNNEL_OPT_AND_TRIAL_FUNNEL_OPT";
 })(IShopPlanState || (IShopPlanState = {}));
 
-var ICampaignType;
-(function (ICampaignType) {
-    // CONTENT = 'CONTENT',
-    ICampaignType["PRICE"] = "PRICE";
-    ICampaignType["TEMPLATE"] = "TEMPLATE";
-    ICampaignType["TEMPLATE_BUNDLE"] = "TEMPLATE_BUNDLE";
-    // THEME = 'THEME',
-})(ICampaignType || (ICampaignType = {}));
-var IVariantType$1;
-(function (IVariantType) {
-    IVariantType["VARIANT_A"] = "A";
-    IVariantType["VARIANT_B"] = "B";
-})(IVariantType$1 || (IVariantType$1 = {}));
+var EReportColumnKey;
+(function (EReportColumnKey) {
+    EReportColumnKey["ORDER_ID"] = "order_id";
+    EReportColumnKey["GEMX_ID"] = "gx_id";
+    EReportColumnKey["ORDER_DATE"] = "order_date";
+    EReportColumnKey["TOTAL"] = "total_price";
+    EReportColumnKey["CAMPAIGNS"] = "experiments";
+    EReportColumnKey["TRAFFIC_SOURCE"] = "traffic_source";
+    EReportColumnKey["ITEMS"] = "items";
+    EReportColumnKey["DEVICE"] = "device";
+    EReportColumnKey["VISITOR"] = "visitor_type";
+})(EReportColumnKey || (EReportColumnKey = {}));
 
 const TARGET_VISITOR = [
     { value: EVisitorType.NEW, label: 'New' },
@@ -23040,18 +23053,6 @@ const CardJourneyAnalysis = ({ analyticMode, config, ...props }) => {
     return (jsx(PathAnalysisConfigProvider, { ...config, children: jsx(CardPathAnalysis, { analyticMode: analyticMode || EAnalyticMode.ALL_SESSION, ...props, children: jsx(InlineStack, { gap: "200", children: jsx(GTooltipCard, { tooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.PAGE_PATH_ANALYSIS], children: jsx(Text, { as: "h3", variant: "headingMd", children: t('Journey analysis') }) }) }) }) }));
 };
 
-var EReportColumnKey;
-(function (EReportColumnKey) {
-    EReportColumnKey["ORDER_ID"] = "order_id";
-    EReportColumnKey["ORDER_DATE"] = "order_date";
-    EReportColumnKey["TOTAL"] = "total_price";
-    EReportColumnKey["CAMPAIGNS"] = "experiments";
-    EReportColumnKey["TRAFFIC_SOURCE"] = "traffic_source";
-    EReportColumnKey["ITEMS"] = "items";
-    EReportColumnKey["DEVICE"] = "device";
-    EReportColumnKey["VISITOR"] = "visitor_type";
-})(EReportColumnKey || (EReportColumnKey = {}));
-
 var EReportDataType;
 (function (EReportDataType) {
     EReportDataType["DATE"] = "DATE";
@@ -23139,666 +23140,163 @@ function getMetricPreviousValue(row, key) {
     return row[getPreviousColumnName(key)];
 }
 
-const convertOrderItemsToReportTableRows = (orderItems) => {
-    return orderItems.map((orderItem) => {
-        const { events: _events, ...restOrderItem } = orderItem;
-        return {
-            ...restOrderItem,
-            items: typeof orderItem.items === 'string' ? JSON.parse(orderItem.items) : (orderItem.items ?? []),
-            experiments: typeof orderItem.experiments === 'string' ? JSON.parse(orderItem.experiments) : (orderItem.experiments ?? []),
-        };
-    });
+var EDimensionKey;
+(function (EDimensionKey) {
+    EDimensionKey["TIME"] = "time";
+    EDimensionKey["EXPERIMENT_ID"] = "experiment_id";
+    EDimensionKey["VERSION"] = "version";
+    EDimensionKey["VISITOR"] = "visitor_type";
+    EDimensionKey["TRAFFIC_SOURCE"] = "traffic_source";
+    EDimensionKey["DEVICE"] = "device";
+})(EDimensionKey || (EDimensionKey = {}));
+
+var ETooltipCategory;
+(function (ETooltipCategory) {
+    ETooltipCategory["ALPHABETICAL"] = "ALPHABETICAL";
+    ETooltipCategory["NUMERIC"] = "NUMERIC";
+    ETooltipCategory["DATE"] = "DATE";
+})(ETooltipCategory || (ETooltipCategory = {}));
+const TooltipPresets = {
+    [ETooltipCategory.ALPHABETICAL]: { ASC: 'A-Z', DESC: 'Z-A' },
+    [ETooltipCategory.NUMERIC]: { ASC: 'Lowest first', DESC: 'Highest first' },
+    [ETooltipCategory.DATE]: { ASC: 'Oldest first', DESC: 'Newest first' },
 };
-const applyTotalToSummaryRow = (rows) => {
-    let totalPrice = 0;
-    let totalItems = 0;
-    rows.forEach((row) => {
-        const rowTotal = row[EReportColumnKey.TOTAL];
-        const rowItems = row[EReportColumnKey.ITEMS];
-        if (typeof rowTotal === 'number') {
-            totalPrice += rowTotal;
+const DEFAULT_TOOLTIP = TooltipPresets[ETooltipCategory.NUMERIC];
+const reportOrderTooltip = {
+    day: TooltipPresets[ETooltipCategory.DATE],
+    order_date: TooltipPresets[ETooltipCategory.DATE],
+    month: TooltipPresets[ETooltipCategory.DATE],
+    year: TooltipPresets[ETooltipCategory.DATE],
+    hour: TooltipPresets[ETooltipCategory.DATE],
+    quarter: TooltipPresets[ETooltipCategory.DATE],
+    week: TooltipPresets[ETooltipCategory.DATE],
+    [EDimensionKey.DEVICE]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
+    [EDimensionKey.VISITOR]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
+    [EDimensionKey.VERSION]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
+    [EDimensionKey.TRAFFIC_SOURCE]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
+};
+
+const DEFAULT_DIMENSION_LAYOUT = {
+    width: '200px',
+    minWidth: '200px',
+    align: 'start',
+    paddingRight: '28px',
+    headerPaddingRight: '0',
+};
+const DEFAULT_METRIC_LAYOUT = {
+    minWidth: '140px',
+    align: 'end',
+    paddingRight: '28px',
+    headerPaddingRight: '0',
+};
+const IS_TOTAL_ROW_FIELD = 'isTotalRow';
+
+const useReportTable = ({ dimensions, tableData, metrics }) => {
+    const columnsByName = useMemo(() => {
+        return tableData.columns.reduce((lookup, column) => {
+            lookup[column.name] = column;
+            return lookup;
+        }, {});
+    }, [tableData.columns]);
+    const mainColumns = useMemo(() => {
+        return [...dimensions, ...metrics]
+            .map((columnName) => columnsByName[columnName])
+            .filter(Boolean);
+    }, [dimensions, metrics, columnsByName]);
+    const compareColumnsByMainColumn = useMemo(() => {
+        const compareColumns = {};
+        mainColumns.forEach(({ name }) => {
+            const compareColumnName = getPreviousColumnName(name);
+            if (!columnsByName[compareColumnName])
+                return;
+            compareColumns[name] = columnsByName[compareColumnName];
+        });
+        return compareColumns;
+    }, [mainColumns, columnsByName]);
+    const areDimensionsEqual = useCallback((row1, row2, depth) => {
+        if (!row1 || !row2)
+            return false;
+        return dimensions.slice(0, depth + 1).every((dim) => row1[dim] === row2[dim]);
+    }, [dimensions]);
+    const getSubtotalCellValue = useCallback((data) => {
+        const { currentRow, column, columnIndex, dimensionIndex, compareColumn } = data;
+        const isDimension = dimensions.includes(column.name);
+        if (columnIndex === dimensionIndex + 1) {
+            return {
+                cellValue: 'Total',
+                compareCellValue: '',
+            };
         }
-        if (Array.isArray(rowItems)) {
-            totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
+        //handle metric
+        if (!isDimension) {
+            return {
+                cellValue: currentRow[getTotalColumnNameByDimensions(dimensions, column.name, dimensionIndex)],
+                compareCellValue: compareColumn
+                    ? currentRow[getPreviousTotalColumnNameByDimensions(dimensions, column.name, dimensionIndex)]
+                    : '',
+            };
+        }
+        //handle dimension
+        const dimensionDepth = dimensions.indexOf(column.name);
+        if (dimensionDepth > dimensionIndex) {
+            return { cellValue: '', compareCellValue: '' };
         }
-    });
-    return rows.map((row, index) => {
-        const totalItemsLabel = totalItems > 1 ? `${totalItems} items` : `${totalItems} item`;
         return {
-            // Only add totals to first row (used by SummaryRow)
-            ...(index === 0 && {
-                [getTotalColumnName(EReportColumnKey.TOTAL)]: totalPrice,
-                [getTotalColumnName(EReportColumnKey.ITEMS)]: totalItemsLabel,
-            }),
-            ...row,
+            cellValue: currentRow[column.name],
+            compareCellValue: compareColumn ? currentRow[compareColumn.name] : '',
         };
-    });
-};
-
-const ORDER_LISTING_DIMENSION_LAYOUT = {
-    width: '158px',
-    minWidth: '158px',
-    maxWidth: '158px',
-    paddingInline: '12px',
-    columnFirstPaddingInline: '12px',
-    align: 'start',
-    dimensionBoxShadow: 'none',
-    borderRightWidth: '0px',
-};
-// Remaining space after fixed Order ID column
-const METRIC_COLUMN_MAX_WIDTH = `max(var(--column-cell-min-width), calc(100% - ${ORDER_LISTING_DIMENSION_LAYOUT.width}))`;
-const ORDER_LISTING_METRIC_LAYOUTS = {
-    [EReportColumnKey.ORDER_DATE]: {
-        minWidth: '180px',
-        maxWidth: METRIC_COLUMN_MAX_WIDTH,
-        align: 'start',
-    },
-    [EReportColumnKey.TOTAL]: {
-        minWidth: '120px',
-        maxWidth: METRIC_COLUMN_MAX_WIDTH,
-        align: 'end',
-    },
-    [EReportColumnKey.CAMPAIGNS]: {
-        minWidth: '246px',
-        maxWidth: METRIC_COLUMN_MAX_WIDTH,
-        align: 'start',
-        columnWrapperWidth: '100%',
-    },
-    [EReportColumnKey.TRAFFIC_SOURCE]: {
-        minWidth: '120px',
-        maxWidth: METRIC_COLUMN_MAX_WIDTH,
-        align: 'start',
-    },
-    [EReportColumnKey.DEVICE]: {
-        minWidth: '120px',
-        maxWidth: METRIC_COLUMN_MAX_WIDTH,
-        align: 'start',
-    },
-    [EReportColumnKey.VISITOR]: {
-        minWidth: '120px',
-        maxWidth: METRIC_COLUMN_MAX_WIDTH,
-        align: 'start',
-    },
-    [EReportColumnKey.ITEMS]: {
-        minWidth: '140px',
-        maxWidth: METRIC_COLUMN_MAX_WIDTH,
-        align: 'start',
-    },
-};
-const ORDER_LISTING_COLUMNS = [
-    {
-        name: EReportColumnKey.ORDER_ID,
-        dataType: EReportDataType.STRING,
-        displayName: 'Order ID',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Order ID',
-                content: 'Shopify identifier for the order',
-                width: 'wide',
-            },
-        },
-    },
-    {
-        name: EReportColumnKey.ORDER_DATE,
-        dataType: EReportDataType.DATE,
-        displayName: 'Date',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Date',
-                content: 'Date when the order was placed',
-                width: 'wide',
-            },
-        },
-    },
-    {
-        name: EReportColumnKey.TOTAL,
-        dataType: EReportDataType.CURRENCY,
-        displayName: 'Total',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Total',
-                content: 'The money amount customers paid for the order',
-                width: 'wide',
-            },
-        },
-    },
-    {
-        name: EReportColumnKey.CAMPAIGNS,
-        dataType: EReportDataType.OBJECT,
-        displayName: 'Experiment version',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Experiment',
-                content: 'The specific template variant shown to the customer that resulted in the order',
-                width: 'wide',
-            },
-        },
-    },
-    {
-        name: EReportColumnKey.TRAFFIC_SOURCE,
-        dataType: EReportDataType.STRING,
-        displayName: 'Traffic source',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Traffic source',
-                content: 'Where your customers came from',
-                width: 'wide',
-            },
-        },
-    },
-    {
-        name: EReportColumnKey.DEVICE,
-        dataType: EReportDataType.STRING,
-        displayName: 'Device',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Device',
-                content: 'Device customers used to place the order',
-                width: 'wide',
-            },
-        },
-    },
-    {
-        name: EReportColumnKey.VISITOR,
-        dataType: EReportDataType.STRING,
-        displayName: 'Customer type',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Customer type',
-                content: 'Customers who placed the order',
-                width: 'wide',
-            },
-        },
-    },
-    {
-        name: EReportColumnKey.ITEMS,
-        dataType: EReportDataType.OBJECT,
-        displayName: 'Items',
-        tooltipCardProps: {
-            tooltip: {
-                title: 'Items',
-                content: 'Number of units across all line items in the order',
-                width: 'wide',
-            },
-        },
-    },
-];
-const ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE = ORDER_LISTING_COLUMNS.filter((column) => ![EReportColumnKey.CAMPAIGNS].includes(column.name));
-const ORDER_LISTING_METRICS = [
-    EReportColumnKey.ORDER_DATE,
-    EReportColumnKey.TOTAL,
-    EReportColumnKey.CAMPAIGNS,
-    EReportColumnKey.TRAFFIC_SOURCE,
-    EReportColumnKey.DEVICE,
-    EReportColumnKey.VISITOR,
-    EReportColumnKey.ITEMS,
-];
-const ORDER_LISTING_DIMENSIONS = ['order_id'];
-const ORDER_LISTING_CONFIG = {
-    SHOW_LATEST_ORDER_LISTING_AMOUNT: 5,
-};
-const SORT_ORDER_LISTING_DEFAULT = [`${EReportColumnKey.ORDER_DATE} desc`];
-
-const ORDER_COLUMN_MAPPING = {
-    [EReportColumnKey.ORDER_ID]: {
-        label: 'Order ID',
-        value: EReportColumnKey.ORDER_ID,
-    },
-    [EReportColumnKey.ORDER_DATE]: {
-        label: 'Date',
-        value: EReportColumnKey.ORDER_DATE,
-    },
-    [EReportColumnKey.TOTAL]: {
-        label: 'Total',
-        value: EReportColumnKey.TOTAL,
-    },
-    [EReportColumnKey.CAMPAIGNS]: {
-        label: 'Experiment version',
-        value: EReportColumnKey.CAMPAIGNS,
-    },
-    [EReportColumnKey.TRAFFIC_SOURCE]: {
-        label: 'Traffic source',
-        value: EReportColumnKey.TRAFFIC_SOURCE,
-    },
-    [EReportColumnKey.DEVICE]: {
-        label: 'Device',
-        value: EReportColumnKey.DEVICE,
-    },
-    [EReportColumnKey.VISITOR]: {
-        label: 'Customer type',
-        value: EReportColumnKey.VISITOR,
-    },
-    [EReportColumnKey.ITEMS]: {
-        label: 'Items',
-        value: EReportColumnKey.ITEMS,
-    },
-};
-const DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT = [
-    EReportColumnKey.ORDER_ID,
-    EReportColumnKey.ORDER_DATE,
-    EReportColumnKey.TOTAL,
-    EReportColumnKey.CAMPAIGNS,
-    EReportColumnKey.TRAFFIC_SOURCE,
-    EReportColumnKey.DEVICE,
-    EReportColumnKey.VISITOR,
-];
-
-const SKELETON_METRICS = [
-    EReportColumnKey.ORDER_DATE,
-    EReportColumnKey.TOTAL,
-    EReportColumnKey.CAMPAIGNS,
-    EReportColumnKey.TRAFFIC_SOURCE,
-    EReportColumnKey.DEVICE,
-    EReportColumnKey.VISITOR,
-    EReportColumnKey.ITEMS,
-];
-
-const SkeletonSummaryRow = () => {
-    const summaryColumns = [
-        { key: 'order_id', layout: ORDER_LISTING_DIMENSION_LAYOUT },
-        ...SKELETON_METRICS.map((metric) => ({
-            key: metric,
-            layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
-        })),
-    ];
-    return (jsx("div", { className: "GReportTable__Summary-Row", children: summaryColumns.map((col, index) => (jsx("div", { className: "GReportTable__Summary-Cell", style: {
-                minWidth: col.layout?.minWidth,
-                maxWidth: col.layout?.maxWidth,
-                justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-                ['--column-cell-justify-content']: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-            }, children: index === 0 && (jsx("div", { className: "w-20", children: jsx(SkeletonBodyText, { lines: 1 }) })) }, col.key))) }));
-};
-
-const SkeletonHeader = () => {
-    const headerColumns = [
-        { key: 'order_id', label: 'Order ID', layout: ORDER_LISTING_DIMENSION_LAYOUT },
-        ...SKELETON_METRICS.map((metric) => ({
-            key: metric,
-            label: metric,
-            layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
-        })),
-    ];
-    return (jsx("div", { className: "GReportTable__Header", children: headerColumns.map((col, index) => (jsx("div", { className: "GReportTable__Header-Cell", style: {
-                minWidth: col.layout?.minWidth,
-                maxWidth: col.layout?.maxWidth,
-                justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-                ['--column-cell-justify-content']: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-            }, children: jsx("div", { className: index === 0 ? 'w-16' : 'w-12', children: jsx(SkeletonBodyText, { lines: 1 }) }) }, col.key))) }));
-};
-
-const SkeletonCellContent = ({ columnKey }) => {
-    switch (columnKey) {
-        case 'order_id':
-            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-20", children: jsx(SkeletonDisplayText, { size: "small" }) }) }));
-        case EReportColumnKey.ORDER_DATE:
-            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-28", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
-        case EReportColumnKey.TOTAL:
-            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-16", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
-        case EReportColumnKey.CAMPAIGNS:
-            return (jsx(Box, { paddingInline: "300", width: "100%", children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx("div", { className: "bg-surface-secondary h-6 w-6 shrink-0 animate-pulse rounded" }), jsx("div", { className: "max-w-40 flex-1", children: jsx(SkeletonBodyText, { lines: 1 }) })] }) }));
-        case EReportColumnKey.TRAFFIC_SOURCE:
-        case EReportColumnKey.DEVICE:
-        case EReportColumnKey.VISITOR:
-            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-16", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
-        case EReportColumnKey.ITEMS:
-            return (jsx(Box, { paddingInline: "300", children: jsxs(InlineStack, { gap: "100", blockAlign: "center", children: [jsx("div", { className: "bg-surface-secondary h-6 w-6 shrink-0 animate-pulse rounded" }), jsx("div", { className: "w-4", children: jsx(SkeletonBodyText, { lines: 1 }) })] }) }));
-        default:
-            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-16", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
-    }
-};
-
-const SkeletonRow = () => {
-    const rowColumns = [
-        { key: 'order_id', layout: ORDER_LISTING_DIMENSION_LAYOUT, isDimension: true },
-        ...SKELETON_METRICS.map((metric) => ({
-            key: metric,
-            layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
-            isDimension: false,
-        })),
-    ];
-    return (jsx("div", { className: "GReportTable__Row", children: rowColumns.map((col) => (jsx("div", { className: `GReportTable__Cell ${col.isDimension ? 'GReportTable__Cell--dimension' : ''}`, style: {
-                minWidth: col.layout?.minWidth,
-                maxWidth: col.layout?.maxWidth,
-                justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-                ['--column-cell-justify-content']: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-            }, children: jsx("div", { className: "GReportTable__CellContent", children: jsx(SkeletonCellContent, { columnKey: col.key }) }) }, col.key))) }));
-};
-
-const OrderListingTableSkeleton = ({ rowCount = 5 }) => {
-    return (jsxs("div", { className: "GReportTable__Container rounded-xl overflow-hidden", children: [jsxs("div", { className: "GReportTable__Wrapper", children: [jsx("div", { className: "GReportTable__StickyHeader", children: jsxs("div", { children: [jsx(SkeletonHeader, {}), jsx(SkeletonSummaryRow, {})] }) }), jsx("div", { className: "GReportTable__ScrollWrap", children: Array.from({ length: rowCount }).map((_, index) => (jsx(SkeletonRow, {}, index))) })] }), jsx("div", { className: "GReportTable__Pagination", children: jsx(InlineStack, { align: "space-between", blockAlign: "center", gap: "400", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }) })] }));
-};
-
-const OrderListingTableEmpty = ({ title, description }) => {
-    return (jsx(GBlockCenter, { paddingBlock: "400", children: jsxs(BlockStack, { gap: "400", inlineAlign: "center", children: [jsx("img", { src: ANALYTIC_EMPTY, alt: "No orders", width: 80, height: 80 }), jsxs(BlockStack, { gap: "200", inlineAlign: "center", children: [jsx(Text, { as: "p", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", alignment: "center", children: description })] })] }) }));
-};
-
-var EOrderDirectionType;
-(function (EOrderDirectionType) {
-    EOrderDirectionType["ASC"] = "ASC";
-    EOrderDirectionType["DESC"] = "DESC";
-})(EOrderDirectionType || (EOrderDirectionType = {}));
-
-const useOrderControlStore = create()((set) => ({
-    orderBy: { field: EReportColumnKey.ORDER_DATE, direction: EOrderDirectionType.DESC },
-    changeOrderBy: (newOrderBy) => set(() => ({ orderBy: newOrderBy })),
-}));
-
-const useOrderColumnsSelectorStore = create()(persist((set) => ({
-    selectedColumns: DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT,
-    columnsOrder: Object.values(ORDER_COLUMN_MAPPING).map((column) => column.value),
-    setColumnsOrder: (columnsOrder) => set({ columnsOrder }),
-    setSelectedColumns: (selectedColumns) => set({ selectedColumns }),
-}), { name: 'order-listing-columns-config' }));
-
-const useOrderListingData = ({ limitRowAmount, orderListing = [], fixedColumns }) => {
-    const selectedColumns = useOrderColumnsSelectorStore((state) => state.selectedColumns);
-    const columnsOrder = useOrderColumnsSelectorStore((state) => state.columnsOrder);
-    const showColumns = useMemo(() => ORDER_LISTING_COLUMNS.filter((column) => (fixedColumns ?? selectedColumns).includes(column.name)), [fixedColumns, selectedColumns]);
-    const sortedMetrics = useMemo(() => sortByArrayOrder(ORDER_LISTING_METRICS ?? [], columnsOrder), [columnsOrder]);
-    const tableData = useMemo(() => {
-        const rows = convertOrderItemsToReportTableRows(orderListing);
-        const showRows = limitRowAmount ? rows.slice(0, limitRowAmount) : rows;
-        return {
-            rows: showRows,
-            columns: showColumns,
-        };
-    }, [limitRowAmount, orderListing, showColumns]);
-    return {
-        showColumns,
-        tableData,
-        sortedMetrics,
-    };
-};
-
-var EDimensionKey;
-(function (EDimensionKey) {
-    EDimensionKey["TIME"] = "time";
-    EDimensionKey["EXPERIMENT_ID"] = "experiment_id";
-    EDimensionKey["VERSION"] = "version";
-    EDimensionKey["VISITOR"] = "visitor_type";
-    EDimensionKey["TRAFFIC_SOURCE"] = "traffic_source";
-    EDimensionKey["DEVICE"] = "device";
-})(EDimensionKey || (EDimensionKey = {}));
-
-var ETooltipCategory;
-(function (ETooltipCategory) {
-    ETooltipCategory["ALPHABETICAL"] = "ALPHABETICAL";
-    ETooltipCategory["NUMERIC"] = "NUMERIC";
-    ETooltipCategory["DATE"] = "DATE";
-})(ETooltipCategory || (ETooltipCategory = {}));
-const TooltipPresets = {
-    [ETooltipCategory.ALPHABETICAL]: { ASC: 'A-Z', DESC: 'Z-A' },
-    [ETooltipCategory.NUMERIC]: { ASC: 'Lowest first', DESC: 'Highest first' },
-    [ETooltipCategory.DATE]: { ASC: 'Oldest first', DESC: 'Newest first' },
-};
-const DEFAULT_TOOLTIP = TooltipPresets[ETooltipCategory.NUMERIC];
-const reportOrderTooltip = {
-    day: TooltipPresets[ETooltipCategory.DATE],
-    order_date: TooltipPresets[ETooltipCategory.DATE],
-    month: TooltipPresets[ETooltipCategory.DATE],
-    year: TooltipPresets[ETooltipCategory.DATE],
-    hour: TooltipPresets[ETooltipCategory.DATE],
-    quarter: TooltipPresets[ETooltipCategory.DATE],
-    week: TooltipPresets[ETooltipCategory.DATE],
-    [EDimensionKey.DEVICE]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-    [EDimensionKey.VISITOR]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-    [EDimensionKey.VERSION]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-    [EDimensionKey.TRAFFIC_SOURCE]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-};
-
-const DEFAULT_DIMENSION_LAYOUT = {
-    width: '200px',
-    minWidth: '200px',
-    align: 'start',
-    paddingRight: '28px',
-    headerPaddingRight: '0',
-};
-const DEFAULT_METRIC_LAYOUT = {
-    minWidth: '140px',
-    align: 'end',
-    paddingRight: '28px',
-    headerPaddingRight: '0',
-};
-const IS_TOTAL_ROW_FIELD = 'isTotalRow';
-
-const ReportTableActionsContext = createContext({});
-const ReportTableActionsProvider = ({ children, onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders, }) => {
-    return (jsx(ReportTableActionsContext.Provider, { value: { onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders }, children: children }));
-};
-const useReportTableActionsContext = () => useContext(ReportTableActionsContext);
-
-var GEMX_LOGO = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAzOCA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4MzQzXzMwMTI3KSI+CjxwYXRoIGQ9Ik0yMi43Nzc4IDEuODk4NjdMMTkuNTU5IDcuNzcyMDZDMTkuNTMyNCA3LjgyNDYyIDE5LjUzMjQgNy44OTAzMiAxOS41NTkgNy45NDI4OEwyNi40NjIyIDIwLjU0MzdDMjYuNTI4NyAyMC42Njg2IDI2LjcwODMgMjAuNjY4NiAyNi43NzQ4IDIwLjU0MzdMMzcuODg3NyAwLjI2Mjc5MkMzNy45NTQyIDAuMTQ0NTM1IDM3Ljg2NzggMCAzNy43MjgxIDBIMjYuMDAzM0MyNC42NTMzIDAgMjMuNDE2MyAwLjcyOTI0NyAyMi43Nzc4IDEuODk4NjdaIiBmaWxsPSIjQ0NDQ0NDIi8+CjxwYXRoIGQ9Ik0xMi4zODI5IDBIMC40NTE5OTVDMC4xMTI4MjEgMCAtMC4xMDY2NDUgMC4zNjEzMzggMC4wNTk2MTY4IDAuNjU2OTc5TDExLjA5OTQgMjAuODEzMUwwLjA1Mjk2NjMgNDAuOTgyNEMtMC4xMDY2NDUgNDEuMjc4IDAuMTA2MTcgNDEuNjM5MyAwLjQ1MTk5NSA0MS42MzkzSDEyLjM1NjNDMTIuNjIyNCA0MS42MzkzIDEyLjg3NTEgNDEuNDk0OCAxMy4wMDE0IDQxLjI1ODNMMjQuMDQxMiAyMS4xMDIyQzI0LjE0NzYgMjAuOTExNiAyNC4xNDc2IDIwLjY3NTEgMjQuMDQxMiAyMC40ODQ2TDEzLjAyOCAwLjM4MTA0OEMxMi45MDE3IDAuMTQ0NTM1IDEyLjY1NTYgMCAxMi4zODI5IDBaIiBmaWxsPSIjQ0NDQ0NDIi8+CjxwYXRoIGQ9Ik0yMi43Nzc4IDM5Ljc5OTdMMTkuNTU5IDMzLjkyNjNDMTkuNTMyNCAzMy44NzM4IDE5LjUzMjQgMzMuODA4MSAxOS41NTkgMzMuNzU1NUwyNi40NjIyIDIxLjE1NDdDMjYuNTI4NyAyMS4wMjk4IDI2LjcwODMgMjEuMDI5OCAyNi43NzQ4IDIxLjE1NDdMMzcuODgxMSA0MS40MzU2QzM3Ljk0NzYgNDEuNTUzOSAzNy44NjExIDQxLjY5ODQgMzcuNzIxNSA0MS42OTg0SDI1Ljk5NjdDMjQuNjQ2NiA0MS42OTg0IDIzLjQwOTYgNDAuOTY5MSAyMi43NzEyIDM5Ljc5OTdIMjIuNzc3OFoiIGZpbGw9IiNDQ0NDQ0MiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zODM0M18zMDEyNyI+CjxyZWN0IHdpZHRoPSIzNy45MDc3IiBoZWlnaHQ9IjQxLjY5ODUiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
-
-const getColumnLayoutStyles = (columnLayout, hasTooltipCard) => {
-    return {
-        '--column-cell-min-width': columnLayout.minWidth,
-        '--column-cell-max-width': columnLayout.maxWidth,
-        '--column-cell-justify-content': columnLayout.align,
-        '--column-cell-padding-inline': columnLayout.paddingInline,
-        '--column-first-padding-inline': columnLayout.columnFirstPaddingInline,
-        '--column-wrapper-width': columnLayout.columnWrapperWidth,
-        '--column-cell-padding-right': !hasTooltipCard ? columnLayout.paddingRight : columnLayout.paddingInline,
-        '--column-header-cell-padding-right': !hasTooltipCard
-            ? columnLayout.headerPaddingRight
-            : columnLayout.paddingInline,
-        '--column-dimension-box-shadow': columnLayout.dimensionBoxShadow,
-        '--column-border-right-width': columnLayout.borderRightWidth,
-    };
-};
-
-const formatReportTableDate = (dateString) => {
-    if (!dateString)
-        return 'None';
-    const date = dayjsTz(dateString);
-    const now = dayjsTz();
-    const yesterday = dayjsTz().subtract(1, 'day');
-    const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
-    const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
-    if (isToday) {
-        return `Today at ${date.format('HH:mm')}`;
-    }
-    if (isYesterday) {
-        return `Yesterday at ${date.format('HH:mm')}`;
-    }
-    const daysDiff = now.diff(date, 'day');
-    const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
-    if (isWithinWeek) {
-        return `${date.format('dddd')} at ${date.format('HH:mm')}`;
-    }
-    return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
-};
-
-const formatReportData = ({ value, formatter, getTextPrice, name, }) => {
-    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
-    if (dataTypeIsObjectOrArray)
-        return value;
-    switch (formatter) {
-        case EReportDataType.INTEGER: {
-            return numberWithCommas((value ?? 0).toString());
-        }
-        case EReportDataType.CURRENCY: {
-            return getTextPrice(value, false);
-        }
-        case EReportDataType.DATE: {
-            return formatReportTableDate(value);
-        }
-        case EReportDataType.PERCENT: {
-            if (typeof value !== 'number')
-                return calcPercentageString(0, 1, 2) ?? '';
-            return calcPercentageString(value / 100, 1, 2) ?? '';
-        }
-        case EReportDataType.DURATION: {
-            return getTimeDurationLabel(Number(value));
-        }
-        case EReportDataType.STRING: {
-            const fallbackValue = name === EReportColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
-            return value ?? fallbackValue;
-        }
-        case EReportDataType.DAY: {
-            return getFormattedByInterval(value, AnalyticInterval.DAY, {
-                isExpandDetail: true,
-            });
-        }
-        case EReportDataType.HOUR: {
-            return getFormattedByInterval(value, AnalyticInterval.HOUR, {
-                isExpandDetail: true,
-            });
-        }
-        case EReportDataType.MONTH: {
-            return getFormattedByInterval(value, AnalyticInterval.MONTH, {
-                isExpandDetail: true,
-            });
-        }
-        case EReportDataType.YEAR: {
-            return getFormattedByInterval(value, AnalyticInterval.YEAR);
-        }
-        case EReportDataType.WEEK: {
-            return getFormattedByInterval(value, AnalyticInterval.WEEK, {
-                isExpandDetail: true,
-            });
-        }
-        case EReportDataType.QUARTER: {
-            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
-                isExpandDetail: true,
-            });
-        }
-        case EReportDataType.OBJECT:
-        case EReportDataType.ARRAY: {
-            return value;
-        }
-        default:
-            return `${value}`;
-    }
-};
-
-const COLOR_NORMAL = '#FFFFFF';
-const COLOR_ACTIVE = '#F8F8F8';
-const ReportTableSkeleton = ({ rows = 3, columns = 2, startBackgroundColor = 'normal', hiddenPagination = true, showLogo = false, }) => {
-    const colors = startBackgroundColor === 'normal' ? [COLOR_NORMAL, COLOR_ACTIVE] : [COLOR_ACTIVE, COLOR_NORMAL];
-    const getRowColor = (index) => colors[index % 2];
-    const getColJustify = (colIndex) => {
-        if (colIndex === 0)
-            return 'start';
-        if (colIndex === columns - 1)
-            return 'end';
-        return 'center';
-    };
-    return (jsxs(Fragment, { children: [jsx("div", { className: cls('GReportTable__Container', {
-                    'GReportTable__Container--pagination-hidden': hiddenPagination,
-                }), children: jsx("div", { className: "GReportTable__Wrapper", children: jsx("div", { className: "GReportTable__ScrollWrap", children: Array.from({ length: rows }).map((_, rowIndex) => (jsx("div", { className: "GReportTable__Row", children: Array.from({ length: columns }).map((_, colIndex) => (jsx("div", { className: "GReportTable__Cell !border-r-0 px-5", style: {
-                                    backgroundColor: getRowColor(rowIndex),
-                                    ...getColumnLayoutStyles({
-                                        align: getColJustify(colIndex),
-                                    }),
-                                }, children: jsx(Box, { width: "92px", children: jsx(SkeletonBodyText, { lines: 1 }) }) }, colIndex))) }, rowIndex))) }) }) }), showLogo && (jsx(GInlineCenter, { align: "center", inlineAlign: "center", minHeight: "320px", children: jsx("img", { src: GEMX_LOGO, alt: "Gemx", width: 38, height: 42 }) }))] }));
-};
-
-const useReportTable = ({ dimensions, tableData, metrics }) => {
-    const columnsByName = useMemo(() => {
-        return tableData.columns.reduce((lookup, column) => {
-            lookup[column.name] = column;
-            return lookup;
-        }, {});
-    }, [tableData.columns]);
-    const mainColumns = useMemo(() => {
-        return [...dimensions, ...metrics]
-            .map((columnName) => columnsByName[columnName])
-            .filter(Boolean);
-    }, [dimensions, metrics, columnsByName]);
-    const compareColumnsByMainColumn = useMemo(() => {
-        const compareColumns = {};
-        mainColumns.forEach(({ name }) => {
-            const compareColumnName = getPreviousColumnName(name);
-            if (!columnsByName[compareColumnName])
-                return;
-            compareColumns[name] = columnsByName[compareColumnName];
-        });
-        return compareColumns;
-    }, [mainColumns, columnsByName]);
-    const areDimensionsEqual = useCallback((row1, row2, depth) => {
-        if (!row1 || !row2)
-            return false;
-        return dimensions.slice(0, depth + 1).every((dim) => row1[dim] === row2[dim]);
-    }, [dimensions]);
-    const getSubtotalCellValue = useCallback((data) => {
-        const { currentRow, column, columnIndex, dimensionIndex, compareColumn } = data;
-        const isDimension = dimensions.includes(column.name);
-        if (columnIndex === dimensionIndex + 1) {
-            return {
-                cellValue: 'Total',
-                compareCellValue: '',
-            };
-        }
-        //handle metric
-        if (!isDimension) {
-            return {
-                cellValue: currentRow[getTotalColumnNameByDimensions(dimensions, column.name, dimensionIndex)],
-                compareCellValue: compareColumn
-                    ? currentRow[getPreviousTotalColumnNameByDimensions(dimensions, column.name, dimensionIndex)]
-                    : '',
-            };
-        }
-        //handle dimension
-        const dimensionDepth = dimensions.indexOf(column.name);
-        if (dimensionDepth > dimensionIndex) {
-            return { cellValue: '', compareCellValue: '' };
-        }
-        return {
-            cellValue: currentRow[column.name],
-            compareCellValue: compareColumn ? currentRow[compareColumn.name] : '',
-        };
-    }, [dimensions]);
-    const createSubtotalRowAtLevel = useCallback((currentRow, dimensionIndex) => {
-        const subtotalRow = {};
-        mainColumns.forEach((column, columnIndex) => {
-            const compareColumn = compareColumnsByMainColumn[column.name];
-            const { cellValue, compareCellValue } = getSubtotalCellValue({
-                currentRow,
-                column,
-                columnIndex,
-                dimensionIndex,
-                compareColumn,
-            });
-            subtotalRow[column.name] = cellValue;
-            if (compareColumn)
-                subtotalRow[compareColumn.name] = compareCellValue;
-        });
-        subtotalRow[IS_TOTAL_ROW_FIELD] = 'true';
-        return subtotalRow;
-    }, [mainColumns, compareColumnsByMainColumn, getSubtotalCellValue]);
-    const shouldInsertSubtotal = useCallback((data) => {
-        const { currentRow, nextRow, previousRow, dimensionIndex } = data;
-        const matchesNext = areDimensionsEqual(currentRow, nextRow, dimensionIndex);
-        const matchesPrevious = areDimensionsEqual(currentRow, previousRow, dimensionIndex);
-        return matchesNext && !matchesPrevious;
-    }, [areDimensionsEqual]);
-    const generateSubtotalRows = useCallback((data) => {
-        const { currentRow, nextRow, previousRow } = data;
-        const subtotals = [];
-        const subtotalLevels = dimensions.slice(0, -1);
-        subtotalLevels.forEach((_, dimensionIndex) => {
-            if (shouldInsertSubtotal({ currentRow, nextRow, previousRow, dimensionIndex })) {
-                const subtotalRow = createSubtotalRowAtLevel(currentRow, dimensionIndex);
-                subtotals.push(subtotalRow);
-            }
-        });
-        return [...subtotals, currentRow];
-    }, [createSubtotalRowAtLevel, dimensions, shouldInsertSubtotal]);
-    const buildTableWithSubtotals = useCallback(() => {
-        const rows = [];
-        tableData.rows.forEach((row, index) => {
-            const nextRow = tableData.rows[index + 1];
-            const previousRow = tableData.rows[index - 1];
-            rows.push(...generateSubtotalRows({ currentRow: row, nextRow, previousRow }));
-        });
-        return rows;
-    }, [tableData.rows, generateSubtotalRows]);
-    const rowsWithSubtotals = useMemo(() => buildTableWithSubtotals(), [buildTableWithSubtotals]);
-    return {
-        columns: mainColumns,
-        rows: rowsWithSubtotals,
-        columnsByName,
-    };
+    }, [dimensions]);
+    const createSubtotalRowAtLevel = useCallback((currentRow, dimensionIndex) => {
+        const subtotalRow = {};
+        mainColumns.forEach((column, columnIndex) => {
+            const compareColumn = compareColumnsByMainColumn[column.name];
+            const { cellValue, compareCellValue } = getSubtotalCellValue({
+                currentRow,
+                column,
+                columnIndex,
+                dimensionIndex,
+                compareColumn,
+            });
+            subtotalRow[column.name] = cellValue;
+            if (compareColumn)
+                subtotalRow[compareColumn.name] = compareCellValue;
+        });
+        subtotalRow[IS_TOTAL_ROW_FIELD] = 'true';
+        return subtotalRow;
+    }, [mainColumns, compareColumnsByMainColumn, getSubtotalCellValue]);
+    const shouldInsertSubtotal = useCallback((data) => {
+        const { currentRow, nextRow, previousRow, dimensionIndex } = data;
+        const matchesNext = areDimensionsEqual(currentRow, nextRow, dimensionIndex);
+        const matchesPrevious = areDimensionsEqual(currentRow, previousRow, dimensionIndex);
+        return matchesNext && !matchesPrevious;
+    }, [areDimensionsEqual]);
+    const generateSubtotalRows = useCallback((data) => {
+        const { currentRow, nextRow, previousRow } = data;
+        const subtotals = [];
+        const subtotalLevels = dimensions.slice(0, -1);
+        subtotalLevels.forEach((_, dimensionIndex) => {
+            if (shouldInsertSubtotal({ currentRow, nextRow, previousRow, dimensionIndex })) {
+                const subtotalRow = createSubtotalRowAtLevel(currentRow, dimensionIndex);
+                subtotals.push(subtotalRow);
+            }
+        });
+        return [...subtotals, currentRow];
+    }, [createSubtotalRowAtLevel, dimensions, shouldInsertSubtotal]);
+    const buildTableWithSubtotals = useCallback(() => {
+        const rows = [];
+        tableData.rows.forEach((row, index) => {
+            const nextRow = tableData.rows[index + 1];
+            const previousRow = tableData.rows[index - 1];
+            rows.push(...generateSubtotalRows({ currentRow: row, nextRow, previousRow }));
+        });
+        return rows;
+    }, [tableData.rows, generateSubtotalRows]);
+    const rowsWithSubtotals = useMemo(() => buildTableWithSubtotals(), [buildTableWithSubtotals]);
+    return {
+        columns: mainColumns,
+        rows: rowsWithSubtotals,
+        columnsByName,
+    };
 };
 
 const SCROLL_THRESHOLD = 2;
@@ -23865,6 +23363,114 @@ const useSyncedScroll = ({ columns }) => {
     return { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef };
 };
 
+const getColumnLayoutStyles = (columnLayout, hasTooltipCard) => {
+    return {
+        '--column-cell-min-width': columnLayout.minWidth,
+        '--column-cell-max-width': columnLayout.maxWidth,
+        '--column-cell-justify-content': columnLayout.align,
+        '--column-cell-padding-inline': columnLayout.paddingInline,
+        '--column-first-padding-inline': columnLayout.columnFirstPaddingInline,
+        '--column-wrapper-width': columnLayout.columnWrapperWidth,
+        '--column-cell-padding-right': !hasTooltipCard ? columnLayout.paddingRight : columnLayout.paddingInline,
+        '--column-header-cell-padding-right': !hasTooltipCard
+            ? columnLayout.headerPaddingRight
+            : columnLayout.paddingInline,
+        '--column-dimension-box-shadow': columnLayout.dimensionBoxShadow,
+        '--column-border-right-width': columnLayout.borderRightWidth,
+    };
+};
+
+var EOrderDirectionType;
+(function (EOrderDirectionType) {
+    EOrderDirectionType["ASC"] = "ASC";
+    EOrderDirectionType["DESC"] = "DESC";
+})(EOrderDirectionType || (EOrderDirectionType = {}));
+
+const formatReportTableDate = (dateString) => {
+    if (!dateString)
+        return 'None';
+    const date = dayjsTz(dateString);
+    const now = dayjsTz();
+    const yesterday = dayjsTz().subtract(1, 'day');
+    const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
+    const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
+    if (isToday) {
+        return `Today at ${date.format('HH:mm')}`;
+    }
+    if (isYesterday) {
+        return `Yesterday at ${date.format('HH:mm')}`;
+    }
+    const daysDiff = now.diff(date, 'day');
+    const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
+    if (isWithinWeek) {
+        return `${date.format('dddd')} at ${date.format('HH:mm')}`;
+    }
+    return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
+};
+
+const formatReportData = ({ value, formatter, getTextPrice, name, }) => {
+    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
+    if (dataTypeIsObjectOrArray)
+        return value;
+    switch (formatter) {
+        case EReportDataType.INTEGER: {
+            return numberWithCommas((value ?? 0).toString());
+        }
+        case EReportDataType.CURRENCY: {
+            return getTextPrice(value, false);
+        }
+        case EReportDataType.DATE: {
+            return formatReportTableDate(value);
+        }
+        case EReportDataType.PERCENT: {
+            if (typeof value !== 'number')
+                return calcPercentageString(0, 1, 2) ?? '';
+            return calcPercentageString(value / 100, 1, 2) ?? '';
+        }
+        case EReportDataType.DURATION: {
+            return getTimeDurationLabel(Number(value));
+        }
+        case EReportDataType.STRING: {
+            const fallbackValue = name === EReportColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
+            return value ?? fallbackValue;
+        }
+        case EReportDataType.DAY: {
+            return getFormattedByInterval(value, AnalyticInterval.DAY, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.HOUR: {
+            return getFormattedByInterval(value, AnalyticInterval.HOUR, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.MONTH: {
+            return getFormattedByInterval(value, AnalyticInterval.MONTH, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.YEAR: {
+            return getFormattedByInterval(value, AnalyticInterval.YEAR);
+        }
+        case EReportDataType.WEEK: {
+            return getFormattedByInterval(value, AnalyticInterval.WEEK, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.QUARTER: {
+            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.OBJECT:
+        case EReportDataType.ARRAY: {
+            return value;
+        }
+        default:
+            return `${value}`;
+    }
+};
+
 const useReportData = () => {
     const { getTextPrice } = useConvertMoneyContext();
     const formatData = ({ value, formatter, name, }) => {
@@ -23880,44 +23486,112 @@ const useReportData = () => {
     };
 };
 
-const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
-    const { t } = useTranslation();
-    const { onViewAllStoreOrders } = useReportTableActionsContext();
-    const isHasTotalRows = Boolean(totalRows && totalRows > 0);
-    const isHasTotalStoreOrders = Boolean(itemCount && itemCount > 0);
-    const isShowViewAllStoreOrders = isHasTotalStoreOrders && showViewAllButton;
-    const handleClickViewAllStoreOrders = () => {
-        onViewAllStoreOrders?.();
-    };
-    if (isPaginationHidden)
-        return null;
-    return (jsxs("div", { className: cls('GReportTable__Pagination', {
-            'justify-end': isShowViewAllStoreOrders,
-            'justify-center': isHasTotalRows,
-            'justify-between': (isHasTotalRows || paginationProps) && isShowViewAllStoreOrders,
-        }), children: [paginationProps && jsx(GPagination, { ...paginationProps }), isHasTotalRows && (jsx(Text, { variant: "bodyMd", as: "span", children: t('{{count}} rows', { count: totalRows }) })), isShowViewAllStoreOrders && (jsx(GMockDataTooltip, { isMockData: isMockData, children: jsx(Button, { variant: "plain", disabled: isMockData, onClick: handleClickViewAllStoreOrders, children: getViewAllStoreOrdersText() }) }))] }));
-    function getViewAllStoreOrdersText() {
-        if (itemCount && itemCount > 1) {
-            return t('View all store {{metric}}s by date range ({{itemCount}})', {
-                itemCount,
-                metric: viewAllMetricContent,
-            });
+const ReportTableActionsContext = createContext({});
+const ReportTableActionsProvider = ({ children, onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders, }) => {
+    return (jsx(ReportTableActionsContext.Provider, { value: { onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders }, children: children }));
+};
+const useReportTableActionsContext = () => useContext(ReportTableActionsContext);
+
+var GVariantBadgeType;
+(function (GVariantBadgeType) {
+    GVariantBadgeType["ORIGIN"] = "ORIGIN";
+    GVariantBadgeType["VARIANT_B"] = "VARIANT_B";
+    GVariantBadgeType["VARIANT_C"] = "VARIANT_C";
+    GVariantBadgeType["VARIANT_D"] = "VARIANT_D";
+    GVariantBadgeType["VARIANT_E"] = "VARIANT_E";
+})(GVariantBadgeType || (GVariantBadgeType = {}));
+var GVariantBadgeSize;
+(function (GVariantBadgeSize) {
+    GVariantBadgeSize["XS"] = "xs";
+    GVariantBadgeSize["SM"] = "sm";
+    GVariantBadgeSize["MD"] = "md";
+    GVariantBadgeSize["LG"] = "lg";
+})(GVariantBadgeSize || (GVariantBadgeSize = {}));
+var GVariantBadgeTone;
+(function (GVariantBadgeTone) {
+    GVariantBadgeTone["ACTIVE"] = "active";
+    GVariantBadgeTone["SUBDUED"] = "subdued";
+    GVariantBadgeTone["INACTIVE"] = "inactive";
+})(GVariantBadgeTone || (GVariantBadgeTone = {}));
+
+const GVariant = ({ variant, size, tone }) => {
+    const sizeIcon = useMemo(() => {
+        switch (size) {
+            case 'xs':
+                return '20px';
+            case 'sm':
+                return '24px';
+            case 'md':
+                return '28px';
+            case 'lg':
+                return '32px';
+            default:
+                return '28px';
         }
-        return t('View all store {{metric}} by date range(1)', { metric: viewAllMetricContent });
-    }
+    }, [size]);
+    const textColor = cls({
+        'text-variant-a': tone === 'active',
+        'text-variant-subdued': tone === 'subdued',
+        'text-variant-b': !tone || tone === 'inactive',
+    });
+    const textSize = useMemo(() => {
+        switch (size) {
+            case 'xs':
+                return 'Polaris-Text--bodyXs';
+            case 'sm':
+                return 'Polaris-Text--bodySm';
+            case 'md':
+                return 'Polaris-Text--headingMd';
+            case 'lg':
+                return 'Polaris-Text--headingMd';
+            default:
+                return 'Polaris-Text--headingMd';
+        }
+    }, [size]);
+    return (jsx(Box, { minHeight: sizeIcon, minWidth: sizeIcon, width: sizeIcon, borderRadius: "full", children: jsx("div", { className: "Polaris-GVariantBadge-Icon", style: { height: sizeIcon }, children: jsx("h2", { className: `Polaris-Text--headingMd Polaris-Text--semibold ${textColor} ${textSize}`, children: variant }) }) }));
 };
 
-const ScrollBar = forwardRef(({ isPaginationHidden }, ref) => {
-    return (jsx("div", { className: cls('GReportTable__ScrollBarContainer', {
-            'GReportTable__ScrollBarContainer--pagination-hidden': isPaginationHidden,
-        }), ref: ref, children: jsx("div", { className: "GReportTable__ScrollBar", children: jsx("div", { className: "GReportTable__ScrollBarContent" }) }) }));
-});
-ScrollBar.displayName = 'ScrollBar';
+const CAMPAIGN_BACKGROUND = {
+    ORIGIN: '#D5E5FF', //`var(--p-color-${CAMPAIGN_BACKGROUND.ORIGIN})`,
+    VARIANT: '#FDDBE2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
+    SUBDUED: '#F2F2F2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
+};
+const GVariantBadge = ({ label, variant, tone, isShowWinner, size = GVariantBadgeSize.MD, labelProps, linkAction, tooltip, hideVariant = false, }) => {
+    const { t } = useTranslation();
+    const background = tone === GVariantBadgeTone.ACTIVE
+        ? CAMPAIGN_BACKGROUND.ORIGIN
+        : tone === GVariantBadgeTone.SUBDUED
+            ? CAMPAIGN_BACKGROUND.SUBDUED
+            : CAMPAIGN_BACKGROUND.VARIANT;
+    return (jsx(Box, { maxWidth: "100%", children: jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [!hideVariant && (jsx("div", { className: "Polaris-GVariantBadge", style: { backgroundColor: background, borderRadius: '100%' }, children: jsx(GVariant, { variant: variant, size: size, tone: tone }) })), label && (jsx(GTextLink, { linkAction: linkAction, children: jsx(Text, { as: "h2", variant: "headingMd", ...labelProps, truncate: true, children: label }) })), tooltip && (jsx(GTooltip, { ...tooltip, children: jsx(Icon, { source: SvgInfoIcon }) })), isShowWinner && (jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: jsx(Badge, { tone: "success", children: t('Winner') }) }))] }) }));
+};
 
-const WrapperFooter = ({ scrollbarContainerRef, itemCount, totalPaginationRows, showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
-    return (jsxs("div", { className: "GReportTable__FooterWrapper", children: [scrollbarContainerRef && jsx(ScrollBar, { ref: scrollbarContainerRef, isPaginationHidden: isPaginationHidden }), jsx(Pagination, { totalRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden, isMockData: isMockData })] }));
+const CampaignsCellVersion = ({ version }) => {
+    if (!version)
+        return null;
+    return jsx(GVariantBadge, { variant: version, tone: version === 'A' ? 'active' : 'inactive', size: "xs" });
+};
+
+const CampaignsCell = ({ value, campaignsCellProps, }) => {
+    const { orderId, gxId, isHideCampaignContent } = campaignsCellProps ?? {};
+    const { t } = useTranslation();
+    const { onViewOrderJourney } = useReportTableActionsContext();
+    const [active, setActive] = useState(false);
+    const toggleActive = useCallback(() => setActive((active) => !active), []);
+    const campaignLeadingToOrder = value.at(0);
+    const isShowPopupCampaigns = value.length > 1 && !isHideCampaignContent;
+    if (!campaignLeadingToOrder)
+        return null;
+    return (jsx(Popover, { active: active, activator: jsxs("div", { className: cls('GReportTable__CellContent--clickable flex h-full w-full items-center px-2', {
+                'cursor-pointer': isShowPopupCampaigns,
+                'hover:!bg-[#f7f7f7]': !isShowPopupCampaigns,
+            }), onClick: isShowPopupCampaigns ? toggleActive : undefined, children: [jsx(CampaignsCellVersion, { version: campaignLeadingToOrder.version }), !isHideCampaignContent && (jsxs(Fragment, { children: [jsx(Box, { minWidth: "0", paddingInlineStart: campaignLeadingToOrder.version ? '200' : '0', children: jsx(GTextTruncated, { as: "span", variant: "bodyMd", tone: "subdued", useWrapper: true, tooltip: { hoverDelay: 300 }, children: campaignLeadingToOrder.campaign_group_name || campaignLeadingToOrder.campaign_name }) }), isShowPopupCampaigns && (jsx("span", { className: "opacity-0 group-hover/GReportTable__Row:opacity-100", children: jsx(Icon, { source: SvgCaretDownIcon }) }))] }))] }), onClose: toggleActive, children: jsxs(Box, { padding: "0", width: "340px", overflowX: "hidden", children: [jsx(Box, { padding: "300", children: jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "semibold", children: t('Experiments visited before order') }) }), jsx(Box, { borderBlockEndWidth: "025", borderBlockStartWidth: "025", borderColor: "border-secondary", children: jsx(Scrollable, { vertical: true, scrollbarWidth: "thin", horizontal: false, className: 'max-h-[216px]', children: jsx(Box, { paddingBlock: "200", children: value.map((campaign, index) => {
+                                return (jsx(Box, { paddingInline: "300", paddingBlock: "200", children: jsx(Box, { paddingBlock: "050", children: jsxs(InlineStack, { gap: "200", wrap: false, children: [jsx(CampaignsCellVersion, { version: campaign.version }), jsx(Box, { minWidth: "0", children: jsx(GTextTruncated, { as: "span", variant: "bodyMd", tone: "subdued", useWrapper: true, children: campaign.campaign_group_name || campaign.campaign_name }) })] }) }) }, index));
+                            }) }) }) }), jsx(Box, { padding: "300", children: jsx(Button, { icon: SvgChartLineIcon, fullWidth: true, onClick: () => onViewOrderJourney?.(orderId ?? '', gxId), children: t('View order journey') }) })] }) }));
 };
 
+const DateCell = ({ value, isMergedWithPrev }) => (jsx(Text, { as: "span", variant: "bodySm", children: isMergedWithPrev ? '' : value }));
+
 const PreviousCell = ({ previousValue, isMergedWithPrev }) => {
     if (isMergedWithPrev || typeof previousValue !== 'string')
         return null;
@@ -23928,9 +23602,48 @@ const WrapperCell = ({ children, previousValue, isMergedWithPrev, columnLayout,
     return (jsxs(GInlineCenter, { flexDirection: "column", align: columnLayout?.align, gap: "100", paddingBlock: "200", width: columnLayout?.columnWrapperWidth, children: [children, jsx(PreviousCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev })] }));
 };
 
-const DefaultCell = ({ isMergedWithPrev, value, previousValue, columnLayout, isTotalRow, isDimensionCol, }) => {
-    const valueString = typeof value === 'string' ? value : String(value);
-    return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-full min-w-0", children: jsx(GTextTruncated, { as: "span", variant: "bodySm", truncate: true, fontWeight: isTotalRow && !isDimensionCol ? 'semibold' : 'regular', alignment: columnLayout?.align, children: isMergedWithPrev ? '' : toCapitalize(valueString) }) }) }));
+const GemxIdCell = ({ value, isMergedWithPrev, previousValue, columnLayout }) => {
+    const valueString = typeof value === 'string' ? value : String(value);
+    return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-full min-w-0", children: jsx(GTextTruncated, { as: "span", variant: "bodySm", truncate: true, alignment: columnLayout?.align, children: isMergedWithPrev ? '' : valueString }) }) }));
+};
+
+const CheckoutStartedDetail$1 = ({ lineItems = [], activatorWrapperProps }) => {
+    const { t } = useTranslation();
+    const [active, setActive] = useState(false);
+    const toggleActive = useCallback(() => setActive((active) => !active), []);
+    if (!lineItems || lineItems.length === 0) {
+        return null;
+    }
+    return (jsx(Popover, { active: active, activator: jsx(Box, { ...activatorWrapperProps, children: jsx(Button, { variant: "tertiary", icon: active ? SvgChevronUpIcon : SvgChevronDownIcon, onClick: toggleActive }) }), onClose: toggleActive, children: jsx(Box, { padding: "300", width: "340px", children: jsx(BlockStack, { gap: "300", children: lineItems.map((product, index, self) => {
+                    const isLast = index === self.length - 1;
+                    const boxProps = {
+                        borderBlockEndWidth: '025',
+                        borderColor: 'border-secondary',
+                        paddingBlockEnd: '300',
+                    };
+                    return (jsx(Box, { ...(!isLast && boxProps), children: jsxs(InlineStack, { gap: "300", wrap: false, children: [jsx("div", { className: "size-10", children: jsx(GThumbnail, { source: product.imageURL ?? '', alt: product.productTitle ?? '', size: "small" }) }), jsxs("div", { className: "flex w-full flex-col gap-1", children: [jsxs(InlineStack, { gap: "200", align: "space-between", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: product.productTitle }), jsx("div", { className: "text-nowrap", children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: t('x {{quantity}}', { quantity: product.quantity }) }) })] }), product.title && (jsx("span", { children: jsx(Badge, { children: product.title }) }))] })] }) }, product.productID));
+                }) }) }) }));
+};
+
+const ItemsCell = ({ value }) => {
+    const { t } = useTranslation();
+    const { value: itemHovering, setTrue, setFalse } = useToggle(false);
+    const lineItems = value.map((item) => ({
+        imageURL: item.image_url,
+        productTitle: item.product_title,
+        quantity: Number(item.quantity) || 0,
+        title: item.title,
+    }));
+    const getItemText = () => {
+        const itemQuantity = value.reduce((acc, item) => acc + (Number(item.quantity) || 0), 0);
+        if (itemQuantity === 1)
+            return t('{{itemQuantity}} item', { itemQuantity });
+        return t('{{itemQuantity}} items', { itemQuantity });
+    };
+    return (jsx("div", { onMouseEnter: setTrue, onMouseLeave: setFalse, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: getItemText() }), jsx(CheckoutStartedDetail$1, { lineItems: lineItems, activatorWrapperProps: {
+                        paddingBlockStart: '100',
+                        opacity: itemHovering ? '1' : '0',
+                    } })] }) }));
 };
 
 const LoadingData = () => {
@@ -23955,10 +23668,12 @@ const OrderItem = ({ order }) => {
         return dayjsTz(date).format('MMMM D, YYYY [at] h:mm a');
     };
     const orderId = `${order[EReportColumnKey.ORDER_ID]}`;
+    const rawGxId = order[EReportColumnKey.GEMX_ID];
+    const gxId = rawGxId ? `${rawGxId}` : '';
     const date = `${order[EReportColumnKey.ORDER_DATE]}`;
     if (!orderId)
         return null;
-    return (jsx(Box, { padding: "300", borderBlockEndWidth: "025", borderColor: "border", children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", children: [jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "p", variant: "bodyMd", children: `ID: ${orderId}` }), jsx(Text, { as: "p", variant: "bodyXs", tone: "subdued", children: formatDate(date) })] }), jsxs(InlineStack, { gap: "100", children: [jsx(Tooltip$1, { content: t('View order details'), children: jsx(Button, { icon: jsx(Icon, { source: SvgOrderIcon, tone: "critical" }), variant: "tertiary", size: "slim", onClick: () => onViewOrderDetails?.(orderId) }) }), jsx(Tooltip$1, { content: t('View order journey'), children: jsx(Button, { icon: jsx(Icon, { source: SvgChartLineIcon, tone: "primary" }), variant: "tertiary", size: "slim", onClick: () => onViewOrderJourney?.(orderId) }) })] })] }) }));
+    return (jsx(Box, { padding: "300", borderBlockEndWidth: "025", borderColor: "border", children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", children: [jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "p", variant: "bodyMd", children: `ID: ${orderId}` }), jsx(Text, { as: "p", variant: "bodyXs", tone: "subdued", children: formatDate(date) }), gxId && (jsxs(InlineStack, { gap: "100", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyXs", children: t('GemX ID:') }), jsx(Box, { background: "bg-surface-emphasis-active", paddingBlock: "050", paddingInline: "150", borderRadius: "200", children: jsx(Text, { as: "span", variant: "bodySm", children: jsx("span", { style: { color: 'var(--p-color-text-emphasis-active)' }, children: gxId }) }) })] }))] }), jsxs(InlineStack, { gap: "100", children: [jsx(Tooltip$1, { content: t('View order details'), children: jsx(Button, { icon: jsx(Icon, { source: SvgOrderIcon, tone: "critical" }), variant: "tertiary", size: "slim", onClick: () => onViewOrderDetails?.(orderId) }) }), jsx(Tooltip$1, { content: t('View order journey'), children: jsx(Button, { icon: jsx(Icon, { source: SvgChartLineIcon, tone: "primary" }), variant: "tertiary", size: "slim", onClick: () => onViewOrderJourney?.(orderId, gxId) }) })] })] }) }));
 };
 
 const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow, isMockData, }) => {
@@ -23992,410 +23707,735 @@ const OrderCellContainer = ({ value, columnLayout, orderCellProps, previousValue
     return (jsxs(BlockStack, { align: "center", children: [jsx(Box, { width: "100%", children: jsx(OrderCell, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, isTotalRow: isTotalRow, isMockData: isMockData }) }), typeof previousValue === 'string' && (jsx(Box, { width: "100%", children: jsx(OrderCell, { value: previousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, isPrevious: true, isTotalRow: isTotalRow, isMockData: isMockData }) }))] }));
 };
 
-var GVariantBadgeType;
-(function (GVariantBadgeType) {
-    GVariantBadgeType["ORIGIN"] = "ORIGIN";
-    GVariantBadgeType["VARIANT_B"] = "VARIANT_B";
-    GVariantBadgeType["VARIANT_C"] = "VARIANT_C";
-    GVariantBadgeType["VARIANT_D"] = "VARIANT_D";
-    GVariantBadgeType["VARIANT_E"] = "VARIANT_E";
-})(GVariantBadgeType || (GVariantBadgeType = {}));
-var GVariantBadgeSize;
-(function (GVariantBadgeSize) {
-    GVariantBadgeSize["XS"] = "xs";
-    GVariantBadgeSize["SM"] = "sm";
-    GVariantBadgeSize["MD"] = "md";
-    GVariantBadgeSize["LG"] = "lg";
-})(GVariantBadgeSize || (GVariantBadgeSize = {}));
-var GVariantBadgeTone;
-(function (GVariantBadgeTone) {
-    GVariantBadgeTone["ACTIVE"] = "active";
-    GVariantBadgeTone["SUBDUED"] = "subdued";
-    GVariantBadgeTone["INACTIVE"] = "inactive";
-})(GVariantBadgeTone || (GVariantBadgeTone = {}));
+const OrderIdCell = ({ value, isMockData, gxId, }) => {
+    const { t } = useTranslation();
+    const [active, setActive] = useState(false);
+    const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
+    const toggleActive = useCallback(() => setActive((active) => !active), []);
+    if (isMockData) {
+        return (jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: value }));
+    }
+    return (jsx(Popover, { active: active, activator: jsx("div", { className: "GReportTable__CellContent--clickable flex h-full w-full cursor-pointer items-center rounded-md pl-3", onClick: toggleActive, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: value }), jsx("span", { className: "opacity-0 group-hover/GReportTable__Row:opacity-100", children: jsx(Icon, { source: SvgCaretDownIcon }) })] }) }), onClose: toggleActive, children: jsx(ActionList, { actionRole: "menuitem", items: [
+                {
+                    id: 'view_order_journey',
+                    content: t('View order journey'),
+                    icon: SvgChartLineIcon,
+                    onAction: () => onViewOrderJourney?.(value, gxId),
+                },
+                {
+                    id: 'view_order_details',
+                    content: t('View order details on Shopify'),
+                    icon: SvgOrderIcon,
+                    onAction: () => onViewOrderDetails?.(value),
+                },
+            ] }) }));
+};
 
-const GVariant = ({ variant, size, tone }) => {
-    const sizeIcon = useMemo(() => {
-        switch (size) {
-            case 'xs':
-                return '20px';
-            case 'sm':
-                return '24px';
-            case 'md':
-                return '28px';
-            case 'lg':
-                return '32px';
-            default:
-                return '28px';
+const VERSION_LABEL = {
+    [IVariantType.VARIANT_A]: 'Control A',
+    [IVariantType.VARIANT_B]: 'Variant B',
+};
+const VERSION_OPTIONS = [
+    { label: VERSION_LABEL[IVariantType.VARIANT_A], value: IVariantType.VARIANT_A },
+    { label: VERSION_LABEL[IVariantType.VARIANT_B], value: IVariantType.VARIANT_B },
+];
+const VersionCell = ({ value, previousValue, isMergedWithPrev, columnLayout }) => {
+    const variantValue = VERSION_OPTIONS.find((opt) => opt.label.split(' ')[1] === value);
+    if (isMergedWithPrev)
+        return '';
+    return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: variantValue && (jsx(GVariantBadge, { variant: variantValue.value, tone: variantValue.value === 'A' ? 'active' : 'inactive', size: "xs" })) }));
+};
+
+const isString = (value) => typeof value === 'string';
+const isNonEmptyArray = (value) => Array.isArray(value) && value.length > 0;
+const isOrderExperiments = (value) => {
+    return isNonEmptyArray(value);
+};
+const isOrderItems = (value) => {
+    return isNonEmptyArray(value);
+};
+const cellMap = {
+    [EDimensionKey.VERSION]: ({ value, isMergedWithPrev }) => {
+        if (!isString(value))
+            return null;
+        return jsx(VersionCell, { value: value, isMergedWithPrev: isMergedWithPrev });
+    },
+    [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData }) => {
+        if (!isString(value))
+            return null;
+        return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow, isMockData: isMockData }));
+    },
+    [EReportColumnKey.ORDER_DATE]: ({ value, isMergedWithPrev }) => {
+        if (!isString(value))
+            return null;
+        return jsx(DateCell, { value: value, isMergedWithPrev: isMergedWithPrev });
+    },
+    [EReportColumnKey.ITEMS]: ({ value }) => {
+        if (!isOrderItems(value))
+            return null;
+        return jsx(ItemsCell, { value: value });
+    },
+    [EReportColumnKey.CAMPAIGNS]: ({ value, campaignsCellProps }) => {
+        if (!isOrderExperiments(value))
+            return null;
+        return jsx(CampaignsCell, { value: value, campaignsCellProps: campaignsCellProps });
+    },
+    [EReportColumnKey.ORDER_ID]: ({ value, isMockData, gxId }) => {
+        if (!isString(value))
+            return null;
+        return jsx(OrderIdCell, { value: value, isMockData: isMockData, gxId: gxId });
+    },
+    [EReportColumnKey.GEMX_ID]: ({ value, isMergedWithPrev, previousValue, columnLayout }) => {
+        if (!isString(value))
+            return null;
+        return (jsx(GemxIdCell, { value: value, isMergedWithPrev: isMergedWithPrev, previousValue: previousValue, columnLayout: columnLayout }));
+    },
+};
+
+const DefaultCell = ({ isMergedWithPrev, value, previousValue, columnLayout, isTotalRow, isDimensionCol, }) => {
+    const valueString = typeof value === 'string' ? value : String(value);
+    return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-full min-w-0", children: jsx(GTextTruncated, { as: "span", variant: "bodySm", truncate: true, fontWeight: isTotalRow && !isDimensionCol ? 'semibold' : 'regular', alignment: columnLayout?.align, children: isMergedWithPrev ? '' : toCapitalize(valueString) }) }) }));
+};
+
+const NoneCell = ({ isMergedWithPrev, previousValue, columnLayout }) => {
+    return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-[11px] h-[2px] bg-[#8A8A8A]" }) }));
+};
+
+const TotalCell = ({ value, isTotalRow }) => (jsx(Text, { as: "span", variant: "bodySm", fontWeight: isTotalRow ? 'semibold' : 'regular', children: value }));
+
+const Cell = ({ value, gxId, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
+    const columnLayoutStyles = getColumnLayoutStyles(columnLayout, hasTooltipCard);
+    const { formatData } = useReportData();
+    const formattedValue = formatData({ value, formatter, name });
+    const formattedPreviousValue = typeof previousValue === 'undefined' ? previousValue : formatData({ value: previousValue, formatter, name });
+    const cellStyles = {
+        borderTop: isMergedWithPrev ? '0' : undefined,
+        ...columnLayoutStyles,
+    };
+    const renderContent = () => {
+        if (value === 'Total') {
+            return jsx(TotalCell, { value: value, isTotalRow: isTotalRow });
         }
-    }, [size]);
-    const textColor = cls({
-        'text-variant-a': tone === 'active',
-        'text-variant-subdued': tone === 'subdued',
-        'text-variant-b': !tone || tone === 'inactive',
-    });
-    const textSize = useMemo(() => {
-        switch (size) {
-            case 'xs':
-                return 'Polaris-Text--bodyXs';
-            case 'sm':
-                return 'Polaris-Text--bodySm';
-            case 'md':
-                return 'Polaris-Text--headingMd';
-            case 'lg':
-                return 'Polaris-Text--headingMd';
-            default:
-                return 'Polaris-Text--headingMd';
+        let Renderer = cellMap[name] ?? DefaultCell;
+        if (formattedValue === NONE_VALUE) {
+            Renderer = NoneCell;
         }
-    }, [size]);
-    return (jsx(Box, { minHeight: sizeIcon, minWidth: sizeIcon, width: sizeIcon, borderRadius: "full", children: jsx("div", { className: "Polaris-GVariantBadge-Icon", style: { height: sizeIcon }, children: jsx("h2", { className: `Polaris-Text--headingMd Polaris-Text--semibold ${textColor} ${textSize}`, children: variant }) }) }));
+        return (jsx(Renderer, { value: formattedValue, gxId: gxId, name: name, isMergedWithPrev: isMergedWithPrev, previousValue: formattedPreviousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, campaignsCellProps: campaignsCellProps, isTotalRow: isTotalRow, isDimensionCol: isDimensionCol, isMockData: isMockData }));
+    };
+    return (jsx("div", { className: cls('GReportTable__Cell', { 'GReportTable__Cell--dimension': isDimensionCol }), style: cellStyles, children: jsx("div", { className: "GReportTable__CellContent", style: columnLayoutStyles, children: renderContent() }) }));
 };
 
-const CAMPAIGN_BACKGROUND = {
-    ORIGIN: '#D5E5FF', //`var(--p-color-${CAMPAIGN_BACKGROUND.ORIGIN})`,
-    VARIANT: '#FDDBE2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
-    SUBDUED: '#F2F2F2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
-};
-const GVariantBadge = ({ label, variant, tone, isShowWinner, size = GVariantBadgeSize.MD, labelProps, linkAction, tooltip, hideVariant = false, }) => {
-    const { t } = useTranslation();
-    const background = tone === GVariantBadgeTone.ACTIVE
-        ? CAMPAIGN_BACKGROUND.ORIGIN
-        : tone === GVariantBadgeTone.SUBDUED
-            ? CAMPAIGN_BACKGROUND.SUBDUED
-            : CAMPAIGN_BACKGROUND.VARIANT;
-    return (jsx(Box, { maxWidth: "100%", children: jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [!hideVariant && (jsx("div", { className: "Polaris-GVariantBadge", style: { backgroundColor: background, borderRadius: '100%' }, children: jsx(GVariant, { variant: variant, size: size, tone: tone }) })), label && (jsx(GTextLink, { linkAction: linkAction, children: jsx(Text, { as: "h2", variant: "headingMd", ...labelProps, truncate: true, children: label }) })), tooltip && (jsx(GTooltip, { ...tooltip, children: jsx(Icon, { source: SvgInfoIcon }) })), isShowWinner && (jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: jsx(Badge, { tone: "success", children: t('Winner') }) }))] }) }));
+const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, isMockData, }) => {
+    const checkMergedWithPrev = (col) => {
+        const isDimensionCol = dimensions.includes(col);
+        let isMergedWithPrev = false;
+        if (isDimensionCol && rowIndex > 0 && prevRow) {
+            const dimIndex = dimensions.indexOf(col);
+            const allMatch = dimensions.slice(0, dimIndex + 1).every((d) => row[d] === prevRow[d]);
+            isMergedWithPrev = allMatch;
+        }
+        return isMergedWithPrev;
+    };
+    const customOrderCellProps = orderCellProps
+        ? {
+            ...orderCellProps,
+            onClickOrderCell: (data) => orderCellProps?.onClickOrderCell({ row, isPrevious: data.isPrevious }),
+        }
+        : orderCellProps;
+    return (jsx("div", { className: "GReportTable__Row group/GReportTable__Row", style: { minWidth }, children: columns.map((col) => {
+            const hasTooltipCard = !!col.tooltipCardProps;
+            const orderId = row[EReportColumnKey.ORDER_ID]?.toString() ?? '';
+            const gxId = row[EReportColumnKey.GEMX_ID]?.toString() ?? '';
+            return (jsx(Cell, { value: row[col.name], gxId: gxId, isTotalRow: row[IS_TOTAL_ROW_FIELD], previousValue: getMetricPreviousValue(row, col.name), isMergedWithPrev: checkMergedWithPrev(col.name), columnLayout: columnLayoutMap[col.name], name: col.name, campaignsCellProps: { orderId, gxId, isHideCampaignContent }, isDimensionCol: dimensions.includes(col.name), formatter: col.dataType, hasTooltipCard: hasTooltipCard, orderCellProps: customOrderCellProps, isMockData: isMockData }, col.name));
+        }) }));
 };
 
-const CampaignsCellVersion = ({ version }) => {
-    if (!version)
-        return null;
-    return jsx(GVariantBadge, { variant: version, tone: version === 'A' ? 'active' : 'inactive', size: "xs" });
+const SummaryCell = ({ currentValue, previousValue, showPrevious, columnLayout }) => {
+    return (jsxs(GInlineCenter, { flexDirection: "column", align: columnLayout.align, gap: "100", paddingBlock: "200", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: currentValue }), showPrevious && typeof previousValue !== 'object' && (jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", tone: "subdued", children: previousValue }))] }));
 };
 
-const CampaignsCell = ({ value, campaignsCellProps, }) => {
-    const { orderId, isHideCampaignContent } = campaignsCellProps ?? {};
+const SummaryRow = ({ columns, row, dimensions, summary, columnLayoutMap }) => {
     const { t } = useTranslation();
-    const { onViewOrderJourney } = useReportTableActionsContext();
-    const [active, setActive] = useState(false);
-    const toggleActive = useCallback(() => setActive((active) => !active), []);
-    const campaignLeadingToOrder = value.at(0);
-    const isShowPopupCampaigns = value.length > 1 && !isHideCampaignContent;
-    if (!campaignLeadingToOrder)
+    const { showPrevious, previousContent, content } = summary || {};
+    const { formatData } = useReportData();
+    if (summary?.hide || !dimensions.length)
         return null;
-    return (jsx(Popover, { active: active, activator: jsxs("div", { className: cls('GReportTable__CellContent--clickable flex h-full w-full items-center px-2', {
-                'cursor-pointer': isShowPopupCampaigns,
-                'hover:!bg-[#f7f7f7]': !isShowPopupCampaigns,
-            }), onClick: isShowPopupCampaigns ? toggleActive : undefined, children: [jsx(CampaignsCellVersion, { version: campaignLeadingToOrder.version }), !isHideCampaignContent && (jsxs(Fragment, { children: [jsx(Box, { minWidth: "0", paddingInlineStart: campaignLeadingToOrder.version ? '200' : '0', children: jsx(GTextTruncated, { as: "span", variant: "bodyMd", tone: "subdued", useWrapper: true, tooltip: { hoverDelay: 300 }, children: campaignLeadingToOrder.campaign_group_name || campaignLeadingToOrder.campaign_name }) }), isShowPopupCampaigns && (jsx("span", { className: "opacity-0 group-hover/GReportTable__Row:opacity-100", children: jsx(Icon, { source: SvgCaretDownIcon }) }))] }))] }), onClose: toggleActive, children: jsxs(Box, { padding: "0", width: "340px", overflowX: "hidden", children: [jsx(Box, { padding: "300", children: jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "semibold", children: t('Experiments visited before order') }) }), jsx(Box, { borderBlockEndWidth: "025", borderBlockStartWidth: "025", borderColor: "border-secondary", children: jsx(Scrollable, { vertical: true, scrollbarWidth: "thin", horizontal: false, className: 'max-h-[216px]', children: jsx(Box, { paddingBlock: "200", children: value.map((campaign, index) => {
-                                return (jsx(Box, { paddingInline: "300", paddingBlock: "200", children: jsx(Box, { paddingBlock: "050", children: jsxs(InlineStack, { gap: "200", wrap: false, children: [jsx(CampaignsCellVersion, { version: campaign.version }), jsx(Box, { minWidth: "0", children: jsx(GTextTruncated, { as: "span", variant: "bodyMd", tone: "subdued", useWrapper: true, children: campaign.campaign_group_name || campaign.campaign_name }) })] }) }) }, index));
-                            }) }) }) }), jsx(Box, { padding: "300", children: jsx(Button, { icon: SvgChartLineIcon, fullWidth: true, onClick: () => onViewOrderJourney?.(orderId ?? ''), children: t('View order journey') }) })] }) }));
+    const getCellValue = (columnName, index, formatter) => {
+        const layout = columnLayoutMap[columnName];
+        if (index === 0)
+            return (jsx(SummaryCell, { currentValue: content || t('Summary'), showPrevious: showPrevious, previousValue: previousContent, columnLayout: layout }));
+        const isDimensionCol = dimensions.includes(columnName);
+        if (isDimensionCol)
+            return '';
+        const cellValue = row?.[getTotalColumnName(columnName)];
+        const previousValue = row?.[getPreviousTotalColumnName(columnName)];
+        const formattedValue = cellValue == null ? cellValue : formatData({ value: cellValue, formatter, name: columnName });
+        const formattedPreviousValue = previousValue == null ? previousValue : formatData({ value: previousValue, formatter, name: columnName });
+        if (typeof formattedValue === 'object')
+            return '';
+        return (jsx(SummaryCell, { currentValue: formattedValue, showPrevious: showPrevious, previousValue: formattedPreviousValue, columnLayout: layout }));
+    };
+    return (jsx("div", { className: "GReportTable__Summary-Row", children: columns.map(({ name, dataType }, index) => (jsx("div", { className: "GReportTable__Summary-Cell", style: getColumnLayoutStyles(columnLayoutMap[name]), children: getCellValue(name, index, dataType) }, name))) }));
 };
 
-const VERSION_LABEL = {
-    [IVariantType.VARIANT_A]: 'Control A',
-    [IVariantType.VARIANT_B]: 'Variant B',
+const getOrderTooltip = (field, direction) => {
+    if (!reportOrderTooltip[field])
+        return DEFAULT_TOOLTIP[direction];
+    return reportOrderTooltip[field][direction];
 };
-const VERSION_OPTIONS = [
-    { label: VERSION_LABEL[IVariantType.VARIANT_A], value: IVariantType.VARIANT_A },
-    { label: VERSION_LABEL[IVariantType.VARIANT_B], value: IVariantType.VARIANT_B },
-];
-const VersionCell = ({ value, previousValue, isMergedWithPrev, columnLayout }) => {
-    const variantValue = VERSION_OPTIONS.find((opt) => opt.label.split(' ')[1] === value);
-    if (isMergedWithPrev)
-        return '';
-    return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: variantValue && (jsx(GVariantBadge, { variant: variantValue.value, tone: variantValue.value === 'A' ? 'active' : 'inactive', size: "xs" })) }));
+
+const SortableHeaderWithTooltip = ({ item, orderBy, onChangeOrderBy }) => {
+    const { displayName, name, tooltipCardProps } = item;
+    return (jsxs(InlineStack, { gap: "050", blockAlign: "center", children: [jsx(GTooltipCard, { ...tooltipCardProps, children: jsx(Text, { as: "span", variant: "bodySm", fontWeight: "medium", truncate: true, tone: "subdued", children: displayName }) }), hasOrderByName(name) && (jsx("div", { className: "-mb-1", children: jsx(GButton, { variant: "plain", icon: getOrderIcon(name), tooltip: getSortTooltip(name), onClick: () => onChangeOrderBy?.(name) }) }))] }));
+    function hasOrderByName(name) {
+        const orderByField = orderBy?.[name];
+        return !!orderByField;
+    }
+    function getSortTooltip(name) {
+        const orderByField = orderBy?.[name];
+        if (!hasOrderByName(name) || !orderByField)
+            return undefined;
+        const content = getOrderTooltip(name, orderByField?.direction);
+        return { content };
+    }
+    function getOrderIcon(name) {
+        const orderByField = orderBy?.[name];
+        if (!orderByField)
+            return SvgArrowUpIcon;
+        return orderByField.direction === EOrderDirectionType.ASC ? SvgArrowUpIcon : SvgArrowDownIcon;
+    }
 };
 
-const OrderIdCell = ({ value, isMockData }) => {
-    const { t } = useTranslation();
-    const [active, setActive] = useState(false);
-    const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
-    const toggleActive = useCallback(() => setActive((active) => !active), []);
-    if (isMockData) {
-        return (jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: value }));
+const SortableHeader = ({ item, orderBy, itemHovering, onChangeOrderBy }) => {
+    const { displayName, name } = item;
+    function getTooltipInfo(name) {
+        const orderByField = orderBy?.[name];
+        const content = getOrderTooltip(name, orderByField?.direction || EOrderDirectionType.ASC);
+        return { content };
     }
-    return (jsx(Popover, { active: active, activator: jsx("div", { className: "GReportTable__CellContent--clickable flex h-full w-full cursor-pointer items-center rounded-md pl-3", onClick: toggleActive, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: value }), jsx("span", { className: "opacity-0 group-hover/GReportTable__Row:opacity-100", children: jsx(Icon, { source: SvgCaretDownIcon }) })] }) }), onClose: toggleActive, children: jsx(ActionList, { actionRole: "menuitem", items: [
-                {
-                    id: 'view_order_journey',
-                    content: t('View order journey'),
-                    icon: SvgChartLineIcon,
-                    onAction: () => onViewOrderJourney?.(value),
-                },
-                {
-                    id: 'view_order_details',
-                    content: t('View order details on Shopify'),
-                    icon: SvgOrderIcon,
-                    onAction: () => onViewOrderDetails?.(value),
-                },
-            ] }) }));
+    function getOpacity(name) {
+        return itemHovering === name ? '1' : '0';
+    }
+    function getOrderIcon(name) {
+        const orderByField = orderBy?.[name];
+        if (!orderByField)
+            return SvgSortAscendingIcon;
+        return orderByField.direction === EOrderDirectionType.ASC ? SvgSortAscendingIcon : SvgSortDescendingIcon;
+    }
+    return (jsxs("button", { className: "GReportTable-SortableHeaderButton", onClick: () => onChangeOrderBy?.(name), children: [jsx("div", { className: "min-w-0", children: jsx(GTextTruncated, { as: "p", variant: "bodySm", fontWeight: "medium", tone: "subdued", tooltip: getTooltipInfo(name), children: displayName }) }), jsx(Box, { opacity: getOpacity(name), children: jsx(Icon, { source: getOrderIcon(name) }) })] }));
 };
 
-const DateCell = ({ value, isMergedWithPrev }) => (jsx(Text, { as: "span", variant: "bodySm", children: isMergedWithPrev ? '' : value }));
+const Header = ({ columns, columnLayoutMap, activeColumn, orderBy, showSummary, onChangeOrderBy, }) => {
+    const [itemHovering, setItemHovering] = useState();
+    return (jsx("div", { className: cls('GReportTable__Header', {
+            'GReportTable__Header--hide-summary': !showSummary,
+        }), children: columns.map((item) => {
+            const isTooltipCard = !!item.tooltipCardProps;
+            const SortableHeaderComponent = isTooltipCard ? SortableHeaderWithTooltip : SortableHeader;
+            return (jsxs("div", { className: "GReportTable__Header-Cell", style: getColumnLayoutStyles(columnLayoutMap[item.name]), onMouseEnter: () => setItemHovering(item.name), onMouseLeave: () => setItemHovering(undefined), children: [activeColumn === item.name && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) })), jsx(SortableHeaderComponent, { item: item, orderBy: orderBy, itemHovering: itemHovering, onChangeOrderBy: onChangeOrderBy, ...item.tooltipCardProps })] }, item.name));
+        }) }));
+};
 
-const CheckoutStartedDetail$1 = ({ lineItems = [], activatorWrapperProps }) => {
+const WrapperHeader = forwardRef(({ columns, dimensions, row, columnLayoutMap, activeColumn, orderBy, summary, minWidth, onChangeOrderBy }, ref) => {
+    return (jsx("div", { className: "GReportTable__StickyHeader", ref: ref, children: jsxs("div", { style: { minWidth }, children: [jsx(Header, { columns: columns, columnLayoutMap: columnLayoutMap, activeColumn: activeColumn, orderBy: orderBy, showSummary: !summary?.hide && !!dimensions.length, onChangeOrderBy: onChangeOrderBy }), jsx(SummaryRow, { columns: columns, row: row, dimensions: dimensions, summary: summary, columnLayoutMap: columnLayoutMap })] }) }));
+});
+WrapperHeader.displayName = 'WrapperHeader';
+
+const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
     const { t } = useTranslation();
-    const [active, setActive] = useState(false);
-    const toggleActive = useCallback(() => setActive((active) => !active), []);
-    if (!lineItems || lineItems.length === 0) {
+    const { onViewAllStoreOrders } = useReportTableActionsContext();
+    const isHasTotalRows = Boolean(totalRows && totalRows > 0);
+    const isHasTotalStoreOrders = Boolean(itemCount && itemCount > 0);
+    const isShowViewAllStoreOrders = isHasTotalStoreOrders && showViewAllButton;
+    const handleClickViewAllStoreOrders = () => {
+        onViewAllStoreOrders?.();
+    };
+    if (isPaginationHidden)
         return null;
+    return (jsxs("div", { className: cls('GReportTable__Pagination', {
+            'justify-end': isShowViewAllStoreOrders,
+            'justify-center': isHasTotalRows,
+            'justify-between': (isHasTotalRows || paginationProps) && isShowViewAllStoreOrders,
+        }), children: [paginationProps && jsx(GPagination, { ...paginationProps }), isHasTotalRows && (jsx(Text, { variant: "bodyMd", as: "span", children: t('{{count}} rows', { count: totalRows }) })), isShowViewAllStoreOrders && (jsx(GMockDataTooltip, { isMockData: isMockData, children: jsx(Button, { variant: "plain", disabled: isMockData, onClick: handleClickViewAllStoreOrders, children: getViewAllStoreOrdersText() }) }))] }));
+    function getViewAllStoreOrdersText() {
+        if (itemCount && itemCount > 1) {
+            return t('View all store {{metric}}s by date range ({{itemCount}})', {
+                itemCount,
+                metric: viewAllMetricContent,
+            });
+        }
+        return t('View all store {{metric}} by date range(1)', { metric: viewAllMetricContent });
     }
-    return (jsx(Popover, { active: active, activator: jsx(Box, { ...activatorWrapperProps, children: jsx(Button, { variant: "tertiary", icon: active ? SvgChevronUpIcon : SvgChevronDownIcon, onClick: toggleActive }) }), onClose: toggleActive, children: jsx(Box, { padding: "300", width: "340px", children: jsx(BlockStack, { gap: "300", children: lineItems.map((product, index, self) => {
-                    const isLast = index === self.length - 1;
-                    const boxProps = {
-                        borderBlockEndWidth: '025',
-                        borderColor: 'border-secondary',
-                        paddingBlockEnd: '300',
-                    };
-                    return (jsx(Box, { ...(!isLast && boxProps), children: jsxs(InlineStack, { gap: "300", wrap: false, children: [jsx("div", { className: "size-10", children: jsx(GThumbnail, { source: product.imageURL ?? '', alt: product.productTitle ?? '', size: "small" }) }), jsxs("div", { className: "flex w-full flex-col gap-1", children: [jsxs(InlineStack, { gap: "200", align: "space-between", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: product.productTitle }), jsx("div", { className: "text-nowrap", children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: t('x {{quantity}}', { quantity: product.quantity }) }) })] }), product.title && (jsx("span", { children: jsx(Badge, { children: product.title }) }))] })] }) }, product.productID));
-                }) }) }) }));
 };
 
-const ItemsCell = ({ value }) => {
-    const { t } = useTranslation();
-    const { value: itemHovering, setTrue, setFalse } = useToggle(false);
-    const lineItems = value.map((item) => ({
-        imageURL: item.image_url,
-        productTitle: item.product_title,
-        quantity: Number(item.quantity) || 0,
-        title: item.title,
-    }));
-    const getItemText = () => {
-        const itemQuantity = value.reduce((acc, item) => acc + (Number(item.quantity) || 0), 0);
-        if (itemQuantity === 1)
-            return t('{{itemQuantity}} item', { itemQuantity });
-        return t('{{itemQuantity}} items', { itemQuantity });
+const ScrollBar = forwardRef(({ isPaginationHidden }, ref) => {
+    return (jsx("div", { className: cls('GReportTable__ScrollBarContainer', {
+            'GReportTable__ScrollBarContainer--pagination-hidden': isPaginationHidden,
+        }), ref: ref, children: jsx("div", { className: "GReportTable__ScrollBar", children: jsx("div", { className: "GReportTable__ScrollBarContent" }) }) }));
+});
+ScrollBar.displayName = 'ScrollBar';
+
+const WrapperFooter = ({ scrollbarContainerRef, itemCount, totalPaginationRows, showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
+    return (jsxs("div", { className: "GReportTable__FooterWrapper", children: [scrollbarContainerRef && jsx(ScrollBar, { ref: scrollbarContainerRef, isPaginationHidden: isPaginationHidden }), jsx(Pagination, { totalRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden, isMockData: isMockData })] }));
+};
+
+var GEMX_LOGO = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAzOCA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4MzQzXzMwMTI3KSI+CjxwYXRoIGQ9Ik0yMi43Nzc4IDEuODk4NjdMMTkuNTU5IDcuNzcyMDZDMTkuNTMyNCA3LjgyNDYyIDE5LjUzMjQgNy44OTAzMiAxOS41NTkgNy45NDI4OEwyNi40NjIyIDIwLjU0MzdDMjYuNTI4NyAyMC42Njg2IDI2LjcwODMgMjAuNjY4NiAyNi43NzQ4IDIwLjU0MzdMMzcuODg3NyAwLjI2Mjc5MkMzNy45NTQyIDAuMTQ0NTM1IDM3Ljg2NzggMCAzNy43MjgxIDBIMjYuMDAzM0MyNC42NTMzIDAgMjMuNDE2MyAwLjcyOTI0NyAyMi43Nzc4IDEuODk4NjdaIiBmaWxsPSIjQ0NDQ0NDIi8+CjxwYXRoIGQ9Ik0xMi4zODI5IDBIMC40NTE5OTVDMC4xMTI4MjEgMCAtMC4xMDY2NDUgMC4zNjEzMzggMC4wNTk2MTY4IDAuNjU2OTc5TDExLjA5OTQgMjAuODEzMUwwLjA1Mjk2NjMgNDAuOTgyNEMtMC4xMDY2NDUgNDEuMjc4IDAuMTA2MTcgNDEuNjM5MyAwLjQ1MTk5NSA0MS42MzkzSDEyLjM1NjNDMTIuNjIyNCA0MS42MzkzIDEyLjg3NTEgNDEuNDk0OCAxMy4wMDE0IDQxLjI1ODNMMjQuMDQxMiAyMS4xMDIyQzI0LjE0NzYgMjAuOTExNiAyNC4xNDc2IDIwLjY3NTEgMjQuMDQxMiAyMC40ODQ2TDEzLjAyOCAwLjM4MTA0OEMxMi45MDE3IDAuMTQ0NTM1IDEyLjY1NTYgMCAxMi4zODI5IDBaIiBmaWxsPSIjQ0NDQ0NDIi8+CjxwYXRoIGQ9Ik0yMi43Nzc4IDM5Ljc5OTdMMTkuNTU5IDMzLjkyNjNDMTkuNTMyNCAzMy44NzM4IDE5LjUzMjQgMzMuODA4MSAxOS41NTkgMzMuNzU1NUwyNi40NjIyIDIxLjE1NDdDMjYuNTI4NyAyMS4wMjk4IDI2LjcwODMgMjEuMDI5OCAyNi43NzQ4IDIxLjE1NDdMMzcuODgxMSA0MS40MzU2QzM3Ljk0NzYgNDEuNTUzOSAzNy44NjExIDQxLjY5ODQgMzcuNzIxNSA0MS42OTg0SDI1Ljk5NjdDMjQuNjQ2NiA0MS42OTg0IDIzLjQwOTYgNDAuOTY5MSAyMi43NzEyIDM5Ljc5OTdIMjIuNzc3OFoiIGZpbGw9IiNDQ0NDQ0MiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zODM0M18zMDEyNyI+CjxyZWN0IHdpZHRoPSIzNy45MDc3IiBoZWlnaHQ9IjQxLjY5ODUiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
+
+const COLOR_NORMAL = '#FFFFFF';
+const COLOR_ACTIVE = '#F8F8F8';
+const ReportTableSkeleton = ({ rows = 3, columns = 2, startBackgroundColor = 'normal', hiddenPagination = true, showLogo = false, }) => {
+    const colors = startBackgroundColor === 'normal' ? [COLOR_NORMAL, COLOR_ACTIVE] : [COLOR_ACTIVE, COLOR_NORMAL];
+    const getRowColor = (index) => colors[index % 2];
+    const getColJustify = (colIndex) => {
+        if (colIndex === 0)
+            return 'start';
+        if (colIndex === columns - 1)
+            return 'end';
+        return 'center';
     };
-    return (jsx("div", { onMouseEnter: setTrue, onMouseLeave: setFalse, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: getItemText() }), jsx(CheckoutStartedDetail$1, { lineItems: lineItems, activatorWrapperProps: {
-                        paddingBlockStart: '100',
-                        opacity: itemHovering ? '1' : '0',
-                    } })] }) }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: cls('GReportTable__Container', {
+                    'GReportTable__Container--pagination-hidden': hiddenPagination,
+                }), children: jsx("div", { className: "GReportTable__Wrapper", children: jsx("div", { className: "GReportTable__ScrollWrap", children: Array.from({ length: rows }).map((_, rowIndex) => (jsx("div", { className: "GReportTable__Row", children: Array.from({ length: columns }).map((_, colIndex) => (jsx("div", { className: "GReportTable__Cell !border-r-0 px-5", style: {
+                                    backgroundColor: getRowColor(rowIndex),
+                                    ...getColumnLayoutStyles({
+                                        align: getColJustify(colIndex),
+                                    }),
+                                }, children: jsx(Box, { width: "92px", children: jsx(SkeletonBodyText, { lines: 1 }) }) }, colIndex))) }, rowIndex))) }) }) }), showLogo && (jsx(GInlineCenter, { align: "center", inlineAlign: "center", minHeight: "320px", children: jsx("img", { src: GEMX_LOGO, alt: "Gemx", width: 38, height: 42 }) }))] }));
 };
 
-const isString = (value) => typeof value === 'string';
-const isNonEmptyArray = (value) => Array.isArray(value) && value.length > 0;
-const isOrderExperiments = (value) => {
-    return isNonEmptyArray(value);
+const mockDimensions = ['session_device_type', 'month', 'session_country', 'session_device_os'];
+const mockMetrics = ['online_store_visitors', 'sessions', 'bounces'];
+const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data, activeColumn, orderBy, options, paginationProps, itemCount, dimensionLayout, metricLayouts, orderCellProps, isHideCampaignContent = false, showViewAllButton, emptyStateComponent, isLoading, isMockData, onChangeOrderBy, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, skeletons, }) => {
+    const { summary = {}, hideBorderTop, hidePaginationRow } = options ?? {};
+    const { columns, rows } = useReportTable({ dimensions, metrics, tableData: data ?? { columns: [], rows: [] } });
+    const { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef } = useSyncedScroll({ columns });
+    const tableDimensionLayout = dimensionLayout ?? DEFAULT_DIMENSION_LAYOUT;
+    const isEmpty = rows.length === 0;
+    const totalPaginationRows = hidePaginationRow ? 0 : rows.length;
+    const isHasTotalRows = Boolean(totalPaginationRows && totalPaginationRows > 0);
+    const isPaginationHidden = !isHasTotalRows && !showViewAllButton && !paginationProps;
+    const columnLayoutMap = useMemo(() => {
+        return columns.reduce((acc, col) => {
+            const tableMetricLayout = metricLayouts?.[col.name] ?? DEFAULT_METRIC_LAYOUT;
+            acc[col.name] = dimensions.includes(col.name) ? tableDimensionLayout : tableMetricLayout;
+            return acc;
+        }, {});
+    }, [columns, metricLayouts, tableDimensionLayout, dimensions]);
+    const totalTableWidth = useMemo(() => {
+        return columns.reduce((acc, col) => {
+            const layout = columnLayoutMap[col.name];
+            const widthStr = layout?.minWidth || '0';
+            const widthVal = parseInt(widthStr, 10) || 0;
+            return acc + widthVal;
+        }, 0);
+    }, [columns, columnLayoutMap]);
+    if (isLoading)
+        return jsx(ReportTableSkeleton, { ...skeletons });
+    if (isEmpty)
+        return emptyStateComponent ? (jsx(ReportTableActionsProvider, { onViewAllStoreOrders: onViewAllStoreOrders, children: renderEmptyState() })) : null;
+    return (jsx(ReportTableActionsProvider, { onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, onViewAllStoreOrders: onViewAllStoreOrders, children: jsxs("div", { className: cls('GReportTable__Container', {
+                'GReportTable__Container--border-top': !hideBorderTop,
+                'GReportTable__Container--pagination-hidden': isPaginationHidden,
+            }), children: [jsxs("div", { className: "GReportTable__Wrapper", children: [jsx(WrapperHeader, { columns: columns, dimensions: dimensions, row: data?.rows[0], ref: headerRef, columnLayoutMap: columnLayoutMap, activeColumn: activeColumn, orderBy: orderBy, summary: summary, onChangeOrderBy: onChangeOrderBy, minWidth: totalTableWidth }), jsx("div", { className: "GReportTable__ScrollWrap", ref: bodyRef, children: rows.map((row, index) => (jsx(Row, { row: row, rowIndex: index, columns: columns, dimensions: dimensions, prevRow: rows[index - 1], columnLayoutMap: columnLayoutMap, orderCellProps: orderCellProps, isHideCampaignContent: isHideCampaignContent, minWidth: totalTableWidth, isMockData: isMockData }, index))) })] }), jsx(WrapperFooter, { scrollbarContainerRef: scrollbarContainerRef, totalPaginationRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden, isMockData: isMockData }), jsx("div", { className: "GReportTable__LeftShadow", style: { left: tableDimensionLayout.width }, ref: leftShadowRef }), jsx("div", { className: "GReportTable__RightShadow", ref: rightShadowRef })] }) }));
+    function renderEmptyState() {
+        return (jsxs("div", { className: cls('GReportTable__Container', {
+                'GReportTable__Container--border-top': !hideBorderTop,
+            }), children: [emptyStateComponent, jsx(WrapperFooter, { totalPaginationRows: 0, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: true, isMockData: isMockData })] }));
+    }
 };
-const isOrderItems = (value) => {
-    return isNonEmptyArray(value);
+
+const ORDER_LISTING_DIMENSION_LAYOUT = {
+    width: '158px',
+    minWidth: '158px',
+    maxWidth: '158px',
+    paddingInline: '12px',
+    columnFirstPaddingInline: '12px',
+    align: 'start',
+    dimensionBoxShadow: 'none',
+    borderRightWidth: '0px',
+};
+// Remaining space after fixed Order ID column
+const METRIC_COLUMN_MAX_WIDTH = `max(var(--column-cell-min-width), calc(100% - ${ORDER_LISTING_DIMENSION_LAYOUT.width}))`;
+const ORDER_LISTING_METRIC_LAYOUTS = {
+    [EReportColumnKey.GEMX_ID]: {
+        minWidth: '120px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'start',
+        columnWrapperWidth: '100%',
+    },
+    [EReportColumnKey.ORDER_DATE]: {
+        minWidth: '170px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'start',
+    },
+    [EReportColumnKey.TOTAL]: {
+        minWidth: '96px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'end',
+    },
+    [EReportColumnKey.CAMPAIGNS]: {
+        minWidth: '128px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'start',
+        columnWrapperWidth: '100%',
+    },
+    [EReportColumnKey.TRAFFIC_SOURCE]: {
+        minWidth: '120px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'start',
+    },
+    [EReportColumnKey.DEVICE]: {
+        minWidth: '120px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'start',
+    },
+    [EReportColumnKey.VISITOR]: {
+        minWidth: '120px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'start',
+    },
+    [EReportColumnKey.ITEMS]: {
+        minWidth: '120px',
+        maxWidth: METRIC_COLUMN_MAX_WIDTH,
+        align: 'start',
+    },
 };
-const cellMap = {
-    [EDimensionKey.VERSION]: ({ value, isMergedWithPrev }) => {
-        if (!isString(value))
-            return null;
-        return jsx(VersionCell, { value: value, isMergedWithPrev: isMergedWithPrev });
+const ORDER_LISTING_COLUMNS = [
+    {
+        name: EReportColumnKey.ORDER_ID,
+        dataType: EReportDataType.STRING,
+        displayName: 'Order ID',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Order ID',
+                content: 'Shopify identifier for the order',
+                width: 'wide',
+            },
+        },
     },
-    [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData }) => {
-        if (!isString(value))
-            return null;
-        return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow, isMockData: isMockData }));
+    {
+        name: EReportColumnKey.GEMX_ID,
+        dataType: EReportDataType.STRING,
+        displayName: 'GemX ID',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'GemX ID',
+                content: 'A tracking ID GemX attaches to the order so you can trace where it came from',
+                width: 'wide',
+            },
+        },
     },
-    [EReportColumnKey.ORDER_DATE]: ({ value, isMergedWithPrev }) => {
-        if (!isString(value))
-            return null;
-        return jsx(DateCell, { value: value, isMergedWithPrev: isMergedWithPrev });
+    {
+        name: EReportColumnKey.ORDER_DATE,
+        dataType: EReportDataType.DATE,
+        displayName: 'Date',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Date',
+                content: 'Date when the order was placed',
+                width: 'wide',
+            },
+        },
     },
-    [EReportColumnKey.ITEMS]: ({ value }) => {
-        if (!isOrderItems(value))
-            return null;
-        return jsx(ItemsCell, { value: value });
+    {
+        name: EReportColumnKey.TOTAL,
+        dataType: EReportDataType.CURRENCY,
+        displayName: 'Total',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Total',
+                content: 'The money amount customers paid for the order',
+                width: 'wide',
+            },
+        },
     },
-    [EReportColumnKey.CAMPAIGNS]: ({ value, campaignsCellProps }) => {
-        if (!isOrderExperiments(value))
-            return null;
-        return jsx(CampaignsCell, { value: value, campaignsCellProps: campaignsCellProps });
+    {
+        name: EReportColumnKey.CAMPAIGNS,
+        dataType: EReportDataType.OBJECT,
+        displayName: 'Experiment version',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Experiment',
+                content: 'The specific template variant shown to the customer that resulted in the order',
+                width: 'wide',
+            },
+        },
     },
-    [EReportColumnKey.ORDER_ID]: ({ value, isMockData }) => {
-        if (!isString(value))
-            return null;
-        return jsx(OrderIdCell, { value: value, isMockData: isMockData });
+    {
+        name: EReportColumnKey.TRAFFIC_SOURCE,
+        dataType: EReportDataType.STRING,
+        displayName: 'Traffic source',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Traffic source',
+                content: 'Where your customers came from',
+                width: 'wide',
+            },
+        },
+    },
+    {
+        name: EReportColumnKey.DEVICE,
+        dataType: EReportDataType.STRING,
+        displayName: 'Device',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Device',
+                content: 'Device customers used to place the order',
+                width: 'wide',
+            },
+        },
+    },
+    {
+        name: EReportColumnKey.VISITOR,
+        dataType: EReportDataType.STRING,
+        displayName: 'Customer type',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Customer type',
+                content: 'Customers who placed the order',
+                width: 'wide',
+            },
+        },
+    },
+    {
+        name: EReportColumnKey.ITEMS,
+        dataType: EReportDataType.OBJECT,
+        displayName: 'Items',
+        tooltipCardProps: {
+            tooltip: {
+                title: 'Items',
+                content: 'Number of units across all line items in the order',
+                width: 'wide',
+            },
+        },
     },
+];
+const ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE = ORDER_LISTING_COLUMNS.filter((column) => ![EReportColumnKey.CAMPAIGNS, EReportColumnKey.GEMX_ID].includes(column.name));
+const ORDER_LISTING_METRICS = [
+    EReportColumnKey.GEMX_ID,
+    EReportColumnKey.ORDER_DATE,
+    EReportColumnKey.TOTAL,
+    EReportColumnKey.CAMPAIGNS,
+    EReportColumnKey.TRAFFIC_SOURCE,
+    EReportColumnKey.DEVICE,
+    EReportColumnKey.VISITOR,
+    EReportColumnKey.ITEMS,
+];
+const ORDER_LISTING_DIMENSIONS = ['order_id'];
+const ORDER_LISTING_CONFIG = {
+    SHOW_LATEST_ORDER_LISTING_AMOUNT: 5,
 };
+const SORT_ORDER_LISTING_DEFAULT = [`${EReportColumnKey.ORDER_DATE} desc`];
 
-const TotalCell = ({ value, isTotalRow }) => (jsx(Text, { as: "span", variant: "bodySm", fontWeight: isTotalRow ? 'semibold' : 'regular', children: value }));
-
-const NoneCell = ({ isMergedWithPrev, previousValue, columnLayout }) => {
-    return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-[11px] h-[2px] bg-[#8A8A8A]" }) }));
+const ORDER_COLUMN_MAPPING = {
+    [EReportColumnKey.ORDER_ID]: {
+        label: 'Order ID',
+        value: EReportColumnKey.ORDER_ID,
+    },
+    [EReportColumnKey.GEMX_ID]: {
+        label: 'GemX ID',
+        value: EReportColumnKey.GEMX_ID,
+    },
+    [EReportColumnKey.ORDER_DATE]: {
+        label: 'Date',
+        value: EReportColumnKey.ORDER_DATE,
+    },
+    [EReportColumnKey.TOTAL]: {
+        label: 'Total',
+        value: EReportColumnKey.TOTAL,
+    },
+    [EReportColumnKey.CAMPAIGNS]: {
+        label: 'Experiment version',
+        value: EReportColumnKey.CAMPAIGNS,
+    },
+    [EReportColumnKey.TRAFFIC_SOURCE]: {
+        label: 'Traffic source',
+        value: EReportColumnKey.TRAFFIC_SOURCE,
+    },
+    [EReportColumnKey.DEVICE]: {
+        label: 'Device',
+        value: EReportColumnKey.DEVICE,
+    },
+    [EReportColumnKey.VISITOR]: {
+        label: 'Customer type',
+        value: EReportColumnKey.VISITOR,
+    },
+    [EReportColumnKey.ITEMS]: {
+        label: 'Items',
+        value: EReportColumnKey.ITEMS,
+    },
 };
+const DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT = [
+    EReportColumnKey.ORDER_ID,
+    EReportColumnKey.GEMX_ID,
+    EReportColumnKey.ORDER_DATE,
+    EReportColumnKey.TOTAL,
+    EReportColumnKey.CAMPAIGNS,
+    EReportColumnKey.TRAFFIC_SOURCE,
+    EReportColumnKey.DEVICE,
+    EReportColumnKey.VISITOR,
+];
 
-const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
-    const columnLayoutStyles = getColumnLayoutStyles(columnLayout, hasTooltipCard);
-    const { formatData } = useReportData();
-    const formattedValue = formatData({ value, formatter, name });
-    const formattedPreviousValue = typeof previousValue === 'undefined' ? previousValue : formatData({ value: previousValue, formatter, name });
-    const cellStyles = {
-        borderTop: isMergedWithPrev ? '0' : undefined,
-        ...columnLayoutStyles,
-    };
-    const renderContent = () => {
-        if (value === 'Total') {
-            return jsx(TotalCell, { value: value, isTotalRow: isTotalRow });
-        }
-        let Renderer = cellMap[name] ?? DefaultCell;
-        if (formattedValue === NONE_VALUE) {
-            Renderer = NoneCell;
-        }
-        return (jsx(Renderer, { value: formattedValue, name: name, isMergedWithPrev: isMergedWithPrev, previousValue: formattedPreviousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, campaignsCellProps: campaignsCellProps, isTotalRow: isTotalRow, isDimensionCol: isDimensionCol, isMockData: isMockData }));
-    };
-    return (jsx("div", { className: cls('GReportTable__Cell', { 'GReportTable__Cell--dimension': isDimensionCol }), style: cellStyles, children: jsx("div", { className: "GReportTable__CellContent", style: columnLayoutStyles, children: renderContent() }) }));
+const convertOrderItemsToReportTableRows = (orderItems) => {
+    return orderItems.map((orderItem) => {
+        const { events: _events, ...restOrderItem } = orderItem;
+        return {
+            ...restOrderItem,
+            items: typeof orderItem.items === 'string' ? JSON.parse(orderItem.items) : (orderItem.items ?? []),
+            experiments: typeof orderItem.experiments === 'string' ? JSON.parse(orderItem.experiments) : (orderItem.experiments ?? []),
+        };
+    });
 };
-
-const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, isMockData, }) => {
-    const checkMergedWithPrev = (col) => {
-        const isDimensionCol = dimensions.includes(col);
-        let isMergedWithPrev = false;
-        if (isDimensionCol && rowIndex > 0 && prevRow) {
-            const dimIndex = dimensions.indexOf(col);
-            const allMatch = dimensions.slice(0, dimIndex + 1).every((d) => row[d] === prevRow[d]);
-            isMergedWithPrev = allMatch;
+const applyTotalToSummaryRow = (rows) => {
+    let totalPrice = 0;
+    let totalItems = 0;
+    rows.forEach((row) => {
+        const rowTotal = row[EReportColumnKey.TOTAL];
+        const rowItems = row[EReportColumnKey.ITEMS];
+        if (typeof rowTotal === 'number') {
+            totalPrice += rowTotal;
         }
-        return isMergedWithPrev;
-    };
-    const customOrderCellProps = orderCellProps
-        ? {
-            ...orderCellProps,
-            onClickOrderCell: (data) => orderCellProps?.onClickOrderCell({ row, isPrevious: data.isPrevious }),
+        if (Array.isArray(rowItems)) {
+            totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
         }
-        : orderCellProps;
-    return (jsx("div", { className: "GReportTable__Row group/GReportTable__Row", style: { minWidth }, children: columns.map((col) => {
-            const hasTooltipCard = !!col.tooltipCardProps;
-            const orderId = row[EReportColumnKey.ORDER_ID]?.toString() ?? '';
-            return (jsx(Cell, { value: row[col.name], isTotalRow: row[IS_TOTAL_ROW_FIELD], previousValue: getMetricPreviousValue(row, col.name), isMergedWithPrev: checkMergedWithPrev(col.name), columnLayout: columnLayoutMap[col.name], name: col.name, campaignsCellProps: { orderId, isHideCampaignContent }, isDimensionCol: dimensions.includes(col.name), formatter: col.dataType, hasTooltipCard: hasTooltipCard, orderCellProps: customOrderCellProps, isMockData: isMockData }, col.name));
-        }) }));
+    });
+    return rows.map((row, index) => {
+        const totalItemsLabel = totalItems > 1 ? `${totalItems} items` : `${totalItems} item`;
+        return {
+            // Only add totals to first row (used by SummaryRow)
+            ...(index === 0 && {
+                [getTotalColumnName(EReportColumnKey.TOTAL)]: totalPrice,
+                [getTotalColumnName(EReportColumnKey.ITEMS)]: totalItemsLabel,
+            }),
+            ...row,
+        };
+    });
 };
 
-const SummaryCell = ({ currentValue, previousValue, showPrevious, columnLayout }) => {
-    return (jsxs(GInlineCenter, { flexDirection: "column", align: columnLayout.align, gap: "100", paddingBlock: "200", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: currentValue }), showPrevious && typeof previousValue !== 'object' && (jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", tone: "subdued", children: previousValue }))] }));
-};
+const useOrderControlStore = create()((set) => ({
+    orderBy: { field: EReportColumnKey.ORDER_DATE, direction: EOrderDirectionType.DESC },
+    changeOrderBy: (newOrderBy) => set(() => ({ orderBy: newOrderBy })),
+}));
 
-const SummaryRow = ({ columns, row, dimensions, summary, columnLayoutMap }) => {
-    const { t } = useTranslation();
-    const { showPrevious, previousContent, content } = summary || {};
-    const { formatData } = useReportData();
-    if (summary?.hide || !dimensions.length)
-        return null;
-    const getCellValue = (columnName, index, formatter) => {
-        const layout = columnLayoutMap[columnName];
-        if (index === 0)
-            return (jsx(SummaryCell, { currentValue: content || t('Summary'), showPrevious: showPrevious, previousValue: previousContent, columnLayout: layout }));
-        const isDimensionCol = dimensions.includes(columnName);
-        if (isDimensionCol)
-            return '';
-        const cellValue = row?.[getTotalColumnName(columnName)];
-        const previousValue = row?.[getPreviousTotalColumnName(columnName)];
-        const formattedValue = cellValue == null ? cellValue : formatData({ value: cellValue, formatter, name: columnName });
-        const formattedPreviousValue = previousValue == null ? previousValue : formatData({ value: previousValue, formatter, name: columnName });
-        if (typeof formattedValue === 'object')
-            return '';
-        return (jsx(SummaryCell, { currentValue: formattedValue, showPrevious: showPrevious, previousValue: formattedPreviousValue, columnLayout: layout }));
+const useOrderColumnsSelectorStore = create()(persist((set) => ({
+    selectedColumns: DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT,
+    columnsOrder: Object.values(ORDER_COLUMN_MAPPING).map((column) => column.value),
+    setColumnsOrder: (columnsOrder) => set({ columnsOrder }),
+    setSelectedColumns: (selectedColumns) => set({ selectedColumns }),
+}), { name: 'order-listing-columns-config' }));
+
+const useOrderListingData = ({ limitRowAmount, orderListing = [], fixedColumns, selectedColumns: externalSelectedColumns, columnsOrder: externalColumnsOrder, }) => {
+    const storeSelectedColumns = useOrderColumnsSelectorStore((state) => state.selectedColumns);
+    const storeColumnsOrder = useOrderColumnsSelectorStore((state) => state.columnsOrder);
+    const selectedColumns = externalSelectedColumns ?? storeSelectedColumns;
+    const columnsOrder = externalColumnsOrder ?? storeColumnsOrder;
+    const showColumns = useMemo(() => ORDER_LISTING_COLUMNS.filter((column) => (fixedColumns ?? selectedColumns).includes(column.name)), [fixedColumns, selectedColumns]);
+    const sortedMetrics = useMemo(() => sortByArrayOrder(ORDER_LISTING_METRICS ?? [], columnsOrder), [columnsOrder]);
+    const tableData = useMemo(() => {
+        const rows = convertOrderItemsToReportTableRows(orderListing);
+        const showRows = limitRowAmount ? rows.slice(0, limitRowAmount) : rows;
+        return {
+            rows: showRows,
+            columns: showColumns,
+        };
+    }, [limitRowAmount, orderListing, showColumns]);
+    return {
+        showColumns,
+        tableData,
+        sortedMetrics,
     };
-    return (jsx("div", { className: "GReportTable__Summary-Row", children: columns.map(({ name, dataType }, index) => (jsx("div", { className: "GReportTable__Summary-Cell", style: getColumnLayoutStyles(columnLayoutMap[name]), children: getCellValue(name, index, dataType) }, name))) }));
 };
 
-const getOrderTooltip = (field, direction) => {
-    if (!reportOrderTooltip[field])
-        return DEFAULT_TOOLTIP[direction];
-    return reportOrderTooltip[field][direction];
+const SKELETON_METRICS = [
+    EReportColumnKey.ORDER_DATE,
+    EReportColumnKey.TOTAL,
+    EReportColumnKey.CAMPAIGNS,
+    EReportColumnKey.TRAFFIC_SOURCE,
+    EReportColumnKey.DEVICE,
+    EReportColumnKey.VISITOR,
+    EReportColumnKey.ITEMS,
+];
+
+const SkeletonSummaryRow = () => {
+    const summaryColumns = [
+        { key: 'order_id', layout: ORDER_LISTING_DIMENSION_LAYOUT },
+        ...SKELETON_METRICS.map((metric) => ({
+            key: metric,
+            layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
+        })),
+    ];
+    return (jsx("div", { className: "GReportTable__Summary-Row", children: summaryColumns.map((col, index) => (jsx("div", { className: "GReportTable__Summary-Cell", style: {
+                minWidth: col.layout?.minWidth,
+                maxWidth: col.layout?.maxWidth,
+                justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
+                ['--column-cell-justify-content']: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
+            }, children: index === 0 && (jsx("div", { className: "w-20", children: jsx(SkeletonBodyText, { lines: 1 }) })) }, col.key))) }));
 };
 
-const SortableHeaderWithTooltip = ({ item, orderBy, onChangeOrderBy }) => {
-    const { displayName, name, tooltipCardProps } = item;
-    return (jsxs(InlineStack, { gap: "050", blockAlign: "center", children: [jsx(GTooltipCard, { ...tooltipCardProps, children: jsx(Text, { as: "span", variant: "bodySm", fontWeight: "medium", truncate: true, tone: "subdued", children: displayName }) }), hasOrderByName(name) && (jsx("div", { className: "-mb-1", children: jsx(GButton, { variant: "plain", icon: getOrderIcon(name), tooltip: getSortTooltip(name), onClick: () => onChangeOrderBy?.(name) }) }))] }));
-    function hasOrderByName(name) {
-        const orderByField = orderBy?.[name];
-        return !!orderByField;
-    }
-    function getSortTooltip(name) {
-        const orderByField = orderBy?.[name];
-        if (!hasOrderByName(name) || !orderByField)
-            return undefined;
-        const content = getOrderTooltip(name, orderByField?.direction);
-        return { content };
-    }
-    function getOrderIcon(name) {
-        const orderByField = orderBy?.[name];
-        if (!orderByField)
-            return SvgArrowUpIcon;
-        return orderByField.direction === EOrderDirectionType.ASC ? SvgArrowUpIcon : SvgArrowDownIcon;
-    }
+const SkeletonHeader = () => {
+    const headerColumns = [
+        { key: 'order_id', label: 'Order ID', layout: ORDER_LISTING_DIMENSION_LAYOUT },
+        ...SKELETON_METRICS.map((metric) => ({
+            key: metric,
+            label: metric,
+            layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
+        })),
+    ];
+    return (jsx("div", { className: "GReportTable__Header", children: headerColumns.map((col, index) => (jsx("div", { className: "GReportTable__Header-Cell", style: {
+                minWidth: col.layout?.minWidth,
+                maxWidth: col.layout?.maxWidth,
+                justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
+                ['--column-cell-justify-content']: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
+            }, children: jsx("div", { className: index === 0 ? 'w-16' : 'w-12', children: jsx(SkeletonBodyText, { lines: 1 }) }) }, col.key))) }));
 };
 
-const SortableHeader = ({ item, orderBy, itemHovering, onChangeOrderBy }) => {
-    const { displayName, name } = item;
-    function getTooltipInfo(name) {
-        const orderByField = orderBy?.[name];
-        const content = getOrderTooltip(name, orderByField?.direction || EOrderDirectionType.ASC);
-        return { content };
-    }
-    function getOpacity(name) {
-        return itemHovering === name ? '1' : '0';
-    }
-    function getOrderIcon(name) {
-        const orderByField = orderBy?.[name];
-        if (!orderByField)
-            return SvgSortAscendingIcon;
-        return orderByField.direction === EOrderDirectionType.ASC ? SvgSortAscendingIcon : SvgSortDescendingIcon;
+const SkeletonCellContent = ({ columnKey }) => {
+    switch (columnKey) {
+        case 'order_id':
+            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-20", children: jsx(SkeletonDisplayText, { size: "small" }) }) }));
+        case EReportColumnKey.ORDER_DATE:
+            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-28", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
+        case EReportColumnKey.TOTAL:
+            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-16", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
+        case EReportColumnKey.CAMPAIGNS:
+            return (jsx(Box, { paddingInline: "300", width: "100%", children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx("div", { className: "bg-surface-secondary h-6 w-6 shrink-0 animate-pulse rounded" }), jsx("div", { className: "max-w-40 flex-1", children: jsx(SkeletonBodyText, { lines: 1 }) })] }) }));
+        case EReportColumnKey.TRAFFIC_SOURCE:
+        case EReportColumnKey.DEVICE:
+        case EReportColumnKey.VISITOR:
+            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-16", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
+        case EReportColumnKey.ITEMS:
+            return (jsx(Box, { paddingInline: "300", children: jsxs(InlineStack, { gap: "100", blockAlign: "center", children: [jsx("div", { className: "bg-surface-secondary h-6 w-6 shrink-0 animate-pulse rounded" }), jsx("div", { className: "w-4", children: jsx(SkeletonBodyText, { lines: 1 }) })] }) }));
+        default:
+            return (jsx(Box, { paddingInline: "300", children: jsx("div", { className: "w-16", children: jsx(SkeletonBodyText, { lines: 1 }) }) }));
     }
-    return (jsxs("button", { className: "GReportTable-SortableHeaderButton", onClick: () => onChangeOrderBy?.(name), children: [jsx("div", { className: "min-w-0", children: jsx(GTextTruncated, { as: "p", variant: "bodySm", fontWeight: "medium", tone: "subdued", tooltip: getTooltipInfo(name), children: displayName }) }), jsx(Box, { opacity: getOpacity(name), children: jsx(Icon, { source: getOrderIcon(name) }) })] }));
 };
 
-const Header = ({ columns, columnLayoutMap, activeColumn, orderBy, showSummary, onChangeOrderBy, }) => {
-    const [itemHovering, setItemHovering] = useState();
-    return (jsx("div", { className: cls('GReportTable__Header', {
-            'GReportTable__Header--hide-summary': !showSummary,
-        }), children: columns.map((item) => {
-            const isTooltipCard = !!item.tooltipCardProps;
-            const SortableHeaderComponent = isTooltipCard ? SortableHeaderWithTooltip : SortableHeader;
-            return (jsxs("div", { className: "GReportTable__Header-Cell", style: getColumnLayoutStyles(columnLayoutMap[item.name]), onMouseEnter: () => setItemHovering(item.name), onMouseLeave: () => setItemHovering(undefined), children: [activeColumn === item.name && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) })), jsx(SortableHeaderComponent, { item: item, orderBy: orderBy, itemHovering: itemHovering, onChangeOrderBy: onChangeOrderBy, ...item.tooltipCardProps })] }, item.name));
-        }) }));
+const SkeletonRow = () => {
+    const rowColumns = [
+        { key: 'order_id', layout: ORDER_LISTING_DIMENSION_LAYOUT, isDimension: true },
+        ...SKELETON_METRICS.map((metric) => ({
+            key: metric,
+            layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
+            isDimension: false,
+        })),
+    ];
+    return (jsx("div", { className: "GReportTable__Row", children: rowColumns.map((col) => (jsx("div", { className: `GReportTable__Cell ${col.isDimension ? 'GReportTable__Cell--dimension' : ''}`, style: {
+                minWidth: col.layout?.minWidth,
+                maxWidth: col.layout?.maxWidth,
+                justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
+                ['--column-cell-justify-content']: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
+            }, children: jsx("div", { className: "GReportTable__CellContent", children: jsx(SkeletonCellContent, { columnKey: col.key }) }) }, col.key))) }));
 };
 
-const WrapperHeader = forwardRef(({ columns, dimensions, row, columnLayoutMap, activeColumn, orderBy, summary, minWidth, onChangeOrderBy }, ref) => {
-    return (jsx("div", { className: "GReportTable__StickyHeader", ref: ref, children: jsxs("div", { style: { minWidth }, children: [jsx(Header, { columns: columns, columnLayoutMap: columnLayoutMap, activeColumn: activeColumn, orderBy: orderBy, showSummary: !summary?.hide && !!dimensions.length, onChangeOrderBy: onChangeOrderBy }), jsx(SummaryRow, { columns: columns, row: row, dimensions: dimensions, summary: summary, columnLayoutMap: columnLayoutMap })] }) }));
-});
-WrapperHeader.displayName = 'WrapperHeader';
+const OrderListingTableSkeleton = ({ rowCount = 5 }) => {
+    return (jsxs("div", { className: "GReportTable__Container rounded-xl overflow-hidden", children: [jsxs("div", { className: "GReportTable__Wrapper", children: [jsx("div", { className: "GReportTable__StickyHeader", children: jsxs("div", { children: [jsx(SkeletonHeader, {}), jsx(SkeletonSummaryRow, {})] }) }), jsx("div", { className: "GReportTable__ScrollWrap", children: Array.from({ length: rowCount }).map((_, index) => (jsx(SkeletonRow, {}, index))) })] }), jsx("div", { className: "GReportTable__Pagination", children: jsx(InlineStack, { align: "space-between", blockAlign: "center", gap: "400", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }) })] }));
+};
 
-const mockDimensions = ['session_device_type', 'month', 'session_country', 'session_device_os'];
-const mockMetrics = ['online_store_visitors', 'sessions', 'bounces'];
-const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data, activeColumn, orderBy, options, paginationProps, itemCount, dimensionLayout, metricLayouts, orderCellProps, isHideCampaignContent = false, showViewAllButton, emptyStateComponent, isLoading, isMockData, onChangeOrderBy, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, skeletons, }) => {
-    const { summary = {}, hideBorderTop, hidePaginationRow } = options ?? {};
-    const { columns, rows } = useReportTable({ dimensions, metrics, tableData: data ?? { columns: [], rows: [] } });
-    const { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef } = useSyncedScroll({ columns });
-    const tableDimensionLayout = dimensionLayout ?? DEFAULT_DIMENSION_LAYOUT;
-    const isEmpty = rows.length === 0;
-    const totalPaginationRows = hidePaginationRow ? 0 : rows.length;
-    const isHasTotalRows = Boolean(totalPaginationRows && totalPaginationRows > 0);
-    const isPaginationHidden = !isHasTotalRows && !showViewAllButton && !paginationProps;
-    const columnLayoutMap = useMemo(() => {
-        return columns.reduce((acc, col) => {
-            const tableMetricLayout = metricLayouts?.[col.name] ?? DEFAULT_METRIC_LAYOUT;
-            acc[col.name] = dimensions.includes(col.name) ? tableDimensionLayout : tableMetricLayout;
-            return acc;
-        }, {});
-    }, [columns, metricLayouts, tableDimensionLayout, dimensions]);
-    const totalTableWidth = useMemo(() => {
-        return columns.reduce((acc, col) => {
-            const layout = columnLayoutMap[col.name];
-            const widthStr = layout?.minWidth || '0';
-            const widthVal = parseInt(widthStr, 10) || 0;
-            return acc + widthVal;
-        }, 0);
-    }, [columns, columnLayoutMap]);
-    if (isLoading)
-        return jsx(ReportTableSkeleton, { ...skeletons });
-    if (isEmpty)
-        return emptyStateComponent ? (jsx(ReportTableActionsProvider, { onViewAllStoreOrders: onViewAllStoreOrders, children: renderEmptyState() })) : null;
-    return (jsx(ReportTableActionsProvider, { onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, onViewAllStoreOrders: onViewAllStoreOrders, children: jsxs("div", { className: cls('GReportTable__Container', {
-                'GReportTable__Container--border-top': !hideBorderTop,
-                'GReportTable__Container--pagination-hidden': isPaginationHidden,
-            }), children: [jsxs("div", { className: "GReportTable__Wrapper", children: [jsx(WrapperHeader, { columns: columns, dimensions: dimensions, row: data?.rows[0], ref: headerRef, columnLayoutMap: columnLayoutMap, activeColumn: activeColumn, orderBy: orderBy, summary: summary, onChangeOrderBy: onChangeOrderBy, minWidth: totalTableWidth }), jsx("div", { className: "GReportTable__ScrollWrap", ref: bodyRef, children: rows.map((row, index) => (jsx(Row, { row: row, rowIndex: index, columns: columns, dimensions: dimensions, prevRow: rows[index - 1], columnLayoutMap: columnLayoutMap, orderCellProps: orderCellProps, isHideCampaignContent: isHideCampaignContent, minWidth: totalTableWidth, isMockData: isMockData }, index))) })] }), jsx(WrapperFooter, { scrollbarContainerRef: scrollbarContainerRef, totalPaginationRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden, isMockData: isMockData }), jsx("div", { className: "GReportTable__LeftShadow", style: { left: tableDimensionLayout.width }, ref: leftShadowRef }), jsx("div", { className: "GReportTable__RightShadow", ref: rightShadowRef })] }) }));
-    function renderEmptyState() {
-        return (jsxs("div", { className: cls('GReportTable__Container', {
-                'GReportTable__Container--border-top': !hideBorderTop,
-            }), children: [emptyStateComponent, jsx(WrapperFooter, { totalPaginationRows: 0, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: true, isMockData: isMockData })] }));
-    }
+const OrderListingTableEmpty = ({ title, description }) => {
+    return (jsx(GBlockCenter, { paddingBlock: "400", children: jsxs(BlockStack, { gap: "400", inlineAlign: "center", children: [jsx("img", { src: ANALYTIC_EMPTY, alt: "No orders", width: 80, height: 80 }), jsxs(BlockStack, { gap: "200", inlineAlign: "center", children: [jsx(Text, { as: "p", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", alignment: "center", children: description })] })] }) }));
 };
 
-const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, isMockData, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
+const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, isMockData, selectedColumns, columnsOrder, isFilteredByCampaign, isHasControlFilters, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
     const { hideSummary, limitRowAmount, hidePaginationRow, hideBorderTop, fixedColumns, isLatestTable } = tableOptions ?? {};
     const { t } = useTranslation();
     const orderBy = useOrderControlStore((state) => state.orderBy);
@@ -24404,9 +24444,11 @@ const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, pa
         limitRowAmount,
         orderListing: orders,
         fixedColumns,
+        selectedColumns,
+        columnsOrder,
     });
     const isNoResultFoundForQuery = !!queryValue?.trim() && tableData.rows.length === 0;
-    const showViewAllButton = isLatestTable || isNoResultFoundForQuery;
+    const showViewAllButton = isLatestTable || isHasControlFilters || isNoResultFoundForQuery;
     const reportTableData = useMemo(() => {
         return {
             rows: applyTotalToSummaryRow(tableData.rows),
@@ -24421,7 +24463,7 @@ const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, pa
     };
     if (isLatestTable && isLoading)
         return jsx(OrderListingTableSkeleton, {});
-    return (jsx(Fragment, { children: jsx(ReportTable, { metrics: sortedMetrics, dimensions: ORDER_LISTING_DIMENSIONS, options: getOptionsProps(), paginationProps: paginationProps, data: reportTableData, itemCount: totalStoreOrders, dimensionLayout: ORDER_LISTING_DIMENSION_LAYOUT, metricLayouts: ORDER_LISTING_METRIC_LAYOUTS, orderBy: orderBy ? { [orderBy.field]: orderBy } : undefined, showViewAllButton: showViewAllButton, isHideCampaignContent: !!isLatestTable, isMockData: isMockData, emptyStateComponent: renderEmptyState(), onChangeOrderBy: handleChangeOrderBy, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails }) }));
+    return (jsx(Fragment, { children: jsx(ReportTable, { metrics: sortedMetrics, dimensions: ORDER_LISTING_DIMENSIONS, options: getOptionsProps(), paginationProps: paginationProps, data: reportTableData, itemCount: totalStoreOrders, dimensionLayout: ORDER_LISTING_DIMENSION_LAYOUT, metricLayouts: ORDER_LISTING_METRIC_LAYOUTS, orderBy: orderBy ? { [orderBy.field]: orderBy } : undefined, showViewAllButton: showViewAllButton, isHideCampaignContent: !!isLatestTable || !!isFilteredByCampaign, isMockData: isMockData, emptyStateComponent: renderEmptyState(), onChangeOrderBy: handleChangeOrderBy, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails }) }));
     function renderEmptyState() {
         const isNoOrderWithCurrentFilters = orders.length === 0;
         return (jsx(GBlockCenter, { paddingBlockStart: isNoOrderWithCurrentFilters ? '500' : '0', paddingBlockEnd: isNoOrderWithCurrentFilters ? '800' : '0', children: jsx(GBlockCenter, { paddingBlock: "1600", children: jsx(OrderListingTableEmpty, { title: isNoOrderWithCurrentFilters ? t('No order') : t('No order found'), description: isNoOrderWithCurrentFilters ? t('Try changing the filters') : t('Try changing the filters or search term') }) }) }));
@@ -24721,21 +24763,18 @@ const JOURNEY_EVENT_COMPONENTS_MAP = {
     [EJourneyEvent.SEARCH_SUBMITTED]: DefaultEventComponent,
 };
 
-const JourneyDateBadge = ({ content }) => {
-    return (jsx(Box, { background: "bg-surface-secondary", paddingBlock: "100", paddingInline: "200", borderRadius: "200", minWidth: "110px", children: jsx(GBlockCenter, { children: jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "medium", children: content }) }) }));
+const GemxIdBadge = () => {
+    const { t } = useTranslation();
+    const { gxId } = useOrderJourneyContext();
+    if (!gxId)
+        return null;
+    return (jsx(Box, { background: "bg-surface-secondary-active", paddingBlock: "100", paddingInline: "200", borderRadius: "200", children: jsx(InlineStack, { gap: "100", blockAlign: "center", children: jsx("span", { className: "text-[var(--p-color-text-emphasis)]", children: jsx(GI18NText, { as: "span", variant: "bodyMd", tone: "subdued", transformers: {
+                        1: (text) => (jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", tone: "base", children: text })),
+                    }, children: t('GemX ID: [1]{{gxId}}[]', { gxId }) }) }) }) }));
 };
 
-const BOX_BACKGROUND = {
-    default: 'bg-surface-secondary-active',
-    onHover: 'bg-surface-secondary',
-};
-const JourneyLoadMore = ({ isFetching, onLoadMode }) => {
-    const [boxBackground, setBoxBackground] = useState(BOX_BACKGROUND.default);
-    const { t } = useTranslation();
-    if (isFetching) {
-        return (jsx(Box, { paddingBlock: "100", paddingInline: "300", background: BOX_BACKGROUND.onHover, borderRadius: "200", children: jsx(GSpinner, { size: "small" }) }));
-    }
-    return (jsx("div", { className: "cursor-pointer", onMouseEnter: () => setBoxBackground(BOX_BACKGROUND.onHover), onMouseLeave: () => setBoxBackground(BOX_BACKGROUND.default), onClick: onLoadMode, children: jsx(Box, { paddingBlock: "100", paddingInline: "200", background: boxBackground, borderRadius: "200", children: jsxs(InlineStack, { gap: "050", wrap: false, blockAlign: "center", children: [jsx(Icon, { source: SvgChevronUpIcon }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", children: t('More steps') })] }) }) }));
+const JourneyDateBadge = ({ content }) => {
+    return (jsx(Box, { background: "bg-surface-secondary", paddingBlock: "100", paddingInline: "200", borderRadius: "200", minWidth: "97px", children: jsx(GBlockCenter, { children: jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "medium", children: content }) }) }));
 };
 
 const JourneyIdBadge = ({ id, type = 'order' }) => {
@@ -24757,13 +24796,26 @@ const JourneyIdBadge = ({ id, type = 'order' }) => {
     }
 };
 
+const BOX_BACKGROUND = {
+    default: 'bg-surface-secondary-active',
+    onHover: 'bg-surface-secondary',
+};
+const JourneyLoadMore = ({ isFetching, onLoadMode }) => {
+    const [boxBackground, setBoxBackground] = useState(BOX_BACKGROUND.default);
+    const { t } = useTranslation();
+    if (isFetching) {
+        return (jsx(Box, { paddingBlock: "100", paddingInline: "300", background: BOX_BACKGROUND.onHover, borderRadius: "200", children: jsx(GSpinner, { size: "small" }) }));
+    }
+    return (jsx("div", { className: "cursor-pointer", onMouseEnter: () => setBoxBackground(BOX_BACKGROUND.onHover), onMouseLeave: () => setBoxBackground(BOX_BACKGROUND.default), onClick: onLoadMode, children: jsx(Box, { paddingBlock: "100", paddingInline: "200", background: boxBackground, borderRadius: "200", children: jsxs(InlineStack, { gap: "050", wrap: false, blockAlign: "center", children: [jsx(Icon, { source: SvgChevronUpIcon }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", children: t('More steps') })] }) }) }));
+};
+
 const JourneyTitle = ({ content, id, hasMoreSteps, isFetching = false, onLoadMode }) => {
     const isStickyHeader = !!id;
     const isShowLoadMore = isStickyHeader && hasMoreSteps && onLoadMode;
-    return (jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsxs(InlineStack, { align: "space-between", gap: "100", children: [jsxs(InlineStack, { gap: "400", children: [jsx(JourneyDateBadge, { content: content }), id && jsx(JourneyIdBadge, { id: id })] }), isShowLoadMore && jsx(JourneyLoadMore, { isFetching: isFetching, onLoadMode: onLoadMode })] }), jsx(JourneyTitleLine, {})] }));
+    return (jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsxs(InlineStack, { align: "space-between", gap: "100", children: [jsxs(InlineStack, { gap: "400", wrap: false, children: [jsx(JourneyDateBadge, { content: content }), id && jsx(JourneyIdBadge, { id: id }), id && jsx(GemxIdBadge, {})] }), isShowLoadMore && jsx(JourneyLoadMore, { isFetching: isFetching, onLoadMode: onLoadMode })] }), jsx(JourneyTitleLine, {})] }));
 };
 const JourneyTitleLine = () => {
-    return jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" });
+    return jsx("div", { className: "bg-border absolute left-0 right-0 top-[50%] -z-[1] h-[1px] translate-y-[-50%]" });
 };
 
 const JourneyGroup = ({ eventsByDate, sectionRefs }) => {
@@ -24874,7 +24926,7 @@ const JourneyEventSkeleton = ({ isLast }) => {
     return (jsx(Box, { paddingInlineStart: "600", children: jsxs(InlineStack, { blockAlign: "start", gap: "400", wrap: false, children: [jsx("div", { className: "w-12 pt-1", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx("div", { className: "shrink-0 mt-0.5", children: jsx("div", { className: "w-7 h-7 bg-border-secondary rounded-full animate-pulse" }) }), jsxs(Box, { paddingBlockEnd: "400", width: "100%", children: [jsx("div", { className: "mb-2", children: jsx(SkeletonDisplayText, { size: "small" }) }), !isLast ? (jsx("div", { className: "max-w-[70%]", children: jsx(SkeletonBodyText, { lines: Math.random() > 0.5 ? 1 : 2 }) })) : (jsx("div", { className: "max-w-[40%]", children: jsx(SkeletonBodyText, { lines: 1 }) }))] })] }) }));
 };
 
-const GModalOrderJourney = ({ open, onClose, title, orderId, journeyItems, isLoading = false, hasNextPage = false, isFetchingNextPage = false, fetchNextPage, reportCampaign, pageAnalytic, mode, journeySource, onViewOrderDetails, }) => {
+const GModalOrderJourney = ({ open, onClose, title, orderId, gxId, journeyItems, isLoading = false, hasNextPage = false, isFetchingNextPage = false, fetchNextPage, reportCampaign, pageAnalytic, mode, journeySource, onViewOrderDetails, }) => {
     const [isExpanded, setIsExpanded] = useState(false);
     usePreventBodyScroll({ enable: open });
     const source = useMemo(() => {
@@ -24928,7 +24980,7 @@ const GModalOrderJourney = ({ open, onClose, title, orderId, journeyItems, isLoa
     }, [open]);
     if (!orderId)
         return null;
-    return (jsx(GModal, { open: open, title: title, onClose: onClose, children: jsx(OrderJourneyProvider, { value: { orderId, onViewOrderDetails }, children: isLoading ? (jsx(OrderJourneySkeleton, {})) : (jsx(JourneyContainer, { orderId: orderId, eventsByDate: eventsByDate, hasMoreSteps: hasMoreSteps, isFetchingMoreSteps: isFetchingNextPage, onLoadMore: handleLoadMore })) }) }));
+    return (jsx(GModal, { open: open, title: title, onClose: onClose, children: jsx(OrderJourneyProvider, { value: { orderId, gxId, onViewOrderDetails }, children: isLoading ? (jsx(OrderJourneySkeleton, {})) : (jsx(JourneyContainer, { orderId: orderId, eventsByDate: eventsByDate, hasMoreSteps: hasMoreSteps, isFetchingMoreSteps: isFetchingNextPage, onLoadMore: handleLoadMore })) }) }));
 };
 
 function isBrowser() {
@@ -24974,4 +25026,4 @@ const useStickyFilterBoxProps = ({ id }) => {
     };
 };
 
-export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CardJourneyAnalysis, CardPathAnalysis, CompareDateTimePickerAlias, ConvertMoneyProvider, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, EJourneyEvent, EReportSource, FUNNEL_POPOVER_KEY, GModalOrderJourney, GSelectableMetricChartCard, GTimePicker, IVariantType, MOCK_DATA_PATH_ANALYSIS, MainDateTimePickerAlias, MetricChartProvider, MetricDonutChartCard, ORDER_COLUMN_MAPPING, ORDER_LISTING_COLUMNS, ORDER_LISTING_CONFIG, ORDER_LISTING_DIMENSIONS, ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE, ORDER_LISTING_METRICS, ORDER_LISTING_METRIC_LAYOUTS, OrderJourneyProvider, OrderListingLatestTable, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, PathAnalysisConfigProvider, PathAnalysisContext, PathAnalysisProvider, SERIES_COLORS, SORT_ORDER_LISTING_DEFAULT, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, TimezoneProvider, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useConvertMoneyContext, useCurrencyRatesStore, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useFunnelChartStore, useGModalOrderJourney, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, useOrderJourneyContext, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, useTimezoneContext, useVersionDateTimeFilters };
+export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CardJourneyAnalysis, CardPathAnalysis, CompareDateTimePickerAlias, ConvertMoneyProvider, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, EJourneyEvent, EReportSource, FUNNEL_POPOVER_KEY, GModalOrderJourney, GSelectableMetricChartCard, GTimePicker, IVariantType, MOCK_DATA_PATH_ANALYSIS, MainDateTimePickerAlias, MetricChartProvider, MetricDonutChartCard, ORDER_COLUMN_MAPPING, ORDER_LISTING_COLUMNS, ORDER_LISTING_CONFIG, ORDER_LISTING_DIMENSIONS, ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE, ORDER_LISTING_METRICS, ORDER_LISTING_METRIC_LAYOUTS, OrderJourneyProvider, OrderListingLatestTable, OrderListingTable$1 as OrderListingTable, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, PathAnalysisConfigProvider, PathAnalysisContext, PathAnalysisProvider, ReportTable, ReportTableSkeleton, SERIES_COLORS, SORT_ORDER_LISTING_DEFAULT, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, TimezoneProvider, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatReportData, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useConvertMoneyContext, useCurrencyRatesStore, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useFunnelChartStore, useGModalOrderJourney, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, useOrderJourneyContext, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, useTimezoneContext, useVersionDateTimeFilters };