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

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

@@ -1,74 +0,0 @@
-import styled from '@utils/style';
-import { GetCreditBalanceParams } from '../hooks/useCreditBalance';
-import { useStiggContext } from '../../../hooks';
-import { SdkThemeProvider } from '../../../theme/Theme';
-import { Typography } from '../../common/Typography';
-import { 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

@@ -1,113 +0,0 @@
-import styled from '@utils/style';
-import Skeleton from 'react-loading-skeleton';
-import { Typography } from '../../common/Typography';
-import { useCreditBalance } from '../hooks/useCreditBalance';
-import { formatValue, formatCreditSuffix, 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

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

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

@@ -1,20 +0,0 @@
-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;
-`;

package/src/components/customerPortal/CustomerPortal.tsx

@@ -1,37 +0,0 @@
-import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
-import { CustomerPortalProvider } from './CustomerPortalProvider';
-import { CustomerPortalContainer } from './CustomerPortalContainer';
-import { DeepPartial } from '../../types';
-import { CustomerPortalLocalization } from './customerPortalTextOverrides';
-import { CustomerPortalTheme } from './customerPortalTheme';
-import { FilterEntitlementsFn, OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
-
-export type CustomerPortalSection =
-  | 'usage'
-  | 'addons'
-  | 'promotionalEntitlements'
-  | 'billingInformation'
-  | 'paymentDetails'
-  | 'invoices';
-
-export type CustomerPortalProps = {
-  onManageSubscription?: OnManageSubscriptionFn;
-  onBuyMore?: OnBuyMoreCallbackFn;
-  onCancelScheduledUpdates?: (subscription: CustomerPortalSubscription) => Promise<void> | void;
-  onContactSupport?: () => Promise<void> | void;
-  paywallComponent?: React.ReactNode;
-  hiddenSections?: CustomerPortalSection[];
-  textOverrides?: DeepPartial<CustomerPortalLocalization>;
-  theme?: DeepPartial<CustomerPortalTheme>;
-  filterEntitlements?: FilterEntitlementsFn;
-  resourceId?: string;
-  productId?: string;
-};
-
-export function CustomerPortal({ textOverrides, theme, resourceId, productId, ...restProps }: CustomerPortalProps) {
-  return (
-    <CustomerPortalProvider textOverrides={textOverrides} theme={theme} resourceId={resourceId} productId={productId}>
-      <CustomerPortalContainer {...restProps} />
-    </CustomerPortalProvider>
-  );
-}

package/src/components/customerPortal/CustomerPortalContainer.tsx

@@ -1,77 +0,0 @@
-import { useRef } from 'react';
-import { SubscriptionsOverview } from './subscriptionOverview/SubscriptionsOverview';
-import { CustomerPortalHeader } from './CustomerPortalHeader';
-import { PaymentDetailsSection } from './billing/PaymentDetailsSection';
-import { CustomerPortalPaywall } from './paywall/CustomerPortalPaywall';
-import { useCustomerPortalContext } from './CustomerPortalContext';
-import { CustomerPortalLayout, CustomerPortalSections } from './CustomerPortal.style';
-import { CustomerPortalProps } from './CustomerPortal';
-import { InvoicesSection } from '../..';
-import { CustomerUsageData } from './usage/CustomerUsageData';
-import { CustomerPortalIntentionType } from './types';
-
-export type OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => void;
-
-export function CustomerPortalContainer({
-  onManageSubscription,
-  onBuyMore,
-  onCancelScheduledUpdates,
-  onContactSupport,
-  paywallComponent,
-  hiddenSections,
-  filterEntitlements,
-}: CustomerPortalProps) {
-  const { customerPortal, textOverrides, theme, isLoading, showWatermark } = useCustomerPortalContext();
-  const customerPortalSectionRef = useRef<HTMLDivElement>(null);
-
-  const onManageClick: OnManageClick = ({ intentionType }: { intentionType: CustomerPortalIntentionType }) => {
-    if (onManageSubscription) {
-      void onManageSubscription({
-        intentionType,
-        customerSubscriptions: customerPortal?.subscriptions ?? [],
-      });
-    } else {
-      customerPortalSectionRef?.current?.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-
-  const shouldShowUsage = !hiddenSections?.some((section) => section === 'usage');
-  const shouldShowPaymentDetails = !hiddenSections?.some(
-    (section) => section === 'paymentDetails' || section === 'billingInformation',
-  );
-  const shouldShowInvoices = !hiddenSections?.some(
-    (section) => section === 'invoices' || section === 'billingInformation',
-  );
-
-  return (
-    <CustomerPortalLayout className="stigg-customer-portal-layout">
-      <CustomerPortalHeader showWatermark={showWatermark} />
-      <CustomerPortalSections className="stigg-customer-portal-sections">
-        <SubscriptionsOverview
-          onCancelScheduledUpdates={onCancelScheduledUpdates}
-          onBuyMore={onBuyMore}
-          onManageSubscription={onManageClick}
-          onContactSupport={onContactSupport}
-          hiddenSections={hiddenSections}
-          cancelScheduledUpdatesButtonTitle={textOverrides.cancelScheduledUpdatesButtonTitle}
-        />
-        {shouldShowUsage && (
-          <CustomerUsageData
-            onManageSubscription={onManageClick}
-            onBuyMore={onBuyMore}
-            filterEntitlements={filterEntitlements}
-          />
-        )}
-        <CustomerPortalPaywall
-          ref={customerPortalSectionRef}
-          paywallComponent={paywallComponent}
-          theme={theme}
-          title={textOverrides.paywallSectionTitle}
-          isLoading={!customerPortal || isLoading}
-        />
-        {shouldShowPaymentDetails && <PaymentDetailsSection />}
-        {shouldShowInvoices && <InvoicesSection />}
-      </CustomerPortalSections>
-    </CustomerPortalLayout>
-  );
-}

package/src/components/customerPortal/CustomerPortalContext.ts

@@ -1,32 +0,0 @@
-import React, { useContext } from 'react';
-import { CustomerPortal } from '@stigg/js-client-sdk';
-import { CustomerPortalLocalization } from './customerPortalTextOverrides';
-import { CustomerPortalTheme } from './customerPortalTheme';
-
-export interface CustomerPortalContextValue {
-  customerPortal?: CustomerPortal | null;
-  textOverrides: CustomerPortalLocalization;
-  theme: CustomerPortalTheme;
-  isLoading: boolean;
-  resourceId?: string;
-  currencyId?: string;
-  showWatermark: boolean;
-}
-
-export const CustomerPortalContext = React.createContext<CustomerPortalContextValue | null>(null);
-CustomerPortalContext.displayName = 'CustomerPortalContext';
-
-export const useCustomerPortalContext = (): CustomerPortalContextValue => {
-  const ctx = useContext(CustomerPortalContext);
-  if (!ctx) {
-    throw new Error(
-      'Could not find Customer portal context; You need to wrap your customer portal components in an <CustomerPortalProvider> component.',
-    );
-  }
-  return ctx;
-};
-
-export function useCheckContextExists<T>(contextType: React.Context<T>) {
-  const ctx = useContext(contextType);
-  return !!ctx;
-}

package/src/components/customerPortal/CustomerPortalHeader.tsx

@@ -1,18 +0,0 @@
-import styled from '@utils/style';
-import { PoweredByStigg } from '../common/PoweredByStigg';
-
-const CustomerPortalHeaderLayout = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: flex-end;
-  justify-content: flex-end;
-  margin-bottom: 24px;
-`;
-
-export function CustomerPortalHeader({ showWatermark }: { showWatermark?: boolean }) {
-  return (
-    <CustomerPortalHeaderLayout className="stigg-customer-portal-header-layout">
-      <PoweredByStigg source="customer_portal" showWatermark={showWatermark} />
-    </CustomerPortalHeaderLayout>
-  );
-}

package/src/components/customerPortal/CustomerPortalProvider.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { useCustomerPortal } from './hooks/useCustomerPortal';
-import { DeepPartial } from '../../types';
-import { CustomerPortalLocalization, getResolvedCustomerPortalLocalize } from './customerPortalTextOverrides';
-import { CustomerPortalTheme, getResolvedCustomerPortalTheme } from './customerPortalTheme';
-import { SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
-import { useStiggContext } from '../..';
-import { mapCustomerPortalConfiguration } from '../common/mapExternalTheme';
-import { CustomerPortalContext } from './CustomerPortalContext';
-
-export function CustomerPortalProvider({
-  children,
-  textOverrides,
-  theme,
-  resourceId,
-  productId,
-}: {
-  children: React.ReactNode;
-  textOverrides?: DeepPartial<CustomerPortalLocalization>;
-  theme?: DeepPartial<CustomerPortalTheme>;
-  resourceId?: string;
-  productId?: string;
-}) {
-  const { customerPortalUpdatedAt } = useStiggContext();
-  const { customerPortal, isLoading, showWatermark } = useCustomerPortal({ resourceId, productId });
-  const configuration = customerPortal?.configuration
-    ? mapCustomerPortalConfiguration(customerPortal.configuration)
-    : undefined;
-  const globalTheme = useStiggTheme(configuration);
-  const customerPortalTheme = getResolvedCustomerPortalTheme(globalTheme, theme, customerPortal?.configuration);
-  const resolvedTextOverrides = getResolvedCustomerPortalLocalize(textOverrides);
-
-  return (
-    <SdkThemeProvider componentTheme={configuration}>
-      <CustomerPortalContext.Provider
-        key={customerPortalUpdatedAt?.toString()}
-        value={{
-          customerPortal,
-          isLoading,
-          showWatermark,
-          textOverrides: resolvedTextOverrides,
-          theme: customerPortalTheme,
-          resourceId,
-        }}>
-        {children}
-      </CustomerPortalContext.Provider>
-    </SdkThemeProvider>
-  );
-}

package/src/components/customerPortal/billing/InformationGrid.tsx

@@ -1,54 +0,0 @@
-import styled from '@utils/style';
-import { Typography, TypographyProps } from '../../common/Typography';
-
-export const InformationGridContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  flex: 1 0 0;
-`;
-
-const InformationGridRow = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  align-self: stretch;
-  flex-wrap: wrap;
-`;
-
-export type InformationGridProps = {
-  title: string;
-  rows: Array<{
-    classNamePrefix: string;
-    label: string;
-    value: string;
-    labelTypographyProps?: Partial<TypographyProps>;
-    valueTypographyProps?: Partial<TypographyProps>;
-  }>;
-};
-
-export function InformationGrid({ title, rows }: InformationGridProps) {
-  return (
-    <InformationGridContainer>
-      <Typography variant="h6" color="secondary" bold>
-        {title}
-      </Typography>
-      {rows.map(({ classNamePrefix, label, value, labelTypographyProps, valueTypographyProps }) => (
-        <InformationGridRow key={label}>
-          <Typography
-            className={`${classNamePrefix}-label`}
-            variant="body1"
-            color="secondary"
-            style={{ width: 80 }}
-            {...labelTypographyProps}>
-            {label}
-          </Typography>
-          <Typography className={`${classNamePrefix}-text`} variant="body1" color="secondary" {...valueTypographyProps}>
-            {value}
-          </Typography>
-        </InformationGridRow>
-      ))}
-    </InformationGridContainer>
-  );
-}

package/src/components/customerPortal/billing/InvoicesSection.tsx

@@ -1,41 +0,0 @@
-import { useCustomerPortalContext } from '../CustomerPortalContext';
-import { SectionTitle } from '../common/SectionTitle';
-import { ExternalLinkButton } from '../common/ExternalLinkButton';
-import { SectionContainer } from '../common/SectionContainer';
-import { SectionHeader } from '../common/SectionHeader';
-import { SkeletonButton } from '../common/SkeletonButton';
-
-export function InvoicesSection() {
-  const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
-  const isLoadingData = !customerPortal || isLoading;
-
-  const viewInvoiceHistoryButton = isLoadingData ? (
-    <SkeletonButton />
-  ) : customerPortal?.billingPortalUrl ? (
-    <ExternalLinkButton
-      url={customerPortal.billingPortalUrl}
-      text={textOverrides.viewInvoiceHistory}
-      className="stigg-view-invoice-history-button"
-    />
-  ) : null;
-
-  if (!isLoadingData && !customerPortal?.billingPortalUrl) {
-    return null;
-  }
-
-  return (
-    <SectionContainer
-      className="stigg-invoices-section-layout"
-      $backgroundColor={theme.backgroundColor}
-      $borderColor={theme.borderColor}>
-      <SectionHeader className="stigg-invoices-section-header">
-        <SectionTitle
-          isLoading={isLoadingData}
-          className="stigg-invoices-section-title"
-          title={textOverrides.invoicesTitle}
-        />
-        {viewInvoiceHistoryButton}
-      </SectionHeader>
-    </SectionContainer>
-  );
-}