@thecb/components 10.3.0 → 10.4.0-beta.1

package/src/components/molecules/link-card/LinkCard.styled.js

@@ -4,6 +4,7 @@ import Paragraph from "../../atoms/paragraph";
 import Stack from "../../atoms/layouts/Stack";
 import { Box } from "../../atoms/layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { TRANSPARENT, GHOST_GREY } from "../../../constants/colors";
 
 export const Container = styled(Box)`
   display: flex;
@@ -22,13 +23,19 @@ export const Container = styled(Box)`
 
   &:hover,
   &:active {
-    cursor: pointer;
-    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
+    cursor: ${({ disabled }) => (disabled ? `default` : `pointer`)};
+    box-shadow: ${({ disabled }) => `
+      ${
+        disabled
+          ? `none`
+          : `0px 0px 0px 0px rgba(41, 42, 51, 0.1),
       0px 5px 11px 0px rgba(41, 42, 51, 0.1),
       0px 4px 19px 0px rgba(41, 42, 51, 0.09),
       0px 27px 26px 0px rgba(41, 42, 51, 0.05),
       0px 56px 31px 0px rgba(41, 42, 51, 0.01),
-      0px 80px 33px 0px rgba(41, 42, 51, 0);
+      0px 80px 33px 0px rgba(41, 42, 51, 0);`
+      }
+    `};
   }
 
   &:hover:not(:active) {
@@ -38,7 +45,7 @@ export const Container = styled(Box)`
   &:active {
     ${({ theme }) => `
       background-color: ${theme.activeBackgroundColor};
-      border: 1px solid ${theme.color};
+      border: 1px solid ${theme.borderColor};
     ;`}
   }
 `;

package/src/components/molecules/link-card/LinkCard.theme.js

@@ -2,13 +2,28 @@ import {
   CORNFLOWER_BLUE,
   LINK_WATER,
   MOON_RAKER,
-  ROYAL_BLUE_VIVID
+  ROYAL_BLUE_VIVID,
+  MANATEE_GREY,
+  GHOST_GREY,
+  TRANSPARENT
 } from "../../../constants/colors";
 
-const activeBackgroundColor = CORNFLOWER_BLUE;
-const backgroundColor = LINK_WATER;
-const borderColor = MOON_RAKER;
-const color = ROYAL_BLUE_VIVID;
+const activeBackgroundColor = {
+  primary: `${CORNFLOWER_BLUE}`,
+  disabled: `${TRANSPARENT}`
+};
+const backgroundColor = {
+  primary: `${LINK_WATER}`,
+  disabled: `${TRANSPARENT}`
+};
+const borderColor = {
+  primary: `${MOON_RAKER}`,
+  disabled: `${GHOST_GREY}`
+};
+const color = {
+  primary: `${ROYAL_BLUE_VIVID}`,
+  disabled: `${MANATEE_GREY}`
+};
 
 export const fallbackValues = {
   activeBackgroundColor,

package/src/components/molecules/obligation/Obligation.js

@@ -36,7 +36,8 @@ const Obligation = ({
   inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
-  inactiveLookupValue = ""
+  inactiveLookupValue = "",
+  isInCustomerManagement = false
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -137,6 +138,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              isInCustomerManagement={isInCustomerManagement}
             />
           )}
         </Stack>
@@ -160,6 +162,7 @@ const Obligation = ({
           description={description}
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
+          isInCustomerManagement={isInCustomerManagement}
         />
       )}
     </Box>
@@ -218,6 +221,7 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
+                  isInCustomerManagement={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -240,6 +244,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              isInCustomerManagement={isInCustomerManagement}
             />
           )}
         </Stack>

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

@@ -8,7 +8,7 @@ import { SEA_GREEN } from "../../../../constants/colors";
 import { ACH_METHOD, CC_METHOD } from "../../../../constants/general";
 import { fallbackValues } from "./AutopayModalModule.theme";
 import { themeComponent } from "../../../../util/themeUtils";
-import { titleCaseString } from "../../../../util/general";
+import { titleCaseString, noop } from "../../../../util/general";
 
 const AutopayModal = ({
   autoPayActive,
@@ -27,7 +27,8 @@ const AutopayModal = ({
   inactive,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
     const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
@@ -80,6 +81,7 @@ const AutopayModal = ({
       case "secondary": {
         return (
           <ButtonWithAction
+            disabled={isInCustomerManagement}
             text={
               autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
             }
@@ -99,10 +101,11 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
+            disabled={isInCustomerManagement}
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
-            variant="tertiary"
+            variant={isInCustomerManagement ? "disabledTertiary" : "tertiary"}
             action={() => {
-              toggleModal(true);
+              isInCustomerManagement ? noop : toggleModal(true);
             }}
             dataQa="Manage Autopay"
             extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
@@ -114,7 +117,7 @@ const AutopayModal = ({
           <Box
             padding="0"
             onClick={() => {
-              toggleModal(true);
+              isInCustomerManagement ? noop : toggleModal(true);
             }}
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
@@ -128,9 +131,13 @@ const AutopayModal = ({
               <Text
                 variant="pS"
                 onClick={() => toggleModal(true)}
-                onKeyPress={e => {
-                  e.key === "Enter" && toggleModal(true);
-                }}
+                onKeyPress={
+                  isInCustomerManagement
+                    ? noop
+                    : e => {
+                        e.key === "Enter" && toggleModal(true);
+                      }
+                }
                 tabIndex="0"
                 dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
@@ -148,8 +155,8 @@ const AutopayModal = ({
   };
   return (
     <Modal
-      showModal={() => toggleModal(true)}
-      hideModal={() => toggleModal(false)}
+      showModal={isInCustomerManagement ? noop : () => toggleModal(true)}
+      hideModal={isInCustomerManagement ? noop : () => toggleModal(false)}
       modalOpen={modalOpen}
       {...modalExtraProps}
     >

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 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";
+import { noop } from "../../../../util/general";
 
 const InactiveControlsModule = ({
   autoPayEnabled,
@@ -21,7 +21,8 @@ const InactiveControlsModule = ({
   actions,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   const { deleteObligationAssoc } = actions;
@@ -58,15 +59,17 @@ const InactiveControlsModule = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              isInCustomerManagement={isInCustomerManagement}
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
           <RemoveAccountModalModule
             agencyName={agencyName}
-            removeAccount={handleRemoveAccount}
+            removeAccount={isInCustomerManagement ? noop : handleRemoveAccount}
             accountType={configType === "ACCOUNT" ? "Account" : "Property"}
             isMobile={isMobile}
+            isInCustomerManagement={isInCustomerManagement}
           />
         </Box>
       </Cluster>

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

@@ -23,7 +23,8 @@ const PaymentDetailsActions = ({
   dueDate,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -94,7 +95,7 @@ const PaymentDetailsActions = ({
             extraStyles={isMobile && `flex-grow: 1;`}
           >
             <ButtonWithAction
-              variant="tertiary"
+              variant={isInCustomerManagement ? "disabledTertiary" : "tertiary"}
               text={
                 config.type === "ACCOUNT"
                   ? "Account Details"
@@ -111,7 +112,9 @@ const PaymentDetailsActions = ({
           >
             {autoPayAvailable && !autoPayEnabled ? (
               <ButtonWithAction
-                variant="tertiary"
+                variant={
+                  isInCustomerManagement ? "disabledTertiary" : "tertiary"
+                }
                 text={`Set Up ${planType}`}
                 action={() => {
                   setDetailedObligation(obligations, config, obligationAssocID);
@@ -119,6 +122,7 @@ const PaymentDetailsActions = ({
                 }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+                disabled={isInCustomerManagement}
               />
             ) : (
               <AutopayModalModule
@@ -137,6 +141,7 @@ const PaymentDetailsActions = ({
                 description={description}
                 subDescription={subDescription}
                 allowedPaymentInstruments={allowedPaymentInstruments}
+                isInCustomerManagement={isInCustomerManagement}
               />
             )}
           </Box>
@@ -144,10 +149,21 @@ const PaymentDetailsActions = ({
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
-                action={() => handleClick(obligations)}
+                action={
+                  isInCustomerManagement ? noop : () => handleClick(obligations)
+                }
                 text="Pay Now"
-                variant={isMobile ? "smallSecondary" : "secondary"}
+                variant={
+                  isMobile
+                    ? isInCustomerManagement
+                      ? "disabledSmallSecondary"
+                      : "smallSecondary"
+                    : isInCustomerManagement
+                    ? "disabledSecondary"
+                    : "secondary"
+                }
                 dataQa="Pay Now"
+                disabled={isInCustomerManagement}
               />
             </Box>
           )}
@@ -161,6 +177,7 @@ const PaymentDetailsActions = ({
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
+              disabled={isInCustomerManagement}
             />
           </Box>
         )}

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

@@ -8,7 +8,8 @@ const RemoveAccountModalModule = ({
   obligations = [],
   removeAccount,
   accountType,
-  isMobile
+  isMobile,
+  isInCustomerManagement = false
 }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const lastItem = [...obligations].pop();
@@ -48,12 +49,13 @@ const RemoveAccountModalModule = ({
       <Box padding="0" extraStyles={`flex-grow: 1;`}>
         <ButtonWithAction
           text="Remove"
-          variant="secondary"
-          action={() => setModalIsOpen(true)}
+          variant={isInCustomerManagement ? "disabledSecondary" : "secondary"}
+          action={isInCustomerManagement ? noop : () => setModalIsOpen(true)}
           dataQa="Remove Account"
           extraStyles={
             isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
           }
+          disabled={isInCustomerManagement}
         />
       </Box>
     </Modal>