@thecb/components 10.4.0-beta.1 → 10.4.0-beta.11

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

@@ -5,6 +5,7 @@ import Text from "../../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency } from "../../../../util/general";
 import { AutopayModalModule } from "./AutopayModalModule";
+import { noop } from "../../../../util/general";
 
 const AmountModule = ({
   totalAmountDue,
@@ -18,7 +19,8 @@ const AmountModule = ({
   nextAutopayDate,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  disableActions = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -49,6 +51,16 @@ const AmountModule = ({
             description={description}
             subDescription={subDescription}
             allowedPaymentInstruments={allowedPaymentInstruments}
+            disableActions={disableActions}
+            action={() => (disableActions ? noop : toggleModal(true))}
+            onClick={() => (disableActions ? noop : toggleModal(true))}
+            onKeyPress={
+              disableActions
+                ? () => noop
+                : e => {
+                    e.key === "Enter" && toggleModal(true);
+                  }
+            }
           />
         )}
       </Stack>

package/src/components/molecules/obligation/modules/AmountModule.stories.js

@@ -17,6 +17,9 @@ export const amountModule = () => (
     autoPaySchedule={{}}
     paymentPlanSchedule={{}}
     isPaymentPlan={boolean("isPaymentPlan", false, groupId)}
+    disableActions={boolean("disableActions", false, groupId)}
+    subDescription="Amount Module Subdescription"
+    description="Amount Module Description"
   />
 );
 

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

@@ -28,7 +28,10 @@ const AutopayModal = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  isInCustomerManagement = false
+  disableActions = false,
+  action,
+  onClick,
+  onKeyPress
 }) => {
   const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
     const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
@@ -81,13 +84,12 @@ const AutopayModal = ({
       case "secondary": {
         return (
           <ButtonWithAction
-            disabled={isInCustomerManagement}
             text={
               autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
             }
             variant="secondary"
             action={() => {
-              toggleModal(true);
+              action || toggleModal(true);
             }}
             dataQa="Turn off Autopay"
             extraStyles={
@@ -95,20 +97,21 @@ const AutopayModal = ({
                 ? `flex-grow: 1; width: 100%; margin: 0;`
                 : `flex-grow: 1; min-width: 165px;`
             }
+            disabled={disableActions}
           />
         );
       }
       case "tertiary": {
         return (
           <ButtonWithAction
-            disabled={isInCustomerManagement}
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
-            variant={isInCustomerManagement ? "disabledTertiary" : "tertiary"}
+            variant="tertiary"
             action={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
+              action || toggleModal(true);
             }}
             dataQa="Manage Autopay"
             extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            disabled={disableActions}
           />
         );
       }
@@ -117,7 +120,7 @@ const AutopayModal = ({
           <Box
             padding="0"
             onClick={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
+              onClick || toggleModal(true);
             }}
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
@@ -130,13 +133,12 @@ const AutopayModal = ({
               <AutopayOnIcon />
               <Text
                 variant="pS"
-                onClick={() => toggleModal(true)}
+                onClick={() => onClick || toggleModal(true)}
                 onKeyPress={
-                  isInCustomerManagement
-                    ? noop
-                    : e => {
-                        e.key === "Enter" && toggleModal(true);
-                      }
+                  onKeyPress ||
+                  (e => {
+                    e.key === "Enter" && toggleModal(true);
+                  })
                 }
                 tabIndex="0"
                 dataQa={`${shortPlan} On`}
@@ -144,6 +146,7 @@ const AutopayModal = ({
                 weight={themeValues.fontWeight}
                 hoverStyles={themeValues.modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
+                disabled={disableActions}
               >
                 {`${shortPlan} ${nextAutopayDate}`}
               </Text>
@@ -155,8 +158,8 @@ const AutopayModal = ({
   };
   return (
     <Modal
-      showModal={isInCustomerManagement ? noop : () => toggleModal(true)}
-      hideModal={isInCustomerManagement ? noop : () => toggleModal(false)}
+      showModal={disableActions ? noop : () => toggleModal(true)}
+      hideModal={disableActions ? noop : () => toggleModal(false)}
       modalOpen={modalOpen}
       {...modalExtraProps}
     >

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

@@ -22,7 +22,7 @@ const InactiveControlsModule = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   const { deleteObligationAssoc } = actions;
@@ -59,17 +59,26 @@ const InactiveControlsModule = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
+              disableActions={disableActions}
+              action={() => (disableActions ? noop : toggleModal(true))}
+              onClick={() => (disableActions ? noop : toggleModal(true))}
+              onKeyPress={
+                disableActions
+                  ? () => noop
+                  : e => {
+                      e.key === "Enter" && toggleModal(true);
+                    }
+              }
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
           <RemoveAccountModalModule
             agencyName={agencyName}
-            removeAccount={isInCustomerManagement ? noop : handleRemoveAccount}
+            removeAccount={disableActions ? noop : handleRemoveAccount}
             accountType={configType === "ACCOUNT" ? "Account" : "Property"}
             isMobile={isMobile}
-            isInCustomerManagement={isInCustomerManagement}
+            disableActions={disableActions}
           />
         </Box>
       </Cluster>

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

@@ -4,6 +4,7 @@ import ButtonWithAction from "../../../atoms/button-with-action";
 import { AutopayModalModule } from "./AutopayModalModule";
 import { GHOST_GREY } from "../../../../constants/colors";
 import AmountModule from "./AmountModule";
+import { noop } from "../../../../util/general";
 
 const PaymentDetailsActions = ({
   isMobile,
@@ -24,7 +25,7 @@ const PaymentDetailsActions = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -80,6 +81,7 @@ const PaymentDetailsActions = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              disableActions={disableActions}
             />
           </Cluster>
         </Box>
@@ -95,13 +97,13 @@ const PaymentDetailsActions = ({
             extraStyles={isMobile && `flex-grow: 1;`}
           >
             <ButtonWithAction
-              variant={isInCustomerManagement ? "disabledTertiary" : "tertiary"}
+              variant="tertiary"
               text={
                 config.type === "ACCOUNT"
                   ? "Account Details"
                   : "Property Details"
               }
-              action={handleDetailsClick}
+              action={disableActions ? noop : handleDetailsClick}
               dataQa="Account Details"
               extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
             />
@@ -112,17 +114,21 @@ const PaymentDetailsActions = ({
           >
             {autoPayAvailable && !autoPayEnabled ? (
               <ButtonWithAction
-                variant={
-                  isInCustomerManagement ? "disabledTertiary" : "tertiary"
-                }
+                variant="tertiary"
                 text={`Set Up ${planType}`}
                 action={() => {
-                  setDetailedObligation(obligations, config, obligationAssocID);
-                  handleAutopayAction();
+                  if (!disableActions) {
+                    setDetailedObligation(
+                      obligations,
+                      config,
+                      obligationAssocID
+                    );
+                    handleAutopayAction();
+                  }
                 }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-                disabled={isInCustomerManagement}
+                disabled={disableActions}
               />
             ) : (
               <AutopayModalModule
@@ -141,7 +147,16 @@ const PaymentDetailsActions = ({
                 description={description}
                 subDescription={subDescription}
                 allowedPaymentInstruments={allowedPaymentInstruments}
-                isInCustomerManagement={isInCustomerManagement}
+                disableActions={disableActions}
+                action={() => (disableActions ? noop : toggleModal(true))}
+                onClick={() => (disableActions ? noop : toggleModal(true))}
+                onKeyPress={
+                  disableActions
+                    ? () => noop
+                    : e => {
+                        e.key === "Enter" && toggleModal(true);
+                      }
+                }
               />
             )}
           </Box>
@@ -149,21 +164,11 @@ const PaymentDetailsActions = ({
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
-                action={
-                  isInCustomerManagement ? noop : () => handleClick(obligations)
-                }
+                action={disableActions ? noop : () => handleClick(obligations)}
                 text="Pay Now"
-                variant={
-                  isMobile
-                    ? isInCustomerManagement
-                      ? "disabledSmallSecondary"
-                      : "smallSecondary"
-                    : isInCustomerManagement
-                    ? "disabledSecondary"
-                    : "secondary"
-                }
+                variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
-                disabled={isInCustomerManagement}
+                disabled={disableActions}
               />
             </Box>
           )}
@@ -172,12 +177,14 @@ const PaymentDetailsActions = ({
           <Box padding="8px 0 0" width="100%">
             <ButtonWithAction
               isLoading={isLoading}
-              action={() => handleClick(obligations)}
+              action={() =>
+                disableActions ? noop : () => handleClick(obligations)
+              }
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
-              disabled={isInCustomerManagement}
+              disabled={disableActions}
             />
           </Box>
         )}

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

@@ -9,7 +9,7 @@ const RemoveAccountModalModule = ({
   removeAccount,
   accountType,
   isMobile,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const lastItem = [...obligations].pop();
@@ -32,8 +32,8 @@ const RemoveAccountModalModule = ({
 
   return (
     <Modal
-      showModal={() => setModalIsOpen(true)}
-      hideModal={() => setModalIsOpen(false)}
+      showModal={disableActions ? noop : () => setModalIsOpen(true)}
+      hideModal={disableActions ? noop : () => setModalIsOpen(false)}
       modalOpen={modalIsOpen}
       modalHeaderText={`Remove ${accountType}`}
       modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts}? Any autopay scheduled against ${
@@ -41,21 +41,23 @@ const RemoveAccountModalModule = ({
       } will be deactivated.`}
       continueButtonText="Remove"
       continueAction={() => {
-        removeAccount();
-        setModalIsOpen(false);
+        if (!disableActions) {
+          removeAccount();
+          setModalIsOpen(false);
+        }
       }}
       useDangerButton
     >
       <Box padding="0" extraStyles={`flex-grow: 1;`}>
         <ButtonWithAction
           text="Remove"
-          variant={isInCustomerManagement ? "disabledSecondary" : "secondary"}
-          action={isInCustomerManagement ? noop : () => setModalIsOpen(true)}
+          variant="secondary"
+          action={disableActions ? noop : () => setModalIsOpen(true)}
           dataQa="Remove Account"
           extraStyles={
             isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
           }
-          disabled={isInCustomerManagement}
+          disabled={disableActions}
         />
       </Box>
     </Modal>