@gem-sdk/analytics 1.0.2-dev.1 → 1.0.2-dev.3

package/dist/esm/index.js

@@ -2058,6 +2058,7 @@ var EComparisonOperator;
     EComparisonOperator["EQ"] = "=";
     EComparisonOperator["IN"] = "IN";
     EComparisonOperator["LIKE"] = "LIKE";
+    EComparisonOperator["GROUP"] = "GROUP";
 })(EComparisonOperator || (EComparisonOperator = {}));
 var EGroupOperator;
 (function (EGroupOperator) {
@@ -23053,110 +23054,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 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,
-    };
-};
-
-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')}`;
-};
-
 var EReportDataType;
 (function (EReportDataType) {
     EReportDataType["DATE"] = "DATE";
@@ -23211,91 +23108,6 @@ var IRMetricKey;
     IRMetricKey["VISITOR_BY_TYPE"] = "visitor_type";
 })(IRMetricKey || (IRMetricKey = {}));
 
-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 }) }))] }));
-};
-
 [IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
 ({
     [IRVariantType.VARIANT_A]: 'Control',
@@ -23329,6 +23141,57 @@ function getMetricPreviousValue(row, key) {
     return row[getPreviousColumnName(key)];
 }
 
+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 useReportTable = ({ dimensions, tableData, metrics }) => {
     const columnsByName = useMemo(() => {
         return tableData.columns.reduce((lookup, column) => {
@@ -23501,6 +23364,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, }) => {
@@ -23516,58 +23487,11 @@ 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,
-            });
-        }
-        return t('View all store {{metric}} by date range(1)', { metric: viewAllMetricContent });
-    }
-};
-
-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 })] }));
-};
-
-const PreviousCell = ({ previousValue, isMergedWithPrev }) => {
-    if (isMergedWithPrev || typeof previousValue !== 'string')
-        return null;
-    return (jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: previousValue }));
-};
-
-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 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) {
@@ -23650,7 +23574,7 @@ const CampaignsCellVersion = ({ version }) => {
 };
 
 const CampaignsCell = ({ value, campaignsCellProps, }) => {
-    const { orderId, isHideCampaignContent } = campaignsCellProps ?? {};
+    const { orderId, gxId, isHideCampaignContent } = campaignsCellProps ?? {};
     const { t } = useTranslation();
     const { onViewOrderJourney } = useReportTableActionsContext();
     const [active, setActive] = useState(false);
@@ -23664,11 +23588,21 @@ const CampaignsCell = ({ value, campaignsCellProps, }) => {
                 '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') }) })] }) }));
+                            }) }) }) }), 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;
+    return (jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: previousValue }));
+};
+
+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 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 }) }) }));
@@ -23735,10 +23669,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, }) => {
@@ -23772,7 +23708,7 @@ 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 }) }))] }));
 };
 
-const OrderIdCell = ({ value, isMockData }) => {
+const OrderIdCell = ({ value, isMockData, gxId, }) => {
     const { t } = useTranslation();
     const [active, setActive] = useState(false);
     const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
@@ -23785,7 +23721,7 @@ const OrderIdCell = ({ value, isMockData }) => {
                     id: 'view_order_journey',
                     content: t('View order journey'),
                     icon: SvgChartLineIcon,
-                    onAction: () => onViewOrderJourney?.(value),
+                    onAction: () => onViewOrderJourney?.(value, gxId),
                 },
                 {
                     id: 'view_order_details',
@@ -23845,10 +23781,10 @@ const cellMap = {
             return null;
         return jsx(CampaignsCell, { value: value, campaignsCellProps: campaignsCellProps });
     },
-    [EReportColumnKey.ORDER_ID]: ({ value, isMockData }) => {
+    [EReportColumnKey.ORDER_ID]: ({ value, isMockData, gxId }) => {
         if (!isString(value))
             return null;
-        return jsx(OrderIdCell, { value: value, isMockData: isMockData });
+        return jsx(OrderIdCell, { value: value, isMockData: isMockData, gxId: gxId });
     },
     [EReportColumnKey.GEMX_ID]: ({ value, isMergedWithPrev, previousValue, columnLayout }) => {
         if (!isString(value))
@@ -23857,13 +23793,18 @@ const cellMap = {
     },
 };
 
-const TotalCell = ({ value, isTotalRow }) => (jsx(Text, { as: "span", variant: "bodySm", fontWeight: isTotalRow ? 'semibold' : 'regular', children: value }));
+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 Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
+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 });
@@ -23880,7 +23821,7 @@ const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, for
         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(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() }) }));
 };
@@ -23905,7 +23846,8 @@ const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, ord
     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));
+            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));
         }) }));
 };
 
@@ -24000,6 +23942,68 @@ const WrapperHeader = forwardRef(({ columns, dimensions, row, columnLayoutMap, a
 });
 WrapperHeader.displayName = 'WrapperHeader';
 
+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,
+            });
+        }
+        return t('View all store {{metric}} by date range(1)', { metric: viewAllMetricContent });
+    }
+};
+
+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 (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 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, }) => {
@@ -24055,23 +24059,23 @@ const ORDER_LISTING_DIMENSION_LAYOUT = {
 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: '119.5px',
+        minWidth: '120px',
         maxWidth: METRIC_COLUMN_MAX_WIDTH,
         align: 'start',
         columnWrapperWidth: '100%',
     },
     [EReportColumnKey.ORDER_DATE]: {
-        minWidth: '180px',
+        minWidth: '170px',
         maxWidth: METRIC_COLUMN_MAX_WIDTH,
         align: 'start',
     },
     [EReportColumnKey.TOTAL]: {
-        minWidth: '120px',
+        minWidth: '96px',
         maxWidth: METRIC_COLUMN_MAX_WIDTH,
         align: 'end',
     },
     [EReportColumnKey.CAMPAIGNS]: {
-        minWidth: '246px',
+        minWidth: '128px',
         maxWidth: METRIC_COLUMN_MAX_WIDTH,
         align: 'start',
         columnWrapperWidth: '100%',
@@ -24092,7 +24096,7 @@ const ORDER_LISTING_METRIC_LAYOUTS = {
         align: 'start',
     },
     [EReportColumnKey.ITEMS]: {
-        minWidth: '140px',
+        minWidth: '120px',
         maxWidth: METRIC_COLUMN_MAX_WIDTH,
         align: 'start',
     },
@@ -24760,29 +24764,31 @@ const JOURNEY_EVENT_COMPONENTS_MAP = {
     [EJourneyEvent.SEARCH_SUBMITTED]: DefaultEventComponent,
 };
 
+const ID_BADGE_SEPARATOR = '·';
+
 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: {
+    return (jsxs("div", { className: "flex min-w-0 items-center", style: { gap: 'var(--p-space-200)' }, children: [jsx("span", { className: "shrink-0", children: jsx(Text, { as: "span", tone: "subdued", children: ID_BADGE_SEPARATOR }) }), jsx("span", { className: "min-w-0 truncate 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 }) }) }) }) }));
+                    }, children: t('GemX ID: [1]{{gxId}}[]', { gxId }) }) })] }));
 };
 
 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 }) }) }));
+    return (jsx(Box, { background: "bg-surface-secondary", paddingBlock: "100", paddingInline: "200", borderRadius: "200", children: jsx(GBlockCenter, { children: jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "medium", children: content }) }) }));
 };
 
 const JourneyIdBadge = ({ id, type = 'order' }) => {
     const { t } = useTranslation();
     const idContent = getIdContent();
     const { onViewOrderDetails } = useOrderJourneyContext();
-    return (jsx(GTooltip, { content: t('View order details'), children: jsx("div", { className: "cursor-pointer", onClick: () => onViewOrderDetails?.(id), children: jsx(Box, { background: "bg-surface-secondary-active", paddingBlock: "100", paddingInline: "200", borderRadius: "200", children: jsxs(InlineStack, { gap: "100", blockAlign: "center", children: [jsx(GI18NText, { as: "p", variant: "bodyMd", fontWeight: "medium", tone: "subdued", transformers: {
-                                1: (text) => {
-                                    return (jsx(Text, { as: "span", tone: "base", children: text }));
-                                },
-                            }, children: idContent }), jsx(Icon, { source: SvgExternalSmallIcon })] }) }) }) }));
+    return (jsx(Box, { background: "bg-surface-secondary-active", paddingBlock: "100", paddingInline: "200", borderRadius: "200", minWidth: "0", children: jsxs("div", { className: "flex min-w-0 items-center", style: { gap: 'var(--p-space-200)' }, children: [jsx(GTooltip, { content: t('View order details'), children: jsxs("div", { className: "flex shrink-0 cursor-pointer items-center gap-1", onClick: () => onViewOrderDetails?.(id), children: [jsx(GI18NText, { as: "p", variant: "bodyMd", fontWeight: "medium", tone: "subdued", transformers: {
+                                    1: (text) => {
+                                        return (jsx(Text, { as: "span", tone: "base", children: text }));
+                                    },
+                                }, children: idContent }), jsx(Icon, { source: SvgExternalSmallIcon })] }) }), jsx(GemxIdBadge, {})] }) }));
     function getIdContent() {
         switch (type) {
             case 'order':
@@ -24799,17 +24805,16 @@ const BOX_BACKGROUND = {
 };
 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') })] }) }) }));
+    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: jsx(Icon, { source: SvgChevronUpIcon }) }) }));
 };
 
 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", wrap: false, children: [jsx(JourneyDateBadge, { content: content }), id && jsx(JourneyIdBadge, { id: id }), id && jsx(GemxIdBadge, {})] }), isShowLoadMore && jsx(JourneyLoadMore, { isFetching: isFetching, onLoadMode: onLoadMode })] }), jsx(JourneyTitleLine, {})] }));
+    return (jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsxs("div", { className: "flex items-center justify-between gap-1", children: [jsxs("div", { className: "flex min-w-0 items-center", style: { gap: 'var(--p-space-400)' }, children: [jsx("div", { className: "shrink-0", children: jsx(JourneyDateBadge, { content: content }) }), id && jsx(JourneyIdBadge, { id: id })] }), isShowLoadMore && (jsx("div", { className: "shrink-0", children: jsx(JourneyLoadMore, { isFetching: isFetching, onLoadMode: onLoadMode }) }))] }), jsx(JourneyTitleLine, {})] }));
 };
 const JourneyTitleLine = () => {
     return jsx("div", { className: "bg-border absolute left-0 right-0 top-[50%] -z-[1] h-[1px] translate-y-[-50%]" });
@@ -24896,10 +24901,10 @@ const JourneyContainer = ({ orderId, eventsByDate, hasMoreSteps, isFetchingMoreS
         // Update ref for next render
         prevIsFetchingRef.current = isFetchingMoreSteps;
     }, [isFetchingMoreSteps]);
-    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "pb-5", style: { maxHeight: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, children: [jsx(GBox, { ariaShadow: showShadow ? 'shadow-outset-200' : undefined, position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsx(JourneyTitle, { content: currentDate, id: orderId, hasMoreSteps: hasMoreSteps, isFetching: isFetchingMoreSteps, onLoadMode: () => {
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "pb-5", style: { height: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, children: [jsx(GBox, { ariaShadow: showShadow ? 'shadow-outset-200' : undefined, position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsx(JourneyTitle, { content: currentDate, id: orderId, hasMoreSteps: hasMoreSteps, isFetching: isFetchingMoreSteps, onLoadMode: () => {
                         onLoadMore();
                         handleScrollToTop();
-                    } }) }), jsx("div", { ref: scrollContainerRef, className: "min-h-[100vh] md:min-h-[calc(100vh-192px)]", children: jsx(JourneyGroup, { eventsByDate: eventsByDate, sectionRefs: sectionRefs }) })] }));
+                    } }) }), jsx("div", { ref: scrollContainerRef, children: jsx(JourneyGroup, { eventsByDate: eventsByDate, sectionRefs: sectionRefs }) })] }));
 };
 
 const JourneyTimeline = () => {
@@ -24917,7 +24922,8 @@ const JourneyTimeline = () => {
 };
 
 const OrderJourneySkeleton = () => {
-    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "max-h-[100vh] md:max-h-[calc(100vh-120px)] pb-5", children: [jsx(GBox, { position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsx(InlineStack, { align: "space-between", gap: "100", children: jsxs(InlineStack, { gap: "400", children: [jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }), jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-40", children: jsx(SkeletonBodyText, { lines: 1 }) }) })] }) }), jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" })] }) }), jsxs("div", { className: "min-h-[100vh] md:min-h-[calc(100vh-120px)] relative mt-4", children: [jsx("div", { className: "w-[2px] absolute top-4 bottom-4 bg-[#F3F3F3] -z-[1]", style: { left: 110 } }), Array.from({ length: 8 }).map((_, index) => (jsx(JourneyEventSkeleton, { isLast: index === 7 }, index)))] })] }));
+    const { isMobileView } = useWindowSize();
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "pb-5", style: { height: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, children: [jsx(GBox, { position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsx(InlineStack, { align: "space-between", gap: "100", children: jsxs(InlineStack, { gap: "400", children: [jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }), jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-40", children: jsx(SkeletonBodyText, { lines: 1 }) }) })] }) }), jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" })] }) }), jsxs("div", { className: "relative mt-4", children: [jsx("div", { className: "w-[2px] absolute top-4 bottom-4 bg-[#F3F3F3] -z-[1]", style: { left: 110 } }), Array.from({ length: 8 }).map((_, index) => (jsx(JourneyEventSkeleton, { isLast: index === 7 }, index)))] })] }));
 };
 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 }) }))] })] }) }));
@@ -24952,8 +24958,11 @@ const GModalOrderJourney = ({ open, onClose, title, orderId, gxId, journeyItems,
     const handleLoadMore = useCallback(() => {
         if (!isExpanded && isSliced) {
             setIsExpanded(true);
+            return;
         }
-        else if (hasNextPage) {
+        if (hasNextPage) {
+            // Stay expanded so fetched earlier steps aren't re-hidden by the slice
+            setIsExpanded(true);
             fetchNextPage?.();
         }
     }, [isExpanded, isSliced, hasNextPage, fetchNextPage]);
@@ -25023,4 +25032,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, OrderListingTable$1 as OrderListingTable, 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 };