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

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

@@ -0,0 +1,113 @@
+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;
+  pageSize?: number;
+  pageNum?: number;
+  totalCount?: number;
+  onPageChange?: (event: any, nextPage: number) => void;
+}
+
+// temporary type until status exists on the credit grant
+interface CreditGrantWithStatus extends CreditGrant {
+  status: CreditGrantStatus;
+}
+
+export function CreditGrantsTable({
+  creditGrants,
+  isLoading,
+  error,
+  localization,
+  decimalPlaces,
+  pageSize,
+  pageNum,
+  totalCount,
+  onPageChange,
+}: 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={grantsWithStatus?.length || 3}
+      pageNum={pageNum}
+      pageSize={pageSize}
+      totalCount={totalCount}
+      onPageChange={onPageChange}
+    />
+  );
+}

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

@@ -0,0 +1,40 @@
+import { CreditGrantFragment, CursorPaging } 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;
+  pageSize?: number;
+  paging?: CursorPaging;
+}
+
+// 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

@@ -0,0 +1,25 @@
+import { StatusChipVariant } from '@/theme/types';
+import { CreditGrantStatus } from './types';
+import { CreditGrantType } from '../../..';
+
+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

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

@@ -0,0 +1,45 @@
+import { useMemo, useCallback } from 'react';
+import { PageInfoFragment } from '@stigg/js-client-sdk';
+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;
+  paging?: PageInfoFragment | null;
+  totalCount?: number;
+} {
+  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, paging: params.paging });
+    } catch (error) {
+      console.error('Error fetching credit grants:', error);
+      throw error;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stigg, params.currencyId, params.paging, updatedAt]);
+
+  const { data, error, isLoading } = useFetch({ func });
+
+  return useMemo(
+    () => ({
+      creditGrants: data?.data || [],
+      paging: data?.pageInfo,
+      totalCount: data?.totalCount,
+      isLoading,
+      error,
+    }),
+    [data, error, isLoading],
+  );
+}

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

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

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

@@ -0,0 +1,25 @@
+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',
+};

package/src/components/credits/utilization/CreditUtilization.tsx

@@ -0,0 +1,74 @@
+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 { CreditUtilizationValue } from './CreditUtilizationValue';
+import { CREDIT_UTILIZATION_DEFAULT_LOCALIZATION } from '../localization';
+import { CustomerPortalContext, useCheckContextExists } from '@/components/customerPortal';
+
+const CreditUtilizationContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
+
+const CreditUtilizationCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.stigg?.palette?.outlinedBorder};
+  background-color: ${({ theme }) => theme?.stigg?.palette?.backgroundPaper};
+  min-height: 90px;
+`;
+
+export type CreditUtilizationProps = GetCreditBalanceParams & {
+  localization?: CreditUtilizationLocalization;
+  decimalPlaces?: number | null;
+  showUnits?: boolean;
+  showSymbol?: boolean;
+};
+
+export type CreditUtilizationLocalization = {
+  title: string;
+  remaining: string;
+};
+
+export function CreditUtilization({
+  currencyId,
+  localization,
+  decimalPlaces,
+  showUnits = true,
+  showSymbol = false,
+}: CreditUtilizationProps) {
+  const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
+  const stiggContext = useStiggContext({ optional: true });
+  const theme = stiggContext?.theme;
+
+  const { title, remaining } = { ...CREDIT_UTILIZATION_DEFAULT_LOCALIZATION, ...localization };
+
+  const component = (
+    <CreditUtilizationContainer className="stigg-credit-utilization-container">
+      <CreditUtilizationCard className="stigg-credit-utilization-card">
+        <Typography variant="h6" color="primary" className="stigg-credit-utilization-title">
+          {title}
+        </Typography>
+        <CreditUtilizationValue
+          currencyId={currencyId}
+          decimalPlaces={decimalPlaces}
+          showUnits={showUnits}
+          showSymbol={showSymbol}
+          remainingLabel={remaining}
+        />
+      </CreditUtilizationCard>
+    </CreditUtilizationContainer>
+  );
+
+  if (hasCustomerPortalContext) {
+    return component;
+  }
+  return <SdkThemeProvider componentTheme={theme}>{component}</SdkThemeProvider>;
+}

package/src/components/credits/utilization/CreditUtilizationValue.tsx

@@ -0,0 +1,113 @@
+import styled from '@utils/style';
+import Skeleton from 'react-loading-skeleton';
+import { Typography } from '../../common/Typography';
+import { useCreditBalance } from '../hooks/useCreditBalance';
+import { formatValue, formatCreditSuffix, calculateUtilizationPercentage } from '../utils/creditBalanceUtils';
+import { CREDIT_UTILIZATION_DEFAULT_LOCALIZATION } from '../localization';
+import { ProgressBar } from '@/components/common/ProgressBar';
+
+const UtilizationContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  width: 100%;
+`;
+
+const UtilizationLeft = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: baseline;
+`;
+
+const UtilizationRight = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: baseline;
+`;
+
+const CreditUtilizationProgress = ({
+  totalConsumed,
+  totalGranted,
+}: {
+  totalConsumed: number | undefined;
+  totalGranted: number | undefined;
+}) => {
+  const utilizationPercentage = calculateUtilizationPercentage(totalConsumed ?? 0, totalGranted ?? 0);
+  return <ProgressBar percentage={utilizationPercentage} className="stigg-credit-utilization-progress" />;
+};
+
+export interface CreditUtilizationValueProps {
+  currencyId: string;
+  decimalPlaces?: number | null;
+  showUnits?: boolean;
+  showSymbol?: boolean;
+  remainingLabel?: string;
+}
+
+export function CreditUtilizationValue({
+  currencyId,
+  decimalPlaces = null,
+  showUnits = true,
+  showSymbol = false,
+  remainingLabel = CREDIT_UTILIZATION_DEFAULT_LOCALIZATION.remaining,
+}: CreditUtilizationValueProps) {
+  const { balance, isLoading, error } = useCreditBalance({
+    currencyId,
+  });
+
+  if (error) {
+    return (
+      <Typography variant="body1" color="error" className="stigg-credit-utilization-value-error">
+        {error.message || 'Failed to load balance'}
+      </Typography>
+    );
+  }
+
+  if (isLoading) {
+    return <Skeleton width={280} height={24} className="stigg-credit-utilization-value-loading" />;
+  }
+
+  if (balance) {
+    const { currentBalance, totalConsumed, totalGranted } = balance;
+    const suffix = formatCreditSuffix(balance, showUnits, showSymbol);
+
+    return (
+      <>
+        <UtilizationContainer>
+          <UtilizationLeft>
+            <Typography variant="h3" color="primary" bold className="stigg-credit-utilization-usage">
+              {formatValue(totalConsumed, decimalPlaces)}
+            </Typography>
+            <Typography variant="h3" color="primary" className="stigg-credit-utilization-separator">
+              /
+            </Typography>
+            <Typography variant="h3" color="primary" className="stigg-credit-utilization-total">
+              {formatValue(totalGranted, decimalPlaces)}
+            </Typography>
+            <Typography variant="caption" color="secondary" className="stigg-credit-utilization-suffix">
+              {suffix}
+            </Typography>
+          </UtilizationLeft>
+          <UtilizationRight>
+            <Typography variant="caption" color="secondary" className="stigg-credit-utilization-remaining-label">
+              {remainingLabel}
+            </Typography>
+            <Typography variant="caption" color="primary" bold className="stigg-credit-utilization-remaining-value">
+              {formatValue(currentBalance, decimalPlaces)}
+            </Typography>
+          </UtilizationRight>
+        </UtilizationContainer>
+        <CreditUtilizationProgress totalConsumed={balance.totalConsumed} totalGranted={balance.totalGranted} />
+      </>
+    );
+  }
+
+  return (
+    <Typography variant="body1" color="disabled" className="stigg-credit-utilization-value-no-balance">
+      No balance data available
+    </Typography>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { numberFormatter } from '../../utils/numberUtils';
+
+export const formatValue = (value?: number, decimalPlaces?: number | null): string | number => {
+  if (!value) return 0;
+
+  return numberFormatter(value, { maximumFractionDigits: decimalPlaces ?? undefined });
+};
+
+export const formatCreditSuffix = (
+  balance: {
+    currentBalance: number;
+    displayName?: string;
+    units?: { singular: string; plural: string } | null;
+    symbol?: string | null;
+  },
+  showUnits: boolean = true,
+  showSymbol: boolean = false,
+): string => {
+  const { currentBalance, displayName, units, symbol } = balance;
+  const currencySymbol = showSymbol && symbol;
+
+  const suffixUnits = units ? (currentBalance === 1 ? units.singular : units.plural) : displayName;
+  const suffix = [currencySymbol, showUnits ? suffixUnits : ''].filter(Boolean).join(' ');
+
+  return suffix;
+};
+
+export const calculateUtilizationPercentage = (currentUsage: number, totalBalance: number): number => {
+  if (totalBalance === 0) return 0;
+  return Math.min((currentUsage / totalBalance) * 100, 100);
+};

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

@@ -0,0 +1,27 @@
+import moment, { MomentInput } from 'moment';
+import { CreditGrant, CreditGrantStatus } from '../grants/types';
+import { formatValue } from './creditBalanceUtils';
+
+/*
+The credit grant status is currently derived, but later will be provided by the API.
+*/
+export function getCreditGrantStatus(grant: CreditGrant): CreditGrantStatus {
+  const now = moment();
+  const effectiveAt = moment(grant.effectiveAt as MomentInput);
+  const expireAt = grant.expireAt ? moment(grant.expireAt as MomentInput) : null;
+
+  if (effectiveAt.isAfter(now)) {
+    return CreditGrantStatus.SCHEDULED;
+  }
+
+  if (expireAt && expireAt.isBefore(now)) {
+    return CreditGrantStatus.EXPIRED;
+  }
+
+  return CreditGrantStatus.AVAILABLE;
+}
+
+export function formatBalance(grant: CreditGrant, decimalPlaces?: number | null): string {
+  console.log('decimalPlaces', decimalPlaces);
+  return `${formatValue(grant.consumedAmount, decimalPlaces)} / ${grant.amount}`;
+}

package/src/components/customerPortal/CustomerPortal.style.ts

@@ -0,0 +1,20 @@
+import styled from '@utils/style';
+
+export const CustomerPortalLayout = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & * {
+    box-sizing: border-box;
+  }
+`;
+
+export const CustomerPortalSections = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 24px;
+`;