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

package/src/components/common/table/index.ts

@@ -1,6 +0,0 @@
-export { GenericTable, StyledTableCell, ClickableRow, CellContent } from './GenericTable';
-export { LoadingRows } from './LoadingRows';
-export { DataRows } from './DataRows';
-export { ErrorState } from './ErrorState';
-export { EmptyState } from './EmptyState';
-export type { HeadCell, GenericTableProps, TableAlignment, PixelWidth } from './types';

package/src/components/common/table/types.ts

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-
-export type TableAlignment = 'left' | 'center' | 'right';
-export type PixelWidth = `${number}px`;
-
-export interface HeadCell<T> {
-  id: string;
-  alignment?: TableAlignment;
-  label: string;
-  width?: PixelWidth;
-  maxWidth?: PixelWidth;
-  minWidth?: PixelWidth;
-  disableClick?: boolean;
-  visible?: boolean;
-  render: (item: T) => ReactNode;
-}
-
-export interface GenericTableProps<T> {
-  data: T[];
-  headCells: Array<HeadCell<T>>;
-  isLoading?: boolean;
-  error?: Error | null;
-  emptyMessage?: ReactNode;
-  loadingMessage?: string;
-  errorMessage?: ReactNode;
-  onRowClick?: (item: T) => void;
-  className?: string;
-  skeletonRows?: number;
-  hideLastRowBorder?: boolean;
-}

package/src/components/credits/balance/CreditBalance.tsx

@@ -1,70 +0,0 @@
-import styled from '@utils/style';
-import { GetCreditBalanceParams } from '../hooks/useCreditBalance';
-import { useStiggContext } from '../../../hooks';
-import { SdkThemeProvider } from '../../../theme/Theme';
-import { Typography } from '../../common/Typography';
-import { CreditBalanceValue } from './CreditBalanceValue';
-import { CREDIT_WIDGET_DEFAULT_LOCALIZATION } from '../localization';
-import { CustomerPortalContext, useCheckContextExists } from '@/components/customerPortal';
-
-const CreditBalanceContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-`;
-
-const CreditBalanceCard = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.stigg?.palette?.outlinedBorder};
-  background-color: ${({ theme }) => theme?.stigg?.palette?.backgroundPaper};
-`;
-
-export type CreditBalanceProps = GetCreditBalanceParams & {
-  localization?: CreditBalanceLocalization;
-  decimalPlaces?: number | null;
-  showUnits?: boolean;
-  showSymbol?: boolean;
-};
-
-export type CreditBalanceLocalization = {
-  title: string;
-};
-
-export function CreditBalance({
-  currencyId,
-  localization,
-  decimalPlaces,
-  showUnits = true,
-  showSymbol = false,
-}: CreditBalanceProps) {
-  const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
-  const stiggContext = useStiggContext({ optional: true });
-  const theme = stiggContext?.theme;
-  const title = localization?.title ?? CREDIT_WIDGET_DEFAULT_LOCALIZATION.title;
-
-  const component = (
-    <CreditBalanceContainer className="stigg-credit-balance-container">
-      <CreditBalanceCard className="stigg-credit-balance-card">
-        <Typography variant="h6" color="primary" className="stigg-credit-balance-title">
-          {title}
-        </Typography>
-        <CreditBalanceValue
-          currencyId={currencyId}
-          decimalPlaces={decimalPlaces}
-          showUnits={showUnits}
-          showSymbol={showSymbol}
-        />
-      </CreditBalanceCard>
-    </CreditBalanceContainer>
-  );
-
-  if (hasCustomerPortalContext) {
-    return component;
-  }
-  return <SdkThemeProvider componentTheme={theme}>{component}</SdkThemeProvider>;
-}

package/src/components/credits/balance/CreditBalanceValue.tsx

@@ -1,60 +0,0 @@
-import styled from '@utils/style';
-import Skeleton from 'react-loading-skeleton';
-import { Typography } from '../../common/Typography';
-import { useCreditBalance } from '../hooks/useCreditBalance';
-import { formatValue, formatCreditSuffix } from '../utils/creditBalanceUtils';
-
-const CreditBalanceValueContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-  align-items: baseline;
-`;
-
-export function CreditBalanceValue({
-  currencyId,
-  decimalPlaces = null,
-  showUnits = true,
-  showSymbol = false,
-}: {
-  currencyId: string;
-  decimalPlaces?: number | null;
-  showUnits?: boolean;
-  showSymbol?: boolean;
-}) {
-  const { balance, isLoading, error } = useCreditBalance({
-    currencyId,
-  });
-
-  if (error) {
-    return (
-      <Typography variant="body1" color="error" className="stigg-credit-balance-value-error">
-        {error.message || 'Failed to load balance'}
-      </Typography>
-    );
-  }
-
-  if (isLoading) {
-    return <Skeleton width={120} height={24} className="stigg-credit-balance-value-loading" />;
-  }
-
-  if (balance) {
-    const suffix = formatCreditSuffix(balance, showUnits, showSymbol);
-    return (
-      <CreditBalanceValueContainer>
-        <Typography variant="h3" color="primary" bold className="stigg-credit-balance-value-amount">
-          {formatValue(balance.currentBalance, decimalPlaces)}
-        </Typography>
-        <Typography variant="caption" color="secondary" className="stigg-credit-balance-value-suffix">
-          {suffix}
-        </Typography>
-      </CreditBalanceValueContainer>
-    );
-  }
-
-  return (
-    <Typography variant="body1" color="disabled" className="stigg-credit-balance-value-no-balance">
-      No balance data available
-    </Typography>
-  );
-}

package/src/components/credits/creditUsageChart/CreditUsage.chartjs.ts

@@ -1,223 +0,0 @@
-import { ChartData, ChartOptions, ChartType, Chart, TooltipModel } from 'chart.js';
-import { CreditUsageFragment, CreditUsageTimeRange } from '@stigg/js-client-sdk';
-import { getAxisColor, getAxisTickColor, getAxisTickFont, opacityColor } from '../../common/chart/chartjs.theme';
-import { StiggTheme } from '../../../theme/types';
-import { numberFormatter } from '../../utils/numberUtils';
-
-export type ExternalTooltipHandler<TType extends ChartType> = (context: {
-  chart: Chart;
-  tooltip: TooltipModel<TType>;
-}) => void;
-
-export function getFeatureColor(index: number): string {
-  const materialColors = [
-    // Primary spectrum (500 shades) - main colors
-    '#4caf50', // green[500]
-    '#2196f3', // blue[500]
-    '#ff5722', // deepOrange[500]
-    '#ff9800', // orange[500]
-    '#e91e63', // pink[500]
-    '#3f51b5', // indigo[500]
-    '#00bcd4', // cyan[500]
-
-    // Pastel spectrum (300 shades) - for 10+ features
-    '#81c784', // green[300]
-    '#64b5f6', // blue[300]
-    '#ff8a65', // deepOrange[300]
-    '#ffb74d', // orange[300]
-    '#f06292', // pink[300]
-    '#7986cb', // indigo[300]
-    '#4dd0e1', // cyan[300]
-
-    // Light spectrum (200 shades) - for 20+ features
-    '#a5d6a7', // green[200]
-    '#90caf9', // blue[200]
-    '#ffab91', // deepOrange[200]
-    '#ffcc80', // orange[200]
-    '#f48fb1', // pink[200]
-    '#9fa8da', // indigo[200]
-    '#80deea', // cyan[200]
-  ];
-
-  return materialColors[index % materialColors.length];
-}
-
-function generateLabelsForTimeRange(timeRange?: CreditUsageTimeRange): string[] {
-  const labels: string[] = [];
-  const now = new Date();
-
-  switch (timeRange) {
-    case CreditUsageTimeRange.LastDay: {
-      // Last 24 hours with hourly granularity (24 data points)
-      // Start from 24 hours ago, rounded to the nearest hour
-      const startHour = new Date(now);
-      startHour.setHours(startHour.getHours() - 23);
-      startHour.setMinutes(0, 0, 0); // Round to start of hour
-
-      for (let i = 0; i < 24; i++) {
-        const date = new Date(startHour);
-        date.setHours(date.getHours() + i);
-        labels.push(date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
-      }
-      break;
-    }
-    case CreditUsageTimeRange.LastWeek: {
-      // Last 7 days with daily granularity (7 data points)
-      for (let i = 6; i >= 0; i--) {
-        const date = new Date(now);
-        date.setDate(date.getDate() - i);
-        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }));
-      }
-      break;
-    }
-    case CreditUsageTimeRange.LastYear: {
-      // Last 12 months with monthly granularity (12 data points)
-      for (let i = 11; i >= 0; i--) {
-        const date = new Date(now);
-        date.setMonth(date.getMonth() - i);
-        labels.push(date.toLocaleDateString('en-US', { month: 'short', year: '2-digit' }));
-      }
-      break;
-    }
-    case CreditUsageTimeRange.LastMonth:
-    default: {
-      // Last 30 days with daily granularity (30 data points)
-      for (let i = 29; i >= 0; i--) {
-        const date = new Date(now);
-        date.setDate(date.getDate() - i);
-        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }));
-      }
-      break;
-    }
-  }
-
-  return labels;
-}
-
-function generateDateKeyForTimeRange(timestamp: Date, timeRange?: CreditUsageTimeRange): string {
-  // For hourly data, we need to match the hour exactly, ignoring minutes
-  // Backend returns data aggregated by hour, so we round to the nearest hour
-  const roundedHour = new Date(timestamp);
-  roundedHour.setMinutes(0, 0, 0); // Round to the start of the hour
-  switch (timeRange) {
-    case CreditUsageTimeRange.LastDay:
-      return roundedHour.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-    case CreditUsageTimeRange.LastYear:
-      return timestamp.toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
-    case CreditUsageTimeRange.LastWeek:
-    case CreditUsageTimeRange.LastMonth:
-    default:
-      return timestamp.toLocaleDateString('en-US', { month: 'short', day: '2-digit' });
-  }
-}
-
-function createChartOptions(theme: StiggTheme, tooltipHandler: ExternalTooltipHandler<'bar'>): ChartOptions<'bar'> {
-  return {
-    responsive: true,
-    maintainAspectRatio: false,
-    interaction: {
-      mode: 'point',
-      intersect: true,
-    },
-    elements: {
-      bar: {
-        borderRadius: 4,
-        borderSkipped: 'bottom',
-      },
-    },
-    plugins: {
-      legend: {
-        display: false,
-      },
-      tooltip: {
-        enabled: false,
-        external: tooltipHandler,
-      },
-      datalabels: {
-        display: false,
-      },
-    },
-    scales: {
-      x: {
-        type: 'category',
-        stacked: true,
-        ticks: {
-          color: getAxisTickColor(theme),
-          font: getAxisTickFont(theme),
-          maxRotation: 45,
-          maxTicksLimit: 15, // Show approximately every other day for 30-day view
-        },
-        grid: {
-          color: getAxisColor(theme),
-          drawOnChartArea: false,
-          drawTicks: false,
-        },
-      },
-      y: {
-        type: 'linear',
-        stacked: true,
-        beginAtZero: true,
-        ticks: {
-          color: getAxisTickColor(theme),
-          font: getAxisTickFont(theme),
-          callback: (value) => numberFormatter(Number(value)),
-        },
-        grid: {
-          color: opacityColor(getAxisColor(theme), 0.5),
-          drawOnChartArea: true,
-          drawTicks: false,
-          borderDash: [5, 5],
-        },
-      },
-    },
-  };
-}
-
-export function computeChartData(
-  creditUsageData: CreditUsageFragment | null,
-  theme: StiggTheme,
-  tooltipHandler: ExternalTooltipHandler<'bar'>,
-  timeRange?: CreditUsageTimeRange,
-): { data: ChartData<'bar'> | null; options: ChartOptions<'bar'> | null } {
-  const labels = generateLabelsForTimeRange(timeRange);
-
-  if (!creditUsageData || !creditUsageData.series || creditUsageData.series.length === 0) {
-    return { data: null, options: null };
-  }
-
-  const datasets = creditUsageData.series
-    .map((series, index) => {
-      const featureName = series.featureName;
-
-      const dataMap = new Map<string, number>();
-      series.points.forEach((point) => {
-        const dateKey = generateDateKeyForTimeRange(new Date(point.timestamp as string), timeRange);
-        // Accumulate values for the same date instead of overwriting
-        const existingValue = dataMap.get(dateKey) || 0;
-        dataMap.set(dateKey, existingValue + point.value);
-      });
-
-      const data = labels.map((label) => dataMap.get(label) || 0);
-
-      // Use original index for colors so they stay consistent with legend order
-      const color = getFeatureColor(index);
-
-      return {
-        label: featureName,
-        data,
-        backgroundColor: opacityColor(color, 0.8),
-        borderColor: color,
-        borderWidth: 1,
-      };
-    })
-    .reverse(); // Reverse so highest usage feature appears at top of stack
-
-  const data: ChartData<'bar'> = {
-    labels,
-    datasets,
-  };
-
-  const options = createChartOptions(theme, tooltipHandler);
-
-  return { data, options };
-}

package/src/components/credits/creditUsageChart/CreditUsageChart.tsx

@@ -1,128 +0,0 @@
-import '../../common/chart/chartjs.plugins';
-import { useMemo, useState } from 'react';
-import styled from '@utils/style';
-import { Bar } from 'react-chartjs-2';
-import { CreditUsageTimeRange } from '@stigg/js-client-sdk';
-import { SdkThemeProvider, useStiggTheme } from '../../../theme/Theme';
-import { useCreditUsage } from '../hooks/useCreditUsage';
-import { redrawBeforeFirstDrawPlugin } from '../../common/chart/chartjs.helpers';
-import { computeChartData } from './CreditUsage.chartjs';
-import { CreditUsageChartTooltip, useCreditUsageChartTooltip } from './CreditUsageChartTooltip';
-import { CreditUsageLegend } from './CreditUsageLegend';
-import Skeleton from 'react-loading-skeleton';
-import { CreditUsageChartEmptyState } from './CreditUsageChartEmptyState';
-import { CreditUsageChartErrorState } from './CreditUsageChartErrorState';
-import { CreditUsageChartHeader } from './CreditUsageChartHeader';
-import { CreditUsageChartLocalization } from './types';
-import { CREDIT_USAGE_CHART_DEFAULT_LOCALIZATION } from '../localization';
-import { PoweredByStigg } from '../../common/PoweredByStigg';
-import { useStiggContext } from '../../../hooks';
-
-const CreditUsageChartContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-
-const CreditUsageChartCard = styled.div`
-  align-items: center;
-  justify-content: center;
-  min-height: 480px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme?.stigg?.palette?.outlinedBorder || '#e0e0e0'};
-  background-color: ${({ theme }) => theme?.stigg?.palette?.backgroundPaper || '#ffffff'};
-`;
-
-const ChartSkeleton = styled(Skeleton)`
-  border-radius: 4px;
-  height: 400px;
-  width: 100%;
-`;
-
-export type CreditUsageChartProps = {
-  currencyId: string;
-  timeRange: CreditUsageTimeRange;
-  localization?: Partial<CreditUsageChartLocalization>;
-};
-
-export function CreditUsageChart({ currencyId, timeRange, localization: customLocalization }: CreditUsageChartProps) {
-  const theme = useStiggTheme();
-  const stiggContext = useStiggContext({ optional: true });
-  const stigg = stiggContext?.stigg;
-  const localization = {
-    ...CREDIT_USAGE_CHART_DEFAULT_LOCALIZATION,
-    ...customLocalization,
-  };
-  const [selectedTimeRange, setSelectedTimeRange] = useState<CreditUsageTimeRange>(timeRange);
-  const { creditUsage, isLoading, error } = useCreditUsage({
-    currencyId,
-    timeRange: selectedTimeRange,
-  });
-
-  const { tooltipInfo, tooltipHandler } = useCreditUsageChartTooltip();
-
-  const { data: chartData, options } = useMemo(
-    () => computeChartData(creditUsage || null, theme, tooltipHandler, selectedTimeRange),
-    [creditUsage, theme, tooltipHandler, selectedTimeRange],
-  );
-
-  const totalCredits = useMemo(() => {
-    return creditUsage?.series.reduce((acc, curr) => acc + curr.totalCredits, 0) || 0;
-  }, [creditUsage]);
-
-  const currencyUnit = creditUsage?.currency?.units?.plural;
-
-  return (
-    <SdkThemeProvider componentTheme={theme}>
-      <CreditUsageChartContainer className="stigg-credit-usage-chart-container">
-        <CreditUsageChartCard className="stigg-credit-usage-chart-card">
-          <div style={{ width: '100%' }}>
-            <CreditUsageChartHeader
-              isLoading={isLoading}
-              totalCredits={totalCredits}
-              selectedTimeRange={selectedTimeRange}
-              setSelectedTimeRange={setSelectedTimeRange}
-              error={error}
-              localization={localization}
-              currencyUnit={currencyUnit}
-            />
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-              <div style={{ height: '400px', position: 'relative' }}>
-                {isLoading ? (
-                  <ChartSkeleton className="stigg-credit-usage-chart-skeleton" />
-                ) : error ? (
-                  <CreditUsageChartErrorState />
-                ) : creditUsage?.series.length === 0 ? (
-                  <CreditUsageChartEmptyState />
-                ) : (
-                  <>
-                    <CreditUsageChartTooltip tooltipInfo={tooltipInfo} />
-                    <Bar
-                      className="stigg-credit-usage-chart-bar"
-                      data={chartData ?? { labels: [], datasets: [] }}
-                      options={options ?? {}}
-                      plugins={[redrawBeforeFirstDrawPlugin]}
-                    />
-                  </>
-                )}
-              </div>
-              {!isLoading && <CreditUsageLegend creditUsageData={creditUsage} />}
-            </div>
-          </div>
-        </CreditUsageChartCard>
-        <PoweredByStigg
-          source="credit_usage_chart"
-          align="end"
-          smallScreenAlign="end"
-          style={{ marginTop: 0 }}
-          showWatermark={stigg?.getShowWatermark()}
-        />
-      </CreditUsageChartContainer>
-    </SdkThemeProvider>
-  );
-}

package/src/components/credits/creditUsageChart/CreditUsageChartEmptyState.tsx

@@ -1,29 +0,0 @@
-import styled from '@utils/style';
-import { Icon } from '../../common/Icon';
-import { Typography } from '../../common/Typography';
-
-const EmptyStateContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-
-const StyledIcon = styled(Icon)`
-  svg {
-    width: 32px;
-    height: 32px;
-  }
-`;
-
-export function CreditUsageChartEmptyState() {
-  return (
-    <EmptyStateContainer className="stigg-credit-usage-chart-empty-state">
-      <StyledIcon icon="PayAsYouGoCharge" style={{ display: 'flex' }} />
-      <Typography variant="body1" color="primary" bold>
-        No Usage Recorded
-      </Typography>
-    </EmptyStateContainer>
-  );
-}

package/src/components/credits/creditUsageChart/CreditUsageChartErrorState.tsx

@@ -1,19 +0,0 @@
-import styled from '@utils/style';
-import { Typography } from '../../common/Typography';
-
-const ErrorStateContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-
-export function CreditUsageChartErrorState() {
-  return (
-    <ErrorStateContainer className="stigg-credit-usage-chart-error-state">
-      <Typography variant="body1" color="error">
-        Failed to load credit usage
-      </Typography>
-    </ErrorStateContainer>
-  );
-}

package/src/components/credits/creditUsageChart/CreditUsageChartHeader.tsx

@@ -1,104 +0,0 @@
-import styled from '@utils/style';
-import { MenuItem, OutlinedInput, Select } from '@mui/material';
-import { CreditUsageTimeRange } from '@stigg/js-client-sdk';
-import { Skeleton } from '../../checkout/components/Skeletons.style';
-import { Typography } from '../../common/Typography';
-import { numberFormatter } from '../../utils/numberUtils';
-import { CreditUsageChartLocalization } from './types';
-
-const TIME_RANGE_OPTIONS = [
-  { value: CreditUsageTimeRange.LastDay, label: 'Last 24 Hours' },
-  { value: CreditUsageTimeRange.LastWeek, label: 'Last 7 Days' },
-  { value: CreditUsageTimeRange.LastMonth, label: 'Last 30 Days' },
-  { value: CreditUsageTimeRange.LastYear, label: 'Last 12 Months' },
-];
-
-const TimeRangeSelect = styled(Select)`
-  border-radius: 10px;
-  height: 38px;
-  min-width: 150px;
-
-  &:hover .MuiOutlinedInput-notchedOutline {
-    border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
-  }
-`;
-
-const TimeRangeInput = styled(OutlinedInput)`
-  & .MuiInputBase-input {
-    padding: 10px 12px;
-  }
-
-  &.Mui-focused .MuiOutlinedInput-notchedOutline {
-    border-color: ${({ theme }) => theme.stigg.palette.primary} !important;
-  }
-`;
-
-export type CreditUsageChartHeaderProps = {
-  isLoading: boolean;
-  totalCredits: number;
-  selectedTimeRange: CreditUsageTimeRange;
-  setSelectedTimeRange: (timeRange: CreditUsageTimeRange) => void;
-  error: Error | null;
-  localization: Partial<CreditUsageChartLocalization>;
-  currencyUnit?: string;
-};
-
-export function CreditUsageChartHeader({
-  isLoading,
-  totalCredits,
-  selectedTimeRange,
-  setSelectedTimeRange,
-  error,
-  localization,
-  currencyUnit,
-}: CreditUsageChartHeaderProps) {
-  return (
-    <div
-      className="stigg-credit-usage-chart-header"
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        marginBottom: 16,
-        justifyContent: 'space-between',
-      }}>
-      <div style={{ display: 'flex', flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-        <Typography variant="h3" color="primary" className="stigg-credit-usage-chart-title">
-          {localization.title}
-        </Typography>
-        {isLoading ? (
-          <Skeleton width={100} height={24} />
-        ) : (
-          <>
-            <Typography variant="h6" color="secondary" className="stigg-credit-usage-chart-total">
-              |
-            </Typography>
-            <Typography variant="h6" color="secondary" className="stigg-credit-usage-chart-total">
-              {localization.totalSpend}: {numberFormatter(totalCredits || 0)} {currencyUnit || ''}
-            </Typography>
-          </>
-        )}
-      </div>
-
-      {!isLoading && !error && (
-        <TimeRangeSelect
-          className="stigg-credit-usage-chart-time-range-select"
-          value={selectedTimeRange}
-          input={<TimeRangeInput />}
-          onChange={(e) => setSelectedTimeRange(e.target.value as CreditUsageTimeRange)}
-          renderValue={(value) => (
-            <Typography variant="body1" color="primary">
-              {TIME_RANGE_OPTIONS.find((option) => option.value === value)?.label || ''}{' '}
-            </Typography>
-          )}>
-          {TIME_RANGE_OPTIONS.map((option) => (
-            <MenuItem key={option.value} value={option.value}>
-              <Typography variant="body1" color="primary">
-                {option.label}
-              </Typography>
-            </MenuItem>
-          ))}
-        </TimeRangeSelect>
-      )}
-    </div>
-  );
-}