@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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