@stigg/react-sdk 5.26.0 → 5.28.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.26.0",
+  "version": "5.28.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -114,7 +114,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "3.34.0",
+    "@stigg/js-client-sdk": "3.35.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/BooleanEntitlementGuard.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { GetBooleanEntitlement } from '@stigg/js-client-sdk';
+import { useBooleanEntitlement } from '../hooks';
+
+type BooleanEntitlementGuardProps = GetBooleanEntitlement & {
+  noAccessComponent?: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export function BooleanEntitlementGuard({
+  noAccessComponent,
+  children,
+  ...rest
+}: BooleanEntitlementGuardProps): JSX.Element {
+  const { hasAccess } = useBooleanEntitlement(rest);
+
+  if (!hasAccess) {
+    return <>{noAccessComponent ?? null}</>;
+  }
+
+  return children;
+}

package/src/components/MeteredEntitlementGuard.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { GetMeteredEntitlement } from '@stigg/js-client-sdk';
+import { useMeteredEntitlement } from '../hooks';
+
+type MeteredEntitlementGuardProps = GetMeteredEntitlement & {
+  noAccessComponent?: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export function MeteredEntitlementGuard({
+  noAccessComponent,
+  children,
+  ...rest
+}: MeteredEntitlementGuardProps): JSX.Element {
+  const { hasAccess } = useMeteredEntitlement(rest);
+
+  if (!hasAccess) {
+    return <>{noAccessComponent ?? null}</>;
+  }
+
+  return children;
+}

package/src/components/NumericEntitlementGuard.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { GetNumericEntitlement } from '@stigg/js-client-sdk';
+import { useNumericEntitlement } from '../hooks';
+
+type NumericEntitlementGuardProps = GetNumericEntitlement & {
+  noAccessComponent?: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export function NumericEntitlementGuard({
+  noAccessComponent,
+  children,
+  ...rest
+}: NumericEntitlementGuardProps): JSX.Element {
+  const { hasAccess } = useNumericEntitlement(rest);
+
+  if (!hasAccess) {
+    return <>{noAccessComponent ?? null}</>;
+  }
+
+  return children;
+}

package/src/components/StiggProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, PropsWithChildren, useContext, useRef } from 'react';
+import React, { useEffect, useState, PropsWithChildren, useRef } from 'react';
 import * as StiggJs from '@stigg/js-client-sdk';
 import Stigg, { ClientConfiguration, EntitlementsFallback } from '@stigg/js-client-sdk';
 import { SkeletonTheme } from 'react-loading-skeleton';
@@ -30,6 +30,7 @@ export type StiggProviderProps = {
   resourceId?: string;
   theme?: CustomizedTheme;
   locale?: string;
+  offline?: boolean;
   cacheTtlMs?: number;
   /** @deprecated not longer in use */
   useEntitlementPolling?: boolean;
@@ -58,6 +59,7 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
   entitlementsFallback,
   stiggClient,
   children,
+  offline,
   clientName = CLIENT_NAME,
   clientVersion = CLIENT_VERSION,
 }) => {
@@ -76,6 +78,7 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
     entitlementPollingInterval,
     clientName,
     clientVersion,
+    offline,
   };
   const [ctx, setContext] = useState<StiggContextValue>(() => ({
     stigg:
@@ -165,11 +168,3 @@ export const StiggProvider: React.FC<PropsWithChildren<StiggProviderProps>> = ({
     </StiggContext.Provider>
   );
 };
-
-export const useStiggContext = (): StiggContextValue => {
-  const ctx = useContext(StiggContext);
-  if (!ctx) {
-    throw new Error('Could not find Stigg context; You need to wrap your app in an <StiggProvider> component.');
-  }
-  return ctx;
-};

package/src/components/checkout/hooks/useLoadCheckout.ts

@@ -1,8 +1,8 @@
 import { GetCheckoutStateResults } from '@stigg/js-client-sdk';
 import { useEffect, useState } from 'react';
 import logger from '../../../services/logger';
-import { useStiggContext } from '../../StiggProvider';
 import { MockCheckoutStateCallback } from '../types';
+import { useStiggContext } from '../../../hooks/useStiggContext';
 
 type UseLoadCheckoutProps = {
   planId: string;

package/src/components/checkout/hooks/usePreviewSubscription.ts

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { BillingAddress, PreviewSubscription, StiggClient, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
-import { useStiggContext } from '../../StiggProvider';
 import { useCheckoutContext } from '../CheckoutProvider';
 import { useCheckoutModel } from './useCheckoutModel';
 import { SubscriptionState, useSubscriptionModel } from './useSubscriptionModel';
 import { MockCheckoutPreviewCallback } from '../types';
+import { useStiggContext } from '../../../hooks/useStiggContext';
 
 function mapBillingInformation({
   billingAddress,

package/src/components/customerPortal/hooks/useCustomerPortal.ts

@@ -1,7 +1,7 @@
 import { CustomerPortal } from '@stigg/js-client-sdk';
 import { useEffect, useState } from 'react';
 import logger from '../../../services/logger';
-import { useStiggContext } from '../../StiggProvider';
+import { useStiggContext } from '../../../hooks/useStiggContext';
 
 type UseCustomerPortalProps = {
   resourceId?: string;

package/src/components/hooks/useWaitForCheckoutCompleted.ts

@@ -1,6 +1,6 @@
 import { Subscription } from '@stigg/js-client-sdk';
 import { useEffect, useMemo, useState } from 'react';
-import { useStiggContext } from '../StiggProvider';
+import { useStiggContext } from '../../hooks/useStiggContext';
 
 function useQueryParams(paramName?: string) {
   return useMemo(() => {

package/src/components/paywall/hooks/useLoadPaywallData.ts

@@ -1,10 +1,10 @@
 import { BillingPeriod, Paywall } from '@stigg/js-client-sdk';
 import { useEffect, useState } from 'react';
 import logger from '../../../services/logger';
-import { useStiggContext } from '../../StiggProvider';
 import { PaywallData } from '../types';
 import { computeBillingPeriods } from '../utils/computeDefaultBillingPeriod';
 import { mapPaywallData } from '../utils/mapPaywallData';
+import { useStiggContext } from '../../../hooks/useStiggContext';
 
 type UseLoadPaywallDataProps = {
   productId?: string;

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export { useBooleanEntitlement } from './useBooleanEntitlement';
+export { useNumericEntitlement } from './useNumericEntitlement';
+export { useMeteredEntitlement } from './useMeteredEntitlement';
+export { useActiveSubscriptions } from './useActiveSubscriptions';
+export { usePaywall } from './usePaywall';
+export { useCustomerPortal } from './useCustomerPortal';
+export { useStiggContext } from './useStiggContext';

package/src/hooks/useActiveSubscriptions.ts

@@ -0,0 +1,21 @@
+import { useMemo, useCallback } from 'react';
+import { GetActiveSubscriptions } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+import { useFetch } from './useFetch';
+
+export function useActiveSubscriptions(params?: GetActiveSubscriptions) {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  const func = useCallback(() => (stigg ? stigg.getActiveSubscriptions(params) : Promise.resolve([])), [params, stigg]);
+  const { data, error, isLoaded } = useFetch({ func });
+
+  return useMemo(
+    () => ({
+      activeSubscriptions: data,
+      isLoaded,
+      error,
+    }),
+    [data, error, isLoaded],
+  );
+}

package/src/hooks/useBooleanEntitlement.ts

@@ -0,0 +1,20 @@
+import { BooleanEntitlement, GetBooleanEntitlement, BOOLEAN_DEFAULT_FALLBACK_ENTITLEMENT } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+export type TypedGetBooleanEntitlement<T> = Omit<GetBooleanEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useBooleanEntitlement<T extends string>(params: TypedGetBooleanEntitlement<T>): BooleanEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...BOOLEAN_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getBooleanEntitlement(params);
+}

package/src/hooks/useCustomerPortal.ts

@@ -0,0 +1,21 @@
+import { useMemo, useCallback } from 'react';
+import { GetCustomerPortal } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+import { useFetch } from './useFetch';
+
+export function useCustomerPortal(params?: GetCustomerPortal) {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  const func = useCallback(() => (stigg ? stigg.getCustomerPortal(params) : Promise.resolve(null)), [params, stigg]);
+  const { data, error, isLoaded } = useFetch({ func });
+
+  return useMemo(
+    () => ({
+      customerPortal: data,
+      isLoaded,
+      error,
+    }),
+    [data, error, isLoaded],
+  );
+}

package/src/hooks/useFetch.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+export type FetchResult<T> = {
+  isLoaded: boolean;
+  error: Error | null;
+  data: T | null;
+};
+
+export function useFetch<T>({ func }: { func: () => Promise<T> }): FetchResult<T> {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [data, setData] = useState<T | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoaded(true);
+      try {
+        const result = await func();
+        setData(result);
+      } catch (error) {
+        setError(error as Error);
+      } finally {
+        setIsLoaded(false);
+      }
+    };
+
+    void fetchData();
+  }, [func]);
+
+  return { isLoaded, error, data };
+}

package/src/hooks/useMeteredEntitlement.ts

@@ -0,0 +1,20 @@
+import { GetMeteredEntitlement, METERED_DEFAULT_FALLBACK_ENTITLEMENT, MeteredEntitlement } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+type TypedGetMeteredEntitlement<T> = Omit<GetMeteredEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useMeteredEntitlement<T extends string>(params: TypedGetMeteredEntitlement<T>): MeteredEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...METERED_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getMeteredEntitlement(params);
+}

package/src/hooks/useNumericEntitlement.ts

@@ -0,0 +1,20 @@
+import { NumericEntitlement, GetNumericEntitlement, NUMERIC_DEFAULT_FALLBACK_ENTITLEMENT } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+type TypedGetNumericEntitlement<T> = Omit<GetNumericEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useNumericEntitlement<T extends string>(params: TypedGetNumericEntitlement<T>): NumericEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...NUMERIC_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getNumericEntitlement(params);
+}

package/src/hooks/usePaywall.ts

@@ -0,0 +1,21 @@
+import { useMemo, useCallback } from 'react';
+import { GetPaywall } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+import { useFetch } from './useFetch';
+
+export function usePaywall(params?: GetPaywall) {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  const func = useCallback(() => (stigg ? stigg.getPaywall(params) : Promise.resolve(null)), [params, stigg]);
+  const { data, error, isLoaded } = useFetch({ func });
+
+  return useMemo(
+    () => ({
+      paywall: data,
+      isLoaded,
+      error,
+    }),
+    [data, error, isLoaded],
+  );
+}

package/src/hooks/useStiggContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { StiggContext, StiggContextValue } from '../components/StiggProvider';
+
+export function useStiggContext(options?: { optional?: false }): StiggContextValue;
+export function useStiggContext(options: { optional: true }): StiggContextValue | null;
+export function useStiggContext(options?: { optional?: boolean }): StiggContextValue | null {
+  const { optional } = options || {};
+  const ctx = useContext(StiggContext);
+  if (!ctx && !optional) {
+    throw new Error('Could not find Stigg context; You need to wrap your app in an <StiggProvider> component.');
+  }
+  return ctx;
+}

package/src/index.ts

@@ -33,13 +33,7 @@ export {
   CustomerPortalLocalization,
   CustomerPortalTheme,
 } from './components/customerPortal';
-export {
-  StiggProvider,
-  StiggProviderProps,
-  useStiggContext,
-  StiggContextValue,
-  StiggContext,
-} from './components/StiggProvider';
+export { StiggProvider, StiggProviderProps, StiggContextValue, StiggContext } from './components/StiggProvider';
 export {
   Checkout,
   CheckoutProps,
@@ -57,5 +51,17 @@ export {
   TaxDetailsInput,
 } from './components/checkout';
 export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
+export {
+  useBooleanEntitlement,
+  useMeteredEntitlement,
+  useNumericEntitlement,
+  useActiveSubscriptions,
+  useCustomerPortal,
+  useStiggContext,
+  usePaywall,
+} from './hooks';
 export { HorizontalAlignment, TextAlignment, FontVariant, FontWeight, StiggTheme } from './theme/types';
 export { CustomizedTheme as Theme } from './theme/Theme';
+export { BooleanEntitlementGuard } from './components/BooleanEntitlementGuard';
+export { NumericEntitlementGuard } from './components/NumericEntitlementGuard';
+export { MeteredEntitlementGuard } from './components/MeteredEntitlementGuard';

package/src/theme/Theme.tsx

@@ -5,11 +5,12 @@ import { TypographyProps } from 'styled-typography';
 import { css, ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled/macro';
 import { createTheme, ThemeProvider as MuiThemeProvider, THEME_ID } from '@mui/material/styles';
-import { useStiggContext } from '../components/StiggProvider';
+
 import { DeepPartial } from '../types';
 import { Fonts } from './Fonts';
 import { getResolvedTheme } from './getResolvedTheme';
 import { StiggTheme } from './types';
+import { useStiggContext } from '../hooks/useStiggContext';
 
 export type CustomizedTheme = DeepPartial<StiggTheme>;