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

package/src/hooks/usePopoverResizeObserver.ts

@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+
+interface IUsePopoverResizeObserverOptions {
+  active: boolean;
+  onHeightChange?: (height: number) => void;
+  selector?: string;
+}
+
+export const usePopoverResizeObserver = ({
+  active,
+  onHeightChange,
+  selector = '.Polaris-Popover__Content--fluidContent',
+}: IUsePopoverResizeObserverOptions): void => {
+  useEffect(() => {
+    if (!active) return;
+
+    let resizeObserver: ResizeObserver | null = null;
+    const setupResizeObserver = (): void => {
+      const popoverContent = document.querySelector(selector);
+      if (popoverContent && !resizeObserver) {
+        resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            const { height } = entry.contentRect;
+            onHeightChange?.(height);
+          }
+        });
+
+        resizeObserver.observe(popoverContent);
+      }
+    };
+    const timer = setTimeout(() => {
+      setupResizeObserver();
+    }, 200);
+
+    return () => {
+      clearTimeout(timer);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+    };
+  }, [active, selector]);
+};

package/src/hooks/usePreventBodyScroll.ts

@@ -0,0 +1,15 @@
+import { isBrowser } from '@/utils';
+import { useEffect } from 'react';
+
+export const usePreventBodyScroll = ({ enable }: { enable: boolean }) => {
+  useEffect(() => {
+    if (!enable || !isBrowser()) return;
+
+    // Prevent layout shift from scrollbar removal
+    document.body.style.overflowY = 'hidden';
+
+    return () => {
+      document.body.style.overflowY = 'unset';
+    };
+  }, [enable]);
+};

package/src/hooks/useSearchParams.ts

@@ -0,0 +1,7 @@
+// Framework-agnostic replacement for @remix-run/react useSearchParams.
+// Returns a read-only URLSearchParams from window.location.search so the SDK
+// works outside of a Remix/React Router context (e.g. Next.js, plain React).
+export const useSearchParams = (): [URLSearchParams] => {
+  const params = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : new URLSearchParams();
+  return [params];
+};

package/src/hooks/useToggle.ts

@@ -0,0 +1,23 @@
+import { useCallback, useState } from 'react';
+
+interface IUseToggleReturn {
+  value: boolean;
+  toggle: () => void;
+  setTrue: () => void;
+  setFalse: () => void;
+}
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+export function useToggle(initialState: boolean): IUseToggleReturn {
+  const [value, setState] = useState(initialState);
+
+  return {
+    value,
+    toggle: useCallback(() => setState((state) => !state), []),
+    setTrue: useCallback(() => setState(true), []),
+    setFalse: useCallback(() => setState(false), []),
+  };
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './components';
+export * from './constants';
+export * from './hooks/publish';
+export * from './providers';
+export * from './stores';
+export * from './utils/dayjs';
+
+export * from './shared/reports/ui/ReportTable/ReportTable';
+export { ReportTableSkeleton } from './shared/reports/ui/ReportTable/ReportTableSkeleton';
+export { formatReportData } from './shared/reports/ui/ReportTable/utils/format';

package/src/modules/analytics/constants/index.ts

@@ -0,0 +1,124 @@
+import {
+  getAddToCartRateMetric,
+  getAverageOrderValueMetric,
+  getAverageTimeOnPageMetric,
+  getBounceRateMetric,
+  getConversionRateMetric,
+  getLinkCtrMetric,
+  getNewReturningCustomerMetric,
+  getPathAnalysisMetric,
+  getRevenuePerVisitorMetric,
+  getTotalATCMetric,
+  getTotalOrderMetric,
+  getTotalPageViewMetric,
+  getTotalRevenueMetric,
+  getTotalSessionByDeviceMetric,
+  getTotalSessionCompletedCheckoutMetric,
+  getTotalSessionMetric,
+  getTotalSessionReachedCheckoutMetric,
+  getTotalSessionWithCartAdditionMetric,
+  getTotalVisitorMetric,
+} from '../utils';
+import type { IFunctionGetMetric } from '../types';
+import { IPAMetricKey } from '../types';
+
+interface IPageAnalyticMappingItem {
+  heading: { title: string };
+  getMetricValue: IFunctionGetMetric;
+}
+
+export const PA_METRIC_TOOLTIP: Record<IPAMetricKey, unknown> = {} as Record<IPAMetricKey, unknown>;
+
+export const SHOPIFY_PAGE_TYPE_KEY = 'shopify_page_type';
+
+export const METRICS_COLUMNS: Record<IPAMetricKey, { label: string }> = {
+  [IPAMetricKey.PAGE_SESSIONS]: { label: 'Sessions' },
+  [IPAMetricKey.PAGE_BR]: { label: 'Bounce rate' },
+  [IPAMetricKey.PAGE_CTR]: { label: 'Click-through rate' },
+  [IPAMetricKey.PAGE_CR]: { label: 'Conversion rate' },
+  [IPAMetricKey.PAGE_VISITORS]: { label: 'Visitors' },
+  [IPAMetricKey.PAGE_AVG_TIME]: { label: 'Avg time on page' },
+  [IPAMetricKey.PAGE_VIEWS]: { label: 'Pageviews' },
+  [IPAMetricKey.PAGE_REVENUE]: { label: 'Revenue' },
+  [IPAMetricKey.PAGE_ADDED_TO_CART]: { label: 'Added to cart' },
+  [IPAMetricKey.PAGE_REACHED_CHECKOUT]: { label: 'Sessions that reached checkout' },
+  [IPAMetricKey.PAGE_COMPLETE_CHECKOUT]: { label: 'Sessions that completed checkout' },
+  [IPAMetricKey.PAGE_RPV]: { label: 'Revenue per visitor' },
+  [IPAMetricKey.PAGE_CART_ADDITION]: { label: 'Sessions with cart additions' },
+  [IPAMetricKey.PAGE_ADD_TO_CART_RATE]: { label: 'Add to cart rate' },
+  [IPAMetricKey.PAGE_ORDERS]: { label: 'Orders' },
+  [IPAMetricKey.PAGE_AOV]: { label: 'Average order value' },
+  [IPAMetricKey.PAGE_SESSIONS_BY_VISITOR]: { label: 'Visitor by type' },
+  [IPAMetricKey.PAGE_SESSIONS_BY_TRAFFIC]: { label: 'Sessions by traffic source' },
+  [IPAMetricKey.PAGE_PATH_ANALYSIS]: { label: 'Journey analysis' },
+  [IPAMetricKey.PAGE_SESSIONS_BY_DEVICE]: { label: 'Sessions by device type' },
+  [IPAMetricKey.PAGE_NEW_RETURNING_CUSTOMER]: { label: 'New vs returning visitors' },
+};
+
+const getHeading = (key: IPAMetricKey): { title: string } => ({ title: METRICS_COLUMNS[key].label });
+
+export const PAGE_ANALYTIC_MAPPING: Record<IPAMetricKey, IPageAnalyticMappingItem> = {
+  [IPAMetricKey.PAGE_SESSIONS]: {
+    getMetricValue: getTotalSessionMetric,
+    heading: getHeading(IPAMetricKey.PAGE_SESSIONS),
+  },
+  [IPAMetricKey.PAGE_BR]: { getMetricValue: getBounceRateMetric, heading: getHeading(IPAMetricKey.PAGE_BR) },
+  [IPAMetricKey.PAGE_CTR]: { getMetricValue: getLinkCtrMetric, heading: getHeading(IPAMetricKey.PAGE_CTR) },
+  [IPAMetricKey.PAGE_CR]: { getMetricValue: getConversionRateMetric, heading: getHeading(IPAMetricKey.PAGE_CR) },
+  [IPAMetricKey.PAGE_VISITORS]: {
+    getMetricValue: getTotalVisitorMetric,
+    heading: getHeading(IPAMetricKey.PAGE_VISITORS),
+  },
+  [IPAMetricKey.PAGE_AVG_TIME]: {
+    getMetricValue: getAverageTimeOnPageMetric,
+    heading: getHeading(IPAMetricKey.PAGE_AVG_TIME),
+  },
+  [IPAMetricKey.PAGE_VIEWS]: { getMetricValue: getTotalPageViewMetric, heading: getHeading(IPAMetricKey.PAGE_VIEWS) },
+  [IPAMetricKey.PAGE_REVENUE]: {
+    getMetricValue: getTotalRevenueMetric,
+    heading: getHeading(IPAMetricKey.PAGE_REVENUE),
+  },
+  [IPAMetricKey.PAGE_ADDED_TO_CART]: {
+    getMetricValue: getTotalATCMetric,
+    heading: getHeading(IPAMetricKey.PAGE_ADDED_TO_CART),
+  },
+  [IPAMetricKey.PAGE_REACHED_CHECKOUT]: {
+    getMetricValue: getTotalSessionReachedCheckoutMetric,
+    heading: getHeading(IPAMetricKey.PAGE_REACHED_CHECKOUT),
+  },
+  [IPAMetricKey.PAGE_COMPLETE_CHECKOUT]: {
+    getMetricValue: getTotalSessionCompletedCheckoutMetric,
+    heading: getHeading(IPAMetricKey.PAGE_COMPLETE_CHECKOUT),
+  },
+  [IPAMetricKey.PAGE_RPV]: { getMetricValue: getRevenuePerVisitorMetric, heading: getHeading(IPAMetricKey.PAGE_RPV) },
+  [IPAMetricKey.PAGE_CART_ADDITION]: {
+    getMetricValue: getTotalSessionWithCartAdditionMetric,
+    heading: getHeading(IPAMetricKey.PAGE_CART_ADDITION),
+  },
+  [IPAMetricKey.PAGE_ADD_TO_CART_RATE]: {
+    getMetricValue: getAddToCartRateMetric,
+    heading: getHeading(IPAMetricKey.PAGE_ADD_TO_CART_RATE),
+  },
+  [IPAMetricKey.PAGE_ORDERS]: { getMetricValue: getTotalOrderMetric, heading: getHeading(IPAMetricKey.PAGE_ORDERS) },
+  [IPAMetricKey.PAGE_AOV]: { getMetricValue: getAverageOrderValueMetric, heading: getHeading(IPAMetricKey.PAGE_AOV) },
+  [IPAMetricKey.PAGE_SESSIONS_BY_VISITOR]: {
+    getMetricValue: getTotalVisitorMetric,
+    heading: getHeading(IPAMetricKey.PAGE_SESSIONS_BY_VISITOR),
+  },
+  [IPAMetricKey.PAGE_SESSIONS_BY_TRAFFIC]: {
+    getMetricValue: getTotalSessionMetric,
+    heading: getHeading(IPAMetricKey.PAGE_SESSIONS_BY_TRAFFIC),
+  },
+  [IPAMetricKey.PAGE_PATH_ANALYSIS]: {
+    getMetricValue: getPathAnalysisMetric,
+    heading: getHeading(IPAMetricKey.PAGE_PATH_ANALYSIS),
+  },
+  [IPAMetricKey.PAGE_SESSIONS_BY_DEVICE]: {
+    getMetricValue: getTotalSessionByDeviceMetric,
+    heading: getHeading(IPAMetricKey.PAGE_SESSIONS_BY_DEVICE),
+  },
+  [IPAMetricKey.PAGE_NEW_RETURNING_CUSTOMER]: {
+    getMetricValue: getNewReturningCustomerMetric,
+    heading: getHeading(IPAMetricKey.PAGE_NEW_RETURNING_CUSTOMER),
+  },
+};

package/src/modules/analytics/index.ts

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

package/src/modules/analytics/types/index.ts

@@ -0,0 +1,43 @@
+import type { IBasePageAnalyticMetric } from '@/types/metric';
+
+export enum IPAMetricKey {
+  PAGE_SESSIONS = 'PAGE_SESSIONS',
+  PAGE_BR = 'PAGE_BOUNCE_RATE',
+  PAGE_CTR = 'PAGE_CLICK_THROUGH_RATE',
+  PAGE_AVG_TIME = 'PAGE_AVG_TIME',
+  PAGE_VIEWS = 'PAGE_VIEWS',
+  PAGE_RPV = 'PAGE_REVENUE_PER_VISITOR',
+  PAGE_REVENUE = 'PAGE_REVENUE',
+  PAGE_NEW_RETURNING_CUSTOMER = 'PAGE_NEW_RETURNING_CUSTOMER',
+  PAGE_SESSIONS_BY_VISITOR = 'PAGE_SESSIONS_BY_VISITOR',
+  PAGE_SESSIONS_BY_DEVICE = 'PAGE_SESSIONS_BY_DEVICE',
+  PAGE_SESSIONS_BY_TRAFFIC = 'PAGE_SESSIONS_BY_TRAFFIC',
+  PAGE_PATH_ANALYSIS = 'PAGE_PATH_ANALYSIS',
+  PAGE_CART_ADDITION = 'PAGE_SESSION_WITH_CART_ADDITION',
+  PAGE_ADDED_TO_CART = 'PAGE_ADDED_TO_CART',
+  PAGE_ADD_TO_CART_RATE = 'ADD_TO_CART_RATE',
+  PAGE_REACHED_CHECKOUT = 'PAGE_REACHED_CHECKOUT',
+  PAGE_COMPLETE_CHECKOUT = 'PAGE_COMPLETE_CHECKOUT',
+  PAGE_ORDERS = 'PAGE_ORDERS',
+  PAGE_CR = 'PAGE_CONVERSION_RATE',
+  PAGE_AOV = 'PAGE_AVERAGE_ORDER_VALUE',
+  PAGE_VISITORS = 'PAGE_VISITORS',
+}
+
+export enum IMetricFormatter {
+  PERCENTAGE_STRING = 'PERCENTAGE_STRING',
+  CURRENCY = 'CURRENCY',
+  DURATION = 'DURATION',
+  DURATION_MS = 'DURATION_MS',
+  MILLISECONDS = 'MILLISECONDS',
+  NORMAL = 'NORMAL',
+  NUMBER_COMMAS = 'NUMBER_COMMAS',
+  NUMBER_COMMAS_LEAN = 'NUMBER_COMMAS_LEAN',
+}
+
+export interface IDetectMetricResult<K = number | undefined> {
+  formatter: IMetricFormatter;
+  value: K;
+}
+
+export type IFunctionGetMetric<T = IBasePageAnalyticMetric> = (props: { metric?: T }) => IDetectMetricResult;

package/src/modules/analytics/utils/formatMetric.ts

@@ -0,0 +1,42 @@
+import type { IGetTextPrice } from '@/core/gemxql';
+
+import { calcPercentageString, getTimeDurationLabel, numberWithCommas } from '@/utils';
+import { IMetricFormatter } from '../types';
+
+export type IFormatMetricParams = {
+  value: number | string | undefined;
+  formatter: string;
+  getTextPrice: IGetTextPrice;
+  compact?: boolean;
+};
+
+export const formatMetricByFormatter = ({ value, formatter, getTextPrice, compact }: IFormatMetricParams): string => {
+  const dataValue = value ?? 0;
+
+  switch (formatter) {
+    case IMetricFormatter.PERCENTAGE_STRING: {
+      if (typeof dataValue !== 'number') return calcPercentageString(0, 1, 2) ?? '';
+      return calcPercentageString(dataValue, 1, 2) ?? '';
+    }
+    case IMetricFormatter.NUMBER_COMMAS:
+    case IMetricFormatter.NUMBER_COMMAS_LEAN:
+    case IMetricFormatter.NORMAL: {
+      if (compact && typeof dataValue === 'number' && Math.abs(dataValue) >= 1_000) {
+        return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(dataValue);
+      }
+      return numberWithCommas(dataValue.toString());
+    }
+    case IMetricFormatter.DURATION: {
+      return getTimeDurationLabel(Number(dataValue));
+    }
+    case IMetricFormatter.DURATION_MS:
+    case IMetricFormatter.MILLISECONDS: {
+      return getTimeDurationLabel(Number(dataValue) / 1000);
+    }
+    case IMetricFormatter.CURRENCY: {
+      return getTextPrice(dataValue, false, compact ? { compact } : undefined);
+    }
+    default:
+      return `${dataValue}`;
+  }
+};

package/src/modules/analytics/utils/getPAMetricValue.ts

@@ -0,0 +1,11 @@
+import type { IBasePageAnalyticMetric } from '@/types/metric';
+import type { IDetectMetricResult, IPAMetricKey } from '../types';
+
+import { PAGE_ANALYTIC_MAPPING } from '../constants';
+import { IMetricFormatter } from '../types';
+
+export const getPAMetricValueV2 = (metric?: IBasePageAnalyticMetric, key?: IPAMetricKey): IDetectMetricResult => {
+  if (!metric || !key || !(key in PAGE_ANALYTIC_MAPPING)) return { value: 0, formatter: IMetricFormatter.NORMAL };
+
+  return PAGE_ANALYTIC_MAPPING[key].getMetricValue({ metric });
+};

package/src/modules/analytics/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './formatMetric';
+export * from './getPAMetricValue';
+export * from './metric';

package/src/modules/analytics/utils/metric.ts

@@ -0,0 +1,172 @@
+import type { IDetectMetricResult, IFunctionGetMetric } from '../types';
+
+import { IMetricFormatter } from '../types';
+
+export const detectDataV2By = <T>({
+  data,
+  formatter,
+  extractValue,
+}: {
+  data: T | undefined;
+  formatter: IMetricFormatter;
+  extractValue: (value: T | undefined) => number | undefined;
+}): IDetectMetricResult => {
+  const valueEmpty: IDetectMetricResult = { formatter, value: 0 };
+  if (!data) return valueEmpty;
+
+  const value = extractValue(data);
+  if (typeof value === 'undefined') return valueEmpty;
+
+  return { value, formatter };
+};
+
+const toNumber = (value?: number | null): number => value ?? 0;
+
+const divideRatio = (part?: number | null, total?: number | null): number | undefined => {
+  const numerator = toNumber(part);
+  const denominator = toNumber(total);
+  if (denominator <= 0 || !Number.isFinite(numerator)) return undefined;
+  return numerator / denominator;
+};
+
+export const getTotalSessionMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessions ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalVisitorMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalVisitors ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalOrderMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalOrders ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalPageViewMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalPageViewed ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalRevenueMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalRevenue ?? undefined,
+    formatter: IMetricFormatter.CURRENCY,
+  });
+
+export const getBounceRateMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalSessionsWithoutAction, value?.totalSessions),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+  });
+
+export const getLinkCtrMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalClickedHasHref, value?.totalPageViewed),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+  });
+
+export const getConversionRateMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalSessionsThatCompletedCheckout, value?.totalSessions),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+  });
+
+export const getAddToCartRateMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalSessionsWithCartAdditions, value?.totalSessions),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+  });
+
+export const getAverageTimeOnPageMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => {
+      const averageTimeOnPage = divideRatio(value?.totalTimeOnPage, value?.totalPageViewedHaveTimeOnPage);
+      return averageTimeOnPage ? Number(averageTimeOnPage.toFixed(2)) : undefined;
+    },
+    formatter: IMetricFormatter.DURATION,
+  });
+
+export const getRevenuePerVisitorMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => {
+      const revenuePerVisitor = divideRatio(value?.totalRevenue, value?.totalVisitors);
+      return revenuePerVisitor ? Number(revenuePerVisitor.toFixed(2)) : undefined;
+    },
+    formatter: IMetricFormatter.CURRENCY,
+  });
+
+export const getAverageOrderValueMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => {
+      const averageOrderValue = divideRatio(value?.totalRevenue, value?.totalOrders);
+      return averageOrderValue ? Number(averageOrderValue.toFixed(2)) : undefined;
+    },
+    formatter: IMetricFormatter.CURRENCY,
+  });
+
+export const getTotalATCMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalAddedToCart ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalSessionWithCartAdditionMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessionsWithCartAdditions ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalSessionReachedCheckoutMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessionsThatReachedCheckout ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalSessionCompletedCheckoutMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessionsThatCompletedCheckout ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getPathAnalysisMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: () => undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getTotalSessionByDeviceMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: () => undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });
+
+export const getNewReturningCustomerMetric: IFunctionGetMetric = ({ metric }) =>
+  detectDataV2By({
+    data: metric,
+    extractValue: () => undefined,
+    formatter: IMetricFormatter.NORMAL,
+  });

package/src/providers/ConvertMoneyProvider.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { IGetTextPrice } from '@/core/gemxql';
+
+import { DEFAULT_CURRENCY_ANALYTIC } from '@/constants';
+import { useFetchCurrencyRates } from '@/hooks/useFetchCurrencyRates';
+import { useCurrencyRatesStore, type ICurrencyRates } from '@/stores';
+import { getPriceByCurrency } from '@/utils/currency';
+import { trimDecimalZeros } from '@/utils/number';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+
+interface IConvertMoneyContext {
+  getTextPrice: IGetTextPrice;
+}
+
+const ConvertMoneyContext = createContext<IConvertMoneyContext>({
+  getTextPrice: (price) => {
+    if (typeof price === 'string') return price;
+    return `${price ?? 0}`;
+  },
+});
+
+export interface IProps {
+  children: ReactNode;
+  currency?: string;
+  locale?: string;
+}
+
+const convertAmount = (amount: number, from: string, to: string, rates: ICurrencyRates): number | null => {
+  if (from === to) return amount;
+  if (!rates[from] || !rates[to]) return null;
+  const converted = (amount * rates[from]) / rates[to];
+  return Number.isFinite(converted) ? converted : null;
+};
+
+export const ConvertMoneyProvider = ({ children, currency, locale = 'en-US' }: IProps) => {
+  useFetchCurrencyRates();
+
+  const currencyRates = useCurrencyRatesStore((state) => state.currencyRates);
+
+  const getTextPrice: IGetTextPrice = useCallback(
+    (price, _hasCurrency, options) => {
+      if (typeof price === 'string') return price;
+      if (typeof price !== 'number') return '0';
+
+      if (!currency) return price.toString();
+
+      let displayAmount = price;
+      let displayCurrency: string = DEFAULT_CURRENCY_ANALYTIC;
+
+      if (currencyRates) {
+        const converted = convertAmount(price, DEFAULT_CURRENCY_ANALYTIC, currency, currencyRates);
+        if (converted !== null) {
+          displayAmount = converted;
+          displayCurrency = currency;
+        }
+      }
+
+      return trimDecimalZeros(getPriceByCurrency(displayAmount, displayCurrency, { locale, compact: options?.compact }) ?? '0');
+    },
+    [currency, locale, currencyRates],
+  );
+
+  const value = useMemo(() => ({ getTextPrice }), [getTextPrice]);
+
+  return <ConvertMoneyContext.Provider value={value}>{children}</ConvertMoneyContext.Provider>;
+};
+
+export const useConvertMoneyContext = (): IConvertMoneyContext => useContext(ConvertMoneyContext);

package/src/providers/MetricChartProvider.tsx

@@ -0,0 +1,50 @@
+import type { PartialTheme } from '@shopify/polaris-viz-core';
+import type { ReactElement, ReactNode } from 'react';
+
+import { CHART_MIN_HEIGHT, SERIES_COLORS } from '@/constants';
+import { PolarisVizProvider } from '@shopify/polaris-viz';
+
+import chartStyle from '@shopify/polaris-viz/build/esm/styles.css?url';
+
+type ISeriesColors = PartialTheme['seriesColors'];
+
+const LINE_SERIES_COLORS: ISeriesColors = {
+  comparison: SERIES_COLORS.comparison,
+  single: SERIES_COLORS.current,
+  all: [...SERIES_COLORS.all],
+};
+
+export interface IProps {
+  children: ReactNode;
+  minHeight?: number;
+  seriesColors?: ISeriesColors;
+}
+
+export const MetricChartProvider = ({
+  children,
+  minHeight = CHART_MIN_HEIGHT,
+  seriesColors = LINE_SERIES_COLORS,
+}: IProps): ReactElement => {
+  return (
+    <>
+      <link rel="stylesheet" href={chartStyle} />
+      <PolarisVizProvider
+        themes={{
+          Light: {
+            chartContainer: {
+              minHeight,
+            },
+            grid: {
+              horizontalOverflow: true,
+              verticalOverflow: true,
+              horizontalMargin: 0,
+            },
+            seriesColors,
+          },
+        }}
+      >
+        {children}
+      </PolarisVizProvider>
+    </>
+  );
+};

package/src/providers/TimezoneProvider.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+import { setTz } from '@/utils/dayjs';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+interface ITimezoneContext {
+  tz: string;
+}
+
+const TimezoneContext = createContext<ITimezoneContext>({ tz: 'UTC' });
+
+export interface ITimezoneProviderProps {
+  children: ReactNode;
+  tz: string;
+}
+
+export const TimezoneProvider = ({ children, tz }: ITimezoneProviderProps) => {
+  const [currentTz, setCurrentTz] = useState(() => {
+    setTz(tz);
+    return tz;
+  });
+
+  useEffect(() => {
+    setTz(tz);
+    setCurrentTz(tz);
+  }, [tz]);
+
+  return <TimezoneContext.Provider value={{ tz: currentTz }}>{children}</TimezoneContext.Provider>;
+};
+
+export const useTimezoneContext = (): ITimezoneContext => useContext(TimezoneContext);

package/src/providers/index.ts

@@ -0,0 +1,5 @@
+export { ConvertMoneyProvider, useConvertMoneyContext } from './ConvertMoneyProvider';
+export type { IProps as IConvertMoneyProviderProps } from './ConvertMoneyProvider';
+export { MetricChartProvider } from './MetricChartProvider';
+export { TimezoneProvider, useTimezoneContext } from './TimezoneProvider';
+export type { ITimezoneProviderProps } from './TimezoneProvider';