@thecb/components 5.9.1 → 5.9.3

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

@@ -16,13 +16,16 @@ const AutopayModal = ({
   modalOpen,
   deactivatePaymentSchedule,
   navigateToSettings,
-  buttonLinkType,
+  controlType = "tertiary",
   isMobile,
   themeValues,
   isPaymentPlan,
-  nextAutopayDate
+  nextAutopayDate,
+  dueDate,
+  inactive
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+  const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive
       ? `Deactivate ${planType}`
@@ -30,7 +33,11 @@ const AutopayModal = ({
     modalBodyText: autoPayActive
       ? `Are you sure you want to deactivate ${
           isPaymentPlan ? "your payment plan" : "autopay"
-        }? You will need to manually make your next payment.`
+        }? ${
+          !inactive && nextDate
+            ? `Your next payment will be due on ${nextDate}.`
+            : ""
+        }`
       : `To set up ${
           isPaymentPlan ? "a payment plan" : "autopay"
         } you must save a payment method and address in your profile. Do you want to save these now?`,
@@ -62,6 +69,75 @@ const AutopayModal = ({
   const defaultStyles = `
     .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
      `;
+  const renderAutoPayControl = () => {
+    switch (controlType) {
+      case "secondary": {
+        return (
+          <ButtonWithAction
+            text={autoPayActive ? `Turn off ${planType}` : `Set Up ${planType}`}
+            variant="secondary"
+            action={() => {
+              toggleModal(true);
+            }}
+            dataQa="Turn off Autopay"
+            extraStyles={
+              isMobile
+                ? `flex-grow: 1; width: 100%; margin: 0;`
+                : `flex-grow: 1; min-width: 165px;`
+            }
+          />
+        );
+      }
+      case "tertiary": {
+        return (
+          <ButtonWithAction
+            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+            variant="tertiary"
+            action={() => {
+              toggleModal(true);
+            }}
+            dataQa="Manage Autopay"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        );
+      }
+      case "link": {
+        return (
+          <Box
+            padding="0"
+            onClick={() => {
+              toggleModal(true);
+            }}
+            hoverStyles={hoverStyles}
+            activeStyles={activeStyles}
+            extraStyles={defaultStyles}
+          >
+            <Cluster
+              justify={isMobile ? "flex-start" : "flex-end"}
+              align="center"
+            >
+              <AutopayOnIcon />
+              <Text
+                variant="pS"
+                onClick={() => toggleModal(true)}
+                onKeyPress={e => {
+                  e.key === "Enter" && toggleModal(true);
+                }}
+                tabIndex="0"
+                dataQa={`${planType} On`}
+                color={SEA_GREEN}
+                weight={themeValues.fontWeight}
+                hoverStyles={themeValues.modalLinkHoverFocus}
+                extraStyles={`padding-left: 0.25rem;`}
+              >
+                {`${planType} ${nextAutopayDate}`}
+              </Text>
+            </Cluster>
+          </Box>
+        );
+      }
+    }
+  };
   return (
     <Modal
       showModal={() => toggleModal(true)}
@@ -69,50 +145,7 @@ const AutopayModal = ({
       modalOpen={modalOpen}
       {...modalExtraProps}
     >
-      {buttonLinkType ? (
-        <ButtonWithAction
-          text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
-          variant="tertiary"
-          action={() => {
-            toggleModal(true);
-          }}
-          dataQa="Manage Autopay"
-          extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-        />
-      ) : (
-        <Box
-          padding="0"
-          onClick={() => {
-            toggleModal(true);
-          }}
-          hoverStyles={hoverStyles}
-          activeStyles={activeStyles}
-          extraStyles={defaultStyles}
-        >
-          <Cluster
-            justify={isMobile ? "flex-start" : "flex-end"}
-            align="center"
-          >
-            <AutopayOnIcon />
-            <Text
-              variant="pS"
-              onClick={() => toggleModal(true)}
-              onKeyPress={e => {
-                console.log({ e });
-                e.key === "Enter" && toggleModal(true);
-              }}
-              tabIndex="0"
-              dataQa={`${planType} On`}
-              color={SEA_GREEN}
-              weight={themeValues.fontWeight}
-              hoverStyles={themeValues.modalLinkHoverFocus}
-              extraStyles={`padding-left: 0.25rem;`}
-            >
-              {`${planType} ${nextAutopayDate}`}
-            </Text>
-          </Cluster>
-        </Box>
-      )}
+      {renderAutoPayControl()}
     </Modal>
   );
 };

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

@@ -3,6 +3,7 @@ import { GHOST_GREY } from "../../../../constants/colors";
 import ButtonWithAction from "../../../atoms/button-with-action";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { AutopayModalModule } from "./AutopayModalModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 const InactiveControlsModule = ({
   autoPayEnabled,
@@ -14,18 +15,26 @@ const InactiveControlsModule = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
+  dueDate,
+  agencyName,
+  configType,
   actions
 }) => {
   const [modalOpen, toggleModal] = useState(false);
-  const { removeAccount } = actions;
-  const handleRemoveAccount = () => removeAccount(obligationAssocID);
+  const { deleteObligationAssoc } = actions;
+  const handleRemoveAccount = () => deleteObligationAssoc(obligationAssocID);
   return (
     <Box
       padding={isMobile ? "18px 0 0 0" : "0"}
       border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
       borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
     >
-      <Cluster childGap={isMobile ? `8px` : `18px`}>
+      <Cluster
+        childGap={autoPayEnabled ? `8px` : "0"}
+        nowrap
+        justify={isMobile && autoPayEnabled && "center"}
+        align={isMobile && autoPayEnabled && "center"}
+      >
         {autoPayEnabled && (
           <Box padding="0" extraStyles={`flex-grow: 1;`}>
             <AutopayModalModule
@@ -35,22 +44,23 @@ const InactiveControlsModule = ({
               modalOpen={modalOpen}
               navigateToSettings={navigateToSettings}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
-              buttonLinkType
               isMobile={isMobile}
               paymentPlanSchedule={paymentPlanSchedule}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
+              dueDate={dueDate}
+              controlType="secondary"
+              inactive
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
-          <ButtonWithAction
-            variant="tertiary"
-            text="Remove"
-            action={handleRemoveAccount}
-            dataQa="Remove Account"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          <RemoveAccountModalModule
+            agencyName={agencyName}
+            removeAccount={handleRemoveAccount}
+            accountType={configType === "ACCOUNT" ? "Account" : "Property"}
+            isMobile={isMobile}
           />
         </Box>
       </Cluster>

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

@@ -28,9 +28,9 @@ const InactiveTitleModule = ({ title, subtitle, autoPayEnabled }) => (
         Unable to load account details
       </Detail>
       <Detail variant="extraSmall" as="p" color={BLACK}>
-        {`This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.${
+        {`This may mean that the balance has been paid, or there was an error loading it.${
           autoPayEnabled
-            ? " You may disable Autopay for this account by pressing the Turn off Autopay button."
+            ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button."
             : ""
         }`}
       </Detail>

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

@@ -18,7 +18,9 @@ const PaymentDetailsActions = ({
   autoPaySchedule,
   paymentPlanSchedule,
   isPaymentPlan,
-  nextAutopayDate
+  nextAutopayDate,
+  obligationAssocID,
+  dueDate
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -38,7 +40,7 @@ const PaymentDetailsActions = ({
     createPaymentFromProfile(obligations, config);
   };
   const handleDetailsClick = () => {
-    setDetailedObligation(obligations, config);
+    setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
   return (
@@ -120,26 +122,23 @@ const PaymentDetailsActions = ({
                 modalOpen={modalOpen}
                 navigateToSettings={navigateToSettings}
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
-                buttonLinkType
+                controlType="tertiary"
                 isMobile={isMobile}
                 paymentPlanSchedule={paymentPlanSchedule}
                 isPaymentPlan={isPaymentPlan}
                 nextAutopayDate={nextAutopayDate}
+                dueDate={dueDate}
               />
             )}
           </Box>
           {!isMobile && (
-            <Box
-              padding={isMobile ? "0 0 0 8px" : "0"}
-              extraStyles={isMobile && `flex-grow: 1;`}
-            >
+            <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
                 action={() => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
-                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
               />
             </Box>
           )}
@@ -152,7 +151,7 @@ const PaymentDetailsActions = ({
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
-              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
             />
           </Box>
         )}

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import Modal from "../../modal";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { Box } from "../../../atoms/layouts";
+
+const RemoveAccountModalModule = ({
+  agencyName,
+  obligations = [],
+  removeAccount,
+  accountType,
+  isMobile
+}) => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const lastItem = [...obligations].pop();
+  const accounts = obligations.length
+    ? obligations.reduce((acc, curr) => {
+        const account = curr.details.description;
+        const formattedAccount =
+          curr !== lastItem ? `${account} and ` : `${account}`;
+        return formattedAccount === agencyName
+          ? agencyName
+          : acc + formattedAccount;
+      }, `${agencyName} - `)
+    : "";
+  const identifier =
+    accountType === "Account" && obligations.length > 1
+      ? "accounts"
+      : accountType === "Property" && obligations.length > 1
+      ? "properties"
+      : accountType.toLowerCase();
+
+  return (
+    <Modal
+      showModal={() => setModalIsOpen(true)}
+      hideModal={() => setModalIsOpen(false)}
+      modalOpen={modalIsOpen}
+      modalHeaderText={`Remove ${accountType}`}
+      modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts} from your profile? Any autopay scheduled against ${
+        obligations.length > 1 ? "them" : "it"
+      } will be deactivated.`}
+      continueButtonText="Remove"
+      continueAction={() => {
+        removeAccount();
+        setModalIsOpen(false);
+      }}
+      useDangerButton
+    >
+      <Box padding="0" extraStyles={`flex-grow: 1;`}>
+        <ButtonWithAction
+          text="Remove"
+          variant="secondary"
+          action={() => setModalIsOpen(true)}
+          dataQa="Remove Account"
+          extraStyles={
+            isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
+          }
+        />
+      </Box>
+    </Modal>
+  );
+};
+export default RemoveAccountModalModule;

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

@@ -4,6 +4,7 @@ import AmountModule from "./AmountModule";
 import PaymentDetailsActions from "./PaymentDetailsActions";
 import InactiveControlsModule from "./InactiveControlsModule";
 import InactiveTitleModule from "./InactiveTitleModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 export {
   IconModule,
@@ -11,5 +12,6 @@ export {
   AmountModule,
   PaymentDetailsActions,
   InactiveControlsModule,
-  InactiveTitleModule
+  InactiveTitleModule,
+  RemoveAccountModalModule
 };

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -4,7 +4,8 @@ import {
   BRIGHT_GREY,
   GHOST_GREY,
   ATHENS_GREY,
-  TRANSPARENT
+  TRANSPARENT,
+  COOL_GREY_05
 } from "../../../constants/colors";
 import Text from "../../atoms/text";
 import { InternalLink } from "../../atoms/link";
@@ -18,7 +19,7 @@ import { fallbackValues } from "./TabSidebar.theme";
 const TabSidebar = ({ links, isMobile, themeValues }) => (
   <Box
     padding="0"
-    background={ATHENS_GREY}
+    background={COOL_GREY_05}
     minHeight="100%"
     role="region"
     aria-label="Profile tabs"

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -51,6 +51,7 @@ const WorkflowTile = ({
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}
           linkExtraStyles={`justify-content: center;`}
+          dataQa={slug}
         />
       </Box>
     </Stack>

package/src/components/templates/center-single/CenterSingle.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterSingle = ({
   header,
@@ -23,7 +24,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={isMobile && !centeredMobileContent}>

package/src/components/templates/center-stack/CenterStack.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover, Stack } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterStack = ({
   header,
@@ -23,7 +24,7 @@ const CenterStack = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover>

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
 
 const CenterSingle = ({
   header,
@@ -22,7 +23,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover childGap="0" fillCenter>

package/src/components/templates/sidebar-single-content/SidebarSingleContent.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover, Sidebar } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
 
 const SidebarSingleContent = ({
   header,
@@ -28,7 +29,7 @@ const SidebarSingleContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={!sidebarVerticalCenter}>

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "../templates.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import withWindowResize from "../../withWindowSize";
 import { Box, Center, Cover, Sidebar, Stack } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
 
 const SidebarStackContent = ({
   header,
@@ -29,7 +30,7 @@ const SidebarStackContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={themeValues.pageBackground}
+      background={COOL_GREY_05}
       key="page-bg"
       extraStyles="flex-grow: 1;"
     >

package/src/components/templates/templates.theme.js

@@ -1,4 +1,4 @@
-const pageBackground = "#F6F6F9";
+const pageBackground = "#FBFCFD";
 
 export const fallbackValues = {
   pageBackground

package/src/constants/colors.js

@@ -15,25 +15,26 @@ const AQUA_HAZE_WHITE = "#F7F9FA";
 const BLEACH_WHITE = "#FEF4d7";
 const CATSKILL_WHITE = "#EAF2F6";
 // GREY
-const ATHENS_GREY = "#F6F6F9";
+const ATHENS_GREY = "#F6F6F9"; // CBS-100
 const ALTO_GREY = "#d1d1d1";
 const SILVER_GREY = "#cdcdcd";
 const PEWTER_GREY = "#DFE1E4";
 const ASH_GREY = "#979797";
 const IRON_GREY = "#d5d8dc";
-const GHOST_GREY = "#CACED8";
+const GHOST_GREY = "#CACED8"; // CBS-300
 const DUSTY_GREY = "#9B9B9B";
 const REGENT_GREY = "#959EA7";
-const STORM_GREY = "#6D717E";
+const STORM_GREY = "#6D717E"; // CBS-700
 const TROUT_GREY = "#515660";
 const MINESHAFT_GREY = "#333333";
 const SOOT_GREY = "#999999";
 const FIREFLY_GREY = "#091325";
-const BRIGHT_GREY = "#3B414D";
-const CHARADE_GREY = "#292A33";
-const GRECIAN_GREY = "#E5E7EC";
+const BRIGHT_GREY = "#3B414D"; // CBS-800
+const CHARADE_GREY = "#292A33"; // CBS-900
+const GRECIAN_GREY = "#E5E7EC"; // CBS-200
 const BLACK_SQUEEZE = "#EAF2F7";
-const GREY_CHATEAU = "#959CA8";
+const GREY_CHATEAU = "#959CA8"; // CBS-500
+const COOL_GREY_05 = "#fbfcfd"; // CBS-050
 // BLUE
 const CLOUDBURST_BLUE = "#26395c";
 const ZODIAC_BLUE = "#14284b";
@@ -67,7 +68,7 @@ const MUSTARD_YELLOW = "#FFD459";
 const FIRE_YELLOW = "#B34A00";
 // ORANGE
 const CARROT_ORANGE = "#ED9620";
-const ZEST_ORANGE = "#F47820";
+const ZEST_ORANGE = "#B84A00";
 const APRICOT_ORANGE = "#FFE8D8";
 // RED
 const RED = "#FF0000";
@@ -138,6 +139,7 @@ export {
   BRIGHT_GREY,
   CHARADE_GREY,
   GRECIAN_GREY,
+  COOL_GREY_05,
   BLACK_SQUEEZE,
   GREY_CHATEAU,
   CLOUDBURST_BLUE,