@thecb/components 10.4.0-beta.9 → 10.4.0

package/dist/index.cjs.js

@@ -6211,7 +6211,7 @@ return numeral;
 }));
 });
 
-var noop$1 = function noop() {};
+var noop = function noop() {};
 var formatMoneyString = function formatMoneyString(s) {
   return numeral(s).format("$0,0.00");
 };
@@ -6345,7 +6345,7 @@ var wrapIndex = function wrapIndex(index, length) {
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  noop: noop$1,
+  noop: noop,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
@@ -6509,7 +6509,7 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "disabled", "children"];
+var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 
 /*
   Box component to create generic boxes
@@ -6557,7 +6557,6 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$srOnly = _ref.srOnly,
     srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
     dataQa = _ref.dataQa,
-    _ref$disabled = _ref.disabled,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(BoxWrapper, _extends({
@@ -10533,7 +10532,7 @@ var isRefObject = function (ref) {
     return typeof ref === "object" && ref.hasOwnProperty("current");
 };
 
-var noop$2 = function (v) { return v; };
+var noop$1 = function (v) { return v; };
 var ComponentDragControls = /** @class */ (function () {
     function ComponentDragControls(_a) {
         var ref = _a.ref, values = _a.values, controls = _a.controls;
@@ -10561,7 +10560,7 @@ var ComponentDragControls = /** @class */ (function () {
          * @internal
          */
         this.props = {
-            transformPagePoint: noop$2,
+            transformPagePoint: noop$1,
         };
         /**
          * References to the MotionValues used for tracking the current dragged point.
@@ -12991,7 +12990,7 @@ var Spinner = function Spinner(_ref) {
 
 var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$action = _ref2.action,
-    action = _ref2$action === void 0 ? noop$1 : _ref2$action,
+    action = _ref2$action === void 0 ? noop : _ref2$action,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
     text = _ref2.text,
@@ -13033,7 +13032,7 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disabledStyles: disabledStyles,
     "aria-disabled": disabled,
     as: "button",
-    onClick: isLoading || disabled ? undefined : action,
+    onClick: isLoading || disabled ? noop : action,
     borderRadius: "2px",
     theme: themeContext,
     extraStyles: "margin: 0.5rem; ".concat(extraStyles),
@@ -22815,7 +22814,7 @@ var Checkbox = function Checkbox(_ref4) {
     name = _ref4.name,
     checked = _ref4.checked,
     _ref4$onChange = _ref4.onChange,
-    onChange = _ref4$onChange === void 0 ? noop$1 : _ref4$onChange,
+    onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
     _ref4$disabled = _ref4.disabled,
     disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
     themeValues = _ref4.themeValues,
@@ -23010,7 +23009,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     padding: "0.875rem",
     borderRadius: "4px",
     minWidth: "30%",
-    onClick: disabled ? noop$1 : onSelect,
+    onClick: disabled ? noop : onSelect,
     borderColor: borderColor,
     borderSize: "1px",
     color: color,
@@ -23025,8 +23024,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     name: name,
     "aria-label": name,
     htmlFor: "checkbox-".concat(name, "-").concat(index),
-    onClick: disabled ? noop$1 : onSelect,
-    onKeyDown: disabled ? noop$1 : onSelect,
+    onClick: disabled ? noop : onSelect,
+    onKeyDown: disabled ? noop : onSelect,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
     theme: {
@@ -24509,7 +24508,7 @@ var Dropdown = function Dropdown(_ref13) {
     _ref13$disabledValues = _ref13.disabledValues,
     disabledValues = _ref13$disabledValues === void 0 ? [] : _ref13$disabledValues,
     _ref13$onClick = _ref13.onClick,
-    _onClick = _ref13$onClick === void 0 ? noop$1 : _ref13$onClick,
+    _onClick = _ref13$onClick === void 0 ? noop : _ref13$onClick,
     themeValues = _ref13.themeValues,
     maxHeight = _ref13.maxHeight,
     _ref13$widthFitOption = _ref13.widthFitOptions,
@@ -26125,7 +26124,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "position: relative; ".concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: function action() {
-      return noop$1;
+      return noop;
     },
     onFocus: function onFocus() {
       handleTogglePopover(true);
@@ -27091,7 +27090,7 @@ var HamburgerButton = function HamburgerButton(_ref4) {
     inactiveColor = _ref4.inactiveColor,
     isActive = _ref4.isActive,
     _ref4$onClick = _ref4.onClick,
-    onClick = _ref4$onClick === void 0 ? noop$1 : _ref4$onClick,
+    onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
     controls = _ref4.controls;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
@@ -27938,7 +27937,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     themeValues = _ref5.themeValues,
     index = _ref5.index,
     _ref5$handleChange = _ref5.handleChange,
-    handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
+    handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
     field = _ref5.field,
     config = _ref5.config;
   var getDefaultChecked = function getDefaultChecked(value, idx) {
@@ -38822,7 +38821,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
     isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
     _ref6$onToggle = _ref6.onToggle,
-    onToggle = _ref6$onToggle === void 0 ? noop$1 : _ref6$onToggle,
+    onToggle = _ref6$onToggle === void 0 ? noop : _ref6$onToggle,
     _ref6$disabled = _ref6.disabled,
     disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
     _ref6$name = _ref6.name,
@@ -38930,15 +38929,15 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, /*#__PURE__*/React__default.createElement(HiddenToggleSwitchBox, {
     "aria-label": name,
     checked: isOn,
-    onChange: disabled ? noop$1 : onToggle,
+    onChange: disabled ? noop : onToggle,
     disabled: disabled,
     id: "#toggle-".concat(name),
     isMobile: isMobile
   }), /*#__PURE__*/React__default.createElement(VisibleSwitch, {
     name: name,
     htmlFor: "#toggle-".concat(name),
-    onClick: disabled ? noop$1 : onToggle,
-    onKeyDown: disabled ? noop$1 : handleKeyDown,
+    onClick: disabled ? noop : onToggle,
+    onKeyDown: disabled ? noop : handleKeyDown,
     pose: disabled ? "disabled" : isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
@@ -40030,7 +40029,7 @@ var AddressForm = function AddressForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -40230,7 +40229,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile,
     revenueManagement = _ref.revenueManagement,
@@ -40441,8 +40440,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
-    onClick: isMobile && supportsTouch ? noop$1 : toggleSection,
-    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop$1,
+    onClick: isMobile && supportsTouch ? noop : toggleSection,
+    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
     key: "header",
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
@@ -40660,7 +40659,7 @@ var EditNameForm = function EditNameForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -41000,7 +40999,7 @@ var EmailForm = function EmailForm(_ref) {
     showErrors = _ref.showErrors,
     guestCheckout = _ref.guestCheckout,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -41097,7 +41096,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -42749,7 +42748,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: disabled ? noop$1 : onClick,
+    onClick: disabled ? noop : onClick,
     "aria-disabled": disabled,
     isDisabled: disabled,
     role: "group",
@@ -42798,7 +42797,7 @@ var LoginForm = function LoginForm(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -46292,7 +46291,9 @@ var Modal$1 = function Modal(_ref) {
     _ref$dataQa = _ref.dataQa,
     dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
     _ref$initialFocusSele = _ref.initialFocusSelector,
-    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+    initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+    _ref$blurUnderlay = _ref.blurUnderlay,
+    blurUnderlay = _ref$blurUnderlay === void 0 ? true : _ref$blurUnderlay;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var modalContainerRef = React.useRef(null);
@@ -46312,7 +46313,10 @@ var Modal$1 = function Modal(_ref) {
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
+      background: "rgba(41, 42, 51, 0.45)",
+      backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+      WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
     },
     dialogStyle: {
       width: customWidth || "615px",
@@ -46743,8 +46747,11 @@ var AutopayModal = function AutopayModal(_ref) {
     description = _ref.description,
     subDescription = _ref.subDescription,
     allowedPaymentInstruments = _ref.allowedPaymentInstruments,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    _ref$disableActions = _ref.disableActions,
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions,
+    action = _ref.action,
+    onClick = _ref.onClick,
+    onKeyPress = _ref.onKeyPress;
   var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
     var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
     var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
@@ -46775,12 +46782,12 @@ var AutopayModal = function AutopayModal(_ref) {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
             text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "secondary",
-            action: function action() {
-              isInCustomerManagement ? noop$1 : toggleModal(true);
+            action: action || function () {
+              return toggleModal(true);
             },
             dataQa: "Turn off Autopay",
             extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1; min-width: 165px;",
-            disabled: isInCustomerManagement
+            disabled: disableActions
           });
         }
       case "tertiary":
@@ -46788,20 +46795,20 @@ var AutopayModal = function AutopayModal(_ref) {
           return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
             text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "tertiary",
-            action: function action() {
-              isInCustomerManagement ? noop$1 : toggleModal(true);
+            action: action || function () {
+              return toggleModal(true);
             },
             dataQa: "Manage Autopay",
             extraStyles: isMobile && "flex-grow: 1; width: 100%;",
-            disabled: isInCustomerManagement
+            disabled: disableActions
           });
         }
       case "link":
         {
           return /*#__PURE__*/React__default.createElement(Box, {
             padding: "0",
-            onClick: function onClick() {
-              isInCustomerManagement ? noop$1 : toggleModal(true);
+            onClick: onClick || function () {
+              toggleModal(true);
             },
             hoverStyles: hoverStyles,
             activeStyles: activeStyles,
@@ -46811,10 +46818,10 @@ var AutopayModal = function AutopayModal(_ref) {
             align: "center"
           }, /*#__PURE__*/React__default.createElement(AutopayOnIcon, null), /*#__PURE__*/React__default.createElement(Text$1, {
             variant: "pS",
-            onClick: function onClick() {
-              return isInCustomerManagement ? noop$1 : toggleModal(true);
+            onClick: onClick || function () {
+              return toggleModal(true);
             },
-            onKeyPress: isInCustomerManagement ? noop$1 : function (e) {
+            onKeyPress: onKeyPress || function (e) {
               e.key === "Enter" && toggleModal(true);
             },
             tabIndex: "0",
@@ -46823,16 +46830,16 @@ var AutopayModal = function AutopayModal(_ref) {
             weight: themeValues.fontWeight,
             hoverStyles: themeValues.modalLinkHoverFocus,
             extraStyles: "padding-left: 0.25rem;",
-            disabled: isInCustomerManagement
+            disabled: disableActions
           }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
         }
     }
   };
   return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
-    showModal: isInCustomerManagement ? noop$1 : function () {
+    showModal: function showModal() {
       return toggleModal(true);
     },
-    hideModal: isInCustomerManagement ? noop$1 : function () {
+    hideModal: function hideModal() {
       return toggleModal(false);
     },
     modalOpen: modalOpen
@@ -46853,8 +46860,8 @@ var AmountModule = function AmountModule(_ref) {
     description = _ref.description,
     subDescription = _ref.subDescription,
     allowedPaymentInstruments = _ref.allowedPaymentInstruments,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    _ref$disableActions = _ref.disableActions,
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalOpen = _useState2[0],
@@ -46885,7 +46892,16 @@ var AmountModule = function AmountModule(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: disableActions,
+    action: disableActions ? noop : function () {
+      return toggleModal(true);
+    },
+    onClick: disableActions ? noop : function () {
+      toggleModal(true);
+    },
+    onKeyPress: disableActions ? noop : function (e) {
+      e.key === "Enter" && toggleModal(true);
+    }
   })));
 };
 
@@ -46908,8 +46924,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     description = _ref.description,
     subDescription = _ref.subDescription,
     allowedPaymentInstruments = _ref.allowedPaymentInstruments,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    _ref$disableActions = _ref.disableActions,
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -46963,7 +46979,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    isInCustomerManagement: disableActions
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -46991,7 +47007,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     },
     dataQa: "Set Up Autopay",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   }) : /*#__PURE__*/React__default.createElement(AutopayModalModule, {
     autoPayActive: autoPayEnabled,
     autoPaySchedule: autoPaySchedule,
@@ -47008,25 +47024,25 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: disableActions
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: isInCustomerManagement ? noop$1 : function () {
+    action: disableActions ? noop : function () {
       return handleClick(obligations);
     },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   }))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "8px 0 0",
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
     action: function action() {
-      return isInCustomerManagement ? noop$1 : function () {
+      return disableActions ? noop : function () {
         return handleClick(obligations);
       };
     },
@@ -47034,7 +47050,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
     extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   }))));
 };
 
@@ -47045,8 +47061,8 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     removeAccount = _ref.removeAccount,
     accountType = _ref.accountType,
     isMobile = _ref.isMobile,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    _ref$disableActions = _ref.disableActions,
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalIsOpen = _useState2[0],
@@ -47070,8 +47086,10 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     modalBodyText: "Are you sure you want to remove the ".concat(identifier, " ").concat(accounts, "? Any autopay scheduled against ").concat(obligations.length > 1 ? "them" : "it", " will be deactivated."),
     continueButtonText: "Remove",
     continueAction: function continueAction() {
-      removeAccount();
-      setModalIsOpen(false);
+      if (!disableActions) {
+        removeAccount();
+        setModalIsOpen(false);
+      }
     },
     useDangerButton: true
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -47080,12 +47098,12 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: "Remove",
     variant: "secondary",
-    action: isInCustomerManagement ? noop : function () {
+    action: disableActions ? noop : function () {
       return setModalIsOpen(true);
     },
     dataQa: "Remove Account",
     extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1;",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   })));
 };
 
@@ -47106,8 +47124,8 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     description = _ref.description,
     subDescription = _ref.subDescription,
     allowedPaymentInstruments = _ref.allowedPaymentInstruments,
-    _ref$isInCustomerMana = _ref.isInCustomerManagement,
-    isInCustomerManagement = _ref$isInCustomerMana === void 0 ? false : _ref$isInCustomerMana;
+    _ref$disableActions = _ref.disableActions,
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalOpen = _useState2[0],
@@ -47146,16 +47164,16 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: disableActions
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(RemoveAccountModalModule, {
     agencyName: agencyName,
-    removeAccount: isInCustomerManagement ? noop$1 : handleRemoveAccount,
+    removeAccount: disableActions ? noop : handleRemoveAccount,
     accountType: configType === "ACCOUNT" ? "Account" : "Property",
     isMobile: isMobile,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: disableActions
   }))));
 };
 
@@ -47286,7 +47304,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47305,7 +47323,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47324,7 +47342,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }));
   var inactiveObligation = /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -47381,7 +47399,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }))), isMobile && /*#__PURE__*/React__default.createElement(InactiveControlsModule, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47399,7 +47417,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };
@@ -47681,7 +47699,7 @@ var Pagination = function Pagination(_ref3) {
         return setCurrentPage({
           pageNumber: item.index
         });
-      } : noop$1,
+      } : noop,
       textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
       extraStyles: "".concat(extraStyles).concat(item.active ? currentPageStyles : ""),
       dataQa: index
@@ -48038,7 +48056,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     _ref4$voidableTransac = _ref4.voidableTransactionDetails,
     voidableTransactionDetails = _ref4$voidableTransac === void 0 ? [] : _ref4$voidableTransac,
     _ref4$partialVoidActi = _ref4.partialVoidAction,
-    partialVoidAction = _ref4$partialVoidActi === void 0 ? noop$1 : _ref4$partialVoidActi,
+    partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
     _ref4$voidableAmountP = _ref4.voidableAmountPaid,
     voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
     _ref4$remainingBalanc = _ref4.remainingBalance,
@@ -48497,7 +48515,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -48699,7 +48717,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     actions = _ref.actions,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -49003,7 +49021,7 @@ var PhoneForm = function PhoneForm(_ref) {
     clearOnDismount = _ref.clearOnDismount,
     showErrors = _ref.showErrors,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showWalletCheckbox = _ref.showWalletCheckbox,
     saveToWallet = _ref.saveToWallet,
     walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -49079,7 +49097,7 @@ var RadioGroup = function RadioGroup(_ref) {
     config = _ref.config,
     extraStyles = _ref.extraStyles,
     _ref$handleChange = _ref.handleChange,
-    handleChange = _ref$handleChange === void 0 ? noop$1 : _ref$handleChange,
+    handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
     field = _ref.field,
     fieldActions = _ref.fieldActions;
   var setValue = function setValue(value) {
@@ -49144,7 +49162,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     isLastGroupedItemInSection = _ref.isLastGroupedItemInSection,
     _ref$onKeyDown = _ref.onKeyDown,
-    onKeyDown = _ref$onKeyDown === void 0 ? noop$1 : _ref$onKeyDown;
+    onKeyDown = _ref$onKeyDown === void 0 ? noop : _ref$onKeyDown;
   var wrapper = {
     open: {
       height: openHeight,
@@ -49201,12 +49219,12 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     "aria-required": section.required,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
-    onClick: isMobile && supportsTouch || section.disabled ? noop$1 : function () {
+    onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
       return toggleOpenSection(section.id);
     },
     onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
       return toggleOpenSection(section.id);
-    } : noop$1,
+    } : noop,
     id: "inner-radio-section-".concat(sectionIndex),
     "data-qa": section.dataQa ? section.dataQa : section.id || "inner-radio-section-".concat(sectionIndex)
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -49236,7 +49254,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     ariaDescribedBy: ariaDescribedBy,
     radioOn: openSection === section.id,
     radioFocused: focused === section.id,
-    toggleRadio: section.disabled ? noop$1 : function () {
+    toggleRadio: section.disabled ? noop : function () {
       return toggleOpenSection(section.id);
     },
     tabIndex: "-1",
@@ -49420,7 +49438,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     showErrors = _ref.showErrors,
     isMobile = _ref.isMobile;
   if (clearOnDismount) {
@@ -49580,7 +49598,7 @@ var ResetConfirmationForm$1 = withWindowSize(ResetConfirmationForm);
 
 var ResetPasswordForm = function ResetPasswordForm(_ref) {
   var _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
+    handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
     clearOnDismount = _ref.clearOnDismount,
     fields = _ref.fields,
     actions = _ref.actions,