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

package/src/components/OrderAnalytic/components/OrderListing/OrderListingSkeleton/OrderListingTableSkeleton.tsx

@@ -1,40 +0,0 @@
-import { InlineStack, SkeletonBodyText } from '@shopify/polaris';
-import { SkeletonSummaryRow } from './SkeletonSummaryRow';
-import { SkeletonHeader } from './SkeletonHeader';
-import { SkeletonRow } from './SkeletonRow';
-
-interface OrderListingTableSkeletonProps {
-  rowCount?: number;
-}
-
-export const OrderListingTableSkeleton = ({ rowCount = 5 }: OrderListingTableSkeletonProps) => {
-  return (
-    <div className="GReportTable__Container rounded-xl overflow-hidden">
-      <div className="GReportTable__Wrapper">
-        {/* Header */}
-        <div className="GReportTable__StickyHeader">
-          <div>
-            <SkeletonHeader />
-            <SkeletonSummaryRow />
-          </div>
-        </div>
-
-        {/* Body */}
-        <div className="GReportTable__ScrollWrap">
-          {Array.from({ length: rowCount }).map((_, index) => (
-            <SkeletonRow key={index} />
-          ))}
-        </div>
-      </div>
-
-      {/* Footer/Pagination */}
-      <div className="GReportTable__Pagination">
-        <InlineStack align="space-between" blockAlign="center" gap="400">
-          <div className="w-24">
-            <SkeletonBodyText lines={1} />
-          </div>
-        </InlineStack>
-      </div>
-    </div>
-  );
-};

package/src/components/OrderAnalytic/components/OrderListing/OrderListingSkeleton/SkeletonCellContent.tsx

@@ -1,77 +0,0 @@
-import { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-import { Box, SkeletonDisplayText, SkeletonBodyText, InlineStack } from '@shopify/polaris';
-
-export const SkeletonCellContent = ({ columnKey }: { columnKey: string }) => {
-  switch (columnKey) {
-    case 'order_id':
-      return (
-        <Box paddingInline="300">
-          <div className="w-20">
-            <SkeletonDisplayText size="small" />
-          </div>
-        </Box>
-      );
-
-    case EReportColumnKey.ORDER_DATE:
-      return (
-        <Box paddingInline="300">
-          <div className="w-28">
-            <SkeletonBodyText lines={1} />
-          </div>
-        </Box>
-      );
-
-    case EReportColumnKey.TOTAL:
-      return (
-        <Box paddingInline="300">
-          <div className="w-16">
-            <SkeletonBodyText lines={1} />
-          </div>
-        </Box>
-      );
-
-    case EReportColumnKey.CAMPAIGNS:
-      return (
-        <Box paddingInline="300" width="100%">
-          <InlineStack gap="200" blockAlign="center">
-            <div className="bg-surface-secondary h-6 w-6 shrink-0 animate-pulse rounded" />
-            <div className="max-w-40 flex-1">
-              <SkeletonBodyText lines={1} />
-            </div>
-          </InlineStack>
-        </Box>
-      );
-
-    case EReportColumnKey.TRAFFIC_SOURCE:
-    case EReportColumnKey.DEVICE:
-    case EReportColumnKey.VISITOR:
-      return (
-        <Box paddingInline="300">
-          <div className="w-16">
-            <SkeletonBodyText lines={1} />
-          </div>
-        </Box>
-      );
-
-    case EReportColumnKey.ITEMS:
-      return (
-        <Box paddingInline="300">
-          <InlineStack gap="100" blockAlign="center">
-            <div className="bg-surface-secondary h-6 w-6 shrink-0 animate-pulse rounded" />
-            <div className="w-4">
-              <SkeletonBodyText lines={1} />
-            </div>
-          </InlineStack>
-        </Box>
-      );
-
-    default:
-      return (
-        <Box paddingInline="300">
-          <div className="w-16">
-            <SkeletonBodyText lines={1} />
-          </div>
-        </Box>
-      );
-  }
-};

package/src/components/OrderAnalytic/components/OrderListing/OrderListingSkeleton/SkeletonHeader.tsx

@@ -1,35 +0,0 @@
-import { SkeletonBodyText } from '@shopify/polaris';
-import { SKELETON_METRICS } from './constants';
-import { ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_METRIC_LAYOUTS } from '@/components/OrderAnalytic/constants';
-
-export const SkeletonHeader = () => {
-  const headerColumns = [
-    { key: 'order_id', label: 'Order ID', layout: ORDER_LISTING_DIMENSION_LAYOUT },
-    ...SKELETON_METRICS.map((metric) => ({
-      key: metric,
-      label: metric,
-      layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
-    })),
-  ];
-
-  return (
-    <div className="GReportTable__Header">
-      {headerColumns.map((col, index) => (
-        <div
-          key={col.key}
-          className="GReportTable__Header-Cell"
-          style={{
-            minWidth: col.layout?.minWidth,
-            maxWidth: col.layout?.maxWidth,
-            justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-            ['--column-cell-justify-content' as string]: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-          }}
-        >
-          <div className={index === 0 ? 'w-16' : 'w-12'}>
-            <SkeletonBodyText lines={1} />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/components/OrderAnalytic/components/OrderListing/OrderListingSkeleton/SkeletonRow.tsx

@@ -1,35 +0,0 @@
-import { ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_METRIC_LAYOUTS } from '@/components/OrderAnalytic/constants';
-import { SkeletonCellContent } from './SkeletonCellContent';
-import { SKELETON_METRICS } from './constants';
-
-export const SkeletonRow = () => {
-  const rowColumns = [
-    { key: 'order_id', layout: ORDER_LISTING_DIMENSION_LAYOUT, isDimension: true },
-    ...SKELETON_METRICS.map((metric) => ({
-      key: metric,
-      layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
-      isDimension: false,
-    })),
-  ];
-
-  return (
-    <div className="GReportTable__Row">
-      {rowColumns.map((col) => (
-        <div
-          key={col.key}
-          className={`GReportTable__Cell ${col.isDimension ? 'GReportTable__Cell--dimension' : ''}`}
-          style={{
-            minWidth: col.layout?.minWidth,
-            maxWidth: col.layout?.maxWidth,
-            justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-            ['--column-cell-justify-content' as string]: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-          }}
-        >
-          <div className="GReportTable__CellContent">
-            <SkeletonCellContent columnKey={col.key} />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/components/OrderAnalytic/components/OrderListing/OrderListingSkeleton/SkeletonSummaryRow.tsx

@@ -1,36 +0,0 @@
-import { SkeletonBodyText } from '@shopify/polaris';
-import { SKELETON_METRICS } from './constants';
-import { ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_METRIC_LAYOUTS } from '@/components/OrderAnalytic/constants';
-
-export const SkeletonSummaryRow = () => {
-  const summaryColumns = [
-    { key: 'order_id', layout: ORDER_LISTING_DIMENSION_LAYOUT },
-    ...SKELETON_METRICS.map((metric) => ({
-      key: metric,
-      layout: ORDER_LISTING_METRIC_LAYOUTS[metric],
-    })),
-  ];
-
-  return (
-    <div className="GReportTable__Summary-Row">
-      {summaryColumns.map((col, index) => (
-        <div
-          key={col.key}
-          className="GReportTable__Summary-Cell"
-          style={{
-            minWidth: col.layout?.minWidth,
-            maxWidth: col.layout?.maxWidth,
-            justifyContent: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-            ['--column-cell-justify-content' as string]: col.layout?.align === 'end' ? 'flex-end' : 'flex-start',
-          }}
-        >
-          {index === 0 && (
-            <div className="w-20">
-              <SkeletonBodyText lines={1} />
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/components/OrderAnalytic/components/OrderListing/OrderListingSkeleton/constants.ts

@@ -1,11 +0,0 @@
-import { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-
-export const SKELETON_METRICS = [
-  EReportColumnKey.ORDER_DATE,
-  EReportColumnKey.TOTAL,
-  EReportColumnKey.CAMPAIGNS,
-  EReportColumnKey.TRAFFIC_SOURCE,
-  EReportColumnKey.DEVICE,
-  EReportColumnKey.VISITOR,
-  EReportColumnKey.ITEMS,
-];

package/src/components/OrderAnalytic/components/OrderListing/OrderListingSkeleton/index.ts

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

package/src/components/OrderAnalytic/components/OrderListing/OrderListingTable.tsx

@@ -1,159 +0,0 @@
-import type { GPaginationProps } from '@/shared';
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
-import type { IReportTableOptions } from '@/shared/reports/ui/ReportTable';
-import type { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-import type { IOrder } from '../../types';
-import type { IReportCampaign } from '../../types/report';
-
-import { EOrderDirectionType } from '@/core/gemxql';
-import { GBlockCenter } from '@/shared';
-import { ReportTable } from '@/shared/reports/ui/ReportTable';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  ORDER_LISTING_DIMENSIONS,
-  ORDER_LISTING_DIMENSION_LAYOUT,
-  ORDER_LISTING_METRIC_LAYOUTS,
-} from '../../constants';
-import { applyTotalToSummaryRow } from '../../helpers';
-import { useOrderListingData } from '../../hooks';
-import { useOrderControlStore } from '../../stores';
-import { OrderListingTableSkeleton } from './OrderListingSkeleton';
-import { OrderListingTableEmpty } from './OrderListingTableEmpty';
-
-export interface OrderListingTableOptions {
-  hideSummary?: boolean;
-  limitRowAmount?: number;
-  hidePaginationRow?: boolean;
-  hideBorderTop?: boolean;
-  fixedColumns?: IReportColumn['name'][];
-  isLatestTable?: boolean;
-}
-
-export interface OrderListingTableProps {
-  orders: IOrder[];
-  isLoading: boolean;
-  totalStoreOrders: number;
-  reportCampaign?: IReportCampaign;
-  queryValue?: string;
-  paginationProps?: GPaginationProps;
-  tableOptions?: OrderListingTableOptions;
-  isMockData?: boolean;
-  selectedColumns?: EReportColumnKey[];
-  columnsOrder?: EReportColumnKey[];
-  isFilteredByCampaign?: boolean;
-  isHasControlFilters?: boolean;
-  onViewAllStoreOrders?: () => void;
-  onViewOrderJourney?: (orderId: string, gxId?: string) => void;
-  onViewOrderDetails?: (orderId: string) => void;
-}
-
-const OrderListingTable = ({
-  orders,
-  isLoading,
-  totalStoreOrders,
-  queryValue,
-  paginationProps,
-  tableOptions,
-  isMockData,
-  selectedColumns,
-  columnsOrder,
-  isFilteredByCampaign,
-  isHasControlFilters,
-  onViewAllStoreOrders,
-  onViewOrderJourney,
-  onViewOrderDetails,
-}: OrderListingTableProps) => {
-  const { hideSummary, limitRowAmount, hidePaginationRow, hideBorderTop, fixedColumns, isLatestTable } =
-    tableOptions ?? {};
-  const { t } = useTranslation();
-
-  const orderBy = useOrderControlStore((state) => state.orderBy);
-  const changeOrderBy = useOrderControlStore((state) => state.changeOrderBy);
-
-  const { tableData, sortedMetrics } = useOrderListingData({
-    limitRowAmount,
-    orderListing: orders,
-    fixedColumns,
-    selectedColumns,
-    columnsOrder,
-  });
-
-  const isNoResultFoundForQuery = !!queryValue?.trim() && tableData.rows.length === 0;
-  const showViewAllButton = isLatestTable || isHasControlFilters || isNoResultFoundForQuery;
-
-  const reportTableData = useMemo(() => {
-    return {
-      rows: applyTotalToSummaryRow(tableData.rows),
-      columns: tableData.columns,
-    };
-  }, [tableData]);
-
-  const handleChangeOrderBy = (field: string) => {
-    changeOrderBy({
-      field,
-      direction: orderBy?.direction === EOrderDirectionType.ASC ? EOrderDirectionType.DESC : EOrderDirectionType.ASC,
-    });
-  };
-
-  if (isLatestTable && isLoading) return <OrderListingTableSkeleton />;
-
-  return (
-    <>
-      <ReportTable
-        metrics={sortedMetrics}
-        dimensions={ORDER_LISTING_DIMENSIONS}
-        options={getOptionsProps()}
-        paginationProps={paginationProps}
-        data={reportTableData}
-        itemCount={totalStoreOrders}
-        dimensionLayout={ORDER_LISTING_DIMENSION_LAYOUT}
-        metricLayouts={ORDER_LISTING_METRIC_LAYOUTS}
-        orderBy={orderBy ? { [orderBy.field]: orderBy } : undefined}
-        showViewAllButton={showViewAllButton}
-        isHideCampaignContent={!!isLatestTable || !!isFilteredByCampaign}
-        isMockData={isMockData}
-        emptyStateComponent={renderEmptyState()}
-        onChangeOrderBy={handleChangeOrderBy}
-        onViewAllStoreOrders={onViewAllStoreOrders}
-        onViewOrderJourney={onViewOrderJourney}
-        onViewOrderDetails={onViewOrderDetails}
-      />
-    </>
-  );
-
-  function renderEmptyState() {
-    const isNoOrderWithCurrentFilters = orders.length === 0;
-
-    return (
-      <GBlockCenter
-        paddingBlockStart={isNoOrderWithCurrentFilters ? '500' : '0'}
-        paddingBlockEnd={isNoOrderWithCurrentFilters ? '800' : '0'}
-      >
-        <GBlockCenter paddingBlock="1600">
-          <OrderListingTableEmpty
-            title={isNoOrderWithCurrentFilters ? t('No order') : t('No order found')}
-            description={
-              isNoOrderWithCurrentFilters ? t('Try changing the filters') : t('Try changing the filters or search term')
-            }
-          />
-        </GBlockCenter>
-      </GBlockCenter>
-    );
-  }
-
-  function getOptionsProps() {
-    const amount = tableData.rows.length;
-    const content = amount > 1 ? t('{{amount}} orders', { amount }) : t('{{amount}} order', { amount });
-
-    const optionsProps: IReportTableOptions = {
-      summary: { content, hide: hideSummary },
-      hidePaginationRow,
-      hideBorderTop,
-    };
-
-    return optionsProps;
-  }
-};
-
-export default memo(OrderListingTable);

package/src/components/OrderAnalytic/components/OrderListing/OrderListingTableEmpty.tsx

@@ -1,29 +0,0 @@
-import { GBlockCenter } from '@/shared';
-import { BlockStack, Text } from '@shopify/polaris';
-
-import ANALYTIC_EMPTY from '@/assets/img/analytic-empty.png';
-
-interface OrderListingTableEmptyProps {
-  title: string;
-  description: string;
-}
-
-export const OrderListingTableEmpty = ({ title, description }: OrderListingTableEmptyProps) => {
-  return (
-    <GBlockCenter paddingBlock="400">
-      <BlockStack gap="400" inlineAlign="center">
-        <img src={ANALYTIC_EMPTY} alt="No orders" width={80} height={80} />
-
-        <BlockStack gap="200" inlineAlign="center">
-          <Text as="p" variant="headingSm" fontWeight="semibold">
-            {title}
-          </Text>
-
-          <Text as="p" variant="bodyMd" tone="subdued" alignment="center">
-            {description}
-          </Text>
-        </BlockStack>
-      </BlockStack>
-    </GBlockCenter>
-  );
-};

package/src/components/OrderAnalytic/components/OrderListing/index.ts

@@ -1,2 +0,0 @@
-export { default as OrderListingTable } from './OrderListingTable';
-export type { OrderListingTableOptions, OrderListingTableProps } from './OrderListingTable';

package/src/components/OrderAnalytic/components/index.ts

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

package/src/components/OrderAnalytic/constants/index.ts

@@ -1,2 +0,0 @@
-export * from './order-listing';
-export * from './order-columns';

package/src/components/OrderAnalytic/constants/order-columns.ts

@@ -1,51 +0,0 @@
-import { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-
-export const ORDER_COLUMN_MAPPING: Record<EReportColumnKey, { label: string; value: EReportColumnKey }> = {
-  [EReportColumnKey.ORDER_ID]: {
-    label: 'Order ID',
-    value: EReportColumnKey.ORDER_ID,
-  },
-  [EReportColumnKey.GEMX_ID]: {
-    label: 'GemX ID',
-    value: EReportColumnKey.GEMX_ID,
-  },
-  [EReportColumnKey.ORDER_DATE]: {
-    label: 'Date',
-    value: EReportColumnKey.ORDER_DATE,
-  },
-  [EReportColumnKey.TOTAL]: {
-    label: 'Total',
-    value: EReportColumnKey.TOTAL,
-  },
-  [EReportColumnKey.CAMPAIGNS]: {
-    label: 'Experiment version',
-    value: EReportColumnKey.CAMPAIGNS,
-  },
-  [EReportColumnKey.TRAFFIC_SOURCE]: {
-    label: 'Traffic source',
-    value: EReportColumnKey.TRAFFIC_SOURCE,
-  },
-  [EReportColumnKey.DEVICE]: {
-    label: 'Device',
-    value: EReportColumnKey.DEVICE,
-  },
-  [EReportColumnKey.VISITOR]: {
-    label: 'Customer type',
-    value: EReportColumnKey.VISITOR,
-  },
-  [EReportColumnKey.ITEMS]: {
-    label: 'Items',
-    value: EReportColumnKey.ITEMS,
-  },
-};
-
-export const DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT: EReportColumnKey[] = [
-  EReportColumnKey.ORDER_ID,
-  EReportColumnKey.GEMX_ID,
-  EReportColumnKey.ORDER_DATE,
-  EReportColumnKey.TOTAL,
-  EReportColumnKey.CAMPAIGNS,
-  EReportColumnKey.TRAFFIC_SOURCE,
-  EReportColumnKey.DEVICE,
-  EReportColumnKey.VISITOR,
-];