@thecb/components 7.12.2-beta.0 → 7.12.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.12.2-beta.0",
+  "version": "7.12.3-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -7,6 +7,7 @@ import { Box, Cluster } from "../../atoms/layouts";
 import SolidDivider from "../../atoms/solid-divider";
 
 const PaymentButtonBar = ({
+  isForwardButtonDisabled = false,
   forwardButtonText = "Next",
   forwardButtonAction,
   forwardButtonLoading,
@@ -51,6 +52,7 @@ const PaymentButtonBar = ({
       variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
       dataQa={redirectText}
+      disabled={isForwardButtonDisabled}
     />
   ) : (
     forwardButtonAction && (
@@ -61,6 +63,7 @@ const PaymentButtonBar = ({
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={forwardButtonText}
+        disabled={isForwardButtonDisabled}
       />
     )
   );

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -14,11 +14,9 @@ import {
   FONT_WEIGHT_BOLD,
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
-import { ATHENS_GREY, GHOST_GREY } from "../../../constants/colors";
+import { ATHENS_GREY } from "../../../constants/colors";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Text from "../../atoms/text";
-import Alert from "../../atoms/alert";
-import Spinner from "../../atoms/spinner";
 import { noop } from "../../../util/general";
 
 const PaymentDetailsContent = ({
@@ -112,41 +110,7 @@ const PaymentDetailsContent = ({
   </Stack>
 );
 
-const LoadingDetails = () => (
-  <Box padding="0" background={GHOST_GREY} borderRadius="4px">
-    <Spinner />
-  </Box>
-);
-
-const ErrorDetails = () => (
-  <Box padding="0">
-    <Alert
-      variant="error"
-      heading="Error Loading Payment"
-      text="Please go back and try again."
-      showQuitLink={false}
-    />
-  </Box>
-);
-
-const getLoadingOrErrorContent = (isLoading = false, isError = false) => {
-  if (isLoading) {
-    return <LoadingDetails />;
-  } else if (isError) {
-    return <ErrorDetails />;
-  }
-  return <Fragment />;
-};
-
-const Collapsible = ({
-  content,
-  title,
-  supportsTouch,
-  isOpen,
-  setIsOpen,
-  isLoading = false,
-  isError = false
-}) => (
+const Collapsible = ({ content, title, supportsTouch, isOpen, setIsOpen }) => (
   <CollapsibleSection
     isMobile={true}
     supportsTouch={supportsTouch}
@@ -165,24 +129,15 @@ const Collapsible = ({
       positionTransition
       initial={"closed"}
     >
-      {isLoading || isError
-        ? getLoadingOrErrorContent(isLoading, isError)
-        : content}
+      {content}
     </Motion>
   </CollapsibleSection>
 );
 
-const NonCollapsible = ({
-  title,
-  content,
-  isLoading = false,
-  isError = false
-}) => (
+const NonCollapsible = ({ title, content }) => (
   <Stack>
     {title}
-    {isLoading || isError
-      ? getLoadingOrErrorContent(isLoading, isError)
-      : content}
+    {content}
   </Stack>
 );
 
@@ -204,10 +159,8 @@ const PaymentDetails = ({
   voidableTransactionDetails = [],
   partialVoidAction = noop,
   voidableAmountPaid = 0,
-  remainingBalance = false,
+  remainingBalance = false
   // end partial void section
-  isLoading = false,
-  isError = false
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
   const fees = _fees
@@ -313,13 +266,11 @@ const PaymentDetails = ({
         isOpen,
         setIsOpen,
         isMobile,
-        supportsTouch,
-        isLoading,
-        isError
+        supportsTouch
       }}
     />
   ) : (
-    <NonCollapsible {...{ title, content, isLoading, isError }} />
+    <NonCollapsible {...{ title, content }} />
   );
 };