@thecb/components 10.4.0-beta.8 → 10.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.4.0-beta.8",
+  "version": "10.4.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -135,7 +135,7 @@ const ButtonWithAction = forwardRef(
         disabledStyles={disabledStyles}
         aria-disabled={disabled}
         as="button"
-        onClick={isLoading || disabled ? undefined : action}
+        onClick={isLoading || disabled ? noop : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}

package/src/components/atoms/layouts/Box.js

@@ -45,7 +45,6 @@ const Box = forwardRef(
       extraStyles,
       srOnly = false,
       dataQa,
-      disabled = false,
       children,
       ...rest
     },

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

@@ -41,6 +41,8 @@ const LinkCard = ({
       onClick={disabled ? noop : onClick}
       aria-disabled={disabled}
       isDisabled={disabled}
+      role="group"
+      aria-label={`${title}, ${subtitle}`}
     >
       <Stack
         childGap={0}

package/src/components/molecules/modal/Modal.js

@@ -46,7 +46,8 @@ const Modal = ({
   buttonExtraStyles,
   children,
   dataQa = null,
-  initialFocusSelector = ""
+  initialFocusSelector = "",
+  blurUnderlay = true
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
@@ -66,7 +67,10 @@ const Modal = ({
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
-            alignItems: "center"
+            alignItems: "center",
+            background: "rgba(41, 42, 51, 0.45)",
+            backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+            WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
           }}
           dialogStyle={{
             width: customWidth || "615px",

package/src/components/molecules/modal/Modal.stories.js

@@ -35,6 +35,7 @@ export const modal = () => (
     defaultWrapper={boolean("defaultWrapper", true, groupId)}
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     maxHeight={text("maxHeight", null, groupId)}
+    blurUnderlay={boolean("blurUnderlay", true, groupId)}
   />
 );
 
@@ -80,6 +81,7 @@ export const modalWithoutButtons = () => {
       defaultWrapper={boolean("defaultWrapper", true, groupId)}
       noButtons={boolean("noButtons", true, groupId)}
       maxHeight={text("maxHeight", null, groupId)}
+      blurUnderlay={boolean("blurUnderlay", false, groupId)}
     />
   );
 };

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

@@ -115,7 +115,7 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
-                  isInCustomerManagement={isInCustomerManagement}
+                  disableActions={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -139,7 +139,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
+              disableActions={isInCustomerManagement}
             />
           )}
         </Stack>
@@ -163,7 +163,7 @@ const Obligation = ({
           description={description}
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
-          isInCustomerManagement={isInCustomerManagement}
+          disableActions={isInCustomerManagement}
         />
       )}
     </Box>
@@ -222,7 +222,7 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
-                  isInCustomerManagement={isInCustomerManagement}
+                  disableActions={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -245,7 +245,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
+              disableActions={isInCustomerManagement}
             />
           )}
         </Stack>

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

@@ -3,7 +3,7 @@ import AmountCallout from "../../../atoms/amount-callout";
 import { Box, Stack } from "../../../atoms/layouts";
 import Text from "../../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
-import { displayCurrency } from "../../../../util/general";
+import { displayCurrency, noop } from "../../../../util/general";
 import { AutopayModalModule } from "./AutopayModalModule";
 
 const AmountModule = ({
@@ -19,7 +19,7 @@ const AmountModule = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -50,7 +50,22 @@ const AmountModule = ({
             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);
+                  }
+            }
           />
         )}
       </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);
@@ -85,16 +88,14 @@ const AutopayModal = ({
               autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
             }
             variant="secondary"
-            action={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
-            }}
+            action={action || (() => toggleModal(true))}
             dataQa="Turn off Autopay"
             extraStyles={
               isMobile
                 ? `flex-grow: 1; width: 100%; margin: 0;`
                 : `flex-grow: 1; min-width: 165px;`
             }
-            disabled={isInCustomerManagement}
+            disabled={disableActions}
           />
         );
       }
@@ -103,12 +104,10 @@ const AutopayModal = ({
           <ButtonWithAction
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
-            action={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
-            }}
+            action={action || (() => toggleModal(true))}
             dataQa="Manage Autopay"
             extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-            disabled={isInCustomerManagement}
+            disabled={disableActions}
           />
         );
       }
@@ -116,9 +115,12 @@ const AutopayModal = ({
         return (
           <Box
             padding="0"
-            onClick={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
-            }}
+            onClick={
+              onClick ||
+              (() => {
+                toggleModal(true);
+              })
+            }
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
             extraStyles={"cursor: pointer;"}
@@ -130,15 +132,12 @@ const AutopayModal = ({
               <AutopayOnIcon />
               <Text
                 variant="pS"
-                onClick={() =>
-                  isInCustomerManagement ? noop : 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`}
@@ -146,7 +145,7 @@ const AutopayModal = ({
                 weight={themeValues.fontWeight}
                 hoverStyles={themeValues.modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
-                disabled={isInCustomerManagement}
+                disabled={disableActions}
               >
                 {`${shortPlan} ${nextAutopayDate}`}
               </Text>
@@ -158,8 +157,8 @@ const AutopayModal = ({
   };
   return (
     <Modal
-      showModal={isInCustomerManagement ? noop : () => toggleModal(true)}
-      hideModal={isInCustomerManagement ? noop : () => toggleModal(false)}
+      showModal={() => toggleModal(true)}
+      hideModal={() => 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,17 @@ const InactiveControlsModule = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
+              disableActions={disableActions}
             />
           </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

@@ -25,7 +25,7 @@ const PaymentDetailsActions = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -81,7 +81,7 @@ const PaymentDetailsActions = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
+              isInCustomerManagement={disableActions}
             />
           </Cluster>
         </Box>
@@ -122,7 +122,7 @@ const PaymentDetailsActions = ({
                 }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-                disabled={isInCustomerManagement}
+                disabled={disableActions}
               />
             ) : (
               <AutopayModalModule
@@ -141,7 +141,7 @@ const PaymentDetailsActions = ({
                 description={description}
                 subDescription={subDescription}
                 allowedPaymentInstruments={allowedPaymentInstruments}
-                isInCustomerManagement={isInCustomerManagement}
+                disableActions={disableActions}
               />
             )}
           </Box>
@@ -149,13 +149,11 @@ const PaymentDetailsActions = ({
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
-                action={
-                  isInCustomerManagement ? noop : () => handleClick(obligations)
-                }
+                action={disableActions ? noop : () => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
-                disabled={isInCustomerManagement}
+                disabled={disableActions}
               />
             </Box>
           )}
@@ -165,13 +163,13 @@ const PaymentDetailsActions = ({
             <ButtonWithAction
               isLoading={isLoading}
               action={() =>
-                isInCustomerManagement ? noop : () => handleClick(obligations)
+                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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Modal from "../../modal";
 import ButtonWithAction from "../../../atoms/button-with-action";
 import { Box } from "../../../atoms/layouts";
+import { noop } from "../../../../util/general";
 
 const RemoveAccountModalModule = ({
   agencyName,
@@ -9,7 +10,7 @@ const RemoveAccountModalModule = ({
   removeAccount,
   accountType,
   isMobile,
-  isInCustomerManagement = false
+  disableActions = false
 }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const lastItem = [...obligations].pop();
@@ -41,8 +42,10 @@ const RemoveAccountModalModule = ({
       } will be deactivated.`}
       continueButtonText="Remove"
       continueAction={() => {
-        removeAccount();
-        setModalIsOpen(false);
+        if (!disableActions) {
+          removeAccount();
+          setModalIsOpen(false);
+        }
       }}
       useDangerButton
     >
@@ -50,12 +53,12 @@ const RemoveAccountModalModule = ({
         <ButtonWithAction
           text="Remove"
           variant="secondary"
-          action={isInCustomerManagement ? noop : () => setModalIsOpen(true)}
+          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>