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

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

@@ -0,0 +1,194 @@
+import type { GPaginationProps } from '@/core/gemxql';
+import type { IReportTable } from '../../common/Visualization/types';
+import type { IReportHeaderSummary } from './components';
+import type { ReportTableSkeletonProps } from './ReportTableSkeleton';
+import type { OrderByFields, OrderCellProps, ReportColumnLayout, ReportColumnLayoutMap } from './types';
+
+import { cls } from '@/utils';
+import { useMemo } from 'react';
+import { Row, WrapperHeader } from './components';
+import { WrapperFooter } from './components/Footer';
+import { DEFAULT_DIMENSION_LAYOUT, DEFAULT_METRIC_LAYOUT } from './constants';
+import { ReportTableActionsProvider } from './context/ReportTableActionsContext';
+import { useReportTable, useSyncedScroll } from './hooks';
+import { ReportTableSkeleton } from './ReportTableSkeleton';
+
+const mockDimensions = ['session_device_type', 'month', 'session_country', 'session_device_os'];
+const mockMetrics = ['online_store_visitors', 'sessions', 'bounces'];
+
+export interface IReportTableOptions {
+  summary?: IReportHeaderSummary;
+  hideBorderTop?: boolean;
+  hidePaginationRow?: boolean;
+}
+
+export interface ReportTableProps {
+  dimensions?: string[];
+  metrics?: string[];
+  data?: IReportTable;
+  activeColumn?: string;
+  orderBy?: OrderByFields;
+  itemCount?: number;
+  dimensionLayout?: ReportColumnLayout;
+  metricLayouts?: ReportColumnLayoutMap;
+  options?: IReportTableOptions;
+  paginationProps?: GPaginationProps;
+  orderCellProps?: OrderCellProps;
+  isHideCampaignContent?: boolean;
+  showViewAllButton: boolean;
+  emptyStateComponent?: React.ReactNode;
+  isLoading?: boolean;
+  isMockData?: boolean;
+  onChangeOrderBy?: (field: string) => void;
+  onViewAllStoreOrders?: () => void;
+  onViewOrderJourney?: (orderId: string, gxId?: string) => void;
+  onViewOrderDetails?: (orderId: string) => void;
+  skeletons?: ReportTableSkeletonProps;
+}
+
+export const ReportTable = ({
+  dimensions = mockDimensions,
+  metrics = mockMetrics,
+  data,
+  activeColumn,
+  orderBy,
+  options,
+  paginationProps,
+  itemCount,
+  dimensionLayout,
+  metricLayouts,
+  orderCellProps,
+  isHideCampaignContent = false,
+  showViewAllButton,
+  emptyStateComponent,
+  isLoading,
+  isMockData,
+  onChangeOrderBy,
+  onViewAllStoreOrders,
+  onViewOrderJourney,
+  onViewOrderDetails,
+  skeletons,
+}: ReportTableProps) => {
+  const { summary = {}, hideBorderTop, hidePaginationRow } = options ?? {};
+
+  const { columns, rows } = useReportTable({ dimensions, metrics, tableData: data ?? { columns: [], rows: [] } });
+  const { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef } = useSyncedScroll({ columns });
+
+  const tableDimensionLayout = dimensionLayout ?? DEFAULT_DIMENSION_LAYOUT;
+
+  const isEmpty = rows.length === 0;
+
+  const totalPaginationRows = hidePaginationRow ? 0 : rows.length;
+  const isHasTotalRows = Boolean(totalPaginationRows && totalPaginationRows > 0);
+  const isPaginationHidden = !isHasTotalRows && !showViewAllButton && !paginationProps;
+
+  const columnLayoutMap = useMemo(() => {
+    return columns.reduce((acc, col) => {
+      const tableMetricLayout = metricLayouts?.[col.name] ?? DEFAULT_METRIC_LAYOUT;
+
+      acc[col.name] = dimensions.includes(col.name) ? tableDimensionLayout : tableMetricLayout;
+      return acc;
+    }, {} as ReportColumnLayoutMap);
+  }, [columns, metricLayouts, tableDimensionLayout, dimensions]);
+
+  const totalTableWidth = useMemo(() => {
+    return columns.reduce((acc, col) => {
+      const layout = columnLayoutMap[col.name];
+      const widthStr = layout?.minWidth || '0';
+      const widthVal = parseInt(widthStr, 10) || 0;
+      return acc + widthVal;
+    }, 0);
+  }, [columns, columnLayoutMap]);
+
+  if (isLoading) return <ReportTableSkeleton {...skeletons} />;
+
+  if (isEmpty)
+    return emptyStateComponent ? (
+      <ReportTableActionsProvider onViewAllStoreOrders={onViewAllStoreOrders}>
+        {renderEmptyState()}
+      </ReportTableActionsProvider>
+    ) : null;
+
+  return (
+    <ReportTableActionsProvider
+      onViewOrderJourney={onViewOrderJourney}
+      onViewOrderDetails={onViewOrderDetails}
+      onViewAllStoreOrders={onViewAllStoreOrders}
+    >
+      <div
+        className={cls('GReportTable__Container', {
+          'GReportTable__Container--border-top': !hideBorderTop,
+          'GReportTable__Container--pagination-hidden': isPaginationHidden,
+        })}
+      >
+        <div className="GReportTable__Wrapper">
+          <WrapperHeader
+            columns={columns}
+            dimensions={dimensions}
+            row={data?.rows[0]}
+            ref={headerRef}
+            columnLayoutMap={columnLayoutMap}
+            activeColumn={activeColumn}
+            orderBy={orderBy}
+            summary={summary}
+            onChangeOrderBy={onChangeOrderBy}
+            minWidth={totalTableWidth}
+          />
+
+          <div className="GReportTable__ScrollWrap" ref={bodyRef}>
+            {rows.map((row, index) => (
+              <Row
+                key={index}
+                row={row}
+                rowIndex={index}
+                columns={columns}
+                dimensions={dimensions}
+                prevRow={rows[index - 1]}
+                columnLayoutMap={columnLayoutMap}
+                orderCellProps={orderCellProps}
+                isHideCampaignContent={isHideCampaignContent}
+                minWidth={totalTableWidth}
+                isMockData={isMockData}
+              />
+            ))}
+          </div>
+        </div>
+
+        <WrapperFooter
+          scrollbarContainerRef={scrollbarContainerRef}
+          totalPaginationRows={totalPaginationRows}
+          itemCount={itemCount}
+          showViewAllButton={showViewAllButton}
+          paginationProps={paginationProps}
+          isPaginationHidden={isPaginationHidden}
+          isMockData={isMockData}
+        />
+
+        {/* shadows for columns*/}
+        <div className="GReportTable__LeftShadow" style={{ left: tableDimensionLayout.width }} ref={leftShadowRef} />
+        <div className="GReportTable__RightShadow" ref={rightShadowRef} />
+      </div>
+    </ReportTableActionsProvider>
+  );
+
+  function renderEmptyState() {
+    return (
+      <div
+        className={cls('GReportTable__Container', {
+          'GReportTable__Container--border-top': !hideBorderTop,
+        })}
+      >
+        {emptyStateComponent}
+
+        <WrapperFooter
+          totalPaginationRows={0}
+          itemCount={itemCount}
+          showViewAllButton={showViewAllButton}
+          paginationProps={paginationProps}
+          isPaginationHidden
+          isMockData={isMockData}
+        />
+      </div>
+    );
+  }
+};

package/src/shared/reports/ui/ReportTable/ReportTableSkeleton.tsx

@@ -0,0 +1,73 @@
+import GEMX_LOGO from '@/assets/svg/gemx-skeleton.svg';
+import { Box, SkeletonBodyText } from '@shopify/polaris';
+import { getColumnLayoutStyles } from './utils';
+import { cls } from '@/utils';
+import { GInlineCenter } from '@/shared/components';
+
+const COLOR_NORMAL = '#FFFFFF';
+const COLOR_ACTIVE = '#F8F8F8';
+
+export interface ReportTableSkeletonProps {
+  rows?: number;
+  columns?: number;
+  startBackgroundColor?: 'normal' | 'active';
+  hiddenPagination?: boolean;
+  showLogo?: boolean;
+}
+
+export const ReportTableSkeleton = ({
+  rows = 3,
+  columns = 2,
+  startBackgroundColor = 'normal',
+  hiddenPagination = true,
+  showLogo = false,
+}: ReportTableSkeletonProps) => {
+  const colors = startBackgroundColor === 'normal' ? [COLOR_NORMAL, COLOR_ACTIVE] : [COLOR_ACTIVE, COLOR_NORMAL];
+  const getRowColor = (index: number) => colors[index % 2];
+
+  const getColJustify = (colIndex: number) => {
+    if (colIndex === 0) return 'start';
+    if (colIndex === columns - 1) return 'end';
+    return 'center';
+  };
+
+  return (
+    <>
+      <div
+        className={cls('GReportTable__Container', {
+          'GReportTable__Container--pagination-hidden': hiddenPagination,
+        })}
+      >
+        <div className="GReportTable__Wrapper">
+          <div className="GReportTable__ScrollWrap">
+            {Array.from({ length: rows }).map((_, rowIndex) => (
+              <div key={rowIndex} className="GReportTable__Row">
+                {Array.from({ length: columns }).map((_, colIndex) => (
+                  <div
+                    key={colIndex}
+                    className="GReportTable__Cell !border-r-0 px-5"
+                    style={{
+                      backgroundColor: getRowColor(rowIndex),
+                      ...getColumnLayoutStyles({
+                        align: getColJustify(colIndex),
+                      }),
+                    }}
+                  >
+                    <Box width="92px">
+                      <SkeletonBodyText lines={1} />
+                    </Box>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {showLogo && (
+        <GInlineCenter align="center" inlineAlign="center" minHeight="320px">
+          <img src={GEMX_LOGO} alt="Gemx" width={38} height={42} />
+        </GInlineCenter>
+      )}
+    </>
+  );
+};

package/src/shared/reports/ui/ReportTable/assets/styles/ReportTable.scss

@@ -0,0 +1,288 @@
+.GReportTable__Container {
+  --p-z-index-sticky-header: 300;
+  --p-z-index-sticky-footer: 301;
+  --p-z-index-dimension: 50;
+
+  position: relative;
+  scrollbar-color: auto;
+
+  &--border-top {
+    border-top: 1px solid var(--p-color-border);
+  }
+
+  &--pagination-hidden {
+    .GReportTable__Wrapper {
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 12px;
+      overflow: hidden;
+    }
+  }
+
+  .GReportTable__Wrapper {
+    --column-cell-min-width: 200px;
+    --column-cell-max-width: unset;
+    --column-cell-height: 40px;
+    --column-cell-justify-content: start;
+    --column-cell-padding-inline: 12px;
+    --column-first-padding-inline: 16px;
+    --column-summary-cell-padding-inline: 12px;
+    --column-summary-cell-height: 36px;
+    --column-cell-padding-right: 12px;
+    --column-header-cell-padding-right: 12px;
+    --column-dimension-box-shadow: var(--p-space-025) 0 0 0 var(--p-color-border-secondary);
+    --column-border-right-width: 1px;
+
+    position: relative;
+    background: var(--p-color-bg-surface);
+
+    //  ----- Header ----
+    .GReportTable__StickyHeader {
+      position: sticky;
+      top: 0;
+      z-index: var(--p-z-index-sticky-header);
+      overflow: hidden;
+      overflow-x: auto;
+      overscroll-behavior-x: none;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+
+      .GReportTable__Header {
+        display: flex;
+        background: var(--p-color-bg-surface);
+
+        &--hide-summary {
+          .GReportTable__Header-Cell {
+            background: var(--p-color-bg-surface-secondary) !important;
+            border-bottom: none !important;
+          }
+        }
+
+        > .GReportTable__Header-Cell:first-child {
+          border-right: var(--column-border-right-width) solid var(--p-color-border);
+          position: sticky;
+          left: 0;
+          z-index: var(--p-z-index-1);
+          // padding-inline: var(--column-first-padding-inline);
+        }
+
+        .GReportTable__Header-Cell {
+          display: flex;
+          align-items: center;
+          justify-content: var(--column-cell-justify-content);
+          flex: 1;
+          border-bottom: 1px solid var(--p-color-border);
+          min-width: var(--column-cell-min-width);
+          max-width: var(--column-cell-max-width);
+          min-height: var(--column-cell-height);
+          padding-inline: var(--column-cell-padding-inline);
+          padding-right: var(--column-header-cell-padding-right);
+          font-weight: 800;
+          background: var(--p-color-bg-surface);
+          gap: 4px;
+          overflow: hidden;
+
+          .GReportTable-SortableHeaderButton {
+            border: none;
+            background: transparent;
+            border-radius: var(--p-border-radius-100);
+            cursor: pointer;
+            padding: 2px 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--p-color-text);
+            min-width: 0;
+
+            &:hover {
+              background: var(--p-color-bg-fill-transparent-hover);
+            }
+          }
+        }
+      }
+
+      .GReportTable__Summary-Row {
+        display: flex;
+
+        > .GReportTable__Summary-Cell:first-child {
+          border-right: var(--column-border-right-width) solid var(--p-color-border);
+          position: sticky;
+          left: 0;
+          z-index: var(--p-z-index-1);
+          // padding-inline: var(--column-first-padding-inline);
+        }
+
+        .GReportTable__Summary-Cell {
+          display: flex;
+          flex: 1;
+          background-color: var(--p-color-bg-surface-secondary);
+          justify-content: var(--column-cell-justify-content);
+          min-height: var(--column-summary-cell-height);
+          min-width: var(--column-cell-min-width);
+          max-width: var(--column-cell-max-width);
+          padding-inline: var(--column-summary-cell-padding-inline);
+          padding-right: var(--column-cell-padding-right);
+          font-weight: 800;
+          display: flex;
+          align-items: center;
+          span {
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    //  ----- Body -----
+    .GReportTable__ScrollWrap {
+      overflow-x: auto;
+      overscroll-behavior-x: none;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+
+      .GReportTable__Row {
+        display: flex;
+
+        &:hover {
+          background-color: var(--p-color-bg-surface-hover);
+
+          > .GReportTable__Cell,
+          > .GReportTable__Cell:first-child {
+            background-color: var(--p-color-bg-surface-hover);
+          }
+        }
+
+        .GReportTable__Cell {
+          display: flex;
+          align-items: center;
+          justify-content: var(--column-cell-justify-content);
+          flex: 1;
+          min-width: var(--column-cell-min-width);
+          max-width: var(--column-cell-max-width);
+          min-height: var(--column-cell-height);
+          border-top: 1px solid var(--p-color-border);
+
+          .GReportTable__CellContent {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: var(--column-cell-justify-content);
+
+            > *:first-child {
+              height: 100%;
+              display: flex;
+              align-items: center;
+
+              &:not(:has(.GReportTable__CellContent--clickable)) {
+                padding-inline: var(--column-cell-padding-inline);
+                padding-right: var(--column-cell-padding-right);
+              }
+
+              &:has(.GReportTable__CellContent--clickable) {
+                width: 100%;
+              }
+            }
+
+            &--clickable {
+              border-radius: 0;
+              &:hover {
+                background-color: var(--p-color-bg-surface-selected);
+              }
+            }
+            &--noClick {
+              background-color: transparent !important;
+            }
+          }
+        }
+
+        .GReportTable__Cell--dimension {
+          border-right: var(--column-border-right-width) solid var(--p-color-border);
+        }
+
+        > .GReportTable__Cell:first-child {
+          border-right: var(--column-border-right-width) solid var(--p-color-border);
+          position: sticky;
+          left: 0;
+          z-index: var(--p-z-index-1);
+          background: var(--p-color-bg-surface);
+
+          .GReportTable__CellContent {
+            > *:first-child {
+              &:not(:has(.GReportTable__CellContent--clickable)) {
+                padding-inline: var(--column-cell-padding-inline);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  //  ----- Footer -----
+  .GReportTable__FooterWrapper {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--p-z-index-sticky-footer);
+  }
+
+  //  ----- Scrollbar -----
+  .GReportTable__ScrollBarContainer {
+    position: sticky;
+    bottom: 44px;
+    z-index: var(--p-z-index-sticky-footer);
+    background-color: var(--p-color-bg-surface);
+
+    &--pagination-hidden {
+      bottom: 0;
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 12px;
+      overflow: hidden;
+    }
+
+    .GReportTable__ScrollBar {
+      overflow-x: scroll;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+    .GReportTable__ScrollBarContent {
+      height: 0.0625rem;
+    }
+  }
+
+  //  ----- Pagination -----
+  .GReportTable__Pagination {
+    background-color: var(--p-color-bg-surface-secondary);
+    height: 44px;
+    display: flex;
+    align-items: center;
+    padding-inline: 16px;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+
+  //  ----- Shadows -----
+  .GReportTable--shadow {
+    --scrollbar-container-height: 18px;
+
+    content: '';
+    position: absolute;
+    z-index: var(--p-z-index-sticky-header);
+    top: 0;
+    height: calc(100% - var(--scrollbar-container-height) / 2);
+    opacity: 0;
+    pointer-events: none;
+    right: 0;
+    width: var(--p-space-150);
+    transition: opacity var(--p-motion-duration-300) var(--p-motion-ease);
+  }
+
+  .GReportTable__LeftShadow {
+    @extend .GReportTable--shadow;
+    background: linear-gradient(to right, rgba(26, 26, 26, 0.1), transparent);
+  }
+
+  .GReportTable__RightShadow {
+    @extend .GReportTable--shadow;
+    background: linear-gradient(to left, rgba(26, 26, 26, 0.1), transparent);
+  }
+}

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

@@ -0,0 +1,102 @@
+import type { IOrderExperiment } from '../../../../types/order';
+import type { RendererProps } from '../type';
+
+import { GTextTruncated } from '@/shared/components';
+import { cls } from '@/utils';
+import { Box, Button, Icon, InlineStack, Popover, Scrollable, Text } from '@shopify/polaris';
+import { CaretDownIcon, ChartLineIcon } from '@shopify/polaris-icons';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useReportTableActionsContext } from '../../../../context/ReportTableActionsContext';
+import { CampaignsCellVersion } from './CampaignsCellVersion';
+
+export const CampaignsCell = ({
+  value,
+  campaignsCellProps,
+}: Pick<RendererProps<IOrderExperiment[]>, 'value' | 'campaignsCellProps'>) => {
+  const { orderId, gxId, isHideCampaignContent } = campaignsCellProps ?? {};
+
+  const { t } = useTranslation();
+
+  const { onViewOrderJourney } = useReportTableActionsContext();
+
+  const [active, setActive] = useState(false);
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const campaignLeadingToOrder = value.at(0);
+  const isShowPopupCampaigns = value.length > 1 && !isHideCampaignContent;
+
+  if (!campaignLeadingToOrder) return null;
+
+  return (
+    <Popover
+      active={active}
+      activator={
+        <div
+          className={cls('GReportTable__CellContent--clickable flex h-full w-full items-center px-2', {
+            'cursor-pointer': isShowPopupCampaigns,
+            'hover:!bg-[#f7f7f7]': !isShowPopupCampaigns,
+          })}
+          onClick={isShowPopupCampaigns ? toggleActive : undefined}
+        >
+          <CampaignsCellVersion version={campaignLeadingToOrder.version} />
+
+          {!isHideCampaignContent && (
+            <>
+              <Box minWidth="0" paddingInlineStart={campaignLeadingToOrder.version ? '200' : '0'}>
+                <GTextTruncated as="span" variant="bodyMd" tone="subdued" useWrapper tooltip={{ hoverDelay: 300 }}>
+                  {campaignLeadingToOrder.campaign_group_name || campaignLeadingToOrder.campaign_name}
+                </GTextTruncated>
+              </Box>
+
+              {isShowPopupCampaigns && (
+                <span className="opacity-0 group-hover/GReportTable__Row:opacity-100">
+                  <Icon source={CaretDownIcon} />
+                </span>
+              )}
+            </>
+          )}
+        </div>
+      }
+      onClose={toggleActive}
+    >
+      <Box padding="0" width="340px" overflowX="hidden">
+        <Box padding="300">
+          <Text as="p" variant="bodyMd" fontWeight="semibold">
+            {t('Experiments visited before order')}
+          </Text>
+        </Box>
+
+        <Box borderBlockEndWidth="025" borderBlockStartWidth="025" borderColor="border-secondary">
+          <Scrollable vertical scrollbarWidth="thin" horizontal={false} className={'max-h-[216px]'}>
+            <Box paddingBlock="200">
+              {value.map((campaign, index) => {
+                return (
+                  <Box key={index} paddingInline="300" paddingBlock="200">
+                    <Box paddingBlock="050">
+                      <InlineStack gap="200" wrap={false}>
+                        <CampaignsCellVersion version={campaign.version} />
+
+                        <Box minWidth="0">
+                          <GTextTruncated as="span" variant="bodyMd" tone="subdued" useWrapper>
+                            {campaign.campaign_group_name || campaign.campaign_name}
+                          </GTextTruncated>
+                        </Box>
+                      </InlineStack>
+                    </Box>
+                  </Box>
+                );
+              })}
+            </Box>
+          </Scrollable>
+        </Box>
+
+        <Box padding="300">
+          <Button icon={ChartLineIcon} fullWidth onClick={() => onViewOrderJourney?.(orderId ?? '', gxId)}>
+            {t('View order journey')}
+          </Button>
+        </Box>
+      </Box>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { GVariantBadge } from '@/shared/components/GVariantBadge';
+
+interface IExperimentsCellVersionProps {
+  version: string;
+}
+
+export const CampaignsCellVersion = ({ version }: IExperimentsCellVersionProps) => {
+  if (!version) return null;
+
+  return <GVariantBadge variant={version} tone={version === 'A' ? 'active' : 'inactive'} size="xs" />;
+};

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

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