@stigg/react-sdk 6.2.0 → 6.4.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.2.0",
+  "version": "6.4.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.48.0",
+    "@stigg/js-client-sdk": "3.49.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/EnumEntitlementGuard.tsx

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

package/src/components/paywall/EntitlementRow.tsx

@@ -36,6 +36,7 @@ type EntitlementRowProps = {
   maxUnitQuantity?: number | null;
   resetPeriod?: EntitlementResetPeriod | null;
   displayNameOverride?: string | null;
+  enumValues?: string[] | null;
   feature?: {
     id: string;
     units?: string | null | undefined;
@@ -80,10 +81,16 @@ function getEntitlementDisplay({
   minUnitQuantity,
   maxUnitQuantity,
   isCustom,
+  enumValues,
 }: EntitlementRowProps) {
   const unitBasedEntitlement = minUnitQuantity || maxUnitQuantity;
   const resetPeriodSuffix = `${resetPeriod && usageLimit ? `${getResetPeriodText(resetPeriod)}` : ''}`;
 
+  if (enumValues) {
+    const featureUnits = enumValues.length === 1 ? feature?.units : feature?.unitsPlural;
+    return `${enumValues.length} ${featureUnits}`;
+  }
+
   if (hasUnlimitedUsage) {
     return `Unlimited ${feature?.unitsPlural}`;
   }

package/src/components/paywall/PlanEntitlements.tsx

@@ -67,6 +67,7 @@ export function PlanEntitlements({
           resetPeriod={entitlement.resetPeriod}
           hasUnlimitedUsage={entitlement.hasUnlimitedUsage}
           usageLimit={entitlement.usageLimit}
+          enumValues={entitlement.enumValues}
           isCustom={entitlement.isCustom}
         />
       ))}

package/src/hooks/index.ts

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

package/src/hooks/useEnumEntitlement.ts

@@ -0,0 +1,20 @@
+import { GetEnumEntitlement, ENUM_DEFAULT_FALLBACK_ENTITLEMENT, EnumEntitlement } from '@stigg/js-client-sdk';
+import { useStiggContext } from './useStiggContext';
+
+type TypedGetEnumEntitlement<T> = Omit<GetEnumEntitlement, 'featureId'> & {
+  featureId: T;
+};
+
+export function useEnumEntitlement<T extends string>(params: TypedGetEnumEntitlement<T>): EnumEntitlement {
+  const stiggContext = useStiggContext({ optional: true });
+  const stigg = stiggContext?.stigg;
+
+  if (!stigg) {
+    return {
+      ...ENUM_DEFAULT_FALLBACK_ENTITLEMENT,
+      ...params.options?.fallback,
+    };
+  }
+
+  return stigg.getEnumEntitlement(params);
+}

package/src/index.ts

@@ -56,6 +56,7 @@ export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks
 export {
   useBooleanEntitlement,
   useMeteredEntitlement,
+  useEnumEntitlement,
   useNumericEntitlement,
   useActiveSubscriptions,
   useCustomerPortal,
@@ -67,3 +68,4 @@ export { CustomizedTheme as Theme } from './theme/Theme';
 export { BooleanEntitlementGuard } from './components/BooleanEntitlementGuard';
 export { NumericEntitlementGuard } from './components/NumericEntitlementGuard';
 export { MeteredEntitlementGuard } from './components/MeteredEntitlementGuard';
+export { EnumEntitlementGuard } from './components/EnumEntitlementGuard';