@redocly/theme/src/core/hooks/use-banner-telemetry.ts

Shared UI components lib

import { useMemo } from 'react';

import type { DisplayBanner } from '@redocly/theme/components/Banner/Banner';

import { useThemeHooks } from './use-theme-hooks';

const noop = (): void => {};
const noopLink = (_href: string): void => {};

export type BannerTelemetryActions = {
  sendBannerViewedMessage: () => void;
  sendBannerDismissedMessage: () => void;
  sendBannerLinkClickedMessage: (href: string) => void;
};

function getCurrentPageUri(): string {
  return window.location.href;
}

export function useBannerTelemetry(
  displayBanner: DisplayBanner | undefined,
): BannerTelemetryActions {
  const { useTelemetry } = useThemeHooks();
  const telemetry = useTelemetry();

  return useMemo(() => {
    if (!displayBanner) {
      return {
        sendBannerViewedMessage: noop,
        sendBannerDismissedMessage: noop,
        sendBannerLinkClickedMessage: noopLink,
      };
    }

    const bannerUri = 'urn:redocly:realm:ui:banner:banner-id';
    const payload = {
      id: 'banner-id' as const,
      object: 'banner' as const,
      uri: bannerUri,
      trackingId: displayBanner.trackingId,
      hash: displayBanner.hash,
      color: displayBanner.color,
      target: displayBanner.target,
      dismissible: displayBanner.dismissible,
    };

    return {
      sendBannerViewedMessage: () => {
        const pageUri = getCurrentPageUri();
        const page = { id: pageUri, object: 'page' as const, uri: pageUri };
        telemetry.sendBannerViewedMessage([payload, page]);
      },
      sendBannerDismissedMessage: () => {
        const pageUri = getCurrentPageUri();
        const page = { id: pageUri, object: 'page' as const, uri: pageUri };
        const { dismissible: _, ...dismissedPayload } = payload;
        telemetry.sendBannerDismissedMessage([dismissedPayload, page]);
      },
      sendBannerLinkClickedMessage: (href: string) => {
        const pageUri = getCurrentPageUri();
        const page = { id: pageUri, object: 'page' as const, uri: pageUri };
        telemetry.sendBannerLinkClickedMessage([{ ...payload, href }, page]);
      },
    };
  }, [displayBanner, telemetry]);
}