@thecb/components 3.4.0 → 3.5.0

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -1,10 +1,24 @@
 import React, { useState } from "react";
 import { Box, Cluster } from "../../../atoms/layouts";
 import ButtonWithAction from "../../../atoms/button-with-action";
+import { AutopayModalModule } from "./AutopayModalModule";
 import { GHOST_GREY } from "../../../../constants/colors";
+import AmountModule from "./AmountModule";
 
-const PaymentDetailsActions = ({ isMobile, obligations, config, actions }) => {
+const PaymentDetailsActions = ({
+  isMobile,
+  obligations,
+  config,
+  actions,
+  autoPayEnabled,
+  autoPayAvailable,
+  handleAutopayAction,
+  deactivatePaymentSchedule,
+  navigateToSettings,
+  autoPaySchedule
+}) => {
   const [isLoading, setIsLoading] = useState(false);
+  const [modalOpen, toggleModal] = useState(false);
   const { obligationSlug } = config;
   const { createPaymentFromProfile, setDetailedObligation } = actions;
   const detailsSlug =
@@ -20,46 +34,111 @@ const PaymentDetailsActions = ({ isMobile, obligations, config, actions }) => {
   };
   return (
     <Box
-      padding="16px 0 0"
+      padding={isMobile ? "0" : "16px 0 0"}
       minWidth="100%"
       borderSize="1px"
       borderColor={GHOST_GREY}
       borderWidthOverride="1px 0 0 0"
       key={`${obligations[0].id}-actions`}
     >
-      <Cluster
-        justify={isMobile ? "center" : "flex-end"}
-        align="center"
-        childGap="0"
-      >
+      {isMobile && (
         <Box
-          padding={isMobile ? "0 8px 0 0" : "8px"}
-          extraStyles={isMobile && `flex-grow: 1;`}
+          padding="16px 24px"
+          borderSize="1px"
+          borderColor={GHOST_GREY}
+          borderWidthOverride="0 0 1px 0"
         >
-          <ButtonWithAction
-            variant={isMobile ? "smallSecondary" : "secondary"}
-            text={
-              config.type === "ACCOUNT" ? "Account Details" : "Property Details"
-            }
-            action={handleDetailsClick}
-            dataQa="Account Details"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-          />
+          <Cluster justify="space-between" align="center" nowrap>
+            <Box padding="0" width="100%">
+              <AmountModule
+                totalAmountDue={obligations.reduce(
+                  (acc, curr) => acc + curr.amountDue,
+                  0
+                )}
+                autoPayEnabled={autoPayEnabled}
+                isMobile={isMobile}
+                deactivatePaymentSchedule={deactivatePaymentSchedule}
+                navigateToSettings={navigateToSettings}
+                autoPaySchedule={autoPaySchedule}
+              />
+            </Box>
+            <Box padding="0" width="100%">
+              <ButtonWithAction
+                isLoading={isLoading}
+                action={() => handleClick(obligations)}
+                text="Pay Now"
+                variant={isMobile ? "smallSecondary" : "secondary"}
+                dataQa="Pay Now"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              />
+            </Box>
+          </Cluster>
         </Box>
-        <Box
-          padding={isMobile ? "0 0 0 8px" : "8px"}
-          extraStyles={isMobile && `flex-grow: 1;`}
+      )}
+      <Box padding={isMobile ? "16px" : "0"}>
+        <Cluster
+          justify={isMobile ? "center" : "flex-end"}
+          align="center"
+          childGap="0"
         >
-          <ButtonWithAction
-            isLoading={isLoading}
-            action={() => handleClick(obligations)}
-            text="Make Payment"
-            variant={isMobile ? "smallPrimary" : "primary"}
-            dataQa="Make Payment"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-          />
-        </Box>
-      </Cluster>
+          <Box
+            padding={isMobile ? "0 8px 0 0" : "8px"}
+            extraStyles={isMobile && `flex-grow: 1;`}
+          >
+            <ButtonWithAction
+              variant="tertiary"
+              text={
+                config.type === "ACCOUNT"
+                  ? "Account Details"
+                  : "Property Details"
+              }
+              action={handleDetailsClick}
+              dataQa="Account Details"
+              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            />
+          </Box>
+          <Box
+            padding={isMobile ? "0 8px 0 0" : "8px"}
+            extraStyles={isMobile && `flex-grow: 1;`}
+          >
+            {autoPayAvailable && !autoPayEnabled ? (
+              <ButtonWithAction
+                variant="tertiary"
+                text="Set Up Autopay"
+                action={handleAutopayAction}
+                dataQa="Set Up Autopay"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              />
+            ) : (
+              <AutopayModalModule
+                autoPayActive={autoPayEnabled}
+                autoPaySchedule={autoPaySchedule}
+                toggleModal={toggleModal}
+                modalOpen={modalOpen}
+                navigateToSettings={navigateToSettings}
+                deactivatePaymentSchedule={deactivatePaymentSchedule}
+                buttonLinkType
+                isMobile={isMobile}
+              />
+            )}
+          </Box>
+          {!isMobile && (
+            <Box
+              padding={isMobile ? "0 0 0 8px" : "8px"}
+              extraStyles={isMobile && `flex-grow: 1;`}
+            >
+              <ButtonWithAction
+                isLoading={isLoading}
+                action={() => handleClick(obligations)}
+                text="Pay Now"
+                variant={isMobile ? "smallSecondary" : "secondary"}
+                dataQa="Pay Now"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              />
+            </Box>
+          )}
+        </Cluster>
+      </Box>
     </Box>
   );
 };

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

@@ -1,5 +1,9 @@
 import React from "react";
-import { required, numberGreaterThan, numberLessThan } from "redux-freeform";
+import {
+  required,
+  numberGreaterThan,
+  numberLessThanOrEqualTo
+} from "redux-freeform";
 import { displayCurrency } from "../../../util/general";
 import Text from "../../atoms/text";
 import {
@@ -28,7 +32,7 @@ const PartialAmountForm = ({
     [numberGreaterThan.error]: `Your total payment must be greater than ${displayCurrency(
       minimum
     )}`,
-    [numberLessThan.error]: `Your total payment must be less than ${displayCurrency(
+    [numberLessThanOrEqualTo.error]: `Your total payment must be less than ${displayCurrency(
       maximum
     )}`
   };

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

@@ -4,7 +4,7 @@ import {
   onlyNaturals,
   validateSum,
   numberGreaterThan,
-  numberLessThan
+  numberLessThanOrEqualTo
 } from "redux-freeform";
 
 export const createPartialAmountFormState = (
@@ -25,7 +25,7 @@ export const createPartialAmountFormState = (
     if (!!maximum) {
       validators.push(
         validateSum(
-          numberLessThan(maximum),
+          numberLessThanOrEqualTo(maximum),
           lineItems
             .filter(lineItem => lineItem != item)
             .reduce((acc, curr) => [...acc, curr.id], [])

package/src/components/molecules/timeout/Timeout.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Stack, Center, Cover } from "../../atoms/layouts";
+import { TimeoutImage } from "../../atoms/icons";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Heading from "../../atoms/heading";
+import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
+import Paragraph from "../../atoms/paragraph";
+
+const Timeout = ({ onLogout }) => (
+  <Cover>
+    <Center intrinsic>
+      <Box padding="0" maxWidth="500px">
+        <Stack childGap="32px" justify="center">
+          <Center intrinsic>
+            <TimeoutImage />
+          </Center>
+          <Box padding="0">
+            <Heading textAlign="center" weight={FONT_WEIGHT_BOLD}>
+              Request Timed Out
+            </Heading>
+            <Paragraph variant="pL" extraStyles={`text-align: center;`}>
+              That was taking longer than we expected and your request timed
+              out. Please log out, log back in, and then try again.
+            </Paragraph>
+          </Box>
+          <Center intrinsic>
+            <Box padding="0">
+              <ButtonWithAction
+                variant="primary"
+                text="Log out"
+                action={onLogout}
+              />
+            </Box>
+          </Center>
+        </Stack>
+      </Box>
+    </Center>
+  </Cover>
+);
+
+export default Timeout;

package/src/components/molecules/timeout/index.js

@@ -0,0 +1,3 @@
+import Timeout from "./Timeout";
+
+export default Timeout;