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

package/src/shared/journey/common/JourneyContainer/components/JourneyContainer.tsx

@@ -0,0 +1,140 @@
+import type { IEventsByDate } from '../../../ui/type';
+
+import { useState, useRef, useEffect } from 'react';
+import { JourneyGroup } from '../../../ui/JourneyGroup';
+import { JourneyTitle } from '../../../ui/JourneyTitle';
+import { Scrollable } from '@shopify/polaris';
+import { useWindowSize } from '@/hooks';
+import { isBrowser } from '@/utils';
+import { GBox } from '@/shared';
+
+interface JourneyContainerProps {
+  orderId: string;
+  eventsByDate: IEventsByDate[];
+  hasMoreSteps: boolean;
+  isFetchingMoreSteps: boolean;
+  onLoadMore: () => void;
+}
+
+export const JourneyContainer = ({
+  orderId,
+  eventsByDate,
+  hasMoreSteps,
+  isFetchingMoreSteps,
+  onLoadMore,
+}: JourneyContainerProps) => {
+  const firstEventsByDate = eventsByDate[0];
+
+  const { isMobileView } = useWindowSize();
+
+  const [currentDate, setCurrentDate] = useState(firstEventsByDate?.date || '');
+  const [showShadow, setShowShadow] = useState(false);
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const sectionRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const scrollableRef = useRef<HTMLElement | null>(null);
+  const prevIsFetchingRef = useRef(isFetchingMoreSteps);
+
+  useEffect(() => {
+    // Find the Polaris Scrollable container after mount
+    if (!isBrowser() || !scrollContainerRef.current) return;
+
+    let element = scrollContainerRef.current.parentElement;
+
+    // Traverse up to find the scrollable container
+    while (element) {
+      const overflow = getComputedStyle(element).overflowY;
+      if (overflow === 'auto' || overflow === 'scroll') {
+        scrollableRef.current = element;
+        break;
+      }
+      element = element.parentElement;
+    }
+
+    const scrollableElement = scrollableRef.current;
+    if (!scrollableElement) return;
+
+    const handleScroll = () => {
+      const scrollTop = scrollableElement.scrollTop;
+      setShowShadow(scrollTop > 10);
+
+      // Find which date section is currently visible at the top
+      let currentSection = firstEventsByDate;
+      const headerOffset = 20; // Account for fixed header height
+
+      const scrollableContainerRect = scrollableElement.getBoundingClientRect();
+
+      for (const dateGroup of eventsByDate) {
+        const element = sectionRefs.current.get(dateGroup.dateKey);
+
+        if (!element) continue;
+
+        const rect = element.getBoundingClientRect();
+
+        // If section top is above or near the header position
+        if (rect.top - scrollableContainerRect.top <= headerOffset) {
+          currentSection = dateGroup;
+        }
+      }
+
+      setCurrentDate(currentSection?.date || firstEventsByDate?.date || '');
+    };
+
+    scrollableElement.addEventListener('scroll', handleScroll);
+    handleScroll(); // Initial call
+
+    return () => scrollableElement.removeEventListener('scroll', handleScroll);
+  }, [eventsByDate, firstEventsByDate]);
+
+  const handleScrollToTop = () => {
+    if (!scrollableRef.current) return;
+    scrollableRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Auto-scroll to top when more steps are fetched
+  useEffect(() => {
+    const wasFetching = prevIsFetchingRef.current;
+    const isNowDone = !isFetchingMoreSteps;
+
+    // If we were fetching and now we're done, scroll to top
+    if (wasFetching && isNowDone) {
+      handleScrollToTop();
+    }
+
+    // Update ref for next render
+    prevIsFetchingRef.current = isFetchingMoreSteps;
+  }, [isFetchingMoreSteps]);
+
+  return (
+    <Scrollable
+      scrollbarWidth="thin"
+      vertical
+      horizontal
+      className="pb-5"
+      style={{ height: isMobileView ? '100vh' : 'calc(100vh - 120px)' }}
+    >
+      <GBox
+        ariaShadow={showShadow ? 'shadow-outset-200' : undefined}
+        position="sticky"
+        insetBlockStart="0"
+        zIndex="10"
+        background="bg-fill"
+      >
+        <JourneyTitle
+          content={currentDate}
+          id={orderId}
+          hasMoreSteps={hasMoreSteps}
+          isFetching={isFetchingMoreSteps}
+          onLoadMode={() => {
+            onLoadMore();
+            handleScrollToTop();
+          }}
+        />
+      </GBox>
+
+      <div ref={scrollContainerRef}>
+        <JourneyGroup eventsByDate={eventsByDate} sectionRefs={sectionRefs} />
+      </div>
+    </Scrollable>
+  );
+};

package/src/shared/journey/common/JourneyContainer/components/JourneyTimeline.tsx

@@ -0,0 +1,18 @@
+import { cls } from '@/utils';
+
+export const JourneyTimeline = () => {
+  const journeyItemPaddingInlineStart = 24;
+  const journeyItemTimeWidth = 48;
+  const journeyItemInlineGap = 16;
+  const eventMarkerIconSize = 28;
+  const journeyTimeLineWidth = 2;
+
+  const timelineLeft =
+    journeyItemPaddingInlineStart +
+    journeyItemTimeWidth +
+    journeyItemInlineGap +
+    eventMarkerIconSize / 2 -
+    journeyTimeLineWidth / 2;
+
+  return <div className={cls('w-[2px] absolute top-5 bottom-7 bg-[#F3F3F3] -z-[1]')} style={{ left: timelineLeft }} />;
+};

package/src/shared/journey/common/JourneyContainer/components/index.ts

@@ -0,0 +1,2 @@
+export * from './JourneyContainer';
+export * from './JourneyTimeline';

package/src/shared/journey/common/JourneyContainer/index.ts

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

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

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

package/src/shared/journey/index.ts

@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './common';

package/src/shared/journey/ui/JourneyEvents/components/AcceptedPostPurchaseOffer/AcceptedPostPurchaseOffer.tsx

@@ -0,0 +1,24 @@
+import type { IJourneyItemProps } from '../../../type';
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { ILineItem } from '@/components/OrderAnalytic/types';
+
+import { JourneyItem } from '../../../JourneyItem';
+import { DiscountIcon } from '@shopify/polaris-icons';
+import { CheckoutItems } from '../CheckoutItems';
+import { useTranslation } from 'react-i18next';
+
+export interface IAcceptedPostPurchaseOfferJourneyEvent extends IBaseJourneyEvent {
+  eventType: EJourneyEvent.CHECKOUT_COMPLETED;
+  lineItems?: ILineItem[];
+}
+
+type AcceptedPostPurchaseOfferProps = IJourneyItemProps<IAcceptedPostPurchaseOfferJourneyEvent>;
+export const AcceptedPostPurchaseOffer: React.FC<AcceptedPostPurchaseOfferProps> = ({ event }) => {
+  const { t } = useTranslation();
+
+  return (
+    <JourneyItem time={event.date} title={t('Accepted post purchase offer')} eventMarker={{ icon: DiscountIcon }}>
+      <CheckoutItems lineItems={event.lineItems ?? []} />
+    </JourneyItem>
+  );
+};

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

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

package/src/shared/journey/ui/JourneyEvents/components/CheckoutCompleted/CheckoutCompleted.tsx

@@ -0,0 +1,64 @@
+import type { IJourneyItemProps } from '../../../type';
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { ILineItem } from '@/components/OrderAnalytic/types';
+
+import { useOrderJourneyContext } from '@/components/GModalOrderJourney/context';
+import { CheckIcon, OrderIcon } from '@shopify/polaris-icons';
+import { Icon, InlineStack, Text } from '@shopify/polaris';
+import { JourneyItem } from '../../../JourneyItem';
+import { CheckoutItems } from '../CheckoutItems';
+import { useTranslation } from 'react-i18next';
+import { GDotInline } from '@/shared';
+
+export interface ICheckoutCompletedJourneyEvent extends IBaseJourneyEvent {
+  eventType: EJourneyEvent.CHECKOUT_COMPLETED;
+  lineItems?: ILineItem[];
+}
+
+export type CheckoutCompletedProps = IJourneyItemProps<ICheckoutCompletedJourneyEvent>;
+
+export const CheckoutCompleted: React.FC<CheckoutCompletedProps> = ({ event }) => {
+  const { t } = useTranslation();
+
+  const { orderId } = useOrderJourneyContext();
+  const isCheckoutCompletedEventOfCurrentOrder = event.orderID === orderId;
+
+  const titleMarkup = renderTitleMarkup();
+
+  return (
+    <JourneyItem
+      time={event.date}
+      title={titleMarkup}
+      eventMarker={{
+        icon: CheckIcon,
+        tone: isCheckoutCompletedEventOfCurrentOrder ? 'success' : 'base',
+      }}
+    >
+      <CheckoutItems lineItems={event.lineItems ?? []} />
+    </JourneyItem>
+  );
+
+  function renderTitleMarkup() {
+    return (
+      <InlineStack gap="200" blockAlign="center" wrap={false}>
+        <Text as="span" variant="bodyMd" fontWeight="medium">
+          {t('Completed checkout')}
+        </Text>
+
+        {event.orderID && (
+          <>
+            <GDotInline tone="disabled" />
+
+            <InlineStack gap="025" blockAlign="center" wrap={false}>
+              <Icon source={OrderIcon} tone="base" />
+
+              <Text as="span" variant="bodySm" tone="subdued">
+                {event.orderID}
+              </Text>
+            </InlineStack>
+          </>
+        )}
+      </InlineStack>
+    );
+  }
+};

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

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

package/src/shared/journey/ui/JourneyEvents/components/CheckoutItems.tsx

@@ -0,0 +1,27 @@
+import type { ILineItem } from '@/components/OrderAnalytic/types';
+
+import { InlineStack, Text } from '@shopify/polaris';
+import { QuantityWrapper } from '../../JourneyItem';
+import { CheckoutStartedDetail } from './CheckoutStarted';
+import { useTranslation } from 'react-i18next';
+
+interface ICheckoutItemsProps {
+  lineItems: ILineItem[];
+}
+
+export const CheckoutItems = ({ lineItems }: ICheckoutItemsProps) => {
+  const { t } = useTranslation();
+  const cartQuantity = lineItems.reduce((acc, curr) => acc + (curr.quantity ?? 0), 0);
+
+  return (
+    <InlineStack gap="100">
+      <QuantityWrapper quantity={cartQuantity} />
+
+      <Text as="span" variant="bodyMd" tone="subdued">
+        {cartQuantity > 1 ? t('items') : t('item')}
+      </Text>
+
+      <CheckoutStartedDetail lineItems={lineItems} />
+    </InlineStack>
+  );
+};

package/src/shared/journey/ui/JourneyEvents/components/CheckoutStarted/CheckoutStarted.tsx

@@ -0,0 +1,25 @@
+import type { IJourneyItemProps } from '../../../type';
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { ILineItem } from '@/components/OrderAnalytic/types';
+
+import { JourneyItem } from '../../../JourneyItem';
+import { PaymentIcon } from '@shopify/polaris-icons';
+import { CheckoutItems } from '../CheckoutItems';
+import { useTranslation } from 'react-i18next';
+
+export interface ICheckoutStartedJourneyEvent extends IBaseJourneyEvent {
+  eventType: EJourneyEvent.CHECKOUT_STARTED;
+  lineItems?: ILineItem[];
+}
+
+type CheckoutStartedProps = IJourneyItemProps<ICheckoutStartedJourneyEvent>;
+
+export const CheckoutStarted: React.FC<CheckoutStartedProps> = ({ event }) => {
+  const { t } = useTranslation();
+
+  return (
+    <JourneyItem time={event.date} title={t('Started checkout')} eventMarker={{ icon: PaymentIcon }}>
+      <CheckoutItems lineItems={event.lineItems ?? []} />
+    </JourneyItem>
+  );
+};

package/src/shared/journey/ui/JourneyEvents/components/CheckoutStarted/CheckoutStartedDetail.tsx

@@ -0,0 +1,79 @@
+import type { ILineItem } from '@/components/OrderAnalytic/types';
+import type { BoxProps } from '@shopify/polaris';
+
+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';
+
+interface ICheckoutStartedDetailProps {
+  lineItems?: ILineItem[];
+  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 flex-col gap-1 w-full">
+                    <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/journey/ui/JourneyEvents/components/CheckoutStarted/index.ts

@@ -0,0 +1,2 @@
+export * from './CheckoutStarted';
+export * from './CheckoutStartedDetail';

package/src/shared/journey/ui/JourneyEvents/components/PageViewed/PageViewed.tsx

@@ -0,0 +1,116 @@
+import type { IJourneyItemProps } from '../../../type';
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { IOrderItemPage } from '@/components/OrderAnalytic/types';
+
+import { getEventCampaignIdByType, isCampaignOfAnother } from '@/components/GModalOrderJourney/utils';
+import { GVariantBadge } from '@/shared/components/GVariantBadge';
+import { GDotInline, GI18NText, GTextTruncated } from '@/shared';
+import { JourneyItem } from '../../../JourneyItem';
+import { InlineStack, Text } from '@shopify/polaris';
+import { CursorIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { IVariantType } from '@/types';
+import { useMemo } from 'react';
+
+export interface IPageViewedJourneyEvent extends IBaseJourneyEvent, IOrderItemPage {
+  eventType: EJourneyEvent.PAGE_VIEWED;
+}
+
+type PageViewedProps = IJourneyItemProps<IPageViewedJourneyEvent>;
+export const PageViewed: React.FC<PageViewedProps> = ({ event }) => {
+  const { t } = useTranslation();
+
+  const {
+    date,
+    locationPath,
+    campaignGroupID = '',
+    campaignID = '',
+    filteredCampaignId,
+    campaignName,
+    campaignGroupName,
+    campaignVariantType,
+  } = event;
+
+  const eventCampaignName = filteredCampaignId ? '' : campaignGroupName || campaignName;
+  const isEventWithNoCampaign = !campaignVariantType;
+  const eventCampaignIdByType = getEventCampaignIdByType({
+    campaignGroupID: campaignGroupID ?? '',
+    campaignID: campaignID ?? '',
+  });
+  const isEventOfAnotherCampaign = isCampaignOfAnother({
+    campaignGroupID: campaignGroupID ?? '',
+    campaignID: campaignID ?? '',
+    filteredCampaignId,
+  });
+  const pageViewEventMarkerIcon = getPageViewEventMarkerIcon();
+  const titleMarkup = renderTitleMarkup();
+
+  const hasPadding = useMemo(() => {
+    if (isEventWithNoCampaign) return true;
+    if (!filteredCampaignId) return false;
+    return eventCampaignIdByType !== filteredCampaignId;
+  }, [filteredCampaignId, eventCampaignIdByType, isEventWithNoCampaign]);
+
+  return (
+    <JourneyItem time={date} title={titleMarkup} eventMarker={{ icon: pageViewEventMarkerIcon, hasPadding }}>
+      <InlineStack gap="200" wrap={false} blockAlign="center">
+        <div className="min-w-0 w-full">
+          <GTextTruncated as="span" variant="bodySm" tone="subdued">
+            {locationPath ?? ''}
+          </GTextTruncated>
+        </div>
+      </InlineStack>
+    </JourneyItem>
+  );
+
+  function getPageViewEventMarkerIcon() {
+    if (isEventOfAnotherCampaign) return CursorIcon;
+
+    switch (campaignVariantType) {
+      case IVariantType.VARIANT_A:
+        return <GVariantBadge variant="A" size="md" tone="active" />;
+
+      case IVariantType.VARIANT_B:
+        return <GVariantBadge variant="B" size="md" />;
+
+      default:
+        return CursorIcon;
+    }
+  }
+
+  function renderTitleMarkup() {
+    return (
+      <InlineStack gap="200" blockAlign="center" wrap={false}>
+        <span className="text-nowrap">
+          <Text as="span" variant="bodyMd" fontWeight="medium" breakWord={false}>
+            {t('Visited page')}
+          </Text>
+        </span>
+
+        {eventCampaignName && !isEventOfAnotherCampaign && (
+          <>
+            <GDotInline tone="disabled" />
+
+            <div className="min-w-0 w-full">
+              <GI18NText
+                as="span"
+                variant="bodySm"
+                tone="subdued"
+                truncate
+                transformers={{
+                  1: (name) => (
+                    <Text as="span" variant="bodySm" tone="subdued" fontWeight="medium">
+                      {name}
+                    </Text>
+                  ),
+                }}
+              >
+                {t('Experiment: [1]{{name}}[]', { name: eventCampaignName })}
+              </GI18NText>
+            </div>
+          </>
+        )}
+      </InlineStack>
+    );
+  }
+};

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

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

package/src/shared/journey/ui/JourneyEvents/components/ProductAddedToCart/ProductAddedToCart.tsx

@@ -0,0 +1,24 @@
+import type { IJourneyItemProps } from '../../../type';
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { ILineItem } from '@/components/OrderAnalytic/types';
+
+import { JourneyItem } from '../../../JourneyItem';
+import { CartIcon } from '@shopify/polaris-icons';
+import { CheckoutItems } from '../CheckoutItems';
+import { useTranslation } from 'react-i18next';
+
+export interface IProductAddedToCartJourneyEvent extends IBaseJourneyEvent {
+  eventType: EJourneyEvent.PRODUCT_ADDED_TO_CART;
+  lineItems: ILineItem[];
+}
+
+type ProductAddedToCartProps = IJourneyItemProps<IProductAddedToCartJourneyEvent>;
+export const ProductAddedToCart: React.FC<ProductAddedToCartProps> = ({ event }) => {
+  const { t } = useTranslation();
+
+  return (
+    <JourneyItem time={event.date} title={t('Added product to cart')} eventMarker={{ icon: CartIcon }}>
+      <CheckoutItems lineItems={event.lineItems ?? []} />
+    </JourneyItem>
+  );
+};

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

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

package/src/shared/journey/ui/JourneyEvents/components/ProductQuantity/ProductQuantity.tsx

@@ -0,0 +1,33 @@
+import { Box, InlineStack, Text } from '@shopify/polaris';
+import { QuantityWrapper } from '../../../JourneyItem';
+import { GTextTruncated } from '@/shared';
+
+interface ProductQuantityProps {
+  productName?: string;
+  quantity?: number;
+}
+
+export const ProductQuantity = ({ productName, quantity }: ProductQuantityProps) => {
+  if (!productName || !quantity || quantity <= 0) return null;
+
+  return (
+    <InlineStack gap="100" blockAlign="center" wrap={false}>
+      <Box overflowX="hidden" overflowY="hidden">
+        <InlineStack gap="100" wrap={false} blockAlign="center">
+          <div className="min-w-0 w-full">
+            <GTextTruncated as="span" variant="bodySm" tone="subdued">
+              {productName}
+            </GTextTruncated>
+          </div>
+
+          {/* eslint-disable-next-line i18next/no-literal-string */}
+          <Text as="span" variant="bodySm" tone="subdued">
+            x
+          </Text>
+        </InlineStack>
+      </Box>
+
+      <QuantityWrapper quantity={quantity} />
+    </InlineStack>
+  );
+};

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

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

package/src/shared/journey/ui/JourneyEvents/components/ProductRemovedFromCart/ProductRemovedFromCart.tsx

@@ -0,0 +1,24 @@
+import type { IJourneyItemProps } from '../../../type';
+import type { EJourneyEvent, IBaseJourneyEvent } from '../../types';
+import type { ILineItem } from '@/components/OrderAnalytic/types';
+
+import { ProductRemoveIcon } from '@shopify/polaris-icons';
+import { JourneyItem } from '../../../JourneyItem';
+import { CheckoutItems } from '../CheckoutItems';
+import { useTranslation } from 'react-i18next';
+
+export interface IProductRemovedFromCartJourneyEvent extends IBaseJourneyEvent {
+  eventType: EJourneyEvent.PRODUCT_REMOVED_FROM_CART;
+  lineItems: ILineItem[];
+}
+
+type ProductRemovedFromCartProps = IJourneyItemProps<IProductRemovedFromCartJourneyEvent>;
+export const ProductRemovedFromCart: React.FC<ProductRemovedFromCartProps> = ({ event }) => {
+  const { t } = useTranslation();
+
+  return (
+    <JourneyItem time={event.date} title={t('Remove product from cart')} eventMarker={{ icon: ProductRemoveIcon }}>
+      <CheckoutItems lineItems={event.lineItems ?? []} />
+    </JourneyItem>
+  );
+};

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

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

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

@@ -0,0 +1,6 @@
+export * from './AcceptedPostPurchaseOffer';
+export * from './CheckoutCompleted';
+export * from './CheckoutStarted';
+export * from './PageViewed';
+export * from './ProductAddedToCart';
+export * from './ProductRemovedFromCart';

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

@@ -0,0 +1,38 @@
+import type { IJourneyEvent, IJourneyItemProps } from '../../type';
+
+import {
+  CheckoutCompleted,
+  CheckoutStarted,
+  PageViewed,
+  ProductAddedToCart,
+  ProductRemovedFromCart,
+} from '../components';
+import { EJourneyEvent } from '../../type';
+
+const DefaultEventComponent = () => null;
+
+type ExtractByType<Union, Type> = Union extends { eventType: Type } ? Union : never;
+
+export type JourneyEventToPropsMap = {
+  [K in EJourneyEvent]: ExtractByType<IJourneyEvent, K>;
+};
+
+export type JourneyEventComponentsMap = {
+  [K in EJourneyEvent]: React.FC<IJourneyItemProps<JourneyEventToPropsMap[K]>> | null;
+};
+export const JOURNEY_EVENT_COMPONENTS_MAP: JourneyEventComponentsMap = {
+  [EJourneyEvent.ADDED_TO_CART]: DefaultEventComponent,
+  [EJourneyEvent.CHECKOUT_ADDRESS_INFO_SUBMITTED]: DefaultEventComponent,
+  [EJourneyEvent.CHECKOUT_COMPLETED]: CheckoutCompleted,
+  [EJourneyEvent.CHECKOUT_CONTACT_INFO_SUBMITTED]: DefaultEventComponent,
+  [EJourneyEvent.CHECKOUT_SHIPPING_INFO_SUBMITTED]: DefaultEventComponent,
+  [EJourneyEvent.CHECKOUT_STARTED]: CheckoutStarted,
+  [EJourneyEvent.COLLECTION_VIEWED]: DefaultEventComponent,
+  [EJourneyEvent.ORDER]: DefaultEventComponent,
+  [EJourneyEvent.PAGE_VIEWED]: PageViewed,
+  [EJourneyEvent.PAYMENT_INFO_SUBMITTED]: DefaultEventComponent,
+  [EJourneyEvent.PRODUCT_ADDED_TO_CART]: ProductAddedToCart,
+  [EJourneyEvent.PRODUCT_REMOVED_FROM_CART]: ProductRemovedFromCart,
+  [EJourneyEvent.PRODUCT_VIEWED]: DefaultEventComponent,
+  [EJourneyEvent.SEARCH_SUBMITTED]: DefaultEventComponent,
+};