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

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

@@ -0,0 +1,128 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,104 @@
+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>
+  );
+}

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

@@ -0,0 +1,93 @@
+import styled from '@utils/style';
+import { useCallback } from 'react';
+import { TooltipModel } from 'chart.js';
+import { isEmpty } from 'lodash';
+import {
+  ChartJsExternalTooltip,
+  ExternalTooltipInfo,
+  ExternalTooltipTranslateFunc,
+  useChartJsExternalTooltip,
+  bottomBarTooltipPositioner,
+} from '../../common/chart/chartjs.tooltip.plugin';
+import { Typography } from '../../common/Typography';
+import { numberFormatter } from '../../utils/numberUtils';
+
+export type CreditUsageChartTooltipData = {
+  featureName: string;
+  usage: number;
+  date: string;
+  color: string;
+};
+
+export type CreditUsageChartTooltipProps = {
+  tooltipInfo: ExternalTooltipInfo<CreditUsageChartTooltipData>;
+};
+
+export const SideColorMarker = styled.div`
+  width: 3px;
+  margin-right: 15px;
+`;
+
+export function CreditUsageChartTooltip({ tooltipInfo }: CreditUsageChartTooltipProps) {
+  if (!tooltipInfo.payload) {
+    return <></>;
+  }
+
+  const { featureName, usage, date, color } = tooltipInfo.payload;
+
+  return (
+    <ChartJsExternalTooltip tooltipInfo={tooltipInfo} placement="top" $padding={16}>
+      <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }} className="stigg-credit-usage-chart-tooltip">
+        <SideColorMarker style={{ backgroundColor: color, marginTop: 2 }} />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <Typography variant="body1" color="secondary">
+            {date}
+          </Typography>
+          <Typography variant="body1" color="primary">
+            {featureName}
+          </Typography>
+          <div style={{ display: 'flex', flexDirection: 'row', gap: 4, alignItems: 'center' }}>
+            <Typography variant="body1" color="primary">
+              {numberFormatter(usage)}
+            </Typography>
+            <Typography variant="body1" color="primary">
+              Credits
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </ChartJsExternalTooltip>
+  );
+}
+
+export function useCreditUsageChartTooltip() {
+  const translate = useCallback<ExternalTooltipTranslateFunc<'bar', CreditUsageChartTooltipData>>(
+    (tooltip: TooltipModel<'bar'>) => {
+      if (isEmpty(tooltip.dataPoints) || isEmpty(tooltip.labelColors)) {
+        return undefined;
+      }
+
+      const dataPoint = tooltip.dataPoints[0];
+      const labelColor = tooltip.labelColors[0];
+
+      if (!dataPoint || !labelColor) {
+        return undefined;
+      }
+
+      const featureName = dataPoint.dataset.label || 'Unknown Feature';
+      const usage = dataPoint.parsed.y || 0;
+      const date = dataPoint.label || '';
+      const color = labelColor.backgroundColor as string;
+
+      return {
+        featureName,
+        usage,
+        date,
+        color,
+      };
+    },
+    [],
+  );
+
+  return useChartJsExternalTooltip(translate, bottomBarTooltipPositioner);
+}

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

@@ -0,0 +1,141 @@
+import styled from '@utils/style';
+import { CreditUsageFragment } from '@stigg/js-client-sdk';
+import { numberFormatter } from '../../utils/numberUtils';
+import { getFeatureColor } from './CreditUsage.chartjs';
+import { Typography } from '../../common/Typography';
+
+const LegendContainer = styled.div`
+  padding: 8px;
+  margin: 0 12px;
+`;
+
+const LegendItem = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const BarContainer = styled.div`
+  flex: 1;
+  position: relative;
+  align-items: center;
+  display: flex;
+`;
+
+const HorizontalBar = styled.div<{ $width: number; $minContentWidth: number }>`
+  height: 24px;
+  width: ${({ $width, $minContentWidth }) => {
+    const percentageWidth = Math.min($width, 100);
+    const minWidthPx = Math.max($minContentWidth, 80);
+    return `max(${percentageWidth}%, ${minWidthPx}px)`;
+  }};
+  background-color: #f5f6f9;
+  border-radius: 4px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+`;
+
+const ColorIndicator = styled.div<{ $color: string }>`
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  background-color: ${({ $color }) => $color};
+  margin-right: 8px;
+  flex-shrink: 0;
+`;
+
+const FeatureName = styled.div`
+  margin-right: 24px;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+interface CreditUsageLegendProps {
+  creditUsageData: CreditUsageFragment | null;
+}
+
+export function CreditUsageLegend({ creditUsageData }: CreditUsageLegendProps) {
+  if (!creditUsageData || !creditUsageData.series || creditUsageData.series.length === 0) {
+    return null;
+  }
+
+  const featureData = creditUsageData.series
+    .map((series, index) => {
+      const featureId = series.featureId;
+      const featureName = series.featureName;
+      const totalCredits = series.totalCredits;
+
+      const color = getFeatureColor(index);
+
+      return {
+        featureId,
+        featureName,
+        totalCredits,
+        color,
+      };
+    })
+    .sort((a, b) => b.totalCredits - a.totalCredits);
+
+  const maxTotalCredits = Math.max(...featureData.map((feature) => feature.totalCredits));
+
+  // Helper function to estimate content width
+  const estimateContentWidth = (featureName: string, value: number) => {
+    // Rough estimation: 12px (color indicator) + 8px (margin) + feature name width + 16px (padding) + value width + 16px (padding)
+    const featureNameWidth = Math.min(featureName.length * 7, 200); // Roughly 7px per character, max 200px
+    const valueWidth = numberFormatter(value).length * 8; // Roughly 8px per character for numbers
+    return 12 + 8 + featureNameWidth + 16 + valueWidth + 16;
+  };
+
+  return (
+    <LegendContainer className="stigg-credit-usage-chart-legend">
+      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Typography
+          style={{ marginBottom: 12 }}
+          variant="body1"
+          color="secondary"
+          className="stigg-credit-usage-chart-legend-title">
+          Top sources
+        </Typography>
+        <Typography variant="caption" color="disabled" className="stigg-credit-usage-chart-legend-title-currency-units">
+          {creditUsageData.currency?.units?.plural}
+        </Typography>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {featureData.map((feature) => {
+          const percentageWidth = maxTotalCredits > 0 ? (feature.totalCredits / maxTotalCredits) * 100 : 0;
+          const minContentWidth = estimateContentWidth(feature.featureName, feature.totalCredits);
+
+          return (
+            <LegendItem
+              key={feature.featureId}
+              className={`stigg-credit-usage-chart-legend-item stigg-credit-usage-chart-legend-item-${feature.featureId}`}>
+              <BarContainer className="stigg-credit-usage-chart-legend-bar-container">
+                <HorizontalBar $width={percentageWidth} $minContentWidth={minContentWidth}>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <ColorIndicator $color={feature.color} />
+                    <FeatureName className="stigg-credit-usage-chart-legend-feature-name">
+                      <Typography
+                        variant="body1"
+                        color="primary"
+                        className="stigg-credit-usage-chart-legend-feature-name-text">
+                        {feature.featureName}
+                      </Typography>
+                    </FeatureName>
+                  </div>
+                  <Typography variant="caption" color="primary" bold className="stigg-credit-usage-chart-legend-value">
+                    {numberFormatter(feature.totalCredits)}
+                  </Typography>
+                </HorizontalBar>
+              </BarContainer>
+            </LegendItem>
+          );
+        })}
+      </div>
+    </LegendContainer>
+  );
+}

package/src/components/credits/creditUsageChart/types.ts

@@ -0,0 +1,4 @@
+export type CreditUsageChartLocalization = {
+  title: string;
+  totalSpend: string;
+};

package/src/components/credits/grants/CreditGrants.tsx

@@ -0,0 +1,84 @@
+import styled from '@utils/style';
+import { GetCreditGrantsParams } from './types';
+import { useStiggContext } from '../../../hooks';
+import { SdkThemeProvider } from '../../../theme/Theme';
+import { PoweredByStigg } from '../../common/PoweredByStigg';
+import { useCreditGrants } from '../hooks/useCreditGrants';
+import { CREDIT_GRANTS_DEFAULT_LOCALIZATION } from '../localization';
+import type { CreditGrantsLocalization } from './types';
+import { CreditGrantsTable } from './CreditGrantsTable';
+import { usePagination } from '../../hooks/usePagination';
+import { CursorPaging } from '@stigg/js-client-sdk';
+import { useState } from 'react';
+
+const DEFAULT_PAGE_SIZE = 10;
+
+const CreditGrantsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const CreditGrantsCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export type CreditGrantsProps = GetCreditGrantsParams & {
+  localization?: Partial<CreditGrantsLocalization>;
+  decimalPlaces?: number | null;
+};
+
+export function CreditGrants({
+  currencyId,
+  localization: customLocalization,
+  decimalPlaces,
+  pageSize = DEFAULT_PAGE_SIZE,
+}: CreditGrantsProps) {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+  const theme = stiggContext?.theme;
+
+  const localization = {
+    ...CREDIT_GRANTS_DEFAULT_LOCALIZATION,
+    ...customLocalization,
+  };
+
+  const [cursor, setCursor] = useState<CursorPaging>({ first: pageSize });
+
+  const { creditGrants, isLoading, error, paging, totalCount } = useCreditGrants({
+    currencyId,
+    pageSize,
+    paging: cursor,
+  });
+
+  const { pageNumber, pageChangeFunc } = usePagination(paging, setCursor, pageSize);
+
+  return (
+    <SdkThemeProvider componentTheme={theme}>
+      <CreditGrantsContainer className="stigg-credit-grants-container">
+        <CreditGrantsCard className="stigg-credit-grants-card">
+          <CreditGrantsTable
+            creditGrants={creditGrants}
+            isLoading={isLoading}
+            error={error}
+            localization={localization}
+            decimalPlaces={decimalPlaces}
+            pageSize={pageSize}
+            pageNum={pageNumber}
+            totalCount={totalCount}
+            onPageChange={pageChangeFunc}
+          />
+        </CreditGrantsCard>
+        <PoweredByStigg
+          source="grant_list"
+          align="end"
+          smallScreenAlign="end"
+          style={{ marginTop: 0 }}
+          showWatermark={stigg?.getShowWatermark()}
+        />
+      </CreditGrantsContainer>
+    </SdkThemeProvider>
+  );
+}