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

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

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

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

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

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

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

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