@thecb/components 10.2.4-beta.14 → 10.2.4-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.4-beta.14",
+  "version": "10.2.4-beta.15",
   "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

@@ -81,7 +81,6 @@ const ButtonWithAction = forwardRef(
     },
     ref
   ) => {
-    const isGhostVariant = variant === "ghost" || variant === "smallGhost";
     const themeContext = useContext(ThemeContext);
     const themeValues = createThemeValues(
       themeContext,
@@ -92,35 +91,35 @@ const ButtonWithAction = forwardRef(
     const { isMobile } = themeContext;
 
     const hoverStyles = `
-    outline: none;
-    background-color: ${themeValues.hoverBackgroundColor};
-    border-color: ${themeValues.hoverBorderColor};
-    color: ${themeValues.hoverColor};
-    text-decoration: ${
-      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
-    };
-    cursor: pointer;
-  `;
+      outline: none;
+      background-color: ${themeValues.hoverBackgroundColor};
+      border-color: ${themeValues.hoverBorderColor};
+      color: ${themeValues.hoverColor};
+      text-decoration: ${
+        variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+      };
+      cursor: pointer;
+    `;
     const activeStyles = `
-    outline: none;
-    background-color: ${themeValues.activeBackgroundColor};
-    border-color: ${themeValues.activeBorderColor};
-    color: ${themeValues.activeColor};
-    text-decoration: ${
-      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
-    };
+      outline: none;
+      background-color: ${themeValues.activeBackgroundColor};
+      border-color: ${themeValues.activeBorderColor};
+      color: ${themeValues.activeColor};
+      text-decoration: ${
+        variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+      };
   `;
     const disabledStyles = `
-    background-color: ${isGhostVariant ? "transparent;" : "#6D717E;"};
-    border-color: ${isGhostVariant ? "transparent;" : "#6D717E;"};
-    color: ${isGhostVariant ? "#6D717E;" : "#FFFFFF"};
-    cursor: default;
-    &:focus {
-      outline: 3px solid #6D717E;
-      outline-offset: 2px;
-    }
-    ${extraDisabledStyles}
-  `;
+      background-color: #6D717E;
+      border-color: #6D717E;
+      color: #FFFFFF;
+      cursor: default;
+      &:focus {
+        outline: 3px solid #6D717E;
+        outline-offset: 2px;
+      }
+      ${extraDisabledStyles}
+    `;
 
     return (
       <Box
@@ -136,7 +135,7 @@ const ButtonWithAction = forwardRef(
         disabledStyles={disabledStyles}
         aria-disabled={disabled}
         as="button"
-        onClick={isLoading || disabled ? noop : action}
+        onClick={isLoading || disabled ? undefined : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}
@@ -156,9 +155,7 @@ const ButtonWithAction = forwardRef(
                 variant={themeValues.fontSizeVariant}
                 color={themeValues.color}
                 textWrap={textWrap}
-                extraStyles={
-                  disabled ? textExtraStyles + disabledStyles : textExtraStyles
-                }
+                extraStyles={textExtraStyles}
               >
                 {text}
               </Text>

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

@@ -10,6 +10,7 @@ const variants = {
   back: "back",
   smallPrimary: "smallPrimary",
   smallSecondary: "smallSecondary",
+  disabledSecondary: "disabledSecondary",
   ghost: "ghost",
   smallGhost: "smallGhost",
   danger: "danger",

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

@@ -3,6 +3,7 @@ import {
   TRANSPARENT,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
+  MANATEE_GREY,
   MATISSE_BLUE,
   RASPBERRY,
   ERROR_COLOR
@@ -11,6 +12,7 @@ import {
 const padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
+  disabledSecondary: "0.75rem 1.5rem",
   back: "0.75rem 1.5rem",
   smallPrimary: "0.75rem 1rem",
   smallSecondary: "0.75rem 1rem",
@@ -26,6 +28,7 @@ const padding = {
 const color = {
   primary: WHITE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: MATISSE_BLUE,
   smallPrimary: WHITE,
   smallSecondary: MATISSE_BLUE,
@@ -41,6 +44,7 @@ const color = {
 const fontSizeVariant = {
   primary: "pS",
   secondary: "pS",
+  disabledSecondary: "pS",
   back: "pS",
   smallPrimary: "pS",
   smallSecondary: "pS",
@@ -56,6 +60,7 @@ const fontSizeVariant = {
 const fontWeight = {
   primary: "600",
   secondary: "600",
+  disabledSecondary: "600",
   back: "600",
   smallPrimary: "600",
   smallSecondary: "600",
@@ -71,6 +76,7 @@ const fontWeight = {
 const height = {
   primary: "3rem",
   secondary: "3rem",
+  disabledSecondary: "3rem",
   back: "3rem",
   smallPrimary: "2.5rem",
   smallSecondary: "2.5rem",
@@ -86,6 +92,7 @@ const height = {
 const minWidth = {
   primary: "130px",
   secondary: "130px",
+  disabledSecondary: "130px",
   back: "130px",
   smallPrimary: "100px",
   smallSecondary: "100px",
@@ -101,6 +108,7 @@ const minWidth = {
 const backgroundColor = {
   primary: MATISSE_BLUE,
   secondary: TRANSPARENT,
+  disabledSecondary: TRANSPARENT,
   back: TRANSPARENT,
   smallPrimary: MATISSE_BLUE,
   smallSecondary: TRANSPARENT,
@@ -116,6 +124,7 @@ const backgroundColor = {
 const border = {
   primary: "2px solid " + MATISSE_BLUE,
   secondary: "2px solid " + MATISSE_BLUE,
+  disabledSecondary: "2px solid " + MANATEE_GREY,
   back: "2px solid " + MATISSE_BLUE,
   smallPrimary: "2px solid " + MATISSE_BLUE,
   smallSecondary: "2px solid " + MATISSE_BLUE,
@@ -131,6 +140,7 @@ const border = {
 const hoverBackgroundColor = {
   primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
+  disabledSecondary: TRANSPARENT,
   back: TRANSPARENT,
   smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
@@ -146,6 +156,7 @@ const hoverBackgroundColor = {
 const hoverBorderColor = {
   primary: SAPPHIRE_BLUE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: "#DCEAF1",
   smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: MATISSE_BLUE,
@@ -161,6 +172,7 @@ const hoverBorderColor = {
 const hoverColor = {
   primary: WHITE,
   secondary: SAPPHIRE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: SAPPHIRE_BLUE,
   smallPrimary: WHITE,
   smallSecondary: SAPPHIRE_BLUE,
@@ -176,6 +188,7 @@ const hoverColor = {
 const activeBackgroundColor = {
   primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
+  disabledSecondary: TRANSPARENT,
   back: TRANSPARENT,
   smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
@@ -191,6 +204,7 @@ const activeBackgroundColor = {
 const activeBorderColor = {
   primary: PEACOCK_BLUE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: PEACOCK_BLUE,
   smallPrimary: PEACOCK_BLUE,
   smallSecondary: MATISSE_BLUE,
@@ -206,6 +220,7 @@ const activeBorderColor = {
 const activeColor = {
   primary: WHITE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: PEACOCK_BLUE,
   smallPrimary: WHITE,
   smallSecondary: PEACOCK_BLUE,

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

@@ -115,7 +115,6 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
-                  isInCustomerManagement={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -222,7 +221,6 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
-                  isInCustomerManagement={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -245,7 +243,6 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
             />
           )}
         </Stack>

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

@@ -18,8 +18,7 @@ const AmountModule = ({
   nextAutopayDate,
   description,
   subDescription,
-  allowedPaymentInstruments,
-  isInCustomerManagement = false
+  allowedPaymentInstruments
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -50,7 +49,6 @@ const AmountModule = ({
             description={description}
             subDescription={subDescription}
             allowedPaymentInstruments={allowedPaymentInstruments}
-            isInCustomerManagement={isInCustomerManagement}
           />
         )}
       </Stack>

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

@@ -10,7 +10,7 @@ const groupId = "props";
 export const amountModule = () => (
   <AmountModule
     totalAmountDue={text("totalAmountDue", "123", groupId)}
-    autoPayEnabled={boolean("autoPayEnabled", true, groupId)}
+    autoPayEnabled={boolean("autopayEnabled", true, groupId)}
     isMobile={boolean("isMobile", false, groupId)}
     deactivatePaymentSchedule={noop}
     navigateToSettings={noop}

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

@@ -87,7 +87,7 @@ const AutopayModal = ({
             }
             variant="secondary"
             action={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
+              toggleModal(true);
             }}
             dataQa="Turn off Autopay"
             extraStyles={
@@ -101,14 +101,14 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
+            disabled={isInCustomerManagement}
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
             action={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
+              toggleModal(true);
             }}
             dataQa="Manage Autopay"
             extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-            disabled={isInCustomerManagement}
           />
         );
       }
@@ -117,7 +117,7 @@ const AutopayModal = ({
           <Box
             padding="0"
             onClick={() => {
-              isInCustomerManagement ? noop : toggleModal(true);
+              toggleModal(true);
             }}
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
@@ -130,13 +130,9 @@ const AutopayModal = ({
               <AutopayOnIcon />
               <Text
                 variant="pS"
-                onClick={() =>
-                  isInCustomerManagement ? noop : toggleModal(true)
-                }
+                onClick={() => toggleModal(true)}
                 onKeyPress={e => {
-                  isInCustomerManagement
-                    ? noop
-                    : e.key === "Enter" && toggleModal(true);
+                  e.key === "Enter" && toggleModal(true);
                 }}
                 tabIndex="0"
                 dataQa={`${shortPlan} On`}
@@ -155,8 +151,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

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

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

@@ -4,7 +4,6 @@ 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,
@@ -81,7 +80,6 @@ const PaymentDetailsActions = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
             />
           </Cluster>
         </Box>
@@ -141,7 +139,6 @@ const PaymentDetailsActions = ({
                 description={description}
                 subDescription={subDescription}
                 allowedPaymentInstruments={allowedPaymentInstruments}
-                isInCustomerManagement={isInCustomerManagement}
               />
             )}
           </Box>
@@ -149,9 +146,7 @@ const PaymentDetailsActions = ({
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
-                action={() =>
-                  isInCustomerManagement ? noop : handleClick(obligations)
-                }
+                action={() => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"

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

@@ -8,8 +8,7 @@ const RemoveAccountModalModule = ({
   obligations = [],
   removeAccount,
   accountType,
-  isMobile,
-  isInCustomerManagement = false
+  isMobile
 }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const lastItem = [...obligations].pop();
@@ -55,7 +54,6 @@ const RemoveAccountModalModule = ({
           extraStyles={
             isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
           }
-          disabled={isInCustomerManagement}
         />
       </Box>
     </Modal>