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

package/dist/esm/shared/reports/ui/ReportTable/ReportTable.mjs

@@ -1,26 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ReportTableActionsProvider } from './context/ReportTableActionsContext.mjs';
-import './constants/order.mjs';
-import { DEFAULT_METRIC_LAYOUT, DEFAULT_DIMENSION_LAYOUT } from './constants/table.mjs';
-import { ReportTableSkeleton } from './ReportTableSkeleton.mjs';
-import { useReportTable } from './hooks/useReportTable.mjs';
-import { useSyncedScroll } from './hooks/useSyncedScroll.mjs';
-import '../../../../providers/ConvertMoneyProvider.mjs';
-import '../../../../providers/MetricChartProvider.mjs';
-import '../../../../providers/TimezoneProvider.mjs';
 import { cls } from '../../../../utils/cls.mjs';
 import '../../../../utils/dayjs.mjs';
 import '../../../../utils/analytics.mjs';
 import '../../../../types/template.mjs';
-import '../../common/Visualization/types/report.mjs';
-import '../../common/Visualization/types/chart.mjs';
-import '../../common/Visualization/types/report-metric.mjs';
-import './types/report-columns.mjs';
-import './types/index.mjs';
-import '../../../../core/gemxql/builder/filters/build-filter-conditions.mjs';
-import '../../../../core/gemxql/builder/filters/build-extra-conditions.mjs';
+import { useMemo } from 'react';
 import '../../../../core/gemxql/constants/row-reader-mode.mjs';
 import '../../../../core/gemxql/builder/configs/keywords.mjs';
+import '../../../../core/gemxql/builder/filters/build-extra-conditions.mjs';
+import '../../../../core/gemxql/builder/filters/build-filter-conditions.mjs';
 import '../../../../core/gemxql/types/analytic-data.mjs';
 import '../../../../core/gemxql/types/analytic-source.mjs';
 import '../../../../core/gemxql/types/extra-condition.mjs';
@@ -33,9 +20,18 @@ import '../../../../core/gemxql/types/row-reader-mode.mjs';
 import '../../../../core/gemxql/types/time-dimension.mjs';
 import '../../../../core/gemxql/api/useCustomGemXQlQuery.mjs';
 import '../../../../core/gemxql/api/useGemxQlNamedQuery.mjs';
+import '../../../../providers/ConvertMoneyProvider.mjs';
 import '../../../components/GPagination/GPagination.mjs';
-import { useMemo } from 'react';
-import { WrapperFooter } from './components/Footer/WrapperFooter.mjs';
+import { useReportTable } from './hooks/useReportTable.mjs';
+import { useSyncedScroll } from './hooks/useSyncedScroll.mjs';
+import './types/index.mjs';
+import './types/report-columns.mjs';
+import '../../common/Visualization/types/report.mjs';
+import '../../common/Visualization/types/chart.mjs';
+import '../../common/Visualization/types/report-metric.mjs';
+import '../../../../providers/MetricChartProvider.mjs';
+import '../../../../providers/TimezoneProvider.mjs';
+import './components/Body/Cell/CellRenderers.mjs';
 import '@shopify/polaris';
 import '@shopify/polaris-icons';
 import '../../../components/GTooltip/components/GTooltipCard.mjs';
@@ -46,19 +42,19 @@ import '../../../components/GFeatureLocked/types.mjs';
 import '../../../charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
 import '../../../../stores/currencyRatesStore.mjs';
 import '@tanstack/react-query';
-import './components/Body/Cell/CellRenderers.mjs';
 import { Row } from './components/Body/Row.mjs';
 import { WrapperHeader } from './components/Header/WrapperHeader.mjs';
+import { WrapperFooter } from './components/Footer/WrapperFooter.mjs';
+import './constants/order.mjs';
+import { DEFAULT_METRIC_LAYOUT, DEFAULT_DIMENSION_LAYOUT } from './constants/table.mjs';
+import { ReportTableActionsProvider } from './context/ReportTableActionsContext.mjs';
+import { ReportTableSkeleton } from './ReportTableSkeleton.mjs';
 
 const mockDimensions = ['session_device_type', 'month', 'session_country', 'session_device_os'];
 const mockMetrics = ['online_store_visitors', 'sessions', 'bounces'];
 const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data, activeColumn, orderBy, options, paginationProps, itemCount, dimensionLayout, metricLayouts, orderCellProps, isHideCampaignContent = false, showViewAllButton, emptyStateComponent, isLoading, isMockData, onChangeOrderBy, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, skeletons, }) => {
     const { summary = {}, hideBorderTop, hidePaginationRow } = options ?? {};
-    const { columns, rows } = useReportTable({
-        dimensions,
-        metrics,
-        tableData: data ?? { columns: [], rows: [] },
-    });
+    const { columns, rows } = useReportTable({ dimensions, metrics, tableData: data ?? { columns: [], rows: [] } });
     const { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef } = useSyncedScroll({ columns });
     const tableDimensionLayout = dimensionLayout ?? DEFAULT_DIMENSION_LAYOUT;
     const isEmpty = rows.length === 0;

package/dist/esm/shared/reports/ui/ReportTable/ReportTableSkeleton.js

@@ -1,23 +1,16 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Box, SkeletonBodyText } from '@shopify/polaris';
 import GEMX_LOGO from '../../../../assets/svg/gemx-skeleton.svg.js';
-import '@shopify/polaris-icons';
-import 'react';
+import { Box, SkeletonBodyText } from '@shopify/polaris';
+import { getColumnLayoutStyles } from './utils/table.js';
+import './types/index.js';
 import { cls } from '../../../../utils/cls.js';
 import '../../../../utils/dayjs.js';
 import '../../../../utils/analytics.js';
 import '../../../../types/template.js';
-import '../../../components/GTooltip/components/GTooltipCard.js';
-import '../../../components/GDiv/GDiv.js';
-import 'react-i18next';
-import '../../../components/GFeatureLocked/constants.js';
-import '../../../components/GFeatureLocked/types.js';
-import '../../../components/GPagination/GPagination.js';
-import { GInlineCenter } from '../../../components/GInlineCenter/GInlineCenter.js';
-import '../../../charts/components/GPolarisViz/hooks/useResizeObserver.js';
-import '../../../../stores/currencyRatesStore.js';
-import '@tanstack/react-query';
 import '../../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../../core/gemxql/builder/configs/keywords.js';
+import '../../../../core/gemxql/builder/filters/build-extra-conditions.js';
+import '../../../../core/gemxql/builder/filters/build-filter-conditions.js';
 import '../../../../core/gemxql/types/analytic-data.js';
 import '../../../../core/gemxql/types/analytic-source.js';
 import '../../../../core/gemxql/types/extra-condition.js';
@@ -28,18 +21,25 @@ import '../../../../core/gemxql/types/order-by.js';
 import '../../../../core/gemxql/types/page-fields.js';
 import '../../../../core/gemxql/types/row-reader-mode.js';
 import '../../../../core/gemxql/types/time-dimension.js';
+import '../../../../core/gemxql/api/useCustomGemXQlQuery.js';
+import '../../../../core/gemxql/api/useGemxQlNamedQuery.js';
 import '../../../../providers/ConvertMoneyProvider.js';
-import { getColumnLayoutStyles } from './utils/table.js';
+import '../../../components/GPagination/GPagination.js';
+import 'react';
+import './types/report-columns.js';
 import '../../common/Visualization/types/report.js';
 import '../../common/Visualization/types/chart.js';
 import '../../common/Visualization/types/report-metric.js';
-import './types/report-columns.js';
-import './types/index.js';
-import '../../../../core/gemxql/builder/filters/build-filter-conditions.js';
-import '../../../../core/gemxql/builder/filters/build-extra-conditions.js';
-import '../../../../core/gemxql/builder/configs/keywords.js';
-import '../../../../core/gemxql/api/useCustomGemXQlQuery.js';
-import '../../../../core/gemxql/api/useGemxQlNamedQuery.js';
+import '@shopify/polaris-icons';
+import '../../../components/GTooltip/components/GTooltipCard.js';
+import '../../../components/GDiv/GDiv.js';
+import 'react-i18next';
+import '../../../components/GFeatureLocked/constants.js';
+import '../../../components/GFeatureLocked/types.js';
+import { GInlineCenter } from '../../../components/GInlineCenter/GInlineCenter.js';
+import '../../../charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import '../../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
 
 const COLOR_NORMAL = '#FFFFFF';
 const COLOR_ACTIVE = '#F8F8F8';

package/dist/esm/shared/reports/ui/ReportTable/ReportTableSkeleton.mjs

@@ -1,23 +1,16 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Box, SkeletonBodyText } from '@shopify/polaris';
 import GEMX_LOGO from '../../../../assets/svg/gemx-skeleton.svg.mjs';
-import '@shopify/polaris-icons';
-import 'react';
+import { Box, SkeletonBodyText } from '@shopify/polaris';
+import { getColumnLayoutStyles } from './utils/table.mjs';
+import './types/index.mjs';
 import { cls } from '../../../../utils/cls.mjs';
 import '../../../../utils/dayjs.mjs';
 import '../../../../utils/analytics.mjs';
 import '../../../../types/template.mjs';
-import '../../../components/GTooltip/components/GTooltipCard.mjs';
-import '../../../components/GDiv/GDiv.mjs';
-import 'react-i18next';
-import '../../../components/GFeatureLocked/constants.mjs';
-import '../../../components/GFeatureLocked/types.mjs';
-import '../../../components/GPagination/GPagination.mjs';
-import { GInlineCenter } from '../../../components/GInlineCenter/GInlineCenter.mjs';
-import '../../../charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
-import '../../../../stores/currencyRatesStore.mjs';
-import '@tanstack/react-query';
 import '../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../core/gemxql/builder/configs/keywords.mjs';
+import '../../../../core/gemxql/builder/filters/build-extra-conditions.mjs';
+import '../../../../core/gemxql/builder/filters/build-filter-conditions.mjs';
 import '../../../../core/gemxql/types/analytic-data.mjs';
 import '../../../../core/gemxql/types/analytic-source.mjs';
 import '../../../../core/gemxql/types/extra-condition.mjs';
@@ -28,18 +21,25 @@ import '../../../../core/gemxql/types/order-by.mjs';
 import '../../../../core/gemxql/types/page-fields.mjs';
 import '../../../../core/gemxql/types/row-reader-mode.mjs';
 import '../../../../core/gemxql/types/time-dimension.mjs';
+import '../../../../core/gemxql/api/useCustomGemXQlQuery.mjs';
+import '../../../../core/gemxql/api/useGemxQlNamedQuery.mjs';
 import '../../../../providers/ConvertMoneyProvider.mjs';
-import { getColumnLayoutStyles } from './utils/table.mjs';
+import '../../../components/GPagination/GPagination.mjs';
+import 'react';
+import './types/report-columns.mjs';
 import '../../common/Visualization/types/report.mjs';
 import '../../common/Visualization/types/chart.mjs';
 import '../../common/Visualization/types/report-metric.mjs';
-import './types/report-columns.mjs';
-import './types/index.mjs';
-import '../../../../core/gemxql/builder/filters/build-filter-conditions.mjs';
-import '../../../../core/gemxql/builder/filters/build-extra-conditions.mjs';
-import '../../../../core/gemxql/builder/configs/keywords.mjs';
-import '../../../../core/gemxql/api/useCustomGemXQlQuery.mjs';
-import '../../../../core/gemxql/api/useGemxQlNamedQuery.mjs';
+import '@shopify/polaris-icons';
+import '../../../components/GTooltip/components/GTooltipCard.mjs';
+import '../../../components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import '../../../components/GFeatureLocked/constants.mjs';
+import '../../../components/GFeatureLocked/types.mjs';
+import { GInlineCenter } from '../../../components/GInlineCenter/GInlineCenter.mjs';
+import '../../../charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
 
 const COLOR_NORMAL = '#FFFFFF';
 const COLOR_ACTIVE = '#F8F8F8';

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/CampaignsCell/CampaignsCell.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useReportTableActionsContext } from '../../../../context/ReportTableActionsContext.js';
 import { Popover, Box, Icon, Text, Scrollable, InlineStack, Button } from '@shopify/polaris';
 import { CaretDownIcon, ChartLineIcon } from '@shopify/polaris-icons';
-import { CampaignsCellVersion } from './CampaignsCellVersion.js';
 import { useState, useCallback } from 'react';
 import { cls } from '../../../../../../../../utils/cls.js';
 import '../../../../../../../../utils/dayjs.js';
@@ -17,6 +15,7 @@ import '../../../../../../../components/GPagination/GPagination.js';
 import { GTextTruncated } from '../../../../../../../components/GTextTruncated/GTextTruncated.js';
 import '../../../../../../../../stores/currencyRatesStore.js';
 import '@tanstack/react-query';
+import '../../../../../../../../providers/ConvertMoneyProvider.js';
 import '../../../../../../../../core/gemxql/constants/row-reader-mode.js';
 import '../../../../../../../../core/gemxql/types/analytic-data.js';
 import '../../../../../../../../core/gemxql/types/analytic-source.js';
@@ -28,10 +27,11 @@ import '../../../../../../../../core/gemxql/types/order-by.js';
 import '../../../../../../../../core/gemxql/types/page-fields.js';
 import '../../../../../../../../core/gemxql/types/row-reader-mode.js';
 import '../../../../../../../../core/gemxql/types/time-dimension.js';
-import '../../../../../../../../providers/ConvertMoneyProvider.js';
+import { useReportTableActionsContext } from '../../../../context/ReportTableActionsContext.js';
+import { CampaignsCellVersion } from './CampaignsCellVersion.js';
 
 const CampaignsCell = ({ value, campaignsCellProps, }) => {
-    const { orderId, isHideCampaignContent } = campaignsCellProps ?? {};
+    const { orderId, gxId, isHideCampaignContent } = campaignsCellProps ?? {};
     const { t } = useTranslation();
     const { onViewOrderJourney } = useReportTableActionsContext();
     const [active, setActive] = useState(false);
@@ -43,10 +43,9 @@ const CampaignsCell = ({ value, campaignsCellProps, }) => {
     return (jsx(Popover, { active: active, activator: jsxs("div", { className: cls('GReportTable__CellContent--clickable flex h-full w-full items-center px-2', {
                 'cursor-pointer': isShowPopupCampaigns,
                 'hover:!bg-[#f7f7f7]': !isShowPopupCampaigns,
-            }), onClick: isShowPopupCampaigns ? toggleActive : undefined, children: [jsx(CampaignsCellVersion, { version: campaignLeadingToOrder.version }), !isHideCampaignContent && (jsxs(Fragment, { children: [jsx(Box, { minWidth: "0", paddingInlineStart: campaignLeadingToOrder.version ? '200' : '0', children: jsx(GTextTruncated, { as: "span", variant: "bodyMd", tone: "subdued", useWrapper: true, tooltip: { hoverDelay: 300 }, children: campaignLeadingToOrder.campaign_group_name ||
-                                    campaignLeadingToOrder.campaign_name }) }), isShowPopupCampaigns && (jsx("span", { className: "opacity-0 group-hover/GReportTable__Row:opacity-100", children: jsx(Icon, { source: CaretDownIcon }) }))] }))] }), 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) => {
+            }), 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: CaretDownIcon }) }))] }))] }), 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: ChartLineIcon, fullWidth: true, onClick: () => onViewOrderJourney?.(orderId ?? ''), children: t('View order journey') }) })] }) }));
+                            }) }) }) }), jsx(Box, { padding: "300", children: jsx(Button, { icon: ChartLineIcon, fullWidth: true, onClick: () => onViewOrderJourney?.(orderId ?? '', gxId), children: t('View order journey') }) })] }) }));
 };
 
 export { CampaignsCell };

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/CampaignsCell/CampaignsCell.mjs

@@ -1,8 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useReportTableActionsContext } from '../../../../context/ReportTableActionsContext.mjs';
 import { Popover, Box, Icon, Text, Scrollable, InlineStack, Button } from '@shopify/polaris';
 import { CaretDownIcon, ChartLineIcon } from '@shopify/polaris-icons';
-import { CampaignsCellVersion } from './CampaignsCellVersion.mjs';
 import { useState, useCallback } from 'react';
 import { cls } from '../../../../../../../../utils/cls.mjs';
 import '../../../../../../../../utils/dayjs.mjs';
@@ -17,6 +15,7 @@ import '../../../../../../../components/GPagination/GPagination.mjs';
 import { GTextTruncated } from '../../../../../../../components/GTextTruncated/GTextTruncated.mjs';
 import '../../../../../../../../stores/currencyRatesStore.mjs';
 import '@tanstack/react-query';
+import '../../../../../../../../providers/ConvertMoneyProvider.mjs';
 import '../../../../../../../../core/gemxql/constants/row-reader-mode.mjs';
 import '../../../../../../../../core/gemxql/types/analytic-data.mjs';
 import '../../../../../../../../core/gemxql/types/analytic-source.mjs';
@@ -28,10 +27,11 @@ import '../../../../../../../../core/gemxql/types/order-by.mjs';
 import '../../../../../../../../core/gemxql/types/page-fields.mjs';
 import '../../../../../../../../core/gemxql/types/row-reader-mode.mjs';
 import '../../../../../../../../core/gemxql/types/time-dimension.mjs';
-import '../../../../../../../../providers/ConvertMoneyProvider.mjs';
+import { useReportTableActionsContext } from '../../../../context/ReportTableActionsContext.mjs';
+import { CampaignsCellVersion } from './CampaignsCellVersion.mjs';
 
 const CampaignsCell = ({ value, campaignsCellProps, }) => {
-    const { orderId, isHideCampaignContent } = campaignsCellProps ?? {};
+    const { orderId, gxId, isHideCampaignContent } = campaignsCellProps ?? {};
     const { t } = useTranslation();
     const { onViewOrderJourney } = useReportTableActionsContext();
     const [active, setActive] = useState(false);
@@ -43,10 +43,9 @@ const CampaignsCell = ({ value, campaignsCellProps, }) => {
     return (jsx(Popover, { active: active, activator: jsxs("div", { className: cls('GReportTable__CellContent--clickable flex h-full w-full items-center px-2', {
                 'cursor-pointer': isShowPopupCampaigns,
                 'hover:!bg-[#f7f7f7]': !isShowPopupCampaigns,
-            }), onClick: isShowPopupCampaigns ? toggleActive : undefined, children: [jsx(CampaignsCellVersion, { version: campaignLeadingToOrder.version }), !isHideCampaignContent && (jsxs(Fragment, { children: [jsx(Box, { minWidth: "0", paddingInlineStart: campaignLeadingToOrder.version ? '200' : '0', children: jsx(GTextTruncated, { as: "span", variant: "bodyMd", tone: "subdued", useWrapper: true, tooltip: { hoverDelay: 300 }, children: campaignLeadingToOrder.campaign_group_name ||
-                                    campaignLeadingToOrder.campaign_name }) }), isShowPopupCampaigns && (jsx("span", { className: "opacity-0 group-hover/GReportTable__Row:opacity-100", children: jsx(Icon, { source: CaretDownIcon }) }))] }))] }), 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) => {
+            }), 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: CaretDownIcon }) }))] }))] }), 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: ChartLineIcon, fullWidth: true, onClick: () => onViewOrderJourney?.(orderId ?? ''), children: t('View order journey') }) })] }) }));
+                            }) }) }) }), jsx(Box, { padding: "300", children: jsx(Button, { icon: ChartLineIcon, fullWidth: true, onClick: () => onViewOrderJourney?.(orderId ?? '', gxId), children: t('View order journey') }) })] }) }));
 };
 
 export { CampaignsCell };

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/CampaignsCell/CampaignsCellVersion.js

@@ -10,7 +10,7 @@ import '../../../../../../../components/GVariantBadge/types.js';
 const CampaignsCellVersion = ({ version }) => {
     if (!version)
         return null;
-    return (jsx(GVariantBadge, { variant: version, tone: version === 'A' ? 'active' : 'inactive', size: "xs" }));
+    return jsx(GVariantBadge, { variant: version, tone: version === 'A' ? 'active' : 'inactive', size: "xs" });
 };
 
 export { CampaignsCellVersion };

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/CampaignsCell/CampaignsCellVersion.mjs

@@ -10,7 +10,7 @@ import '../../../../../../../components/GVariantBadge/types.mjs';
 const CampaignsCellVersion = ({ version }) => {
     if (!version)
         return null;
-    return (jsx(GVariantBadge, { variant: version, tone: version === 'A' ? 'active' : 'inactive', size: "xs" }));
+    return jsx(GVariantBadge, { variant: version, tone: version === 'A' ? 'active' : 'inactive', size: "xs" });
 };
 
 export { CampaignsCellVersion };

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/Cell.d.ts

@@ -1,7 +1,8 @@
-import type { CampaignsCellProps, OrderCellProps, ReportColumnLayout } from '../../../types';
 import type { ReportValueType } from '../../../../../common/Visualization/types';
+import type { CampaignsCellProps, OrderCellProps, ReportColumnLayout } from '../../../types';
 interface ColumnProps {
     value: ReportValueType;
+    gxId?: string;
     previousValue?: ReportValueType;
     isMergedWithPrev: boolean;
     columnLayout: ReportColumnLayout;
@@ -14,5 +15,5 @@ interface ColumnProps {
     isTotalRow: ReportValueType;
     isMockData?: boolean;
 }
-export declare const Cell: ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Cell: ({ value, gxId, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/Cell.js

@@ -1,19 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { getColumnLayoutStyles } from '../../../utils/table.js';
-import { cls } from '../../../../../../../utils/cls.js';
-import '../../../../../../../utils/dayjs.js';
-import '../../../../../../../utils/analytics.js';
-import '../../../../../../../types/template.js';
-import '../../../../../common/Visualization/types/report.js';
-import '../../../../../common/Visualization/types/chart.js';
-import '../../../../../common/Visualization/types/report-metric.js';
-import '../../../types/report-columns.js';
-import '../../../types/index.js';
-import '../../../../../../../core/gemxql/builder/filters/build-filter-conditions.js';
-import '../../../../../../../core/gemxql/builder/filters/build-extra-conditions.js';
 import { NONE_VALUE } from '../../../../../../../core/gemxql/constants/analytic-data.js';
 import '../../../../../../../core/gemxql/constants/row-reader-mode.js';
 import '../../../../../../../core/gemxql/builder/configs/keywords.js';
+import '../../../../../../../core/gemxql/builder/filters/build-extra-conditions.js';
+import '../../../../../../../core/gemxql/builder/filters/build-filter-conditions.js';
 import '../../../../../../../core/gemxql/types/analytic-data.js';
 import '../../../../../../../core/gemxql/types/analytic-source.js';
 import '../../../../../../../core/gemxql/types/extra-condition.js';
@@ -24,6 +14,10 @@ import '../../../../../../../core/gemxql/types/order-by.js';
 import '../../../../../../../core/gemxql/types/page-fields.js';
 import '../../../../../../../core/gemxql/types/row-reader-mode.js';
 import '../../../../../../../core/gemxql/types/time-dimension.js';
+import { cls } from '../../../../../../../utils/cls.js';
+import '../../../../../../../utils/dayjs.js';
+import '../../../../../../../utils/analytics.js';
+import '../../../../../../../types/template.js';
 import '../../../../../../../core/gemxql/api/useCustomGemXQlQuery.js';
 import '../../../../../../../core/gemxql/api/useGemxQlNamedQuery.js';
 import '../../../../../../../providers/ConvertMoneyProvider.js';
@@ -32,18 +26,22 @@ import 'react';
 import '../../../../../common/Visualization/constants/version.js';
 import '../../../constants/order.js';
 import { useReportData } from '../../../hooks/useReportTableCell.js';
-import { DefaultCell } from './DefaultCell.js';
+import { getColumnLayoutStyles } from '../../../utils/table.js';
+import '../../../types/index.js';
+import '../../../types/report-columns.js';
+import '../../../../../common/Visualization/types/report.js';
+import '../../../../../common/Visualization/types/chart.js';
+import '../../../../../common/Visualization/types/report-metric.js';
 import { cellMap } from './CellRenderers.js';
-import { TotalCell } from './TotalCell.js';
+import { DefaultCell } from './DefaultCell.js';
 import { NoneCell } from './NoneCell.js';
+import { TotalCell } from './TotalCell.js';
 
-const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
+const Cell = ({ value, gxId, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
     const columnLayoutStyles = getColumnLayoutStyles(columnLayout, hasTooltipCard);
     const { formatData } = useReportData();
     const formattedValue = formatData({ value, formatter, name });
-    const formattedPreviousValue = typeof previousValue === 'undefined'
-        ? previousValue
-        : formatData({ value: previousValue, formatter, name });
+    const formattedPreviousValue = typeof previousValue === 'undefined' ? previousValue : formatData({ value: previousValue, formatter, name });
     const cellStyles = {
         borderTop: isMergedWithPrev ? '0' : undefined,
         ...columnLayoutStyles,
@@ -56,7 +54,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() }) }));
 };

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/Cell.mjs

@@ -1,19 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { getColumnLayoutStyles } from '../../../utils/table.mjs';
-import { cls } from '../../../../../../../utils/cls.mjs';
-import '../../../../../../../utils/dayjs.mjs';
-import '../../../../../../../utils/analytics.mjs';
-import '../../../../../../../types/template.mjs';
-import '../../../../../common/Visualization/types/report.mjs';
-import '../../../../../common/Visualization/types/chart.mjs';
-import '../../../../../common/Visualization/types/report-metric.mjs';
-import '../../../types/report-columns.mjs';
-import '../../../types/index.mjs';
-import '../../../../../../../core/gemxql/builder/filters/build-filter-conditions.mjs';
-import '../../../../../../../core/gemxql/builder/filters/build-extra-conditions.mjs';
 import { NONE_VALUE } from '../../../../../../../core/gemxql/constants/analytic-data.mjs';
 import '../../../../../../../core/gemxql/constants/row-reader-mode.mjs';
 import '../../../../../../../core/gemxql/builder/configs/keywords.mjs';
+import '../../../../../../../core/gemxql/builder/filters/build-extra-conditions.mjs';
+import '../../../../../../../core/gemxql/builder/filters/build-filter-conditions.mjs';
 import '../../../../../../../core/gemxql/types/analytic-data.mjs';
 import '../../../../../../../core/gemxql/types/analytic-source.mjs';
 import '../../../../../../../core/gemxql/types/extra-condition.mjs';
@@ -24,6 +14,10 @@ import '../../../../../../../core/gemxql/types/order-by.mjs';
 import '../../../../../../../core/gemxql/types/page-fields.mjs';
 import '../../../../../../../core/gemxql/types/row-reader-mode.mjs';
 import '../../../../../../../core/gemxql/types/time-dimension.mjs';
+import { cls } from '../../../../../../../utils/cls.mjs';
+import '../../../../../../../utils/dayjs.mjs';
+import '../../../../../../../utils/analytics.mjs';
+import '../../../../../../../types/template.mjs';
 import '../../../../../../../core/gemxql/api/useCustomGemXQlQuery.mjs';
 import '../../../../../../../core/gemxql/api/useGemxQlNamedQuery.mjs';
 import '../../../../../../../providers/ConvertMoneyProvider.mjs';
@@ -32,18 +26,22 @@ import 'react';
 import '../../../../../common/Visualization/constants/version.mjs';
 import '../../../constants/order.mjs';
 import { useReportData } from '../../../hooks/useReportTableCell.mjs';
-import { DefaultCell } from './DefaultCell.mjs';
+import { getColumnLayoutStyles } from '../../../utils/table.mjs';
+import '../../../types/index.mjs';
+import '../../../types/report-columns.mjs';
+import '../../../../../common/Visualization/types/report.mjs';
+import '../../../../../common/Visualization/types/chart.mjs';
+import '../../../../../common/Visualization/types/report-metric.mjs';
 import { cellMap } from './CellRenderers.mjs';
-import { TotalCell } from './TotalCell.mjs';
+import { DefaultCell } from './DefaultCell.mjs';
 import { NoneCell } from './NoneCell.mjs';
+import { TotalCell } from './TotalCell.mjs';
 
-const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
+const Cell = ({ value, gxId, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
     const columnLayoutStyles = getColumnLayoutStyles(columnLayout, hasTooltipCard);
     const { formatData } = useReportData();
     const formattedValue = formatData({ value, formatter, name });
-    const formattedPreviousValue = typeof previousValue === 'undefined'
-        ? previousValue
-        : formatData({ value: previousValue, formatter, name });
+    const formattedPreviousValue = typeof previousValue === 'undefined' ? previousValue : formatData({ value: previousValue, formatter, name });
     const cellStyles = {
         borderTop: isMergedWithPrev ? '0' : undefined,
         ...columnLayoutStyles,
@@ -56,7 +54,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() }) }));
 };

package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/CellRenderers.js

@@ -2,14 +2,18 @@ import { jsx } from 'react/jsx-runtime';
 import '../../../../../common/Visualization/types/report.js';
 import '../../../../../common/Visualization/types/chart.js';
 import { IRMetricKey } from '../../../../../common/Visualization/types/report-metric.js';
-import { EReportColumnKey } from '../../../types/report-columns.js';
 import { EDimensionKey } from '../../../types/dimension.js';
+import { EReportColumnKey } from '../../../types/report-columns.js';
+import { CampaignsCell } from './CampaignsCell/CampaignsCell.js';
+import { DateCell } from './DateCell.js';
+import { GemxIdCell } from './GemxIdCell.js';
+import { ItemsCell } from './ItemsCell/ItemsCell.js';
+import 'react';
 import '@shopify/polaris';
 import '@shopify/polaris-icons';
 import '../../../../../../../utils/dayjs.js';
 import '../../../../../../../utils/analytics.js';
 import '../../../../../../../types/template.js';
-import 'react';
 import '../../../../../../components/GTooltip/components/GTooltipCard.js';
 import '../../../../../../components/GDiv/GDiv.js';
 import 'react-i18next';
@@ -19,6 +23,7 @@ import '../../../../../../components/GPagination/GPagination.js';
 import '../../../../../../charts/components/GPolarisViz/hooks/useResizeObserver.js';
 import '../../../../../../../stores/currencyRatesStore.js';
 import '@tanstack/react-query';
+import '../../../../../../../providers/ConvertMoneyProvider.js';
 import '../../../../../../../core/gemxql/constants/row-reader-mode.js';
 import '../../../../../../../core/gemxql/types/analytic-data.js';
 import '../../../../../../../core/gemxql/types/analytic-source.js';
@@ -30,14 +35,10 @@ import '../../../../../../../core/gemxql/types/order-by.js';
 import '../../../../../../../core/gemxql/types/page-fields.js';
 import '../../../../../../../core/gemxql/types/row-reader-mode.js';
 import '../../../../../../../core/gemxql/types/time-dimension.js';
-import '../../../../../../../providers/ConvertMoneyProvider.js';
 import '../../../context/ReportTableActionsContext.js';
 import { OrderCellContainer } from './OrderCell/OrderCellContainer.js';
-import { CampaignsCell } from './CampaignsCell/CampaignsCell.js';
-import { VersionCell } from './VersionCell.js';
 import { OrderIdCell } from './OrderIdCell.js';
-import { ItemsCell } from './ItemsCell/ItemsCell.js';
-import { DateCell } from './DateCell.js';
+import { VersionCell } from './VersionCell.js';
 
 const isString = (value) => typeof value === 'string';
 const isNonEmptyArray = (value) => Array.isArray(value) && value.length > 0;
@@ -53,7 +54,7 @@ const cellMap = {
             return null;
         return jsx(VersionCell, { value: value, isMergedWithPrev: isMergedWithPrev });
     },
-    [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData, }) => {
+    [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData }) => {
         if (!isString(value))
             return null;
         return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow, isMockData: isMockData }));
@@ -73,10 +74,15 @@ 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, gxId: gxId });
+    },
+    [EReportColumnKey.GEMX_ID]: ({ value, isMergedWithPrev, previousValue, columnLayout }) => {
         if (!isString(value))
             return null;
-        return jsx(OrderIdCell, { value: value, isMockData: isMockData });
+        return (jsx(GemxIdCell, { value: value, isMergedWithPrev: isMergedWithPrev, previousValue: previousValue, columnLayout: columnLayout }));
     },
 };