@thecb/components 11.1.3 → 11.1.4-beta.0

package/dist/index.esm.js

@@ -46941,7 +46941,9 @@ var AmountModule = function AmountModule(_ref) {
     subDescription = _ref.subDescription,
     allowedPaymentInstruments = _ref.allowedPaymentInstruments,
     _ref$disableActions = _ref.disableActions,
-    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions;
+    disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     modalOpen = _useState2[0],
@@ -46954,7 +46956,25 @@ var AmountModule = function AmountModule(_ref) {
     variant: "pS",
     weight: FONT_WEIGHT_SEMIBOLD,
     textAlign: "left"
-  }, "Amount Due"), /*#__PURE__*/React.createElement(AmountCallout$1, {
+  }, "Amount Due"), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingLine, {
+    minWidth: "70",
+    maxWidth: "80",
+    height: "26px",
+    margin: isMobile ? "0" : "0 0 0 auto",
+    foregroundColor: GRECIAN_GREY,
+    style: {
+      borderRadius: "0.125rem"
+    }
+  }), /*#__PURE__*/React.createElement(LoadingLine, {
+    minWidth: "134",
+    maxWidth: "178",
+    height: "21px",
+    margin: isMobile ? "0.25rem 0 0 0" : "0.25rem 0 0 auto",
+    foregroundColor: GRECIAN_GREY,
+    style: {
+      borderRadius: "0.125rem"
+    }
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
     textAlign: isMobile ? "left" : "right"
   }), autoPayEnabled && /*#__PURE__*/React.createElement(AutopayModalModule, {
@@ -46982,7 +47002,7 @@ var AmountModule = function AmountModule(_ref) {
     onKeyPress: disableActions ? noop$1 : function (e) {
       e.key === "Enter" && toggleModal(true);
     }
-  })));
+  }))));
 };
 
 var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
@@ -47008,7 +47028,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     disableActions = _ref$disableActions === void 0 ? false : _ref$disableActions,
     cartEnabled = _ref.cartEnabled,
     cartConfig = _ref.cartConfig,
-    isInCart = _ref.isInCart;
+    isInCart = _ref.isInCart,
+    isContentLoading = _ref.isContentLoading;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47085,7 +47106,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     description: description,
     subDescription: subDescription,
     allowedPaymentInstruments: allowedPaymentInstruments,
-    isInCustomerManagement: disableActions
+    isInCustomerManagement: disableActions,
+    isLoading: isContentLoading
   }))), /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -47351,7 +47373,9 @@ var Obligation = function Obligation(_ref) {
     _ref$multiCartParams = _ref.multiCartParams,
     multiCartParams = _ref$multiCartParams === void 0 ? undefined : _ref$multiCartParams,
     _ref$isInCart = _ref.isInCart,
-    isInCart = _ref$isInCart === void 0 ? false : _ref$isInCart;
+    isInCart = _ref$isInCart === void 0 ? false : _ref$isInCart,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   /*
     The value of obligations is always an array. It can contain:
       - A single obligation
@@ -47369,6 +47393,90 @@ var Obligation = function Obligation(_ref) {
     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 loadingObligation = /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    borderRadius: "4px",
+    boxShadow: boxShadowValue,
+    as: "section",
+    "aria-label": "".concat(description, " - ").concat(subDescription),
+    border: "1px solid ".concat(GRECIAN_GREY),
+    borderWidthOverride: "1px 0 0 0"
+  }, /*#__PURE__*/React.createElement(Box, {
+    background: WHITE,
+    padding: isMobile ? "16px" : "24px 16px"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "24px"
+  }, /*#__PURE__*/React.createElement(Box, {
+    key: "".concat(firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.id, "-top"),
+    padding: "0 8px",
+    minWidth: "100%"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    childGap: "4px",
+    nowrap: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, !isMobile && /*#__PURE__*/React.createElement(IconsModule, {
+    icon: config.icon,
+    iconDefault: config.iconDefault,
+    configIconMap: config.iconMap,
+    iconValue: config.iconValue,
+    customAttributes: customAttributes,
+    iconColor: themeValues.iconColor
+  }), /*#__PURE__*/React.createElement(TitleModule, {
+    title: description,
+    subtitle: subDescription,
+    titleColor: BRIGHT_GREY,
+    isMobile: isMobile
+  }))), !isMobile && /*#__PURE__*/React.createElement(AmountModule, {
+    isMobile: isMobile,
+    disableActions: true,
+    isLoading: true
+  }))), !isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
+    obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    autoPayAvailable: autoPayAvailable,
+    handleAutopayAction: handleAutopayAction,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    navigateToSettings: navigateToSettings,
+    config: config,
+    actions: actions,
+    isMobile: isMobile,
+    description: description,
+    subDescription: subDescription,
+    disableActions: true,
+    cartEnabled: cartEnabled,
+    cartConfig: cartConfig,
+    multiCartParams: multiCartParams,
+    isInCart: isInCart,
+    isContentLoading: true
+  }))), isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
+    obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    autoPayAvailable: autoPayAvailable,
+    handleAutopayAction: handleAutopayAction,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    navigateToSettings: navigateToSettings,
+    config: config,
+    actions: actions,
+    isMobile: isMobile,
+    description: description,
+    subDescription: subDescription,
+    disableActions: true,
+    cartEnabled: cartEnabled,
+    cartConfig: cartConfig,
+    multiCartParams: multiCartParams,
+    isInCart: isInCart,
+    isContentLoading: true
+  }));
   var activeObligation = /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -47547,7 +47655,7 @@ var Obligation = function Obligation(_ref) {
     allowedPaymentInstruments: allowedPaymentInstruments,
     disableActions: isInCustomerManagement
   }))));
-  return inactive ? inactiveObligation : activeObligation;
+  return isLoading ? loadingObligation : inactive ? inactiveObligation : activeObligation;
 };
 var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);