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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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