@gem-sdk/analytics 0.1.0-staging.2 → 0.1.0-staging.4

package/dist/esm/index.mjs

@@ -1,6 +1,6 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip as Tooltip$1, Popover, BlockStack, List, Button, Checkbox, RadioButton, ActionList, Link, SkeletonDisplayText, Pagination as Pagination$1, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup, Divider, Spinner, Badge } from '@shopify/polaris';
+import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip as Tooltip$1, Popover, BlockStack, List, Button, Checkbox, RadioButton, ActionList, Link, SkeletonDisplayText, Pagination as Pagination$1, Spinner, Modal, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup, Divider, Badge } from '@shopify/polaris';
 import * as React from 'react';
 import React__default, { useMemo, useCallback, forwardRef, useState, useRef, useImperativeHandle, useEffect, Fragment as Fragment$1, createContext, useContext, createElement, useLayoutEffect, memo, Component } from 'react';
 import dayjs from 'dayjs';
@@ -213,6 +213,11 @@ var ICampaignType;
     ICampaignType["TEMPLATE_BUNDLE"] = "TEMPLATE_BUNDLE";
     // THEME = 'THEME',
 })(ICampaignType || (ICampaignType = {}));
+var IVariantType$1;
+(function (IVariantType) {
+    IVariantType["VARIANT_A"] = "A";
+    IVariantType["VARIANT_B"] = "B";
+})(IVariantType$1 || (IVariantType$1 = {}));
 
 const TARGET_VISITOR = [
     { value: EVisitorType.NEW, label: 'New' },
@@ -307,6 +312,20 @@ var SvgCaretDownIcon = function SvgCaretDownIcon(props) {
 };
 SvgCaretDownIcon.displayName = "CaretDownIcon";
 
+var SvgCartIcon = function SvgCartIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M2.5 3.75a.75.75 0 0 1 .75-.75h1.612a1.75 1.75 0 0 1 1.732 1.5h9.656a.75.75 0 0 1 .748.808l-.358 4.653a2.75 2.75 0 0 1-2.742 2.539h-6.351l.093.78a.25.25 0 0 0 .248.22h6.362a.75.75 0 0 1 0 1.5h-6.362a1.75 1.75 0 0 1-1.738-1.543l-1.04-8.737a.25.25 0 0 0-.248-.22h-1.612a.75.75 0 0 1-.75-.75Zm4.868 7.25h6.53a1.25 1.25 0 0 0 1.246-1.154l.296-3.846h-8.667l.595 5Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M10 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M15 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  }));
+};
+SvgCartIcon.displayName = "CartIcon";
+
 var SvgChartLineIcon = function SvgChartLineIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -357,6 +376,39 @@ var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
 };
 SvgChevronUpIcon.displayName = "ChevronUpIcon";
 
+var SvgCursorIcon = function SvgCursorIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M10.5 3.75a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0v-2.5Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14.28 6.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 0 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.28 13.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 1 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7 9.75a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h2.5a.75.75 0 0 1 .75.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M5.97 7.03a.75.75 0 0 0 1.06-1.06l-1.75-1.75a.75.75 0 0 0-1.06 1.06l1.75 1.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.22 8.22a.75.75 0 0 1 .767-.181l7.5 2.5a.75.75 0 0 1 .293 1.241l-1.97 1.97 1.97 1.97a.75.75 0 1 1-1.06 1.06l-1.97-1.97-1.97 1.97a.75.75 0 0 1-1.241-.293l-2.5-7.5a.75.75 0 0 1 .18-.767Zm4.998 5.001.002-.001.001-.002 1.64-1.64-4.925-1.642 1.642 4.926 1.64-1.64Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M10.5 3.75a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0v-2.5Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14.28 6.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 0 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.28 13.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 1 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7 9.75a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h2.5a.75.75 0 0 1 .75.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M5.97 7.03a.75.75 0 0 0 1.06-1.06l-1.75-1.75a.75.75 0 0 0-1.06 1.06l1.75 1.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.22 8.22a.75.75 0 0 1 .767-.181l7.5 2.5a.75.75 0 0 1 .293 1.241l-1.97 1.97 1.97 1.97a.75.75 0 1 1-1.06 1.06l-1.97-1.97-1.97 1.97a.75.75 0 0 1-1.241-.293l-2.5-7.5a.75.75 0 0 1 .18-.767Zm4.998 5.001.002-.001.001-.002 1.64-1.64-4.925-1.642 1.642 4.926 1.64-1.64Z"
+  }));
+};
+SvgCursorIcon.displayName = "CursorIcon";
+
 var SvgDeleteIcon = function SvgDeleteIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -371,6 +423,17 @@ var SvgDeleteIcon = function SvgDeleteIcon(props) {
 };
 SvgDeleteIcon.displayName = "DeleteIcon";
 
+var SvgExternalSmallIcon = function SvgExternalSmallIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.75 4.5a.75.75 0 0 0 0 1.5h1.19l-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72v1.19a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-.75-.75h-3Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M15 11.25a.75.75 0 0 0-1.5 0v1c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5c0-.69.56-1.25 1.25-1.25h1a.75.75 0 0 0 0-1.5h-1a2.75 2.75 0 0 0-2.75 2.75v4.5a2.75 2.75 0 0 0 2.75 2.75h4.5a2.75 2.75 0 0 0 2.75-2.75v-1Z"
+  }));
+};
+SvgExternalSmallIcon.displayName = "ExternalSmallIcon";
+
 var SvgInfoIcon = function SvgInfoIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -407,6 +470,16 @@ var SvgOrderIcon = function SvgOrderIcon(props) {
 };
 SvgOrderIcon.displayName = "OrderIcon";
 
+var SvgPaymentIcon = function SvgPaymentIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M9.621 4h5.258c.395 0 .736 0 1.017.023.297.024.592.078.875.222.424.216.768.56.984.984.144.283.198.578.222.875.023.28.023.622.023 1.017v2.258c0 .395 0 .736-.023 1.017a2.29 2.29 0 0 1-.222.875 2.25 2.25 0 0 1-.983.984c-.284.144-.58.198-.876.222-.28.023-.622.023-1.017.023h-2.58c-.08.083-.169.16-.265.23l-2.73 1.965c-.565.407-.93.67-1.335.859-.358.167-.736.29-1.125.363-.44.083-.889.083-1.586.083h-1.508a.75.75 0 0 1 0-1.5h1.436c.794 0 1.095-.003 1.379-.057.266-.05.524-.134.77-.248.261-.122.508-.296 1.152-.76l2.67-1.923a.423.423 0 0 0-.35-.753l-4.875 1.219a.75.75 0 0 1-.364-1.456l.932-.233v-2.289c-.59.002-.821.011-1.033.062a2.25 2.25 0 0 0-.65.27c-.21.128-.398.31-.943.854l-.594.594a.75.75 0 0 1-1.06-1.06l.654-.655c.46-.46.78-.78 1.16-1.012a3.75 3.75 0 0 1 1.083-.45c.397-.095.813-.103 1.387-.103a6.79 6.79 0 0 1 .019-.396 2.29 2.29 0 0 1 .222-.875 2.25 2.25 0 0 1 .984-.984 2.29 2.29 0 0 1 .875-.222c.28-.023.622-.023 1.017-.023Zm5.229 7h-2.024a1.925 1.925 0 0 0-2.382-1.697l-2.444.611v-1.414h8.5v.85c0 .432 0 .712-.018.924-.017.204-.045.28-.064.317a.75.75 0 0 1-.328.327c-.037.02-.112.047-.316.064-.212.017-.492.018-.924.018Zm1.645-4.5h-8.49c.002-.104.006-.194.013-.274.017-.204.045-.28.064-.316a.75.75 0 0 1 .328-.328c.037-.02.112-.047.316-.064.212-.017.492-.018.924-.018h5.2c.432 0 .712 0 .924.018.204.017.28.045.316.064a.75.75 0 0 1 .328.328c.02.037.047.112.064.316.007.08.01.17.013.274Z"
+  }));
+};
+SvgPaymentIcon.displayName = "PaymentIcon";
+
 var SvgPlusIcon = function SvgPlusIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -416,6 +489,19 @@ var SvgPlusIcon = function SvgPlusIcon(props) {
 };
 SvgPlusIcon.displayName = "PlusIcon";
 
+var SvgProductRemoveIcon = function SvgProductRemoveIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M8.575 4.649a3.75 3.75 0 0 1 2.7-1.149h1.975a3.25 3.25 0 0 1 3.25 3.25v2.371c0 .766-.311 1.498-.863 2.029a.75.75 0 1 1-1.04-1.08c.258-.249.403-.591.403-.949v-2.371a1.75 1.75 0 0 0-1.75-1.75h-1.974a2.25 2.25 0 0 0-1.62.69l-4.254 4.417a1.25 1.25 0 0 0 .016 1.75l2.898 2.898a1 1 0 0 0 1.4.014l.451-.434a.75.75 0 1 1 1.04 1.08l-.45.434a2.5 2.5 0 0 1-3.502-.033l-2.898-2.898a2.75 2.75 0 0 1-.036-3.852l4.254-4.417Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12.25 12.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5h-4Z"
+  }));
+};
+SvgProductRemoveIcon.displayName = "ProductRemoveIcon";
+
 var SvgSearchIcon = function SvgSearchIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -596,21 +682,26 @@ function sortByArrayOrder(array, order, sortOrder = 'asc') {
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(quarterOfYear);
-let tz = 'UTC';
+// Stored on `globalThis` (not a module-local `let`): each entry-point bundle gets its
+// own copy of this module, so a local var would let `setTz` and the query builder read
+// different copies. A shared global slot keeps every bundle in sync.
+const TZ_GLOBAL_KEY = '__GEM_SDK_ANALYTICS_TZ__';
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 function getInitialTimezone() {
-    return tz;
+    return globalThis[TZ_GLOBAL_KEY] ?? 'UTC';
 }
 function setTz(value) {
-    tz = value;
+    globalThis[TZ_GLOBAL_KEY] = value;
     dayjs.tz.setDefault(value);
 }
 const dayjsTz = (date) => {
+    const tz = getInitialTimezone();
     if (!date)
         return dayjs().tz(tz);
     return dayjs(date).tz(tz);
 };
 const convertDateToTz = (date) => {
+    const tz = getInitialTimezone();
     if (!date)
         return dayjs.tz(dayjs().format(DEFAULT_DATE_FORMAT), tz);
     return dayjs.tz(dayjs(date).format(DEFAULT_DATE_FORMAT), tz);
@@ -752,6 +843,25 @@ const toCapitalize = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
+function findLastIndex(array, predicate, thisArg) {
+    for (let i = array.length - 1; i >= 0; i--) {
+        if (predicate.call(thisArg, array[i], i, array)) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+const isBrowser$1 = () => {
+    return typeof window !== 'undefined';
+};
+
+const formatDateBy = (format, date) => {
+    if (!date)
+        date = new Date();
+    return dayjsTz(date).format(format) ?? '-';
+};
+
 const GClickable = ({ children, fullWidth = false, cursor = 'pointer', onClick, onMouseEnter, onMouseLeave, }) => {
     return (jsx("div", { role: "button", tabIndex: 0, className: cls({
             'w-full': fullWidth,
@@ -1826,15 +1936,25 @@ const getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options
     // Support legacy 3rd arg as locale string
     const opts = typeof options === 'string' ? { locale: options } : options;
     const locale = opts?.locale ?? 'en-US';
-    // Let Intl pick fraction digits per currency (e.g. JPY/KRW have 0) instead of hardcoding.
-    const formatCurrency = (value) => new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);
+    // Currency's natural minimum (USD → 2, JPY/KRW/VND → 0); used as the floor for scaled tiers.
+    const currencyMinDigits = new Intl.NumberFormat(locale, { style: 'currency', currency }).resolvedOptions().minimumFractionDigits ?? 0;
+    // For scaled tiers, allow extra precision but never force decimals on zero-decimal currencies.
+    const formatCurrency = (value, maxDigits) => new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        ...(maxDigits != null && {
+            minimumFractionDigits: Math.min(currencyMinDigits, maxDigits),
+            maximumFractionDigits: maxDigits,
+        }),
+    }).format(value);
     const magnitude = Math.abs(price);
     if (magnitude >= 1_000_000_000)
-        return `${formatCurrency(price / 1_000_000_000)}B`;
+        return `${formatCurrency(price / 1_000_000_000, 2)}B`;
     if (magnitude >= 1_000_000)
-        return `${formatCurrency(price / 1_000_000)}M`;
+        return `${formatCurrency(price / 1_000_000, 2)}M`;
     if (opts?.compact && magnitude >= 1_000)
-        return `${formatCurrency(price / 1_000)}K`;
+        return `${formatCurrency(price / 1_000, 1)}K`;
+    // Let Intl pick fraction digits per currency (e.g. JPY/KRW have 0) instead of hardcoding.
     return formatCurrency(price);
 };
 
@@ -2249,6 +2369,18 @@ const useWindowSize = () => {
     return { windowSize, windowWidth, isMobileTabletView, isMobileView };
 };
 
+const usePreventBodyScroll = ({ enable }) => {
+    useEffect(() => {
+        if (!enable || !isBrowser$1())
+            return;
+        // Prevent layout shift from scrollbar removal
+        document.body.style.overflowY = 'hidden';
+        return () => {
+            document.body.style.overflowY = 'unset';
+        };
+    }, [enable]);
+};
+
 // This default value is used in our tests so that consumers of Polaris Viz don't need to mock or fire a ResizeObserver event
 const defaultEntry = process.env.NODE_ENV === 'test' ? { contentRect: { width: 500, height: 500 } } : null;
 function resizeObserver(callback) {
@@ -2457,6 +2589,32 @@ const GMockDataTooltip = ({ isMockData, content, children, ...props }) => {
     return (jsx(GTooltip, { isEnabled: isMockData, content: content ?? t('This is just a demo experiment. Create a real one to view order listing.'), dismissOnMouseOut: true, ...props, children: children }));
 };
 
+const GDotInline = ({ tone }) => {
+    const textColor = getTextColorByTone();
+    return jsx("span", { className: textColor, children: "\u2022" });
+    function getTextColorByTone() {
+        switch (tone) {
+            case 'inherit':
+                return 'text-inherit';
+            case 'disabled':
+                return 'text-[#B5B5B5]';
+            default:
+                return 'text-inherit';
+        }
+    }
+};
+
+const GSpinner = (props) => {
+    return (jsx("div", { className: cls('Polaris-GSpinner', props.tone ? `Polaris-GSpinner--${props.tone}` : undefined), children: jsx(Spinner, { ...props }) }));
+};
+
+const GModal = ({ children, primaryAction, secondaryActions, ...props }) => {
+    const { isMobileView } = useWindowSize();
+    const resolvedSecondaryActions = secondaryActions ?? [];
+    const showMobileFooter = isMobileView && (primaryAction || resolvedSecondaryActions.length > 0);
+    return (jsxs(Modal, { ...props, size: isMobileView ? 'small' : props.size, primaryAction: showMobileFooter ? undefined : primaryAction, secondaryActions: showMobileFooter ? undefined : secondaryActions, children: [children, showMobileFooter && (jsx(Box, { padding: "400", borderBlockStartWidth: "025", borderColor: "border-secondary", children: jsxs(BlockStack, { gap: "200", children: [jsx(Button, { ...primaryAction, onClick: primaryAction?.onAction, variant: "primary", fullWidth: true, children: primaryAction?.content ?? 'Save' }), resolvedSecondaryActions.map((action, index) => (createElement(Button, { ...action, key: index, fullWidth: true, onClick: action.onAction }, action.content)))] }) }))] }));
+};
+
 const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
@@ -2578,7 +2736,7 @@ const MetricDonutChartSkeleton = () => {
     return (jsx(Card, { children: jsxs(BlockStack, { gap: "400", children: [jsx(MetricInfoSkeleton, { isShowOneLine: true }), jsx(GChartSkeleton, {})] }) }));
 };
 
-const MetricValueSummary = ({ totalValue, hideComparison }) => (jsx(BlockStack, { gap: "200", children: jsxs(InlineStack, { blockAlign: "center", gap: "200", wrap: false, children: [jsx(InlineStack, { blockAlign: "center", gap: "200", children: jsx(Text, { as: "span", variant: "headingSm", children: totalValue.value }) }), !hideComparison && jsx(MetricPercentage, { change: totalValue.change })] }) }));
+const MetricValueSummary = ({ totalValue, hideComparison }) => (jsx(BlockStack, { gap: "200", children: jsxs(InlineStack, { blockAlign: "center", gap: "200", children: [jsx(InlineStack, { blockAlign: "center", gap: "200", children: jsx(Text, { as: "span", variant: "headingSm", children: totalValue.value }) }), !hideComparison && jsx(MetricPercentage, { change: totalValue.change })] }) }));
 
 const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, isMockData, onClickTitle, }) => {
     const { key, title, totalValue } = item;
@@ -3988,7 +4146,6 @@ const getNewReturningCustomerMetric = ({ metric }) => detectDataV2By({
     formatter: IMetricFormatter.NORMAL,
 });
 
-const PA_METRIC_TOOLTIP = {};
 const METRICS_COLUMNS = {
     [IPAMetricKey.PAGE_SESSIONS]: { label: 'Sessions' },
     [IPAMetricKey.PAGE_BR]: { label: 'Bounce rate' },
@@ -22630,17 +22787,17 @@ const usePathAnalysisChart = () => {
             {
                 value: Number(totalAddedToCart ?? 0),
                 key: METRICS_COLUMNS[IPAMetricKey.PAGE_ADDED_TO_CART]?.label ?? t('Added to cart'),
-                labelTooltip: PA_METRIC_TOOLTIP[IPAMetricKey.PAGE_CART_ADDITION],
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.CART_ADDITION],
             },
             {
                 value: Number(totalReachedCheckout ?? 0),
                 key: t('Reached checkout'),
-                labelTooltip: PA_METRIC_TOOLTIP[IPAMetricKey.PAGE_REACHED_CHECKOUT],
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.REACHED_CHECKOUT],
             },
             {
                 value: Number(totalCompletedCheckout ?? 0),
                 key: t('Completed checkout'),
-                labelTooltip: PA_METRIC_TOOLTIP[IPAMetricKey.PAGE_COMPLETE_CHECKOUT],
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.COMPLETE_CHECKOUT],
             },
         ];
     }, [t]);
@@ -23974,7 +24131,7 @@ const OrderIdCell = ({ value, isMockData }) => {
 
 const DateCell = ({ value, isMergedWithPrev }) => (jsx(Text, { as: "span", variant: "bodySm", children: isMergedWithPrev ? '' : value }));
 
-const CheckoutStartedDetail = ({ lineItems = [], activatorWrapperProps }) => {
+const CheckoutStartedDetail$1 = ({ lineItems = [], activatorWrapperProps }) => {
     const { t } = useTranslation();
     const [active, setActive] = useState(false);
     const toggleActive = useCallback(() => setActive((active) => !active), []);
@@ -24007,7 +24164,7 @@ const ItemsCell = ({ value }) => {
             return t('{{itemQuantity}} item', { itemQuantity });
         return t('{{itemQuantity}} items', { itemQuantity });
     };
-    return (jsx("div", { onMouseEnter: setTrue, onMouseLeave: setFalse, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: getItemText() }), jsx(CheckoutStartedDetail, { lineItems: lineItems, activatorWrapperProps: {
+    return (jsx("div", { onMouseEnter: setTrue, onMouseLeave: setFalse, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: getItemText() }), jsx(CheckoutStartedDetail$1, { lineItems: lineItems, activatorWrapperProps: {
                         paddingBlockStart: '100',
                         opacity: itemHovering ? '1' : '0',
                     } })] }) }));
@@ -24340,6 +24497,439 @@ var EJourneyEvent;
     EJourneyEvent["SEARCH_SUBMITTED"] = "SEARCH_SUBMITTED";
 })(EJourneyEvent || (EJourneyEvent = {}));
 
+const useGModalOrderJourney = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [initialValues, setInitialValues] = useState(null);
+    const handleOpenModalOrderJourney = useCallback((data) => {
+        setInitialValues(data);
+        setIsOpen(true);
+    }, []);
+    const handleCloseModalOrderJourney = useCallback(() => {
+        setIsOpen(false);
+        setInitialValues(null);
+    }, []);
+    return {
+        isOpen,
+        initialValues,
+        handleOpenModalOrderJourney,
+        handleCloseModalOrderJourney,
+    };
+};
+
+const OrderJourneyContext = createContext(undefined);
+const OrderJourneyProvider = OrderJourneyContext.Provider;
+const useOrderJourneyContext = () => {
+    const context = useContext(OrderJourneyContext);
+    if (!context)
+        throw new Error('useOrderJourneyContext must be used within OrderJourneyProvider');
+    return context;
+};
+
+const EventMarkerIcon = ({ icon, tone = 'base', hasPadding = true }) => {
+    const wrapperBackground = getWrapperBackground();
+    const iconSource = isIconSource(icon) ? jsx(Icon, { source: icon, tone: tone }) : icon;
+    return (jsx(Box, { padding: hasPadding ? '100' : '0', background: wrapperBackground, borderRadius: "full", children: iconSource }));
+    function getWrapperBackground() {
+        switch (tone) {
+            case 'success':
+                return 'bg-surface-success';
+            default:
+                return 'bg-surface-secondary';
+        }
+    }
+    function isIconSource(x) {
+        return typeof x === 'string' || (typeof x === 'object' && x.body) || typeof x === 'function';
+    }
+};
+
+const JourneyDetail = ({ title, children }) => {
+    return (jsx(Box, { padding: "300", overflowX: "hidden", children: jsxs(BlockStack, { gap: "050", children: [typeof title === 'string' ? (jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: title })) : (title), children] }) }));
+};
+
+var JourneyTimeFormat;
+(function (JourneyTimeFormat) {
+    JourneyTimeFormat["HH_MM_SS"] = "HH:mm:ss";
+})(JourneyTimeFormat || (JourneyTimeFormat = {}));
+const JourneyTime = ({ time, format = JourneyTimeFormat.HH_MM_SS }) => {
+    const formattedTime = formatDateBy(format, time);
+    const width = getWidthByFormat();
+    return (jsx("div", { style: { minWidth: width, maxWidth: width }, children: jsx(Text, { as: "span", variant: "bodyXs", children: formattedTime }) }));
+    function getWidthByFormat() {
+        switch (format) {
+            case JourneyTimeFormat.HH_MM_SS:
+                return '48px';
+            default:
+                return '48px';
+        }
+    }
+};
+
+const JourneyItem = ({ time, title, eventMarker, children }) => {
+    return (jsx(Box, { paddingInlineStart: "600", children: jsxs(InlineStack, { blockAlign: "center", gap: "400", wrap: false, children: [jsx(JourneyTime, { time: time }), jsx(EventMarkerIcon, { ...eventMarker }), jsx(JourneyDetail, { title: title, children: children })] }) }));
+};
+
+const QuantityWrapper = ({ quantity }) => {
+    if (!quantity)
+        return null;
+    return (jsx(Box, { paddingBlock: "050", paddingInline: "200", borderRadius: "200", background: "bg-fill-secondary", minWidth: "24px", children: jsx(Text, { as: "span", variant: "bodySm", fontWeight: "medium", tone: "subdued", alignment: "center", children: quantity }) }));
+};
+
+const CheckoutStarted = ({ event }) => {
+    const { t } = useTranslation();
+    return (jsx(JourneyItem, { time: event.date, title: t('Started checkout'), eventMarker: { icon: SvgPaymentIcon }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+};
+
+const CheckoutStartedDetail = ({ lineItems = [], activatorWrapperProps }) => {
+    const { t } = useTranslation();
+    const [active, setActive] = useState(false);
+    const toggleActive = useCallback(() => setActive((active) => !active), []);
+    if (!lineItems || lineItems.length === 0) {
+        return null;
+    }
+    return (jsx(Popover, { active: active, activator: jsx(Box, { ...activatorWrapperProps, children: jsx(Button, { variant: "tertiary", icon: active ? SvgChevronUpIcon : SvgChevronDownIcon, onClick: toggleActive }) }), onClose: toggleActive, children: jsx(Box, { padding: "300", width: "340px", children: jsx(BlockStack, { gap: "300", children: lineItems.map((product, index, self) => {
+                    const isLast = index === self.length - 1;
+                    const boxProps = {
+                        borderBlockEndWidth: '025',
+                        borderColor: 'border-secondary',
+                        paddingBlockEnd: '300',
+                    };
+                    return (jsx(Box, { ...(!isLast && boxProps), children: jsxs(InlineStack, { gap: "300", wrap: false, children: [jsx("div", { className: "size-10", children: jsx(GThumbnail, { source: product.imageURL ?? '', alt: product.productTitle ?? '', size: "small" }) }), jsxs("div", { className: "flex flex-col gap-1 w-full", children: [jsxs(InlineStack, { gap: "200", align: "space-between", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: product.productTitle }), jsx("div", { className: "text-nowrap", children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: t('x {{quantity}}', { quantity: product.quantity }) }) })] }), product.title && (jsx("span", { children: jsx(Badge, { children: product.title }) }))] })] }) }, product.productID));
+                }) }) }) }));
+};
+
+const CheckoutItems = ({ lineItems }) => {
+    const { t } = useTranslation();
+    const cartQuantity = lineItems.reduce((acc, curr) => acc + (curr.quantity ?? 0), 0);
+    return (jsxs(InlineStack, { gap: "100", children: [jsx(QuantityWrapper, { quantity: cartQuantity }), jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: cartQuantity > 1 ? t('items') : t('item') }), jsx(CheckoutStartedDetail, { lineItems: lineItems })] }));
+};
+
+const CheckoutCompleted = ({ event }) => {
+    const { t } = useTranslation();
+    const { orderId } = useOrderJourneyContext();
+    const isCheckoutCompletedEventOfCurrentOrder = event.orderID === orderId;
+    const titleMarkup = renderTitleMarkup();
+    return (jsx(JourneyItem, { time: event.date, title: titleMarkup, eventMarker: {
+            icon: SvgCheckIcon,
+            tone: isCheckoutCompletedEventOfCurrentOrder ? 'success' : 'base',
+        }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+    function renderTitleMarkup() {
+        return (jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: t('Completed checkout') }), event.orderID && (jsxs(Fragment, { children: [jsx(GDotInline, { tone: "disabled" }), jsxs(InlineStack, { gap: "025", blockAlign: "center", wrap: false, children: [jsx(Icon, { source: SvgOrderIcon, tone: "base" }), jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: event.orderID })] })] }))] }));
+    }
+};
+
+/**
+ * Slices journey items based on the analytic metric mode.
+ *
+ * - FIRST_SESSION: Returns all items (no slicing)
+ * - PAGE_ONLY: Slices from the LAST matching event (most recent relevant interaction)
+ * - ALL_SESSION: Slices from the FIRST matching event (entire journey from first interaction)
+ */
+const sliceJourneyItems = ({ journeyItems, mode, source, filteredCampaignId, pageAnalytic, }) => {
+    if (mode === EAnalyticMode.FIRST_SESSION)
+        return journeyItems;
+    const isCampaignVariant = ({ campaignGroupID = '', campaignID = '' }) => !isCampaignOfAnother({ campaignGroupID: campaignGroupID ?? '', campaignID: campaignID ?? '', filteredCampaignId });
+    const isMatchingPage = ({ locationPath = '' }) => locationPath === pageAnalytic?.path;
+    const sliceFromIndex = (index) => (index !== -1 ? journeyItems.slice(index) : journeyItems);
+    const predicate = source === EReportSource.CAMPAIGN ? isCampaignVariant : isMatchingPage;
+    // PAGE_ONLY: slice from LAST matching event (most recent relevant interaction)
+    if (mode === EAnalyticMode.PAGE_ONLY) {
+        return sliceFromIndex(findLastIndex(journeyItems, predicate));
+    }
+    // ALL_SESSION: slice from FIRST matching event (entire journey from first interaction)
+    if (mode === EAnalyticMode.ALL_SESSION) {
+        return sliceFromIndex(journeyItems.findIndex(predicate));
+    }
+    return journeyItems;
+};
+const getEventCampaignIdByType = ({ campaignGroupID, campaignID, }) => {
+    return campaignGroupID !== '0' ? campaignGroupID : campaignID;
+};
+const isCampaignOfAnother = ({ campaignGroupID, campaignID, filteredCampaignId, }) => {
+    const eventCampaignIdByType = getEventCampaignIdByType({ campaignGroupID, campaignID });
+    const isEventOfAnotherCampaign = filteredCampaignId && eventCampaignIdByType !== filteredCampaignId;
+    return isEventOfAnotherCampaign;
+};
+
+const PageViewed = ({ event }) => {
+    const { t } = useTranslation();
+    const { date, locationPath, campaignGroupID = '', campaignID = '', filteredCampaignId, campaignName, campaignGroupName, campaignVariantType, } = event;
+    const eventCampaignName = filteredCampaignId ? '' : campaignGroupName || campaignName;
+    const isEventWithNoCampaign = !campaignVariantType;
+    const eventCampaignIdByType = getEventCampaignIdByType({
+        campaignGroupID: campaignGroupID ?? '',
+        campaignID: campaignID ?? '',
+    });
+    const isEventOfAnotherCampaign = isCampaignOfAnother({
+        campaignGroupID: campaignGroupID ?? '',
+        campaignID: campaignID ?? '',
+        filteredCampaignId,
+    });
+    const pageViewEventMarkerIcon = getPageViewEventMarkerIcon();
+    const titleMarkup = renderTitleMarkup();
+    const hasPadding = useMemo(() => {
+        if (isEventWithNoCampaign)
+            return true;
+        if (!filteredCampaignId)
+            return false;
+        return eventCampaignIdByType !== filteredCampaignId;
+    }, [filteredCampaignId, eventCampaignIdByType, isEventWithNoCampaign]);
+    return (jsx(JourneyItem, { time: date, title: titleMarkup, eventMarker: { icon: pageViewEventMarkerIcon, hasPadding }, children: jsx(InlineStack, { gap: "200", wrap: false, blockAlign: "center", children: jsx("div", { className: "min-w-0 w-full", children: jsx(GTextTruncated, { as: "span", variant: "bodySm", tone: "subdued", children: locationPath ?? '' }) }) }) }));
+    function getPageViewEventMarkerIcon() {
+        if (isEventOfAnotherCampaign)
+            return SvgCursorIcon;
+        switch (campaignVariantType) {
+            case IVariantType$1.VARIANT_A:
+                return jsx(GVariantBadge, { variant: "A", size: "md", tone: "active" });
+            case IVariantType$1.VARIANT_B:
+                return jsx(GVariantBadge, { variant: "B", size: "md" });
+            default:
+                return SvgCursorIcon;
+        }
+    }
+    function renderTitleMarkup() {
+        return (jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [jsx("span", { className: "text-nowrap", children: jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", breakWord: false, children: t('Visited page') }) }), eventCampaignName && !isEventOfAnotherCampaign && (jsxs(Fragment, { children: [jsx(GDotInline, { tone: "disabled" }), jsx("div", { className: "min-w-0 w-full", children: jsx(GI18NText, { as: "span", variant: "bodySm", tone: "subdued", truncate: true, transformers: {
+                                    1: (name) => (jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", fontWeight: "medium", children: name })),
+                                }, children: t('Experiment: [1]{{name}}[]', { name: eventCampaignName }) }) })] }))] }));
+    }
+};
+
+const ProductAddedToCart = ({ event }) => {
+    const { t } = useTranslation();
+    return (jsx(JourneyItem, { time: event.date, title: t('Added product to cart'), eventMarker: { icon: SvgCartIcon }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+};
+
+const ProductRemovedFromCart = ({ event }) => {
+    const { t } = useTranslation();
+    return (jsx(JourneyItem, { time: event.date, title: t('Remove product from cart'), eventMarker: { icon: SvgProductRemoveIcon }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+};
+
+const DefaultEventComponent = () => null;
+const JOURNEY_EVENT_COMPONENTS_MAP = {
+    [EJourneyEvent.ADDED_TO_CART]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_ADDRESS_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_COMPLETED]: CheckoutCompleted,
+    [EJourneyEvent.CHECKOUT_CONTACT_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_SHIPPING_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_STARTED]: CheckoutStarted,
+    [EJourneyEvent.COLLECTION_VIEWED]: DefaultEventComponent,
+    [EJourneyEvent.ORDER]: DefaultEventComponent,
+    [EJourneyEvent.PAGE_VIEWED]: PageViewed,
+    [EJourneyEvent.PAYMENT_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.PRODUCT_ADDED_TO_CART]: ProductAddedToCart,
+    [EJourneyEvent.PRODUCT_REMOVED_FROM_CART]: ProductRemovedFromCart,
+    [EJourneyEvent.PRODUCT_VIEWED]: DefaultEventComponent,
+    [EJourneyEvent.SEARCH_SUBMITTED]: DefaultEventComponent,
+};
+
+const JourneyDateBadge = ({ content }) => {
+    return (jsx(Box, { background: "bg-surface-secondary", paddingBlock: "100", paddingInline: "200", borderRadius: "200", minWidth: "110px", children: jsx(GBlockCenter, { children: jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "medium", children: content }) }) }));
+};
+
+const BOX_BACKGROUND = {
+    default: 'bg-surface-secondary-active',
+    onHover: 'bg-surface-secondary',
+};
+const JourneyLoadMore = ({ isFetching, onLoadMode }) => {
+    const [boxBackground, setBoxBackground] = useState(BOX_BACKGROUND.default);
+    const { t } = useTranslation();
+    if (isFetching) {
+        return (jsx(Box, { paddingBlock: "100", paddingInline: "300", background: BOX_BACKGROUND.onHover, borderRadius: "200", children: jsx(GSpinner, { size: "small" }) }));
+    }
+    return (jsx("div", { className: "cursor-pointer", onMouseEnter: () => setBoxBackground(BOX_BACKGROUND.onHover), onMouseLeave: () => setBoxBackground(BOX_BACKGROUND.default), onClick: onLoadMode, children: jsx(Box, { paddingBlock: "100", paddingInline: "200", background: boxBackground, borderRadius: "200", children: jsxs(InlineStack, { gap: "050", wrap: false, blockAlign: "center", children: [jsx(Icon, { source: SvgChevronUpIcon }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", children: t('More steps') })] }) }) }));
+};
+
+const JourneyIdBadge = ({ id, type = 'order' }) => {
+    const { t } = useTranslation();
+    const idContent = getIdContent();
+    const { onViewOrderDetails } = useOrderJourneyContext();
+    return (jsx(GTooltip, { content: t('View order details'), children: jsx("div", { className: "cursor-pointer", onClick: () => onViewOrderDetails?.(id), children: jsx(Box, { background: "bg-surface-secondary-active", paddingBlock: "100", paddingInline: "200", borderRadius: "200", children: jsxs(InlineStack, { gap: "100", blockAlign: "center", children: [jsx(GI18NText, { as: "p", variant: "bodyMd", fontWeight: "medium", tone: "subdued", transformers: {
+                                1: (text) => {
+                                    return (jsx(Text, { as: "span", tone: "base", children: text }));
+                                },
+                            }, children: idContent }), jsx(Icon, { source: SvgExternalSmallIcon })] }) }) }) }));
+    function getIdContent() {
+        switch (type) {
+            case 'order':
+                return t('Order ID: [1]{{id}}[]', { id });
+            default:
+                return id;
+        }
+    }
+};
+
+const JourneyTitle = ({ content, id, hasMoreSteps, isFetching = false, onLoadMode }) => {
+    const isStickyHeader = !!id;
+    const isShowLoadMore = isStickyHeader && hasMoreSteps && onLoadMode;
+    return (jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsxs(InlineStack, { align: "space-between", gap: "100", children: [jsxs(InlineStack, { gap: "400", children: [jsx(JourneyDateBadge, { content: content }), id && jsx(JourneyIdBadge, { id: id })] }), isShowLoadMore && jsx(JourneyLoadMore, { isFetching: isFetching, onLoadMode: onLoadMode })] }), jsx(JourneyTitleLine, {})] }));
+};
+const JourneyTitleLine = () => {
+    return jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" });
+};
+
+const JourneyGroup = ({ eventsByDate, sectionRefs }) => {
+    return eventsByDate.map(({ dateKey, date, events }, index) => {
+        const isLatestDate = index === 0;
+        return (jsxs("div", { ref: (el) => {
+                if (el)
+                    sectionRefs.current.set(dateKey, el);
+            }, className: "relative", children: [!isLatestDate && jsx(JourneyTitle, { content: date }), events.map((event, eventIndex) => (jsx(JourneyEventRenderer, { event: event }, `${event.eventType}-${event.date}-${eventIndex}`))), jsx(JourneyTimeline, {})] }, dateKey));
+    });
+};
+function JourneyEventRenderer({ event }) {
+    const Component = JOURNEY_EVENT_COMPONENTS_MAP[event.eventType];
+    if (!Component)
+        return null;
+    return jsx(Component, { event: event });
+}
+
+const JourneyContainer = ({ orderId, eventsByDate, hasMoreSteps, isFetchingMoreSteps, onLoadMore, }) => {
+    const firstEventsByDate = eventsByDate[0];
+    const [currentDate, setCurrentDate] = useState(firstEventsByDate?.date || '');
+    const [showShadow, setShowShadow] = useState(false);
+    const scrollContainerRef = useRef(null);
+    const sectionRefs = useRef(new Map());
+    const scrollableRef = useRef(null);
+    const prevIsFetchingRef = useRef(isFetchingMoreSteps);
+    useEffect(() => {
+        // Find the Polaris Scrollable container after mount
+        if (!isBrowser$1() || !scrollContainerRef.current)
+            return;
+        let element = scrollContainerRef.current.parentElement;
+        // Traverse up to find the scrollable container
+        while (element) {
+            const overflow = getComputedStyle(element).overflowY;
+            if (overflow === 'auto' || overflow === 'scroll') {
+                scrollableRef.current = element;
+                break;
+            }
+            element = element.parentElement;
+        }
+        const scrollableElement = scrollableRef.current;
+        if (!scrollableElement)
+            return;
+        const handleScroll = () => {
+            const scrollTop = scrollableElement.scrollTop;
+            setShowShadow(scrollTop > 10);
+            // Find which date section is currently visible at the top
+            let currentSection = firstEventsByDate;
+            const headerOffset = 20; // Account for fixed header height
+            const scrollableContainerRect = scrollableElement.getBoundingClientRect();
+            for (const dateGroup of eventsByDate) {
+                const element = sectionRefs.current.get(dateGroup.dateKey);
+                if (!element)
+                    continue;
+                const rect = element.getBoundingClientRect();
+                // If section top is above or near the header position
+                if (rect.top - scrollableContainerRect.top <= headerOffset) {
+                    currentSection = dateGroup;
+                }
+            }
+            setCurrentDate(currentSection?.date || firstEventsByDate?.date || '');
+        };
+        scrollableElement.addEventListener('scroll', handleScroll);
+        handleScroll(); // Initial call
+        return () => scrollableElement.removeEventListener('scroll', handleScroll);
+    }, [eventsByDate, firstEventsByDate]);
+    const handleScrollToTop = () => {
+        if (!scrollableRef.current)
+            return;
+        scrollableRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    // Auto-scroll to top when more steps are fetched
+    useEffect(() => {
+        const wasFetching = prevIsFetchingRef.current;
+        const isNowDone = !isFetchingMoreSteps;
+        // If we were fetching and now we're done, scroll to top
+        if (wasFetching && isNowDone) {
+            handleScrollToTop();
+        }
+        // Update ref for next render
+        prevIsFetchingRef.current = isFetchingMoreSteps;
+    }, [isFetchingMoreSteps]);
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "max-h-[100vh] md:max-h-[calc(100vh-120px)] pb-5", children: [jsx(GBox, { ariaShadow: showShadow ? 'shadow-outset-200' : undefined, position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsx(JourneyTitle, { content: currentDate, id: orderId, hasMoreSteps: hasMoreSteps, isFetching: isFetchingMoreSteps, onLoadMode: () => {
+                        onLoadMore();
+                        handleScrollToTop();
+                    } }) }), jsx("div", { ref: scrollContainerRef, className: "min-h-[100vh] md:min-h-[calc(100vh-192px)]", children: jsx(JourneyGroup, { eventsByDate: eventsByDate, sectionRefs: sectionRefs }) })] }));
+};
+
+const JourneyTimeline = () => {
+    const journeyItemPaddingInlineStart = 24;
+    const journeyItemTimeWidth = 48;
+    const journeyItemInlineGap = 16;
+    const eventMarkerIconSize = 28;
+    const journeyTimeLineWidth = 2;
+    const timelineLeft = journeyItemPaddingInlineStart +
+        journeyItemTimeWidth +
+        journeyItemInlineGap +
+        eventMarkerIconSize / 2 -
+        journeyTimeLineWidth / 2;
+    return jsx("div", { className: cls('w-[2px] absolute top-5 bottom-7 bg-[#F3F3F3] -z-[1]'), style: { left: timelineLeft } });
+};
+
+const OrderJourneySkeleton = () => {
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "max-h-[100vh] md:max-h-[calc(100vh-120px)] pb-5", children: [jsx(GBox, { position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsx(InlineStack, { align: "space-between", gap: "100", children: jsxs(InlineStack, { gap: "400", children: [jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }), jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-40", children: jsx(SkeletonBodyText, { lines: 1 }) }) })] }) }), jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" })] }) }), jsxs("div", { className: "min-h-[100vh] md:min-h-[calc(100vh-120px)] relative mt-4", children: [jsx("div", { className: "w-[2px] absolute top-4 bottom-4 bg-[#F3F3F3] -z-[1]", style: { left: 110 } }), Array.from({ length: 8 }).map((_, index) => (jsx(JourneyEventSkeleton, { isLast: index === 7 }, index)))] })] }));
+};
+const JourneyEventSkeleton = ({ isLast }) => {
+    return (jsx(Box, { paddingInlineStart: "600", children: jsxs(InlineStack, { blockAlign: "start", gap: "400", wrap: false, children: [jsx("div", { className: "w-12 pt-1", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx("div", { className: "shrink-0 mt-0.5", children: jsx("div", { className: "w-7 h-7 bg-border-secondary rounded-full animate-pulse" }) }), jsxs(Box, { paddingBlockEnd: "400", width: "100%", children: [jsx("div", { className: "mb-2", children: jsx(SkeletonDisplayText, { size: "small" }) }), !isLast ? (jsx("div", { className: "max-w-[70%]", children: jsx(SkeletonBodyText, { lines: Math.random() > 0.5 ? 1 : 2 }) })) : (jsx("div", { className: "max-w-[40%]", children: jsx(SkeletonBodyText, { lines: 1 }) }))] })] }) }));
+};
+
+const GModalOrderJourney = ({ open, onClose, title, orderId, journeyItems, isLoading = false, hasNextPage = false, isFetchingNextPage = false, fetchNextPage, reportCampaign, pageAnalytic, mode, journeySource, onViewOrderDetails, }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    usePreventBodyScroll({ enable: open });
+    const source = useMemo(() => {
+        if (journeySource)
+            return journeySource;
+        if (reportCampaign)
+            return EReportSource.CAMPAIGN;
+        if (pageAnalytic)
+            return EReportSource.PAGE;
+    }, [reportCampaign, pageAnalytic, journeySource]);
+    const filteredCampaignId = reportCampaign?.id;
+    const slicedJourneyItems = useMemo(() => {
+        if (!source)
+            return journeyItems;
+        return sliceJourneyItems({
+            journeyItems,
+            mode,
+            source,
+            pageAnalytic,
+            filteredCampaignId,
+        });
+    }, [journeyItems, mode, source, pageAnalytic, filteredCampaignId]);
+    const isSliced = slicedJourneyItems.length < journeyItems.length;
+    const displayedItems = isExpanded ? journeyItems : slicedJourneyItems;
+    const hasMoreSteps = (!isExpanded && isSliced) || hasNextPage;
+    const handleLoadMore = useCallback(() => {
+        if (!isExpanded && isSliced) {
+            setIsExpanded(true);
+        }
+        else if (hasNextPage) {
+            fetchNextPage?.();
+        }
+    }, [isExpanded, isSliced, hasNextPage, fetchNextPage]);
+    const eventsByDate = useMemo(() => {
+        const grouped = new Map();
+        displayedItems?.forEach((journeyItem) => {
+            const dateKey = formatDateBy('MMMM D', journeyItem.date);
+            if (!grouped.has(dateKey))
+                grouped.set(dateKey, []);
+            grouped.get(dateKey)?.push(journeyItem);
+        });
+        return Array.from(grouped.entries()).map(([date, events]) => ({
+            date,
+            dateKey: date,
+            events: events.map((event) => ({ ...event, filteredCampaignId })),
+        }));
+    }, [displayedItems, filteredCampaignId]);
+    useEffect(() => {
+        if (!open)
+            setIsExpanded(false);
+    }, [open]);
+    if (!orderId)
+        return null;
+    return (jsx(GModal, { open: open, title: title, onClose: onClose, children: jsx(OrderJourneyProvider, { value: { orderId, onViewOrderDetails }, children: isLoading ? (jsx(OrderJourneySkeleton, {})) : (jsx(JourneyContainer, { orderId: orderId, eventsByDate: eventsByDate, hasMoreSteps: hasMoreSteps, isFetchingMoreSteps: isFetchingNextPage, onLoadMore: handleLoadMore })) }) }));
+};
+
 function isBrowser() {
     return typeof window !== 'undefined';
 }
@@ -24383,4 +24973,4 @@ const useStickyFilterBoxProps = ({ id }) => {
     };
 };
 
-export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CardJourneyAnalysis, CardPathAnalysis, CompareDateTimePickerAlias, ConvertMoneyProvider, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, EJourneyEvent, EReportSource, FUNNEL_POPOVER_KEY, GSelectableMetricChartCard, GTimePicker, IVariantType, MOCK_DATA_PATH_ANALYSIS, MainDateTimePickerAlias, MetricChartProvider, MetricDonutChartCard, ORDER_COLUMN_MAPPING, ORDER_LISTING_COLUMNS, ORDER_LISTING_CONFIG, ORDER_LISTING_DIMENSIONS, ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE, ORDER_LISTING_METRICS, ORDER_LISTING_METRIC_LAYOUTS, OrderListingLatestTable, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, PathAnalysisConfigProvider, PathAnalysisContext, PathAnalysisProvider, SERIES_COLORS, SORT_ORDER_LISTING_DEFAULT, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, TimezoneProvider, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useConvertMoneyContext, useCurrencyRatesStore, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useFunnelChartStore, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, useTimezoneContext, useVersionDateTimeFilters };
+export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CardJourneyAnalysis, CardPathAnalysis, CompareDateTimePickerAlias, ConvertMoneyProvider, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, EJourneyEvent, EReportSource, FUNNEL_POPOVER_KEY, GModalOrderJourney, GSelectableMetricChartCard, GTimePicker, IVariantType, MOCK_DATA_PATH_ANALYSIS, MainDateTimePickerAlias, MetricChartProvider, MetricDonutChartCard, ORDER_COLUMN_MAPPING, ORDER_LISTING_COLUMNS, ORDER_LISTING_CONFIG, ORDER_LISTING_DIMENSIONS, ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE, ORDER_LISTING_METRICS, ORDER_LISTING_METRIC_LAYOUTS, OrderJourneyProvider, OrderListingLatestTable, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, PathAnalysisConfigProvider, PathAnalysisContext, PathAnalysisProvider, SERIES_COLORS, SORT_ORDER_LISTING_DEFAULT, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, TimezoneProvider, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useConvertMoneyContext, useCurrencyRatesStore, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useFunnelChartStore, useGModalOrderJourney, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, useOrderJourneyContext, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, useTimezoneContext, useVersionDateTimeFilters };