@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

package/src/components/common/chart/chartjs.tooltip.plugin.tsx

@@ -0,0 +1,224 @@
+import { Chart, ChartEvent, ChartType, TooltipModel } from 'chart.js';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from '@utils/style';
+import { Box } from '@mui/material';
+import { EventContext } from 'chartjs-plugin-annotation';
+import debounce from 'lodash/debounce';
+
+const CLOSE_DELAY = 300;
+
+export type ExternalTooltipHandler<TType extends ChartType> = (context: {
+  chart: Chart;
+  tooltip: TooltipModel<TType>;
+}) => void;
+
+export type AnnotationTooltipHandler = (isMouseOver: boolean, context: EventContext, event: ChartEvent) => void;
+
+export type ExternalTooltipInfo<TPayload> = {
+  positionTop: number;
+  positionLeft: number;
+  isOpen: boolean;
+  payload?: TPayload;
+};
+
+type ChartJsExternalTooltipProps = {
+  tooltipInfo: ExternalTooltipInfo<unknown>;
+  children: React.ReactElement<any, any>;
+  $padding?: number;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+};
+
+export type ExternalTooltipTranslateFunc<TType extends ChartType, TPayload> = (
+  tooltip: TooltipModel<TType>,
+) => TPayload | undefined;
+export type AnnotationTooltipTranslateFunc<TPayload> = (
+  context: EventContext,
+  event: ChartEvent,
+) => TPayload | undefined;
+
+type TooltipPosition = { top: number; left: number };
+type ChartJsExternalTooltipPositioner<TType extends ChartType> = (
+  chart: Chart,
+  tooltip: TooltipModel<TType>,
+) => TooltipPosition;
+
+export function bottomBarTooltipPositioner(chart: Chart, tooltip: TooltipModel<'bar'>): TooltipPosition {
+  // For stacked bars, we need to calculate the center of the specific segment
+  // The caretY gives us the top of the segment, so we need to find the center
+  const dataPoint = tooltip.dataPoints[0];
+
+  // Calculate the center of the specific segment
+  // We'll estimate the segment height based on the parsed value and scale
+  const parsedValue = dataPoint.parsed.y;
+  const yScale = chart.scales.y;
+
+  // Calculate the height of this segment in pixels
+  const segmentHeight = (parsedValue / yScale.max) * (yScale.bottom - yScale.top);
+  const segmentCenterY = tooltip.caretY + segmentHeight / 2;
+
+  // Get the bar element to find its left edge
+  const bar = chart.getDatasetMeta(dataPoint.datasetIndex).data[dataPoint.dataIndex];
+  const barLeftEdge = bar.x - (bar as any).width / 2;
+
+  const top = chart.canvas.offsetTop + segmentCenterY;
+  const left = chart.canvas.offsetLeft + barLeftEdge;
+
+  return { top, left };
+}
+
+function defaultExternalTooltipPosition<TType extends ChartType>(
+  chart: Chart,
+  tooltip: TooltipModel<TType>,
+): TooltipPosition {
+  const top = chart.canvas.offsetTop + tooltip.caretY;
+  const left = chart.canvas.offsetLeft + tooltip.caretX;
+
+  return { top, left };
+}
+
+export function useChartJsExternalTooltip<TType extends ChartType, TPayload>(
+  translate: ExternalTooltipTranslateFunc<TType, TPayload>,
+  positioner: ChartJsExternalTooltipPositioner<TType> = defaultExternalTooltipPosition,
+) {
+  const [positionTop, setPositionTop] = useState(0);
+  const [positionLeft, setPositionLeft] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [payload, setPayload] = useState<TPayload>();
+
+  const tooltipHandler: ExternalTooltipHandler<TType> = useCallback(
+    (context: { chart: Chart; tooltip: TooltipModel<TType> }) => {
+      const { chart, tooltip } = context;
+
+      // Hide if no tooltip
+      if (tooltip.opacity === 0) {
+        setIsOpen(false);
+        return;
+      }
+
+      const { top, left } = positioner(chart, tooltip);
+
+      setPositionLeft(left);
+      setPositionTop(top);
+      setPayload(translate(tooltip));
+      setIsOpen(true);
+    },
+    [translate, positioner],
+  );
+
+  const tooltipInfo: ExternalTooltipInfo<TPayload> = {
+    positionTop,
+    positionLeft,
+    isOpen,
+    payload,
+  };
+
+  return {
+    tooltipInfo,
+    tooltipHandler,
+  };
+}
+
+export function useChartJsAnnotationExternalTooltip<TPayload>(translate: AnnotationTooltipTranslateFunc<TPayload>) {
+  const [positionTop, setPositionTop] = useState(0);
+  const [positionLeft, setPositionLeft] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [payload, setPayload] = useState<TPayload>();
+
+  const tooltipHandler: AnnotationTooltipHandler = useCallback(
+    (isMouseOver: boolean, context: EventContext, event: ChartEvent) => {
+      const { chart } = context;
+      const { x, y } = event;
+
+      if (!isMouseOver || !x || !y) {
+        setIsOpen(false);
+        return;
+      }
+
+      setPositionLeft(chart.canvas.offsetLeft + context.element.x);
+      setPositionTop(chart.canvas.offsetTop + context.element.y - context.element.height);
+      setPayload(translate(context, event));
+      setIsOpen(true);
+    },
+    [translate],
+  );
+
+  const tooltipInfo: ExternalTooltipInfo<TPayload> = {
+    positionTop,
+    positionLeft,
+    isOpen,
+    payload,
+  };
+
+  return {
+    tooltipInfo,
+    tooltipHandler,
+  };
+}
+
+const AnchorBox = styled(Box)`
+  position: absolute;
+`;
+
+const CustomTooltip = styled.div<{ $isOpen: boolean; $padding?: number }>`
+  position: absolute;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: ${({ $padding = 16 }) => $padding}px;
+  max-width: 500px;
+  z-index: 1000;
+  pointer-events: none;
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  transition: opacity 0.2s ease-in-out;
+  transform: translateY(-50%); /* Center vertically on the anchor point */
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-left-color: white;
+    right: -16px;
+    top: 50%;
+    transform: translateY(-50%);
+    filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
+  }
+`;
+
+export const ChartJsExternalTooltip = ({
+  children,
+  tooltipInfo: { positionTop, positionLeft, payload, isOpen },
+  $padding,
+}: ChartJsExternalTooltipProps) => {
+  const [isTooltipHover, setIsTooltipHover] = useState(false);
+  const [shouldBeOpened, setShouldBeOpened] = useState(false);
+
+  const closeDebounce = useRef(debounce(() => setShouldBeOpened(false), CLOSE_DELAY));
+
+  useEffect(() => {
+    if (Boolean(payload) && (isTooltipHover || isOpen)) {
+      closeDebounce.current.cancel();
+      setShouldBeOpened(true);
+    } else {
+      closeDebounce.current();
+    }
+  }, [payload, isTooltipHover, isOpen]);
+
+  return (
+    <>
+      <AnchorBox style={{ top: positionTop, left: positionLeft }} />
+      <CustomTooltip
+        $isOpen={shouldBeOpened}
+        $padding={$padding}
+        style={{
+          top: positionTop, // Use the exact center of the bar segment
+          left: positionLeft - 140, // Position close to the left of the bar
+        }}
+        onMouseEnter={() => setIsTooltipHover(true)}
+        onMouseLeave={() => setIsTooltipHover(false)}>
+        {children}
+      </CustomTooltip>
+    </>
+  );
+};

package/src/components/common/customIcons.ts

@@ -0,0 +1,24 @@
+export { default as Addons } from '../../assets/addons.svg';
+export { default as BillingInfoCustomer } from '../../assets/billing-info-customer.svg';
+export { default as ContactSupport } from '../../assets/contact-support.svg';
+export { default as CreditCard } from '../../assets/credit-card.svg';
+export { default as DollarCoin } from '../../assets/dollar-coin.svg';
+export { default as MiniSchedule } from '../../assets/mini-schedule.svg';
+export { default as Promotions } from '../../assets/promotions.svg';
+export { default as Restore } from '../../assets/restore.svg';
+export { default as ScheduleBox } from '../../assets/schedule-box.svg';
+export { default as ScheduleClock } from '../../assets/schedule.svg';
+export { default as RenewSubscription } from '../../assets/subscription-renews-icon.svg';
+export { default as Trash } from '../../assets/trash.svg';
+export { default as PaymentMethod } from '../../assets/payment-method.svg';
+export { default as OutlinedCircle } from '../../assets/outlined-circle.svg';
+export { default as OutlinedCheckedCircle } from '../../assets/outlined-checked-circle.svg';
+export { default as OutlinedCheckedCircleDisabled } from '../../assets/outlined-checked-circle-disabled.svg';
+export { default as ArrowForward } from '../../assets/arrow-forward.svg';
+export { default as Close } from '../../assets/close.svg';
+export { default as Check } from '../../assets/check.svg';
+export { default as PayAsYouGoCharge } from '../../assets/pay-as-you-go-charge.svg';
+export { default as Coupon } from '../../assets/coupon.svg';
+export { default as Add } from '../../assets/add.svg';
+export { default as Remove } from '../../assets/remove.svg';
+export { default as EntitlementCheck } from '../../assets/entitlement-check.svg';

package/src/components/common/iconColor.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@emotion/react';
+import { IconColorValue } from './Icon';
+
+export type IconColor = 'primary' | 'secondary';
+
+export const getIconColor = (color: IconColorValue | undefined, theme: Theme) => {
+  switch (color) {
+    case 'primary':
+      return theme.stigg.palette.text.primary;
+    case 'secondary':
+      return theme.stigg.palette.text.secondary;
+    default:
+      return color;
+  }
+};

package/src/components/common/mapExternalTheme.ts

@@ -0,0 +1,147 @@
+import {
+  Alignment,
+  CheckoutConfiguration,
+  CustomerPortalConfiguration,
+  FontWeight as JSFontWeight,
+  PaywallConfiguration,
+  TypographyConfiguration,
+} from '@stigg/js-client-sdk';
+import { CustomizedTheme } from '../../theme/Theme';
+import { HorizontalAlignment } from '../../theme/types';
+import { defaultCheckoutTypography } from '../checkout/configurations/typography';
+
+function addCssUnits(value?: number | null, unit = 'px') {
+  if (!value) {
+    return undefined;
+  }
+  return `${value}${unit}`;
+}
+
+function mapFontWeight(fontWeight?: JSFontWeight | null): 'bold' | 'normal' {
+  if (!fontWeight) {
+    return 'normal';
+  }
+
+  switch (fontWeight) {
+    case JSFontWeight.Normal:
+      return 'normal';
+    case JSFontWeight.Bold:
+      return 'bold';
+    default:
+      return 'normal';
+  }
+}
+
+export function mapTypography(
+  typography?: TypographyConfiguration | null,
+  defaultTypography?: typeof defaultCheckoutTypography | null,
+): CustomizedTheme['typography'] {
+  const defaults = defaultTypography || {
+    h1: { fontSize: '32px', fontWeight: 'bold' as const, semanticElement: 'h1' as const },
+    h2: { fontSize: '24px', fontWeight: 'normal' as const, semanticElement: 'h2' as const },
+    h3: { fontSize: '16px', fontWeight: 'normal' as const, semanticElement: 'h3' as const },
+    body: { fontSize: '14px', fontWeight: 'normal' as const, semanticElement: 'p' as const },
+  };
+
+  return {
+    fontFamilyUrl: typography?.fontFamily || undefined,
+    h1: {
+      fontSize: addCssUnits(typography?.h1?.fontSize) || defaults.h1.fontSize,
+      fontWeight: mapFontWeight(typography?.h1?.fontWeight) || defaults.h1.fontWeight,
+      semanticElement: defaults.h1.semanticElement,
+    },
+    h2: {
+      fontSize: addCssUnits(typography?.h2?.fontSize) || defaults.h2.fontSize,
+      fontWeight: mapFontWeight(typography?.h2?.fontWeight) || defaults.h2.fontWeight,
+      semanticElement: defaults.h2.semanticElement,
+    },
+    h3: {
+      fontSize: addCssUnits(typography?.h3?.fontSize) || defaults.h3.fontSize,
+      fontWeight: mapFontWeight(typography?.h3?.fontWeight) || defaults.h3.fontWeight,
+      semanticElement: defaults.h3.semanticElement,
+    },
+    body: {
+      fontSize: addCssUnits(typography?.body?.fontSize) || defaults.body.fontSize,
+      fontWeight: mapFontWeight(typography?.body?.fontWeight) || defaults.body.fontWeight,
+      semanticElement: defaults.body.semanticElement,
+    },
+  };
+}
+
+function mapAlignment(alignment?: Alignment | null): HorizontalAlignment | undefined {
+  if (!alignment) {
+    return undefined;
+  }
+
+  switch (alignment) {
+    case Alignment.Left:
+      return 'left';
+    case Alignment.Center:
+      return 'center';
+    case Alignment.Right:
+      return 'right';
+    default: {
+      return undefined;
+    }
+  }
+}
+
+export function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme {
+  const { palette, customCss, typography } = configuration;
+  return {
+    palette: {
+      primary: palette?.primary || undefined,
+      backgroundPaper: palette?.paywallBackgroundColor || undefined,
+      outlinedBorder: palette?.borderColor || undefined,
+      backgroundHighlight: palette?.currentPlanBackground || undefined,
+      text: {
+        primary: palette?.textColor || undefined,
+      },
+    },
+    typography: mapTypography(typography),
+    customCss: customCss || undefined,
+  };
+}
+
+export function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme {
+  const { palette, layout, customCss, typography } = paywallConfiguration;
+  return {
+    customCss: customCss || undefined,
+    palette: {
+      primary: palette?.primary || undefined,
+      backgroundPaper: palette?.backgroundColor || undefined,
+      outlinedBorder: palette?.borderColor || undefined,
+      backgroundHighlight: palette?.currentPlanBackground || undefined,
+      text: {
+        primary: palette?.textColor || undefined,
+      },
+    },
+    typography: mapTypography(typography),
+    layout: {
+      ctaAlignment: mapAlignment(layout?.alignment),
+      headerAlignment: mapAlignment(layout?.alignment),
+      descriptionAlignment: mapAlignment(layout?.alignment),
+      planMaxWidth: addCssUnits(layout?.planWidth),
+      planMinWidth: addCssUnits(layout?.planWidth),
+      planMargin: addCssUnits(layout?.planMargin),
+      planPadding: addCssUnits(layout?.planPadding),
+    },
+  };
+}
+
+export function mapCheckoutConfiguration(configuration: CheckoutConfiguration): CustomizedTheme {
+  const { palette, typography, customCss } = configuration;
+  return {
+    palette: {
+      primary: palette?.primary || undefined,
+      backgroundPaper: palette?.backgroundColor || undefined,
+      outlinedBorder: palette?.borderColor || undefined,
+      text: {
+        primary: palette?.textColor || undefined,
+      },
+      backgroundHighlight: palette?.summaryBackgroundColor || undefined,
+    },
+    typography: mapTypography(typography, defaultCheckoutTypography),
+    customCss: customCss || undefined,
+  };
+}

package/src/components/common/mediaQuery.ts

@@ -0,0 +1,19 @@
+export const breakpoints = {
+  xs: 320,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
+} as const;
+
+export type Breakpoints = typeof breakpoints;
+
+export type Breakpoint = keyof Breakpoints;
+
+export const mqMinWidth = (breakpoint: Breakpoint) => `(min-width: ${breakpoints[breakpoint]}px)`;
+
+export const mq = Object.keys(breakpoints).reduce(
+  (obj, breakpoint) => ({ ...obj, [breakpoint]: `@media ${mqMinWidth(breakpoint as Breakpoint)}` }),
+  {} as Record<Breakpoint, string>,
+);

package/src/components/common/table/DataRows.tsx

@@ -0,0 +1,33 @@
+import { ClickableRow, StyledTableCell, CellContent } from './GenericTable';
+import { HeadCell } from './types';
+
+interface DataRowsProps<T> {
+  data: T[];
+  visibleHeadCells: Array<HeadCell<T>>;
+  onRowClick?: (item: T) => void;
+  hideLastRowBorder: boolean;
+}
+
+export function DataRows<T>({ data, visibleHeadCells, onRowClick, hideLastRowBorder }: DataRowsProps<T>) {
+  return (
+    <>
+      {data.map((item, index) => (
+        <ClickableRow key={index} $clickable={!!onRowClick} onClick={() => onRowClick && onRowClick(item)}>
+          {visibleHeadCells.map((headCell) => (
+            <StyledTableCell
+              key={String(headCell.id)}
+              $alignment={headCell.alignment}
+              $width={headCell.width}
+              $maxWidth={headCell.maxWidth}
+              $minWidth={headCell.minWidth}
+              $isLastRow={index === data.length - 1}
+              $hideLastRowBorder={hideLastRowBorder}
+              onClick={headCell.disableClick ? (e) => e.stopPropagation() : undefined}>
+              <CellContent $alignment={headCell.alignment}>{headCell.render(item)}</CellContent>
+            </StyledTableCell>
+          ))}
+        </ClickableRow>
+      ))}
+    </>
+  );
+}

package/src/components/common/table/EmptyState.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Typography } from '../Typography';
+
+interface EmptyStateProps {
+  message?: ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ message, className }: EmptyStateProps) {
+  if (message === undefined || typeof message === 'string') {
+    return (
+      <Typography variant="body1" color="secondary" className={className}>
+        {message || 'No data available'}
+      </Typography>
+    );
+  }
+
+  return <>{message}</>;
+}

package/src/components/common/table/ErrorState.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Typography } from '../Typography';
+
+interface ErrorStateProps {
+  errorMessage?: ReactNode;
+  className?: string;
+}
+
+export function ErrorState({ errorMessage, className }: ErrorStateProps) {
+  if (errorMessage === undefined || typeof errorMessage === 'string') {
+    return (
+      <Typography variant="body1" color="error" className={className}>
+        {errorMessage || 'An error occurred'}
+      </Typography>
+    );
+  }
+
+  return <>{errorMessage}</>;
+}