@thecb/components 3.4.1 → 3.5.1

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/timeout/Timeout.js

@@ -0,0 +1,46 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+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";
+import withWindowSize from "../../withWindowSize";
+
+const Timeout = ({ onLogout }) => {
+  const { isMobile } = useContext(ThemeContext);
+  return (
+    <Cover>
+      <Center intrinsic>
+        <Box padding="0" maxWidth={isMobile ? "100%" : "500px"}>
+          <Stack childGap="32px" justify="center">
+            <Box padding={isMobile ? "1rem" : "0"}>
+              <TimeoutImage />
+            </Box>
+            <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 withWindowSize(Timeout);

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

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