@stigg/react-sdk 5.5.1 → 5.7.0

package/dist/components/customerPortal/CustomerPortal.d.ts

@@ -3,7 +3,7 @@ import { CustomerPortalSubscription } from '@stigg/js-client-sdk';
 import { DeepPartial } from '../../types';
 import { CustomerPortalLocalization } from './customerPortalTextOverrides';
 import { CustomerPortalTheme } from './customerPortalTheme';
-import { OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
+import { FilterEntitlementsFn, OnBuyMoreCallbackFn, OnManageSubscriptionFn } from './types';
 export declare type CustomerPortalSection = 'usage' | 'addons' | 'promotionalEntitlements' | 'billingInformation' | 'paymentDetails' | 'invoices';
 export declare type CustomerPortalProps = {
     onManageSubscription?: OnManageSubscriptionFn;
@@ -14,6 +14,7 @@ export declare type CustomerPortalProps = {
     hiddenSections?: CustomerPortalSection[];
     textOverrides?: DeepPartial<CustomerPortalLocalization>;
     theme?: DeepPartial<CustomerPortalTheme>;
+    filterEntitlements?: FilterEntitlementsFn;
     resourceId?: string;
     productId?: string;
 };

package/dist/components/customerPortal/CustomerPortalContainer.d.ts

@@ -4,4 +4,4 @@ import { CustomerPortalIntentionType } from './types';
 export declare type OnManageClick = ({ intentionType }: {
     intentionType: CustomerPortalIntentionType;
 }) => void;
-export declare function CustomerPortalContainer({ onManageSubscription, onBuyMore, onCancelScheduledUpdates, onContactSupport, paywallComponent, hiddenSections, }: CustomerPortalProps): JSX.Element;
+export declare function CustomerPortalContainer({ onManageSubscription, onBuyMore, onCancelScheduledUpdates, onContactSupport, paywallComponent, hiddenSections, filterEntitlements, }: CustomerPortalProps): JSX.Element;

package/dist/components/customerPortal/types.d.ts

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

package/dist/components/customerPortal/usage/CustomerUsageData.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { OnBuyMoreCallbackFn } from '../types';
+import { FilterEntitlementsFn, OnBuyMoreCallbackFn } from '../types';
 import { OnManageClick } from '../CustomerPortalContainer';
 export declare type CustomerUsageDataProps = {
     onManageSubscription?: OnManageClick;
     onBuyMore?: OnBuyMoreCallbackFn;
+    filterEntitlements?: FilterEntitlementsFn;
 };
-export declare function CustomerUsageData({ onManageSubscription, onBuyMore }: CustomerUsageDataProps): JSX.Element | null;
+export declare function CustomerUsageData({ onManageSubscription, onBuyMore, filterEntitlements }: CustomerUsageDataProps): JSX.Element | null;

package/dist/components/utils/onWheelBlur.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ON_WHEEL_BLUR: (e: React.WheelEvent<HTMLInputElement>) => void;

package/dist/react-sdk.cjs.development.js

@@ -1445,6 +1445,10 @@ function ContentLoadingSkeleton() {
   })))));
 }
 
+var ON_WHEEL_BLUR = function ON_WHEEL_BLUR(e) {
+  return e.target.blur();
+};
+
 function VolumePerUnitInput(_ref) {
   var width = _ref.width,
       tierUnits = _ref.tierUnits,
@@ -1452,6 +1456,7 @@ function VolumePerUnitInput(_ref) {
       handleChange = _ref.handleChange;
   return React__default.createElement(InputField, {
     type: "number",
+    onWheel: ON_WHEEL_BLUR,
     fullWidth: true,
     sx: {
       minHeight: '46px',
@@ -5821,7 +5826,7 @@ function ChargeItem(_ref) {
       canUpgradeSubscription = _ref.canUpgradeSubscription,
       hasCustomSubscription = _ref.hasCustomSubscription;
   return React__default.createElement("div", {
-    className: "stigg-charge-list-item",
+    className: "stigg-charge-list-item stigg-charge-list-item-" + entitlement.feature.refId,
     style: {
       display: 'flex',
       flexDirection: 'column',
@@ -6432,7 +6437,8 @@ function CustomerUsageLoader() {
 var MAX_BOXES = 6;
 function CustomerUsageData(_ref) {
   var onManageSubscription = _ref.onManageSubscription,
-      onBuyMore = _ref.onBuyMore;
+      onBuyMore = _ref.onBuyMore,
+      filterEntitlements = _ref.filterEntitlements;
 
   var _React$useState = React__default.useState(false),
       showAll = _React$useState[0],
@@ -6470,10 +6476,11 @@ function CustomerUsageData(_ref) {
   var otherEntitlements = lodash.compact(meteredEntitlements == null ? void 0 : meteredEntitlements.filter(function (entitlement) {
     return !subscriptionPriceByFeature[entitlement.feature.refId];
   }));
-  var sortedEntitlements = [].concat(priceEntitlements, otherEntitlements); // 4 -> 3 per row, 6 -> 2 per row
+  var sortedEntitlements = [].concat(priceEntitlements, otherEntitlements);
+  var filteredEntitlements = filterEntitlements ? filterEntitlements(sortedEntitlements) : sortedEntitlements; // 4 -> 3 per row, 6 -> 2 per row
 
-  var xs = sortedEntitlements.length > 2 ? 4 : 6;
-  var entitlementsToShow = showAll ? sortedEntitlements : sortedEntitlements.slice(0, MAX_BOXES);
+  var xs = filteredEntitlements.length > 2 ? 4 : 6;
+  var entitlementsToShow = showAll ? filteredEntitlements : filteredEntitlements.slice(0, MAX_BOXES);
 
   var toggleShowAll = function toggleShowAll() {
     return setShowAll(function (prevState) {
@@ -6511,7 +6518,7 @@ function CustomerUsageData(_ref) {
       hasCustomSubscription: hasCustomSubscription,
       canUpgradeSubscription: canUpgradeSubscription
     }));
-  })), sortedEntitlements.length > MAX_BOXES && React__default.createElement(Footer, null, React__default.createElement(StyledButton$1, {
+  })), filteredEntitlements.length > MAX_BOXES && React__default.createElement(Footer, null, React__default.createElement(StyledButton$1, {
     className: "stigg-usage-toggle-many-button",
     variant: "text",
     startIcon: showAll ? React__default.createElement(reactFeather.Minus, null) : React__default.createElement(reactFeather.Plus, null),
@@ -6525,7 +6532,8 @@ function CustomerPortalContainer(_ref) {
       onCancelScheduledUpdates = _ref.onCancelScheduledUpdates,
       onContactSupport = _ref.onContactSupport,
       paywallComponent = _ref.paywallComponent,
-      hiddenSections = _ref.hiddenSections;
+      hiddenSections = _ref.hiddenSections,
+      filterEntitlements = _ref.filterEntitlements;
 
   var _useStiggContext = useStiggContext(),
       stigg = _useStiggContext.stigg;
@@ -6581,7 +6589,8 @@ function CustomerPortalContainer(_ref) {
     cancelScheduledUpdatesButtonTitle: textOverrides.cancelScheduledUpdatesButtonTitle
   }), shouldShowUsage && React__default.createElement(CustomerUsageData, {
     onManageSubscription: onManageClick,
-    onBuyMore: onBuyMore
+    onBuyMore: onBuyMore,
+    filterEntitlements: filterEntitlements
   }), React__default.createElement(CustomerPortalPaywall, {
     ref: customerPortalSectionRef,
     paywallComponent: paywallComponent,
@@ -13022,6 +13031,7 @@ function AddonListItem(_ref) {
   }, "Undo")), isAdded && React__default.createElement(React__default.Fragment, null, React__default.createElement(InputField, {
     id: addon.id + "-input",
     type: "number",
+    onWheel: ON_WHEEL_BLUR,
     sx: {
       width: 120,
       marginX: 2
@@ -13577,6 +13587,7 @@ function PlanCharge(_ref) {
       },
       id: featureId + "-input",
       type: "number",
+      onWheel: ON_WHEEL_BLUR,
       error: !isValid,
       helperText: !isValid ? getValidationText(charge, billableFeature == null ? void 0 : billableFeature.quantity) : undefined,
       FormHelperTextProps: {
@@ -13585,10 +13596,7 @@ function PlanCharge(_ref) {
         }
       },
       value: (_billableFeature$quan = billableFeature == null ? void 0 : billableFeature.quantity) != null ? _billableFeature$quan : '',
-      onChange: handleQuantityChange,
-      onWheel: function onWheel(e) {
-        return e.target.blur();
-      }
+      onChange: handleQuantityChange
     });
   }