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

package/src/shared/journey/ui/JourneyEvents/constants/index.ts

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

package/src/shared/journey/ui/JourneyEvents/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './constants';

package/src/shared/journey/ui/JourneyEvents/types.ts

@@ -0,0 +1,2 @@
+export { EJourneyEvent } from '@/components/OrderAnalytic/types';
+export type { IBaseJourneyEvent } from '@/components/OrderAnalytic/types';

package/src/shared/journey/ui/JourneyGroup/JourneyGroup.tsx

@@ -0,0 +1,41 @@
+import type { IEventsByDate, IJourneyEvent, IJourneyItemProps } from '../JourneyItem';
+
+import { JOURNEY_EVENT_COMPONENTS_MAP } from '../JourneyEvents';
+import { JourneyTimeline } from '../../common';
+import { JourneyTitle } from '../JourneyTitle';
+
+interface JourneyGroupProps {
+  eventsByDate: IEventsByDate[];
+  sectionRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
+}
+
+export const JourneyGroup = ({ eventsByDate, sectionRefs }: JourneyGroupProps) => {
+  return eventsByDate.map(({ dateKey, date, events }, index) => {
+    const isLatestDate = index === 0;
+
+    return (
+      <div
+        key={dateKey}
+        ref={(el) => {
+          if (el) sectionRefs.current.set(dateKey, el);
+        }}
+        className="relative"
+      >
+        {!isLatestDate && <JourneyTitle content={date} />}
+
+        {events.map((event, eventIndex) => (
+          <JourneyEventRenderer key={`${event.eventType}-${event.date}-${eventIndex}`} event={event} />
+        ))}
+
+        <JourneyTimeline />
+      </div>
+    );
+  });
+};
+
+function JourneyEventRenderer<T extends IJourneyEvent>({ event }: { event: T }) {
+  const Component = JOURNEY_EVENT_COMPONENTS_MAP[event.eventType] as React.FC<IJourneyItemProps<T>>;
+  if (!Component) return null;
+
+  return <Component event={event} />;
+}

package/src/shared/journey/ui/JourneyGroup/index.ts

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

package/src/shared/journey/ui/JourneyItem/components/EventMarkerIcon.tsx

@@ -0,0 +1,28 @@
+import type { BoxProps, IconSource } from '@shopify/polaris';
+import type { IEventMarker } from '..';
+
+import { Box, Icon } from '@shopify/polaris';
+
+export const EventMarkerIcon: React.FC<IEventMarker> = ({ icon, tone = 'base', hasPadding = true }) => {
+  const wrapperBackground = getWrapperBackground();
+  const iconSource = isIconSource(icon) ? <Icon source={icon} tone={tone} /> : icon;
+
+  return (
+    <Box padding={hasPadding ? '100' : '0'} background={wrapperBackground} borderRadius="full">
+      {iconSource}
+    </Box>
+  );
+
+  function getWrapperBackground(): BoxProps['background'] {
+    switch (tone) {
+      case 'success':
+        return 'bg-surface-success';
+      default:
+        return 'bg-surface-secondary';
+    }
+  }
+
+  function isIconSource(x: any): x is IconSource {
+    return typeof x === 'string' || (typeof x === 'object' && x.body) || typeof x === 'function';
+  }
+};

package/src/shared/journey/ui/JourneyItem/components/JourneyDetail.tsx

@@ -0,0 +1,24 @@
+import { BlockStack, Box, Text } from '@shopify/polaris';
+
+export interface JourneyDetailProps {
+  title: string | React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const JourneyDetail = ({ title, children }: JourneyDetailProps) => {
+  return (
+    <Box padding="300" overflowX="hidden">
+      <BlockStack gap="050">
+        {typeof title === 'string' ? (
+          <Text as="span" variant="bodyMd" fontWeight="medium">
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
+
+        {children}
+      </BlockStack>
+    </Box>
+  );
+};

package/src/shared/journey/ui/JourneyItem/components/JourneyItem.tsx

@@ -0,0 +1,27 @@
+import type { IEventMarker } from '../types';
+
+import { EventMarkerIcon } from './EventMarkerIcon';
+import { Box, InlineStack } from '@shopify/polaris';
+import { JourneyDetail } from './JourneyDetail';
+import { JourneyTime } from './JourneyTime';
+
+interface JourneyItemProps {
+  time: string;
+  title: string | React.ReactNode;
+  eventMarker: IEventMarker;
+  children?: React.ReactNode;
+}
+
+export const JourneyItem = ({ time, title, eventMarker, children }: JourneyItemProps) => {
+  return (
+    <Box paddingInlineStart="600">
+      <InlineStack blockAlign="center" gap="400" wrap={false}>
+        <JourneyTime time={time} />
+
+        <EventMarkerIcon {...eventMarker} />
+
+        <JourneyDetail title={title}>{children}</JourneyDetail>
+      </InlineStack>
+    </Box>
+  );
+};

package/src/shared/journey/ui/JourneyItem/components/JourneyTime.tsx

@@ -0,0 +1,33 @@
+import { formatDateBy } from '@/utils';
+import { Text } from '@shopify/polaris';
+
+export enum JourneyTimeFormat {
+  HH_MM_SS = 'HH:mm:ss',
+}
+
+interface JourneyItemProps {
+  time: string;
+  format?: JourneyTimeFormat;
+}
+
+export const JourneyTime = ({ time, format = JourneyTimeFormat.HH_MM_SS }: JourneyItemProps) => {
+  const formattedTime = formatDateBy(format, time);
+  const width = getWidthByFormat();
+
+  return (
+    <div style={{ minWidth: width, maxWidth: width }}>
+      <Text as="span" variant="bodyXs">
+        {formattedTime}
+      </Text>
+    </div>
+  );
+
+  function getWidthByFormat(): string {
+    switch (format) {
+      case JourneyTimeFormat.HH_MM_SS:
+        return '48px';
+      default:
+        return '48px';
+    }
+  }
+};

package/src/shared/journey/ui/JourneyItem/components/QuantityWrapper.tsx

@@ -0,0 +1,17 @@
+import { Box, Text } from '@shopify/polaris';
+
+interface QuantityWrapperProps {
+  quantity?: number;
+}
+
+export const QuantityWrapper = ({ quantity }: QuantityWrapperProps) => {
+  if (!quantity) return null;
+
+  return (
+    <Box paddingBlock="050" paddingInline="200" borderRadius="200" background="bg-fill-secondary" minWidth="24px">
+      <Text as="span" variant="bodySm" fontWeight="medium" tone="subdued" alignment="center">
+        {quantity}
+      </Text>
+    </Box>
+  );
+};

package/src/shared/journey/ui/JourneyItem/components/index.ts

@@ -0,0 +1,3 @@
+export * from './EventMarkerIcon';
+export * from './JourneyItem';
+export * from './QuantityWrapper';

package/src/shared/journey/ui/JourneyItem/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/src/shared/journey/ui/JourneyItem/types/events.ts

@@ -0,0 +1,33 @@
+import type {
+  ICheckoutCompletedJourneyEvent,
+  ICheckoutStartedJourneyEvent,
+  IPageViewedJourneyEvent,
+  IProductAddedToCartJourneyEvent,
+  IProductRemovedFromCartJourneyEvent,
+} from '../../JourneyEvents';
+import type { IconProps, IconSource } from '@shopify/polaris';
+import type { ReactNode } from 'react';
+
+export type IJourneyEvent =
+  | ICheckoutCompletedJourneyEvent
+  | ICheckoutStartedJourneyEvent
+  | IPageViewedJourneyEvent
+  | IProductAddedToCartJourneyEvent
+  | IProductRemovedFromCartJourneyEvent;
+
+export interface IJourneyItemProps<T extends IJourneyEvent> {
+  event: T;
+}
+
+export interface IEventMarker {
+  icon: IconSource | ReactNode;
+  tone?: IconProps['tone'];
+  hasPadding?: boolean;
+}
+
+export interface IEventsByDate {
+  date: string;
+  dateKey: string;
+  filteredCampaignId?: string;
+  events: IJourneyEvent[];
+}

package/src/shared/journey/ui/JourneyItem/types/index.ts

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

package/src/shared/journey/ui/JourneyTitle/components/GemxIdBadge.tsx

@@ -0,0 +1,38 @@
+import { useOrderJourneyContext } from '@/components/GModalOrderJourney/context';
+import { GI18NText } from '@/shared';
+import { Text } from '@shopify/polaris';
+import { useTranslation } from 'react-i18next';
+import { ID_BADGE_SEPARATOR } from '../constants';
+
+export const GemxIdBadge = () => {
+  const { t } = useTranslation();
+  const { gxId } = useOrderJourneyContext();
+
+  if (!gxId) return null;
+
+  return (
+    <div className="flex min-w-0 items-center" style={{ gap: 'var(--p-space-200)' }}>
+      <span className="shrink-0">
+        <Text as="span" tone="subdued">
+          {ID_BADGE_SEPARATOR}
+        </Text>
+      </span>
+      <span className="min-w-0 truncate text-[var(--p-color-text-emphasis)]">
+        <GI18NText
+          as="span"
+          variant="bodyMd"
+          tone="subdued"
+          transformers={{
+            1: (text) => (
+              <Text as="span" variant="bodyMd" fontWeight="medium" tone="base">
+                {text}
+              </Text>
+            ),
+          }}
+        >
+          {t('GemX ID: [1]{{gxId}}[]', { gxId })}
+        </GI18NText>
+      </span>
+    </div>
+  );
+};

package/src/shared/journey/ui/JourneyTitle/components/JourneyDateBadge.tsx

@@ -0,0 +1,18 @@
+import { GBlockCenter } from '@/shared';
+import { Box, Text } from '@shopify/polaris';
+
+interface JourneyBadgeProps {
+  content: string;
+}
+
+export const JourneyDateBadge = ({ content }: JourneyBadgeProps) => {
+  return (
+    <Box background="bg-surface-secondary" paddingBlock="100" paddingInline="200" borderRadius="200">
+      <GBlockCenter>
+        <Text as="p" variant="bodyMd" fontWeight="medium">
+          {content}
+        </Text>
+      </GBlockCenter>
+    </Box>
+  );
+};

package/src/shared/journey/ui/JourneyTitle/components/JourneyIdBadge.tsx

@@ -0,0 +1,65 @@
+import { useOrderJourneyContext } from '@/components/GModalOrderJourney/context';
+import { GI18NText, GTooltip } from '@/shared';
+import { Box, Icon, Text } from '@shopify/polaris';
+import { ExternalSmallIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { GemxIdBadge } from './GemxIdBadge';
+
+interface JourneyIdBadgeProps {
+  id: string;
+  type?: 'order';
+}
+
+export const JourneyIdBadge = ({ id, type = 'order' }: JourneyIdBadgeProps) => {
+  const { t } = useTranslation();
+
+  const idContent = getIdContent();
+  const { onViewOrderDetails } = useOrderJourneyContext();
+
+  return (
+    <Box
+      background="bg-surface-secondary-active"
+      paddingBlock="100"
+      paddingInline="200"
+      borderRadius="200"
+      minWidth="0"
+    >
+      <div className="flex min-w-0 items-center" style={{ gap: 'var(--p-space-200)' }}>
+        <GTooltip content={t('View order details')}>
+          <div className="flex shrink-0 cursor-pointer items-center gap-1" onClick={() => onViewOrderDetails?.(id)}>
+            <GI18NText
+              as="p"
+              variant="bodyMd"
+              fontWeight="medium"
+              tone="subdued"
+              transformers={{
+                1: (text) => {
+                  return (
+                    <Text as="span" tone="base">
+                      {text}
+                    </Text>
+                  );
+                },
+              }}
+            >
+              {idContent}
+            </GI18NText>
+
+            <Icon source={ExternalSmallIcon} />
+          </div>
+        </GTooltip>
+
+        <GemxIdBadge />
+      </div>
+    </Box>
+  );
+
+  function getIdContent() {
+    switch (type) {
+      case 'order':
+        return t('Order ID: [1]{{id}}[]', { id });
+      default:
+        return id;
+    }
+  }
+};

package/src/shared/journey/ui/JourneyTitle/components/JourneyLoadMore.tsx

@@ -0,0 +1,43 @@
+import type { BoxProps } from '@shopify/polaris';
+
+import { GSpinner } from '@/shared';
+import { Box, Icon } from '@shopify/polaris';
+import { ChevronUpIcon } from '@shopify/polaris-icons';
+import { useState } from 'react';
+
+const BOX_BACKGROUND: Record<string, BoxProps['background']> = {
+  default: 'bg-surface-secondary-active',
+  onHover: 'bg-surface-secondary',
+} as const;
+
+interface JourneyLoadMoreProps {
+  isFetching: boolean;
+  onLoadMode: () => void;
+}
+
+export const JourneyLoadMore = ({ isFetching, onLoadMode }: JourneyLoadMoreProps) => {
+  const [boxBackground, setBoxBackground] = useState<(typeof BOX_BACKGROUND)[keyof typeof BOX_BACKGROUND]>(
+    BOX_BACKGROUND.default,
+  );
+
+  if (isFetching) {
+    return (
+      <Box paddingBlock="100" paddingInline="300" background={BOX_BACKGROUND.onHover} borderRadius="200">
+        <GSpinner size="small" />
+      </Box>
+    );
+  }
+
+  return (
+    <div
+      className="cursor-pointer"
+      onMouseEnter={() => setBoxBackground(BOX_BACKGROUND.onHover)}
+      onMouseLeave={() => setBoxBackground(BOX_BACKGROUND.default)}
+      onClick={onLoadMode}
+    >
+      <Box paddingBlock="100" paddingInline="200" background={boxBackground} borderRadius="200">
+        <Icon source={ChevronUpIcon} />
+      </Box>
+    </div>
+  );
+};

package/src/shared/journey/ui/JourneyTitle/components/JourneyTitle.tsx

@@ -0,0 +1,42 @@
+import { Box } from '@shopify/polaris';
+import { JourneyDateBadge } from './JourneyDateBadge';
+import { JourneyIdBadge } from './JourneyIdBadge';
+import { JourneyLoadMore } from './JourneyLoadMore';
+
+interface JourneyTitleProps {
+  content: string;
+  id?: string;
+  hasMoreSteps?: boolean;
+  isFetching?: boolean;
+  onLoadMode?: () => void;
+}
+
+export const JourneyTitle = ({ content, id, hasMoreSteps, isFetching = false, onLoadMode }: JourneyTitleProps) => {
+  const isStickyHeader = !!id;
+  const isShowLoadMore = isStickyHeader && hasMoreSteps && onLoadMode;
+
+  return (
+    <Box paddingBlock="300" paddingInline="400" position="relative">
+      <div className="flex items-center justify-between gap-1">
+        <div className="flex min-w-0 items-center" style={{ gap: 'var(--p-space-400)' }}>
+          <div className="shrink-0">
+            <JourneyDateBadge content={content} />
+          </div>
+          {id && <JourneyIdBadge id={id} />}
+        </div>
+
+        {isShowLoadMore && (
+          <div className="shrink-0">
+            <JourneyLoadMore isFetching={isFetching} onLoadMode={onLoadMode} />
+          </div>
+        )}
+      </div>
+
+      <JourneyTitleLine />
+    </Box>
+  );
+};
+
+const JourneyTitleLine = () => {
+  return <div className="bg-border absolute left-0 right-0 top-[50%] -z-[1] h-[1px] translate-y-[-50%]" />;
+};

package/src/shared/journey/ui/JourneyTitle/components/index.ts

@@ -0,0 +1,2 @@
+export * from './GemxIdBadge';
+export * from './JourneyTitle';

package/src/shared/journey/ui/JourneyTitle/constants/idBadge.ts

@@ -0,0 +1 @@
+export const ID_BADGE_SEPARATOR = '·';

package/src/shared/journey/ui/JourneyTitle/constants/index.ts

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

package/src/shared/journey/ui/JourneyTitle/index.ts

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

package/src/shared/journey/ui/index.ts

@@ -0,0 +1,3 @@
+export * from './JourneyTitle';
+export * from './JourneyItem';
+export * from './JourneyEvents';

package/src/shared/journey/ui/type.ts

@@ -0,0 +1,2 @@
+export * from './JourneyItem/types';
+export * from './JourneyEvents/types';

package/src/shared/reports/common/Visualization/constants/columns.ts

@@ -0,0 +1,6 @@
+export const COLUMN_SEPARATOR = '___';
+export const DIMENSION_SEPARATOR = '__';
+
+export const COMPARISON_PREFIX = 'comparison';
+export const PREVIOUS_PERIOD_KEY = 'previous_period';
+export const TOTAL_SUFFIX = 'totals';

package/src/shared/reports/common/Visualization/constants/version.ts

@@ -0,0 +1,8 @@
+import { IRVariantType } from '../types';
+
+export const VERSIONS = [IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
+
+export const LABEL_BY_VARIANT_KEY = {
+  [IRVariantType.VARIANT_A]: 'Control',
+  [IRVariantType.VARIANT_B]: 'Variant',
+};

package/src/shared/reports/common/Visualization/types/chart.ts

@@ -0,0 +1,5 @@
+export enum EReportChart {
+  LINE = 'LINE',
+  GROUP_BAR = 'GROUP_BAR',
+  SIMPLE_BAR = 'SIMPLE_BAR',
+}

package/src/shared/reports/common/Visualization/types/report-metric.ts

@@ -0,0 +1,21 @@
+export enum IRMetricKey {
+  SESSION = 'sessions',
+  ORDERS = 'orders',
+  PAGE_VIEWS = 'pageviews',
+  VISITORS = 'visitors',
+  BOUNCE_RATE = 'bounce_rate',
+  CTR = 'ctr',
+  CONVERSION_RATE = 'conversion_rate',
+  AVG_TIME_ON_PAGE = 'average_time_on_page',
+  ADDED_TO_CART = 'added_to_cart',
+  ADD_TO_CART_RATE = 'added_to_cart_rate',
+  REACHED_CHECKOUT = 'sessions_that_reached_checkout',
+  COMPLETE_CHECKOUT = 'sessions_that_completed_checkout',
+  CART_ADDITION = 'sessions_with_cart_additions',
+  AOV = 'aov',
+  REVENUE = 'revenue',
+  RPV = 'revenue_per_visitor',
+  SESSION_BY_DEVICE_TYPE = 'device',
+  SESSION_BY_TRAFFIC_SOURCE = 'traffic_source',
+  VISITOR_BY_TYPE = 'visitor_type',
+}

package/src/shared/reports/common/Visualization/types/report.ts

@@ -0,0 +1,42 @@
+import { IVariantType } from '@/components';
+import type { GTooltipCardProps } from '@/shared/components';
+import type { IOrderItem } from '@/shared/reports/ui/ReportTable/types/order';
+
+export enum EReportDataType {
+  DATE = 'DATE',
+  ARRAY = 'ARRAY',
+  OBJECT = 'OBJECT',
+  STRING = 'STRING',
+  INTEGER = 'INTEGER',
+  CURRENCY = 'CURRENCY',
+  PERCENT = 'PERCENT',
+  DURATION = 'DURATION',
+  MONTH = 'MONTH_TIMESTAMP',
+  QUARTER = 'QUARTER_TIMESTAMP',
+  DAY = 'DAY_TIMESTAMP',
+  WEEK = 'WEEK_TIMESTAMP',
+  YEAR = 'YEAR_TIMESTAMP',
+  HOUR = 'HOUR_TIMESTAMP',
+}
+
+export interface IReportColumn {
+  name: string;
+  tooltipCardProps?: Omit<GTooltipCardProps, 'children'>;
+  displayName: string;
+  dataType: EReportDataType;
+}
+
+export type ReportPrimitiveValueType = string | number | null;
+export type ReportValueType = ReportPrimitiveValueType | IOrderItem;
+export type ReportRowType<T = ReportValueType> = Record<string, T | undefined>;
+
+export interface IReportTable<T = ReportValueType> {
+  columns: IReportColumn[];
+  rows: ReportRowType<T>[];
+}
+
+export enum IRVariantType {
+  ALL = 'all',
+  VARIANT_A = IVariantType.VARIANT_A,
+  VARIANT_B = IVariantType.VARIANT_B,
+}

package/src/shared/reports/common/Visualization/utils/version.ts

@@ -0,0 +1,9 @@
+import type { IRVariantType } from '../types';
+
+import { VERSIONS } from '../constants';
+
+export const getVersions = (version?: IRVariantType) => {
+  if (version === 'all') return VERSIONS;
+
+  return VERSIONS.filter((item) => item === version);
+};

package/src/shared/reports/common/Visualization/utils/visualization.ts

@@ -0,0 +1,58 @@
+import type { ReportRowType } from '../types';
+import type { IRMetricKey } from '../types/report-metric';
+
+import {
+  COLUMN_SEPARATOR,
+  COMPARISON_PREFIX,
+  DIMENSION_SEPARATOR,
+  PREVIOUS_PERIOD_KEY,
+  TOTAL_SUFFIX,
+} from '../constants';
+
+const joinColumnParts = (...parts: string[]) => parts.join(COLUMN_SEPARATOR);
+const getDimensionPathKey = (dimensions: string[], dimensionIndex: number) =>
+  dimensions.slice(0, dimensionIndex + 1).join(DIMENSION_SEPARATOR);
+
+export function getPreviousColumnName(key: IRMetricKey | string) {
+  return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY);
+}
+
+export function getPreviousTotalColumnName(key: IRMetricKey | string) {
+  return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, TOTAL_SUFFIX);
+}
+
+export function getTotalColumnName(key: IRMetricKey | string) {
+  return joinColumnParts(key, TOTAL_SUFFIX);
+}
+
+export function getTotalColumnNameByDimensions(dimensions: string[], key: string, dimensionIndex: number) {
+  return joinColumnParts(key, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
+}
+
+export function getPreviousTotalColumnNameByDimensions(dimensions: string[], key: string, dimensionIndex: number) {
+  return joinColumnParts(
+    COMPARISON_PREFIX,
+    key,
+    PREVIOUS_PERIOD_KEY,
+    getDimensionPathKey(dimensions, dimensionIndex),
+    TOTAL_SUFFIX,
+  );
+}
+
+export function getMetricValue(row: ReportRowType, key: IRMetricKey | string) {
+  return row[key] || 0;
+}
+
+export function getMetricPreviousValue(row: ReportRowType, key: IRMetricKey | string) {
+  return row[getPreviousColumnName(key)];
+}
+
+export function getMetricTotalValue(row: ReportRowType, key: IRMetricKey | string) {
+  return Number(row[getTotalColumnName(key)]) || 0;
+}
+
+export function getMetricPreviousTotalValue(row: ReportRowType, key: IRMetricKey | string) {
+  return Number(row[getPreviousTotalColumnName(key)]) || 0;
+}
+
+export const isMainColumn = (columnName: string) => !columnName.includes(COLUMN_SEPARATOR);