@thecb/components 7.6.0 → 7.6.1-beta.1

package/dist/index.esm.js

@@ -6310,6 +6310,14 @@ var throttle = function throttle(delay, fn) {
     return fn.apply(void 0, arguments);
   };
 };
+var titleCaseWord = function titleCaseWord(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+var titleCaseString = function titleCaseString(string) {
+  return string.split(" ").map(function (word, index, string) {
+    return index === 0 || index === string.length - 1 || word.length > 3 ? titleCaseWord(word.toLowerCase()) : word;
+  }).join(" ");
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6327,7 +6335,9 @@ var general = /*#__PURE__*/Object.freeze({
   inputPlaceholderTextStyle: inputPlaceholderTextStyle,
   inputDisabledStyle: inputDisabledStyle,
   MOBILE_WIDTH: MOBILE_WIDTH,
-  throttle: throttle
+  throttle: throttle,
+  titleCaseWord: titleCaseWord,
+  titleCaseString: titleCaseString
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -17137,12 +17147,14 @@ function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
   return _extends$1.apply(this, arguments);
@@ -17152,6 +17164,7 @@ function _assertThisInitialized(self) {
   if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
+
   return self;
 }
 
@@ -17184,6 +17197,7 @@ function _isNativeReflectConstruct() {
   if (typeof Reflect === "undefined" || !Reflect.construct) return false;
   if (Reflect.construct.sham) return false;
   if (typeof Proxy === "function") return true;
+
   try {
     Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
@@ -17205,23 +17219,30 @@ function _construct(Parent, args, Class) {
       return instance;
     };
   }
+
   return _construct.apply(null, arguments);
 }
 
 function _wrapNativeSuper(Class) {
   var _cache = typeof Map === "function" ? new Map() : undefined;
+
   _wrapNativeSuper = function _wrapNativeSuper(Class) {
     if (Class === null || !_isNativeFunction(Class)) return Class;
+
     if (typeof Class !== "function") {
       throw new TypeError("Super expression must either be null or a function");
     }
+
     if (typeof _cache !== "undefined") {
       if (_cache.has(Class)) return _cache.get(Class);
+
       _cache.set(Class, Wrapper);
     }
+
     function Wrapper() {
       return _construct(Class, arguments, _getPrototypeOf(this).constructor);
     }
+
     Wrapper.prototype = Object.create(Class.prototype, {
       constructor: {
         value: Wrapper,
@@ -17232,6 +17253,7 @@ function _wrapNativeSuper(Class) {
     });
     return _setPrototypeOf(Wrapper, Class);
   };
+
   return _wrapNativeSuper(Class);
 }
 
@@ -44616,6 +44638,10 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
 
 var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$E, "profile");
 
+var ACH_METHOD = "BANK_ACCOUNT";
+var CC_METHOD = "CREDIT_CARD";
+var CASH_METHOD = "CASH";
+
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
       iconDefault = _ref.iconDefault,
@@ -44695,13 +44721,27 @@ var AutopayModal = function AutopayModal(_ref) {
       isPaymentPlan = _ref.isPaymentPlan,
       nextAutopayDate = _ref.nextAutopayDate,
       dueDate = _ref.dueDate,
-      inactive = _ref.inactive;
-  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+      inactive = _ref.inactive,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
+
+  var generateMethodNeededText = function generateMethodNeededText(planText, allowedPaymentInstruments) {
+    var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
+    var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
+    return "To setup ".concat(planText, " you must have a saved ").concat(methodRequired, " and address in your profile. Do you want to save these now?");
+  };
+
+  var plan = isPaymentPlan ? "your payment plan" : "autopay";
+  var shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
+  var deactivateText = "deactivate ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
+  var activateText = "Set Up ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
   var nextDate = dueDate || nextAutopayDate;
   var modalExtraProps = {
-    modalHeaderText: autoPayActive ? "Deactivate ".concat(planType) : "Set Up ".concat(planType),
-    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(isPaymentPlan ? "your payment plan" : "autopay", "? ").concat(!inactive && nextDate ? "Your next payment will be due on ".concat(nextDate, ".") : "") : "To set up ".concat(isPaymentPlan ? "a payment plan" : "autopay", " you must save a payment method and address in your profile. Do you want to save these now?"),
-    continueButtonText: autoPayActive ? "Disable ".concat(planType) : "Add to Profile",
+    modalHeaderText: autoPayActive ? titleCaseString(deactivateText) : titleCaseString(activateText),
+    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(plan, "? ").concat(!inactive && nextDate ? "Your next payment will be due on ".concat(nextDate, ".") : "") : generateMethodNeededText(plan, allowedPaymentInstruments),
+    continueButtonText: autoPayActive ? "Disable ".concat(shortPlan) : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
       deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
@@ -44717,7 +44757,7 @@ var AutopayModal = function AutopayModal(_ref) {
       case "secondary":
         {
           return /*#__PURE__*/React.createElement(ButtonWithAction, {
-            text: autoPayActive ? "Turn off ".concat(planType) : "Set Up ".concat(planType),
+            text: autoPayActive ? "Turn off ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "secondary",
             action: function action() {
               toggleModal(true);
@@ -44730,7 +44770,7 @@ var AutopayModal = function AutopayModal(_ref) {
       case "tertiary":
         {
           return /*#__PURE__*/React.createElement(ButtonWithAction, {
-            text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
+            text: autoPayActive ? "Manage ".concat(shortPlan) : "Set Up ".concat(shortPlan),
             variant: "tertiary",
             action: function action() {
               toggleModal(true);
@@ -44762,12 +44802,12 @@ var AutopayModal = function AutopayModal(_ref) {
               e.key === "Enter" && toggleModal(true);
             },
             tabIndex: "0",
-            dataQa: "".concat(planType, " On"),
+            dataQa: "".concat(shortPlan, " On"),
             color: SEA_GREEN,
             weight: themeValues.fontWeight,
             hoverStyles: themeValues.modalLinkHoverFocus,
             extraStyles: "padding-left: 0.25rem;"
-          }, "".concat(planType, " ").concat(nextAutopayDate))));
+          }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
         }
     }
   };
@@ -44794,7 +44834,10 @@ var AmountModule = function AmountModule(_ref) {
       autoPaySchedule = _ref.autoPaySchedule,
       paymentPlanSchedule = _ref.paymentPlanSchedule,
       isPaymentPlan = _ref.isPaymentPlan,
-      nextAutopayDate = _ref.nextAutopayDate;
+      nextAutopayDate = _ref.nextAutopayDate,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -44823,7 +44866,10 @@ var AmountModule = function AmountModule(_ref) {
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    controlType: "link"
+    controlType: "link",
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   })));
 };
 
@@ -44842,7 +44888,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
       isPaymentPlan = _ref.isPaymentPlan,
       nextAutopayDate = _ref.nextAutopayDate,
       obligationAssocID = _ref.obligationAssocID,
-      dueDate = _ref.dueDate;
+      dueDate = _ref.dueDate,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
 
   var _useState = useState(false),
@@ -44898,7 +44947,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     autoPaySchedule: autoPaySchedule,
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -44938,7 +44990,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    dueDate: dueDate
+    dueDate: dueDate,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   })), !isMobile && /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
@@ -45028,7 +45083,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
       dueDate = _ref.dueDate,
       agencyName = _ref.agencyName,
       configType = _ref.configType,
-      actions = _ref.actions;
+      actions = _ref.actions,
+      description = _ref.description,
+      subDescription = _ref.subDescription,
+      allowedPaymentInstruments = _ref.allowedPaymentInstruments;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -45067,7 +45125,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     obligationAssocID: obligationAssocID,
     dueDate: dueDate,
     controlType: "secondary",
-    inactive: true
+    inactive: true,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   })), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
@@ -45109,7 +45170,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var Obligation = function Obligation(_ref) {
-  var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
+  var _obligations$, _firstObligation$cust;
 
   var config = _ref.config,
       obligations = _ref.obligations,
@@ -45144,7 +45205,13 @@ var Obligation = function Obligation(_ref) {
     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 firstObligation = (_obligations$ = obligations === null || obligations === void 0 ? void 0 : obligations[0]) !== null && _obligations$ !== void 0 ? _obligations$ : {};
+  var _firstObligation$allo = firstObligation.allowedPaymentInstruments,
+      allowedPaymentInstruments = _firstObligation$allo === void 0 ? [CASH_METHOD, CC_METHOD, ACH_METHOD] : _firstObligation$allo,
+      _firstObligation$desc = firstObligation.description,
+      description = _firstObligation$desc === void 0 ? "Account" : _firstObligation$desc,
+      _firstObligation$subD = firstObligation.subDescription,
+      subDescription = _firstObligation$subD === void 0 ? obligationAssocID : _firstObligation$subD;
   var customAttributes = (_firstObligation$cust = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _firstObligation$cust !== void 0 ? _firstObligation$cust : {};
   var boxShadowValue = "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   var activeObligation = /*#__PURE__*/React.createElement(Box, {
@@ -45152,7 +45219,7 @@ var Obligation = function Obligation(_ref) {
     borderRadius: "4px",
     boxShadow: boxShadowValue,
     as: "section",
-    "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),
+    "aria-label": "".concat(description, " - ").concat(subDescription),
     border: "1px solid ".concat(GRECIAN_GREY),
     borderWidthOverride: "1px 0 0 0"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -45181,8 +45248,8 @@ var Obligation = function Obligation(_ref) {
     iconValue: config.iconValue,
     customAttributes: customAttributes
   }), /*#__PURE__*/React.createElement(TitleModule, {
-    title: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description,
-    subtitle: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription,
+    title: description,
+    subtitle: subDescription,
     titleColor: BRIGHT_GREY,
     isMobile: isMobile
   }))), !isMobile && /*#__PURE__*/React.createElement(AmountModule, {
@@ -45196,7 +45263,10 @@ var Obligation = function Obligation(_ref) {
     autoPaySchedule: autoPaySchedule,
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), !isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -45211,7 +45281,10 @@ var Obligation = function Obligation(_ref) {
     isMobile: isMobile,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    obligationAssocID: obligationAssocID
+    obligationAssocID: obligationAssocID,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -45226,7 +45299,10 @@ var Obligation = function Obligation(_ref) {
     isMobile: isMobile,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    obligationAssocID: obligationAssocID
+    obligationAssocID: obligationAssocID,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }));
   var inactiveObligation = /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -45279,7 +45355,10 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     dueDate: dueDate,
     agencyName: agencyName,
-    configType: config.type
+    configType: config.type,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))), isMobile && /*#__PURE__*/React.createElement(InactiveControlsModule, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -45293,7 +45372,10 @@ var Obligation = function Obligation(_ref) {
     obligationAssocID: obligationAssocID,
     dueDate: dueDate,
     agencyName: agencyName,
-    configType: config.type
+    configType: config.type,
+    description: description,
+    subDescription: subDescription,
+    allowedPaymentInstruments: allowedPaymentInstruments
   }))));
   return inactive ? inactiveObligation : activeObligation;
 };