@thecb/components 7.12.0 → 7.12.2-beta.1

package/package.json

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

package/src/components/atoms/icons/PendingIcon.js

@@ -1,6 +1,7 @@
 import React from "react";
+import { STORM_GREY } from "../../../constants/colors";
 
-const PendingIcon = () => (
+const PendingIcon = ({ fill = STORM_GREY }) => (
   <svg
     width="32px"
     height="32px"
@@ -16,11 +17,7 @@ const PendingIcon = () => (
       fill="none"
       fillRule="evenodd"
     >
-      <g
-        id="Icons"
-        transform="translate(-64.000000, -448.000000)"
-        fill="#6D717E"
-      >
+      <g id="Icons" transform="translate(-64.000000, -448.000000)" fill={fill}>
         <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"

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

@@ -1,5 +1,12 @@
 import React, { useState, Fragment } from "react";
-import { Stack, Cluster, Box, Motion } from "../../atoms/layouts";
+import {
+  Stack,
+  Cluster,
+  Box,
+  Motion,
+  Cover,
+  Center
+} from "../../atoms/layouts";
 import { fallbackValues } from "./PaymentDetails.theme";
 
 import { displayCurrency } from "../../../util/general";
@@ -14,9 +21,11 @@ import {
   FONT_WEIGHT_BOLD,
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
-import { ATHENS_GREY } from "../../../constants/colors";
+import { ATHENS_GREY, GHOST_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 = ({
@@ -110,7 +119,47 @@ const PaymentDetailsContent = ({
   </Stack>
 );
 
-const Collapsible = ({ content, title, supportsTouch, isOpen, setIsOpen }) => (
+const LoadingDetails = () => (
+  <Box padding="0" background={GHOST_GREY} borderRadius="4px">
+    <Cover minHeight="100%" singleChild>
+      <Center intrinsic>
+        <Box>
+          <Spinner size="100" />
+        </Box>
+      </Center>
+    </Cover>
+  </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
+}) => (
   <CollapsibleSection
     isMobile={true}
     supportsTouch={supportsTouch}
@@ -129,15 +178,24 @@ const Collapsible = ({ content, title, supportsTouch, isOpen, setIsOpen }) => (
       positionTransition
       initial={"closed"}
     >
-      {content}
+      {isLoading || isError
+        ? getLoadingOrErrorContent(isLoading, isError)
+        : content}
     </Motion>
   </CollapsibleSection>
 );
 
-const NonCollapsible = ({ title, content }) => (
+const NonCollapsible = ({
+  title,
+  content,
+  isLoading = false,
+  isError = false
+}) => (
   <Stack>
     {title}
-    {content}
+    {isLoading || isError
+      ? getLoadingOrErrorContent(isLoading, isError)
+      : content}
   </Stack>
 );
 
@@ -159,8 +217,10 @@ 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
@@ -266,11 +326,13 @@ const PaymentDetails = ({
         isOpen,
         setIsOpen,
         isMobile,
-        supportsTouch
+        supportsTouch,
+        isLoading,
+        isError
       }}
     />
   ) : (
-    <NonCollapsible {...{ title, content }} />
+    <NonCollapsible {...{ title, content, isLoading, isError }} />
   );
 };