@thecb/components 5.8.2-beta.9 → 5.9.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.8.2-beta.9",
+  "version": "5.9.0-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

@@ -30,6 +30,8 @@ const Obligation = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
+  dueDate,
+  agencyName,
   inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
@@ -58,7 +60,7 @@ const Obligation = ({
       border={`1px solid ${GRECIAN_GREY}`}
       borderWidthOverride="1px 0 0 0"
     >
-      <Box background={WHITE} padding="24px 16px">
+      <Box background={WHITE} padding={isMobile ? "16px" : "24px 16px"}>
         <Stack childGap="14px">
           <Box
             key={`${firstObligation?.id}-top`}
@@ -157,7 +159,7 @@ const Obligation = ({
       as="section"
       aria-label={`${inactiveLookupTitle} ${inactiveLookupInput}: ${inactiveLookupValue}`}
     >
-      <Box background={ATHENS_GREY} padding="24px">
+      <Box background={ATHENS_GREY} padding={isMobile ? "16px" : "24px"}>
         <Stack childGap="14px">
           <Box key={`${obligationAssocID}-top`} padding="0" minWidth="100%">
             <Cluster
@@ -196,6 +198,9 @@ const Obligation = ({
                   isMobile={isMobile}
                   nextAutopayDate={nextAutopayDate}
                   obligationAssocID={obligationAssocID}
+                  dueDate={dueDate}
+                  agencyName={agencyName}
+                  configType={config.type}
                 />
               )}
             </Cluster>
@@ -212,6 +217,9 @@ const Obligation = ({
               isMobile={isMobile}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
+              dueDate={dueDate}
+              agencyName={agencyName}
+              configType={config.type}
             />
           )}
         </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,
@@ -21,9 +20,12 @@ const AutopayModal = ({
   isMobile,
   themeValues,
   isPaymentPlan,
-  nextAutopayDate
+  nextAutopayDate,
+  dueDate,
+  inactive
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+  const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive
       ? `Deactivate ${planType}`
@@ -31,7 +33,11 @@ const AutopayModal = ({
     modalBodyText: autoPayActive
       ? `Are you sure you want to deactivate ${
           isPaymentPlan ? "your payment plan" : "autopay"
-        }? You will need to manually make your next payment.`
+        }? ${
+          !inactive && nextDate
+            ? `Your next payment will be due on ${nextDate}.`
+            : ""
+        }`
       : `To set up ${
           isPaymentPlan ? "a payment plan" : "autopay"
         } you must save a payment method and address in your profile. Do you want to save these now?`,
@@ -76,7 +82,7 @@ const AutopayModal = ({
             dataQa="Turn off Autopay"
             extraStyles={
               isMobile
-                ? `flex-grow: 1; width: 100%;`
+                ? `flex-grow: 1; width: 100%; margin: 0;`
                 : `flex-grow: 1; min-width: 165px;`
             }
           />

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

@@ -3,6 +3,7 @@ import { GHOST_GREY } from "../../../../constants/colors";
 import ButtonWithAction from "../../../atoms/button-with-action";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { AutopayModalModule } from "./AutopayModalModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 const InactiveControlsModule = ({
   autoPayEnabled,
@@ -14,18 +15,27 @@ const InactiveControlsModule = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
+  dueDate,
+  agencyName,
+  configType,
   actions
 }) => {
+  console.log("actions are", actions);
   const [modalOpen, toggleModal] = useState(false);
-  const { removeAccount } = actions;
-  const handleRemoveAccount = () => removeAccount(obligationAssocID);
+  const { deleteObligationAssoc } = actions;
+  const handleRemoveAccount = () => deleteObligationAssoc(obligationAssocID);
   return (
     <Box
       padding={isMobile ? "18px 0 0 0" : "0"}
       border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
       borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
     >
-      <Cluster childGap={autoPayEnabled ? `8px` : "0"} nowrap>
+      <Cluster
+        childGap={autoPayEnabled ? `8px` : "0"}
+        nowrap
+        justify={isMobile && autoPayEnabled && "center"}
+        align={isMobile && autoPayEnabled && "center"}
+      >
         {autoPayEnabled && (
           <Box padding="0" extraStyles={`flex-grow: 1;`}>
             <AutopayModalModule
@@ -40,21 +50,18 @@ const InactiveControlsModule = ({
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
+              dueDate={dueDate}
               controlType="secondary"
+              inactive
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
-          <ButtonWithAction
-            variant="secondary"
-            text="Remove"
-            action={handleRemoveAccount}
-            dataQa="Remove Account"
-            extraStyles={
-              isMobile
-                ? `flex-grow: 1; width: 100%; margin: 0;`
-                : `flex-grow: 1;`
-            }
+          <RemoveAccountModalModule
+            agencyName={agencyName}
+            removeAccount={handleRemoveAccount}
+            accountType={configType === "ACCOUNT" ? "Account" : "Property"}
+            isMobile={isMobile}
           />
         </Box>
       </Cluster>

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

@@ -28,9 +28,9 @@ const InactiveTitleModule = ({ title, subtitle, autoPayEnabled }) => (
         Unable to load account details
       </Detail>
       <Detail variant="extraSmall" as="p" color={BLACK}>
-        {`This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.${
+        {`This may mean that the balance has been paid, or there was an error loading it.${
           autoPayEnabled
-            ? " You may disable Autopay for this account by pressing the Turn off Autopay button."
+            ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button."
             : ""
         }`}
       </Detail>

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

@@ -19,7 +19,8 @@ const PaymentDetailsActions = ({
   paymentPlanSchedule,
   isPaymentPlan,
   nextAutopayDate,
-  obligationAssocID
+  obligationAssocID,
+  dueDate
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -126,6 +127,7 @@ const PaymentDetailsActions = ({
                 paymentPlanSchedule={paymentPlanSchedule}
                 isPaymentPlan={isPaymentPlan}
                 nextAutopayDate={nextAutopayDate}
+                dueDate={dueDate}
               />
             )}
           </Box>

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import Modal from "../../modal";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { Box } from "../../../atoms/layouts";
+
+const RemoveAccountModalModule = ({
+  agencyName,
+  obligations = [],
+  removeAccount,
+  accountType,
+  isMobile
+}) => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const lastItem = [...obligations].pop();
+  const accounts = obligations.length
+    ? obligations.reduce((acc, curr) => {
+        const account = curr.details.description;
+        const formattedAccount =
+          curr !== lastItem ? `${account} and ` : `${account}`;
+        return formattedAccount === agencyName
+          ? agencyName
+          : acc + formattedAccount;
+      }, `${agencyName} - `)
+    : "";
+  const identifier =
+    accountType === "Account" && obligations.length > 1
+      ? "accounts"
+      : accountType === "Property" && obligations.length > 1
+      ? "properties"
+      : accountType.toLowerCase();
+
+  return (
+    <Modal
+      showModal={() => setModalIsOpen(true)}
+      hideModal={() => setModalIsOpen(false)}
+      modalOpen={modalIsOpen}
+      modalHeaderText={`Remove ${accountType}`}
+      modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts} from your profile? Any autopay scheduled against ${
+        obligations.length > 1 ? "them" : "it"
+      } will be deactivated.`}
+      continueButtonText="Remove"
+      continueAction={() => {
+        removeAccount();
+        setModalIsOpen(false);
+      }}
+      useDangerButton
+    >
+      <Box padding="0" extraStyles={`flex-grow: 1;`}>
+        <ButtonWithAction
+          text="Remove"
+          variant="secondary"
+          action={() => setModalIsOpen(true)}
+          dataQa="Remove Account"
+          extraStyles={
+            isMobile ? `flex-grow: 1; width: 100%; margin: 0;` : `flex-grow: 1;`
+          }
+        />
+      </Box>
+    </Modal>
+  );
+};
+export default RemoveAccountModalModule;

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

@@ -4,6 +4,7 @@ import AmountModule from "./AmountModule";
 import PaymentDetailsActions from "./PaymentDetailsActions";
 import InactiveControlsModule from "./InactiveControlsModule";
 import InactiveTitleModule from "./InactiveTitleModule";
+import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 export {
   IconModule,
@@ -11,5 +12,6 @@ export {
   AmountModule,
   PaymentDetailsActions,
   InactiveControlsModule,
-  InactiveTitleModule
+  InactiveTitleModule,
+  RemoveAccountModalModule
 };

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -4,7 +4,8 @@ import {
   BRIGHT_GREY,
   GHOST_GREY,
   ATHENS_GREY,
-  TRANSPARENT
+  TRANSPARENT,
+  COOL_GREY_05
 } from "../../../constants/colors";
 import Text from "../../atoms/text";
 import { InternalLink } from "../../atoms/link";
@@ -18,7 +19,7 @@ import { fallbackValues } from "./TabSidebar.theme";
 const TabSidebar = ({ links, isMobile, themeValues }) => (
   <Box
     padding="0"
-    background={ATHENS_GREY}
+    background={COOL_GREY_05}
     minHeight="100%"
     role="region"
     aria-label="Profile tabs"