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

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

@@ -0,0 +1,93 @@
+import type { ReportValueType } from '@/shared/reports/common/Visualization/types';
+import type { CampaignsCellProps, OrderCellProps, ReportColumnLayout } from '../../../types';
+
+import { NONE_VALUE } from '@/core/gemxql';
+import { cls } from '@/utils';
+import { useReportData } from '../../../hooks';
+import { getColumnLayoutStyles } from '../../../utils';
+import { cellMap } from './CellRenderers';
+import { DefaultCell } from './DefaultCell';
+import { NoneCell } from './NoneCell';
+import { TotalCell } from './TotalCell';
+
+interface ColumnProps {
+  value: ReportValueType;
+  gxId?: string;
+  previousValue?: ReportValueType;
+  isMergedWithPrev: boolean;
+  columnLayout: ReportColumnLayout;
+  name: string;
+  isDimensionCol: boolean;
+  formatter?: string;
+  hasTooltipCard?: boolean;
+  orderCellProps?: OrderCellProps;
+  campaignsCellProps?: CampaignsCellProps;
+  isTotalRow: ReportValueType;
+  isMockData?: boolean;
+}
+
+export const Cell = ({
+  value,
+  gxId,
+  isMergedWithPrev,
+  columnLayout,
+  name,
+  isDimensionCol,
+  formatter,
+  hasTooltipCard,
+  previousValue,
+  orderCellProps,
+  campaignsCellProps,
+  isTotalRow,
+  isMockData,
+}: ColumnProps) => {
+  const columnLayoutStyles = getColumnLayoutStyles(columnLayout, hasTooltipCard);
+
+  const { formatData } = useReportData();
+
+  const formattedValue = formatData({ value, formatter, name });
+
+  const formattedPreviousValue =
+    typeof previousValue === 'undefined' ? previousValue : formatData({ value: previousValue, formatter, name });
+
+  const cellStyles = {
+    borderTop: isMergedWithPrev ? '0' : undefined,
+    ...columnLayoutStyles,
+  };
+
+  const renderContent = () => {
+    if (value === 'Total') {
+      return <TotalCell value={value} isTotalRow={isTotalRow} />;
+    }
+
+    let Renderer = cellMap[name] ?? DefaultCell;
+
+    if (formattedValue === NONE_VALUE) {
+      Renderer = NoneCell;
+    }
+
+    return (
+      <Renderer
+        value={formattedValue}
+        gxId={gxId}
+        name={name}
+        isMergedWithPrev={isMergedWithPrev}
+        previousValue={formattedPreviousValue}
+        columnLayout={columnLayout}
+        orderCellProps={orderCellProps}
+        campaignsCellProps={campaignsCellProps}
+        isTotalRow={isTotalRow}
+        isDimensionCol={isDimensionCol}
+        isMockData={isMockData}
+      />
+    );
+  };
+
+  return (
+    <div className={cls('GReportTable__Cell', { 'GReportTable__Cell--dimension': isDimensionCol })} style={cellStyles}>
+      <div className="GReportTable__CellContent" style={columnLayoutStyles}>
+        {renderContent()}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+import type { IOrderItem } from '@/components/OrderAnalytic/types';
+import type { IOrderExperiment } from '../../../types/order';
+import type { RendererProps } from './type';
+
+import { IRMetricKey } from '@/shared/reports/common/Visualization/types';
+import { EDimensionKey } from '../../../types/dimension';
+import { EReportColumnKey } from '../../../types/report-columns';
+import { CampaignsCell } from './CampaignsCell';
+import { DateCell } from './DateCell';
+import { GemxIdCell } from './GemxIdCell';
+import { ItemsCell } from './ItemsCell';
+import { OrderCellContainer } from './OrderCell';
+import { OrderIdCell } from './OrderIdCell';
+import { VersionCell } from './VersionCell';
+
+const isString = (value: unknown): value is string => typeof value === 'string';
+const isNonEmptyArray = (value: unknown): value is unknown[] => Array.isArray(value) && value.length > 0;
+
+const isOrderExperiments = (value: unknown): value is IOrderExperiment[] => {
+  return isNonEmptyArray(value);
+};
+
+const isOrderItems = (value: unknown): value is IOrderItem[] => {
+  return isNonEmptyArray(value);
+};
+
+export const cellMap: Record<string, (props: RendererProps) => React.ReactNode> = {
+  [EDimensionKey.VERSION]: ({ value, isMergedWithPrev }) => {
+    if (!isString(value)) return null;
+    return <VersionCell value={value} isMergedWithPrev={isMergedWithPrev} />;
+  },
+  [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData }) => {
+    if (!isString(value)) return null;
+    return (
+      <OrderCellContainer
+        value={value}
+        columnLayout={columnLayout}
+        orderCellProps={orderCellProps}
+        previousValue={previousValue}
+        isTotalRow={isTotalRow}
+        isMockData={isMockData}
+      />
+    );
+  },
+  [EReportColumnKey.ORDER_DATE]: ({ value, isMergedWithPrev }) => {
+    if (!isString(value)) return null;
+    return <DateCell value={value} isMergedWithPrev={isMergedWithPrev} />;
+  },
+  [EReportColumnKey.ITEMS]: ({ value }) => {
+    if (!isOrderItems(value)) return null;
+    return <ItemsCell value={value} />;
+  },
+  [EReportColumnKey.CAMPAIGNS]: ({ value, campaignsCellProps }) => {
+    if (!isOrderExperiments(value)) return null;
+    return <CampaignsCell value={value} campaignsCellProps={campaignsCellProps} />;
+  },
+  [EReportColumnKey.ORDER_ID]: ({ value, isMockData, gxId }) => {
+    if (!isString(value)) return null;
+    return <OrderIdCell value={value} isMockData={isMockData} gxId={gxId} />;
+  },
+  [EReportColumnKey.GEMX_ID]: ({ value, isMergedWithPrev, previousValue, columnLayout }) => {
+    if (!isString(value)) return null;
+    return (
+      <GemxIdCell
+        value={value}
+        isMergedWithPrev={isMergedWithPrev}
+        previousValue={previousValue}
+        columnLayout={columnLayout}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,9 @@
+import type { RendererProps } from './type';
+
+import { Text } from '@shopify/polaris';
+
+export const DateCell = ({ value, isMergedWithPrev }: RendererProps<string>) => (
+  <Text as="span" variant="bodySm">
+    {isMergedWithPrev ? '' : value}
+  </Text>
+);

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

@@ -0,0 +1,32 @@
+import { GTextTruncated } from '@/shared/components';
+import type { RendererProps } from './type';
+
+import { WrapperCell } from './WrapperCell';
+import { toCapitalize } from '@/utils';
+
+export const DefaultCell = ({
+  isMergedWithPrev,
+  value,
+  previousValue,
+  columnLayout,
+  isTotalRow,
+  isDimensionCol,
+}: RendererProps) => {
+  const valueString = typeof value === 'string' ? value : String(value);
+
+  return (
+    <WrapperCell previousValue={previousValue} isMergedWithPrev={isMergedWithPrev} columnLayout={columnLayout}>
+      <div className="w-full min-w-0">
+        <GTextTruncated
+          as="span"
+          variant="bodySm"
+          truncate
+          fontWeight={isTotalRow && !isDimensionCol ? 'semibold' : 'regular'}
+          alignment={columnLayout?.align}
+        >
+          {isMergedWithPrev ? '' : toCapitalize(valueString)}
+        </GTextTruncated>
+      </div>
+    </WrapperCell>
+  );
+};

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

@@ -0,0 +1,18 @@
+import type { RendererProps } from './type';
+
+import { GTextTruncated } from '@/shared/components';
+import { WrapperCell } from './WrapperCell';
+
+export const GemxIdCell = ({ value, isMergedWithPrev, previousValue, columnLayout }: RendererProps) => {
+  const valueString = typeof value === 'string' ? value : String(value);
+
+  return (
+    <WrapperCell previousValue={previousValue} isMergedWithPrev={isMergedWithPrev} columnLayout={columnLayout}>
+      <div className="w-full min-w-0">
+        <GTextTruncated as="span" variant="bodySm" truncate alignment={columnLayout?.align}>
+          {isMergedWithPrev ? '' : valueString}
+        </GTextTruncated>
+      </div>
+    </WrapperCell>
+  );
+};

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

@@ -0,0 +1,79 @@
+import type { BoxProps } from '@shopify/polaris';
+import type { OrderJourneyItem } from '../ItemsCell';
+
+import { Badge, Button, Popover, BlockStack, InlineStack, Text, Box } from '@shopify/polaris';
+import { ChevronDownIcon, ChevronUpIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { useCallback, useState } from 'react';
+import { GThumbnail } from '@/shared/components';
+
+interface ICheckoutStartedDetailProps {
+  lineItems?: OrderJourneyItem[];
+  activatorWrapperProps?: BoxProps;
+}
+
+export const CheckoutStartedDetail = ({ lineItems = [], activatorWrapperProps }: ICheckoutStartedDetailProps) => {
+  const { t } = useTranslation();
+
+  const [active, setActive] = useState(false);
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  if (!lineItems || lineItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <Popover
+      active={active}
+      activator={
+        <Box {...activatorWrapperProps}>
+          <Button variant="tertiary" icon={active ? ChevronUpIcon : ChevronDownIcon} onClick={toggleActive} />
+        </Box>
+      }
+      onClose={toggleActive}
+    >
+      <Box padding="300" width="340px">
+        <BlockStack gap="300">
+          {lineItems.map((product, index, self) => {
+            const isLast = index === self.length - 1;
+            const boxProps: BoxProps = {
+              borderBlockEndWidth: '025',
+              borderColor: 'border-secondary',
+              paddingBlockEnd: '300',
+            };
+
+            return (
+              <Box key={product.productID} {...(!isLast && boxProps)}>
+                <InlineStack gap="300" wrap={false}>
+                  <div className="size-10">
+                    <GThumbnail source={product.imageURL ?? ''} alt={product.productTitle ?? ''} size="small" />
+                  </div>
+
+                  <div className="flex w-full flex-col gap-1">
+                    <InlineStack gap="200" align="space-between" wrap={false}>
+                      <Text as="span" variant="bodyMd" fontWeight="medium">
+                        {product.productTitle}
+                      </Text>
+
+                      <div className="text-nowrap">
+                        <Text as="span" variant="bodyMd" tone="subdued">
+                          {t('x {{quantity}}', { quantity: product.quantity })}
+                        </Text>
+                      </div>
+                    </InlineStack>
+
+                    {product.title && (
+                      <span>
+                        <Badge>{product.title}</Badge>
+                      </span>
+                    )}
+                  </div>
+                </InlineStack>
+              </Box>
+            );
+          })}
+        </BlockStack>
+      </Box>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,56 @@
+import type { IOrderItem } from '@/components/OrderAnalytic/types';
+import type { RendererProps } from '../type';
+
+import { InlineStack, Text } from '@shopify/polaris';
+import { useTranslation } from 'react-i18next';
+import { useToggle } from '@/hooks';
+import { CheckoutStartedDetail } from './CheckoutStartedDetail';
+
+export type OrderJourneyItem = {
+  imageURL?: string;
+  productID?: string;
+  productTitle?: string;
+  productVariantID?: string;
+  properties?: string;
+  quantity?: number;
+  title?: string;
+};
+
+export const ItemsCell = ({ value }: Pick<RendererProps<IOrderItem[]>, 'value'>) => {
+  const { t } = useTranslation();
+
+  const { value: itemHovering, setTrue, setFalse } = useToggle(false);
+
+  const lineItems: OrderJourneyItem[] = value.map((item) => ({
+    imageURL: item.image_url,
+    productTitle: item.product_title,
+    quantity: Number(item.quantity) || 0,
+    title: item.title,
+  }));
+
+  const getItemText = () => {
+    const itemQuantity = value.reduce((acc, item) => acc + (Number(item.quantity) || 0), 0);
+
+    if (itemQuantity === 1) return t('{{itemQuantity}} item', { itemQuantity });
+
+    return t('{{itemQuantity}} items', { itemQuantity });
+  };
+
+  return (
+    <div onMouseEnter={setTrue} onMouseLeave={setFalse}>
+      <InlineStack gap="200" blockAlign="center">
+        <Text as="span" variant="bodyMd" tone="subdued">
+          {getItemText()}
+        </Text>
+
+        <CheckoutStartedDetail
+          lineItems={lineItems}
+          activatorWrapperProps={{
+            paddingBlockStart: '100',
+            opacity: itemHovering ? '1' : '0',
+          }}
+        />
+      </InlineStack>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,11 @@
+import type { RendererProps } from './type';
+
+import { WrapperCell } from './WrapperCell';
+
+export const NoneCell = ({ isMergedWithPrev, previousValue, columnLayout }: RendererProps) => {
+  return (
+    <WrapperCell previousValue={previousValue} isMergedWithPrev={isMergedWithPrev} columnLayout={columnLayout}>
+      <div className="w-[11px] h-[2px] bg-[#8A8A8A]" />
+    </WrapperCell>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { GInlineCenter } from '@/shared';
+import { Spinner } from '@shopify/polaris';
+
+export const LoadingData = () => {
+  return (
+    <GInlineCenter minHeight="200px" align="center" inlineAlign="center">
+      <Spinner accessibilityLabel="Fetching orders" size="small" />
+    </GInlineCenter>
+  );
+};

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

@@ -0,0 +1,13 @@
+import { GInlineCenter } from '@/shared';
+import { useTranslation } from 'react-i18next';
+import { Text } from '@shopify/polaris';
+
+export const NoData: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <GInlineCenter minHeight="200px" align="center" inlineAlign="center">
+      <Text as="p">{t('No orders found.')}</Text>
+    </GInlineCenter>
+  );
+};

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

@@ -0,0 +1,78 @@
+import type { OrderCellContainerProps } from './OrderCellContainer';
+
+import { useToggle } from '@/hooks/useToggle';
+import { Box, Popover, Scrollable } from '@shopify/polaris';
+import { LoadingData } from './LoadingData';
+import { NoData } from './NoData';
+import { OrderCellBase } from './OrderCellBase';
+import { OrderItem } from './OrderItem';
+
+interface OrderCellProps extends OrderCellContainerProps {
+  isPrevious?: boolean;
+}
+
+export const OrderCell: React.FC<OrderCellProps> = ({
+  value,
+  columnLayout,
+  orderCellProps,
+  isPrevious,
+  isTotalRow,
+  isMockData,
+}) => {
+  const { value: itemHovering, setTrue, setFalse } = useToggle(false);
+  const { value: active, toggle: toggleActive } = useToggle(false);
+
+  const { orderList, onClickOrderCell, isFetching } = orderCellProps ?? {};
+
+  if (typeof value !== 'string') return null;
+
+  if (isMockData || isTotalRow || value === '0') {
+    return (
+      <OrderCellBase
+        value={value}
+        justifyContent={columnLayout?.align}
+        isPrevious={isPrevious}
+        isTotalRow={!!isTotalRow}
+      />
+    );
+  }
+
+  const openOrderModal = () => {
+    toggleActive();
+    onClickOrderCell?.({ isPrevious });
+  };
+
+  const getContent = () => {
+    if (isFetching) return <LoadingData />;
+    if (!orderList || orderList.rows?.length === 0) return <NoData />;
+
+    return (
+      <Scrollable horizontal={false} className="max-h-[325px]">
+        {orderList?.rows?.map((order) => (
+          <OrderItem key={`${order.id}`} order={order} />
+        ))}
+      </Scrollable>
+    );
+  };
+
+  return (
+    <Popover
+      active={active}
+      activator={
+        <OrderCellBase
+          value={value}
+          justifyContent={columnLayout?.align}
+          interactive={{
+            hovering: itemHovering,
+            onHoverChange: (v) => (v ? setTrue() : setFalse()),
+            onClick: openOrderModal,
+          }}
+          isPrevious={isPrevious}
+        />
+      }
+      onClose={toggleActive}
+    >
+      <Box width="291px">{getContent()}</Box>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { Box, Icon, InlineStack, Text } from '@shopify/polaris';
+import { CaretDownIcon } from '@shopify/polaris-icons';
+import { cls } from '@/utils';
+
+interface OrderCellBaseProps {
+  value: string;
+  justifyContent: React.CSSProperties['justifyContent'];
+  isPrevious?: boolean;
+  isTotalRow?: boolean;
+  interactive?: {
+    onClick: () => void;
+    hovering: boolean;
+    onHoverChange: (hovering: boolean) => void;
+  };
+}
+
+export const OrderCellBase: React.FC<OrderCellBaseProps> = ({
+  value,
+  justifyContent,
+  isPrevious,
+  isTotalRow,
+  interactive,
+}) => {
+  const { onClick, hovering, onHoverChange } = interactive ?? {};
+  const ableInteractive = !!interactive;
+
+  return (
+    <div
+      className={cls(
+        'GReportTable__CellContent--clickable flex h-7 w-full items-center px-[8px] pl-3',
+        { 'hover:bg-surface-hover cursor-pointer': ableInteractive },
+        { 'GReportTable__CellContent--noClick': !ableInteractive },
+      )}
+      style={{ justifyContent }}
+      onClick={onClick ?? undefined}
+      onMouseEnter={ableInteractive ? () => onHoverChange?.(true) : undefined}
+      onMouseLeave={ableInteractive ? () => onHoverChange?.(false) : undefined}
+    >
+      <InlineStack blockAlign="center" wrap={false}>
+        <Text
+          as="span"
+          variant="bodyMd"
+          fontWeight={isTotalRow ? 'semibold' : 'regular'}
+          tone={isPrevious ? 'subdued' : 'inherit'}
+        >
+          {value}
+        </Text>
+
+        <Box opacity={hovering && ableInteractive ? '1' : '0'}>
+          <Icon source={CaretDownIcon} />
+        </Box>
+      </InlineStack>
+    </div>
+  );
+};

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

@@ -0,0 +1,43 @@
+import type { RendererProps } from '../type';
+
+import { BlockStack, Box } from '@shopify/polaris';
+import { OrderCell } from './OrderCell';
+
+export type OrderCellContainerProps = Pick<
+  RendererProps,
+  'value' | 'columnLayout' | 'orderCellProps' | 'previousValue' | 'isTotalRow' | 'isMockData'
+>;
+export const OrderCellContainer: React.FC<OrderCellContainerProps> = ({
+  value,
+  columnLayout,
+  orderCellProps,
+  previousValue,
+  isTotalRow,
+  isMockData,
+}) => {
+  return (
+    <BlockStack align="center">
+      <Box width="100%">
+        <OrderCell
+          value={value}
+          columnLayout={columnLayout}
+          orderCellProps={orderCellProps}
+          isTotalRow={isTotalRow}
+          isMockData={isMockData}
+        />
+      </Box>
+      {typeof previousValue === 'string' && (
+        <Box width="100%">
+          <OrderCell
+            value={previousValue}
+            columnLayout={columnLayout}
+            orderCellProps={orderCellProps}
+            isPrevious
+            isTotalRow={isTotalRow}
+            isMockData={isMockData}
+          />
+        </Box>
+      )}
+    </BlockStack>
+  );
+};

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

@@ -0,0 +1,79 @@
+import type { ReportRowType } from '@/shared/reports/common/Visualization/types';
+
+import { dayjsTz } from '@/utils/dayjs';
+import { BlockStack, Box, Button, Icon, InlineStack, Text, Tooltip } from '@shopify/polaris';
+import { ChartLineIcon, OrderIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { useReportTableActionsContext } from '../../../../context/ReportTableActionsContext';
+import { EReportColumnKey } from '../../../../types/report-columns';
+
+export interface Order {
+  id: string;
+  createdAt: string;
+}
+
+interface OrderItemProps {
+  order: ReportRowType;
+}
+
+export const OrderItem = ({ order }: OrderItemProps) => {
+  const { t } = useTranslation();
+
+  const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
+
+  const formatDate = (date: string) => {
+    return dayjsTz(date).format('MMMM D, YYYY [at] h:mm a');
+  };
+
+  const orderId = `${order[EReportColumnKey.ORDER_ID]}`;
+  const rawGxId = order[EReportColumnKey.GEMX_ID];
+  const gxId = rawGxId ? `${rawGxId}` : '';
+  const date = `${order[EReportColumnKey.ORDER_DATE]}`;
+
+  if (!orderId) return null;
+
+  return (
+    <Box padding="300" borderBlockEndWidth="025" borderColor="border">
+      <InlineStack align="space-between" blockAlign="center" gap="200">
+        <BlockStack gap="200">
+          <Text as="p" variant="bodyMd">
+            {`ID: ${orderId}`}
+          </Text>
+          <Text as="p" variant="bodyXs" tone="subdued">
+            {formatDate(date)}
+          </Text>
+          {gxId && (
+            <InlineStack gap="100" blockAlign="center">
+              <Text as="span" variant="bodyXs">
+                {t('GemX ID:')}
+              </Text>
+              <Box background="bg-surface-emphasis-active" paddingBlock="050" paddingInline="150" borderRadius="200">
+                <Text as="span" variant="bodySm">
+                  <span style={{ color: 'var(--p-color-text-emphasis-active)' }}>{gxId}</span>
+                </Text>
+              </Box>
+            </InlineStack>
+          )}
+        </BlockStack>
+        <InlineStack gap="100">
+          <Tooltip content={t('View order details')}>
+            <Button
+              icon={<Icon source={OrderIcon} tone="critical" />}
+              variant="tertiary"
+              size="slim"
+              onClick={() => onViewOrderDetails?.(orderId)}
+            />
+          </Tooltip>
+          <Tooltip content={t('View order journey')}>
+            <Button
+              icon={<Icon source={ChartLineIcon} tone="primary" />}
+              variant="tertiary"
+              size="slim"
+              onClick={() => onViewOrderJourney?.(orderId, gxId)}
+            />
+          </Tooltip>
+        </InlineStack>
+      </InlineStack>
+    </Box>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { OrderCell } from './OrderCell';
+export { OrderCellContainer } from './OrderCellContainer';