@thecb/components 8.4.12-beta.2 → 8.4.13-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.12-beta.2",
+  "version": "8.4.13-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -90,6 +90,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.8.0"
+    "redux-freeform": "^5.6.0"
   }
 }

package/src/components/molecules/partial-amount-form/PartialAmountForm.state.js

@@ -14,13 +14,28 @@ export const createPartialAmountFormState = (
   blockPartialPaymentOverpay = false
 ) => {
   const formConfig = lineItems.reduce((acc, item) => {
-    const validators = createPartialAmountFormValidators(
-      item,
-      lineItems,
-      maximum,
-      minimum,
-      blockPartialPaymentOverpay
-    );
+    const validators = [
+      required(),
+      validateSum(
+        numberGreaterThanOrEqualTo(minimum),
+        lineItems
+          .filter(lineItem => lineItem != item)
+          .reduce((acc, curr) => [...acc, curr.id], [])
+      )
+    ];
+    if (!!maximum) {
+      validators.push(
+        validateSum(
+          numberLessThanOrEqualTo(maximum),
+          lineItems
+            .filter(lineItem => lineItem != item)
+            .reduce((acc, curr) => [...acc, curr.id], [])
+        )
+      );
+    }
+    if (blockPartialPaymentOverpay) {
+      validators.push(numberLessThanOrEqualTo(item.amount));
+    }
     return {
       ...acc,
       [item.id]: {
@@ -39,36 +54,3 @@ export const createPartialAmountFormState = (
     partialAmountFormMapDispatchToProps: mapDispatchToProps
   };
 };
-
-export const createPartialAmountFormValidators = (
-  item,
-  lineItems,
-  maximum,
-  minimum = 1,
-  blockPartialPaymentOverpay = false
-) => {
-  const validators = [
-    required(),
-    validateSum(
-      numberGreaterThanOrEqualTo(minimum),
-      lineItems
-        .filter(lineItem => lineItem != item)
-        .reduce((acc, curr) => [...acc, curr.id], [])
-    )
-  ];
-  if (!!maximum) {
-    validators.push(
-      validateSum(
-        numberLessThanOrEqualTo(maximum),
-        lineItems
-          .filter(lineItem => lineItem != item)
-          .reduce((acc, curr) => [...acc, curr.id], [])
-      )
-    );
-  }
-  if (blockPartialPaymentOverpay) {
-    validators.push(numberLessThanOrEqualTo(item.amount));
-  }
-
-  return validators;
-};

package/src/components/molecules/partial-amount-form/index.js

@@ -1,11 +1,4 @@
 import PartialAmountForm from "./PartialAmountForm";
-import {
-  createPartialAmountFormState,
-  createPartialAmountFormValidators
-} from "./PartialAmountForm.state";
+import { createPartialAmountFormState } from "./PartialAmountForm.state";
 
-export {
-  PartialAmountForm,
-  createPartialAmountFormState,
-  createPartialAmountFormValidators
-};
+export { PartialAmountForm, createPartialAmountFormState };

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

@@ -13,6 +13,7 @@ import { displayCurrency } from "../../../util/general";
 import { themeComponent } from "../../../util/themeUtils";
 import CollapsibleSection from "../collapsible-section";
 
+import LoadingLine from "../../atoms/loading-line";
 import LabeledAmount from "../../atoms/labeled-amount";
 import LineItem from "../../atoms/line-item";
 import Title from "../../atoms/title";
@@ -120,22 +121,41 @@ const PaymentDetailsContent = ({
 );
 
 const LoadingDetails = () => (
-  <Box
-    padding="0"
-    background={GRECIAN_GREY}
-    borderRadius="4px"
-    minHeight="196px"
-  >
-    <Cover minHeight="196px" singleChild fillCenter>
-      <Center intrinsic>
-        <Box
-          padding="0"
-          extraStyles={`flex-grow: 1; display: flex; justify-content: center; align-items: center;`}
-        >
-          <Spinner size="100" centerSpinner />
-        </Box>
-      </Center>
-    </Cover>
+  <Box padding="0" minHeight="196px">
+    <Box
+      padding="0"
+      extraStyles={`position: absolute;
+        height: 238px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;`}
+    >
+      <Spinner size="100" centerSpinner />
+    </Box>
+    <Stack childGap="16px">
+      <Cluster nowrap justify="space-between" align="start">
+        <LoadingLine exactWidth="110px" height="27px" />
+        <LoadingLine exactWidth="60px" height="27px" />
+      </Cluster>
+      <SolidDivider />
+      <Box padding="0.5rem 0">
+        <Stack direction="row">
+          <LoadingLine exactWidth="80px" height="27px" />
+          <LoadingLine exactWidth="60px" height="27px" />
+        </Stack>
+        <Box padding="4px 0" />
+        <Stack direction="row">
+          <LoadingLine exactWidth="160px" height="27px" />
+          <LoadingLine exactWidth="50px" height="27px" />
+        </Stack>
+      </Box>
+      <SolidDivider />
+      <Stack direction="row">
+        <LoadingLine exactWidth="100px" height="30px" />
+        <LoadingLine exactWidth="70px" height="30px" />
+      </Stack>
+    </Stack>
   </Box>
 );