@stigg/react-sdk 5.5.0 → 5.6.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.5.0",
+  "version": "5.6.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/customerPortal/CustomerPortal.tsx

@@ -5,7 +5,7 @@ import { CustomerPortalContainer } from './CustomerPortalContainer';
 import { DeepPartial } from '../../types';
 import { CustomerPortalLocalization } from './customerPortalTextOverrides';
 import { CustomerPortalTheme } from './customerPortalTheme';
-import { OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
+import { FilterEntitlementsFn, OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
 
 export type CustomerPortalSection =
   | 'usage'
@@ -24,6 +24,7 @@ export type CustomerPortalProps = {
   hiddenSections?: CustomerPortalSection[];
   textOverrides?: DeepPartial<CustomerPortalLocalization>;
   theme?: DeepPartial<CustomerPortalTheme>;
+  filterEntitlements?: FilterEntitlementsFn;
   resourceId?: string;
   productId?: string;
 };

package/src/components/customerPortal/CustomerPortalContainer.tsx

@@ -19,6 +19,7 @@ export function CustomerPortalContainer({
   onContactSupport,
   paywallComponent,
   hiddenSections,
+  filterEntitlements,
 }: CustomerPortalProps) {
   const { stigg } = useStiggContext();
   const { customerPortal, textOverrides, theme, isLoading } = useCustomerPortalContext();
@@ -55,7 +56,13 @@ export function CustomerPortalContainer({
           hiddenSections={hiddenSections}
           cancelScheduledUpdatesButtonTitle={textOverrides.cancelScheduledUpdatesButtonTitle}
         />
-        {shouldShowUsage && <CustomerUsageData onManageSubscription={onManageClick} onBuyMore={onBuyMore} />}
+        {shouldShowUsage && (
+          <CustomerUsageData
+            onManageSubscription={onManageClick}
+            onBuyMore={onBuyMore}
+            filterEntitlements={filterEntitlements}
+          />
+        )}
         <CustomerPortalPaywall
           ref={customerPortalSectionRef}
           paywallComponent={paywallComponent}

package/src/components/customerPortal/subscriptionOverview/charges/ChargeItem.tsx

@@ -33,7 +33,9 @@ export function ChargeItem({
   hasCustomSubscription,
 }: UsageBasedChargeProps) {
   return (
-    <div className="stigg-charge-list-item" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+    <div
+      className={`stigg-charge-list-item stigg-charge-list-item-${entitlement.feature!.refId}`}
+      style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
         <div style={{ display: 'flex', gap: 12 }}>
           <LongText variant="body1" color="primary">

package/src/components/customerPortal/types.ts

@@ -3,6 +3,8 @@ import { FeatureFragment } from '@stigg/api-client-js/src/generated/sdk';
 
 export type OnBuyMoreCallbackFn = (feature: FeatureFragment, entitlement: CustomerPortalEntitlement) => void;
 
+export type FilterEntitlementsFn = (entitlements: CustomerPortalEntitlement[]) => CustomerPortalEntitlement[];
+
 export enum CustomerPortalIntentionType {
   MANAGE_SUBSCRIPTION = 'MANAGE_SUBSCRIPTION',
   UPGRADE_PLAN = 'UPGRADE_PLAN',

package/src/components/customerPortal/usage/CustomerUsageData.tsx

@@ -10,7 +10,7 @@ import { SectionContainer } from '../common/SectionContainer';
 import { SectionHeader } from '../common/SectionHeader';
 import { SectionTitle } from '../common/SectionTitle';
 import { StyledButton } from '../common/StyledButton';
-import { OnBuyMoreCallbackFn } from '../types';
+import { FilterEntitlementsFn, OnBuyMoreCallbackFn } from '../types';
 import { OnManageClick } from '../CustomerPortalContainer';
 
 const MAX_BOXES = 6;
@@ -18,9 +18,10 @@ const MAX_BOXES = 6;
 export type CustomerUsageDataProps = {
   onManageSubscription?: OnManageClick;
   onBuyMore?: OnBuyMoreCallbackFn;
+  filterEntitlements?: FilterEntitlementsFn;
 };
 
-export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerUsageDataProps) {
+export function CustomerUsageData({ onManageSubscription, onBuyMore, filterEntitlements }: CustomerUsageDataProps) {
   const [showAll, setShowAll] = React.useState(false);
   const { customerPortal, isLoading, textOverrides, theme } = useCustomerPortalContext();
   const isLoadingData = isLoading || !customerPortal;
@@ -48,10 +49,12 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
   );
   const sortedEntitlements = [...priceEntitlements, ...otherEntitlements];
 
+  const filteredEntitlements = filterEntitlements ? filterEntitlements(sortedEntitlements) : sortedEntitlements;
+
   // 4 -> 3 per row, 6 -> 2 per row
-  const xs = sortedEntitlements.length > 2 ? 4 : 6;
+  const xs = filteredEntitlements.length > 2 ? 4 : 6;
 
-  const entitlementsToShow = showAll ? sortedEntitlements : sortedEntitlements.slice(0, MAX_BOXES);
+  const entitlementsToShow = showAll ? filteredEntitlements : filteredEntitlements.slice(0, MAX_BOXES);
 
   const toggleShowAll = () => setShowAll((prevState) => !prevState);
 
@@ -78,7 +81,11 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
         <>
           <Grid container spacing={4}>
             {entitlementsToShow.map((entitlement) => (
-              <Grid key={entitlement.feature!.refId} item xs={xs}>
+              <Grid
+                className={`stigg-entitlement-usage-${entitlement.feature!.refId}`}
+                key={entitlement.feature!.refId}
+                item
+                xs={xs}>
                 <FeatureUsage
                   key={entitlement.feature!.refId}
                   subscriptionPrice={subscriptionPriceByFeature[entitlement.feature!.refId]}
@@ -92,7 +99,7 @@ export function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerU
             ))}
           </Grid>
 
-          {sortedEntitlements.length > MAX_BOXES && (
+          {filteredEntitlements.length > MAX_BOXES && (
             <Footer>
               <StyledButton
                 className="stigg-usage-toggle-many-button"