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

package/src/components/GTimePicker/components/BaseTimePicker.tsx

@@ -1,249 +0,0 @@
-import type { GTimePickerProps } from '../GTimePicker';
-import type { IDateTimeFilterAddition } from '../components';
-import type { IDateRangeState } from '../hooks';
-import type { DateTimeFilter } from '../types';
-
-import {
-  BlockStack,
-  Box,
-  Button,
-  ButtonGroup,
-  DatePicker,
-  InlineGrid,
-  InlineStack,
-  Popover,
-  Scrollable,
-  useBreakpoints,
-} from '@shopify/polaris';
-import { useCompareDateTimePicker } from '../hooks/useCompareDateTimePicker';
-import { GBlockCenter } from '@/shared/components/GBlockCenter';
-import { dayjs, dayjsTzToDate } from '@/utils';
-import { DateTimeFilterInputs } from './DateTimeFilterInputs';
-import { useDateTimePicker } from '../hooks/useDateTimePicker';
-import { GTooltip } from '@/shared/components/GTooltip';
-import { GButton } from '@/shared/components/GButton';
-import { formatDateTimeRange } from '../helpers';
-import { DateTimeFilters } from './DateTimeFilters';
-import { CalendarIcon } from '@shopify/polaris-icons';
-import { useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export interface BaseTimePickerProps extends Omit<GTimePickerProps, 'isCompare'> {
-  dateTimeFilters?: DateTimeFilter[];
-  rangeAddition?: IDateTimeFilterAddition;
-  isCompare?: boolean;
-  buttonValue?: string;
-}
-
-export const BaseTimePicker: React.FC<BaseTimePickerProps> = (props) => {
-  const {
-    dateTimeFilters,
-    rangeAddition,
-    popoverProps,
-    activatorProps,
-    actionProps,
-    isCompare,
-    buttonValue,
-    activator,
-  } = props;
-
-  const initialPicked = rangeAddition?.initialPicked;
-  const ranges: DateTimeFilter[] = [...(dateTimeFilters || []), ...(rangeAddition?.rangers || [])];
-
-  const useHookDateTimePicker = isCompare ? useCompareDateTimePicker : useDateTimePicker;
-
-  const { month, year, dateRange, apply, cancel, onMonthChange, onCalendarChange, onChange } = useHookDateTimePicker({
-    ranges,
-    initialPicked,
-    onApply: props.onApply,
-  });
-
-  const { t } = useTranslation();
-  const { mdDown, lgUp } = useBreakpoints();
-
-  const shouldShowMultiMonth = lgUp;
-
-  const rawTooltipContent = useMemo(() => {
-    // Only show tooltip when selecting Period (isVersion)
-    if (!dateRange.isVersion || !dateRange.since || !dateRange.until) return;
-    return formatDateTimeRange({
-      since: dateRange.since,
-      until: dateRange.until,
-      isShowNow: dateRange.isCurrentVersion,
-    });
-  }, [dateRange.since, dateRange.until, dateRange.isVersion, dateRange.isCurrentVersion]);
-
-  const [popoverActive, setPopoverActive] = useState(false);
-
-  // Freeze tooltip content while popover is open to prevent button remount (focus/CSS loss)
-  const datePickerRef = useRef(null);
-  const tooltipContentRef = useRef(rawTooltipContent);
-
-  if (!popoverActive) tooltipContentRef.current = rawTooltipContent;
-  const tooltipContent = tooltipContentRef.current;
-
-  //@ts-ignore
-  function nodeContainsDescendant(rootNode, descendant) {
-    if (rootNode === descendant) {
-      return true;
-    }
-    let parent = descendant.parentNode;
-    while (parent != null) {
-      if (parent === rootNode) {
-        return true;
-      }
-      parent = parent.parentNode;
-    }
-    return false;
-  }
-
-  //@ts-ignore
-  function isNodeWithinPopover(node) {
-    return datePickerRef?.current ? nodeContainsDescendant(datePickerRef.current, node) : false;
-  }
-  //@ts-ignore
-  function handleInputBlur({ relatedTarget }) {
-    const isRelatedTargetWithinPopover = relatedTarget != null && isNodeWithinPopover(relatedTarget);
-    // If focus moves from the TextField to the Popover
-    // we don't want to close the popover
-    if (isRelatedTargetWithinPopover) {
-      return;
-    }
-    setPopoverActive(false);
-  }
-
-  function applyFunc() {
-    apply();
-    setPopoverActive(false);
-  }
-  function cancelFunc() {
-    cancel();
-    setPopoverActive(false);
-  }
-
-  const handleTogglePopover = () => {
-    if (isCompare) {
-      return;
-    }
-    setPopoverActive(!popoverActive);
-  };
-
-  const onChangeDateTimeFilter = (data: IDateRangeState) => {
-    onCalendarChange(data);
-    onChange(data);
-  };
-
-  return (
-    <Popover
-      active={popoverActive}
-      autofocusTarget="none"
-      preferredAlignment="right"
-      preferredPosition="below"
-      fluidContent
-      sectioned={false}
-      fullHeight
-      activator={
-        <GBlockCenter height="100%" minHeight="28px" align="center">
-          <GTooltip content={tooltipContent} maxWidth={activator ? 'large' : 'extra-large'}>
-            <Box>
-              {activator ? (
-                activator({ onClick: handleTogglePopover, value: buttonValue })
-              ) : (
-                <Button
-                  size="slim"
-                  icon={!isCompare ? CalendarIcon : undefined}
-                  onClick={handleTogglePopover}
-                  {...activatorProps}
-                >
-                  {buttonValue}
-                </Button>
-              )}
-            </Box>
-          </GTooltip>
-        </GBlockCenter>
-      }
-      onClose={cancelFunc}
-      {...popoverProps}
-    >
-      <Scrollable vertical scrollbarWidth="thin" className="max-w-[100%]">
-        <Popover.Pane fixed>
-          <div ref={datePickerRef}>
-            <InlineGrid
-              columns={{
-                xs: '1fr',
-                md: 'max-content max-content',
-              }}
-              gap="0"
-            >
-              <DateTimeFilters
-                setDateTimePicked={onChangeDateTimeFilter}
-                dateTimePicked={dateRange}
-                rangeAddition={rangeAddition}
-                allRanges={ranges}
-                isCompare={isCompare}
-              />
-
-              <Box
-                padding="400"
-                maxWidth={mdDown ? '320px' : '516px'}
-                borderInlineStartWidth="025"
-                borderColor="border-secondary"
-              >
-                <BlockStack gap="400">
-                  <DateTimeFilterInputs
-                    setDateTimePicked={onCalendarChange}
-                    dateRange={dateRange}
-                    onBlur={() => handleInputBlur}
-                  />
-
-                  <div>
-                    <DatePicker
-                      month={month}
-                      year={year}
-                      selected={
-                        !dateRange.since && !dateRange.until
-                          ? undefined
-                          : {
-                              start: dayjs(dateRange.since).toDate(),
-                              end: dayjs(dateRange.until).toDate(),
-                            }
-                      }
-                      onMonthChange={onMonthChange}
-                      onChange={onCalendarChange}
-                      multiMonth={shouldShowMultiMonth}
-                      allowRange
-                      disableDatesAfter={dayjsTzToDate()}
-                    />
-                  </div>
-
-                  {actionProps && (
-                    <GButton
-                      {...actionProps}
-                      onClick={() => {
-                        setPopoverActive(false);
-                        actionProps.onClick?.();
-                      }}
-                    />
-                  )}
-                </BlockStack>
-              </Box>
-            </InlineGrid>
-          </div>
-        </Popover.Pane>
-
-        <Popover.Pane fixed>
-          <Box padding="400" borderBlockStartWidth="025" borderColor="border-secondary">
-            <InlineStack align="end" gap="200">
-              <ButtonGroup>
-                <Button onClick={cancelFunc}>{t('Cancel')}</Button>
-                <Button variant="primary" onClick={applyFunc}>
-                  {t('Apply')}
-                </Button>
-              </ButtonGroup>
-            </InlineStack>
-          </Box>
-        </Popover.Pane>
-      </Scrollable>
-    </Popover>
-  );
-};

package/src/components/GTimePicker/components/CompareTimePicker.tsx

@@ -1,41 +0,0 @@
-import type { BaseTimePickerProps } from './BaseTimePicker';
-import type { DateTimeFilter } from '../types';
-
-import { CompareDateTimePickerAlias, DATE_TIME_COMPARISON_FILTERS } from '../constants';
-import { useCompareDateTimePicker } from '../hooks/useCompareDateTimePicker';
-import { getDateRangeTitle } from '../helpers';
-import { BaseTimePicker } from './BaseTimePicker';
-import { useTranslation } from 'react-i18next';
-import { useMemo } from 'react';
-
-interface CompareTimePickerProps extends Pick<BaseTimePickerProps, 'rangeAddition' | 'popoverProps'> {}
-export const CompareTimePicker: React.FC<CompareTimePickerProps> = (props) => {
-  const { rangeAddition, popoverProps } = props;
-
-  const initialPicked = rangeAddition?.initialPicked;
-  const dateTimeFilters = DATE_TIME_COMPARISON_FILTERS;
-  const ranges: DateTimeFilter[] = [...dateTimeFilters, ...(rangeAddition?.rangers || [])];
-
-  const { t } = useTranslation();
-  const { compareDateTimePicked } = useCompareDateTimePicker({ ranges, initialPicked });
-
-  const buttonValue = useMemo(() => {
-    if (compareDateTimePicked.alias === CompareDateTimePickerAlias.NO_COMPARISON) {
-      return t('No comparison');
-    }
-
-    return t('Compare to: {{value}}', {
-      value: getDateRangeTitle(compareDateTimePicked.since, compareDateTimePicked.until),
-    });
-  }, [compareDateTimePicked, t]);
-
-  return (
-    <BaseTimePicker
-      dateTimeFilters={dateTimeFilters}
-      rangeAddition={rangeAddition}
-      popoverProps={popoverProps}
-      isCompare
-      buttonValue={buttonValue}
-    />
-  );
-};

package/src/components/GTimePicker/components/DateTimeFilterAddition.tsx

@@ -1,84 +0,0 @@
-import type { DateTimeFiltersProps } from './DateTimeFilters';
-
-import { Box, Collapsible, InlineStack, Text, Icon } from '@shopify/polaris';
-import { ChevronUpIcon, ChevronDownIcon } from '@shopify/polaris-icons';
-import { GOptionList } from '@/shared/components/GOptionList';
-import { dayjsTz } from '@/utils';
-import { GDiv } from '@/shared/components/GDiv';
-import { useToggle } from '@/hooks/useToggle';
-import { cls } from '@/utils';
-
-export function DateTimeFilterAddition(props: DateTimeFiltersProps) {
-  const { setDateTimePicked, dateTimePicked, rangeAddition, allRanges } = props;
-  const { value: isExpanded, toggle: toggleExpanded } = useToggle(true);
-
-  const rangesAdditions = rangeAddition?.rangers || [];
-
-  const handleChangeFilterByOption = (value: string[]) => {
-    const alias = value[0];
-    const result = allRanges.find((range) => range.alias === alias) || allRanges[0];
-
-    setDateTimePicked({
-      start: dayjsTz(result?.since).toDate(),
-      end: dayjsTz(result?.until).toDate(),
-      alias: result?.alias,
-    });
-  };
-
-  const options = rangesAdditions.map((range) => {
-    const selected = dateTimePicked.alias === range.alias;
-    return {
-      value: range.alias,
-      label: (
-        <Text as="span" truncate>
-          <Text as="span" variant={'bodyMd'} fontWeight={selected ? 'semibold' : 'regular'}>
-            {range.title}
-          </Text>
-          {range.description && (
-            <>
-              {' '}
-              <Text as="span" variant={'bodyXs'} fontWeight={'regular'} tone="subdued">
-                {`(${range.description})`}
-              </Text>
-            </>
-          )}
-        </Text>
-      ),
-    };
-  });
-
-  if (!rangeAddition || rangesAdditions.length === 0) return;
-
-  return (
-    <Box borderBlockEndWidth={'025'} borderColor={'border'} paddingBlock={'200'}>
-      <div className="px-1.5">
-        <GDiv
-          onClick={toggleExpanded}
-          aria-expanded={isExpanded}
-          className={cls('hover:bg-surface-hover cursor-pointer rounded-lg p-1.5')}
-        >
-          <InlineStack align="space-between" blockAlign="center">
-            <Text as="span" variant="bodyMd">
-              {rangeAddition.title}
-            </Text>
-            <Box>
-              <Icon source={isExpanded ? ChevronUpIcon : ChevronDownIcon} />
-            </Box>
-          </InlineStack>
-        </GDiv>
-      </div>
-
-      <Collapsible
-        open={isExpanded}
-        id="date-time-filter-periods-collapsible"
-        transition={{ duration: '200ms', timingFunction: 'ease-in-out' }}
-      >
-        <GOptionList
-          options={options}
-          selected={dateTimePicked ? [dateTimePicked.alias] : []}
-          onChange={handleChangeFilterByOption}
-        />
-      </Collapsible>
-    </Box>
-  );
-}

package/src/components/GTimePicker/components/DateTimeFilterInputs.tsx

@@ -1,124 +0,0 @@
-import type { IDateRangeState } from '../hooks';
-import type { DateTimeFilter } from '../types';
-
-import { InlineGrid, TextField, Icon, InlineStack } from '@shopify/polaris';
-import { dayjsTz, convertDateToTz, dayjsTzToLocalTZ } from '@/utils';
-import { isValidDate, formatDate } from '../helpers';
-import { useCallback, useEffect, useState } from 'react';
-import { ArrowRightIcon } from '@shopify/polaris-icons';
-
-interface DateTimeFilterInputsProps {
-  onBlur?: () => void;
-  dateRange: DateTimeFilter;
-  setDateTimePicked: (value: IDateRangeState) => void;
-}
-
-export function DateTimeFilterInputs({ onBlur, dateRange, setDateTimePicked }: DateTimeFilterInputsProps) {
-  const [isFocus, setIsFocus] = useState(false);
-  const [inputValues, setInputValues] = useState<{
-    since?: string;
-    until?: string;
-  }>({});
-
-  const formatDisplayDate = useCallback(
-    (timestamp: string | number, isEnd = false) => {
-      if (!dateRange.isVersion || (isEnd && dateRange.isCurrentVersion)) return formatDate(timestamp, 'FULL');
-
-      return formatDate(timestamp, 'FULL_WITH_TIME');
-    },
-    [dateRange.isVersion, dateRange.isCurrentVersion],
-  );
-
-  useEffect(() => {
-    if (isFocus) return;
-    setInputValues({
-      since: formatDisplayDate(dateRange.since),
-      until: formatDisplayDate(dateRange.until, true),
-    });
-  }, [dateRange, formatDisplayDate]);
-
-  function handleStartInputValueChange(value: any) {
-    setInputValues((prevState) => {
-      return { ...prevState, since: value };
-    });
-    if (isValidDate(value)) {
-      const newSinceDate = convertDateToTz(value).startOf('day');
-      const untilDate = convertDateToTz(dateRange.until).endOf('day');
-      const endDate = newSinceDate.isAfter(untilDate) ? newSinceDate.endOf('day') : untilDate;
-
-      setDateTimePicked({
-        start: dayjsTzToLocalTZ(newSinceDate).toDate(),
-        end: dayjsTzToLocalTZ(endDate).toDate(),
-      });
-    }
-  }
-  function handleEndInputValueChange(value: any) {
-    setInputValues((prevState) => ({ ...prevState, until: value }));
-    if (isValidDate(value)) {
-      const nowEndOfDay = dayjsTz().endOf('day');
-      const newUntilDate = convertDateToTz(value).endOf('day');
-      const clampedUntil = newUntilDate.isAfter(nowEndOfDay) ? nowEndOfDay : newUntilDate;
-      const sinceDate = convertDateToTz(dateRange.since).startOf('day');
-      const startDate = clampedUntil.isBefore(sinceDate) ? clampedUntil.startOf('day') : sinceDate;
-
-      setDateTimePicked({
-        start: dayjsTzToLocalTZ(startDate).toDate(),
-        end: dayjsTzToLocalTZ(clampedUntil).toDate(),
-      });
-    }
-  }
-
-  function handleInputBlur() {
-    setIsFocus(false);
-    setInputValues({
-      since: formatDisplayDate(dateRange.since),
-      until: formatDisplayDate(dateRange.until, true),
-    });
-    onBlur && onBlur();
-  }
-
-  function handleFocusStartInput() {
-    setIsFocus(true);
-    setInputValues({
-      ...inputValues,
-      since: formatDate(dateRange.since, 'YMD'),
-    });
-  }
-
-  function handleFocusEndInput() {
-    setIsFocus(true);
-    setInputValues({
-      ...inputValues,
-      until: formatDate(dateRange.until, 'YMD'),
-    });
-  }
-  return (
-    <InlineGrid gap="200" columns="1fr auto 1fr">
-      <TextField
-        role="combobox"
-        label={'Since'}
-        labelHidden
-        // prefix={<Icon source={CalendarIcon} />}
-        value={dateRange.since ? inputValues.since : 'MMMM D, YYYY'}
-        onChange={handleStartInputValueChange}
-        onBlur={() => handleInputBlur()}
-        onFocus={() => handleFocusStartInput()}
-        autoComplete="off"
-      />
-      <InlineStack>
-        <Icon source={ArrowRightIcon} tone="subdued" />
-      </InlineStack>
-      <TextField
-        role="combobox"
-        label={'Until'}
-        labelHidden
-        // prefix={<Icon source={CalendarIcon} />}
-        value={dateRange.until ? inputValues.until : 'MMMM D, YYYY'}
-        onChange={handleEndInputValueChange}
-        onBlur={() => handleInputBlur()}
-        onFocus={() => handleFocusEndInput()}
-        autoComplete="off"
-      />
-    </InlineGrid>
-  );
-}

package/src/components/GTimePicker/components/DateTimeFilters.tsx

@@ -1,86 +0,0 @@
-import type { IDateRangeState } from '../hooks';
-import type { DateTimeFilter } from '../types';
-
-import { BlockStack, Box, OptionList, Scrollable, Select, useBreakpoints } from '@shopify/polaris';
-
-import { dayjsTz } from '@/utils';
-import { DATE_TIME_COMPARISON_FILTERS } from '../constants';
-import { useDateTimeFilter } from '../hooks';
-import { DateTimeFilterAddition } from './DateTimeFilterAddition';
-
-export interface IDateTimeFilterAddition {
-  title: string;
-  initialPicked?: DateTimeFilter;
-  rangers: DateTimeFilter[];
-}
-
-export interface DateTimeFiltersProps {
-  setDateTimePicked: (value: IDateRangeState) => void;
-  dateTimePicked: DateTimeFilter;
-  allRanges: DateTimeFilter[];
-  rangeAddition?: IDateTimeFilterAddition;
-  isCompare?: boolean;
-}
-
-export function DateTimeFilters(props: DateTimeFiltersProps) {
-  const { setDateTimePicked, dateTimePicked, allRanges, isCompare } = props;
-
-  const { DATE_TIME_FILTERS } = useDateTimeFilter();
-  const { mdDown } = useBreakpoints();
-
-  const rangesDefault = isCompare ? [...DATE_TIME_COMPARISON_FILTERS] : [...DATE_TIME_FILTERS];
-
-  const handleChangeFilterBySelect = (value: string) => {
-    const result = allRanges.find(({ title, alias }) => title === value || alias === value) || allRanges[0];
-
-    setDateTimePicked({
-      start: dayjsTz(result?.since).toDate(),
-      end: dayjsTz(result?.until).toDate(),
-      alias: result?.alias,
-    });
-  };
-
-  const handleChangeFilterByOption = (value: string[]) => {
-    const result = allRanges.find((range) => range.alias === value[0]) || allRanges[0];
-    setDateTimePicked({
-      start: dayjsTz(result?.since).toDate(),
-      end: dayjsTz(result?.until).toDate(),
-      alias: result?.alias,
-    });
-  };
-
-  return (
-    <Box
-      maxWidth={mdDown ? '516px' : '250px'}
-      width={mdDown ? '100%' : '250px'}
-      padding={{ xs: '500', md: '0' }}
-      paddingBlockEnd={{ xs: '100', md: '0' }}
-    >
-      {mdDown ? (
-        <Select
-          label="dateRangeLabel"
-          labelHidden
-          onChange={(value) => handleChangeFilterBySelect(value)}
-          value={dateTimePicked?.title || dateTimePicked?.alias || ''}
-          options={allRanges.map(({ alias, title }) => title || alias)}
-        />
-      ) : (
-        <Scrollable style={{ maxHeight: '356px' }}>
-          <Box>
-            <BlockStack>
-              <DateTimeFilterAddition {...props} />
-              <OptionList
-                options={rangesDefault.map((range) => ({
-                  value: range.alias,
-                  label: range.title,
-                }))}
-                selected={dateTimePicked ? [dateTimePicked.alias] : []}
-                onChange={(value) => handleChangeFilterByOption(value)}
-              />
-            </BlockStack>
-          </Box>
-        </Scrollable>
-      )}
-    </Box>
-  );
-}

package/src/components/GTimePicker/components/MainTimePicker.tsx

@@ -1,47 +0,0 @@
-import type { GTimePickerProps } from '../GTimePicker';
-import type { DateTimeFilter } from '../types';
-
-import { useDateTimeFilter } from '../hooks/useDateTimeFilter';
-import { useDateTimePicker } from '../hooks/useDateTimePicker';
-import { BaseTimePicker } from './BaseTimePicker';
-import { getDateRangeTitle } from '../helpers';
-
-export type MainTimePickerProps = Omit<GTimePickerProps, 'isCompare'>;
-export const MainTimePicker: React.FC<MainTimePickerProps> = (props) => {
-  const { rangeAddition, popoverProps, activator, onApply, activatorProps, actionProps } = props;
-
-  const { DATE_TIME_FILTERS } = useDateTimeFilter();
-
-  const dateTimeFilters = DATE_TIME_FILTERS;
-  const additionalRanges = rangeAddition?.rangers || [];
-  const initialPicked = rangeAddition?.initialPicked;
-  const ranges: DateTimeFilter[] = [...dateTimeFilters, ...additionalRanges];
-
-  const { dateTimePicked } = useDateTimePicker({ ranges, initialPicked });
-
-  const getButtonValue = () => {
-    if (dateTimePicked.isVersion && additionalRanges.length > 0) {
-      const time = dateTimePicked.description ? `at ${dateTimePicked.description}` : '';
-      return `Period: ${dateTimePicked.title} ${time}`;
-    }
-
-    if (dateTimePicked.alias === 'custom') {
-      return getDateRangeTitle(dateTimePicked.since, dateTimePicked.until);
-    }
-
-    return dateTimePicked.title;
-  };
-
-  return (
-    <BaseTimePicker
-      activatorProps={activatorProps}
-      dateTimeFilters={dateTimeFilters}
-      rangeAddition={rangeAddition}
-      popoverProps={popoverProps}
-      actionProps={actionProps}
-      buttonValue={getButtonValue()}
-      activator={activator}
-      onApply={onApply}
-    />
-  );
-};

package/src/components/GTimePicker/components/index.ts

@@ -1,2 +0,0 @@
-export * from './DateTimeFilterInputs';
-export * from './DateTimeFilters';