@levi-gemcommerce/analytics 1.0.0-dev.46 → 2.0.1-dev.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/GSelectableMetricChartCard/GSelectableMetricChartCard.d.ts +2 -1
- package/dist/esm/components/GSelectableMetricChartCard/MetricChartTab.d.ts +2 -1
- package/dist/esm/components/MetricDonutChartCard/MetricDonutChartCard.d.ts +2 -1
- package/dist/esm/components/OrderAnalytic/OrderListingLatestTable.d.ts +2 -1
- package/dist/esm/components/OrderAnalytic/components/OrderListing/OrderListingTable.d.ts +2 -1
- package/dist/esm/components/SingleMetricChartCard/SingleMetricChartCard.d.ts +2 -1
- package/dist/esm/components/common/chart/MetricInfoBlock.d.ts +2 -1
- package/dist/esm/index.js +152 -134
- package/dist/esm/index.mjs +152 -134
- package/dist/esm/shared/components/GMockDataTooltip/GMockDataTooltip.d.ts +12 -0
- package/dist/esm/shared/components/GMockDataTooltip/index.d.ts +1 -0
- package/dist/esm/shared/components/index.d.ts +1 -0
- package/dist/esm/shared/reports/ui/ReportTable/ReportTable.d.ts +2 -1
- package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/Cell.d.ts +2 -1
- package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/OrderCell/OrderCellContainer.d.ts +1 -1
- package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/OrderIdCell.d.ts +1 -1
- package/dist/esm/shared/reports/ui/ReportTable/components/Body/Cell/type.d.ts +1 -0
- package/dist/esm/shared/reports/ui/ReportTable/components/Body/Row.d.ts +2 -1
- package/dist/esm/shared/reports/ui/ReportTable/components/Footer/Pagination.d.ts +2 -1
- package/dist/esm/shared/reports/ui/ReportTable/components/Footer/WrapperFooter.d.ts +2 -1
- package/dist/umd/esm/components/GSelectableMetricChartCard/GSelectableMetricChartCard.d.ts +2 -1
- package/dist/umd/esm/components/GSelectableMetricChartCard/MetricChartTab.d.ts +2 -1
- package/dist/umd/esm/components/MetricDonutChartCard/MetricDonutChartCard.d.ts +2 -1
- package/dist/umd/esm/components/OrderAnalytic/OrderListingLatestTable.d.ts +2 -1
- package/dist/umd/esm/components/OrderAnalytic/components/OrderListing/OrderListingTable.d.ts +2 -1
- package/dist/umd/esm/components/SingleMetricChartCard/SingleMetricChartCard.d.ts +2 -1
- package/dist/umd/esm/components/common/chart/MetricInfoBlock.d.ts +2 -1
- package/dist/umd/esm/shared/components/GMockDataTooltip/GMockDataTooltip.d.ts +12 -0
- package/dist/umd/esm/shared/components/GMockDataTooltip/index.d.ts +1 -0
- package/dist/umd/esm/shared/components/index.d.ts +1 -0
- package/dist/umd/esm/shared/reports/ui/ReportTable/ReportTable.d.ts +2 -1
- package/dist/umd/esm/shared/reports/ui/ReportTable/components/Body/Cell/Cell.d.ts +2 -1
- package/dist/umd/esm/shared/reports/ui/ReportTable/components/Body/Cell/OrderCell/OrderCellContainer.d.ts +1 -1
- package/dist/umd/esm/shared/reports/ui/ReportTable/components/Body/Cell/OrderIdCell.d.ts +1 -1
- package/dist/umd/esm/shared/reports/ui/ReportTable/components/Body/Cell/type.d.ts +1 -0
- package/dist/umd/esm/shared/reports/ui/ReportTable/components/Body/Row.d.ts +2 -1
- package/dist/umd/esm/shared/reports/ui/ReportTable/components/Footer/Pagination.d.ts +2 -1
- package/dist/umd/esm/shared/reports/ui/ReportTable/components/Footer/WrapperFooter.d.ts +2 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
|
@@ -11,6 +11,7 @@ export interface IProps {
|
|
|
11
11
|
currentPeriodLabel?: string;
|
|
12
12
|
previousPeriodLabel?: string;
|
|
13
13
|
columnTypes?: ColumnTypesMap;
|
|
14
|
+
isMockData?: boolean;
|
|
14
15
|
onclickMetric?: (key: string) => void;
|
|
15
16
|
}
|
|
16
|
-
export declare const GSelectableMetricChartCard: ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel, previousPeriodLabel, columnTypes, }: IProps) => ReactElement;
|
|
17
|
+
export declare const GSelectableMetricChartCard: ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel, previousPeriodLabel, columnTypes, isMockData, onclickMetric, }: IProps) => ReactElement;
|
|
@@ -5,7 +5,8 @@ export interface IProps {
|
|
|
5
5
|
isActive: boolean;
|
|
6
6
|
isLoading?: boolean;
|
|
7
7
|
hideComparison?: boolean;
|
|
8
|
+
isMockData?: boolean;
|
|
8
9
|
onSelect: (key: EMetricKey) => void;
|
|
9
10
|
onClickTitle?: (key: string) => void;
|
|
10
11
|
}
|
|
11
|
-
export declare const MetricChartTab: ({ item, isActive, isLoading, hideComparison, onSelect, onClickTitle, }: IProps) => ReactElement;
|
|
12
|
+
export declare const MetricChartTab: ({ item, isActive, isLoading, hideComparison, isMockData, onSelect, onClickTitle, }: IProps) => ReactElement;
|
|
@@ -11,6 +11,7 @@ export interface IProps {
|
|
|
11
11
|
isLoading?: boolean;
|
|
12
12
|
isEmptyMetricData?: boolean;
|
|
13
13
|
minHeight?: number;
|
|
14
|
+
isMockData?: boolean;
|
|
14
15
|
onClick: () => void;
|
|
15
16
|
}
|
|
16
|
-
export declare const MetricDonutChartCard: ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight, onClick, }: IProps) => ReactElement;
|
|
17
|
+
export declare const MetricDonutChartCard: ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight, isMockData, onClick, }: IProps) => ReactElement;
|
|
@@ -16,6 +16,7 @@ interface OrderListingLatestTableProps {
|
|
|
16
16
|
source: EReportSource;
|
|
17
17
|
data: IOrderListingLatestData;
|
|
18
18
|
callbacks?: IOrderListingLatestCallbacks;
|
|
19
|
+
isMockData?: boolean;
|
|
19
20
|
}
|
|
20
|
-
export declare const OrderListingLatestTable: ({ source, data, callbacks }: OrderListingLatestTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const OrderListingLatestTable: ({ source, data, callbacks, isMockData }: OrderListingLatestTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
22
|
export {};
|
|
@@ -18,9 +18,10 @@ interface OrderListingTableProps {
|
|
|
18
18
|
queryValue?: string;
|
|
19
19
|
paginationProps?: GPaginationProps;
|
|
20
20
|
tableOptions?: OrderListingTableOptions;
|
|
21
|
+
isMockData?: boolean;
|
|
21
22
|
onViewAllStoreOrders?: () => void;
|
|
22
23
|
onViewOrderJourney?: (orderId: string) => void;
|
|
23
24
|
onViewOrderDetails?: (orderId: string) => void;
|
|
24
25
|
}
|
|
25
|
-
declare const _default: import("react").MemoExoticComponent<({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }: OrderListingTableProps) => import("react/jsx-runtime").JSX.Element>;
|
|
26
|
+
declare const _default: import("react").MemoExoticComponent<({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, isMockData, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }: OrderListingTableProps) => import("react/jsx-runtime").JSX.Element>;
|
|
26
27
|
export default _default;
|
|
@@ -9,6 +9,7 @@ export interface IProps {
|
|
|
9
9
|
isEmptyMetricData?: boolean;
|
|
10
10
|
lineChartData: DataSeries[];
|
|
11
11
|
columnTypes?: ColumnTypesMap;
|
|
12
|
+
isMockData?: boolean;
|
|
12
13
|
onClickTitle?: (key: string) => void;
|
|
13
14
|
}
|
|
14
|
-
export declare const SingleMetricChartCard: ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, onClickTitle, }: IProps) => ReactElement;
|
|
15
|
+
export declare const SingleMetricChartCard: ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, isMockData, onClickTitle, }: IProps) => ReactElement;
|
|
@@ -8,6 +8,7 @@ export interface IProps {
|
|
|
8
8
|
hideComparison?: boolean;
|
|
9
9
|
titleVariant?: TextProps['variant'];
|
|
10
10
|
titleFontWeight?: TextProps['fontWeight'];
|
|
11
|
+
isMockData?: boolean;
|
|
11
12
|
onClickTitle?: (key: string) => void;
|
|
12
13
|
}
|
|
13
|
-
export declare const MetricInfoBlock: ({ item, isHovered, isLoading, hideComparison, titleVariant, titleFontWeight, onClickTitle, }: IProps) => ReactElement;
|
|
14
|
+
export declare const MetricInfoBlock: ({ item, isHovered, isLoading, hideComparison, titleVariant, titleFontWeight, isMockData, onClickTitle, }: IProps) => ReactElement;
|
package/dist/esm/index.js
CHANGED
|
@@ -2439,6 +2439,17 @@ const GBoxCard = ({ children, ...props }) => {
|
|
|
2439
2439
|
return (jsx(Box, { ...G_BOX_CARD_DEFAULT_PROPS, ...props, children: children }));
|
|
2440
2440
|
};
|
|
2441
2441
|
|
|
2442
|
+
/**
|
|
2443
|
+
* Wraps its children with a demo-experiment tooltip when `isMockData` is true.
|
|
2444
|
+
* When `isMockData` is false it renders the children untouched.
|
|
2445
|
+
*
|
|
2446
|
+
* Keeps the demo copy in a single place so it only needs to be edited here.
|
|
2447
|
+
*/
|
|
2448
|
+
const GMockDataTooltip = ({ isMockData, content, children, ...props }) => {
|
|
2449
|
+
const { t } = useTranslation();
|
|
2450
|
+
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 }));
|
|
2451
|
+
};
|
|
2452
|
+
|
|
2442
2453
|
const GChartSkeleton = () => {
|
|
2443
2454
|
return jsx(GSkeletonDisplayText, { height: "188px" });
|
|
2444
2455
|
};
|
|
@@ -2546,24 +2557,26 @@ const MetricDonutChartSkeleton = () => {
|
|
|
2546
2557
|
|
|
2547
2558
|
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 })] }) }));
|
|
2548
2559
|
|
|
2549
|
-
const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, onClickTitle, }) => {
|
|
2560
|
+
const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, isMockData, onClickTitle, }) => {
|
|
2550
2561
|
const { key, title, totalValue } = item;
|
|
2551
2562
|
const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
|
|
2552
2563
|
if (isLoading)
|
|
2553
2564
|
return jsx(MetricInfoSkeleton, {});
|
|
2554
|
-
return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className:
|
|
2565
|
+
return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: (e) => {
|
|
2566
|
+
if (isMockData)
|
|
2567
|
+
return;
|
|
2555
2568
|
e?.stopPropagation();
|
|
2556
2569
|
onClickTitle?.(key);
|
|
2557
|
-
}, 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 })] }));
|
|
2570
|
+
}, 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 })] }));
|
|
2558
2571
|
};
|
|
2559
2572
|
|
|
2560
|
-
const MetricChartTab = ({ item, isActive, isLoading, hideComparison, onSelect, onClickTitle, }) => {
|
|
2573
|
+
const MetricChartTab = ({ item, isActive, isLoading, hideComparison, isMockData, onSelect, onClickTitle, }) => {
|
|
2561
2574
|
const [isHovered, setIsHovered] = useState(false);
|
|
2562
2575
|
const isHighlighted = isActive || isHovered;
|
|
2563
|
-
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 }) }) }));
|
|
2576
|
+
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 }) }) }));
|
|
2564
2577
|
};
|
|
2565
2578
|
|
|
2566
|
-
const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, }) => {
|
|
2579
|
+
const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, isMockData, onclickMetric, }) => {
|
|
2567
2580
|
const [activeTab, setActiveTab] = useState(defaultActiveTab);
|
|
2568
2581
|
const lineChartData = useMemo(() => {
|
|
2569
2582
|
const chartData = activeTab ? dataChart[activeTab] : undefined;
|
|
@@ -2579,7 +2592,7 @@ const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, i
|
|
|
2579
2592
|
gridTemplateColumns: `repeat(${metricInfo.length}, 1fr)`,
|
|
2580
2593
|
gap: '16px',
|
|
2581
2594
|
marginBottom: '16px',
|
|
2582
|
-
}, 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 })] }));
|
|
2595
|
+
}, 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 })] }));
|
|
2583
2596
|
};
|
|
2584
2597
|
|
|
2585
2598
|
EGroupOperator.OR;
|
|
@@ -2670,7 +2683,7 @@ const buildBreakdownDonutData = ({ targets, metricKey, totalsRow, comparisonTota
|
|
|
2670
2683
|
|
|
2671
2684
|
const DONUT_CHART_MIN_HEIGHT = 294;
|
|
2672
2685
|
const COMPACT_MAX_WIDTH = 1500;
|
|
2673
|
-
const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, onClick, }) => {
|
|
2686
|
+
const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, isMockData, onClick, }) => {
|
|
2674
2687
|
const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
|
|
2675
2688
|
const { windowWidth, windowSize } = useWindowSize();
|
|
2676
2689
|
const [isHovered, setIsHovered] = useState(false);
|
|
@@ -2682,20 +2695,22 @@ const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparison
|
|
|
2682
2695
|
return numberWithCommas(`${value}`);
|
|
2683
2696
|
};
|
|
2684
2697
|
const handleClickTitle = (event) => {
|
|
2698
|
+
if (isMockData)
|
|
2699
|
+
return;
|
|
2685
2700
|
event.stopPropagation();
|
|
2686
2701
|
onClick();
|
|
2687
2702
|
};
|
|
2688
2703
|
const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
|
|
2689
|
-
return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className:
|
|
2704
|
+
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', {
|
|
2690
2705
|
'max-h-[250px] overflow-hidden': isCompactView,
|
|
2691
2706
|
}), 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: {
|
|
2692
2707
|
valueFormatter: formatValue,
|
|
2693
2708
|
}, labelFormatter: formatValue }) })) })] }) }) }));
|
|
2694
2709
|
};
|
|
2695
2710
|
|
|
2696
|
-
const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, onClickTitle, }) => {
|
|
2711
|
+
const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, isMockData, onClickTitle, }) => {
|
|
2697
2712
|
const [isHovered, setIsHovered] = useState(false);
|
|
2698
|
-
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 })] }) }) }));
|
|
2713
|
+
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 })] }) }) }));
|
|
2699
2714
|
};
|
|
2700
2715
|
|
|
2701
2716
|
var IMAGE_FIRST_SESSION = "data:image/png;base64,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";
|
|
@@ -24334,11 +24349,17 @@ const CardJourneyAnalysis = ({ analyticMode, config, ...props }) => {
|
|
|
24334
24349
|
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') }) }) }) }) }));
|
|
24335
24350
|
};
|
|
24336
24351
|
|
|
24337
|
-
var
|
|
24338
|
-
(function (
|
|
24339
|
-
|
|
24340
|
-
|
|
24341
|
-
|
|
24352
|
+
var EReportColumnKey;
|
|
24353
|
+
(function (EReportColumnKey) {
|
|
24354
|
+
EReportColumnKey["ORDER_ID"] = "order_id";
|
|
24355
|
+
EReportColumnKey["ORDER_DATE"] = "order_date";
|
|
24356
|
+
EReportColumnKey["TOTAL"] = "total_price";
|
|
24357
|
+
EReportColumnKey["CAMPAIGNS"] = "experiments";
|
|
24358
|
+
EReportColumnKey["TRAFFIC_SOURCE"] = "traffic_source";
|
|
24359
|
+
EReportColumnKey["ITEMS"] = "items";
|
|
24360
|
+
EReportColumnKey["DEVICE"] = "device";
|
|
24361
|
+
EReportColumnKey["VISITOR"] = "visitor_type";
|
|
24362
|
+
})(EReportColumnKey || (EReportColumnKey = {}));
|
|
24342
24363
|
|
|
24343
24364
|
var EReportDataType;
|
|
24344
24365
|
(function (EReportDataType) {
|
|
@@ -24394,17 +24415,74 @@ var IRMetricKey;
|
|
|
24394
24415
|
IRMetricKey["VISITOR_BY_TYPE"] = "visitor_type";
|
|
24395
24416
|
})(IRMetricKey || (IRMetricKey = {}));
|
|
24396
24417
|
|
|
24397
|
-
|
|
24398
|
-
(
|
|
24399
|
-
|
|
24400
|
-
|
|
24401
|
-
|
|
24402
|
-
|
|
24403
|
-
|
|
24404
|
-
|
|
24405
|
-
|
|
24406
|
-
|
|
24407
|
-
|
|
24418
|
+
[IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
|
|
24419
|
+
({
|
|
24420
|
+
[IRVariantType.VARIANT_A]: 'Control',
|
|
24421
|
+
[IRVariantType.VARIANT_B]: 'Variant',
|
|
24422
|
+
});
|
|
24423
|
+
|
|
24424
|
+
const COLUMN_SEPARATOR = '___';
|
|
24425
|
+
const DIMENSION_SEPARATOR = '__';
|
|
24426
|
+
const COMPARISON_PREFIX = 'comparison';
|
|
24427
|
+
const PREVIOUS_PERIOD_KEY = 'previous_period';
|
|
24428
|
+
const TOTAL_SUFFIX = 'totals';
|
|
24429
|
+
|
|
24430
|
+
const joinColumnParts = (...parts) => parts.join(COLUMN_SEPARATOR);
|
|
24431
|
+
const getDimensionPathKey = (dimensions, dimensionIndex) => dimensions.slice(0, dimensionIndex + 1).join(DIMENSION_SEPARATOR);
|
|
24432
|
+
function getPreviousColumnName(key) {
|
|
24433
|
+
return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY);
|
|
24434
|
+
}
|
|
24435
|
+
function getPreviousTotalColumnName(key) {
|
|
24436
|
+
return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, TOTAL_SUFFIX);
|
|
24437
|
+
}
|
|
24438
|
+
function getTotalColumnName(key) {
|
|
24439
|
+
return joinColumnParts(key, TOTAL_SUFFIX);
|
|
24440
|
+
}
|
|
24441
|
+
function getTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
|
|
24442
|
+
return joinColumnParts(key, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
|
|
24443
|
+
}
|
|
24444
|
+
function getPreviousTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
|
|
24445
|
+
return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
|
|
24446
|
+
}
|
|
24447
|
+
function getMetricPreviousValue(row, key) {
|
|
24448
|
+
return row[getPreviousColumnName(key)];
|
|
24449
|
+
}
|
|
24450
|
+
|
|
24451
|
+
const convertOrderItemsToReportTableRows = (orderItems) => {
|
|
24452
|
+
return orderItems.map((orderItem) => {
|
|
24453
|
+
const { events: _events, ...restOrderItem } = orderItem;
|
|
24454
|
+
return {
|
|
24455
|
+
...restOrderItem,
|
|
24456
|
+
items: typeof orderItem.items === 'string' ? JSON.parse(orderItem.items) : (orderItem.items ?? []),
|
|
24457
|
+
experiments: typeof orderItem.experiments === 'string' ? JSON.parse(orderItem.experiments) : (orderItem.experiments ?? []),
|
|
24458
|
+
};
|
|
24459
|
+
});
|
|
24460
|
+
};
|
|
24461
|
+
const applyTotalToSummaryRow = (rows) => {
|
|
24462
|
+
let totalPrice = 0;
|
|
24463
|
+
let totalItems = 0;
|
|
24464
|
+
rows.forEach((row) => {
|
|
24465
|
+
const rowTotal = row[EReportColumnKey.TOTAL];
|
|
24466
|
+
const rowItems = row[EReportColumnKey.ITEMS];
|
|
24467
|
+
if (typeof rowTotal === 'number') {
|
|
24468
|
+
totalPrice += rowTotal;
|
|
24469
|
+
}
|
|
24470
|
+
if (Array.isArray(rowItems)) {
|
|
24471
|
+
totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
|
|
24472
|
+
}
|
|
24473
|
+
});
|
|
24474
|
+
return rows.map((row, index) => {
|
|
24475
|
+
const totalItemsLabel = totalItems > 1 ? `${totalItems} items` : `${totalItems} item`;
|
|
24476
|
+
return {
|
|
24477
|
+
// Only add totals to first row (used by SummaryRow)
|
|
24478
|
+
...(index === 0 && {
|
|
24479
|
+
[getTotalColumnName(EReportColumnKey.TOTAL)]: totalPrice,
|
|
24480
|
+
[getTotalColumnName(EReportColumnKey.ITEMS)]: totalItemsLabel,
|
|
24481
|
+
}),
|
|
24482
|
+
...row,
|
|
24483
|
+
};
|
|
24484
|
+
});
|
|
24485
|
+
};
|
|
24408
24486
|
|
|
24409
24487
|
const ORDER_LISTING_DIMENSION_LAYOUT = {
|
|
24410
24488
|
width: '158px',
|
|
@@ -24614,79 +24692,6 @@ const DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT = [
|
|
|
24614
24692
|
EReportColumnKey.VISITOR,
|
|
24615
24693
|
];
|
|
24616
24694
|
|
|
24617
|
-
const OrderListingTableEmpty = ({ title, description }) => {
|
|
24618
|
-
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 })] })] }) }));
|
|
24619
|
-
};
|
|
24620
|
-
|
|
24621
|
-
[IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
|
|
24622
|
-
({
|
|
24623
|
-
[IRVariantType.VARIANT_A]: 'Control',
|
|
24624
|
-
[IRVariantType.VARIANT_B]: 'Variant',
|
|
24625
|
-
});
|
|
24626
|
-
|
|
24627
|
-
const COLUMN_SEPARATOR = '___';
|
|
24628
|
-
const DIMENSION_SEPARATOR = '__';
|
|
24629
|
-
const COMPARISON_PREFIX = 'comparison';
|
|
24630
|
-
const PREVIOUS_PERIOD_KEY = 'previous_period';
|
|
24631
|
-
const TOTAL_SUFFIX = 'totals';
|
|
24632
|
-
|
|
24633
|
-
const joinColumnParts = (...parts) => parts.join(COLUMN_SEPARATOR);
|
|
24634
|
-
const getDimensionPathKey = (dimensions, dimensionIndex) => dimensions.slice(0, dimensionIndex + 1).join(DIMENSION_SEPARATOR);
|
|
24635
|
-
function getPreviousColumnName(key) {
|
|
24636
|
-
return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY);
|
|
24637
|
-
}
|
|
24638
|
-
function getPreviousTotalColumnName(key) {
|
|
24639
|
-
return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, TOTAL_SUFFIX);
|
|
24640
|
-
}
|
|
24641
|
-
function getTotalColumnName(key) {
|
|
24642
|
-
return joinColumnParts(key, TOTAL_SUFFIX);
|
|
24643
|
-
}
|
|
24644
|
-
function getTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
|
|
24645
|
-
return joinColumnParts(key, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
|
|
24646
|
-
}
|
|
24647
|
-
function getPreviousTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
|
|
24648
|
-
return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
|
|
24649
|
-
}
|
|
24650
|
-
function getMetricPreviousValue(row, key) {
|
|
24651
|
-
return row[getPreviousColumnName(key)];
|
|
24652
|
-
}
|
|
24653
|
-
|
|
24654
|
-
const convertOrderItemsToReportTableRows = (orderItems) => {
|
|
24655
|
-
return orderItems.map((orderItem) => {
|
|
24656
|
-
const { events: _events, ...restOrderItem } = orderItem;
|
|
24657
|
-
return {
|
|
24658
|
-
...restOrderItem,
|
|
24659
|
-
items: typeof orderItem.items === 'string' ? JSON.parse(orderItem.items) : (orderItem.items ?? []),
|
|
24660
|
-
experiments: typeof orderItem.experiments === 'string' ? JSON.parse(orderItem.experiments) : (orderItem.experiments ?? []),
|
|
24661
|
-
};
|
|
24662
|
-
});
|
|
24663
|
-
};
|
|
24664
|
-
const applyTotalToSummaryRow = (rows) => {
|
|
24665
|
-
let totalPrice = 0;
|
|
24666
|
-
let totalItems = 0;
|
|
24667
|
-
rows.forEach((row) => {
|
|
24668
|
-
const rowTotal = row[EReportColumnKey.TOTAL];
|
|
24669
|
-
const rowItems = row[EReportColumnKey.ITEMS];
|
|
24670
|
-
if (typeof rowTotal === 'number') {
|
|
24671
|
-
totalPrice += rowTotal;
|
|
24672
|
-
}
|
|
24673
|
-
if (Array.isArray(rowItems)) {
|
|
24674
|
-
totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
|
|
24675
|
-
}
|
|
24676
|
-
});
|
|
24677
|
-
return rows.map((row, index) => {
|
|
24678
|
-
const totalItemsLabel = totalItems > 1 ? `${totalItems} items` : `${totalItems} item`;
|
|
24679
|
-
return {
|
|
24680
|
-
// Only add totals to first row (used by SummaryRow)
|
|
24681
|
-
...(index === 0 && {
|
|
24682
|
-
[getTotalColumnName(EReportColumnKey.TOTAL)]: totalPrice,
|
|
24683
|
-
[getTotalColumnName(EReportColumnKey.ITEMS)]: totalItemsLabel,
|
|
24684
|
-
}),
|
|
24685
|
-
...row,
|
|
24686
|
-
};
|
|
24687
|
-
});
|
|
24688
|
-
};
|
|
24689
|
-
|
|
24690
24695
|
const SKELETON_METRICS = [
|
|
24691
24696
|
EReportColumnKey.ORDER_DATE,
|
|
24692
24697
|
EReportColumnKey.TOTAL,
|
|
@@ -24772,6 +24777,10 @@ const OrderListingTableSkeleton = ({ rowCount = 5 }) => {
|
|
|
24772
24777
|
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 }) }) }) })] }));
|
|
24773
24778
|
};
|
|
24774
24779
|
|
|
24780
|
+
const OrderListingTableEmpty = ({ title, description }) => {
|
|
24781
|
+
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 })] })] }) }));
|
|
24782
|
+
};
|
|
24783
|
+
|
|
24775
24784
|
var EOrderDirectionType;
|
|
24776
24785
|
(function (EOrderDirectionType) {
|
|
24777
24786
|
EOrderDirectionType["ASC"] = "ASC";
|
|
@@ -25182,7 +25191,7 @@ const useReportData = () => {
|
|
|
25182
25191
|
};
|
|
25183
25192
|
};
|
|
25184
25193
|
|
|
25185
|
-
const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, }) => {
|
|
25194
|
+
const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
|
|
25186
25195
|
const { t } = useTranslation();
|
|
25187
25196
|
const { onViewAllStoreOrders } = useReportTableActionsContext();
|
|
25188
25197
|
const isHasTotalRows = Boolean(totalRows && totalRows > 0);
|
|
@@ -25197,7 +25206,7 @@ const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', show
|
|
|
25197
25206
|
'justify-end': isShowViewAllStoreOrders,
|
|
25198
25207
|
'justify-center': isHasTotalRows,
|
|
25199
25208
|
'justify-between': (isHasTotalRows || paginationProps) && isShowViewAllStoreOrders,
|
|
25200
|
-
}), 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() }))] }));
|
|
25209
|
+
}), 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() }) }))] }));
|
|
25201
25210
|
function getViewAllStoreOrdersText() {
|
|
25202
25211
|
if (itemCount && itemCount > 1) {
|
|
25203
25212
|
return t('View all store {{metric}}s by date range ({{itemCount}})', {
|
|
@@ -25216,8 +25225,8 @@ const ScrollBar = forwardRef(({ isPaginationHidden }, ref) => {
|
|
|
25216
25225
|
});
|
|
25217
25226
|
ScrollBar.displayName = 'ScrollBar';
|
|
25218
25227
|
|
|
25219
|
-
const WrapperFooter = ({ scrollbarContainerRef, itemCount, totalPaginationRows, showViewAllButton, paginationProps, isPaginationHidden, }) => {
|
|
25220
|
-
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 })] }));
|
|
25228
|
+
const WrapperFooter = ({ scrollbarContainerRef, itemCount, totalPaginationRows, showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
|
|
25229
|
+
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 })] }));
|
|
25221
25230
|
};
|
|
25222
25231
|
|
|
25223
25232
|
const PreviousCell = ({ previousValue, isMergedWithPrev }) => {
|
|
@@ -25235,16 +25244,21 @@ const DefaultCell = ({ isMergedWithPrev, value, previousValue, columnLayout, isT
|
|
|
25235
25244
|
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) }) }) }));
|
|
25236
25245
|
};
|
|
25237
25246
|
|
|
25247
|
+
const LoadingData = () => {
|
|
25248
|
+
return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Spinner, { accessibilityLabel: "Fetching orders", size: "small" }) }));
|
|
25249
|
+
};
|
|
25250
|
+
|
|
25251
|
+
const NoData = () => {
|
|
25252
|
+
const { t } = useTranslation();
|
|
25253
|
+
return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Text, { as: "p", children: t('No orders found.') }) }));
|
|
25254
|
+
};
|
|
25255
|
+
|
|
25238
25256
|
const OrderCellBase = ({ value, justifyContent, isPrevious, isTotalRow, interactive, }) => {
|
|
25239
25257
|
const { onClick, hovering, onHoverChange } = interactive ?? {};
|
|
25240
25258
|
const ableInteractive = !!interactive;
|
|
25241
25259
|
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 }) })] }) }));
|
|
25242
25260
|
};
|
|
25243
25261
|
|
|
25244
|
-
const LoadingData = () => {
|
|
25245
|
-
return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Spinner, { accessibilityLabel: "Fetching orders", size: "small" }) }));
|
|
25246
|
-
};
|
|
25247
|
-
|
|
25248
25262
|
const OrderItem = ({ order }) => {
|
|
25249
25263
|
const { t } = useTranslation();
|
|
25250
25264
|
const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
|
|
@@ -25258,11 +25272,6 @@ const OrderItem = ({ order }) => {
|
|
|
25258
25272
|
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) }) })] })] }) }));
|
|
25259
25273
|
};
|
|
25260
25274
|
|
|
25261
|
-
const NoData = () => {
|
|
25262
|
-
const { t } = useTranslation();
|
|
25263
|
-
return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Text, { as: "p", children: t('No orders found.') }) }));
|
|
25264
|
-
};
|
|
25265
|
-
|
|
25266
25275
|
const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow, }) => {
|
|
25267
25276
|
const { value: itemHovering, setTrue, setFalse } = useToggle(false);
|
|
25268
25277
|
const { value: active, toggle: toggleActive } = useToggle(false);
|
|
@@ -25290,8 +25299,8 @@ const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow
|
|
|
25290
25299
|
}, isPrevious: isPrevious }), onClose: toggleActive, children: jsx(Box, { width: "291px", children: getContent() }) }));
|
|
25291
25300
|
};
|
|
25292
25301
|
|
|
25293
|
-
const OrderCellContainer = ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, }) => {
|
|
25294
|
-
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 }) }))] }));
|
|
25302
|
+
const OrderCellContainer = ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData, }) => {
|
|
25303
|
+
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 }) }))] }));
|
|
25295
25304
|
};
|
|
25296
25305
|
|
|
25297
25306
|
var GVariantBadgeType;
|
|
@@ -25407,11 +25416,14 @@ const VersionCell = ({ value, previousValue, isMergedWithPrev, columnLayout }) =
|
|
|
25407
25416
|
return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: variantValue && (jsx(GVariantBadge, { variant: variantValue.value, tone: variantValue.value === 'A' ? 'active' : 'inactive', size: "xs" })) }));
|
|
25408
25417
|
};
|
|
25409
25418
|
|
|
25410
|
-
const OrderIdCell = ({ value }) => {
|
|
25419
|
+
const OrderIdCell = ({ value, isMockData }) => {
|
|
25411
25420
|
const { t } = useTranslation();
|
|
25412
25421
|
const [active, setActive] = useState(false);
|
|
25413
25422
|
const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
|
|
25414
25423
|
const toggleActive = useCallback(() => setActive((active) => !active), []);
|
|
25424
|
+
if (isMockData) {
|
|
25425
|
+
return (jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: value }));
|
|
25426
|
+
}
|
|
25415
25427
|
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: [
|
|
25416
25428
|
{
|
|
25417
25429
|
id: 'view_order_journey',
|
|
@@ -25483,10 +25495,10 @@ const cellMap = {
|
|
|
25483
25495
|
return null;
|
|
25484
25496
|
return jsx(VersionCell, { value: value, isMergedWithPrev: isMergedWithPrev });
|
|
25485
25497
|
},
|
|
25486
|
-
[IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow }) => {
|
|
25498
|
+
[IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData }) => {
|
|
25487
25499
|
if (!isString(value))
|
|
25488
25500
|
return null;
|
|
25489
|
-
return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow }));
|
|
25501
|
+
return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow, isMockData: isMockData }));
|
|
25490
25502
|
},
|
|
25491
25503
|
[EReportColumnKey.ORDER_DATE]: ({ value, isMergedWithPrev }) => {
|
|
25492
25504
|
if (!isString(value))
|
|
@@ -25503,10 +25515,10 @@ const cellMap = {
|
|
|
25503
25515
|
return null;
|
|
25504
25516
|
return jsx(CampaignsCell, { value: value, campaignsCellProps: campaignsCellProps });
|
|
25505
25517
|
},
|
|
25506
|
-
[EReportColumnKey.ORDER_ID]: ({ value }) => {
|
|
25518
|
+
[EReportColumnKey.ORDER_ID]: ({ value, isMockData }) => {
|
|
25507
25519
|
if (!isString(value))
|
|
25508
25520
|
return null;
|
|
25509
|
-
return jsx(OrderIdCell, { value: value });
|
|
25521
|
+
return jsx(OrderIdCell, { value: value, isMockData: isMockData });
|
|
25510
25522
|
},
|
|
25511
25523
|
};
|
|
25512
25524
|
|
|
@@ -25516,7 +25528,7 @@ const NoneCell = ({ isMergedWithPrev, previousValue, columnLayout }) => {
|
|
|
25516
25528
|
return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-[11px] h-[2px] bg-[#8A8A8A]" }) }));
|
|
25517
25529
|
};
|
|
25518
25530
|
|
|
25519
|
-
const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, }) => {
|
|
25531
|
+
const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
|
|
25520
25532
|
const columnLayoutStyles = getColumnLayoutStyles(columnLayout, hasTooltipCard);
|
|
25521
25533
|
const { formatData } = useReportData();
|
|
25522
25534
|
const formattedValue = formatData({ value, formatter, name });
|
|
@@ -25533,12 +25545,12 @@ const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, for
|
|
|
25533
25545
|
if (formattedValue === NONE_VALUE) {
|
|
25534
25546
|
Renderer = NoneCell;
|
|
25535
25547
|
}
|
|
25536
|
-
return (jsx(Renderer, { value: formattedValue, name: name, isMergedWithPrev: isMergedWithPrev, previousValue: formattedPreviousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, campaignsCellProps: campaignsCellProps, isTotalRow: isTotalRow, isDimensionCol: isDimensionCol }));
|
|
25548
|
+
return (jsx(Renderer, { value: formattedValue, name: name, isMergedWithPrev: isMergedWithPrev, previousValue: formattedPreviousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, campaignsCellProps: campaignsCellProps, isTotalRow: isTotalRow, isDimensionCol: isDimensionCol, isMockData: isMockData }));
|
|
25537
25549
|
};
|
|
25538
25550
|
return (jsx("div", { className: cls('GReportTable__Cell', { 'GReportTable__Cell--dimension': isDimensionCol }), style: cellStyles, children: jsx("div", { className: "GReportTable__CellContent", style: columnLayoutStyles, children: renderContent() }) }));
|
|
25539
25551
|
};
|
|
25540
25552
|
|
|
25541
|
-
const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, }) => {
|
|
25553
|
+
const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, isMockData, }) => {
|
|
25542
25554
|
const checkMergedWithPrev = (col) => {
|
|
25543
25555
|
const isDimensionCol = dimensions.includes(col);
|
|
25544
25556
|
let isMergedWithPrev = false;
|
|
@@ -25558,7 +25570,7 @@ const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, ord
|
|
|
25558
25570
|
return (jsx("div", { className: "GReportTable__Row group/GReportTable__Row", style: { minWidth }, children: columns.map((col) => {
|
|
25559
25571
|
const hasTooltipCard = !!col.tooltipCardProps;
|
|
25560
25572
|
const orderId = row[EReportColumnKey.ORDER_ID]?.toString() ?? '';
|
|
25561
|
-
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));
|
|
25573
|
+
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));
|
|
25562
25574
|
}) }));
|
|
25563
25575
|
};
|
|
25564
25576
|
|
|
@@ -25657,7 +25669,7 @@ WrapperHeader.displayName = 'WrapperHeader';
|
|
|
25657
25669
|
|
|
25658
25670
|
const mockDimensions = ['session_device_type', 'month', 'session_country', 'session_device_os'];
|
|
25659
25671
|
const mockMetrics = ['online_store_visitors', 'sessions', 'bounces'];
|
|
25660
|
-
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, }) => {
|
|
25672
|
+
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, }) => {
|
|
25661
25673
|
const { summary = {}, hideBorderTop, hidePaginationRow } = options ?? {};
|
|
25662
25674
|
const { columns, rows } = useReportTable({ dimensions, metrics, tableData: data ?? { columns: [], rows: [] } });
|
|
25663
25675
|
const { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef } = useSyncedScroll({ columns });
|
|
@@ -25688,15 +25700,15 @@ const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data,
|
|
|
25688
25700
|
return (jsx(ReportTableActionsProvider, { onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, onViewAllStoreOrders: onViewAllStoreOrders, children: jsxs("div", { className: cls('GReportTable__Container', {
|
|
25689
25701
|
'GReportTable__Container--border-top': !hideBorderTop,
|
|
25690
25702
|
'GReportTable__Container--pagination-hidden': isPaginationHidden,
|
|
25691
|
-
}), 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 })] }) }));
|
|
25703
|
+
}), 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 })] }) }));
|
|
25692
25704
|
function renderEmptyState() {
|
|
25693
25705
|
return (jsxs("div", { className: cls('GReportTable__Container', {
|
|
25694
25706
|
'GReportTable__Container--border-top': !hideBorderTop,
|
|
25695
|
-
}), children: [emptyStateComponent, jsx(WrapperFooter, { totalPaginationRows: 0, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: true })] }));
|
|
25707
|
+
}), children: [emptyStateComponent, jsx(WrapperFooter, { totalPaginationRows: 0, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: true, isMockData: isMockData })] }));
|
|
25696
25708
|
}
|
|
25697
25709
|
};
|
|
25698
25710
|
|
|
25699
|
-
const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
|
|
25711
|
+
const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, isMockData, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
|
|
25700
25712
|
const { hideSummary, limitRowAmount, hidePaginationRow, hideBorderTop, fixedColumns, isLatestTable } = tableOptions ?? {};
|
|
25701
25713
|
const { t } = useTranslation();
|
|
25702
25714
|
const orderBy = useOrderControlStore((state) => state.orderBy);
|
|
@@ -25722,7 +25734,7 @@ const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, pa
|
|
|
25722
25734
|
};
|
|
25723
25735
|
if (isLatestTable && isLoading)
|
|
25724
25736
|
return jsx(OrderListingTableSkeleton, {});
|
|
25725
|
-
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 }) }));
|
|
25737
|
+
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 }) }));
|
|
25726
25738
|
function renderEmptyState() {
|
|
25727
25739
|
const isNoOrderWithCurrentFilters = orders.length === 0;
|
|
25728
25740
|
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,7 +25752,13 @@ const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, pa
|
|
|
25740
25752
|
};
|
|
25741
25753
|
var OrderListingTable$1 = memo(OrderListingTable);
|
|
25742
25754
|
|
|
25743
|
-
|
|
25755
|
+
var EReportSource;
|
|
25756
|
+
(function (EReportSource) {
|
|
25757
|
+
EReportSource["CAMPAIGN"] = "campaign";
|
|
25758
|
+
EReportSource["PAGE"] = "page";
|
|
25759
|
+
})(EReportSource || (EReportSource = {}));
|
|
25760
|
+
|
|
25761
|
+
const OrderListingLatestTable = ({ source, data, callbacks, isMockData }) => {
|
|
25744
25762
|
const { orders, isLoading, totalFilteredOrders, totalStoreOrders } = data;
|
|
25745
25763
|
const { onViewAllOrders, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails } = callbacks ?? {};
|
|
25746
25764
|
const { t } = useTranslation();
|
|
@@ -25752,10 +25770,10 @@ const OrderListingLatestTable = ({ source, data, callbacks }) => {
|
|
|
25752
25770
|
return ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE;
|
|
25753
25771
|
return ORDER_LISTING_COLUMNS;
|
|
25754
25772
|
}, [source]);
|
|
25755
|
-
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}})', {
|
|
25756
|
-
|
|
25757
|
-
|
|
25758
|
-
|
|
25773
|
+
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}})', {
|
|
25774
|
+
source: sourceText,
|
|
25775
|
+
totalOrders: totalFilteredOrders,
|
|
25776
|
+
}) }) }))] }) }), 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: {
|
|
25759
25777
|
hideSummary: true,
|
|
25760
25778
|
hidePaginationRow: true,
|
|
25761
25779
|
limitRowAmount: ORDER_LISTING_CONFIG.SHOW_LATEST_ORDER_LISTING_AMOUNT,
|