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

package/dist/src/components/checkout/types.d.ts

@@ -0,0 +1,86 @@
+import { Addon, ApplySubscription, ApplySubscriptionResults, BillingAddress, CheckoutStatePlan, GetCheckoutState, GetCheckoutStateResults, PreviewSubscription, Price, SubscriptionBillingInfo, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
+import { AddonsStepState } from './hooks';
+import { PaymentStepState } from './hooks/usePaymentStepModel';
+import { PlanStepState } from './hooks/usePlanStepModel';
+export type CheckoutState = {
+    planStep: PlanStepState;
+    addonsStep: AddonsStepState;
+    paymentStep: PaymentStepState;
+};
+export type BillingInformation = {
+    taxDetails?: TaxDetailsInput;
+};
+export type TaxDetailsInput = {
+    taxPercentage?: SubscriptionBillingInfo['taxPercentage'];
+};
+export type MockCheckoutPreviewCallback = (params: PreviewSubscription) => SubscriptionPreviewV2;
+export type MockCheckoutStateCallback = (params: GetCheckoutState) => GetCheckoutStateResults;
+export type CheckoutMockProps = {
+    onMockCheckoutPreview?: MockCheckoutPreviewCallback;
+    onMockCheckoutState?: MockCheckoutStateCallback;
+};
+export type OnBeforeStepChangeCallback = (params: {
+    from: CheckoutStepKey;
+    to: CheckoutStepKey;
+    state: CheckoutState;
+}) => Promise<boolean>;
+export type OnBillableFeatureChangeCallback = (params: {
+    feature: NonNullable<Price['feature']>;
+    quantity: number;
+}) => Promise<{
+    errorMessage?: string;
+    disableNextStep?: boolean;
+}>;
+export type OnAddonChangeCallback = (params: {
+    addon: Addon;
+    quantity: number;
+}) => Promise<{
+    errorMessage?: string;
+    disableNextStep?: boolean;
+}>;
+export type OnCheckoutCallback = (params: {
+    customerId: string;
+    checkoutParams: ApplySubscription;
+    checkoutAction: (params: ApplySubscription) => Promise<{
+        success: boolean;
+        errorMessage?: string;
+        results?: ApplySubscriptionResults;
+    }>;
+}) => Promise<{
+    success: boolean;
+    errorMessage?: string;
+    results?: ApplySubscriptionResults;
+}>;
+export type OnCheckoutCompletedCallback = (params: {
+    success: boolean;
+    error?: string;
+}) => Promise<void>;
+export type OnChangePlanCallback = (params: {
+    currentPlan: CheckoutStatePlan | undefined;
+}) => void;
+export type OnBillingAddressChangeCallback = (params: {
+    billingAddress: BillingAddress;
+}) => Promise<void>;
+export type OnCheckoutParams = {
+    customerId: string;
+    checkoutParams: ApplySubscription;
+    checkoutAction: (params: ApplySubscription) => Promise<{
+        success: boolean;
+        errorMessage?: string;
+        results?: ApplySubscriptionResults;
+    }>;
+};
+export type OnCheckoutCompletedParams = {
+    success: boolean;
+    error?: string;
+};
+export type CheckoutResult = {
+    success: boolean;
+    errorMessage?: string;
+    results?: ApplySubscriptionResults;
+};
+export declare enum CheckoutStepKey {
+    PLAN = "PLAN",
+    ADDONS = "ADDONS",
+    PAYMENT = "PAYMENT"
+}

package/dist/src/components/common/CollapsableSectionIcon.d.ts

@@ -0,0 +1,6 @@
+export declare const CollapsableSectionIcon: import('@emotion/styled').StyledComponent<import('react-feather').IconProps & {
+    theme?: import('@emotion/react').Theme | undefined;
+} & {
+    $isOpen: boolean;
+    $size?: number | undefined;
+}, {}, {}>;

package/dist/src/components/common/Icon.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { IconColor } from './iconColor';
+import * as customIcons from './customIcons';
+export type Icons = keyof typeof customIcons;
+export type IconColorValue = IconColor | (string & {});
+export type IconProps = {
+    icon: Icons;
+    className?: string;
+    style?: CSSProperties;
+    svgPathColor?: IconColorValue;
+    svgRectColor?: IconColorValue;
+    svgStrokeColor?: IconColorValue;
+};
+export declare function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps): JSX.Element;

package/dist/src/components/common/InformationTooltip.d.ts

@@ -0,0 +1,11 @@
+import { TooltipProps } from '@mui/material/Tooltip';
+export type InformationTooltipProps = TooltipProps & {
+    $padding?: number;
+    $maxWidth?: number;
+};
+export declare const InformationTooltip: import('@emotion/styled').StyledComponent<TooltipProps & {
+    $padding?: number | undefined;
+    $maxWidth?: number | undefined;
+} & {
+    theme?: import('@emotion/react').Theme | undefined;
+}, {}, {}>;

package/dist/src/components/common/LongText.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { TypographyProps } from './Typography';
+export declare const LongText: ({ leaveDelay, children, variant, color, maxLines, wordBreak, bold, tooltipPlacement, className, display, style, "data-testid": dataTestId, }: {
+    children: ReactNode;
+    leaveDelay?: number | undefined;
+    variant?: TypographyProps['variant'];
+    color?: TypographyProps['color'];
+    maxLines?: number | undefined;
+    wordBreak?: boolean | undefined;
+    bold?: boolean | undefined;
+    tooltipPlacement?: TooltipProps['placement'];
+    className?: string | undefined;
+    display?: string | undefined;
+    style?: CSSProperties | undefined;
+    "data-testid"?: string | undefined;
+}) => JSX.Element;

package/dist/src/components/common/PoweredByStigg.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const STIGG_WATERMARK_CLASSNAME = "stigg-watermark";
+export type PoweredByStiggSources = 'paywall' | 'customer_portal' | 'checkout' | 'grant_list' | 'credit_usage_chart';
+type PoweredByStiggProps = {
+    source: PoweredByStiggSources;
+    showWatermark?: boolean;
+    style?: React.CSSProperties;
+    align?: 'center' | 'end';
+    smallScreenAlign?: 'center' | 'end';
+};
+export declare function PoweredByStigg({ source, showWatermark, align, smallScreenAlign, style, }: PoweredByStiggProps): JSX.Element | null;
+export {};

package/dist/src/components/common/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface ProgressBarProps {
+    percentage: number;
+    className?: string;
+}
+export declare function ProgressBar({ percentage, className }: ProgressBarProps): JSX.Element;

package/dist/src/components/common/StatusChip.d.ts

@@ -0,0 +1,16 @@
+import { ChipProps } from '@mui/material';
+import { StatusChipVariant } from '../../theme/types';
+interface StatusChipProps extends Omit<ChipProps, 'variant' | 'color'> {
+    variant: StatusChipVariant;
+    label: string;
+}
+/**
+ * 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 declare function StatusChip({ variant, label, className, size, ...props }: StatusChipProps): JSX.Element;
+export {};

package/dist/src/components/common/TiersSelectContainer.d.ts

@@ -0,0 +1,12 @@
+import { PriceTierFragment, TiersMode } from '@stigg/js-client-sdk';
+export type TiersSelectContainerProps = {
+    componentId: string;
+    tiers?: PriceTierFragment[] | null;
+    tierUnits?: string;
+    tiersMode?: TiersMode | null;
+    errorMessage?: string;
+    handleChange: (quantity: number) => void;
+    value: number;
+    width?: number | string;
+};
+export declare function TiersSelectContainer(props: TiersSelectContainerProps): JSX.Element;

package/dist/src/components/common/Typography.d.ts

@@ -0,0 +1,15 @@
+import { default as React, CSSProperties } from '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;
+};
+export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/common/VolumeBulkSelect.d.ts

@@ -0,0 +1,5 @@
+import { TiersSelectContainerProps } from './TiersSelectContainer';
+export declare function VolumeBulkSelect({ value, componentId, tierUnits, tiers, handleChange, errorMessage, }: Pick<TiersSelectContainerProps, 'value' | 'componentId' | 'tiers' | 'tierUnits'> & {
+    errorMessage?: string;
+    handleChange: (quantity: number) => void;
+}): JSX.Element | null;

package/dist/src/components/common/VolumePerUnitInput.d.ts

@@ -0,0 +1,5 @@
+import { TiersSelectContainerProps } from './TiersSelectContainer';
+export declare function VolumePerUnitInput({ width, tierUnits, value, handleChange, errorMessage, }: Pick<TiersSelectContainerProps, 'width' | 'tierUnits' | 'value'> & {
+    errorMessage?: string;
+    handleChange: (quantity: number) => void;
+}): JSX.Element;

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

@@ -0,0 +1,2 @@
+import { Plugin } from 'chart.js';
+export declare const redrawBeforeFirstDrawPlugin: Plugin;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import { StiggTheme } from '../../../theme/types';
+export declare const getOtherColor: (theme: StiggTheme) => string;
+export declare const getLineColor: (theme: StiggTheme) => string;
+export declare const opacityColor: (color: string, opacity?: number) => string;
+export declare const LEGEND_BOX_SIZE = 12;
+export declare const getLabelColor: (theme: StiggTheme) => string;
+export declare const getLabelFont: (theme: StiggTheme) => {
+    family: string;
+    size: number;
+};
+export declare const getAxisTitleColor: (theme: StiggTheme) => string;
+export declare const getAxisTitleFont: (theme: StiggTheme) => {
+    family: string;
+    size: number;
+};
+export declare const getAxisTickColor: (theme: StiggTheme) => string;
+export declare const getAxisColor: (theme: StiggTheme) => string;
+export declare const getAxisTickFont: (theme: StiggTheme) => {
+    family: string;
+    size: number;
+};
+export declare const GRID_BORDER_DASH: number[];
+export declare const AXIS_TITLE_SPACING = 15;

package/dist/src/components/common/chart/chartjs.tooltip.plugin.d.ts

@@ -0,0 +1,38 @@
+import { Chart, ChartEvent, ChartType, TooltipModel } from 'chart.js';
+import { default as React } from 'react';
+import { EventContext } from 'chartjs-plugin-annotation';
+export type ExternalTooltipHandler<TType extends ChartType> = (context: {
+    chart: Chart;
+    tooltip: TooltipModel<TType>;
+}) => void;
+export type AnnotationTooltipHandler = (isMouseOver: boolean, context: EventContext, event: ChartEvent) => void;
+export type ExternalTooltipInfo<TPayload> = {
+    positionTop: number;
+    positionLeft: number;
+    isOpen: boolean;
+    payload?: TPayload;
+};
+type ChartJsExternalTooltipProps = {
+    tooltipInfo: ExternalTooltipInfo<unknown>;
+    children: React.ReactElement<any, any>;
+    $padding?: number;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+};
+export type ExternalTooltipTranslateFunc<TType extends ChartType, TPayload> = (tooltip: TooltipModel<TType>) => TPayload | undefined;
+export type AnnotationTooltipTranslateFunc<TPayload> = (context: EventContext, event: ChartEvent) => TPayload | undefined;
+type TooltipPosition = {
+    top: number;
+    left: number;
+};
+type ChartJsExternalTooltipPositioner<TType extends ChartType> = (chart: Chart, tooltip: TooltipModel<TType>) => TooltipPosition;
+export declare function bottomBarTooltipPositioner(chart: Chart, tooltip: TooltipModel<'bar'>): TooltipPosition;
+export declare function useChartJsExternalTooltip<TType extends ChartType, TPayload>(translate: ExternalTooltipTranslateFunc<TType, TPayload>, positioner?: ChartJsExternalTooltipPositioner<TType>): {
+    tooltipInfo: ExternalTooltipInfo<TPayload>;
+    tooltipHandler: ExternalTooltipHandler<TType>;
+};
+export declare function useChartJsAnnotationExternalTooltip<TPayload>(translate: AnnotationTooltipTranslateFunc<TPayload>): {
+    tooltipInfo: ExternalTooltipInfo<TPayload>;
+    tooltipHandler: AnnotationTooltipHandler;
+};
+export declare const ChartJsExternalTooltip: ({ children, tooltipInfo: { positionTop, positionLeft, payload, isOpen }, $padding, }: ChartJsExternalTooltipProps) => JSX.Element;
+export {};

package/dist/src/components/common/customIcons.d.ts

@@ -0,0 +1,24 @@
+export { default as Addons } from '../../assets/addons.svg';
+export { default as BillingInfoCustomer } from '../../assets/billing-info-customer.svg';
+export { default as ContactSupport } from '../../assets/contact-support.svg';
+export { default as CreditCard } from '../../assets/credit-card.svg';
+export { default as DollarCoin } from '../../assets/dollar-coin.svg';
+export { default as MiniSchedule } from '../../assets/mini-schedule.svg';
+export { default as Promotions } from '../../assets/promotions.svg';
+export { default as Restore } from '../../assets/restore.svg';
+export { default as ScheduleBox } from '../../assets/schedule-box.svg';
+export { default as ScheduleClock } from '../../assets/schedule.svg';
+export { default as RenewSubscription } from '../../assets/subscription-renews-icon.svg';
+export { default as Trash } from '../../assets/trash.svg';
+export { default as PaymentMethod } from '../../assets/payment-method.svg';
+export { default as OutlinedCircle } from '../../assets/outlined-circle.svg';
+export { default as OutlinedCheckedCircle } from '../../assets/outlined-checked-circle.svg';
+export { default as OutlinedCheckedCircleDisabled } from '../../assets/outlined-checked-circle-disabled.svg';
+export { default as ArrowForward } from '../../assets/arrow-forward.svg';
+export { default as Close } from '../../assets/close.svg';
+export { default as Check } from '../../assets/check.svg';
+export { default as PayAsYouGoCharge } from '../../assets/pay-as-you-go-charge.svg';
+export { default as Coupon } from '../../assets/coupon.svg';
+export { default as Add } from '../../assets/add.svg';
+export { default as Remove } from '../../assets/remove.svg';
+export { default as EntitlementCheck } from '../../assets/entitlement-check.svg';

package/dist/src/components/common/iconColor.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '@emotion/react';
+import { IconColorValue } from './Icon';
+export type IconColor = 'primary' | 'secondary';
+export declare const getIconColor: (color: IconColorValue | undefined, theme: Theme) => string | undefined;

package/dist/src/components/common/mapExternalTheme.d.ts

@@ -0,0 +1,7 @@
+import { CheckoutConfiguration, CustomerPortalConfiguration, PaywallConfiguration, TypographyConfiguration } from '@stigg/js-client-sdk';
+import { CustomizedTheme } from '../../theme/Theme';
+import { defaultCheckoutTypography } from '../checkout/configurations/typography';
+export declare function mapTypography(typography?: TypographyConfiguration | null, defaultTypography?: typeof defaultCheckoutTypography | null): CustomizedTheme['typography'];
+export declare function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme;
+export declare function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme;
+export declare function mapCheckoutConfiguration(configuration: CheckoutConfiguration): CustomizedTheme;

package/dist/src/components/common/mediaQuery.d.ts

@@ -0,0 +1,12 @@
+export declare const breakpoints: {
+    readonly xs: 320;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly xxl: 1536;
+};
+export type Breakpoints = typeof breakpoints;
+export type Breakpoint = keyof Breakpoints;
+export declare const mqMinWidth: (breakpoint: Breakpoint) => string;
+export declare const mq: Record<"xs" | "sm" | "md" | "lg" | "xl" | "xxl", string>;

package/dist/src/components/common/table/DataRows.d.ts

@@ -0,0 +1,9 @@
+import { HeadCell } from './types';
+interface DataRowsProps<T> {
+    data: T[];
+    visibleHeadCells: Array<HeadCell<T>>;
+    onRowClick?: (item: T) => void;
+    hideLastRowBorder: boolean;
+}
+export declare function DataRows<T>({ data, visibleHeadCells, onRowClick, hideLastRowBorder }: DataRowsProps<T>): JSX.Element;
+export {};

package/dist/src/components/common/table/EmptyState.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface EmptyStateProps {
+    message?: ReactNode;
+    className?: string;
+}
+export declare function EmptyState({ message, className }: EmptyStateProps): JSX.Element;
+export {};

package/dist/src/components/common/table/ErrorState.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface ErrorStateProps {
+    errorMessage?: ReactNode;
+    className?: string;
+}
+export declare function ErrorState({ errorMessage, className }: ErrorStateProps): JSX.Element;
+export {};

package/dist/src/components/common/table/GenericTable.d.ts

@@ -0,0 +1,25 @@
+import { GenericTableProps, TableAlignment } from './types';
+export declare const StyledTableCell: import('@emotion/styled').StyledComponent<import('@mui/material').TableCellProps & {
+    theme?: import('@emotion/react').Theme | undefined;
+} & {
+    $alignment?: TableAlignment | undefined;
+    $width?: `${number}px` | undefined;
+    $maxWidth?: `${number}px` | undefined;
+    $minWidth?: `${number}px` | undefined;
+    $isLastRow?: boolean | undefined;
+    $hideLastRowBorder?: boolean | undefined;
+}, {}, {}>;
+export declare const ClickableRow: import('@emotion/styled').StyledComponent<import('@mui/material').TableRowOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "key" | keyof import('react').HTMLAttributes<HTMLTableRowElement>> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void) | import('react').RefObject<HTMLTableRowElement> | null | undefined;
+}, "style" | "className" | "children" | "classes" | "sx" | "selected" | "hover"> & {
+    theme?: import('@emotion/react').Theme | undefined;
+} & {
+    $clickable?: boolean | undefined;
+}, {}, {}>;
+export declare const CellContent: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme | undefined;
+    as?: import('react').ElementType<any> | undefined;
+} & {
+    $alignment?: TableAlignment | undefined;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare function GenericTable<T>({ data, headCells, isLoading, error, emptyMessage, errorMessage, onRowClick, className, skeletonRows, hideLastRowBorder, pageSize, pageNum, totalCount, onPageChange, }: GenericTableProps<T>): JSX.Element;

package/dist/src/components/common/table/LoadingRows.d.ts

@@ -0,0 +1,8 @@
+import { HeadCell } from './types';
+interface LoadingRowsProps<T> {
+    skeletonRows: number;
+    visibleHeadCells: Array<HeadCell<T>>;
+    hideLastRowBorder: boolean;
+}
+export declare function LoadingRows<T>({ skeletonRows, visibleHeadCells, hideLastRowBorder }: LoadingRowsProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+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/dist/src/components/common/table/types.d.ts

@@ -0,0 +1,31 @@
+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;
+    pageSize?: number;
+    pageNum?: number;
+    totalCount?: number;
+    onPageChange?: (event: any, nextPage: number) => void;
+}

package/dist/src/components/credits/balance/CreditBalance.d.ts

@@ -0,0 +1,11 @@
+import { GetCreditBalanceParams } from '../hooks/useCreditBalance';
+export type CreditBalanceProps = GetCreditBalanceParams & {
+    localization?: CreditBalanceLocalization;
+    decimalPlaces?: number | null;
+    showUnits?: boolean;
+    showSymbol?: boolean;
+};
+export type CreditBalanceLocalization = {
+    title: string;
+};
+export declare function CreditBalance({ currencyId, localization, decimalPlaces, showUnits, showSymbol, }: CreditBalanceProps): JSX.Element;

package/dist/src/components/credits/balance/CreditBalanceValue.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function CreditBalanceValue({ currencyId, decimalPlaces, showUnits, showSymbol, }: {
+    currencyId: string;
+    decimalPlaces?: number | null;
+    showUnits?: boolean;
+    showSymbol?: boolean;
+}): JSX.Element;

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

@@ -0,0 +1,12 @@
+import { ChartData, ChartOptions, ChartType, Chart, TooltipModel } from 'chart.js';
+import { CreditUsageFragment, CreditUsageTimeRange } from '@stigg/js-client-sdk';
+import { StiggTheme } from '../../../theme/types';
+export type ExternalTooltipHandler<TType extends ChartType> = (context: {
+    chart: Chart;
+    tooltip: TooltipModel<TType>;
+}) => void;
+export declare function getFeatureColor(index: number): string;
+export declare function computeChartData(creditUsageData: CreditUsageFragment | null, theme: StiggTheme, tooltipHandler: ExternalTooltipHandler<'bar'>, timeRange?: CreditUsageTimeRange): {
+    data: ChartData<'bar'> | null;
+    options: ChartOptions<'bar'> | null;
+};

package/dist/src/components/credits/creditUsageChart/CreditUsageChart.d.ts

@@ -0,0 +1,8 @@
+import { CreditUsageTimeRange } from '@stigg/js-client-sdk';
+import { CreditUsageChartLocalization } from './types';
+export type CreditUsageChartProps = {
+    currencyId: string;
+    timeRange: CreditUsageTimeRange;
+    localization?: Partial<CreditUsageChartLocalization>;
+};
+export declare function CreditUsageChart({ currencyId, timeRange, localization: customLocalization }: CreditUsageChartProps): JSX.Element;

package/dist/src/components/credits/creditUsageChart/CreditUsageChartEmptyState.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CreditUsageChartEmptyState(): JSX.Element;

package/dist/src/components/credits/creditUsageChart/CreditUsageChartErrorState.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CreditUsageChartErrorState(): JSX.Element;

package/dist/src/components/credits/creditUsageChart/CreditUsageChartHeader.d.ts

@@ -0,0 +1,12 @@
+import { CreditUsageTimeRange } from '@stigg/js-client-sdk';
+import { CreditUsageChartLocalization } from './types';
+export type CreditUsageChartHeaderProps = {
+    isLoading: boolean;
+    totalCredits: number;
+    selectedTimeRange: CreditUsageTimeRange;
+    setSelectedTimeRange: (timeRange: CreditUsageTimeRange) => void;
+    error: Error | null;
+    localization: Partial<CreditUsageChartLocalization>;
+    currencyUnit?: string;
+};
+export declare function CreditUsageChartHeader({ isLoading, totalCredits, selectedTimeRange, setSelectedTimeRange, error, localization, currencyUnit, }: CreditUsageChartHeaderProps): JSX.Element;

package/dist/src/components/credits/creditUsageChart/CreditUsageChartTooltip.d.ts

@@ -0,0 +1,19 @@
+import { ExternalTooltipInfo } from '../../common/chart/chartjs.tooltip.plugin';
+export type CreditUsageChartTooltipData = {
+    featureName: string;
+    usage: number;
+    date: string;
+    color: string;
+};
+export type CreditUsageChartTooltipProps = {
+    tooltipInfo: ExternalTooltipInfo<CreditUsageChartTooltipData>;
+};
+export declare const SideColorMarker: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme | undefined;
+    as?: import('react').ElementType<any> | undefined;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare function CreditUsageChartTooltip({ tooltipInfo }: CreditUsageChartTooltipProps): JSX.Element;
+export declare function useCreditUsageChartTooltip(): {
+    tooltipInfo: ExternalTooltipInfo<CreditUsageChartTooltipData>;
+    tooltipHandler: import('../../common/chart/chartjs.tooltip.plugin').ExternalTooltipHandler<"bar">;
+};

package/dist/src/components/credits/creditUsageChart/CreditUsageLegend.d.ts

@@ -0,0 +1,6 @@
+import { CreditUsageFragment } from '@stigg/js-client-sdk';
+interface CreditUsageLegendProps {
+    creditUsageData: CreditUsageFragment | null;
+}
+export declare function CreditUsageLegend({ creditUsageData }: CreditUsageLegendProps): JSX.Element | null;
+export {};

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

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

package/dist/src/components/credits/grants/CreditGrants.d.ts

@@ -0,0 +1,6 @@
+import { GetCreditGrantsParams, CreditGrantsLocalization } from './types';
+export type CreditGrantsProps = GetCreditGrantsParams & {
+    localization?: Partial<CreditGrantsLocalization>;
+    decimalPlaces?: number | null;
+};
+export declare function CreditGrants({ currencyId, localization: customLocalization, decimalPlaces, pageSize, }: CreditGrantsProps): JSX.Element;

package/dist/src/components/credits/grants/CreditGrantsTable.d.ts

@@ -0,0 +1,14 @@
+import { CreditGrant, CreditGrantsLocalization } from './types';
+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;
+}
+export declare function CreditGrantsTable({ creditGrants, isLoading, error, localization, decimalPlaces, pageSize, pageNum, totalCount, onPageChange, }: CreditGrantsTableProps): JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { CreditGrantFragment, CursorPaging } from '@stigg/js-client-sdk';
+export type CreditGrant = Pick<CreditGrantFragment, 'grantId' | 'amount' | 'comment' | 'currencyId' | 'effectiveAt' | 'expireAt' | 'grantType' | 'consumedAmount' | 'createdAt' | 'updatedAt'>;
+export declare enum CreditGrantStatus {
+    SCHEDULED = "SCHEDULED",
+    AVAILABLE = "AVAILABLE",
+    EXPIRED = "EXPIRED"
+}
+export interface GetCreditGrantsParams {
+    currencyId?: string;
+    pageSize?: number;
+    paging?: CursorPaging;
+}
+export type CreditGrantsLocalization = {
+    receivedAt: string;
+    effectiveAt: string;
+    grantType: string;
+    status: string;
+    balance: string;
+    expiryDate: string;
+    emptyState: string;
+    loadingState: string;
+    errorState: string;
+};

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

@@ -0,0 +1,5 @@
+import { StatusChipVariant } from '../../../theme/types';
+import { CreditGrantStatus } from './types';
+import { CreditGrantType } from '../../..';
+export declare const mapCreditGrantStatusToVariant: (status: CreditGrantStatus) => StatusChipVariant;
+export declare const mapCreditGrantType: (grantType: CreditGrantType) => string;