@thecb/components 5.9.0-beta.7 → 5.9.1

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

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

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

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

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

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

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

@@ -51,7 +51,6 @@ 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,7 +4,6 @@ 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,
@@ -24,7 +23,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={isMobile && !centeredMobileContent}>

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

@@ -4,7 +4,6 @@ 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,
@@ -24,7 +23,7 @@ const CenterStack = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover>

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

@@ -4,7 +4,6 @@ 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 +22,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover childGap="0" fillCenter>

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

@@ -4,7 +4,6 @@ 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,
@@ -29,7 +28,7 @@ const SidebarSingleContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       extraStyles="flex-grow: 1;"
     >
       <Cover centerOverride={!sidebarVerticalCenter}>

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

@@ -4,7 +4,6 @@ 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,
@@ -30,7 +29,7 @@ const SidebarStackContent = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={themeValues.pageBackground}
       key="page-bg"
       extraStyles="flex-grow: 1;"
     >

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

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

package/src/constants/colors.js

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

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

@@ -1,62 +0,0 @@
-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;