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

package/src/components/CurrencySelector/CurrencySelector.tsx

@@ -0,0 +1,127 @@
+import type { GSelectorOption, GSelectorProps } from '@/shared';
+import type { CurrencyCode } from '@/types';
+
+import { GI18NText, GSelector, GTextLink } from '@/shared';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { DEFAULT_CURRENCY_ANALYTIC } from '@/constants';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { Box, Icon, Text } from '@shopify/polaris';
+import { useTranslation } from 'react-i18next';
+import { sortByConditions } from '@/utils';
+
+const EXCHANGE_RATE_HELP_URL =
+  'https://help.shopify.com/en/manual/international/pricing/exchange-rates#auto-convert';
+
+export interface CurrencySelectorProps {
+  currencies?: CurrencyCode[];
+  selected?: CurrencyCode;
+  preferredAlignment?: GSelectorProps['preferredAlignment'];
+  activatorText?: string;
+  onSelect?: (value: CurrencyCode) => void;
+}
+
+export const CurrencySelector = ({
+  currencies,
+  selected,
+  preferredAlignment = 'left',
+  activatorText,
+  onSelect,
+}: CurrencySelectorProps) => {
+  const { t } = useTranslation();
+
+  const onSelectRef = useRef(onSelect);
+
+  const handleSelection = useCallback((value: CurrencyCode) => {
+    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: GSelectorOption[] = useMemo(() => {
+    return actionItems.map((option) => ({
+      id: option.id,
+      content: option.content,
+      onAction: () => handleSelection(option.id),
+      active: option.id === selected,
+      suffix: option.id === selected && <Icon source={CheckIcon} tone="success" />,
+      helpText: option.id === DEFAULT_CURRENCY_ANALYTIC && (
+        <Text as="p" fontWeight="semibold">
+          {t('Default')}
+        </Text>
+      ),
+    }));
+  }, [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 (
+    <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 as CurrencyCode)}
+      activatorText={activatorText ?? t('Currency')}
+      maxWidth="225px"
+      preferredAlignment={preferredAlignment}
+      helpText={
+        <Box
+          padding="200"
+          paddingBlockStart="300"
+          paddingBlockEnd="300"
+          borderColor="border-tertiary"
+          background={'bg'}
+        >
+          <GI18NText
+            as="p"
+            variant="bodyMd"
+            transformers={{
+              1: (text) => (
+                <GTextLink
+                  key={text + 'text-link'}
+                  linkAction={{
+                    url: EXCHANGE_RATE_HELP_URL,
+                    target: '_blank',
+                  }}
+                >
+                  {text}
+                </GTextLink>
+              ),
+            }}
+          >
+            {t("This will follow Shopify's current exchange rate. [1]Read more[]")}
+          </GI18NText>
+        </Box>
+      }
+    ></GSelector>
+  );
+};

package/src/components/GModalOrderJourney/GModalOrderJourney.tsx

@@ -0,0 +1,131 @@
+import type { IOrderJourneyItem, IOrderPageAnalytic, IReportCampaign } from '@/components/OrderAnalytic/types';
+import type { IEventsByDate, IJourneyEvent } from '@/shared/journey/ui/type';
+import type { EAnalyticMode } from '@/types';
+
+import { EReportSource } from '@/components/OrderAnalytic/types';
+import { usePreventBodyScroll } from '@/hooks';
+import { GModal } from '@/shared';
+import { JourneyContainer } from '@/shared/journey/common';
+import { formatDateBy } from '@/utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { OrderJourneySkeleton } from './components';
+import { OrderJourneyProvider } from './context';
+import { sliceJourneyItems } from './utils';
+
+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 const GModalOrderJourney = ({
+  open,
+  onClose,
+  title,
+  orderId,
+  gxId,
+  journeyItems,
+  isLoading = false,
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  fetchNextPage,
+  reportCampaign,
+  pageAnalytic,
+  mode,
+  journeySource,
+  onViewOrderDetails,
+}: GModalOrderJourneyProps) => {
+  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: IEventsByDate[] = useMemo(() => {
+    const grouped = new Map<string, IJourneyEvent[]>();
+
+    displayedItems?.forEach((journeyItem) => {
+      const dateKey = formatDateBy('MMMM D', journeyItem.date);
+
+      if (!grouped.has(dateKey)) grouped.set(dateKey, []);
+      grouped.get(dateKey)?.push(journeyItem as IJourneyEvent);
+    });
+
+    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 (
+    <GModal open={open} title={title} onClose={onClose}>
+      <OrderJourneyProvider value={{ orderId, gxId, onViewOrderDetails }}>
+        {isLoading ? (
+          <OrderJourneySkeleton />
+        ) : (
+          <JourneyContainer
+            orderId={orderId}
+            eventsByDate={eventsByDate}
+            hasMoreSteps={hasMoreSteps}
+            isFetchingMoreSteps={isFetchingNextPage}
+            onLoadMore={handleLoadMore}
+          />
+        )}
+      </OrderJourneyProvider>
+    </GModal>
+  );
+};

package/src/components/GModalOrderJourney/components/OrderJourneySkeleton.tsx

@@ -0,0 +1,93 @@
+import { Box, InlineStack, Scrollable, SkeletonBodyText, SkeletonDisplayText } from '@shopify/polaris';
+import { useWindowSize } from '@/hooks';
+import { GBox } from '@/shared';
+
+export const OrderJourneySkeleton = () => {
+  const { isMobileView } = useWindowSize();
+
+  return (
+    <Scrollable
+      scrollbarWidth="thin"
+      vertical
+      horizontal
+      className="pb-5"
+      style={{ height: isMobileView ? '100vh' : 'calc(100vh - 120px)' }}
+    >
+      {/* Sticky Header */}
+      <GBox position="sticky" insetBlockStart="0" zIndex="10" background="bg-fill">
+        <Box paddingBlock="300" paddingInline="400" position="relative">
+          <InlineStack align="space-between" gap="100">
+            <InlineStack gap="400">
+              {/* Date Badge Skeleton */}
+              <div className="bg-surface-secondary rounded-md px-3 py-1.5">
+                <div className="w-24">
+                  <SkeletonBodyText lines={1} />
+                </div>
+              </div>
+
+              {/* Order ID Badge Skeleton */}
+              <div className="bg-surface-secondary rounded-md px-3 py-1.5">
+                <div className="w-40">
+                  <SkeletonBodyText lines={1} />
+                </div>
+              </div>
+            </InlineStack>
+          </InlineStack>
+
+          {/* Title Line */}
+          <div className="absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" />
+        </Box>
+      </GBox>
+
+      {/* Journey Events */}
+      <div className="relative mt-4">
+        {/* Timeline vertical line */}
+        <div className="w-[2px] absolute top-4 bottom-4 bg-[#F3F3F3] -z-[1]" style={{ left: 110 }} />
+
+        {/* Event Items */}
+        {Array.from({ length: 8 }).map((_, index) => (
+          <JourneyEventSkeleton key={index} isLast={index === 7} />
+        ))}
+      </div>
+    </Scrollable>
+  );
+};
+
+const JourneyEventSkeleton = ({ isLast }: { isLast?: boolean }) => {
+  return (
+    <Box paddingInlineStart="600">
+      <InlineStack blockAlign="start" gap="400" wrap={false}>
+        {/* Time Skeleton */}
+        <div className="w-12 pt-1">
+          <SkeletonBodyText lines={1} />
+        </div>
+
+        {/* Event Marker Icon Skeleton */}
+        <div className="shrink-0 mt-0.5">
+          <div className="w-7 h-7 bg-border-secondary rounded-full animate-pulse" />
+        </div>
+
+        {/* Event Details Skeleton */}
+        <Box paddingBlockEnd="400" width="100%">
+          {/* Title Skeleton */}
+          <div className="mb-2">
+            <SkeletonDisplayText size="small" />
+          </div>
+
+          {/* Subtitle/Details Skeleton - Random variations for more realistic look */}
+          {/* TODO: switch to deterministic lines (e.g. index % 2) to fix SSR hydration mismatch / layout flicker.
+              Hold off until gemx app is synced to this SDK version, otherwise skeleton UI diverges between gemx app and GP. */}
+          {!isLast ? (
+            <div className="max-w-[70%]">
+              <SkeletonBodyText lines={Math.random() > 0.5 ? 1 : 2} />
+            </div>
+          ) : (
+            <div className="max-w-[40%]">
+              <SkeletonBodyText lines={1} />
+            </div>
+          )}
+        </Box>
+      </InlineStack>
+    </Box>
+  );
+};

package/src/components/GModalOrderJourney/components/index.ts

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

package/src/components/GModalOrderJourney/context/OrderJourneyContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+export interface OrderJourneyContextValue {
+  orderId: string;
+  gxId?: string;
+  onViewOrderDetails?: (orderId: string) => void;
+}
+
+const OrderJourneyContext = createContext<OrderJourneyContextValue | undefined>(undefined);
+
+export const OrderJourneyProvider = OrderJourneyContext.Provider;
+
+export const useOrderJourneyContext = (): OrderJourneyContextValue => {
+  const context = useContext(OrderJourneyContext);
+  if (!context) throw new Error('useOrderJourneyContext must be used within OrderJourneyProvider');
+  return context;
+};

package/src/components/GModalOrderJourney/context/index.ts

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

package/src/components/GModalOrderJourney/hooks/index.ts

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

package/src/components/GModalOrderJourney/hooks/useGModalOrderJourney.ts

@@ -0,0 +1,25 @@
+import type { GModalOrderJourneyInitialValues } from '../types';
+
+import { useCallback, useState } from 'react';
+
+export const useGModalOrderJourney = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialValues, setInitialValues] = useState<GModalOrderJourneyInitialValues | null>(null);
+
+  const handleOpenModalOrderJourney = useCallback((data: GModalOrderJourneyInitialValues) => {
+    setInitialValues(data);
+    setIsOpen(true);
+  }, []);
+
+  const handleCloseModalOrderJourney = useCallback(() => {
+    setIsOpen(false);
+    setInitialValues(null);
+  }, []);
+
+  return {
+    isOpen,
+    initialValues,
+    handleOpenModalOrderJourney,
+    handleCloseModalOrderJourney,
+  };
+};

package/src/components/GModalOrderJourney/index.ts

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

package/src/components/GModalOrderJourney/types/index.ts

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

package/src/components/GModalOrderJourney/utils/index.ts

@@ -0,0 +1,75 @@
+import type { IOrderJourneyItem, IOrderPageAnalytic } from '@/components/OrderAnalytic/types';
+
+import { EReportSource } from '@/components/OrderAnalytic/types';
+import { findLastIndex } from '@/utils';
+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 const sliceJourneyItems = ({
+  journeyItems,
+  mode,
+  source,
+  filteredCampaignId,
+  pageAnalytic,
+}: SliceJourneyItemsParams): IOrderJourneyItem[] => {
+  if (mode === EAnalyticMode.FIRST_SESSION) return journeyItems;
+
+  const isCampaignVariant = ({ campaignGroupID = '', campaignID = '' }: IOrderJourneyItem) =>
+    !isCampaignOfAnother({ campaignGroupID: campaignGroupID ?? '', campaignID: campaignID ?? '', filteredCampaignId });
+  const isMatchingPage = ({ locationPath = '' }: IOrderJourneyItem) => locationPath === pageAnalytic?.path;
+
+  const sliceFromIndex = (index: number) => (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;
+};
+
+export const getEventCampaignIdByType = ({
+  campaignGroupID,
+  campaignID,
+}: {
+  campaignGroupID: string;
+  campaignID: string;
+}) => {
+  return campaignGroupID !== '0' ? campaignGroupID : campaignID;
+};
+
+export const isCampaignOfAnother = ({
+  campaignGroupID,
+  campaignID,
+  filteredCampaignId,
+}: {
+  campaignGroupID: string;
+  campaignID: string;
+  filteredCampaignId?: string;
+}) => {
+  const eventCampaignIdByType = getEventCampaignIdByType({ campaignGroupID, campaignID });
+  const isEventOfAnotherCampaign = filteredCampaignId && eventCampaignIdByType !== filteredCampaignId;
+
+  return isEventOfAnotherCampaign;
+};

package/src/components/GSelectableMetricChartCard/GSelectableMetricChartCard.tsx

@@ -0,0 +1,83 @@
+import type { ColumnTypesMap } from '@/core/gemxql';
+import type { AllChartsDataMap, EMetricKey, IMetricCardItem } from '@/types';
+import type { ReactElement } from 'react';
+
+import { DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL } from '@/constants';
+import { Card } from '@shopify/polaris';
+import { useMemo, useState } from 'react';
+import { MetricChart } from '../common/chart';
+import { MetricChartTab } from './MetricChartTab';
+
+export interface IProps {
+  metricInfo: IMetricCardItem[];
+  dataChart: AllChartsDataMap;
+  defaultActiveTab?: EMetricKey;
+  isLoading?: boolean;
+  isEmptyMetricData?: boolean;
+  hideComparison?: boolean;
+  currentPeriodLabel?: string;
+  previousPeriodLabel?: string;
+  columnTypes?: ColumnTypesMap;
+  isMockData?: boolean;
+  onclickMetric?: (key: string) => void;
+}
+
+export const GSelectableMetricChartCard = ({
+  metricInfo,
+  dataChart,
+  defaultActiveTab,
+  isLoading,
+  isEmptyMetricData,
+  hideComparison,
+  currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL,
+  previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL,
+  columnTypes,
+  isMockData,
+  onclickMetric,
+}: IProps): ReactElement => {
+  const [activeTab, setActiveTab] = useState<EMetricKey | undefined>(defaultActiveTab);
+
+  const lineChartData = useMemo(() => {
+    const chartData = activeTab ? dataChart[activeTab] : undefined;
+    if (!chartData) return [];
+
+    const currentSeries = { name: currentPeriodLabel, data: chartData.current };
+    if (hideComparison) return [currentSeries];
+
+    return [currentSeries, { name: previousPeriodLabel, data: chartData.previous, isComparison: true }];
+  }, [activeTab, dataChart, hideComparison, currentPeriodLabel, previousPeriodLabel]);
+
+  return (
+    <Card>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${metricInfo.length}, 1fr)`,
+          gap: '16px',
+          marginBottom: '16px',
+        }}
+      >
+        {metricInfo.map((item) => (
+          <MetricChartTab
+            key={item.key}
+            item={item}
+            isActive={activeTab === item.key}
+            isLoading={isLoading}
+            hideComparison={hideComparison}
+            isMockData={isMockData}
+            onSelect={setActiveTab}
+            onClickTitle={onclickMetric}
+          />
+        ))}
+      </div>
+
+      <MetricChart
+        lineChartData={lineChartData}
+        isLoading={isLoading}
+        isEmptyMetricData={isEmptyMetricData}
+        metricKey={activeTab}
+        columnTypes={columnTypes}
+      />
+    </Card>
+  );
+};

package/src/components/GSelectableMetricChartCard/MetricChartTab.tsx

@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import type { EMetricKey, IMetricCardItem } from '../../types';
+
+import { Box } from '@shopify/polaris';
+import { useState } from 'react';
+import { MetricInfoBlock } from '../common/chart';
+
+export interface IProps {
+  item: IMetricCardItem;
+  isActive: boolean;
+  isLoading?: boolean;
+  hideComparison?: boolean;
+  isMockData?: boolean;
+  onSelect: (key: EMetricKey) => void;
+  onClickTitle?: (key: string) => void;
+}
+
+export const MetricChartTab = ({
+  item,
+  isActive,
+  isLoading,
+  hideComparison,
+  isMockData,
+  onSelect,
+  onClickTitle,
+}: IProps): ReactElement => {
+  const [isHovered, setIsHovered] = useState(false);
+  const isHighlighted = isActive || isHovered;
+
+  return (
+    <div
+      className="w-full cursor-pointer overflow-hidden"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => onSelect(item.key)}
+    >
+      <Box
+        paddingBlock="150"
+        paddingInline="300"
+        borderRadius="200"
+        background={isHighlighted ? 'bg-surface-active' : undefined}
+      >
+        <MetricInfoBlock
+          item={item}
+          isHovered={isHovered}
+          isLoading={isLoading}
+          hideComparison={hideComparison}
+          titleVariant="headingSm"
+          titleFontWeight="semibold"
+          isMockData={isMockData}
+          onClickTitle={onClickTitle}
+        />
+      </Box>
+    </div>
+  );
+};

package/src/components/GTimePicker/GTimePicker.tsx

@@ -0,0 +1,31 @@
+import type { GButtonProps } from '@/shared/components/GButton';
+import type { ButtonProps, PopoverProps } from '@shopify/polaris';
+import type { IDateTimeFilterAddition } from './components';
+import type { DateTimeFilter } from './types';
+
+import { CompareTimePicker } from './components/CompareTimePicker';
+import { MainTimePicker } from './components/MainTimePicker';
+import { InlineStack } from '@shopify/polaris';
+
+export interface GTimePickerProps {
+  rangeAddition?: IDateTimeFilterAddition;
+  popoverProps?: Partial<PopoverProps>;
+  isCompare?: boolean;
+  activator?: (props: { onClick: () => void; value?: string }) => React.ReactElement;
+  onApply?: (value: DateTimeFilter) => void;
+  activatorProps?: Pick<ButtonProps, 'disabled' | 'loading' | 'size'>;
+  actionProps?: GButtonProps;
+}
+
+export const GTimePicker: React.FC<GTimePickerProps> = (props) => {
+  const { isCompare, ...timePickerProps } = props;
+
+  return (
+    <InlineStack gap="200">
+      <MainTimePicker {...timePickerProps} />
+      {isCompare && (
+        <CompareTimePicker rangeAddition={timePickerProps.rangeAddition} popoverProps={timePickerProps.popoverProps} />
+      )}
+    </InlineStack>
+  );
+};