@thecb/components 5.8.1 → 5.8.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.8.1",
+  "version": "5.8.2-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,13 +25,21 @@ const Obligation = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  isActive = true,
+  inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = ""
 }) => {
-  const obligation = obligations[0];
-  const { customAttributes } = obligation;
+  /*
+    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 boxShadowValue =
     "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   const activeObligation = (
@@ -40,11 +48,16 @@ const Obligation = ({
       borderRadius="4px"
       boxShadow={boxShadowValue}
       as="section"
-      aria-label={`${obligation.description} ${obligation.subDescription}`}
+      aria-label={`${firstObligation?.description ??
+        "account"} ${firstObligation?.subDescription ?? obligationAssocID}`}
     >
-      <Box background={WHITE}>
+      <Box background={WHITE} padding="24px 16px">
         <Stack childGap="14px">
-          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
+          <Box
+            key={`${firstObligation?.id}-top`}
+            padding="0 8px"
+            minWidth="100%"
+          >
             <Cluster
               justify="space-between"
               align="center"
@@ -63,8 +76,8 @@ const Obligation = ({
                     />
                   )}
                   <TitleModule
-                    title={obligation.description}
-                    subtitle={obligation.subDescription}
+                    title={firstObligation?.description}
+                    subtitle={firstObligation?.subDescription}
                     titleColor={BRIGHT_GREY}
                     isMobile={isMobile}
                   />
@@ -72,7 +85,7 @@ const Obligation = ({
               </Box>
               {!isMobile && (
                 <AmountModule
-                  totalAmountDue={obligations.reduce(
+                  totalAmountDue={obligations?.reduce(
                     (acc, curr) => acc + curr.amountDue,
                     0
                   )}
@@ -135,17 +148,17 @@ const Obligation = ({
       as="section"
       aria-label={`${inactiveLookupTitle} ${inactiveLookupInput}: ${inactiveLookupValue}`}
     >
-      <Box background={ATHENS_GREY}>
+      <Box background={ATHENS_GREY} padding="24px">
         <Stack childGap="14px">
-          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
+          <Box key={`${obligationAssocID}-top`} padding="0" minWidth="100%">
             <Cluster
               justify="space-between"
               align="center"
-              childGap="4px"
+              childGap="40px"
               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 +210,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,6 +63,73 @@ 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 (
+          <Box
+            padding="0"
+            onClick={() => {
+              toggleModal(true);
+            }}
+            hoverStyles={hoverStyles}
+            activeStyles={activeStyles}
+            extraStyles={defaultStyles}
+          >
+            <Cluster
+              justify={isMobile ? "flex-start" : "flex-end"}
+              align="center"
+            >
+              <AutopayOnIcon />
+              <Text
+                variant="pS"
+                onClick={() => toggleModal(true)}
+                onKeyPress={e => {
+                  e.key === "Enter" && toggleModal(true);
+                }}
+                tabIndex="0"
+                dataQa={`${planType} On`}
+                color={SEA_GREEN}
+                weight={themeValues.fontWeight}
+                hoverStyles={themeValues.modalLinkHoverFocus}
+                extraStyles={`padding-left: 0.25rem;`}
+              >
+                {`${planType} ${nextAutopayDate}`}
+              </Text>
+            </Cluster>
+          </Box>
+        );
+      }
+    }
+  };
   return (
     <Modal
       showModal={() => toggleModal(true)}
@@ -69,50 +137,7 @@ const AutopayModal = ({
       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={() => {
-            toggleModal(true);
-          }}
-          hoverStyles={hoverStyles}
-          activeStyles={activeStyles}
-          extraStyles={defaultStyles}
-        >
-          <Cluster
-            justify={isMobile ? "flex-start" : "flex-end"}
-            align="center"
-          >
-            <AutopayOnIcon />
-            <Text
-              variant="pS"
-              onClick={() => toggleModal(true)}
-              onKeyPress={e => {
-                console.log({ e });
-                e.key === "Enter" && toggleModal(true);
-              }}
-              tabIndex="0"
-              dataQa={`${planType} On`}
-              color={SEA_GREEN}
-              weight={themeValues.fontWeight}
-              hoverStyles={themeValues.modalLinkHoverFocus}
-              extraStyles={`padding-left: 0.25rem;`}
-            >
-              {`${planType} ${nextAutopayDate}`}
-            </Text>
-          </Cluster>
-        </Box>
-      )}
+      {renderAutoPayControl()}
     </Modal>
   );
 };

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

@@ -25,9 +25,9 @@ const InactiveControlsModule = ({
       border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
       borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
     >
-      <Cluster childGap={isMobile ? `8px` : `18px`}>
+      <Cluster childGap={`8px`} nowrap>
         {autoPayEnabled && (
-          <Box padding="0" extraStyles={`flex-grow: 1;`}>
+          <Box padding="0" extraStyles={`flex-grow: 1; min-width: 165px;`}>
             <AutopayModalModule
               autoPayActive={autoPayEnabled}
               autoPaySchedule={autoPaySchedule}
@@ -35,22 +35,24 @@ 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"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            extraStyles={
+              isMobile ? `flex-grow: 1; width: 100%;` : `flex-grow: 1;`
+            }
           />
         </Box>
       </Cluster>

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}