@levi-gemcommerce/analytics 1.0.0-dev.47 → 2.0.2-dev.1

package/dist/esm/index.mjs

@@ -2439,6 +2439,17 @@ const GBoxCard = ({ children, ...props }) => {
     return (jsx(Box, { ...G_BOX_CARD_DEFAULT_PROPS, ...props, children: children }));
 };
 
+/**
+ * Wraps its children with a demo-experiment tooltip when `isMockData` is true.
+ * When `isMockData` is false it renders the children untouched.
+ *
+ * Keeps the demo copy in a single place so it only needs to be edited here.
+ */
+const GMockDataTooltip = ({ isMockData, content, children, ...props }) => {
+    const { t } = useTranslation();
+    return (jsx(GTooltip, { isEnabled: isMockData, content: content ?? t('This is just a demo experiment. Create a real one to view order listing.'), dismissOnMouseOut: true, ...props, children: children }));
+};
+
 const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
@@ -2464,6 +2475,20 @@ const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesCol
                 }, children: children })] }));
 };
 
+const TimezoneContext = createContext({ tz: 'UTC' });
+const TimezoneProvider = ({ children, tz }) => {
+    const [currentTz, setCurrentTz] = useState(() => {
+        setTz(tz);
+        return tz;
+    });
+    useEffect(() => {
+        setTz(tz);
+        setCurrentTz(tz);
+    }, [tz]);
+    return jsx(TimezoneContext.Provider, { value: { tz: currentTz }, children: children });
+};
+const useTimezoneContext = () => useContext(TimezoneContext);
+
 const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
     const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
     if (!metricKey) {
@@ -2546,24 +2571,26 @@ const MetricDonutChartSkeleton = () => {
 
 const MetricValueSummary = ({ totalValue, hideComparison }) => (jsx(BlockStack, { gap: "200", children: jsxs(InlineStack, { blockAlign: "center", gap: "200", wrap: false, children: [jsx(InlineStack, { blockAlign: "center", gap: "200", children: jsx(Text, { as: "span", variant: "headingSm", children: totalValue.value }) }), !hideComparison && jsx(MetricPercentage, { change: totalValue.change })] }) }));
 
-const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, onClickTitle, }) => {
+const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, isMockData, onClickTitle, }) => {
     const { key, title, totalValue } = item;
     const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
     if (isLoading)
         return jsx(MetricInfoSkeleton, {});
-    return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: "hover:cursor-pointer hover:text-[--p-color-text-link-hover]", onClick: (e) => {
+    return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: (e) => {
+                    if (isMockData)
+                        return;
                     e?.stopPropagation();
                     onClickTitle?.(key);
-                }, children: jsxs(InlineStack, { wrap: false, children: [jsx(Box, { maxWidth: "100%", overflowX: "hidden", children: jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "span", variant: titleVariant, fontWeight: titleFontWeight, truncate: true, children: title }) }) }), isHovered && (jsx("div", { className: "flex h-[20px] w-[20px] items-center", children: jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" }) }))] }) }), jsx(MetricValueSummary, { totalValue: totalValue, hideComparison: hideComparison })] }));
+                }, children: jsxs(InlineStack, { wrap: false, children: [jsx(Box, { maxWidth: "100%", overflowX: "hidden", children: jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "span", variant: titleVariant, fontWeight: titleFontWeight, truncate: true, children: title }) }) }), isHovered && !isMockData && (jsx("div", { className: "flex h-[20px] w-[20px] items-center", children: jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" }) }))] }) }), jsx(MetricValueSummary, { totalValue: totalValue, hideComparison: hideComparison })] }));
 };
 
-const MetricChartTab = ({ item, isActive, isLoading, hideComparison, onSelect, onClickTitle, }) => {
+const MetricChartTab = ({ item, isActive, isLoading, hideComparison, isMockData, onSelect, onClickTitle, }) => {
     const [isHovered, setIsHovered] = useState(false);
     const isHighlighted = isActive || isHovered;
-    return (jsx("div", { className: "w-full cursor-pointer overflow-hidden", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(item.key), children: jsx(Box, { paddingBlock: "150", paddingInline: "300", borderRadius: "200", background: isHighlighted ? 'bg-surface-active' : undefined, children: jsx(MetricInfoBlock, { item: item, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, titleVariant: "headingSm", titleFontWeight: "semibold", onClickTitle: onClickTitle }) }) }));
+    return (jsx("div", { className: "w-full cursor-pointer overflow-hidden", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(item.key), children: jsx(Box, { paddingBlock: "150", paddingInline: "300", borderRadius: "200", background: isHighlighted ? 'bg-surface-active' : undefined, children: jsx(MetricInfoBlock, { item: item, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, titleVariant: "headingSm", titleFontWeight: "semibold", isMockData: isMockData, onClickTitle: onClickTitle }) }) }));
 };
 
-const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, }) => {
+const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, isMockData, onclickMetric, }) => {
     const [activeTab, setActiveTab] = useState(defaultActiveTab);
     const lineChartData = useMemo(() => {
         const chartData = activeTab ? dataChart[activeTab] : undefined;
@@ -2579,7 +2606,7 @@ const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, i
                     gridTemplateColumns: `repeat(${metricInfo.length}, 1fr)`,
                     gap: '16px',
                     marginBottom: '16px',
-                }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, onSelect: setActiveTab }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, metricKey: activeTab, columnTypes: columnTypes })] }));
+                }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, isMockData: isMockData, onSelect: setActiveTab, onClickTitle: onclickMetric }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, metricKey: activeTab, columnTypes: columnTypes })] }));
 };
 
 EGroupOperator.OR;
@@ -2670,7 +2697,7 @@ const buildBreakdownDonutData = ({ targets, metricKey, totalsRow, comparisonTota
 
 const DONUT_CHART_MIN_HEIGHT = 294;
 const COMPACT_MAX_WIDTH = 1500;
-const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, onClick, }) => {
+const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, isMockData, onClick, }) => {
     const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
     const { windowWidth, windowSize } = useWindowSize();
     const [isHovered, setIsHovered] = useState(false);
@@ -2682,20 +2709,22 @@ const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparison
         return numberWithCommas(`${value}`);
     };
     const handleClickTitle = (event) => {
+        if (isMockData)
+            return;
         event.stopPropagation();
         onClick();
     };
     const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
-    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: "hover:cursor-pointer hover:text-[--p-color-text-link-hover]", onClick: handleClickTitle, children: jsxs(InlineStack, { children: [jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "h3", variant: "headingMd", children: label }) }), isHovered && jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" })] }) }) }), jsx("div", { className: cls('flex items-center justify-center', {
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: handleClickTitle, children: jsxs(InlineStack, { children: [jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "h3", variant: "headingMd", children: label }) }), isHovered && !isMockData && jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" })] }) }) }), jsx("div", { className: cls('flex items-center justify-center', {
                             'max-h-[250px] overflow-hidden': isCompactView,
                         }), children: isEmptyMetricData ? (jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" })) : (jsx(MetricChartProvider, { minHeight: minHeight, seriesColors: {}, children: jsx(DonutChart, { data: data, legendPosition: "left", showLegendValues: true, showLegend: true, theme: "Light", tooltipOptions: {
                                     valueFormatter: formatValue,
                                 }, labelFormatter: formatValue }) })) })] }) }) }));
 };
 
-const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, onClickTitle, }) => {
+const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, isMockData, onClickTitle, }) => {
     const [isHovered, setIsHovered] = useState(false);
-    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, isMockData: isMockData, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
 };
 
 var IMAGE_FIRST_SESSION = "data:image/png;base64,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";
@@ -3202,6 +3231,7 @@ const COMPARE_DATE_TIME_FILTERS_MAP = {
 };
 
 const useDateTimeFilter = () => {
+    useTimezoneContext();
     const currentDate = dayjsTzToLocalTZ().startOf('day');
     const mappings = getDateTimeFilterMapping();
     const TODAY_CONFIG = mappings[MainDateTimePickerAlias.TODAY];
@@ -24334,11 +24364,17 @@ 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 EReportSource;
-(function (EReportSource) {
-    EReportSource["CAMPAIGN"] = "campaign";
-    EReportSource["PAGE"] = "page";
-})(EReportSource || (EReportSource = {}));
+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) {
@@ -24394,17 +24430,74 @@ var IRMetricKey;
     IRMetricKey["VISITOR_BY_TYPE"] = "visitor_type";
 })(IRMetricKey || (IRMetricKey = {}));
 
-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 = {}));
+[IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
+({
+    [IRVariantType.VARIANT_A]: 'Control',
+    [IRVariantType.VARIANT_B]: 'Variant',
+});
+
+const COLUMN_SEPARATOR = '___';
+const DIMENSION_SEPARATOR = '__';
+const COMPARISON_PREFIX = 'comparison';
+const PREVIOUS_PERIOD_KEY = 'previous_period';
+const TOTAL_SUFFIX = 'totals';
+
+const joinColumnParts = (...parts) => parts.join(COLUMN_SEPARATOR);
+const getDimensionPathKey = (dimensions, dimensionIndex) => dimensions.slice(0, dimensionIndex + 1).join(DIMENSION_SEPARATOR);
+function getPreviousColumnName(key) {
+    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY);
+}
+function getPreviousTotalColumnName(key) {
+    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, TOTAL_SUFFIX);
+}
+function getTotalColumnName(key) {
+    return joinColumnParts(key, TOTAL_SUFFIX);
+}
+function getTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
+    return joinColumnParts(key, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
+}
+function getPreviousTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
+    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
+}
+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 ?? []),
+        };
+    });
+};
+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;
+        }
+        if (Array.isArray(rowItems)) {
+            totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
+        }
+    });
+    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 ORDER_LISTING_DIMENSION_LAYOUT = {
     width: '158px',
@@ -24614,79 +24707,6 @@ const DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT = [
     EReportColumnKey.VISITOR,
 ];
 
-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 })] })] }) }));
-};
-
-[IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
-({
-    [IRVariantType.VARIANT_A]: 'Control',
-    [IRVariantType.VARIANT_B]: 'Variant',
-});
-
-const COLUMN_SEPARATOR = '___';
-const DIMENSION_SEPARATOR = '__';
-const COMPARISON_PREFIX = 'comparison';
-const PREVIOUS_PERIOD_KEY = 'previous_period';
-const TOTAL_SUFFIX = 'totals';
-
-const joinColumnParts = (...parts) => parts.join(COLUMN_SEPARATOR);
-const getDimensionPathKey = (dimensions, dimensionIndex) => dimensions.slice(0, dimensionIndex + 1).join(DIMENSION_SEPARATOR);
-function getPreviousColumnName(key) {
-    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY);
-}
-function getPreviousTotalColumnName(key) {
-    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, TOTAL_SUFFIX);
-}
-function getTotalColumnName(key) {
-    return joinColumnParts(key, TOTAL_SUFFIX);
-}
-function getTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
-    return joinColumnParts(key, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
-}
-function getPreviousTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
-    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
-}
-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 ?? []),
-        };
-    });
-};
-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;
-        }
-        if (Array.isArray(rowItems)) {
-            totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
-        }
-    });
-    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 SKELETON_METRICS = [
     EReportColumnKey.ORDER_DATE,
     EReportColumnKey.TOTAL,
@@ -24772,6 +24792,10 @@ 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";
@@ -25182,7 +25206,7 @@ const useReportData = () => {
     };
 };
 
-const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, }) => {
+const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
     const { t } = useTranslation();
     const { onViewAllStoreOrders } = useReportTableActionsContext();
     const isHasTotalRows = Boolean(totalRows && totalRows > 0);
@@ -25197,7 +25221,7 @@ const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', show
             '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(`${totalRows} rows`) })), isShowViewAllStoreOrders && (jsx(Button, { variant: "plain", onClick: handleClickViewAllStoreOrders, children: getViewAllStoreOrdersText() }))] }));
+        }), children: [paginationProps && jsx(GPagination, { ...paginationProps }), isHasTotalRows && (jsx(Text, { variant: "bodyMd", as: "span", children: t(`${totalRows} rows`) })), 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}})', {
@@ -25216,8 +25240,8 @@ const ScrollBar = forwardRef(({ isPaginationHidden }, ref) => {
 });
 ScrollBar.displayName = 'ScrollBar';
 
-const WrapperFooter = ({ scrollbarContainerRef, itemCount, totalPaginationRows, showViewAllButton, paginationProps, isPaginationHidden, }) => {
-    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 })] }));
+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 }) => {
@@ -25235,16 +25259,21 @@ const DefaultCell = ({ isMergedWithPrev, value, previousValue, columnLayout, isT
     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 LoadingData = () => {
+    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Spinner, { accessibilityLabel: "Fetching orders", size: "small" }) }));
+};
+
+const NoData = () => {
+    const { t } = useTranslation();
+    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Text, { as: "p", children: t('No orders found.') }) }));
+};
+
 const OrderCellBase = ({ value, justifyContent, isPrevious, isTotalRow, interactive, }) => {
     const { onClick, hovering, onHoverChange } = interactive ?? {};
     const ableInteractive = !!interactive;
     return (jsx("div", { className: cls('GReportTable__CellContent--clickable flex h-7 w-full items-center px-[8px] pl-3', { 'hover:bg-surface-hover cursor-pointer': ableInteractive }, { 'GReportTable__CellContent--noClick': !ableInteractive }), style: { justifyContent }, onClick: onClick ?? undefined, onMouseEnter: ableInteractive ? () => onHoverChange?.(true) : undefined, onMouseLeave: ableInteractive ? () => onHoverChange?.(false) : undefined, children: jsxs(InlineStack, { blockAlign: "center", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: isTotalRow ? 'semibold' : 'regular', tone: isPrevious ? 'subdued' : 'inherit', children: value }), jsx(Box, { opacity: hovering && ableInteractive ? '1' : '0', children: jsx(Icon, { source: SvgCaretDownIcon }) })] }) }));
 };
 
-const LoadingData = () => {
-    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Spinner, { accessibilityLabel: "Fetching orders", size: "small" }) }));
-};
-
 const OrderItem = ({ order }) => {
     const { t } = useTranslation();
     const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
@@ -25258,11 +25287,6 @@ const OrderItem = ({ order }) => {
     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) }) })] })] }) }));
 };
 
-const NoData = () => {
-    const { t } = useTranslation();
-    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Text, { as: "p", children: t('No orders found.') }) }));
-};
-
 const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow, }) => {
     const { value: itemHovering, setTrue, setFalse } = useToggle(false);
     const { value: active, toggle: toggleActive } = useToggle(false);
@@ -25290,8 +25314,8 @@ const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow
             }, isPrevious: isPrevious }), onClose: toggleActive, children: jsx(Box, { width: "291px", children: getContent() }) }));
 };
 
-const OrderCellContainer = ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, }) => {
-    return (jsxs(BlockStack, { align: "center", children: [jsx(Box, { width: "100%", children: jsx(OrderCell, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, isTotalRow: isTotalRow }) }), typeof previousValue === 'string' && (jsx(Box, { width: "100%", children: jsx(OrderCell, { value: previousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, isPrevious: true, isTotalRow: isTotalRow }) }))] }));
+const OrderCellContainer = ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData, }) => {
+    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;
@@ -25407,11 +25431,14 @@ const VersionCell = ({ value, previousValue, isMergedWithPrev, columnLayout }) =
     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 OrderIdCell = ({ value }) => {
+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 }));
+    }
     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',
@@ -25483,10 +25510,10 @@ const cellMap = {
             return null;
         return jsx(VersionCell, { value: value, isMergedWithPrev: isMergedWithPrev });
     },
-    [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow }) => {
+    [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 }));
+        return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow, isMockData: isMockData }));
     },
     [EReportColumnKey.ORDER_DATE]: ({ value, isMergedWithPrev }) => {
         if (!isString(value))
@@ -25503,10 +25530,10 @@ const cellMap = {
             return null;
         return jsx(CampaignsCell, { value: value, campaignsCellProps: campaignsCellProps });
     },
-    [EReportColumnKey.ORDER_ID]: ({ value }) => {
+    [EReportColumnKey.ORDER_ID]: ({ value, isMockData }) => {
         if (!isString(value))
             return null;
-        return jsx(OrderIdCell, { value: value });
+        return jsx(OrderIdCell, { value: value, isMockData: isMockData });
     },
 };
 
@@ -25516,7 +25543,7 @@ 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, }) => {
+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 });
@@ -25533,12 +25560,12 @@ 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 }));
+        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 Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, }) => {
+const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, isMockData, }) => {
     const checkMergedWithPrev = (col) => {
         const isDimensionCol = dimensions.includes(col);
         let isMergedWithPrev = false;
@@ -25558,7 +25585,7 @@ 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 }, col.name));
+            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));
         }) }));
 };
 
@@ -25657,7 +25684,7 @@ WrapperHeader.displayName = 'WrapperHeader';
 
 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, onChangeOrderBy, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, skeletons, }) => {
+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 });
@@ -25688,15 +25715,15 @@ const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data,
     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 }, index))) })] }), jsx(WrapperFooter, { scrollbarContainerRef: scrollbarContainerRef, totalPaginationRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden }), jsx("div", { className: "GReportTable__LeftShadow", style: { left: tableDimensionLayout.width }, ref: leftShadowRef }), jsx("div", { className: "GReportTable__RightShadow", ref: rightShadowRef })] }) }));
+            }), 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 })] }));
+            }), children: [emptyStateComponent, jsx(WrapperFooter, { totalPaginationRows: 0, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: true, isMockData: isMockData })] }));
     }
 };
 
-const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
+const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, isMockData, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
     const { hideSummary, limitRowAmount, hidePaginationRow, hideBorderTop, fixedColumns, isLatestTable } = tableOptions ?? {};
     const { t } = useTranslation();
     const orderBy = useOrderControlStore((state) => state.orderBy);
@@ -25722,7 +25749,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, 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, 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') }) }) }));
@@ -25740,11 +25767,17 @@ const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, pa
 };
 var OrderListingTable$1 = memo(OrderListingTable);
 
-const OrderListingLatestTable = ({ source, data, callbacks }) => {
+var EReportSource;
+(function (EReportSource) {
+    EReportSource["CAMPAIGN"] = "campaign";
+    EReportSource["PAGE"] = "page";
+})(EReportSource || (EReportSource = {}));
+
+const OrderListingLatestTable = ({ source, data, callbacks, isMockData }) => {
     const { orders, isLoading, totalFilteredOrders, totalStoreOrders } = data;
     const { onViewAllOrders, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails } = callbacks ?? {};
     const { t } = useTranslation();
-    const isEmpty = !isLoading && orders.length === 0;
+    const isEmpty = orders.length === 0;
     const sourceText = source === EReportSource.CAMPAIGN ? 'experiment' : source;
     const tooltipContent = getOrderSourceTooltipContent(source);
     const fixedColumns = useMemo(() => {
@@ -25752,10 +25785,10 @@ const OrderListingLatestTable = ({ source, data, callbacks }) => {
             return ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE;
         return ORDER_LISTING_COLUMNS;
     }, [source]);
-    return (jsxs(GBoxCard, { padding: "0", overflowX: "hidden", children: [jsx(Box, { padding: "400", borderStartStartRadius: "400", borderStartEndRadius: "400", background: "bg-fill", children: jsxs(InlineStack, { blockAlign: "center", align: "space-between", children: [jsx(GTextTooltip, { tooltipProps: tooltipContent ? { content: tooltipContent } : undefined, as: "p", variant: "headingMd", fontWeight: "semibold", children: t('Orders from {{source}}', { source: sourceText }) }), !isEmpty && (jsx(Button, { variant: "secondary", onClick: onViewAllOrders, children: t('View {{source}} orders ({{totalOrders}})', {
-                                source: sourceText,
-                                totalOrders: totalFilteredOrders,
-                            }) }))] }) }), isEmpty ? (jsx(OrderListingTableEmpty, { title: t('No order yet'), description: t('There are no orders from this {{source}} yet', { source }) })) : (jsx(OrderListingTable$1, { orders: orders, isLoading: isLoading, totalStoreOrders: totalStoreOrders, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, tableOptions: {
+    return (jsxs(GBoxCard, { padding: "0", overflowX: "hidden", children: [jsx(Box, { padding: "400", borderStartStartRadius: "400", borderStartEndRadius: "400", background: "bg-fill", children: jsxs(InlineStack, { blockAlign: "center", align: "space-between", children: [jsx(GTextTooltip, { tooltipProps: tooltipContent ? { content: tooltipContent } : undefined, as: "p", variant: "headingMd", fontWeight: "semibold", children: t('Orders from {{source}}', { source: sourceText }) }), !isEmpty && (jsx(GMockDataTooltip, { isMockData: isMockData, children: jsx(Button, { variant: "secondary", disabled: isMockData, onClick: onViewAllOrders, children: t('View {{source}} orders ({{totalOrders}})', {
+                                    source: sourceText,
+                                    totalOrders: totalFilteredOrders,
+                                }) }) }))] }) }), isEmpty ? (jsx(OrderListingTableEmpty, { title: t('No order yet'), description: t('There are no orders from this {{source}} yet', { source }) })) : (jsx(OrderListingTable$1, { orders: orders, isLoading: isLoading, totalStoreOrders: totalStoreOrders, isMockData: isMockData, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, tableOptions: {
                     hideSummary: true,
                     hidePaginationRow: true,
                     limitRowAmount: ORDER_LISTING_CONFIG.SHOW_LATEST_ORDER_LISTING_AMOUNT,
@@ -25835,4 +25868,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, 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, 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, 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, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, 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, 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, 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, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, useTimezoneContext, useVersionDateTimeFilters };

package/dist/esm/providers/TimezoneProvider.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+interface ITimezoneContext {
+    tz: string;
+}
+export interface ITimezoneProviderProps {
+    children: ReactNode;
+    tz: string;
+}
+export declare const TimezoneProvider: ({ children, tz }: ITimezoneProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTimezoneContext: () => ITimezoneContext;
+export {};

package/dist/esm/providers/index.d.ts

@@ -1,3 +1,5 @@
 export { ConvertMoneyProvider, useConvertMoneyContext } from './ConvertMoneyProvider';
 export type { IProps as IConvertMoneyProviderProps } from './ConvertMoneyProvider';
 export { MetricChartProvider } from './MetricChartProvider';
+export { TimezoneProvider, useTimezoneContext } from './TimezoneProvider';
+export type { ITimezoneProviderProps } from './TimezoneProvider';

package/dist/esm/shared/components/GMockDataTooltip/GMockDataTooltip.d.ts

@@ -0,0 +1,12 @@
+import type { GTooltipProps } from '../GTooltip';
+export interface GMockDataTooltipProps extends Omit<GTooltipProps, 'isEnabled' | 'content'> {
+    isMockData?: boolean;
+    content?: React.ReactNode | string;
+}
+/**
+ * Wraps its children with a demo-experiment tooltip when `isMockData` is true.
+ * When `isMockData` is false it renders the children untouched.
+ *
+ * Keeps the demo copy in a single place so it only needs to be edited here.
+ */
+export declare const GMockDataTooltip: ({ isMockData, content, children, ...props }: GMockDataTooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/components/GMockDataTooltip/index.d.ts

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