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

package/src/components/CurrencySelector/CurrencySelector.tsx

@@ -1,127 +0,0 @@
-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/CurrencySelector/index.ts

@@ -1,2 +0,0 @@
-export { CurrencySelector } from './CurrencySelector';
-export type { CurrencySelectorProps } from './CurrencySelector';

package/src/components/GModalOrderJourney/GModalOrderJourney.tsx

@@ -1,131 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

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

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

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

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

@@ -1,25 +0,0 @@
-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

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

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

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

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

@@ -1,75 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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/GSelectableMetricChartCard/index.ts

@@ -1,2 +0,0 @@
-export { GSelectableMetricChartCard } from './GSelectableMetricChartCard';
-export type { IProps as IGSelectableMetricChartCardProps } from './GSelectableMetricChartCard';

package/src/components/GTimePicker/GTimePicker.tsx

@@ -1,31 +0,0 @@
-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>
-  );
-};