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

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

@@ -1,199 +0,0 @@
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
-import type { ReportTableProps } from '@/shared/reports/ui/ReportTable';
-import type { ReportColumnLayout, ReportColumnLayoutMap } from '@/shared/reports/ui/ReportTable/types';
-
-import { EReportDataType } from '@/shared/reports/common/Visualization/types';
-import { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-
-export const ORDER_LISTING_DIMENSION_LAYOUT: ReportColumnLayout = {
-  width: '158px',
-  minWidth: '158px',
-  maxWidth: '158px',
-  paddingInline: '12px',
-  columnFirstPaddingInline: '12px',
-  align: 'start',
-  dimensionBoxShadow: 'none',
-  borderRightWidth: '0px',
-};
-
-// Remaining space after fixed Order ID column
-const METRIC_COLUMN_MAX_WIDTH = `max(var(--column-cell-min-width), calc(100% - ${ORDER_LISTING_DIMENSION_LAYOUT.width}))`;
-
-export const ORDER_LISTING_METRIC_LAYOUTS: ReportColumnLayoutMap = {
-  [EReportColumnKey.GEMX_ID]: {
-    minWidth: '120px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'start',
-    columnWrapperWidth: '100%',
-  },
-  [EReportColumnKey.ORDER_DATE]: {
-    minWidth: '170px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'start',
-  },
-  [EReportColumnKey.TOTAL]: {
-    minWidth: '96px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'end',
-  },
-  [EReportColumnKey.CAMPAIGNS]: {
-    minWidth: '128px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'start',
-    columnWrapperWidth: '100%',
-  },
-  [EReportColumnKey.TRAFFIC_SOURCE]: {
-    minWidth: '120px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'start',
-  },
-  [EReportColumnKey.DEVICE]: {
-    minWidth: '120px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'start',
-  },
-  [EReportColumnKey.VISITOR]: {
-    minWidth: '120px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'start',
-  },
-  [EReportColumnKey.ITEMS]: {
-    minWidth: '120px',
-    maxWidth: METRIC_COLUMN_MAX_WIDTH,
-    align: 'start',
-  },
-};
-
-export const ORDER_LISTING_COLUMNS: IReportColumn[] = [
-  {
-    name: EReportColumnKey.ORDER_ID,
-    dataType: EReportDataType.STRING,
-    displayName: 'Order ID',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Order ID',
-        content: 'Shopify identifier for the order',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.GEMX_ID,
-    dataType: EReportDataType.STRING,
-    displayName: 'GemX ID',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'GemX ID',
-        content: 'A tracking ID GemX attaches to the order so you can trace where it came from',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.ORDER_DATE,
-    dataType: EReportDataType.DATE,
-    displayName: 'Date',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Date',
-        content: 'Date when the order was placed',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.TOTAL,
-    dataType: EReportDataType.CURRENCY,
-    displayName: 'Total',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Total',
-        content: 'The money amount customers paid for the order',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.CAMPAIGNS,
-    dataType: EReportDataType.OBJECT,
-    displayName: 'Experiment version',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Experiment',
-        content: 'The specific template variant shown to the customer that resulted in the order',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.TRAFFIC_SOURCE,
-    dataType: EReportDataType.STRING,
-    displayName: 'Traffic source',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Traffic source',
-        content: 'Where your customers came from',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.DEVICE,
-    dataType: EReportDataType.STRING,
-    displayName: 'Device',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Device',
-        content: 'Device customers used to place the order',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.VISITOR,
-    dataType: EReportDataType.STRING,
-    displayName: 'Customer type',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Customer type',
-        content: 'Customers who placed the order',
-        width: 'wide',
-      },
-    },
-  },
-  {
-    name: EReportColumnKey.ITEMS,
-    dataType: EReportDataType.OBJECT,
-    displayName: 'Items',
-    tooltipCardProps: {
-      tooltip: {
-        title: 'Items',
-        content: 'Number of units across all line items in the order',
-        width: 'wide',
-      },
-    },
-  },
-];
-
-export const ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE = ORDER_LISTING_COLUMNS.filter(
-  (column) => ![EReportColumnKey.CAMPAIGNS, EReportColumnKey.GEMX_ID].includes(column.name as EReportColumnKey),
-);
-
-export const ORDER_LISTING_METRICS: ReportTableProps['metrics'] = [
-  EReportColumnKey.GEMX_ID,
-  EReportColumnKey.ORDER_DATE,
-  EReportColumnKey.TOTAL,
-  EReportColumnKey.CAMPAIGNS,
-  EReportColumnKey.TRAFFIC_SOURCE,
-  EReportColumnKey.DEVICE,
-  EReportColumnKey.VISITOR,
-  EReportColumnKey.ITEMS,
-];
-
-export const ORDER_LISTING_DIMENSIONS: ReportTableProps['dimensions'] = ['order_id'];
-
-export const ORDER_LISTING_CONFIG = {
-  SHOW_LATEST_ORDER_LISTING_AMOUNT: 5,
-};
-
-export const SORT_ORDER_LISTING_DEFAULT = [`${EReportColumnKey.ORDER_DATE} desc`];

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

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

package/src/components/OrderAnalytic/helpers/order-listing.ts

@@ -1,48 +0,0 @@
-import type { IOrder } from '../types';
-import type { IReportTable, ReportRowType, ReportValueType } from '@/shared/reports/common/Visualization/types';
-
-import { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-import { getTotalColumnName } from '@/shared/reports/common';
-
-export const convertOrderItemsToReportTableRows = (orderItems: IOrder[]): IReportTable['rows'] => {
-  return orderItems.map((orderItem) => {
-    const { events: _events, ...restOrderItem } = orderItem;
-
-    return {
-      ...restOrderItem,
-      items: typeof orderItem.items === 'string' ? JSON.parse(orderItem.items) : (orderItem.items ?? []),
-      experiments: typeof orderItem.experiments === 'string' ? JSON.parse(orderItem.experiments) : (orderItem.experiments ?? []),
-    };
-  });
-};
-
-export const applyTotalToSummaryRow = (rows: ReportRowType<ReportValueType>[]) => {
-  let totalPrice = 0;
-  let totalItems = 0;
-
-  rows.forEach((row) => {
-    const rowTotal = row[EReportColumnKey.TOTAL];
-    const rowItems = row[EReportColumnKey.ITEMS];
-
-    if (typeof rowTotal === 'number') {
-      totalPrice += rowTotal;
-    }
-
-    if (Array.isArray(rowItems)) {
-      totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
-    }
-  });
-
-  return rows.map((row, index) => {
-    const totalItemsLabel = totalItems > 1 ? `${totalItems} items` : `${totalItems} item`;
-
-    return {
-      // Only add totals to first row (used by SummaryRow)
-      ...(index === 0 && {
-        [getTotalColumnName(EReportColumnKey.TOTAL)]: totalPrice,
-        [getTotalColumnName(EReportColumnKey.ITEMS)]: totalItemsLabel,
-      }),
-      ...row,
-    };
-  });
-};

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

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

package/src/components/OrderAnalytic/hooks/useOrderListingData.ts

@@ -1,55 +0,0 @@
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
-import type { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-import type { IOrder } from '../types';
-
-import { sortByArrayOrder } from '@/utils';
-import { useMemo } from 'react';
-import { ORDER_LISTING_COLUMNS, ORDER_LISTING_METRICS } from '../constants';
-import { convertOrderItemsToReportTableRows } from '../helpers';
-import { useOrderColumnsSelectorStore } from '../stores';
-
-interface UseOrderListingDataProps {
-  limitRowAmount?: number;
-  orderListing?: IOrder[];
-  fixedColumns?: IReportColumn['name'][];
-  selectedColumns?: EReportColumnKey[];
-  columnsOrder?: EReportColumnKey[];
-}
-
-export const useOrderListingData = ({
-  limitRowAmount,
-  orderListing = [],
-  fixedColumns,
-  selectedColumns: externalSelectedColumns,
-  columnsOrder: externalColumnsOrder,
-}: UseOrderListingDataProps) => {
-  const storeSelectedColumns = useOrderColumnsSelectorStore((state) => state.selectedColumns);
-  const storeColumnsOrder = useOrderColumnsSelectorStore((state) => state.columnsOrder);
-  const selectedColumns = externalSelectedColumns ?? storeSelectedColumns;
-  const columnsOrder = externalColumnsOrder ?? storeColumnsOrder;
-
-  const showColumns = useMemo(
-    () =>
-      ORDER_LISTING_COLUMNS.filter((column) =>
-        (fixedColumns ?? selectedColumns).includes(column.name as EReportColumnKey),
-      ),
-    [fixedColumns, selectedColumns],
-  );
-  const sortedMetrics = useMemo(() => sortByArrayOrder(ORDER_LISTING_METRICS ?? [], columnsOrder), [columnsOrder]);
-
-  const tableData = useMemo(() => {
-    const rows = convertOrderItemsToReportTableRows(orderListing);
-    const showRows = limitRowAmount ? rows.slice(0, limitRowAmount) : rows;
-
-    return {
-      rows: showRows,
-      columns: showColumns,
-    };
-  }, [limitRowAmount, orderListing, showColumns]);
-
-  return {
-    showColumns,
-    tableData,
-    sortedMetrics,
-  };
-};

package/src/components/OrderAnalytic/index.ts

@@ -1,5 +0,0 @@
-export * from './components';
-export * from './constants';
-export * from './OrderListingLatestTable';
-export * from './stores';
-export * from './types';

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

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

package/src/components/OrderAnalytic/stores/order-columns-selector.ts

@@ -1,24 +0,0 @@
-import type { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-
-import { DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT, ORDER_COLUMN_MAPPING } from '../constants';
-import { persist } from 'zustand/middleware';
-import { create } from 'zustand';
-
-export interface IOrderColumnsSelectorStoreState {
-  selectedColumns: EReportColumnKey[];
-  columnsOrder: EReportColumnKey[];
-  setSelectedColumns: (selectedColumns: EReportColumnKey[]) => void;
-  setColumnsOrder: (columnsOrder: EReportColumnKey[]) => void;
-}
-
-export const useOrderColumnsSelectorStore = create<IOrderColumnsSelectorStoreState>()(
-  persist(
-    (set) => ({
-      selectedColumns: DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT,
-      columnsOrder: Object.values(ORDER_COLUMN_MAPPING).map((column) => column.value),
-      setColumnsOrder: (columnsOrder) => set({ columnsOrder }),
-      setSelectedColumns: (selectedColumns) => set({ selectedColumns }),
-    }),
-    { name: 'order-listing-columns-config' },
-  ),
-);

package/src/components/OrderAnalytic/stores/order-control.ts

@@ -1,15 +0,0 @@
-import type { OrderByType } from '@/shared/reports/ui/ReportTable/types';
-
-import { create } from 'zustand';
-import { EReportColumnKey } from '@/shared/reports/ui/ReportTable/types/report-columns';
-import { EOrderDirectionType } from '@/shared/reports/ui/ReportTable/types';
-
-export interface IOrderControl {
-  orderBy?: OrderByType;
-  changeOrderBy: (orderBy: OrderByType) => void;
-}
-
-export const useOrderControlStore = create<IOrderControl>()((set) => ({
-  orderBy: { field: EReportColumnKey.ORDER_DATE, direction: EOrderDirectionType.DESC },
-  changeOrderBy: (newOrderBy: OrderByType) => set(() => ({ orderBy: newOrderBy })),
-}));

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

@@ -1,3 +0,0 @@
-export * from './order';
-export * from './orderListing';
-export * from './report';

package/src/components/OrderAnalytic/types/order.ts

@@ -1,89 +0,0 @@
-import type { ICampaignType } from '@/types';
-
-export enum EJourneyEvent {
-  ADDED_TO_CART = 'ADDED_TO_CART',
-  CHECKOUT_ADDRESS_INFO_SUBMITTED = 'CHECKOUT_ADDRESS_INFO_SUBMITTED',
-  CHECKOUT_COMPLETED = 'CHECKOUT_COMPLETED',
-  CHECKOUT_CONTACT_INFO_SUBMITTED = 'CHECKOUT_CONTACT_INFO_SUBMITTED',
-  CHECKOUT_SHIPPING_INFO_SUBMITTED = 'CHECKOUT_SHIPPING_INFO_SUBMITTED',
-  CHECKOUT_STARTED = 'CHECKOUT_STARTED',
-  COLLECTION_VIEWED = 'COLLECTION_VIEWED',
-  ORDER = 'ORDER',
-  PAGE_VIEWED = 'PAGE_VIEWED',
-  PAYMENT_INFO_SUBMITTED = 'PAYMENT_INFO_SUBMITTED',
-  PRODUCT_ADDED_TO_CART = 'PRODUCT_ADDED_TO_CART',
-  PRODUCT_REMOVED_FROM_CART = 'PRODUCT_REMOVED_FROM_CART',
-  PRODUCT_VIEWED = 'PRODUCT_VIEWED',
-  SEARCH_SUBMITTED = 'SEARCH_SUBMITTED',
-}
-
-export interface IBaseJourneyEvent {
-  orderID?: string | null;
-  date: string;
-  eventType: EJourneyEvent;
-}
-
-export interface ILineItem {
-  imageURL?: string | null;
-  productID?: string | null;
-  productTitle?: string | null;
-  productVariantID?: string | null;
-  properties?: string | null;
-  quantity?: number | null;
-  title?: string | null;
-}
-
-export interface IOrderJourneyBase {
-  campaignID?: string | null;
-  campaignGroupID?: string | null;
-  campaignGroupName?: string | null;
-  campaignName?: string | null;
-  campaignVariantType?: string | null;
-  date: string;
-  locationPath?: string | null;
-  name?: string | null;
-  orderID?: string | null;
-  pageTitle?: string | null;
-  shopifySessionID?: string | null;
-  items?: (ILineItem | null)[] | null;
-}
-
-export interface IOrderJourneyItem extends IOrderJourneyBase {
-  eventType: EJourneyEvent;
-  lineItems?: ILineItem[];
-}
-
-export type IOrderItemPage = Pick<
-  IOrderJourneyBase,
-  'campaignID' | 'campaignGroupID' | 'campaignGroupName' | 'campaignName' | 'campaignVariantType' | 'locationPath'
-> & {
-  filteredCampaignId?: string;
-  filteredCampaignType?: ICampaignType;
-};
-
-export interface IOrderItem {
-  image_url: string;
-  product_title: string;
-  properties: string;
-  quantity: string;
-  title: string;
-}
-export interface IOrderExperiment {
-  campaign_group_name: string;
-  campaign_group_id: string;
-  campaign_name: string;
-  campaign_id: string;
-  version: string;
-}
-
-export interface IOrder {
-  order_id: string;
-  gx_id: string;
-  events: IBaseJourneyEvent[];
-  items: IOrderItem;
-  total_price: number;
-  version: string;
-  experiments: IOrderExperiment[];
-  traffic_source: string;
-  date: string;
-}

package/src/components/OrderAnalytic/types/orderListing.ts

@@ -1,4 +0,0 @@
-export interface IOrderPageAnalytic {
-  path: string;
-  isLoading?: boolean;
-}

package/src/components/OrderAnalytic/types/report.ts

@@ -1,14 +0,0 @@
-import type { IBaseCampaignVersion } from '@/components/GTimePicker';
-import type { ICampaignType } from '@/types';
-
-export enum EReportSource {
-  CAMPAIGN = 'campaign',
-  PAGE = 'page',
-}
-
-export interface IReportCampaign {
-  id: string;
-  type: ICampaignType;
-  groupId?: string;
-  versions?: IBaseCampaignVersion[];
-}

package/src/components/SingleMetricChartCard/SingleMetricChartCard.tsx

@@ -1,56 +0,0 @@
-import type { DataSeries } from '@shopify/polaris-viz-core';
-import type { ReactElement } from 'react';
-import type { IMetricCardItem } from '../../types';
-import type { ColumnTypesMap } from '@/core/gemxql';
-
-import { BlockStack, Card } from '@shopify/polaris';
-import { useState } from 'react';
-import { MetricChart, MetricInfoBlock } from '../common/chart';
-
-export interface IProps {
-  metricInfo: IMetricCardItem;
-  isLoading?: boolean;
-  hideComparison?: boolean;
-  isEmptyMetricData?: boolean;
-  lineChartData: DataSeries[];
-  columnTypes?: ColumnTypesMap;
-  isMockData?: boolean;
-  onClickTitle?: (key: string) => void;
-}
-
-export const SingleMetricChartCard = ({
-  metricInfo,
-  lineChartData,
-  isLoading,
-  hideComparison,
-  columnTypes,
-  isEmptyMetricData,
-  isMockData,
-  onClickTitle,
-}: IProps): ReactElement => {
-  const [isHovered, setIsHovered] = useState(false);
-
-  return (
-    <div onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <Card>
-        <BlockStack gap="200">
-          <MetricInfoBlock
-            item={metricInfo}
-            isHovered={isHovered}
-            isLoading={isLoading}
-            hideComparison={hideComparison}
-            isMockData={isMockData}
-            onClickTitle={onClickTitle}
-          />
-          <MetricChart
-            lineChartData={lineChartData}
-            isLoading={isLoading}
-            isEmptyMetricData={isEmptyMetricData}
-            columnTypes={columnTypes}
-            metricKey={metricInfo.key}
-          />
-        </BlockStack>
-      </Card>
-    </div>
-  );
-};

package/src/components/SingleMetricChartCard/index.tsx

@@ -1,2 +0,0 @@
-export { SingleMetricChartCard } from './SingleMetricChartCard';
-export type { IProps as ISingleMetricChartCardProps } from './SingleMetricChartCard';

package/src/components/common/chart/GChartSkeleton.tsx

@@ -1,5 +0,0 @@
-import { GSkeletonDisplayText } from '@/shared';
-
-export const GChartSkeleton = () => {
-  return <GSkeletonDisplayText height="188px" />;
-};

package/src/components/common/chart/MetricChart.tsx

@@ -1,62 +0,0 @@
-import type { DataSeries } from '@shopify/polaris-viz';
-import type { ReactElement } from 'react';
-import type { ColumnTypesMap } from '@/core/gemxql';
-import type { EMetricKey } from '@/types';
-
-import { MetricChartProvider } from '@/providers';
-import { LineChart } from '@shopify/polaris-viz';
-import { GChartSkeleton } from './GChartSkeleton';
-import { MetricChartEmpty } from './MetricChartEmpty';
-import { MetricChartTooltip } from './MetricChartTooltip';
-import { useFormatLineChartData } from '@/hooks';
-import { ANALYTICS_METRIC_TOOLTIP } from '@/constants';
-
-export interface IProps {
-  lineChartData: DataSeries[];
-  isLoading?: boolean;
-  isEmptyMetricData?: boolean;
-  columnTypes?: ColumnTypesMap;
-  metricKey?: EMetricKey;
-}
-
-export const MetricChart = ({
-  lineChartData,
-  isLoading,
-  isEmptyMetricData,
-  columnTypes,
-  metricKey,
-}: IProps): ReactElement => {
-  const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
-
-  if (!metricKey) {
-    return <></>;
-  }
-
-  if (isLoading) {
-    return <GChartSkeleton />;
-  }
-
-  if (isEmptyMetricData) {
-    return <MetricChartEmpty title="No data yet" description="Data needs time to gather" />;
-  }
-
-  return (
-    <MetricChartProvider>
-      <LineChart
-        data={lineChartData}
-        yAxisOptions={yAxisOptions}
-        theme="Light"
-        tooltipOptions={{
-          titleFormatter: () => `${ANALYTICS_METRIC_TOOLTIP[metricKey]?.title ?? ''}`,
-          keyFormatter: (value) => {
-            return value as string;
-          },
-          renderTooltipContent(data) {
-            return <MetricChartTooltip data={data} formatValue={formatValue} />;
-          },
-        }}
-        showLegend
-      />
-    </MetricChartProvider>
-  );
-};

package/src/components/common/chart/MetricChartEmpty.tsx

@@ -1,35 +0,0 @@
-import type { BoxProps } from '@shopify/polaris';
-
-import IMAGE_ANALYTIC_EMPTY from '@/assets/img/analytic-empty.png';
-import { GBlockCenter, GThumbnail } from '@/shared';
-import { BlockStack, Box, Text } from '@shopify/polaris';
-
-export interface MetricChartEmptyProps {
-  boxProps?: BoxProps;
-  minHeight?: string;
-  description?: string;
-  title: string;
-}
-export const MetricChartEmpty: React.FC<MetricChartEmptyProps> = ({ boxProps, minHeight, description, title }) => {
-  return (
-    <Box minWidth="100%" {...boxProps}>
-      <GBlockCenter minHeight={minHeight}>
-        <Box padding={'400'}>
-          <BlockStack gap="400" align="center" inlineAlign="center">
-            <div className="h-[80px] w-[80px]">
-              <GThumbnail source={IMAGE_ANALYTIC_EMPTY} width="80px" height="80px" alt={title} classRemoved />
-            </div>
-            <BlockStack gap="200" align="center" inlineAlign="center">
-              <Text as="h4" variant="headingSm" fontWeight="semibold">
-                {title}
-              </Text>
-              <Text as="h4" variant="bodyMd" tone="subdued">
-                {description}
-              </Text>
-            </BlockStack>
-          </BlockStack>
-        </Box>
-      </GBlockCenter>
-    </Box>
-  );
-};