@thecb/components 10.2.2 → 10.2.4-beta.0

package/package.json

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

package/src/components/atoms/placeholder/Placeholder.js

@@ -17,6 +17,7 @@ import {
   PaymentMethodAddIcon
 } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { noop } from "../../../util/general";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -36,21 +37,27 @@ const PlaceholderContentWrapper = ({
   action,
   destination,
   children,
-  dataQa
+  dataQa,
+  disabled = false
 }) =>
   isLink ? (
-    <Link to={destination} data-qa={dataQa}>
+    <Link to={destination} data-qa={dataQa} disabled={disabled}>
       <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
     </Link>
   ) : (
     <Box
-      onClick={action}
+      onClick={disabled ? noop : action}
       padding="0"
       minHeight="100%"
-      extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
+      aria-disabled={disabled}
+      extraStyles={
+        disabled
+          ? "cursor: default; opacity: 0.7;"
+          : "cursor: pointer; opacity: 1;"
+      }
     >
       {children}
     </Box>
@@ -65,13 +72,15 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
-  dataQa
+  dataQa,
+  disabled = false
 }) => (
   <PlaceholderContentWrapper
     isLink={isLink}
     action={action}
     destination={destination}
     dataQa={dataQa}
+    disabled={disabled}
   >
     <Box
       padding="0"
@@ -108,7 +117,7 @@ const Placeholder = ({
         <Box
           padding="0"
           tabIndex="0"
-          onKeyPress={e => e.key === "Enter" && action()}
+          onKeyPress={e => e.key === "Enter" && !disabled && action()}
         >
           <Cluster justify="center" align="center" minHeight="100%">
             <Switcher maxChildren={2} childGap="0">

package/src/components/atoms/placeholder/Placeholder.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, select } from "@storybook/addon-knobs";
+import { text, select, boolean } from "@storybook/addon-knobs";
 import Placeholder from "./Placeholder";
 import page from "../../../../.storybook/page";
 
@@ -21,14 +21,27 @@ const iconLabel = "largeIcon";
 const defaultIcon = "accounts";
 
 export const placeholder = () => (
-  <Placeholder
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    isLink
-    destination={text("destination", "add-account", "props")}
-    text={text("text", "Add an Account", "props")}
-    largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
-    key="placeholder"
-  />
+  <>
+    <h2>Placeholder w/Link</h2>
+    <Placeholder
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      isLink
+      destination={text("destination", "/", "props")}
+      text={text("text", "Add an Account", "props")}
+      largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
+      key="placeholder1"
+      disabled={boolean("disabled", false, groupId)}
+    />
+    <h2>Placeholder w/Action</h2>
+    <Placeholder
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      text={text("text", "Add an Account", "props")}
+      largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
+      key="placeholder2"
+      disabled={boolean("disabled", false, groupId)}
+      action={() => window.alert("Click event registered!")}
+    />
+  </>
 );
 
 const story = page({

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>

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

@@ -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,6 +101,7 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
+            disabled={isInCustomerManagement}
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
             action={() => {

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);
@@ -119,6 +120,7 @@ const PaymentDetailsActions = ({
                 }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+                disabled={isInCustomerManagement}
               />
             ) : (
               <AutopayModalModule
@@ -148,6 +150,7 @@ const PaymentDetailsActions = ({
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
+                disabled={isInCustomerManagement}
               />
             </Box>
           )}
@@ -161,6 +164,7 @@ const PaymentDetailsActions = ({
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
+              disabled={isInCustomerManagement}
             />
           </Box>
         )}