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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +0,0 @@
-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/index.ts

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

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

@@ -1,8 +0,0 @@
-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/index.ts

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

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

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

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

@@ -1,3 +0,0 @@
-export * from './report';
-export * from './chart';
-export * from './report-metric';

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

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

@@ -1,42 +0,0 @@
-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/index.ts

@@ -1,2 +0,0 @@
-export * from './version';
-export * from './visualization';

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

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

@@ -1,58 +0,0 @@
-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);

package/src/shared/reports/common/index.ts

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