@stigg/react-sdk 5.5.1 → 5.7.0

package/package.json

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

package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx

@@ -12,6 +12,7 @@ import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { AddonListItemContainer, CheckoutAddonsContainer, TrashButton } from './CheckoutAddonsStep.style';
 import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { useCheckoutModel, useProgressBarModel } from '../../hooks';
+import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
 
 type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;
 
@@ -96,6 +97,7 @@ function AddonListItem({
             <InputField
               id={`${addon.id}-input`}
               type="number"
+              onWheel={ON_WHEEL_BLUR}
               sx={{ width: 120, marginX: 2 }}
               value={addonState?.quantity ?? ''}
               error={!isValid}

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -14,6 +14,7 @@ import { useCheckoutModel, usePlanStepModel, useProgressBarModel } from '../../h
 import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
 import { getValidPriceQuantity } from '../../../utils/priceUtils';
 import { getFeatureDisplayNameText } from '../../../utils/getFeatureName';
+import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
 
 export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
 
@@ -122,12 +123,12 @@ export function PlanCharge({
         sx={{ width: 120 }}
         id={`${featureId}-input`}
         type="number"
+        onWheel={ON_WHEEL_BLUR}
         error={!isValid}
         helperText={!isValid ? getValidationText(charge, billableFeature?.quantity) : undefined}
         FormHelperTextProps={{ sx: { margin: '4px' } }}
         value={billableFeature?.quantity ?? ''}
         onChange={handleQuantityChange}
-        onWheel={(e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur()}
       />
     );
   }

package/src/components/common/VolumePerUnitInput.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Typography } from './Typography';
 import { InputField } from '../checkout/components';
 import { TiersSelectContainerProps } from './TiersSelectContainer';
+import { ON_WHEEL_BLUR } from '../utils/onWheelBlur';
 
 export function VolumePerUnitInput({
   width,
@@ -15,6 +16,7 @@ export function VolumePerUnitInput({
   return (
     <InputField
       type="number"
+      onWheel={ON_WHEEL_BLUR}
       fullWidth
       sx={{ minHeight: '46px', width }}
       InputProps={{

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);
 
@@ -96,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"

package/src/components/utils/onWheelBlur.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const ON_WHEEL_BLUR = (e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur();