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

package/src/shared/reports/ui/ReportTable/components/Body/Cell/OrderIdCell.tsx

@@ -1,70 +0,0 @@
-import type { RendererProps } from './type';
-
-import { ActionList, Icon, InlineStack, Popover, Text } from '@shopify/polaris';
-import { CaretDownIcon, ChartLineIcon, OrderIcon } from '@shopify/polaris-icons';
-import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useReportTableActionsContext } from '../../../context/ReportTableActionsContext';
-
-export const OrderIdCell = ({
-  value,
-  isMockData,
-  gxId,
-}: Pick<RendererProps<string>, 'value' | 'isMockData' | 'gxId'>) => {
-  const { t } = useTranslation();
-
-  const [active, setActive] = useState(false);
-
-  const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
-
-  const toggleActive = useCallback(() => setActive((active) => !active), []);
-
-  if (isMockData) {
-    return (
-      <Text as="span" variant="bodyMd" tone="subdued">
-        {value}
-      </Text>
-    );
-  }
-
-  return (
-    <Popover
-      active={active}
-      activator={
-        <div
-          className="GReportTable__CellContent--clickable flex h-full w-full cursor-pointer items-center rounded-md pl-3"
-          onClick={toggleActive}
-        >
-          <InlineStack gap="200" blockAlign="center" wrap={false}>
-            <Text as="span" variant="bodyMd" tone="subdued">
-              {value}
-            </Text>
-
-            <span className="opacity-0 group-hover/GReportTable__Row:opacity-100">
-              <Icon source={CaretDownIcon} />
-            </span>
-          </InlineStack>
-        </div>
-      }
-      onClose={toggleActive}
-    >
-      <ActionList
-        actionRole="menuitem"
-        items={[
-          {
-            id: 'view_order_journey',
-            content: t('View order journey'),
-            icon: ChartLineIcon,
-            onAction: () => onViewOrderJourney?.(value, gxId),
-          },
-          {
-            id: 'view_order_details',
-            content: t('View order details on Shopify'),
-            icon: OrderIcon,
-            onAction: () => onViewOrderDetails?.(value),
-          },
-        ]}
-      />
-    </Popover>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Body/Cell/PreviousCell.tsx

@@ -1,17 +0,0 @@
-import type { ReportValueType } from '@/shared/reports/common/Visualization/types';
-
-import { Text } from '@shopify/polaris';
-
-interface PreviousCellProps {
-  previousValue?: ReportValueType;
-  isMergedWithPrev: boolean;
-}
-export const PreviousCell: React.FC<PreviousCellProps> = ({ previousValue, isMergedWithPrev }) => {
-  if (isMergedWithPrev || typeof previousValue !== 'string') return null;
-
-  return (
-    <Text as="span" variant="bodySm" tone="subdued">
-      {previousValue}
-    </Text>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Body/Cell/TotalCell.tsx

@@ -1,14 +0,0 @@
-import type { ReportValueType } from '@/shared/reports/common/Visualization/types';
-
-import { Text } from '@shopify/polaris';
-
-interface TotalCellProps {
-  value: string;
-  isTotalRow?: ReportValueType;
-}
-
-export const TotalCell: React.FC<TotalCellProps> = ({ value, isTotalRow }) => (
-  <Text as="span" variant="bodySm" fontWeight={isTotalRow ? 'semibold' : 'regular'}>
-    {value}
-  </Text>
-);

package/src/shared/reports/ui/ReportTable/components/Body/Cell/VersionCell.tsx

@@ -1,31 +0,0 @@
-import { IVariantType } from '@/components/CardPathAnalysis/stores/path-analysis-campaign';
-import type { RendererProps } from './type';
-
-import { WrapperCell } from './WrapperCell';
-import { GVariantBadge } from '@/shared/components/GVariantBadge';
-
-export const VERSION_LABEL = {
-  [IVariantType.VARIANT_A]: 'Control A',
-  [IVariantType.VARIANT_B]: 'Variant B',
-};
-export const VERSION_OPTIONS = [
-  { label: VERSION_LABEL[IVariantType.VARIANT_A], value: IVariantType.VARIANT_A },
-  { label: VERSION_LABEL[IVariantType.VARIANT_B], value: IVariantType.VARIANT_B },
-];
-export const VersionCell = ({ value, previousValue, isMergedWithPrev, columnLayout }: RendererProps) => {
-  const variantValue = VERSION_OPTIONS.find((opt) => opt.label.split(' ')[1] === value);
-
-  if (isMergedWithPrev) return '';
-
-  return (
-    <WrapperCell previousValue={previousValue} isMergedWithPrev={isMergedWithPrev} columnLayout={columnLayout}>
-      {variantValue && (
-        <GVariantBadge
-          variant={variantValue.value}
-          tone={variantValue.value === 'A' ? 'active' : 'inactive'}
-          size="xs"
-        />
-      )}
-    </WrapperCell>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Body/Cell/WrapperCell.tsx

@@ -1,31 +0,0 @@
-import type { ReportColumnLayout } from '../../../types';
-import type { ReportValueType } from '@/shared/reports/common/Visualization/types';
-
-import { GInlineCenter } from '@/shared/components';
-import { PreviousCell } from './PreviousCell';
-
-interface WrapperCellProps {
-  children: React.ReactNode;
-  previousValue?: ReportValueType;
-  isMergedWithPrev: boolean;
-  columnLayout?: ReportColumnLayout;
-}
-export const WrapperCell: React.FC<WrapperCellProps> = ({
-  children,
-  previousValue,
-  isMergedWithPrev,
-  columnLayout,
-}) => {
-  return (
-    <GInlineCenter
-      flexDirection="column"
-      align={columnLayout?.align}
-      gap="100"
-      paddingBlock="200"
-      width={columnLayout?.columnWrapperWidth}
-    >
-      {children}
-      <PreviousCell previousValue={previousValue} isMergedWithPrev={isMergedWithPrev} />
-    </GInlineCenter>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Body/Cell/index.ts

@@ -1 +0,0 @@
-export { Cell } from './Cell';

package/src/shared/reports/ui/ReportTable/components/Body/Cell/type.ts

@@ -1,18 +0,0 @@
-import type { IMetricFormatter } from '@/modules/analytics';
-import type { ReportValueType } from '@/shared/reports/common/Visualization/types';
-import type { CampaignsCellProps, OrderCellProps, ReportColumnLayout } from '../../../types';
-
-export type RendererProps<T = ReportValueType> = {
-  value: T;
-  gxId?: string;
-  campaignsCellProps?: CampaignsCellProps;
-  name?: string;
-  isMergedWithPrev: boolean;
-  formatter?: IMetricFormatter;
-  previousValue?: T;
-  columnLayout?: ReportColumnLayout;
-  orderCellProps?: OrderCellProps;
-  isTotalRow?: ReportValueType;
-  isDimensionCol?: boolean;
-  isMockData?: boolean;
-};

package/src/shared/reports/ui/ReportTable/components/Body/Row.tsx

@@ -1,85 +0,0 @@
-import type { IReportColumn, ReportRowType } from '@/shared/reports/common/Visualization/types';
-import type { OrderCellProps, ReportColumnLayoutMap } from '../../types';
-
-import { getMetricPreviousValue } from '@/shared/reports/common/Visualization/utils';
-import { IS_TOTAL_ROW_FIELD } from '../../constants';
-import { EReportColumnKey } from '../../types/report-columns';
-import { Cell } from './Cell';
-
-interface RowProps {
-  row: ReportRowType;
-  rowIndex: number;
-  columns: IReportColumn[];
-  dimensions: string[];
-  prevRow?: ReportRowType;
-  columnLayoutMap: ReportColumnLayoutMap;
-  orderCellProps?: OrderCellProps;
-  isHideCampaignContent: boolean;
-  minWidth?: number;
-  isMockData?: boolean;
-}
-
-export const Row = ({
-  row,
-  rowIndex,
-  columns,
-  dimensions,
-  prevRow,
-  columnLayoutMap,
-  orderCellProps,
-  isHideCampaignContent,
-  minWidth,
-  isMockData,
-}: RowProps) => {
-  const checkMergedWithPrev = (col: string) => {
-    const isDimensionCol = dimensions.includes(col);
-    let isMergedWithPrev = false;
-
-    if (isDimensionCol && rowIndex > 0 && prevRow) {
-      const dimIndex = dimensions.indexOf(col);
-
-      const allMatch = dimensions.slice(0, dimIndex + 1).every((d) => row[d] === prevRow[d]);
-
-      isMergedWithPrev = allMatch;
-    }
-
-    return isMergedWithPrev;
-  };
-
-  const customOrderCellProps = orderCellProps
-    ? {
-        ...orderCellProps,
-        onClickOrderCell: (data: { isPrevious?: boolean }) =>
-          orderCellProps?.onClickOrderCell({ row, isPrevious: data.isPrevious }),
-      }
-    : orderCellProps;
-
-  return (
-    <div className="GReportTable__Row group/GReportTable__Row" style={{ minWidth }}>
-      {columns.map((col) => {
-        const hasTooltipCard = !!col.tooltipCardProps;
-        const orderId = row[EReportColumnKey.ORDER_ID]?.toString() ?? '';
-        const gxId = row[EReportColumnKey.GEMX_ID]?.toString() ?? '';
-
-        return (
-          <Cell
-            key={col.name}
-            value={row[col.name]!}
-            gxId={gxId}
-            isTotalRow={row[IS_TOTAL_ROW_FIELD]!}
-            previousValue={getMetricPreviousValue(row, col.name)}
-            isMergedWithPrev={checkMergedWithPrev(col.name)}
-            columnLayout={columnLayoutMap[col.name]!}
-            name={col.name}
-            campaignsCellProps={{ orderId, gxId, isHideCampaignContent }}
-            isDimensionCol={dimensions.includes(col.name)}
-            formatter={col.dataType}
-            hasTooltipCard={hasTooltipCard}
-            orderCellProps={customOrderCellProps}
-            isMockData={isMockData}
-          />
-        );
-      })}
-    </div>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Body/index.ts

@@ -1,2 +0,0 @@
-export * from './Cell';
-export * from './Row';

package/src/shared/reports/ui/ReportTable/components/Footer/Pagination.tsx

@@ -1,76 +0,0 @@
-import type { GPaginationProps } from '@/shared/components';
-
-import { useReportTableActionsContext } from '../../context/ReportTableActionsContext';
-import { GMockDataTooltip, GPagination } from '@/shared/components';
-import { Button, Text } from '@shopify/polaris';
-import { useTranslation } from 'react-i18next';
-import { cls } from '@/utils';
-
-interface PaginationProps {
-  totalRows?: number;
-  itemCount?: number;
-  viewAllMetricContent?: string;
-  showViewAllButton: boolean;
-  paginationProps?: GPaginationProps;
-  isPaginationHidden: boolean;
-  isMockData?: boolean;
-}
-
-export const Pagination = ({
-  totalRows,
-  itemCount,
-  viewAllMetricContent = 'order',
-  showViewAllButton,
-  paginationProps,
-  isPaginationHidden,
-  isMockData,
-}: PaginationProps) => {
-  const { t } = useTranslation();
-
-  const { onViewAllStoreOrders } = useReportTableActionsContext();
-  const isHasTotalRows = Boolean(totalRows && totalRows > 0);
-  const isHasTotalStoreOrders = Boolean(itemCount && itemCount > 0);
-  const isShowViewAllStoreOrders = isHasTotalStoreOrders && showViewAllButton;
-
-  const handleClickViewAllStoreOrders = () => {
-    onViewAllStoreOrders?.();
-  };
-
-  if (isPaginationHidden) return null;
-
-  return (
-    <div
-      className={cls('GReportTable__Pagination', {
-        'justify-end': isShowViewAllStoreOrders,
-        'justify-center': isHasTotalRows,
-        'justify-between': (isHasTotalRows || paginationProps) && isShowViewAllStoreOrders,
-      })}
-    >
-      {paginationProps && <GPagination {...paginationProps} />}
-
-      {isHasTotalRows && (
-        <Text variant="bodyMd" as="span">
-          {t('{{count}} rows', { count: totalRows })}
-        </Text>
-      )}
-
-      {isShowViewAllStoreOrders && (
-        <GMockDataTooltip isMockData={isMockData}>
-          <Button variant="plain" disabled={isMockData} onClick={handleClickViewAllStoreOrders}>
-            {getViewAllStoreOrdersText()}
-          </Button>
-        </GMockDataTooltip>
-      )}
-    </div>
-  );
-
-  function getViewAllStoreOrdersText() {
-    if (itemCount && itemCount > 1) {
-      return t('View all store {{metric}}s by date range ({{itemCount}})', {
-        itemCount,
-        metric: viewAllMetricContent,
-      });
-    }
-    return t('View all store {{metric}} by date range(1)', { metric: viewAllMetricContent });
-  }
-};

package/src/shared/reports/ui/ReportTable/components/Footer/ScrollBar.tsx

@@ -1,19 +0,0 @@
-import { forwardRef } from 'react';
-import { cls } from '@/utils';
-
-export const ScrollBar = forwardRef<HTMLDivElement, { isPaginationHidden: boolean }>(({ isPaginationHidden }, ref) => {
-  return (
-    <div
-      className={cls('GReportTable__ScrollBarContainer', {
-        'GReportTable__ScrollBarContainer--pagination-hidden': isPaginationHidden,
-      })}
-      ref={ref}
-    >
-      <div className="GReportTable__ScrollBar">
-        <div className="GReportTable__ScrollBarContent"></div>
-      </div>
-    </div>
-  );
-});
-
-ScrollBar.displayName = 'ScrollBar';

package/src/shared/reports/ui/ReportTable/components/Footer/WrapperFooter.tsx

@@ -1,39 +0,0 @@
-import type { GPaginationProps } from '@/shared/components';
-
-import { Pagination } from './Pagination';
-import { ScrollBar } from './ScrollBar';
-
-interface WrapperFooterProps {
-  scrollbarContainerRef?: React.RefObject<HTMLDivElement>;
-  totalPaginationRows: number;
-  itemCount?: number;
-  showViewAllButton: boolean;
-  paginationProps?: GPaginationProps;
-  isPaginationHidden: boolean;
-  isMockData?: boolean;
-}
-
-export const WrapperFooter = ({
-  scrollbarContainerRef,
-  itemCount,
-  totalPaginationRows,
-  showViewAllButton,
-  paginationProps,
-  isPaginationHidden,
-  isMockData,
-}: WrapperFooterProps) => {
-  return (
-    <div className="GReportTable__FooterWrapper">
-      {scrollbarContainerRef && <ScrollBar ref={scrollbarContainerRef} isPaginationHidden={isPaginationHidden} />}
-
-      <Pagination
-        totalRows={totalPaginationRows}
-        itemCount={itemCount}
-        showViewAllButton={showViewAllButton}
-        paginationProps={paginationProps}
-        isPaginationHidden={isPaginationHidden}
-        isMockData={isMockData}
-      />
-    </div>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Footer/index.ts

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

package/src/shared/reports/ui/ReportTable/components/Header/Header.tsx

@@ -1,68 +0,0 @@
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
-import type { OrderByFields, ReportColumnLayoutMap } from '../../types';
-
-import { SortableHeaderWithTooltip } from './SortableHeaderWithTooltip';
-import { getColumnLayoutStyles } from '../../utils';
-import { CheckIcon } from '@shopify/polaris-icons';
-import { SortableHeader } from './SortableHeader';
-import { Box, Icon } from '@shopify/polaris';
-import { useState } from 'react';
-import { cls } from '@/utils';
-
-interface HeaderProps {
-  columns: IReportColumn[];
-  columnLayoutMap: ReportColumnLayoutMap;
-  activeColumn?: string;
-  orderBy?: OrderByFields;
-  showSummary?: boolean;
-  onChangeOrderBy?: (field: string) => void;
-}
-
-export const Header = ({
-  columns,
-  columnLayoutMap,
-  activeColumn,
-  orderBy,
-  showSummary,
-  onChangeOrderBy,
-}: HeaderProps) => {
-  const [itemHovering, setItemHovering] = useState<string>();
-
-  return (
-    <div
-      className={cls('GReportTable__Header', {
-        'GReportTable__Header--hide-summary': !showSummary,
-      })}
-    >
-      {columns.map((item) => {
-        const isTooltipCard = !!item.tooltipCardProps;
-
-        const SortableHeaderComponent = isTooltipCard ? SortableHeaderWithTooltip : SortableHeader;
-
-        return (
-          <div
-            key={item.name}
-            className="GReportTable__Header-Cell"
-            style={getColumnLayoutStyles(columnLayoutMap[item.name]!)}
-            onMouseEnter={() => setItemHovering(item.name)}
-            onMouseLeave={() => setItemHovering(undefined)}
-          >
-            {activeColumn === item.name && (
-              <Box>
-                <Icon source={CheckIcon} />
-              </Box>
-            )}
-
-            <SortableHeaderComponent
-              item={item}
-              orderBy={orderBy}
-              itemHovering={itemHovering}
-              onChangeOrderBy={onChangeOrderBy}
-              {...item.tooltipCardProps}
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Header/SortableHeader.tsx

@@ -1,49 +0,0 @@
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
-import type { OrderByFields } from '../../types';
-
-import { SortDescendingIcon, SortAscendingIcon } from '@shopify/polaris-icons';
-import { getOrderTooltip } from '../../utils/order';
-import { EOrderDirectionType } from '../../types';
-import { Box, Icon } from '@shopify/polaris';
-import { GTextTruncated } from '@/shared/components';
-
-interface ISortableHeaderProps {
-  item: IReportColumn;
-  orderBy?: OrderByFields;
-  itemHovering?: string;
-  onChangeOrderBy?: (field: string) => void;
-}
-
-export const SortableHeader = ({ item, orderBy, itemHovering, onChangeOrderBy }: ISortableHeaderProps) => {
-  const { displayName, name } = item;
-
-  function getTooltipInfo(name: string) {
-    const orderByField = orderBy?.[name];
-    const content = getOrderTooltip(name, orderByField?.direction || EOrderDirectionType.ASC);
-    return { content };
-  }
-
-  function getOpacity(name: string) {
-    return itemHovering === name ? '1' : '0';
-  }
-
-  function getOrderIcon(name: string) {
-    const orderByField = orderBy?.[name];
-    if (!orderByField) return SortAscendingIcon;
-    return orderByField.direction === EOrderDirectionType.ASC ? SortAscendingIcon : SortDescendingIcon;
-  }
-
-  return (
-    <button className="GReportTable-SortableHeaderButton" onClick={() => onChangeOrderBy?.(name)}>
-      <div className="min-w-0">
-        <GTextTruncated as="p" variant="bodySm" fontWeight="medium" tone="subdued" tooltip={getTooltipInfo(name)}>
-          {displayName}
-        </GTextTruncated>
-      </div>
-
-      <Box opacity={getOpacity(name)}>
-        <Icon source={getOrderIcon(name)} />
-      </Box>
-    </button>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Header/SortableHeaderWithTooltip.tsx

@@ -1,60 +0,0 @@
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
-import type { OrderByFields } from '../../types';
-
-import { ArrowDownIcon, ArrowUpIcon } from '@shopify/polaris-icons';
-import { GButton, GTooltipCard } from '@/shared/components';
-import { InlineStack, Text } from '@shopify/polaris';
-import { getOrderTooltip } from '../../utils/order';
-import { EOrderDirectionType } from '../../types';
-
-interface ISortableHeaderWithTooltipProps {
-  item: IReportColumn;
-  orderBy?: OrderByFields;
-  onChangeOrderBy?: (field: string) => void;
-}
-
-export const SortableHeaderWithTooltip = ({ item, orderBy, onChangeOrderBy }: ISortableHeaderWithTooltipProps) => {
-  const { displayName, name, tooltipCardProps } = item;
-
-  return (
-    <InlineStack gap="050" blockAlign="center">
-      <GTooltipCard {...tooltipCardProps}>
-        <Text as="span" variant="bodySm" fontWeight="medium" truncate tone="subdued">
-          {displayName}
-        </Text>
-      </GTooltipCard>
-
-      {hasOrderByName(name) && (
-        <div className="-mb-1">
-          <GButton
-            variant="plain"
-            icon={getOrderIcon(name)}
-            tooltip={getSortTooltip(name)}
-            onClick={() => onChangeOrderBy?.(name)}
-          />
-        </div>
-      )}
-    </InlineStack>
-  );
-
-  function hasOrderByName(name: string) {
-    const orderByField = orderBy?.[name];
-    return !!orderByField;
-  }
-
-  function getSortTooltip(name: string) {
-    const orderByField = orderBy?.[name];
-    if (!hasOrderByName(name) || !orderByField) return undefined;
-
-    const content = getOrderTooltip(name, orderByField?.direction);
-
-    return { content };
-  }
-
-  function getOrderIcon(name: string) {
-    const orderByField = orderBy?.[name];
-    if (!orderByField) return ArrowUpIcon;
-
-    return orderByField.direction === EOrderDirectionType.ASC ? ArrowUpIcon : ArrowDownIcon;
-  }
-};

package/src/shared/reports/ui/ReportTable/components/Header/SummaryCell.tsx

@@ -1,26 +0,0 @@
-import type { ReportValueType } from '@/shared/reports/common/Visualization/types';
-import type { ReportColumnLayout } from '../../types';
-
-import { GInlineCenter } from '@/shared/components';
-import { Text } from '@shopify/polaris';
-
-interface ISummaryCellProps {
-  currentValue?: string | null | number;
-  previousValue?: ReportValueType;
-  showPrevious?: boolean;
-  columnLayout: ReportColumnLayout;
-}
-export const SummaryCell = ({ currentValue, previousValue, showPrevious, columnLayout }: ISummaryCellProps) => {
-  return (
-    <GInlineCenter flexDirection="column" align={columnLayout.align} gap="100" paddingBlock="200">
-      <Text as="span" variant="bodySm" fontWeight="semibold">
-        {currentValue}
-      </Text>
-      {showPrevious && typeof previousValue !== 'object' && (
-        <Text as="span" variant="bodySm" fontWeight="semibold" tone="subdued">
-          {previousValue}
-        </Text>
-      )}
-    </GInlineCenter>
-  );
-};