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

package/src/components/common/LongText.tsx

@@ -0,0 +1,100 @@
+import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
+import styled from '@utils/style';
+import { css } from '@emotion/react';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { InformationTooltip } from './InformationTooltip';
+import { Typography, TypographyProps } from './Typography';
+
+const StyledText = styled(Typography)<{ $maxLines: number; $wordBreak?: boolean; $display: string; $bold?: boolean }>`
+  display: ${({ $display }) => $display};
+  -webkit-line-clamp: ${({ $maxLines }) => $maxLines};
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+  ${({ $wordBreak }) =>
+    $wordBreak &&
+    css`
+      word-break: break-word;
+    `}
+
+  ${({ $bold }) =>
+    $bold &&
+    css`
+      font-weight: bold;
+    `}
+`;
+
+function checkTextClamped(element: HTMLDivElement) {
+  return element && (element.clientHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth);
+}
+
+export const LongText = ({
+  leaveDelay,
+  children,
+  variant,
+  color,
+  maxLines = 1,
+  wordBreak,
+  bold,
+  tooltipPlacement = 'top',
+  className,
+  display = '-webkit-box',
+  style,
+  'data-testid': dataTestId,
+}: {
+  children: ReactNode;
+  leaveDelay?: number;
+  variant?: TypographyProps['variant'];
+  color?: TypographyProps['color'];
+  maxLines?: number;
+  wordBreak?: boolean;
+  bold?: boolean;
+  tooltipPlacement?: TooltipProps['placement'];
+  className?: string;
+  display?: string;
+  style?: CSSProperties;
+  ['data-testid']?: string;
+}) => {
+  const [isTextClamped, setIsTextClamped] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const content = (
+    <StyledText
+      ref={ref}
+      variant={variant}
+      color={color}
+      $maxLines={maxLines}
+      $wordBreak={wordBreak}
+      $bold={bold}
+      className={className}
+      $display={display}
+      style={style}
+      data-testid={dataTestId}>
+      {children}
+    </StyledText>
+  );
+
+  // Trigger recalculate of text clamped since ref is not always exists on first render
+  useEffect(() => {
+    if (ref?.current) {
+      const textClamped = checkTextClamped(ref.current);
+      setIsTextClamped(textClamped);
+    }
+  }, [ref]);
+
+  const textClamped = ref?.current && checkTextClamped(ref.current);
+  return (
+    <span>
+      {isTextClamped || textClamped ? (
+        <InformationTooltip
+          placement={tooltipPlacement}
+          leaveDelay={leaveDelay}
+          title={<Typography variant="body1">{children}</Typography>}>
+          {content}
+        </InformationTooltip>
+      ) : (
+        content
+      )}
+    </span>
+  );
+};

package/src/components/common/PoweredByStigg.tsx

@@ -0,0 +1,59 @@
+import styled from '@utils/style';
+import PoweredByStiggSvg from '../../assets/powered-by-stigg.svg';
+
+export const STIGG_WATERMARK_CLASSNAME = 'stigg-watermark';
+
+export type PoweredByStiggSources = 'paywall' | 'customer_portal' | 'checkout' | 'grant_list' | 'credit_usage_chart';
+
+const PoweredByStiggThemedSvg = styled(PoweredByStiggSvg)`
+  * {
+    fill: ${({ theme }) => theme.stigg.palette.text.secondary};
+  }
+`;
+
+type PoweredByStiggProps = {
+  source: PoweredByStiggSources;
+  showWatermark?: boolean;
+  style?: React.CSSProperties;
+  align?: 'center' | 'end';
+  smallScreenAlign?: 'center' | 'end';
+};
+
+const StyledPoweredByStigg = styled.div<{ $alignSelf?: string; $smallScreenAlign?: string }>`
+  align-self: ${({ $alignSelf }) => $alignSelf || 'unset'};
+
+  @media (max-width: 1040px) {
+    ${({ $smallScreenAlign }) => $smallScreenAlign && `align-self: ${$smallScreenAlign};`}
+  }
+`;
+
+export function PoweredByStigg({
+  source,
+  showWatermark,
+  align,
+  smallScreenAlign = 'center',
+  style = {},
+}: PoweredByStiggProps) {
+  if (!showWatermark) {
+    return null;
+  }
+
+  const onWatermarkClick = () => {
+    const sourceDomain = window.location.hostname.replace('www.', '');
+    window.open(
+      `https://www.stigg.io/?utm_source=${sourceDomain}&utm_medium=referral&utm_campaign=${source}`,
+      '_blank',
+    );
+  };
+
+  return (
+    <StyledPoweredByStigg
+      $alignSelf={align}
+      $smallScreenAlign={smallScreenAlign}
+      className={STIGG_WATERMARK_CLASSNAME}
+      style={{ cursor: 'pointer', ...style }}
+      onClick={onWatermarkClick}>
+      <PoweredByStiggThemedSvg />
+    </StyledPoweredByStigg>
+  );
+}

package/src/components/common/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import styled from '@utils/style';
+import { StiggTheme } from '@/theme/types';
+
+const getProgressColor = (percentage: number, theme: StiggTheme) => {
+  if (percentage >= 100) {
+    return theme.palette.progress.high;
+  } else if (percentage >= 75) {
+    return theme.palette.progress.medium;
+  } else {
+    return theme.palette.progress.low;
+  }
+};
+
+const ProgressBarContainer = styled.div`
+  width: 100%;
+  height: 8px;
+  background-color: ${({ theme }) => theme.stigg.palette.progress.background};
+  border-radius: 4px;
+  overflow: hidden;
+`;
+
+const ProgressBarFill = styled.div<{ percentage: number }>`
+  height: 100%;
+  width: ${({ percentage }) => Math.max(0, Math.min(100, percentage))}%;
+  background-color: ${({ theme, percentage }) => getProgressColor(percentage, theme.stigg)};
+  border-radius: 4px;
+  transition: width 0.3s ease-in-out;
+`;
+
+export interface ProgressBarProps {
+  percentage: number;
+  className?: string;
+}
+
+export function ProgressBar({ percentage, className }: ProgressBarProps) {
+  return (
+    <ProgressBarContainer className={className}>
+      <ProgressBarFill percentage={percentage} />
+    </ProgressBarContainer>
+  );
+}

package/src/components/common/StatusChip.tsx

@@ -0,0 +1,29 @@
+import styled from '@utils/style';
+import { Chip, ChipProps } from '@mui/material';
+import { StatusChipVariant } from '../../theme/types';
+
+interface StatusChipProps extends Omit<ChipProps, 'variant' | 'color'> {
+  variant: StatusChipVariant;
+  label: string;
+}
+
+const StyledChip = styled(Chip)<{ $variant: StatusChipVariant }>`
+  font-size: 0.75rem;
+  height: 24px;
+  border-radius: 4px;
+  border: none;
+  background-color: ${({ theme, $variant }) => theme?.stigg?.palette?.statusChips?.[$variant]?.background};
+  color: ${({ theme, $variant }) => theme?.stigg?.palette?.statusChips?.[$variant]?.text};
+`;
+
+/**
+ * StatusChip component for displaying status indicators with consistent theming
+ *
+ * @param variant - The status variant (success, warning, error, info, neutral)
+ * @param label - The text to display in the chip
+ * @param className - Optional CSS class name
+ * @param size - Size of the chip (defaults to 'small')
+ */
+export function StatusChip({ variant, label, className, size = 'small', ...props }: StatusChipProps) {
+  return <StyledChip label={label} size={size} $variant={variant} className={className} {...props} />;
+}

package/src/components/common/TiersSelectContainer.tsx

@@ -0,0 +1,39 @@
+import { PriceTierFragment, TiersMode } from '@stigg/js-client-sdk';
+import styled from '@utils/style';
+import { hasTierWithUnitPrice } from '../utils/priceTierUtils';
+import { Typography } from './Typography';
+import { VolumePerUnitInput } from './VolumePerUnitInput';
+import { VolumeBulkSelect } from './VolumeBulkSelect';
+import { Box } from '@mui/material';
+
+export type TiersSelectContainerProps = {
+  componentId: string;
+  tiers?: PriceTierFragment[] | null;
+  tierUnits?: string;
+  tiersMode?: TiersMode | null;
+  errorMessage?: string;
+  handleChange: (quantity: number) => void;
+  value: number;
+  width?: number | string;
+};
+
+const TiersSelectLayout = styled(Typography)`
+  min-height: 46px;
+`;
+
+export function TiersSelectContainer(props: TiersSelectContainerProps) {
+  const { tiers, errorMessage } = props;
+
+  return (
+    <>
+      <Box display="flex" flexDirection="column" justifyContent="center" style={{ width: '100%' }}>
+        <TiersSelectLayout as="div" className="stigg-price-tier-select">
+          {hasTierWithUnitPrice(tiers) ? <VolumePerUnitInput {...props} /> : <VolumeBulkSelect {...props} />}
+        </TiersSelectLayout>
+        <Typography style={{ margin: '4px' }} variant="caption" color="error">
+          {errorMessage}
+        </Typography>
+      </Box>
+    </>
+  );
+}

package/src/components/common/Typography.tsx

@@ -0,0 +1,117 @@
+import React, { CSSProperties, forwardRef } from 'react';
+import styled from '@utils/style';
+import { Theme, useTheme } from '@emotion/react';
+
+type Colors =
+  | 'primary'
+  | 'primary.main'
+  | 'primary.main.light'
+  | 'secondary'
+  | 'tertiary'
+  | 'disabled'
+  | 'white'
+  | 'warning'
+  | 'error';
+
+export type TypographyProps = {
+  children: React.ReactNode;
+  variant?: 'h1' | 'h3' | 'h6' | 'body1' | 'caption';
+  style?: CSSProperties;
+  color?: Colors;
+  overrideColor?: string;
+  className?: string;
+  bold?: boolean;
+  as?: 'div' | 'p' | 'span';
+  lineHeight?: string;
+};
+
+function getColor(theme: Theme, colorName: Colors): string {
+  const palette = theme.stigg.palette;
+
+  switch (colorName) {
+    case 'white':
+      return 'white';
+    case 'primary.main':
+      return palette.primary;
+    case 'primary.main.light':
+      return palette.primaryLight;
+    case 'warning':
+      return palette.warning;
+    case 'error':
+      return palette.error;
+    default:
+      return palette.text[colorName] || palette.text.primary;
+  }
+}
+
+function getTypographyStyle(theme: Theme, variant: TypographyProps['variant'] = 'body1') {
+  const typography = theme.stigg.typography;
+
+  const variantMap = {
+    h1: typography.h1,
+    h3: typography.h2, // h3 variant uses h2 theme
+    h6: typography.h3, // h6 variant uses h3 theme
+    body1: typography.body,
+    caption: typography.caption,
+  };
+
+  return variantMap[variant] || variantMap.body1;
+}
+
+const StyledText = styled.div<{
+  $isInline: boolean;
+  $variant: TypographyProps['variant'];
+  $bold: boolean;
+  $color: string;
+  $lineHeight?: string;
+}>`
+  margin: 0;
+  ${({ $isInline }) => $isInline && `display: inline`};
+
+  /* Apply typography styles from theme */
+  font-family: ${({ theme }) => theme.stigg.typography.fontFamily};
+  color: ${({ $color }) => $color};
+  font-weight: ${({ $bold, theme, $variant }) => {
+    return $bold ? 'bold' : getTypographyStyle(theme, $variant).fontWeight;
+  }};
+  font-size: ${({ theme, $variant }) => getTypographyStyle(theme, $variant).fontSize};
+  ${({ $lineHeight }) => $lineHeight && `line-height: ${$lineHeight};`}
+`;
+
+export const Typography = forwardRef<HTMLDivElement, TypographyProps>((props, ref) => {
+  const {
+    children,
+    style,
+    variant = 'body1',
+    color = 'primary',
+    overrideColor,
+    bold = false,
+    as,
+    className,
+    lineHeight,
+    ...rest
+  } = props;
+  const theme = useTheme();
+
+  const typographyStyle = getTypographyStyle(theme, variant);
+  const elementType = as || typographyStyle.semanticElement;
+  const finalColor = overrideColor || getColor(theme, color);
+
+  return (
+    <StyledText
+      as={elementType}
+      ref={ref}
+      {...rest}
+      className={className}
+      style={style}
+      $variant={variant}
+      $bold={bold}
+      $color={finalColor}
+      $lineHeight={lineHeight}
+      $isInline={elementType === 'span'}>
+      {children}
+    </StyledText>
+  );
+});
+
+Typography.displayName = 'Typography';

package/src/components/common/VolumeBulkSelect.tsx

@@ -0,0 +1,74 @@
+import { PriceTierFragment } from '@stigg/js-client-sdk';
+import styled from '@utils/style';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { map } from 'lodash';
+import { Typography } from './Typography';
+import { TiersSelectContainerProps } from './TiersSelectContainer';
+import { formatNumber } from '../utils/formatNumber';
+
+const TierSelect = styled(Select)`
+  border-radius: 10px;
+  min-height: 42px;
+  min-width: 120px;
+
+  &:hover .MuiOutlinedInput-notchedOutline {
+    border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
+  }
+`;
+
+const TierInput = styled(OutlinedInput)`
+  & .MuiInputBase-input {
+    padding: 10px 12px;
+  }
+
+  &.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: ${({ theme }) => theme.stigg.palette.primary} !important;
+  }
+`;
+
+export function VolumeBulkSelect({
+  value,
+  componentId,
+  tierUnits,
+  tiers,
+  handleChange,
+  errorMessage,
+}: Pick<TiersSelectContainerProps, 'value' | 'componentId' | 'tiers' | 'tierUnits'> & {
+  errorMessage?: string;
+  handleChange: (quantity: number) => void;
+}) {
+  if (!tiers) {
+    return null;
+  }
+
+  return (
+    <TierSelect
+      value={value.toString()}
+      fullWidth
+      error={!!errorMessage}
+      onChange={(event) => {
+        const quantity = event?.target?.value ? Number(event?.target?.value) : null;
+        if (quantity) {
+          handleChange(quantity);
+        }
+      }}
+      id={componentId}
+      input={<TierInput />}
+      MenuProps={{
+        MenuListProps: { disablePadding: true },
+        PaperProps: {
+          sx: { marginTop: '4px', borderRadius: '10px' },
+        },
+      }}>
+      {map(tiers, (tier: PriceTierFragment) => (
+        <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo?.toString()}>
+          <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
+            {formatNumber(tier.upTo)} {tierUnits}
+          </Typography>
+        </MenuItem>
+      ))}
+    </TierSelect>
+  );
+}

package/src/components/common/VolumePerUnitInput.tsx

@@ -0,0 +1,42 @@
+import InputAdornment from '@mui/material/InputAdornment';
+import { Typography } from './Typography';
+import { InputField } from '../checkout/components';
+import { TiersSelectContainerProps } from './TiersSelectContainer';
+import { ON_WHEEL_BLUR } from '../utils/onWheelBlur';
+
+export function VolumePerUnitInput({
+  width,
+  tierUnits,
+  value,
+  handleChange,
+  errorMessage,
+}: Pick<TiersSelectContainerProps, 'width' | 'tierUnits' | 'value'> & {
+  errorMessage?: string;
+  handleChange: (quantity: number) => void;
+}) {
+  return (
+    <InputField
+      type="number"
+      onWheel={ON_WHEEL_BLUR}
+      fullWidth
+      error={!!errorMessage}
+      sx={{ minHeight: '46px', width }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Typography variant="body1" color="primary">
+              {tierUnits}
+            </Typography>
+          </InputAdornment>
+        ),
+      }}
+      value={value}
+      onChange={(event) => {
+        const quantity = event?.target?.value ? Number(event?.target?.value) : null;
+        if (quantity) {
+          handleChange(quantity);
+        }
+      }}
+    />
+  );
+}

package/src/components/common/chart/chartjs.helpers.ts

@@ -0,0 +1,17 @@
+import { Chart, Plugin } from 'chart.js';
+
+// This is a workaround for data-labels plugin which runs the text formatter
+// function before the bar element is drawn, so we don't have the width yet.
+// So this small plugin update the chart before draw in order to re-run the formatter
+export const redrawBeforeFirstDrawPlugin: Plugin = {
+  id: 'redrawBeforeFirstDrawPlugin',
+
+  beforeDraw(chart: Chart) {
+    // @ts-ignore
+    if (!chart.$rendered) {
+      // @ts-ignore
+      chart.$rendered = true;
+      chart.update('none');
+    }
+  },
+};

package/src/components/common/chart/chartjs.plugins.ts

@@ -0,0 +1,34 @@
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+  PointElement,
+  LineElement,
+  Filler,
+  ArcElement,
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import Gradient from 'chartjs-plugin-gradient';
+
+const PLUGINS = [
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels,
+  PointElement,
+  LineElement,
+  Filler,
+  ArcElement,
+  annotationPlugin,
+  Gradient,
+];
+
+ChartJS.register(...PLUGINS);

package/src/components/common/chart/chartjs.theme.ts

@@ -0,0 +1,41 @@
+import { StiggTheme } from '../../../theme/types';
+
+export const getOtherColor = (theme: StiggTheme) => theme.palette.backgroundSection;
+
+export const getLineColor = (theme: StiggTheme) => theme.palette.outlinedBorder;
+
+export const opacityColor = (color: string, opacity = 1) => {
+  const hex = Math.round(opacity * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `${color}${hex}`;
+};
+
+export const LEGEND_BOX_SIZE = 12;
+
+export const getLabelColor = (theme: StiggTheme) => theme.palette.text.secondary;
+
+export const getLabelFont = (theme: StiggTheme) => ({
+  family: theme.typography.fontFamily,
+  size: parseInt(theme.typography.body.fontSize),
+});
+
+export const getAxisTitleColor = (theme: StiggTheme) => theme.palette.text.primary;
+
+export const getAxisTitleFont = (theme: StiggTheme) => ({
+  family: theme.typography.fontFamily,
+  size: parseInt(theme.typography.body.fontSize),
+});
+
+export const getAxisTickColor = (theme: StiggTheme) => theme.palette.text.secondary;
+
+export const getAxisColor = (theme: StiggTheme) => theme.palette.outlinedBorder;
+
+export const getAxisTickFont = (theme: StiggTheme) => ({
+  family: theme.typography.fontFamily,
+  size: parseInt(theme.typography.body.fontSize),
+});
+
+export const GRID_BORDER_DASH = [8, 8];
+
+export const AXIS_TITLE_SPACING = 15;