@levi-gemcommerce/analytics 2.0.4-dev.1 → 2.1.0-test.0

package/dist/esm/shared/components/GVariantBadge/GVariant.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '@shopify/polaris';
+import { useMemo } from 'react';
+import { cls } from '../../../utils/cls.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+
+const GVariant = ({ variant, size, tone }) => {
+    const sizeIcon = useMemo(() => {
+        switch (size) {
+            case 'xs':
+                return '20px';
+            case 'sm':
+                return '24px';
+            case 'md':
+                return '28px';
+            case 'lg':
+                return '32px';
+            default:
+                return '28px';
+        }
+    }, [size]);
+    const textColor = cls({
+        'text-variant-a': tone === 'active',
+        'text-variant-subdued': tone === 'subdued',
+        'text-variant-b': !tone || tone === 'inactive',
+    });
+    const textSize = useMemo(() => {
+        switch (size) {
+            case 'xs':
+                return 'Polaris-Text--bodyXs';
+            case 'sm':
+                return 'Polaris-Text--bodySm';
+            case 'md':
+                return 'Polaris-Text--headingMd';
+            case 'lg':
+                return 'Polaris-Text--headingMd';
+            default:
+                return 'Polaris-Text--headingMd';
+        }
+    }, [size]);
+    return (jsx(Box, { minHeight: sizeIcon, minWidth: sizeIcon, width: sizeIcon, borderRadius: "full", children: jsx("div", { className: "Polaris-GVariantBadge-Icon", style: { height: sizeIcon }, children: jsx("h2", { className: `Polaris-Text--headingMd Polaris-Text--semibold ${textColor} ${textSize}`, children: variant }) }) }));
+};
+
+export { GVariant };

package/dist/esm/shared/components/GVariantBadge/GVariant.mjs

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '@shopify/polaris';
+import { useMemo } from 'react';
+import { cls } from '../../../utils/cls.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+
+const GVariant = ({ variant, size, tone }) => {
+    const sizeIcon = useMemo(() => {
+        switch (size) {
+            case 'xs':
+                return '20px';
+            case 'sm':
+                return '24px';
+            case 'md':
+                return '28px';
+            case 'lg':
+                return '32px';
+            default:
+                return '28px';
+        }
+    }, [size]);
+    const textColor = cls({
+        'text-variant-a': tone === 'active',
+        'text-variant-subdued': tone === 'subdued',
+        'text-variant-b': !tone || tone === 'inactive',
+    });
+    const textSize = useMemo(() => {
+        switch (size) {
+            case 'xs':
+                return 'Polaris-Text--bodyXs';
+            case 'sm':
+                return 'Polaris-Text--bodySm';
+            case 'md':
+                return 'Polaris-Text--headingMd';
+            case 'lg':
+                return 'Polaris-Text--headingMd';
+            default:
+                return 'Polaris-Text--headingMd';
+        }
+    }, [size]);
+    return (jsx(Box, { minHeight: sizeIcon, minWidth: sizeIcon, width: sizeIcon, borderRadius: "full", children: jsx("div", { className: "Polaris-GVariantBadge-Icon", style: { height: sizeIcon }, children: jsx("h2", { className: `Polaris-Text--headingMd Polaris-Text--semibold ${textColor} ${textSize}`, children: variant }) }) }));
+};
+
+export { GVariant };

package/dist/esm/shared/components/GVariantBadge/GVariantBadge.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, InlineStack, Text, Icon, Badge } from '@shopify/polaris';
+import { GVariantBadgeTone, GVariantBadgeSize } from './types.js';
+import { InfoIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { GTextLink } from '../GTextLink/GTextLink.js';
+import { GTooltip } from '../GTooltip/GTooltip.js';
+import '../GTooltip/components/GTooltipCard.js';
+import { GVariant } from './GVariant.js';
+
+const CAMPAIGN_BACKGROUND = {
+    ORIGIN: '#D5E5FF', //`var(--p-color-${CAMPAIGN_BACKGROUND.ORIGIN})`,
+    VARIANT: '#FDDBE2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
+    SUBDUED: '#F2F2F2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
+};
+const GVariantBadge = ({ label, variant, tone, isShowWinner, size = GVariantBadgeSize.MD, labelProps, linkAction, tooltip, hideVariant = false, }) => {
+    const { t } = useTranslation();
+    const background = tone === GVariantBadgeTone.ACTIVE
+        ? CAMPAIGN_BACKGROUND.ORIGIN
+        : tone === GVariantBadgeTone.SUBDUED
+            ? CAMPAIGN_BACKGROUND.SUBDUED
+            : CAMPAIGN_BACKGROUND.VARIANT;
+    return (jsx(Box, { maxWidth: "100%", children: jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [!hideVariant && (jsx("div", { className: "Polaris-GVariantBadge", style: { backgroundColor: background, borderRadius: '100%' }, children: jsx(GVariant, { variant: variant, size: size, tone: tone }) })), label && (jsx(GTextLink, { linkAction: linkAction, children: jsx(Text, { as: "h2", variant: "headingMd", ...labelProps, truncate: true, children: label }) })), tooltip && (jsx(GTooltip, { ...tooltip, children: jsx(Icon, { source: InfoIcon }) })), isShowWinner && (jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: jsx(Badge, { tone: "success", children: t('Winner') }) }))] }) }));
+};
+
+export { CAMPAIGN_BACKGROUND, GVariantBadge };

package/dist/esm/shared/components/GVariantBadge/GVariantBadge.mjs

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, InlineStack, Text, Icon, Badge } from '@shopify/polaris';
+import { GVariantBadgeTone, GVariantBadgeSize } from './types.mjs';
+import { InfoIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { GTextLink } from '../GTextLink/GTextLink.mjs';
+import { GTooltip } from '../GTooltip/GTooltip.mjs';
+import '../GTooltip/components/GTooltipCard.mjs';
+import { GVariant } from './GVariant.mjs';
+
+const CAMPAIGN_BACKGROUND = {
+    ORIGIN: '#D5E5FF', //`var(--p-color-${CAMPAIGN_BACKGROUND.ORIGIN})`,
+    VARIANT: '#FDDBE2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
+    SUBDUED: '#F2F2F2', //`var(--p-color-${CAMPAIGN_BACKGROUND.VARIANT})`,
+};
+const GVariantBadge = ({ label, variant, tone, isShowWinner, size = GVariantBadgeSize.MD, labelProps, linkAction, tooltip, hideVariant = false, }) => {
+    const { t } = useTranslation();
+    const background = tone === GVariantBadgeTone.ACTIVE
+        ? CAMPAIGN_BACKGROUND.ORIGIN
+        : tone === GVariantBadgeTone.SUBDUED
+            ? CAMPAIGN_BACKGROUND.SUBDUED
+            : CAMPAIGN_BACKGROUND.VARIANT;
+    return (jsx(Box, { maxWidth: "100%", children: jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [!hideVariant && (jsx("div", { className: "Polaris-GVariantBadge", style: { backgroundColor: background, borderRadius: '100%' }, children: jsx(GVariant, { variant: variant, size: size, tone: tone }) })), label && (jsx(GTextLink, { linkAction: linkAction, children: jsx(Text, { as: "h2", variant: "headingMd", ...labelProps, truncate: true, children: label }) })), tooltip && (jsx(GTooltip, { ...tooltip, children: jsx(Icon, { source: InfoIcon }) })), isShowWinner && (jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: jsx(Badge, { tone: "success", children: t('Winner') }) }))] }) }));
+};
+
+export { CAMPAIGN_BACKGROUND, GVariantBadge };

package/dist/esm/shared/components/GVariantBadge/types.js

@@ -0,0 +1,23 @@
+var GVariantBadgeType;
+(function (GVariantBadgeType) {
+    GVariantBadgeType["ORIGIN"] = "ORIGIN";
+    GVariantBadgeType["VARIANT_B"] = "VARIANT_B";
+    GVariantBadgeType["VARIANT_C"] = "VARIANT_C";
+    GVariantBadgeType["VARIANT_D"] = "VARIANT_D";
+    GVariantBadgeType["VARIANT_E"] = "VARIANT_E";
+})(GVariantBadgeType || (GVariantBadgeType = {}));
+var GVariantBadgeSize;
+(function (GVariantBadgeSize) {
+    GVariantBadgeSize["XS"] = "xs";
+    GVariantBadgeSize["SM"] = "sm";
+    GVariantBadgeSize["MD"] = "md";
+    GVariantBadgeSize["LG"] = "lg";
+})(GVariantBadgeSize || (GVariantBadgeSize = {}));
+var GVariantBadgeTone;
+(function (GVariantBadgeTone) {
+    GVariantBadgeTone["ACTIVE"] = "active";
+    GVariantBadgeTone["SUBDUED"] = "subdued";
+    GVariantBadgeTone["INACTIVE"] = "inactive";
+})(GVariantBadgeTone || (GVariantBadgeTone = {}));
+
+export { GVariantBadgeSize, GVariantBadgeTone, GVariantBadgeType };

package/dist/esm/shared/components/GVariantBadge/types.mjs

@@ -0,0 +1,23 @@
+var GVariantBadgeType;
+(function (GVariantBadgeType) {
+    GVariantBadgeType["ORIGIN"] = "ORIGIN";
+    GVariantBadgeType["VARIANT_B"] = "VARIANT_B";
+    GVariantBadgeType["VARIANT_C"] = "VARIANT_C";
+    GVariantBadgeType["VARIANT_D"] = "VARIANT_D";
+    GVariantBadgeType["VARIANT_E"] = "VARIANT_E";
+})(GVariantBadgeType || (GVariantBadgeType = {}));
+var GVariantBadgeSize;
+(function (GVariantBadgeSize) {
+    GVariantBadgeSize["XS"] = "xs";
+    GVariantBadgeSize["SM"] = "sm";
+    GVariantBadgeSize["MD"] = "md";
+    GVariantBadgeSize["LG"] = "lg";
+})(GVariantBadgeSize || (GVariantBadgeSize = {}));
+var GVariantBadgeTone;
+(function (GVariantBadgeTone) {
+    GVariantBadgeTone["ACTIVE"] = "active";
+    GVariantBadgeTone["SUBDUED"] = "subdued";
+    GVariantBadgeTone["INACTIVE"] = "inactive";
+})(GVariantBadgeTone || (GVariantBadgeTone = {}));
+
+export { GVariantBadgeSize, GVariantBadgeTone, GVariantBadgeType };

package/dist/esm/shared/components/GViewBySelector/GViewBySelector.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Box, BlockStack, InlineStack, Text, Icon } from '@shopify/polaris';
+import { GActivatorPopover } from '../GActivatorPopover/GActivatorPopover.js';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { useState, useMemo } from 'react';
+
+const GViewBySelector = ({ activatorText, selected, options, minWidth, maxWidth, preferredAlignment = 'right', onSelect, }) => {
+    const [popoverActive, setPopoverActive] = useState(false);
+    const [itemHover, setItemHover] = useState(null);
+    const togglePopoverActive = () => setPopoverActive((prev) => !prev);
+    const selectedOption = useMemo(() => {
+        return options.find((item) => item.id === selected);
+    }, [options, selected]);
+    const activatorContent = useMemo(() => {
+        if (selectedOption) {
+            const content = selectedOption.title ?? selectedOption.content;
+            return activatorText ? `${activatorText}: ${content}` : content;
+        }
+        return activatorText;
+    }, [selectedOption, activatorText]);
+    const handleSelect = (value) => {
+        onSelect(value);
+        setPopoverActive(false);
+    };
+    return (jsx(Popover, { active: popoverActive, activator: jsx(GActivatorPopover, { active: popoverActive, content: activatorContent, textProps: { variant: 'bodySm' }, onClick: togglePopoverActive }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, padding: "200", children: jsx(BlockStack, { gap: "200", children: options.map((option) => {
+                    const isSelected = option.id === selected;
+                    const isHover = itemHover === option.id;
+                    const borderColor = isSelected
+                        ? 'input-border'
+                        : isHover
+                            ? 'border-hover'
+                            : 'transparent';
+                    return (jsx(Box, { padding: "150", borderWidth: "025", borderColor: borderColor, borderRadius: "100", children: jsx("div", { onClick: () => handleSelect(option.id), className: "cursor-pointer", onMouseEnter: () => setItemHover(option.id), onMouseLeave: () => setItemHover(null), children: jsxs(InlineStack, { gap: "300", align: "space-between", blockAlign: "center", wrap: false, children: [jsxs(InlineStack, { gap: "300", blockAlign: "center", wrap: false, children: [jsx("div", { className: "bg-surface-secondary flex items-center justify-center rounded-md min-w-[184px] h-[92px]", children: jsx("img", { src: option.icon, alt: option.content, className: "w-full h-full object-contain" }) }), jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "semibold", children: option.content }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: option.helpText })] })] }), isSelected && (jsx(Box, { children: jsx(Icon, { source: CheckIcon }) }))] }) }) }, option.id));
+                }) }) }) }));
+};
+
+export { GViewBySelector };

package/dist/esm/shared/components/GViewBySelector/GViewBySelector.mjs

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Box, BlockStack, InlineStack, Text, Icon } from '@shopify/polaris';
+import { GActivatorPopover } from '../GActivatorPopover/GActivatorPopover.mjs';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { useState, useMemo } from 'react';
+
+const GViewBySelector = ({ activatorText, selected, options, minWidth, maxWidth, preferredAlignment = 'right', onSelect, }) => {
+    const [popoverActive, setPopoverActive] = useState(false);
+    const [itemHover, setItemHover] = useState(null);
+    const togglePopoverActive = () => setPopoverActive((prev) => !prev);
+    const selectedOption = useMemo(() => {
+        return options.find((item) => item.id === selected);
+    }, [options, selected]);
+    const activatorContent = useMemo(() => {
+        if (selectedOption) {
+            const content = selectedOption.title ?? selectedOption.content;
+            return activatorText ? `${activatorText}: ${content}` : content;
+        }
+        return activatorText;
+    }, [selectedOption, activatorText]);
+    const handleSelect = (value) => {
+        onSelect(value);
+        setPopoverActive(false);
+    };
+    return (jsx(Popover, { active: popoverActive, activator: jsx(GActivatorPopover, { active: popoverActive, content: activatorContent, textProps: { variant: 'bodySm' }, onClick: togglePopoverActive }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, padding: "200", children: jsx(BlockStack, { gap: "200", children: options.map((option) => {
+                    const isSelected = option.id === selected;
+                    const isHover = itemHover === option.id;
+                    const borderColor = isSelected
+                        ? 'input-border'
+                        : isHover
+                            ? 'border-hover'
+                            : 'transparent';
+                    return (jsx(Box, { padding: "150", borderWidth: "025", borderColor: borderColor, borderRadius: "100", children: jsx("div", { onClick: () => handleSelect(option.id), className: "cursor-pointer", onMouseEnter: () => setItemHover(option.id), onMouseLeave: () => setItemHover(null), children: jsxs(InlineStack, { gap: "300", align: "space-between", blockAlign: "center", wrap: false, children: [jsxs(InlineStack, { gap: "300", blockAlign: "center", wrap: false, children: [jsx("div", { className: "bg-surface-secondary flex items-center justify-center rounded-md min-w-[184px] h-[92px]", children: jsx("img", { src: option.icon, alt: option.content, className: "w-full h-full object-contain" }) }), jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "semibold", children: option.content }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: option.helpText })] })] }), isSelected && (jsx(Box, { children: jsx(Icon, { source: CheckIcon }) }))] }) }) }, option.id));
+                }) }) }) }));
+};
+
+export { GViewBySelector };

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

@@ -21,3 +21,6 @@ export * from './GTextTruncated';
 export * from './GTextTooltip';
 export * from './GBoxCard';
 export * from './GMockDataTooltip';
+export * from './GDotInline';
+export * from './GSpinner';
+export * from './GModal';

package/dist/esm/shared/journey/common/JourneyContainer/components/JourneyContainer.d.ts

@@ -0,0 +1,10 @@
+import type { IEventsByDate } from '../../../ui/type';
+interface JourneyContainerProps {
+    orderId: string;
+    eventsByDate: IEventsByDate[];
+    hasMoreSteps: boolean;
+    isFetchingMoreSteps: boolean;
+    onLoadMore: () => void;
+}
+export declare const JourneyContainer: ({ orderId, eventsByDate, hasMoreSteps, isFetchingMoreSteps, onLoadMore, }: JourneyContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/shared/journey/common/JourneyContainer/components/JourneyContainer.js

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { JourneyTitle } from '../../../ui/JourneyTitle/components/JourneyTitle.js';
+import { JourneyGroup } from '../../../ui/JourneyGroup/JourneyGroup.js';
+import { useState, useRef, useEffect } from 'react';
+import { Scrollable } from '@shopify/polaris';
+import '../../../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../../../utils/dayjs.js';
+import '../../../../../utils/analytics.js';
+import '../../../../../types/template.js';
+import { isBrowser } from '../../../../../utils/is-browser.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 '../../../../../providers/ConvertMoneyProvider.js';
+import '../../../../components/GPagination/GPagination.js';
+import { useWindowSize } from '../../../../../hooks/publish/useWindowSize.js';
+import '@shopify/polaris-icons';
+import '../../../../components/GTooltip/components/GTooltipCard.js';
+import '../../../../components/GDiv/GDiv.js';
+import 'react-i18next';
+import { GBox } from '../../../../components/GBox/GBox.js';
+import '../../../../components/GFeatureLocked/constants.js';
+import '../../../../components/GFeatureLocked/types.js';
+import '../../../../charts/components/GPolarisViz/hooks/useResizeObserver.js';
+
+const JourneyContainer = ({ orderId, eventsByDate, hasMoreSteps, isFetchingMoreSteps, onLoadMore, }) => {
+    const firstEventsByDate = eventsByDate[0];
+    const { isMobileView } = useWindowSize();
+    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() || !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: "pb-5", style: { maxHeight: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, 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 }) })] }));
+};
+
+export { JourneyContainer };

package/dist/esm/shared/journey/common/JourneyContainer/components/JourneyContainer.mjs

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { JourneyTitle } from '../../../ui/JourneyTitle/components/JourneyTitle.mjs';
+import { JourneyGroup } from '../../../ui/JourneyGroup/JourneyGroup.mjs';
+import { useState, useRef, useEffect } from 'react';
+import { Scrollable } from '@shopify/polaris';
+import '../../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../../utils/dayjs.mjs';
+import '../../../../../utils/analytics.mjs';
+import '../../../../../types/template.mjs';
+import { isBrowser } from '../../../../../utils/is-browser.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 '../../../../../providers/ConvertMoneyProvider.mjs';
+import '../../../../components/GPagination/GPagination.mjs';
+import { useWindowSize } from '../../../../../hooks/publish/useWindowSize.mjs';
+import '@shopify/polaris-icons';
+import '../../../../components/GTooltip/components/GTooltipCard.mjs';
+import '../../../../components/GDiv/GDiv.mjs';
+import 'react-i18next';
+import { GBox } from '../../../../components/GBox/GBox.mjs';
+import '../../../../components/GFeatureLocked/constants.mjs';
+import '../../../../components/GFeatureLocked/types.mjs';
+import '../../../../charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+
+const JourneyContainer = ({ orderId, eventsByDate, hasMoreSteps, isFetchingMoreSteps, onLoadMore, }) => {
+    const firstEventsByDate = eventsByDate[0];
+    const { isMobileView } = useWindowSize();
+    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() || !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: "pb-5", style: { maxHeight: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, 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 }) })] }));
+};
+
+export { JourneyContainer };

package/dist/esm/shared/journey/common/JourneyContainer/components/JourneyTimeline.d.ts

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

package/dist/esm/shared/journey/common/JourneyContainer/components/JourneyTimeline.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { cls } from '../../../../../utils/cls.js';
+import '../../../../../utils/dayjs.js';
+import '../../../../../utils/analytics.js';
+import '../../../../../types/template.js';
+
+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 } }));
+};
+
+export { JourneyTimeline };

package/dist/esm/shared/journey/common/JourneyContainer/components/JourneyTimeline.mjs

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { cls } from '../../../../../utils/cls.mjs';
+import '../../../../../utils/dayjs.mjs';
+import '../../../../../utils/analytics.mjs';
+import '../../../../../types/template.mjs';
+
+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 } }));
+};
+
+export { JourneyTimeline };

package/dist/esm/shared/journey/common/JourneyContainer/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './JourneyContainer';
+export * from './JourneyTimeline';

package/dist/esm/shared/journey/common/index.d.ts

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

package/dist/esm/shared/journey/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './common';

package/dist/esm/shared/journey/ui/JourneyEvents/components/AcceptedPostPurchaseOffer/AcceptedPostPurchaseOffer.d.ts

@@ -0,0 +1,10 @@
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { ILineItem } from '../../../../../../components/OrderAnalytic/types';
+import type { IJourneyItemProps } from '../../../type';
+export interface IAcceptedPostPurchaseOfferJourneyEvent extends IBaseJourneyEvent {
+    eventType: EJourneyEvent.CHECKOUT_COMPLETED;
+    lineItems?: ILineItem[];
+}
+type AcceptedPostPurchaseOfferProps = IJourneyItemProps<IAcceptedPostPurchaseOfferJourneyEvent>;
+export declare const AcceptedPostPurchaseOffer: React.FC<AcceptedPostPurchaseOfferProps>;
+export {};

package/dist/esm/shared/journey/ui/JourneyEvents/components/AcceptedPostPurchaseOffer/index.d.ts

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

package/dist/esm/shared/journey/ui/JourneyEvents/components/CheckoutCompleted/CheckoutCompleted.d.ts

@@ -0,0 +1,9 @@
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { ILineItem } from '../../../../../../components/OrderAnalytic/types';
+import type { IJourneyItemProps } from '../../../type';
+export interface ICheckoutCompletedJourneyEvent extends IBaseJourneyEvent {
+    eventType: EJourneyEvent.CHECKOUT_COMPLETED;
+    lineItems?: ILineItem[];
+}
+export type CheckoutCompletedProps = IJourneyItemProps<ICheckoutCompletedJourneyEvent>;
+export declare const CheckoutCompleted: React.FC<CheckoutCompletedProps>;