@thecb/components 5.8.1-beta.6 → 5.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.8.1-beta.6",
+  "version": "5.8.1",
   "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,21 +25,13 @@ const Obligation = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  inactive = false,
+  isActive = true,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = ""
 }) => {
-  /*
-    The value of obligations is always an array. It can contain:
-      - A single obligation
-      - A group of obligations (a "collection")
-    
-    The top level desc/subdesc for all obligations in a collection is the same
-    (Collection accounts look different in the Account Details page)
-  */
-  const firstObligation = obligations[0];
-  const customAttributes = firstObligation?.customAttributes ?? {};
+  const obligation = obligations[0];
+  const { customAttributes } = obligation;
   const boxShadowValue =
     "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   const activeObligation = (
@@ -48,16 +40,11 @@ const Obligation = ({
       borderRadius="4px"
       boxShadow={boxShadowValue}
       as="section"
-      aria-label={`${firstObligation?.description ??
-        "account"} ${firstObligation?.subDescription ?? obligationAssocID}`}
+      aria-label={`${obligation.description} ${obligation.subDescription}`}
     >
-      <Box background={WHITE} padding="24px 16px">
+      <Box background={WHITE}>
         <Stack childGap="14px">
-          <Box
-            key={`${firstObligation?.id}-top`}
-            padding="0 8px"
-            minWidth="100%"
-          >
+          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
             <Cluster
               justify="space-between"
               align="center"
@@ -76,8 +63,8 @@ const Obligation = ({
                     />
                   )}
                   <TitleModule
-                    title={firstObligation?.description}
-                    subtitle={firstObligation?.subDescription}
+                    title={obligation.description}
+                    subtitle={obligation.subDescription}
                     titleColor={BRIGHT_GREY}
                     isMobile={isMobile}
                   />
@@ -85,7 +72,7 @@ const Obligation = ({
               </Box>
               {!isMobile && (
                 <AmountModule
-                  totalAmountDue={obligations?.reduce(
+                  totalAmountDue={obligations.reduce(
                     (acc, curr) => acc + curr.amountDue,
                     0
                   )}
@@ -150,7 +137,7 @@ const Obligation = ({
     >
       <Box background={ATHENS_GREY}>
         <Stack childGap="14px">
-          <Box key={`${obligationAssocID}-top`} padding="0 8px" minWidth="100%">
+          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
             <Cluster
               justify="space-between"
               align="center"
@@ -158,7 +145,7 @@ const Obligation = ({
               nowrap
             >
               <Box padding="0">
-                <Cluster justify="flex-start" align="center" nowrap>
+                <Cluster justify="flex-start" align="center">
                   <IconModule
                     icon={config.icon}
                     iconDefault={config.iconDefault}
@@ -210,7 +197,7 @@ const Obligation = ({
     </Box>
   );
 
-  return inactive ? inactiveObligation : activeObligation;
+  return isActive ? activeObligation : inactiveObligation;
 };
 
 export default Obligation;

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

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

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

@@ -7,7 +7,6 @@ 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,
@@ -17,7 +16,7 @@ const AutopayModal = ({
   modalOpen,
   deactivatePaymentSchedule,
   navigateToSettings,
-  controlType = "tertiary",
+  buttonLinkType,
   isMobile,
   themeValues,
   isPaymentPlan,
@@ -63,37 +62,24 @@ const AutopayModal = ({
   const defaultStyles = `
     .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
      `;
-  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%;` : `margin: 0px`
-            }
-          />
-        );
-      }
-      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": {
+  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%;`}
+        />
+      ) : (
         <Box
           padding="0"
           onClick={() => {
@@ -125,18 +111,8 @@ const AutopayModal = ({
               {`${planType} ${nextAutopayDate}`}
             </Text>
           </Cluster>
-        </Box>;
-      }
-    }
-  };
-  return (
-    <Modal
-      showModal={() => toggleModal(true)}
-      hideModal={() => toggleModal(false)}
-      modalOpen={modalOpen}
-      {...modalExtraProps}
-    >
-      {renderAutoPayControl()}
+        </Box>
+      )}
     </Modal>
   );
 };

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

@@ -25,7 +25,7 @@ const InactiveControlsModule = ({
       border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
       borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
     >
-      <Cluster childGap={isMobile ? `8px` : `16px`} nowrap>
+      <Cluster childGap={isMobile ? `8px` : `18px`}>
         {autoPayEnabled && (
           <Box padding="0" extraStyles={`flex-grow: 1;`}>
             <AutopayModalModule
@@ -35,24 +35,22 @@ 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="secondary"
+            variant="tertiary"
             text="Remove"
             action={handleRemoveAccount}
             dataQa="Remove Account"
-            extraStyles={
-              isMobile ? `flex-grow: 1; width: 100%;` : `margin: 0px;`
-            }
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
           />
         </Box>
       </Cluster>

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

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