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

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

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

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

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

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

@@ -1,64 +0,0 @@
-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';
-
-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 }: CreditGrantsProps) {
-  const stiggContext = useStiggContext({ optional: true });
-  const stigg = stiggContext?.stigg;
-  const theme = stiggContext?.theme;
-
-  const localization = {
-    ...CREDIT_GRANTS_DEFAULT_LOCALIZATION,
-    ...customLocalization,
-  };
-
-  const { creditGrants, isLoading, error } = useCreditGrants({
-    currencyId,
-  });
-
-  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}
-          />
-        </CreditGrantsCard>
-        <PoweredByStigg
-          source="grant_list"
-          align="end"
-          smallScreenAlign="end"
-          style={{ marginTop: 0 }}
-          showWatermark={stigg?.getShowWatermark()}
-        />
-      </CreditGrantsContainer>
-    </SdkThemeProvider>
-  );
-}

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

@@ -1,101 +0,0 @@
-import { capitalize } from 'lodash';
-import { Typography } from '../../common/Typography';
-import { GenericTable, HeadCell } from '../../common/table';
-import { StatusChip } from '../../common/StatusChip';
-import { CreditGrant, CreditGrantsLocalization, CreditGrantStatus } from './types';
-import { getCreditGrantStatus, formatBalance } from '../utils/creditGrantUtils';
-import { formatDateTime, formatDateOnly } from '../../utils/dateUtils';
-import { mapCreditGrantStatusToVariant, mapCreditGrantType } from './utils';
-
-interface CreditGrantsTableProps {
-  creditGrants: CreditGrant[];
-  isLoading: boolean;
-  error: Error | null;
-  localization: CreditGrantsLocalization;
-  decimalPlaces?: number | null;
-}
-
-// temporary type until status exists on the credit grant
-interface CreditGrantWithStatus extends CreditGrant {
-  status: CreditGrantStatus;
-}
-
-export function CreditGrantsTable({
-  creditGrants,
-  isLoading,
-  error,
-  localization,
-  decimalPlaces,
-}: CreditGrantsTableProps) {
-  const grantsWithStatus: CreditGrantWithStatus[] = creditGrants.map((grant) => ({
-    ...grant,
-    status: getCreditGrantStatus(grant),
-  }));
-
-  const headCells: Array<HeadCell<CreditGrantWithStatus>> = [
-    {
-      id: 'effectiveAt',
-      label: localization.receivedAt,
-      width: '205px',
-      render: ({ effectiveAt }) => (
-        <Typography variant="body1" className="stigg-credit-grants-effective-date">
-          {formatDateTime(effectiveAt)}
-        </Typography>
-      ),
-    },
-    {
-      id: 'grantType',
-      label: localization.grantType,
-      width: '205px',
-      render: ({ grantType }) => (
-        <Typography variant="body1" className="stigg-credit-grants-grant-type">
-          {mapCreditGrantType(grantType)}
-        </Typography>
-      ),
-    },
-    {
-      id: 'status',
-      label: localization.status,
-      width: '205px',
-      render: ({ status }) => {
-        const text = capitalize(status);
-        const variant = mapCreditGrantStatusToVariant(status);
-        return <StatusChip label={text} variant={variant} className="stigg-credit-grants-status-chip" />;
-      },
-    },
-    {
-      id: 'amount',
-      label: localization.balance,
-      width: '205px',
-      render: (grant) => (
-        <Typography variant="body1" className="stigg-credit-grants-balance">
-          {formatBalance(grant, decimalPlaces)}
-        </Typography>
-      ),
-    },
-    {
-      id: 'expireAt',
-      label: localization.expiryDate,
-      width: '205px',
-      render: ({ expireAt }) => (
-        <Typography variant="body1" className="stigg-credit-grants-expiry-date">
-          {expireAt ? formatDateOnly(expireAt) : '-'}
-        </Typography>
-      ),
-    },
-  ];
-
-  return (
-    <GenericTable
-      data={grantsWithStatus}
-      headCells={headCells}
-      isLoading={isLoading}
-      error={error}
-      emptyMessage={localization.emptyState}
-      loadingMessage={localization.loadingState}
-      errorMessage={localization.errorState}
-      className="stigg-credit-grants-table"
-      skeletonRows={3}
-    />
-  );
-}

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

@@ -1,38 +0,0 @@
-import { CreditGrantFragment } from '@stigg/js-client-sdk';
-
-export type CreditGrant = Pick<
-  CreditGrantFragment,
-  | 'grantId'
-  | 'amount'
-  | 'comment'
-  | 'currencyId'
-  | 'effectiveAt'
-  | 'expireAt'
-  | 'grantType'
-  | 'consumedAmount'
-  | 'createdAt'
-  | 'updatedAt'
->;
-
-export enum CreditGrantStatus {
-  SCHEDULED = 'SCHEDULED',
-  AVAILABLE = 'AVAILABLE',
-  EXPIRED = 'EXPIRED',
-}
-
-export interface GetCreditGrantsParams {
-  currencyId?: string;
-}
-
-// TODO: make sure all localization keys are used in the component
-export type CreditGrantsLocalization = {
-  receivedAt: string;
-  effectiveAt: string;
-  grantType: string;
-  status: string;
-  balance: string;
-  expiryDate: string;
-  emptyState: string;
-  loadingState: string;
-  errorState: string;
-};

package/src/components/credits/grants/utils.ts

@@ -1,25 +0,0 @@
-import { StatusChipVariant } from '@/theme/types';
-import { CreditGrantStatus } from './types';
-import { CreditGrantType } from '@stigg/js-client-sdk';
-
-export const mapCreditGrantStatusToVariant = (status: CreditGrantStatus): StatusChipVariant => {
-  switch (status) {
-    case CreditGrantStatus.AVAILABLE:
-      return 'success';
-    case CreditGrantStatus.SCHEDULED:
-      return 'warning';
-    case CreditGrantStatus.EXPIRED:
-      return 'error';
-    default:
-      return 'neutral';
-  }
-};
-
-export const mapCreditGrantType = (grantType: CreditGrantType): string => {
-  switch (grantType) {
-    case CreditGrantType.Promotional:
-      return 'Promotional';
-    case CreditGrantType.Paid:
-      return 'Top-up';
-  }
-};

package/src/components/credits/hooks/useCreditBalance.ts

@@ -1,75 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import { GetCreditBalanceInput } from '@stigg/js-client-sdk';
-import { useStiggContext } from '../../../hooks/useStiggContext';
-import { useFetch } from '../../../hooks/useFetch';
-
-export interface GetCreditBalanceParams {
-  currencyId: string;
-}
-
-export interface CreditBalance {
-  currentBalance: number;
-  currencyId?: string;
-}
-
-export function useCreditBalance(params: GetCreditBalanceParams) {
-  const stiggContext = useStiggContext();
-  const stigg = stiggContext?.stigg;
-  const updatedAt = stiggContext?.updatedAt;
-
-  const func = useCallback(async () => {
-    if (!stigg || !stigg.isCustomerLoaded) {
-      return null;
-    }
-
-    try {
-      const input: GetCreditBalanceInput = {
-        currencyId: params.currencyId,
-      };
-
-      const balanceSummary = await stigg.getCreditBalance(input);
-
-      // Return the first balance if available, or default to 0 if no balances
-      if (balanceSummary.balances && balanceSummary.balances.length > 0) {
-        const {
-          currentBalance,
-          totalConsumed,
-          totalGranted,
-          currency: { currencyId, displayName, units, symbol },
-        } = balanceSummary.balances[0];
-        return {
-          currentBalance,
-          totalConsumed,
-          totalGranted,
-          currencyId,
-          displayName,
-          units,
-          symbol,
-        };
-      }
-
-      // Return default balance of 0 if no balances found
-      return {
-        currencyId: params.currencyId,
-        currentBalance: 0,
-        totalConsumed: 0,
-        totalGranted: 0,
-      };
-    } catch (error) {
-      console.error(error);
-      throw error;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stigg, params.currencyId, updatedAt]);
-
-  const { data, error, isLoading } = useFetch({ func });
-
-  return useMemo(
-    () => ({
-      balance: data,
-      isLoading,
-      error,
-    }),
-    [data, error, isLoading],
-  );
-}

package/src/components/credits/hooks/useCreditGrants.ts

@@ -1,40 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import { useStiggContext } from '../../../hooks/useStiggContext';
-import { useFetch } from '../../../hooks/useFetch';
-import { GetCreditGrantsParams } from '../grants/types';
-import { CreditGrant } from '../grants/types';
-
-export function useCreditGrants(params: GetCreditGrantsParams): {
-  creditGrants: CreditGrant[];
-  isLoading: boolean;
-  error: Error | null;
-} {
-  const stiggContext = useStiggContext();
-  const stigg = stiggContext?.stigg;
-  const updatedAt = stiggContext?.updatedAt;
-
-  const func = useCallback(async () => {
-    if (!stigg || !stigg.isCustomerLoaded) {
-      return null;
-    }
-
-    try {
-      return stigg.getCreditGrants({ currencyId: params.currencyId });
-    } catch (error) {
-      console.error('Error fetching credit grants:', error);
-      throw error;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stigg, params.currencyId, updatedAt]);
-
-  const { data, error, isLoading } = useFetch({ func });
-
-  return useMemo(
-    () => ({
-      creditGrants: data?.data || [],
-      isLoading,
-      error,
-    }),
-    [data, error, isLoading],
-  );
-}

package/src/components/credits/hooks/useCreditUsage.ts

@@ -1,50 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import { GetCreditUsageInput } from '@stigg/js-client-sdk';
-import { useStiggContext } from '../../../hooks/useStiggContext';
-import { useFetch } from '../../../hooks/useFetch';
-
-export interface GetCreditBalanceParams {
-  currencyId: string;
-}
-
-export interface CreditBalance {
-  currentBalance: number;
-  currencyId?: string;
-}
-
-export function useCreditUsage(params: GetCreditUsageInput) {
-  const stiggContext = useStiggContext();
-  const stigg = stiggContext?.stigg;
-  const updatedAt = stiggContext?.updatedAt;
-
-  const func = useCallback(async () => {
-    if (!stigg || !stigg.isCustomerLoaded) {
-      return null;
-    }
-
-    try {
-      const input: GetCreditUsageInput = {
-        currencyId: params.currencyId,
-        timeRange: params.timeRange,
-      };
-
-      const creditUsage = await stigg.getCreditUsage(input);
-      return creditUsage;
-    } catch (error) {
-      console.error(error);
-      throw error;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stigg, params.currencyId, params.timeRange, updatedAt]);
-
-  const { data, error, isLoading } = useFetch({ func });
-
-  return useMemo(
-    () => ({
-      creditUsage: data,
-      isLoading,
-      error,
-    }),
-    [data, error, isLoading],
-  );
-}

package/src/components/credits/index.ts

@@ -1,15 +0,0 @@
-export { CreditBalance } from './balance/CreditBalance';
-export type { CreditBalanceProps } from './balance/CreditBalance';
-export { useCreditBalance } from './hooks/useCreditBalance';
-export type { GetCreditBalanceParams, CreditBalance as CreditBalanceData } from './hooks/useCreditBalance';
-
-export { CreditUsageChart, type CreditUsageChartProps } from './creditUsageChart/CreditUsageChart';
-export { useCreditUsage } from './hooks/useCreditUsage';
-
-export { CreditUtilization } from './utilization/CreditUtilization';
-export type { CreditUtilizationProps, CreditUtilizationLocalization } from './utilization/CreditUtilization';
-
-export { CreditGrants } from './grants/CreditGrants';
-export type { CreditGrantsProps } from './grants/CreditGrants';
-export { useCreditGrants } from './hooks/useCreditGrants';
-export type { CreditGrant, CreditGrantStatus, GetCreditGrantsParams, CreditGrantsLocalization } from './grants/types';

package/src/components/credits/localization.ts

@@ -1,25 +0,0 @@
-export const CREDIT_WIDGET_DEFAULT_LOCALIZATION = {
-  title: 'Credit balance',
-};
-
-export const CREDIT_UTILIZATION_DEFAULT_LOCALIZATION = {
-  title: 'Credit utilization',
-  remaining: 'Remaining',
-};
-
-export const CREDIT_GRANTS_DEFAULT_LOCALIZATION = {
-  receivedAt: 'Received',
-  effectiveAt: 'Effective At',
-  grantType: 'Grant Type',
-  status: 'State',
-  balance: 'Balance',
-  expiryDate: 'Expires',
-  emptyState: 'No credit grants found',
-  loadingState: 'Loading credit grants...',
-  errorState: 'Failed to load credit grants',
-};
-
-export const CREDIT_USAGE_CHART_DEFAULT_LOCALIZATION = {
-  title: 'Usage',
-  totalSpend: 'Total spend',
-};