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

package/package.json

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

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

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

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

@@ -18,7 +18,8 @@ const AmountModule = ({
   nextAutopayDate,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -49,6 +50,7 @@ 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={() => {
-              toggleModal(true);
+              isInCustomerManagement ? noop : 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={() => {
-              toggleModal(true);
+              isInCustomerManagement ? noop : toggleModal(true);
             }}
             dataQa="Manage Autopay"
             extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            disabled={isInCustomerManagement}
           />
         );
       }
@@ -117,7 +117,7 @@ const AutopayModal = ({
           <Box
             padding="0"
             onClick={() => {
-              toggleModal(true);
+              isInCustomerManagement ? noop : toggleModal(true);
             }}
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
@@ -130,9 +130,13 @@ const AutopayModal = ({
               <AutopayOnIcon />
               <Text
                 variant="pS"
-                onClick={() => toggleModal(true)}
+                onClick={() =>
+                  isInCustomerManagement ? noop : toggleModal(true)
+                }
                 onKeyPress={e => {
-                  e.key === "Enter" && toggleModal(true);
+                  isInCustomerManagement
+                    ? noop
+                    : e.key === "Enter" && toggleModal(true);
                 }}
                 tabIndex="0"
                 dataQa={`${shortPlan} On`}
@@ -151,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

@@ -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

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

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();
@@ -54,6 +55,7 @@ const RemoveAccountModalModule = ({
           extraStyles={
             isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
           }
+          disabled={isInCustomerManagement}
         />
       </Box>
     </Modal>