@thecb/components 5.8.1-beta.2 → 5.8.1-beta.5

package/dist/index.esm.js

@@ -40698,6 +40698,8 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var Obligation = function Obligation(_ref) {
+  var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
+
   var config = _ref.config,
       obligations = _ref.obligations,
       actions = _ref.actions,
@@ -40720,22 +40722,30 @@ var Obligation = function Obligation(_ref) {
       inactiveLookupInput = _ref$inactiveLookupIn === void 0 ? "Account" : _ref$inactiveLookupIn,
       _ref$inactiveLookupVa = _ref.inactiveLookupValue,
       inactiveLookupValue = _ref$inactiveLookupVa === void 0 ? "" : _ref$inactiveLookupVa;
-  var obligation = obligations[0];
-  console.log("obligation in obligation component", obligation);
-  var customAttributes = obligation.customAttributes;
+
+  /*
+    The value of obligations is always an array. It can contain:
+      - A single obligation
+      - A group of obligations (a "collection")
+    
+    The top level desc/subdesc for all obligations in a collection is the same
+    (Collection accounts look different in the Account Details page)
+  */
+  var firstObligation = obligations[0];
+  var customAttributes = (_firstObligation$cust = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _firstObligation$cust !== void 0 ? _firstObligation$cust : {};
   var boxShadowValue = "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   var activeObligation = /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
     boxShadow: boxShadowValue,
     as: "section",
-    "aria-label": "".concat(obligation.description, " ").concat(obligation.subDescription)
+    "aria-label": "".concat((_firstObligation$desc = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description) !== null && _firstObligation$desc !== void 0 ? _firstObligation$desc : "account", " ").concat((_firstObligation$subD = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription) !== null && _firstObligation$subD !== void 0 ? _firstObligation$subD : obligationAssocID)
   }, /*#__PURE__*/React.createElement(Box, {
     background: WHITE
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React.createElement(Box, {
-    key: "".concat(obligations[0].id, "-top"),
+    key: "".concat(firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.id, "-top"),
     padding: "0 8px",
     minWidth: "100%"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -40755,12 +40765,12 @@ var Obligation = function Obligation(_ref) {
     iconValue: config.iconValue,
     customAttributes: customAttributes
   }), /*#__PURE__*/React.createElement(TitleModule, {
-    title: obligation.description,
-    subtitle: obligation.subDescription,
+    title: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description,
+    subtitle: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription,
     titleColor: BRIGHT_GREY,
     isMobile: isMobile
   }))), !isMobile && /*#__PURE__*/React.createElement(AmountModule, {
-    totalAmountDue: obligations.reduce(function (acc, curr) {
+    totalAmountDue: obligations === null || obligations === void 0 ? void 0 : obligations.reduce(function (acc, curr) {
       return acc + curr.amountDue;
     }, 0),
     autoPayEnabled: autoPayEnabled,
@@ -40811,7 +40821,7 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React.createElement(Box, {
-    key: "".concat(obligations[0].id, "-top"),
+    key: "".concat(obligationAssocID, "-top"),
     padding: "0 8px",
     minWidth: "100%"
   }, /*#__PURE__*/React.createElement(Cluster, {