@levi-gemcommerce/analytics 3.0.1-dev.2 → 3.0.1-dev.4

package/dist/esm/components/CurrencySelector/CurrencySelector.mjs

@@ -0,0 +1,92 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon, Text, Box } from '@shopify/polaris';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { useRef, useCallback, useMemo, useEffect } from 'react';
+import { sortByConditions } from '../../utils/sort.mjs';
+import '../../utils/dayjs.mjs';
+import '../../utils/analytics.mjs';
+import '../../types/template.mjs';
+import '../../shared/components/GTooltip/components/GTooltipCard.mjs';
+import '../../shared/components/GDiv/GDiv.mjs';
+import { GI18NText } from '../../shared/components/GI18NText/GI18NText.mjs';
+import { GSelector } from '../../shared/components/GSelector/GSelector.mjs';
+import { GTextLink } from '../../shared/components/GTextLink/GTextLink.mjs';
+import '../../shared/components/GFeatureLocked/constants.mjs';
+import { useTranslation } from 'react-i18next';
+import '../../shared/components/GFeatureLocked/types.mjs';
+import '../../shared/components/GPagination/GPagination.mjs';
+import '../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../providers/ConvertMoneyProvider.mjs';
+import '../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../core/gemxql/types/analytic-data.mjs';
+import '../../core/gemxql/types/analytic-source.mjs';
+import '../../core/gemxql/types/extra-condition.mjs';
+import '../../core/gemxql/types/field-filters.mjs';
+import '../../core/gemxql/types/field-operators.mjs';
+import '../../core/gemxql/types/group-with-clause.mjs';
+import '../../core/gemxql/types/order-by.mjs';
+import '../../core/gemxql/types/page-fields.mjs';
+import '../../core/gemxql/types/row-reader-mode.mjs';
+import '../../core/gemxql/types/time-dimension.mjs';
+import '../../constants/analytic-metric-tooltip.mjs';
+import '../../constants/breakdown-targets.mjs';
+import { DEFAULT_CURRENCY_ANALYTIC } from '../../constants/currency.mjs';
+
+const EXCHANGE_RATE_HELP_URL = 'https://help.shopify.com/en/manual/international/pricing/exchange-rates#auto-convert';
+const CurrencySelector = ({ currencies, selected, preferredAlignment = 'left', activatorText, onSelect, }) => {
+    const { t } = useTranslation();
+    const onSelectRef = useRef(onSelect);
+    const handleSelection = useCallback((value) => {
+        onSelectRef.current?.(value);
+    }, []);
+    const actionItems = useMemo(() => {
+        if (!currencies)
+            return [];
+        const formattedCurrencies = currencies.map((currency) => ({
+            content: currency,
+            id: currency,
+        }));
+        const hasCurrencyDefault = formattedCurrencies.some((item) => item.id === DEFAULT_CURRENCY_ANALYTIC);
+        if (!hasCurrencyDefault) {
+            formattedCurrencies.push({
+                content: DEFAULT_CURRENCY_ANALYTIC,
+                id: DEFAULT_CURRENCY_ANALYTIC,
+            });
+        }
+        return sortByConditions(formattedCurrencies, [
+            { attr: 'content', order: 'asc', preferredValue: DEFAULT_CURRENCY_ANALYTIC },
+        ]);
+    }, [currencies]);
+    const actionListItems = useMemo(() => {
+        return actionItems.map((option) => ({
+            id: option.id,
+            content: option.content,
+            onAction: () => handleSelection(option.id),
+            active: option.id === selected,
+            suffix: option.id === selected && jsx(Icon, { source: CheckIcon, tone: "success" }),
+            helpText: option.id === DEFAULT_CURRENCY_ANALYTIC && (jsx(Text, { as: "p", fontWeight: "semibold", children: t('Default') })),
+        }));
+    }, [actionItems, selected, handleSelection, t]);
+    const isHidden = useMemo(() => {
+        if (!actionItems?.length)
+            return true;
+        return actionItems.length === 1 && actionItems[0]?.id === DEFAULT_CURRENCY_ANALYTIC;
+    }, [actionItems]);
+    useEffect(() => {
+        onSelectRef.current = onSelect;
+    });
+    if (isHidden)
+        return null;
+    return (jsx(GSelector, { options: actionListItems, selected: selected, variant: "action-list", 
+        // value originates from our CurrencyCode option ids, so the widen-to-string round trip is safe
+        onSelect: (value) => handleSelection(value), activatorText: activatorText ?? t('Currency'), maxWidth: "225px", preferredAlignment: preferredAlignment, helpText: jsx(Box, { padding: "200", paddingBlockStart: "300", paddingBlockEnd: "300", borderColor: "border-tertiary", background: 'bg', children: jsx(GI18NText, { as: "p", variant: "bodyMd", transformers: {
+                    1: (text) => (jsx(GTextLink, { linkAction: {
+                            url: EXCHANGE_RATE_HELP_URL,
+                            target: '_blank',
+                        }, children: text }, text + 'text-link')),
+                }, children: t("This will follow Shopify's current exchange rate. [1]Read more[]") }) }) }));
+};
+
+export { CurrencySelector };

package/dist/esm/components/GModalOrderJourney/GModalOrderJourney.d.ts

@@ -0,0 +1,21 @@
+import type { IOrderJourneyItem, IOrderPageAnalytic, IReportCampaign } from '../OrderAnalytic/types';
+import type { EAnalyticMode } from '../../types';
+import { EReportSource } from '../OrderAnalytic/types';
+export interface GModalOrderJourneyProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    orderId: string;
+    gxId?: string;
+    journeyItems: IOrderJourneyItem[];
+    isLoading?: boolean;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
+    fetchNextPage?: () => void;
+    reportCampaign?: IReportCampaign;
+    pageAnalytic?: IOrderPageAnalytic;
+    mode: EAnalyticMode;
+    journeySource?: EReportSource;
+    onViewOrderDetails?: (orderId: string) => void;
+}
+export declare const GModalOrderJourney: ({ open, onClose, title, orderId, gxId, journeyItems, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage, reportCampaign, pageAnalytic, mode, journeySource, onViewOrderDetails, }: GModalOrderJourneyProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/GModalOrderJourney/GModalOrderJourney.js

@@ -0,0 +1,99 @@
+import { jsx } from 'react/jsx-runtime';
+import '../OrderAnalytic/types/order.js';
+import { EReportSource } from '../OrderAnalytic/types/report.js';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import '../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../providers/ConvertMoneyProvider.js';
+import '../../core/gemxql/constants/row-reader-mode.js';
+import '../../core/gemxql/types/analytic-data.js';
+import '../../core/gemxql/types/analytic-source.js';
+import '../../core/gemxql/types/extra-condition.js';
+import '../../core/gemxql/types/field-filters.js';
+import '../../core/gemxql/types/field-operators.js';
+import '../../core/gemxql/types/group-with-clause.js';
+import '../../core/gemxql/types/order-by.js';
+import '../../core/gemxql/types/page-fields.js';
+import '../../core/gemxql/types/row-reader-mode.js';
+import '../../core/gemxql/types/time-dimension.js';
+import '../../utils/dayjs.js';
+import '../../utils/analytics.js';
+import '../../types/template.js';
+import { formatDateBy } from '../../utils/date-time.js';
+import '../../shared/components/GPagination/GPagination.js';
+import { usePreventBodyScroll } from '../../hooks/usePreventBodyScroll.js';
+import '@shopify/polaris';
+import '@shopify/polaris-icons';
+import '../../shared/components/GTooltip/components/GTooltipCard.js';
+import '../../shared/components/GDiv/GDiv.js';
+import 'react-i18next';
+import '../../shared/components/GFeatureLocked/constants.js';
+import '../../shared/components/GFeatureLocked/types.js';
+import '../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import { GModal } from '../../shared/components/GModal/GModal.js';
+import { JourneyContainer } from '../../shared/journey/common/JourneyContainer/components/JourneyContainer.js';
+import { OrderJourneySkeleton } from './components/OrderJourneySkeleton.js';
+import { OrderJourneyProvider } from './context/OrderJourneyContext.js';
+import { sliceJourneyItems } from './utils/index.js';
+
+const GModalOrderJourney = ({ open, onClose, title, orderId, gxId, 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);
+            return;
+        }
+        if (hasNextPage) {
+            // Stay expanded so fetched earlier steps aren't re-hidden by the slice
+            setIsExpanded(true);
+            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, gxId, onViewOrderDetails }, children: isLoading ? (jsx(OrderJourneySkeleton, {})) : (jsx(JourneyContainer, { orderId: orderId, eventsByDate: eventsByDate, hasMoreSteps: hasMoreSteps, isFetchingMoreSteps: isFetchingNextPage, onLoadMore: handleLoadMore })) }) }));
+};
+
+export { GModalOrderJourney };

package/dist/esm/components/GModalOrderJourney/GModalOrderJourney.mjs

@@ -0,0 +1,99 @@
+import { jsx } from 'react/jsx-runtime';
+import '../OrderAnalytic/types/order.mjs';
+import { EReportSource } from '../OrderAnalytic/types/report.mjs';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import '../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../providers/ConvertMoneyProvider.mjs';
+import '../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../core/gemxql/types/analytic-data.mjs';
+import '../../core/gemxql/types/analytic-source.mjs';
+import '../../core/gemxql/types/extra-condition.mjs';
+import '../../core/gemxql/types/field-filters.mjs';
+import '../../core/gemxql/types/field-operators.mjs';
+import '../../core/gemxql/types/group-with-clause.mjs';
+import '../../core/gemxql/types/order-by.mjs';
+import '../../core/gemxql/types/page-fields.mjs';
+import '../../core/gemxql/types/row-reader-mode.mjs';
+import '../../core/gemxql/types/time-dimension.mjs';
+import '../../utils/dayjs.mjs';
+import '../../utils/analytics.mjs';
+import '../../types/template.mjs';
+import { formatDateBy } from '../../utils/date-time.mjs';
+import '../../shared/components/GPagination/GPagination.mjs';
+import { usePreventBodyScroll } from '../../hooks/usePreventBodyScroll.mjs';
+import '@shopify/polaris';
+import '@shopify/polaris-icons';
+import '../../shared/components/GTooltip/components/GTooltipCard.mjs';
+import '../../shared/components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import '../../shared/components/GFeatureLocked/constants.mjs';
+import '../../shared/components/GFeatureLocked/types.mjs';
+import '../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import { GModal } from '../../shared/components/GModal/GModal.mjs';
+import { JourneyContainer } from '../../shared/journey/common/JourneyContainer/components/JourneyContainer.mjs';
+import { OrderJourneySkeleton } from './components/OrderJourneySkeleton.mjs';
+import { OrderJourneyProvider } from './context/OrderJourneyContext.mjs';
+import { sliceJourneyItems } from './utils/index.mjs';
+
+const GModalOrderJourney = ({ open, onClose, title, orderId, gxId, 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);
+            return;
+        }
+        if (hasNextPage) {
+            // Stay expanded so fetched earlier steps aren't re-hidden by the slice
+            setIsExpanded(true);
+            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, gxId, onViewOrderDetails }, children: isLoading ? (jsx(OrderJourneySkeleton, {})) : (jsx(JourneyContainer, { orderId: orderId, eventsByDate: eventsByDate, hasMoreSteps: hasMoreSteps, isFetchingMoreSteps: isFetchingNextPage, onLoadMore: handleLoadMore })) }) }));
+};
+
+export { GModalOrderJourney };

package/dist/esm/components/GModalOrderJourney/components/OrderJourneySkeleton.d.ts

@@ -0,0 +1 @@
+export declare const OrderJourneySkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/GModalOrderJourney/components/OrderJourneySkeleton.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Scrollable, Box, InlineStack, SkeletonBodyText, SkeletonDisplayText } from '@shopify/polaris';
+import 'react';
+import '../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.js';
+import '../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../core/gemxql/types/analytic-data.js';
+import '../../../core/gemxql/types/analytic-source.js';
+import '../../../core/gemxql/types/extra-condition.js';
+import '../../../core/gemxql/types/field-filters.js';
+import '../../../core/gemxql/types/field-operators.js';
+import '../../../core/gemxql/types/group-with-clause.js';
+import '../../../core/gemxql/types/order-by.js';
+import '../../../core/gemxql/types/page-fields.js';
+import '../../../core/gemxql/types/row-reader-mode.js';
+import '../../../core/gemxql/types/time-dimension.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import '../../../shared/components/GPagination/GPagination.js';
+import { useWindowSize } from '../../../hooks/publish/useWindowSize.js';
+import '@shopify/polaris-icons';
+import '../../../shared/components/GTooltip/components/GTooltipCard.js';
+import '../../../shared/components/GDiv/GDiv.js';
+import 'react-i18next';
+import { GBox } from '../../../shared/components/GBox/GBox.js';
+import '../../../shared/components/GFeatureLocked/constants.js';
+import '../../../shared/components/GFeatureLocked/types.js';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.js';
+
+const OrderJourneySkeleton = () => {
+    const { isMobileView } = useWindowSize();
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "pb-5", style: { height: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, children: [jsx(GBox, { position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsx(InlineStack, { align: "space-between", gap: "100", children: jsxs(InlineStack, { gap: "400", children: [jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }), jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-40", children: jsx(SkeletonBodyText, { lines: 1 }) }) })] }) }), jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" })] }) }), jsxs("div", { className: "relative mt-4", children: [jsx("div", { className: "w-[2px] absolute top-4 bottom-4 bg-[#F3F3F3] -z-[1]", style: { left: 110 } }), Array.from({ length: 8 }).map((_, index) => (jsx(JourneyEventSkeleton, { isLast: index === 7 }, index)))] })] }));
+};
+const JourneyEventSkeleton = ({ isLast }) => {
+    return (jsx(Box, { paddingInlineStart: "600", children: jsxs(InlineStack, { blockAlign: "start", gap: "400", wrap: false, children: [jsx("div", { className: "w-12 pt-1", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx("div", { className: "shrink-0 mt-0.5", children: jsx("div", { className: "w-7 h-7 bg-border-secondary rounded-full animate-pulse" }) }), jsxs(Box, { paddingBlockEnd: "400", width: "100%", children: [jsx("div", { className: "mb-2", children: jsx(SkeletonDisplayText, { size: "small" }) }), !isLast ? (jsx("div", { className: "max-w-[70%]", children: jsx(SkeletonBodyText, { lines: Math.random() > 0.5 ? 1 : 2 }) })) : (jsx("div", { className: "max-w-[40%]", children: jsx(SkeletonBodyText, { lines: 1 }) }))] })] }) }));
+};
+
+export { OrderJourneySkeleton };

package/dist/esm/components/GModalOrderJourney/components/OrderJourneySkeleton.mjs

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Scrollable, Box, InlineStack, SkeletonBodyText, SkeletonDisplayText } from '@shopify/polaris';
+import 'react';
+import '../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.mjs';
+import '../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../core/gemxql/types/analytic-data.mjs';
+import '../../../core/gemxql/types/analytic-source.mjs';
+import '../../../core/gemxql/types/extra-condition.mjs';
+import '../../../core/gemxql/types/field-filters.mjs';
+import '../../../core/gemxql/types/field-operators.mjs';
+import '../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../core/gemxql/types/order-by.mjs';
+import '../../../core/gemxql/types/page-fields.mjs';
+import '../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../core/gemxql/types/time-dimension.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import '../../../shared/components/GPagination/GPagination.mjs';
+import { useWindowSize } from '../../../hooks/publish/useWindowSize.mjs';
+import '@shopify/polaris-icons';
+import '../../../shared/components/GTooltip/components/GTooltipCard.mjs';
+import '../../../shared/components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import { GBox } from '../../../shared/components/GBox/GBox.mjs';
+import '../../../shared/components/GFeatureLocked/constants.mjs';
+import '../../../shared/components/GFeatureLocked/types.mjs';
+import '../../../shared/charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+
+const OrderJourneySkeleton = () => {
+    const { isMobileView } = useWindowSize();
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "pb-5", style: { height: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, children: [jsx(GBox, { position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsx(InlineStack, { align: "space-between", gap: "100", children: jsxs(InlineStack, { gap: "400", children: [jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }), jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-40", children: jsx(SkeletonBodyText, { lines: 1 }) }) })] }) }), jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" })] }) }), jsxs("div", { className: "relative mt-4", children: [jsx("div", { className: "w-[2px] absolute top-4 bottom-4 bg-[#F3F3F3] -z-[1]", style: { left: 110 } }), Array.from({ length: 8 }).map((_, index) => (jsx(JourneyEventSkeleton, { isLast: index === 7 }, index)))] })] }));
+};
+const JourneyEventSkeleton = ({ isLast }) => {
+    return (jsx(Box, { paddingInlineStart: "600", children: jsxs(InlineStack, { blockAlign: "start", gap: "400", wrap: false, children: [jsx("div", { className: "w-12 pt-1", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx("div", { className: "shrink-0 mt-0.5", children: jsx("div", { className: "w-7 h-7 bg-border-secondary rounded-full animate-pulse" }) }), jsxs(Box, { paddingBlockEnd: "400", width: "100%", children: [jsx("div", { className: "mb-2", children: jsx(SkeletonDisplayText, { size: "small" }) }), !isLast ? (jsx("div", { className: "max-w-[70%]", children: jsx(SkeletonBodyText, { lines: Math.random() > 0.5 ? 1 : 2 }) })) : (jsx("div", { className: "max-w-[40%]", children: jsx(SkeletonBodyText, { lines: 1 }) }))] })] }) }));
+};
+
+export { OrderJourneySkeleton };

package/dist/esm/components/GModalOrderJourney/components/index.d.ts

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

package/dist/esm/components/GModalOrderJourney/context/OrderJourneyContext.d.ts

@@ -0,0 +1,7 @@
+export interface OrderJourneyContextValue {
+    orderId: string;
+    gxId?: string;
+    onViewOrderDetails?: (orderId: string) => void;
+}
+export declare const OrderJourneyProvider: import("react").Provider<OrderJourneyContextValue | undefined>;
+export declare const useOrderJourneyContext: () => OrderJourneyContextValue;

package/dist/esm/components/GModalOrderJourney/context/OrderJourneyContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+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;
+};
+
+export { OrderJourneyProvider, useOrderJourneyContext };

package/dist/esm/components/GModalOrderJourney/context/OrderJourneyContext.mjs

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+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;
+};
+
+export { OrderJourneyProvider, useOrderJourneyContext };

package/dist/esm/components/GModalOrderJourney/context/index.d.ts

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

package/dist/esm/components/GModalOrderJourney/hooks/index.d.ts

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

package/dist/esm/components/GModalOrderJourney/hooks/useGModalOrderJourney.d.ts

@@ -0,0 +1,7 @@
+import type { GModalOrderJourneyInitialValues } from '../types';
+export declare const useGModalOrderJourney: () => {
+    isOpen: boolean;
+    initialValues: GModalOrderJourneyInitialValues | null;
+    handleOpenModalOrderJourney: (data: GModalOrderJourneyInitialValues) => void;
+    handleCloseModalOrderJourney: () => void;
+};

package/dist/esm/components/GModalOrderJourney/hooks/useGModalOrderJourney.js

@@ -0,0 +1,22 @@
+import { useState, useCallback } from 'react';
+
+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,
+    };
+};
+
+export { useGModalOrderJourney };

package/dist/esm/components/GModalOrderJourney/hooks/useGModalOrderJourney.mjs

@@ -0,0 +1,22 @@
+import { useState, useCallback } from 'react';
+
+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,
+    };
+};
+
+export { useGModalOrderJourney };

package/dist/esm/components/GModalOrderJourney/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './hooks';
+export * from './context';
+export * from './GModalOrderJourney';

package/dist/esm/components/GModalOrderJourney/types/index.d.ts

@@ -0,0 +1,4 @@
+export interface GModalOrderJourneyInitialValues {
+    id: string;
+    orderId: string;
+}

package/dist/esm/components/GModalOrderJourney/utils/index.d.ts

@@ -0,0 +1,28 @@
+import type { IOrderJourneyItem, IOrderPageAnalytic } from '../../OrderAnalytic/types';
+import { EReportSource } from '../../OrderAnalytic/types';
+import { EAnalyticMode } from '../../../types';
+interface SliceJourneyItemsParams {
+    journeyItems: IOrderJourneyItem[];
+    mode: EAnalyticMode;
+    source: EReportSource;
+    filteredCampaignId?: string;
+    pageAnalytic?: IOrderPageAnalytic;
+}
+/**
+ * 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)
+ */
+export declare const sliceJourneyItems: ({ journeyItems, mode, source, filteredCampaignId, pageAnalytic, }: SliceJourneyItemsParams) => IOrderJourneyItem[];
+export declare const getEventCampaignIdByType: ({ campaignGroupID, campaignID, }: {
+    campaignGroupID: string;
+    campaignID: string;
+}) => string;
+export declare const isCampaignOfAnother: ({ campaignGroupID, campaignID, filteredCampaignId, }: {
+    campaignGroupID: string;
+    campaignID: string;
+    filteredCampaignId?: string;
+}) => boolean | "" | undefined;
+export {};

package/dist/esm/components/GModalOrderJourney/utils/index.js

@@ -0,0 +1,47 @@
+import '../../OrderAnalytic/types/order.js';
+import { EReportSource } from '../../OrderAnalytic/types/report.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import { findLastIndex } from '../../../utils/array.js';
+import { EAnalyticMode } from '../../../types/analytic-mode.js';
+import '../../../types/breakdown-items.js';
+import '../../../types/campaign.js';
+import '../../../types/metric.js';
+import '../../../types/pricing.js';
+import '../../../shared/reports/ui/ReportTable/types/report-columns.js';
+
+/**
+ * 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;
+};
+
+export { getEventCampaignIdByType, isCampaignOfAnother, sliceJourneyItems };