@thecb/components 7.12.0 → 7.12.2-beta.0

package/dist/index.esm.js

@@ -14774,7 +14774,9 @@ var PencilIcon = function PencilIcon(_ref) {
 
 var PencilIcon$1 = themeComponent(PencilIcon, "Icons", fallbackValues$2, "info");
 
-var PendingIcon = function PendingIcon() {
+var PendingIcon = function PendingIcon(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? STORM_GREY : _ref$fill;
   return /*#__PURE__*/React.createElement("svg", {
     width: "32px",
     height: "32px",
@@ -14791,7 +14793,7 @@ var PendingIcon = function PendingIcon() {
   }, /*#__PURE__*/React.createElement("g", {
     id: "Icons",
     transform: "translate(-64.000000, -448.000000)",
-    fill: "#6D717E"
+    fill: fill
   }, /*#__PURE__*/React.createElement("path", {
     d: "M80,480 C88.836556,480 96,472.836556 96,464 C96,455.163444 88.836556,448 80,448 C71.163444,448 64,455.163444 64,464 C64,472.836556 71.163444,480 80,480 Z M87,466 C88.1045695,466 89,465.104569 89,464 C89,462.895431 88.1045695,462 87,462 C85.8954305,462 85,462.895431 85,464 C85,465.104569 85.8954305,466 87,466 Z M80,462 C81.1045695,462 82,462.895431 82,464 C82,465.104569 81.1045695,466 80,466 C78.8954305,466 78,465.104569 78,464 C78,462.895431 78.8954305,462 80,462 Z M73,462 C74.1045695,462 75,462.895431 75,464 C75,465.104569 74.1045695,466 73,466 C71.8954305,466 71,465.104569 71,464 C71,462.895431 71.8954305,462 73,462 Z",
     id: "status-icon---pending"
@@ -46974,12 +46976,48 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }));
 };
 
+var LoadingDetails = function LoadingDetails() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    background: GHOST_GREY,
+    borderRadius: "4px"
+  }, /*#__PURE__*/React.createElement(Spinner$2, null));
+};
+
+var ErrorDetails = function ErrorDetails() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Alert$1, {
+    variant: "error",
+    heading: "Error Loading Payment",
+    text: "Please go back and try again.",
+    showQuitLink: false
+  }));
+};
+
+var getLoadingOrErrorContent = function getLoadingOrErrorContent() {
+  var isLoading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var isError = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(LoadingDetails, null);
+  } else if (isError) {
+    return /*#__PURE__*/React.createElement(ErrorDetails, null);
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment$1, null);
+};
+
 var Collapsible = function Collapsible(_ref2) {
   var content = _ref2.content,
       title = _ref2.title,
       supportsTouch = _ref2.supportsTouch,
       isOpen = _ref2.isOpen,
-      setIsOpen = _ref2.setIsOpen;
+      setIsOpen = _ref2.setIsOpen,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      _ref2$isError = _ref2.isError,
+      isError = _ref2$isError === void 0 ? false : _ref2$isError;
   return /*#__PURE__*/React.createElement(CollapsibleSection$1, {
     isMobile: true,
     supportsTouch: supportsTouch,
@@ -47002,13 +47040,17 @@ var Collapsible = function Collapsible(_ref2) {
     },
     positionTransition: true,
     initial: "closed"
-  }, content));
+  }, isLoading || isError ? getLoadingOrErrorContent(isLoading, isError) : content));
 };
 
 var NonCollapsible = function NonCollapsible(_ref3) {
   var title = _ref3.title,
-      content = _ref3.content;
-  return /*#__PURE__*/React.createElement(Stack, null, title, content);
+      content = _ref3.content,
+      _ref3$isLoading = _ref3.isLoading,
+      isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
+      _ref3$isError = _ref3.isError,
+      isError = _ref3$isError === void 0 ? false : _ref3$isError;
+  return /*#__PURE__*/React.createElement(Stack, null, title, isLoading || isError ? getLoadingOrErrorContent(isLoading, isError) : content);
 };
 
 var PaymentDetails = function PaymentDetails(_ref4) {
@@ -47038,7 +47080,11 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       _ref4$voidableAmountP = _ref4.voidableAmountPaid,
       voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
       _ref4$remainingBalanc = _ref4.remainingBalance,
-      remainingBalance = _ref4$remainingBalanc === void 0 ? false : _ref4$remainingBalanc;
+      remainingBalance = _ref4$remainingBalanc === void 0 ? false : _ref4$remainingBalanc,
+      _ref4$isLoading = _ref4.isLoading,
+      isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+      _ref4$isError = _ref4.isError,
+      isError = _ref4$isError === void 0 ? false : _ref4$isError;
 
   var _useState = useState(initiallyOpen),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47141,10 +47187,14 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     isMobile: isMobile,
-    supportsTouch: supportsTouch
+    supportsTouch: supportsTouch,
+    isLoading: isLoading,
+    isError: isError
   }) : /*#__PURE__*/React.createElement(NonCollapsible, {
     title: title,
-    content: content
+    content: content,
+    isLoading: isLoading,
+    isError: isError
   });
 };