@thecb/components 10.4.0-beta.1 → 10.4.0-beta.10

package/dist/index.esm.js

@@ -12590,22 +12590,21 @@ var WHITE$1 = WHITE,
   MANATEE_GREY$1 = MANATEE_GREY,
   MATISSE_BLUE$1 = MATISSE_BLUE,
   RASPBERRY$1 = RASPBERRY,
-  ERROR_COLOR$1 = ERROR_COLOR,
-  STORM_GREY$1 = STORM_GREY;
+  ERROR_COLOR$1 = ERROR_COLOR;
 var LINK_TEXT_DECORATION$1 = LINK_TEXT_DECORATION;
 var disabledBorderColor = {
-  primary: STORM_GREY$1,
-  secondary: STORM_GREY$1,
+  primary: MANATEE_GREY$1,
+  secondary: MANATEE_GREY$1,
   back: TRANSPARENT$1,
-  smallPrimary: STORM_GREY$1,
-  smallSecondary: STORM_GREY$1,
+  smallPrimary: MANATEE_GREY$1,
+  smallSecondary: MANATEE_GREY$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
-  danger: STORM_GREY$1,
-  dangerSecondary: STORM_GREY$1,
-  whiteSecondary: TRANSPARENT$1,
-  whitePrimary: TRANSPARENT$1
+  danger: MANATEE_GREY$1,
+  dangerSecondary: MANATEE_GREY$1,
+  whiteSecondary: MANATEE_GREY$1,
+  whitePrimary: MANATEE_GREY$1
 };
 var disabledColor = {
   primary: WHITE$1,
@@ -13026,7 +13025,7 @@ var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     disabledStyles: disabledStyles,
     "aria-disabled": disabled,
     as: "button",
-    onClick: isLoading || disabled ? undefined : action,
+    onClick: isLoading || disabled ? noop$1 : action,
     borderRadius: "2px",
     theme: themeContext,
     extraStyles: "margin: 0.5rem; ".concat(extraStyles),
@@ -20573,7 +20572,7 @@ var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackVal
 
 // import theme from "styled-theming";
 var MATISSE_BLUE$2 = MATISSE_BLUE,
-  STORM_GREY$2 = STORM_GREY;
+  STORM_GREY$1 = STORM_GREY;
 var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 
 /*
@@ -20582,8 +20581,8 @@ var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 */
 
 var color$5 = "".concat(MATISSE_BLUE$2);
-var activeColor$2 = "".concat(STORM_GREY$2);
-var activeBreadcrumbColor = "".concat(STORM_GREY$2);
+var activeColor$2 = "".concat(STORM_GREY$1);
+var activeBreadcrumbColor = "".concat(STORM_GREY$1);
 var fontSize$2 = "0.875rem";
 var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
@@ -27769,9 +27768,7 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     action = _ref.action,
     destination = _ref.destination,
     children = _ref.children,
-    dataQa = _ref.dataQa,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    dataQa = _ref.dataQa;
   return isLink ? /*#__PURE__*/React.createElement(Link, {
     to: destination,
     "data-qa": dataQa,
@@ -27781,14 +27778,13 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minHeight: "100%",
-    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
+    extraStyles: "cursor: pointer;"
   }, children)) : /*#__PURE__*/React.createElement(Box, {
-    onClick: disabled ? noop$1 : action,
+    onClick: action,
     padding: "0",
     minHeight: "100%",
-    dataQa: dataQa,
-    "aria-disabled": disabled,
-    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
+    extraStyles: "cursor: pointer;",
+    dataQa: dataQa
   }, children);
 };
 var Placeholder = function Placeholder(_ref2) {
@@ -27802,16 +27798,12 @@ var Placeholder = function Placeholder(_ref2) {
     variant = _ref2.variant,
     largeIcon = _ref2.largeIcon,
     themeValues = _ref2.themeValues,
-    dataQa = _ref2.dataQa,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
-  var tintedColor = "".concat(curriedTint$1(0.9, themeValues.color));
+    dataQa = _ref2.dataQa;
   return /*#__PURE__*/React.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
     destination: destination,
-    dataQa: dataQa,
-    disabled: disabled
+    dataQa: dataQa
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -27819,14 +27811,14 @@ var Placeholder = function Placeholder(_ref2) {
     minHeight: themeValues.height,
     hiddenStyles: !visible,
     extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
-    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : tintedColor, ";")
+    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
   }, /*#__PURE__*/React.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     tabIndex: "0",
     onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && !disabled && action();
+      return e.key === "Enter" && action();
     }
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "center",
@@ -42648,23 +42640,31 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), ACCOUNTS_DENTAL_ICON, AccountDentalIcon), ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), PROPERTIES_LAND_ICON, PropertyLandIcon), PROPERTIES_CAR_ICON, PropertyCarIcon), PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), MISC_BILL_ICON, AccountBillIcon));
 
+var disabledBackgroundColor$1 = {
+  primary: TRANSPARENT
+};
+var disabledBorderColor$1 = {
+  primary: GHOST_GREY
+};
+var disabledColor$1 = {
+  primary: MANATEE_GREY
+};
 var activeBackgroundColor$1 = {
-  primary: "".concat(CORNFLOWER_BLUE),
-  disabled: "".concat(TRANSPARENT)
+  primary: CORNFLOWER_BLUE
 };
 var backgroundColor$9 = {
-  primary: "".concat(LINK_WATER),
-  disabled: "".concat(TRANSPARENT)
+  primary: LINK_WATER
 };
 var borderColor$5 = {
-  primary: "".concat(MOON_RAKER),
-  disabled: "".concat(GHOST_GREY)
+  primary: MOON_RAKER
 };
 var color$b = {
-  primary: "".concat(ROYAL_BLUE_VIVID),
-  disabled: "".concat(MANATEE_GREY)
+  primary: ROYAL_BLUE_VIVID
 };
 var fallbackValues$I = {
+  disabledBackgroundColor: disabledBackgroundColor$1,
+  disabledBorderColor: disabledBorderColor$1,
+  disabledColor: disabledColor$1,
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$9,
   borderColor: borderColor$5,
@@ -42674,35 +42674,30 @@ var fallbackValues$I = {
 var Container = styled(Box).withConfig({
   displayName: "LinkCardstyled__Container",
   componentId: "sc-l5q1h2-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " transition:all .2s ease-in-out;&:hover,&:active{cursor:", ";box-shadow:", ";}&:hover:not(:active){", "}&:active{", "}"], function (_ref) {
-  var theme = _ref.theme;
-  return "\n    background-color: ".concat(theme.backgroundColor, ";\n    border: 1px solid ").concat(theme.borderColor, ";\n  ");
+})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " transition:all .2s ease-in-out;", ""], function (_ref) {
+  var isDisabled = _ref.isDisabled,
+    theme = _ref.theme;
+  return "\n    background-color: ".concat(isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n    border: 1px solid ").concat(isDisabled ? theme.disabledBorderColor : theme.borderColor, ";\n  ");
 }, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? "default" : "pointer";
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return "\n      ".concat(disabled ? "none" : "0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n      0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n      0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n      0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n      0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n      0px 80px 33px 0px rgba(41, 42, 51, 0);", "\n    ");
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return "border: 1px solid ".concat(theme.borderColor, ";");
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return "\n      background-color: ".concat(theme.activeBackgroundColor, ";\n      border: 1px solid ").concat(theme.borderColor, ";\n    ;");
+  var isDisabled = _ref2.isDisabled,
+    theme = _ref2.theme;
+  return isDisabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n\n        &:hover:not(:active) {\n          border: 1px solid ".concat(theme.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(theme.activeBackgroundColor, ";\n          border: 1px solid ").concat(theme.borderColor, ";\n        }\n      ");
 });
 var Title$2 = styled(Heading$1).withConfig({
   displayName: "LinkCardstyled__Title",
   componentId: "sc-l5q1h2-1"
-})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref6) {
-  var theme = _ref6.theme;
-  return "color: ".concat(theme.color, ";");
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref3) {
+  var isDisabled = _ref3.isDisabled,
+    theme = _ref3.theme;
+  return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
 });
 var Subtitle = styled(Paragraph$1).withConfig({
   displayName: "LinkCardstyled__Subtitle",
   componentId: "sc-l5q1h2-2"
-})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150 %;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref7) {
-  var theme = _ref7.theme;
-  return "color: ".concat(theme.color, ";");
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref4) {
+  var isDisabled = _ref4.isDisabled,
+    theme = _ref4.theme;
+  return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
 });
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
@@ -42710,8 +42705,7 @@ var Footer = styled(Stack).withConfig({
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
-  var _ref$variant = _ref.variant,
-    _ref$title = _ref.title,
+  var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
     _ref$subtitle = _ref.subtitle,
     subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
@@ -42748,7 +42742,10 @@ var LinkCard = function LinkCard(_ref) {
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
     onClick: disabled ? noop$1 : onClick,
-    disabled: disabled
+    "aria-disabled": disabled,
+    isDisabled: disabled,
+    role: "group",
+    "aria-label": "".concat(title, ", ").concat(subtitle)
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -42763,13 +42760,15 @@ var LinkCard = function LinkCard(_ref) {
   }, /*#__PURE__*/React.createElement(Title$2, {
     variant: titleVariant,
     theme: themeValues,
-    margin: 0
+    margin: 0,
+    isDisabled: disabled
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 40px",
     width: "100%"
   }, /*#__PURE__*/React.createElement(Subtitle, {
     variant: "pS",
-    theme: themeValues
+    theme: themeValues,
+    isDisabled: disabled
   }, subtitle)), /*#__PURE__*/React.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
@@ -46736,8 +46735,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);
@@ -46766,27 +46768,27 @@ var AutopayModal = function AutopayModal(_ref) {
       case "secondary":
         {
           return /*#__PURE__*/React.createElement(ButtonWithAction, {
-            disabled: isInCustomerManagement,
             text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "secondary",
             action: function action() {
-              toggleModal(true);
+              _action || toggleModal(true);
             },
             dataQa: "Turn off Autopay",
-            extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1; min-width: 165px;"
+            extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1; min-width: 165px;",
+            disabled: disableActions
           });
         }
       case "tertiary":
         {
           return /*#__PURE__*/React.createElement(ButtonWithAction, {
-            disabled: isInCustomerManagement,
             text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
-            variant: isInCustomerManagement ? "disabledTertiary" : "tertiary",
+            variant: "tertiary",
             action: function action() {
-              isInCustomerManagement ? noop$1 : toggleModal(true);
+              _action || toggleModal(true);
             },
             dataQa: "Manage Autopay",
-            extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+            extraStyles: isMobile && "flex-grow: 1; width: 100%;",
+            disabled: disableActions
           });
         }
       case "link":
@@ -46794,7 +46796,7 @@ var AutopayModal = function AutopayModal(_ref) {
           return /*#__PURE__*/React.createElement(Box, {
             padding: "0",
             onClick: function onClick() {
-              isInCustomerManagement ? noop$1 : toggleModal(true);
+              _onClick || toggleModal(true);
             },
             hoverStyles: hoverStyles,
             activeStyles: activeStyles,
@@ -46805,9 +46807,9 @@ var AutopayModal = function AutopayModal(_ref) {
           }, /*#__PURE__*/React.createElement(AutopayOnIcon, null), /*#__PURE__*/React.createElement(Text$1, {
             variant: "pS",
             onClick: function onClick() {
-              return toggleModal(true);
+              return _onClick || toggleModal(true);
             },
-            onKeyPress: isInCustomerManagement ? noop$1 : function (e) {
+            onKeyPress: onKeyPress || function (e) {
               e.key === "Enter" && toggleModal(true);
             },
             tabIndex: "0",
@@ -46815,16 +46817,17 @@ var AutopayModal = function AutopayModal(_ref) {
             color: SEA_GREEN,
             weight: themeValues.fontWeight,
             hoverStyles: themeValues.modalLinkHoverFocus,
-            extraStyles: "padding-left: 0.25rem;"
+            extraStyles: "padding-left: 0.25rem;",
+            disabled: disableActions
           }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
         }
     }
   };
   return /*#__PURE__*/React.createElement(Modal$1, _extends({
-    showModal: isInCustomerManagement ? noop$1 : function () {
+    showModal: disableActions ? noop$1 : function () {
       return toggleModal(true);
     },
-    hideModal: isInCustomerManagement ? noop$1 : function () {
+    hideModal: disableActions ? noop$1 : function () {
       return toggleModal(false);
     },
     modalOpen: modalOpen
@@ -46844,7 +46847,9 @@ var AmountModule = function AmountModule(_ref) {
     nextAutopayDate = _ref.nextAutopayDate,
     description = _ref.description,
     subDescription = _ref.subDescription,
-    allowedPaymentInstruments = _ref.allowedPaymentInstruments;
+    allowedPaymentInstruments = _ref.allowedPaymentInstruments,
+    _ref$disableActions = _ref.disableActions,
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalOpen = _useState2[0],
@@ -46874,7 +46879,17 @@ var AmountModule = function AmountModule(_ref) {
     controlType: "link",
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    disableActions: disableActions,
+    action: function action() {
+      return disableActions ? noop$1 : toggleModal(true);
+    },
+    onClick: function onClick() {
+      return disableActions ? noop$1 : toggleModal(true);
+    },
+    onKeyPress: disableActions ? noop$1 : function (e) {
+      e.key === "Enter" && toggleModal(true);
+    }
   })));
 };
 
@@ -46897,8 +46912,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -46951,7 +46966,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     nextAutopayDate: nextAutopayDate,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    disableActions: disableActions
   }))), /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -46962,24 +46978,26 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: isMobile ? "0 8px 0 0" : "0",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
-    variant: isInCustomerManagement ? "disabledTertiary" : "tertiary",
+    variant: "tertiary",
     text: config.type === "ACCOUNT" ? "Account Details" : "Property Details",
-    action: handleDetailsClick,
+    action: disableActions ? noop$1 : handleDetailsClick,
     dataQa: "Account Details",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
   })), /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "0 8px 0 0" : "0",
     extraStyles: isMobile && "flex-grow: 1;"
   }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React.createElement(ButtonWithAction, {
-    variant: isInCustomerManagement ? "disabledTertiary" : "tertiary",
+    variant: "tertiary",
     text: "Set Up ".concat(planType),
     action: function action() {
-      setDetailedObligation(obligations, config, obligationAssocID);
-      handleAutopayAction();
+      if (!disableActions) {
+        setDetailedObligation(obligations, config, obligationAssocID);
+        handleAutopayAction();
+      }
     },
     dataQa: "Set Up Autopay",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   }) : /*#__PURE__*/React.createElement(AutopayModalModule, {
     autoPayActive: autoPayEnabled,
     autoPaySchedule: autoPaySchedule,
@@ -46996,31 +47014,38 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: disableActions,
+    action: disableActions ? noop$1 : toggleModal(true),
+    onClick: disableActions ? noop$1 : toggleModal(true),
+    onKeyPress: disableActions ? noop$1 : function (e) {
+      e.key === "Enter" && toggleModal(true);
+    }
   })), !isMobile && /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     isLoading: isLoading,
-    action: isInCustomerManagement ? noop : function () {
+    action: disableActions ? noop$1 : function () {
       return handleClick(obligations);
     },
     text: "Pay Now",
-    variant: isMobile ? isInCustomerManagement ? "disabledSmallSecondary" : "smallSecondary" : isInCustomerManagement ? "disabledSecondary" : "secondary",
+    variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   }))), isMobile && /*#__PURE__*/React.createElement(Box, {
     padding: "8px 0 0",
     width: "100%"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     isLoading: isLoading,
     action: function action() {
-      return handleClick(obligations);
+      return disableActions ? noop$1 : function () {
+        return handleClick(obligations);
+      };
     },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
     extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;",
-    disabled: isInCustomerManagement
+    disabled: disableActions
   }))));
 };
 
@@ -47031,8 +47056,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalIsOpen = _useState2[0],
@@ -47045,10 +47070,10 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
   }, "".concat(agencyName, " - ")) : "";
   var identifier = accountType === "Account" && obligations.length > 1 ? "accounts" : accountType === "Property" && obligations.length > 1 ? "properties" : accountType.toLowerCase();
   return /*#__PURE__*/React.createElement(Modal$1, {
-    showModal: function showModal() {
+    showModal: disableActions ? noop : function () {
       return setModalIsOpen(true);
     },
-    hideModal: function hideModal() {
+    hideModal: disableActions ? noop : function () {
       return setModalIsOpen(false);
     },
     modalOpen: modalIsOpen,
@@ -47056,8 +47081,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.createElement(Box, {
@@ -47065,13 +47092,13 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: "Remove",
-    variant: isInCustomerManagement ? "disabledSecondary" : "secondary",
-    action: isInCustomerManagement ? noop : function () {
+    variant: "secondary",
+    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
   })));
 };
 
@@ -47092,8 +47119,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalOpen = _useState2[0],
@@ -47132,16 +47159,21 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: disableActions,
+    action: disableActions ? noop$1 : toggleModal(true),
+    onClick: disableActions ? noop$1 : toggleModal(true),
+    onKeyPress: disableActions ? noop$1 : function (e) {
+      e.key === "Enter" && toggleModal(true);
+    }
   })), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(RemoveAccountModalModule, {
     agencyName: agencyName,
-    removeAccount: isInCustomerManagement ? noop$1 : handleRemoveAccount,
+    removeAccount: disableActions ? noop$1 : handleRemoveAccount,
     accountType: configType === "ACCOUNT" ? "Account" : "Property",
     isMobile: isMobile,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: disableActions
   }))));
 };
 
@@ -47271,7 +47303,8 @@ var Obligation = function Obligation(_ref) {
     nextAutopayDate: nextAutopayDate,
     description: description,
     subDescription: subDescription,
-    allowedPaymentInstruments: allowedPaymentInstruments
+    allowedPaymentInstruments: allowedPaymentInstruments,
+    disableActions: isInCustomerManagement
   }))), !isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47290,7 +47323,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }))), isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47309,7 +47342,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }));
   var inactiveObligation = /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -47366,7 +47399,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }))), isMobile && /*#__PURE__*/React.createElement(InactiveControlsModule, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -47384,7 +47417,7 @@ var Obligation = function Obligation(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: isInCustomerManagement
+    disableActions: isInCustomerManagement
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };