@thecb/components 5.8.0 → 5.8.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.8.0",
+  "version": "5.8.1-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -25,12 +25,13 @@ const Obligation = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  isActive = true,
+  inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = ""
 }) => {
   const obligation = obligations[0];
+  console.log("obligation in obligation component", obligation);
   const { customAttributes } = obligation;
   const boxShadowValue =
     "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
@@ -145,7 +146,7 @@ const Obligation = ({
               nowrap
             >
               <Box padding="0">
-                <Cluster justify="flex-start" align="center">
+                <Cluster justify="flex-start" align="center" nowrap>
                   <IconModule
                     icon={config.icon}
                     iconDefault={config.iconDefault}
@@ -197,7 +198,7 @@ const Obligation = ({
     </Box>
   );
 
-  return isActive ? activeObligation : inactiveObligation;
+  return inactive ? inactiveObligation : activeObligation;
 };
 
 export default Obligation;

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

@@ -42,6 +42,7 @@ const AmountModule = ({
             paymentPlanSchedule={paymentPlanSchedule}
             isPaymentPlan={isPaymentPlan}
             nextAutopayDate={nextAutopayDate}
+            controlType="link"
           />
         )}
       </Stack>

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

@@ -7,6 +7,7 @@ import { Box, Cluster } from "../../../atoms/layouts";
 import { SEA_GREEN } from "../../../../constants/colors";
 import { fallbackValues } from "./AutopayModalModule.theme";
 import { themeComponent } from "../../../../util/themeUtils";
+import { render } from "react-dom/cjs/react-dom.production.min";
 
 const AutopayModal = ({
   autoPayActive,
@@ -16,7 +17,7 @@ const AutopayModal = ({
   modalOpen,
   deactivatePaymentSchedule,
   navigateToSettings,
-  buttonLinkType,
+  controlType = "tertiary",
   isMobile,
   themeValues,
   isPaymentPlan,
@@ -62,24 +63,35 @@ const AutopayModal = ({
   const defaultStyles = `
     .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
      `;
-  return (
-    <Modal
-      showModal={() => toggleModal(true)}
-      hideModal={() => toggleModal(false)}
-      modalOpen={modalOpen}
-      {...modalExtraProps}
-    >
-      {buttonLinkType ? (
-        <ButtonWithAction
-          text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
-          variant="tertiary"
-          action={() => {
-            toggleModal(true);
-          }}
-          dataQa="Manage Autopay"
-          extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-        />
-      ) : (
+  const renderAutoPayControl = () => {
+    switch (controlType) {
+      case "secondary": {
+        return (
+          <ButtonWithAction
+            text={autoPayActive ? `Turn off ${planType}` : `Set Up ${planType}`}
+            variant="secondary"
+            action={() => {
+              toggleModal(true);
+            }}
+            dataQa="Turn off Autopay"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        );
+      }
+      case "tertiary": {
+        return (
+          <ButtonWithAction
+            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+            variant="tertiary"
+            action={() => {
+              toggleModal(true);
+            }}
+            dataQa="Manage Autopay"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        );
+      }
+      case "link": {
         <Box
           padding="0"
           onClick={() => {
@@ -111,8 +123,18 @@ const AutopayModal = ({
               {`${planType} ${nextAutopayDate}`}
             </Text>
           </Cluster>
-        </Box>
-      )}
+        </Box>;
+      }
+    }
+  };
+  return (
+    <Modal
+      showModal={() => toggleModal(true)}
+      hideModal={() => toggleModal(false)}
+      modalOpen={modalOpen}
+      {...modalExtraProps}
+    >
+      {renderAutoPayControl()}
     </Modal>
   );
 };

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

@@ -35,18 +35,18 @@ const InactiveControlsModule = ({
               modalOpen={modalOpen}
               navigateToSettings={navigateToSettings}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
-              buttonLinkType
               isMobile={isMobile}
               paymentPlanSchedule={paymentPlanSchedule}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
+              controlType="secondary"
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
           <ButtonWithAction
-            variant="tertiary"
+            variant="secondary"
             text="Remove"
             action={handleRemoveAccount}
             dataQa="Remove Account"

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

@@ -120,7 +120,7 @@ const PaymentDetailsActions = ({
                 modalOpen={modalOpen}
                 navigateToSettings={navigateToSettings}
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
-                buttonLinkType
+                controlType="tertiary"
                 isMobile={isMobile}
                 paymentPlanSchedule={paymentPlanSchedule}
                 isPaymentPlan={isPaymentPlan}