@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/molecules/obligation/icons/PropertyGarageIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PropertyGarageIcon = () => (
+const PropertyGarageIcon = ({ color }) => (
   <svg
     width="48"
     height="48"
@@ -10,7 +10,7 @@ const PropertyGarageIcon = () => (
   >
     <path
       d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
-      fill="#3B5BDB"
+      fill={color}
     />
     <path
       d="M14.463 34.1481C14.5417 34.1481 14.6138 34.1153 14.6794 34.0497C14.745 33.9841 14.7778 33.912 14.7778 33.8333V24.074C14.7778 23.733 14.9024 23.4379 15.1516 23.1886C15.4008 22.9394 15.7091 22.8148 16.0764 22.8148H31.1087C31.476 22.8148 31.7843 22.9394 32.0335 23.1886C32.2827 23.4379 32.4074 23.733 32.4074 24.074V33.8333C32.4074 33.912 32.4401 33.9841 32.5057 34.0497C32.5713 34.1153 32.6435 34.1481 32.7222 34.1481H35.8703C35.949 34.1481 36.0212 34.1153 36.0867 34.0497C36.1523 33.9841 36.1851 33.912 36.1851 33.8333V20.3356C36.1851 19.9683 36.0802 19.6273 35.8703 19.3125C35.6604 18.9977 35.3719 18.7616 35.0046 18.6042H35.0439L24.3009 14.1574C23.8287 13.9475 23.3565 13.9475 22.8842 14.1574L12.1806 18.6042C11.8133 18.7616 11.5247 18.9977 11.3148 19.3125C11.1049 19.6273 11 19.9683 11 20.3356V33.8333C11 33.912 11.0328 33.9841 11.0984 34.0497C11.164 34.1153 11.2361 34.1481 11.3148 34.1481H14.463ZM30.8333 26.5926C30.912 26.5926 30.9841 26.5598 31.0497 26.4942C31.1153 26.4286 31.1481 26.3565 31.1481 26.2778V24.3889C31.1481 24.3102 31.1153 24.238 31.0497 24.1724C30.9841 24.1068 30.912 24.074 30.8333 24.074H16.3912C16.2863 24.074 16.2075 24.1068 16.1551 24.1724C16.1026 24.238 16.0764 24.3102 16.0764 24.3889V26.2778C16.0764 26.3565 16.1026 26.4286 16.1551 26.4942C16.2075 26.5598 16.2863 26.5926 16.3912 26.5926H30.8333ZM30.8333 30.3703C30.912 30.3703 30.9841 30.3375 31.0497 30.272C31.1153 30.2064 31.1481 30.1342 31.1481 30.0555V28.1666C31.1481 28.0879 31.1153 28.0158 31.0497 27.9502C30.9841 27.8846 30.912 27.8518 30.8333 27.8518H16.3518C16.2731 27.8518 16.201 27.8846 16.1354 27.9502C16.0698 28.0158 16.037 28.0879 16.037 28.1666V30.0555C16.037 30.1342 16.0698 30.2064 16.1354 30.272C16.201 30.3375 16.2731 30.3703 16.3518 30.3703H30.8333ZM30.8333 34.1481C30.912 34.1481 30.9841 34.1153 31.0497 34.0497C31.1153 33.9841 31.1481 33.912 31.1481 33.8333V31.9444C31.1481 31.8657 31.1153 31.7936 31.0497 31.728C30.9841 31.6624 30.912 31.6296 30.8333 31.6296H16.3518C16.2731 31.6296 16.201 31.6624 16.1354 31.728C16.0698 31.7936 16.037 31.8657 16.037 31.9444V33.8333C16.037 33.912 16.0698 33.9841 16.1354 34.0497C16.201 34.1153 16.2731 34.1481 16.3518 34.1481H30.8333Z"

package/src/components/molecules/obligation/icons/PropertyLandIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PropertyLandIcon = () => (
+const PropertyLandIcon = ({ color }) => (
   <svg
     width="48"
     height="48"
@@ -10,7 +10,7 @@ const PropertyLandIcon = () => (
   >
     <path
       d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
-      fill="#3B5BDB"
+      fill={color}
     />
     <path
       d="M25.8629 35.15C26.1342 35.15 26.3376 35.037 26.4733 34.8109C26.6089 34.5848 26.6164 34.3512 26.4959 34.1101L25.1394 31.8945V30.8094H31.3339C31.5449 30.8094 31.7333 30.7566 31.899 30.6511C32.0648 30.5456 32.1929 30.4024 32.2834 30.2216C32.3738 30.0407 32.4039 29.8523 32.3738 29.6564C32.3437 29.4605 32.2532 29.2721 32.1025 29.0912L28.4853 25.0219H29.887C30.3391 25.0219 30.6556 24.8259 30.8365 24.4341C31.0174 24.0422 30.9721 23.6805 30.7009 23.3489L27.1289 19.2344H28.4401C28.6511 19.2344 28.847 19.1816 29.0279 19.0761C29.2088 18.9706 29.3369 18.8199 29.4122 18.624C29.4876 18.428 29.5102 18.2321 29.4801 18.0362C29.4499 17.8403 29.3595 17.6669 29.2088 17.5162L24.2351 12.2261C24.0844 12.0754 23.9036 12 23.6926 12C23.4816 12 23.3007 12.0754 23.15 12.2261L18.1763 17.5162C18.0256 17.6669 17.9352 17.8403 17.9051 18.0362C17.8749 18.2321 17.8975 18.428 17.9729 18.624C18.0482 18.8199 18.1763 18.9706 18.3572 19.0761C18.5381 19.1816 18.734 19.2344 18.945 19.2344H20.2562L16.6843 23.3489C16.413 23.6805 16.3677 24.0422 16.5486 24.4341C16.7295 24.8259 17.046 25.0219 17.4981 25.0219H18.8998L15.2826 29.0912C15.1319 29.2721 15.0414 29.4605 15.0113 29.6564C14.9812 29.8523 15.0113 30.0407 15.1017 30.2216C15.1922 30.4024 15.3203 30.5456 15.4861 30.6511C15.6518 30.7566 15.8402 30.8094 16.0512 30.8094H22.2457V31.8945L20.8892 34.1101C20.7687 34.3512 20.7762 34.5848 20.9118 34.8109C21.0475 35.037 21.251 35.15 21.5222 35.15H25.8629Z"

package/src/components/molecules/obligation/icons/PropertyMotorcycleIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PropertyMotorcycleIcon = () => (
+const PropertyMotorcycleIcon = ({ color }) => (
   <svg
     width="48"
     height="48"
@@ -10,7 +10,7 @@ const PropertyMotorcycleIcon = () => (
   >
     <path
       d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
-      fill="#3B5BDB"
+      fill={color}
     />
     <path
       d="M32.7935 32.11C33.8183 32.11 34.7763 31.8575 35.6675 31.3525C36.5586 30.8475 37.2567 30.1495 37.7617 29.2583C38.2666 28.3672 38.5191 27.4092 38.5191 26.3844C38.5191 25.3596 38.2592 24.4164 37.7394 23.555C37.2196 22.6936 36.5289 22.0029 35.6675 21.4831C34.806 20.9633 33.8703 20.7033 32.8604 20.7033C32.2069 20.7033 31.5831 20.8073 30.989 21.0152L29.5186 18.5646H33.1723C33.4693 18.5646 33.7218 18.4606 33.9297 18.2527C34.1377 18.0447 34.2416 17.7923 34.2416 17.4952V16.0694C34.2416 15.7723 34.1377 15.5198 33.9297 15.3119C33.7218 15.104 33.4693 15 33.1723 15H31.1672C30.8404 15 30.5731 15.1188 30.3652 15.3565L28.672 17.2279L27.6917 15.5347C27.4838 15.1782 27.1719 15 26.756 15H23.1914C22.9835 15 22.8127 15.0668 22.679 15.2005C22.5454 15.3342 22.4785 15.505 22.4785 15.7129V16.4258C22.4785 16.6338 22.5454 16.8046 22.679 16.9382C22.8127 17.0719 22.9835 17.1388 23.1914 17.1388H26.1322L27.0234 18.5646H20.1615C19.716 18.0002 19.1813 17.5695 18.5575 17.2724C17.8149 16.9457 16.8643 16.7823 15.7058 16.7823H13.2552C12.9284 16.7823 12.6611 16.8863 12.4531 17.0942C12.2452 17.3021 12.1412 17.5546 12.1412 17.8517C12.1412 18.1487 12.2452 18.4012 12.4531 18.6091C12.6611 18.8171 12.9136 18.921 13.2106 18.921H15.7058C16.6564 18.921 17.3693 19.2924 17.8446 20.035L17.3099 20.9261C16.7158 20.7479 16.1068 20.6736 15.483 20.7033C14.5028 20.733 13.5968 21.0004 12.765 21.5054C11.9333 22.0103 11.2724 22.6861 10.7822 23.5327C10.2921 24.3793 10.0322 25.2927 10.0025 26.273C9.97277 27.3127 10.2104 28.2855 10.7154 29.1915C11.2204 30.0975 11.9184 30.8104 12.8096 31.3302C13.7007 31.8501 14.6661 32.11 15.7058 32.11C17.0128 32.11 18.1787 31.709 19.2036 30.907C20.2284 30.1049 20.9042 29.0801 21.2309 27.8325H24.9737C25.2708 27.8325 25.5307 27.7211 25.7535 27.4983C25.9763 27.2755 26.0728 27.0156 26.0431 26.7186C26.0134 25.6492 26.2139 24.6244 26.6446 23.6441C27.0753 22.6639 27.7066 21.8321 28.5383 21.1489L29.1176 22.0846C28.4937 22.6193 28.0036 23.2654 27.6472 24.0229C27.2907 24.7803 27.1125 25.5898 27.1125 26.4512C27.1125 27.4612 27.365 28.3969 27.8699 29.2583C28.3749 30.1198 29.0656 30.8104 29.9419 31.3302C30.8182 31.8501 31.7687 32.11 32.7935 32.11ZM15.7058 29.9713C14.7255 29.9713 13.8864 29.6222 13.1883 28.9242C12.4903 28.2261 12.1412 27.3869 12.1412 26.4067C12.1412 25.4264 12.4903 24.5872 13.1883 23.8892C13.8864 23.1911 14.7255 22.8421 15.7058 22.8421C15.884 22.8421 16.0623 22.8569 16.2405 22.8866L14.4136 26.2284C14.2057 26.5849 14.2057 26.9414 14.4136 27.2978C14.6216 27.6543 14.9335 27.8325 15.3494 27.8325H18.9585C18.6911 28.486 18.2604 29.0058 17.6663 29.392C17.0722 29.7782 16.4187 29.9713 15.7058 29.9713ZM32.994 29.9713C31.9841 30.0307 31.1078 29.7039 30.3652 28.991C29.6225 28.2781 29.2512 27.4166 29.2512 26.4067C29.2512 25.4561 29.578 24.6392 30.2315 23.956L32.4593 27.6097C32.5485 27.7879 32.6896 27.8993 32.8826 27.9439C33.0757 27.9885 33.2465 27.9662 33.3951 27.8771L34.0189 27.476C34.1971 27.3869 34.3085 27.2458 34.353 27.0527C34.3976 26.8597 34.3753 26.6889 34.2862 26.5403L32.1029 22.9312C32.3405 22.8718 32.5782 22.8421 32.8158 22.8421C33.8258 22.8421 34.6872 23.2134 35.4001 23.956C36.113 24.6986 36.4398 25.5749 36.3804 26.5849C36.321 27.5057 35.9719 28.2855 35.3333 28.9242C34.6946 29.5628 33.9149 29.9118 32.994 29.9713Z"

package/src/components/molecules/obligation/icons/PropertyPersonalIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PropertyBusinessIcon = () => (
+const PropertyPersonalIcon = ({ color }) => (
   <svg
     width="48"
     height="48"
@@ -10,7 +10,7 @@ const PropertyBusinessIcon = () => (
   >
     <path
       d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
-      fill="#3B5BDB"
+      fill={color}
     />
     <path
       fillRule="evenodd"

package/src/components/molecules/obligation/icons/PropertyStorefrontIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PropertyStorefrontIcon = () => (
+const PropertyStorefrontIcon = ({ color }) => (
   <svg
     width="48"
     height="48"
@@ -10,7 +10,7 @@ const PropertyStorefrontIcon = () => (
   >
     <path
       d="M0 18C0 9.51472 0 5.27208 2.63604 2.63604C5.27208 0 9.51472 0 18 0H30C38.4853 0 42.7279 0 45.364 2.63604C48 5.27208 48 9.51472 48 18V30C48 38.4853 48 42.7279 45.364 45.364C42.7279 48 38.4853 48 30 48H18C9.51472 48 5.27208 48 2.63604 45.364C0 42.7279 0 38.4853 0 30V18Z"
-      fill="#3B5BDB"
+      fill={color}
     />
     <path
       d="M36.5244 20.7878C36.8705 20.7878 37.1734 20.6724 37.4329 20.4417C37.6925 20.2109 37.8439 19.9297 37.8872 19.5981C37.9305 19.2664 37.8656 18.9419 37.6925 18.6247L33.972 13.0872C33.7124 12.6834 33.3375 12.4815 32.8472 12.4815H15.2829C14.7926 12.4815 14.4177 12.6834 14.1581 13.0872L10.4809 18.6247C10.279 18.9419 10.1997 19.2664 10.243 19.5981C10.2862 19.9297 10.4376 20.2109 10.6972 20.4417C10.9568 20.6724 11.2596 20.7878 11.6057 20.7878H36.5244ZM25.4495 34.6315C25.8244 34.6315 26.1488 34.4945 26.4228 34.2205C26.6968 33.9465 26.8338 33.6221 26.8338 33.2471V22.1721H24.0651V29.094H15.7588V22.1721H12.9901V33.2471C12.9901 33.6221 13.1271 33.9465 13.4011 34.2205C13.6751 34.4945 13.9995 34.6315 14.3745 34.6315H25.4495ZM34.4479 34.6315C34.6498 34.6315 34.8156 34.5666 34.9454 34.4368C35.0752 34.307 35.1401 34.1412 35.1401 33.9393V22.1721H32.3713V33.9393C32.3713 34.1412 32.4362 34.307 32.566 34.4368C32.6958 34.5666 32.8616 34.6315 33.0635 34.6315H34.4479Z"

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

@@ -5,6 +5,8 @@ import Text from "../../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency, noop } from "../../../../util/general";
 import AutopayModalModule from "./AutopayModalModule";
+import LoadingLine from "../../../atoms/loading-line";
+import { GRECIAN_GREY } from "../../../../constants/colors";
 
 const AmountModule = ({
   totalAmountDue,
@@ -19,7 +21,8 @@ const AmountModule = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  disableActions = false
+  disableActions = false,
+  isLoading = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -30,43 +33,66 @@ const AmountModule = ({
             Amount Due
           </Text>
         )}
-        <AmountCallout
-          amount={displayCurrency(totalAmountDue)}
-          textAlign={isMobile ? "left" : "right"}
-        />
-        {autoPayEnabled && (
-          <AutopayModalModule
-            autoPayActive={autoPayEnabled}
-            autoPaySchedule={autoPaySchedule}
-            toggleModal={toggleModal}
-            modalOpen={modalOpen}
-            navigateToSettings={navigateToSettings}
-            deactivatePaymentSchedule={deactivatePaymentSchedule}
-            isMobile={isMobile}
-            paymentPlanSchedule={paymentPlanSchedule}
-            isPaymentPlan={isPaymentPlan}
-            nextAutopayDate={nextAutopayDate}
-            controlType="link"
-            description={description}
-            subDescription={subDescription}
-            allowedPaymentInstruments={allowedPaymentInstruments}
-            disableActions={disableActions}
-            action={disableActions ? noop : () => toggleModal(true)}
-            onClick={
-              disableActions
-                ? noop
-                : () => {
-                    toggleModal(true);
-                  }
-            }
-            onKeyPress={
-              disableActions
-                ? noop
-                : e => {
-                    e.key === "Enter" && toggleModal(true);
-                  }
-            }
-          />
+        {isLoading ? (
+          <>
+            <LoadingLine
+              minWidth={"70"}
+              maxWidth={"80"}
+              height={"26px"}
+              margin={isMobile ? "0" : "0 0 0 auto"}
+              foregroundColor={GRECIAN_GREY}
+              style={{ borderRadius: "0.125rem" }}
+            />
+            <LoadingLine
+              minWidth={"134"}
+              maxWidth={"178"}
+              height={"21px"}
+              margin={isMobile ? "0.25rem 0 0 0" : "0.25rem 0 0 auto"}
+              foregroundColor={GRECIAN_GREY}
+              style={{ borderRadius: "0.125rem" }}
+            />
+          </>
+        ) : (
+          <>
+            <AmountCallout
+              amount={displayCurrency(totalAmountDue)}
+              textAlign={isMobile ? "left" : "right"}
+            />
+            {autoPayEnabled && (
+              <AutopayModalModule
+                autoPayActive={autoPayEnabled}
+                autoPaySchedule={autoPaySchedule}
+                toggleModal={toggleModal}
+                modalOpen={modalOpen}
+                navigateToSettings={navigateToSettings}
+                deactivatePaymentSchedule={deactivatePaymentSchedule}
+                isMobile={isMobile}
+                paymentPlanSchedule={paymentPlanSchedule}
+                isPaymentPlan={isPaymentPlan}
+                nextAutopayDate={nextAutopayDate}
+                controlType="link"
+                description={description}
+                subDescription={subDescription}
+                allowedPaymentInstruments={allowedPaymentInstruments}
+                disableActions={disableActions}
+                action={disableActions ? noop : () => toggleModal(true)}
+                onClick={
+                  disableActions
+                    ? noop
+                    : () => {
+                        toggleModal(true);
+                      }
+                }
+                onKeyPress={
+                  disableActions
+                    ? noop
+                    : e => {
+                        e.key === "Enter" && toggleModal(true);
+                      }
+                }
+              />
+            )}
+          </>
         )}
       </Stack>
     </Box>

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Modal from "../../modal";
 import ButtonWithAction from "../../../atoms/button-with-action";
 import Text from "../../../atoms/text";
@@ -8,6 +8,7 @@ import { SEA_GREEN } from "../../../../constants/colors";
 import { ACH_METHOD, CC_METHOD } from "../../../../constants/general";
 import { titleCaseString, noop } from "../../../../util/general";
 import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
+import Paragraph from "../../../atoms/paragraph/index";
 
 const AutopayModalModule = ({
   autoPayActive,
@@ -16,6 +17,7 @@ const AutopayModalModule = ({
   toggleModal,
   modalOpen,
   deactivatePaymentSchedule,
+  deactivatingSchedule,
   navigateToSettings,
   controlType = "tertiary",
   isMobile,
@@ -32,8 +34,8 @@ const AutopayModalModule = ({
   onKeyPress
 }) => {
   const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
-    const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
-    const allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    const allowsCard = allowedPaymentInstruments?.includes(CC_METHOD);
+    const allowsACH = allowedPaymentInstruments?.includes(ACH_METHOD);
     const methodRequired =
       allowsCard && !allowsACH
         ? "debit or credit card payment method"
@@ -52,15 +54,38 @@ const AutopayModalModule = ({
     description
   )}: ${titleCaseString(subDescription)}`;
   const nextDate = dueDate || nextAutopayDate;
+
+  // Close modal when deactivation successfully completes.
+  useEffect(() => {
+    if (autoPayActive && deactivatingSchedule === false) {
+      toggleModal(false);
+    }
+  }, [autoPayActive, deactivatingSchedule]);
+
   const modalExtraProps = {
     modalHeaderText: autoPayActive ? deactivateText : activateText,
-    modalBodyText: autoPayActive
-      ? `Are you sure you want to stop ${plan}? ${
-          !inactive && nextDate && nextDate !== "On"
-            ? "Your next payment will be due on " + nextDate + "."
-            : ""
-        }`
-      : generateMethodNeededText(plan, allowedPaymentInstruments),
+    modalBodyText: autoPayActive ? (
+      <>
+        <Paragraph>
+          Are you sure you want to stop {plan}?
+          {!inactive && nextDate && nextDate !== "On"
+            ? " Your next payment will be due on " + nextDate + "."
+            : ""}
+        </Paragraph>
+        {!isPaymentPlan && (
+          <>
+            <br />
+            <Paragraph>
+              If your next autopayment is scheduled to run today, you may be
+              billed today and autopay will then stop for the next billing
+              cycle.
+            </Paragraph>
+          </>
+        )}
+      </>
+    ) : (
+      generateMethodNeededText(plan, allowedPaymentInstruments)
+    ),
     continueButtonText: autoPayActive ? `Stop ${shortPlan}` : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
@@ -69,9 +94,9 @@ const AutopayModalModule = ({
             isPaymentPlan ? paymentPlanSchedule : autoPaySchedule,
             isPaymentPlan
           );
-          toggleModal(false);
         }
-      : navigateToSettings
+      : navigateToSettings,
+    isLoading: deactivatingSchedule
   };
   const modalLinkHoverFocus = `
     outline: none;

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

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 import { GHOST_GREY } from "../../../../constants/colors";
 import { Box, Cluster } from "../../../atoms/layouts";
+import ButtonWithAction from "../../../atoms/button-with-action";
 import AutopayModalModule from "./AutopayModalModule";
 import RemoveAccountModalModule from "./RemoveAccountModalModule";
 import { noop } from "../../../../util/general";
 
 const InactiveControlsModule = ({
+  obligations,
   autoPayEnabled,
   autoPaySchedule,
   navigateToSettings,
@@ -17,16 +19,38 @@ const InactiveControlsModule = ({
   obligationAssocID,
   dueDate,
   agencyName,
+  config,
   configType,
   actions,
   description,
   subDescription,
   allowedPaymentInstruments,
-  disableActions = false
+  disableActions = false,
+  showRemoveButton = true,
+  inactiveCanNavigateToAccountDetails = false
 }) => {
   const [modalOpen, toggleModal] = useState(false);
-  const { deleteObligationAssoc } = actions;
-  const handleRemoveAccount = () => deleteObligationAssoc(obligationAssocID);
+  const {
+    deleteObligationAssoc,
+    setDetailedObligation,
+    navigateToDetailedObligation
+  } = actions;
+  const { obligationSlug } = config;
+  const detailsSlug =
+    config.type === "ACCOUNT"
+      ? `/profile/accounts/details/${obligationSlug}`
+      : `/profile/properties/details/${obligationSlug}`;
+  const handleDetailsClick = () => {
+    setDetailedObligation(obligations, config, obligationAssocID);
+    navigateToDetailedObligation(detailsSlug);
+  };
+  const handleRemoveAccount = () => {
+    const payload = {
+      id: obligationAssocID,
+      obligationSlug: config?.obligationSlug
+    };
+    deleteObligationAssoc(payload);
+  };
   return (
     <Box
       padding={isMobile ? "18px 0 0 0" : "0"}
@@ -39,6 +63,24 @@ const InactiveControlsModule = ({
         justify={isMobile && autoPayEnabled && "center"}
         align={isMobile && autoPayEnabled && "center"}
       >
+        {inactiveCanNavigateToAccountDetails && (
+          <Box
+            padding={isMobile ? "0 8px 0 0" : "0"}
+            extraStyles={isMobile && `flex-grow: 1;`}
+          >
+            <ButtonWithAction
+              variant="tertiary"
+              text={
+                config.type === "ACCOUNT"
+                  ? "Account Details"
+                  : "Property Details"
+              }
+              action={handleDetailsClick}
+              dataQa="Account Details"
+              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            />
+          </Box>
+        )}
         {autoPayEnabled && (
           <Box padding="0" extraStyles={`flex-grow: 1;`}>
             <AutopayModalModule
@@ -63,15 +105,17 @@ const InactiveControlsModule = ({
             />
           </Box>
         )}
-        <Box padding="0" extraStyles={`flex-grow: 1;`}>
-          <RemoveAccountModalModule
-            agencyName={agencyName}
-            removeAccount={disableActions ? noop : handleRemoveAccount}
-            accountType={configType === "ACCOUNT" ? "Account" : "Property"}
-            isMobile={isMobile}
-            disableActions={disableActions}
-          />
-        </Box>
+        {showRemoveButton && (
+          <Box padding="0" extraStyles={`flex-grow: 1;`}>
+            <RemoveAccountModalModule
+              agencyName={agencyName}
+              removeAccount={disableActions ? noop : handleRemoveAccount}
+              accountType={configType === "ACCOUNT" ? "Account" : "Property"}
+              isMobile={isMobile}
+              disableActions={disableActions}
+            />
+          </Box>
+        )}
       </Cluster>
     </Box>
   );

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

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

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

@@ -15,6 +15,7 @@ const PaymentDetailsActions = ({
   autoPayAvailable,
   handleAutopayAction,
   deactivatePaymentSchedule,
+  deactivatingSchedule,
   navigateToSettings,
   autoPaySchedule,
   paymentPlanSchedule,
@@ -25,7 +26,11 @@ const PaymentDetailsActions = ({
   description,
   subDescription,
   allowedPaymentInstruments,
-  disableActions = false
+  disableActions = false,
+  cartEnabled,
+  cartConfig,
+  isInCart,
+  isContentLoading
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -33,21 +38,46 @@ const PaymentDetailsActions = ({
   const { obligationSlug } = config;
   const {
     createPaymentFromProfile,
+    configureMultiCart,
+    addToMultiCart,
     setDetailedObligation,
-    navigateToDetailedObligation
+    navigateToDetailedObligation,
+    openCartSlider
   } = actions;
   const detailsSlug =
     config.type === "ACCOUNT"
       ? `/profile/accounts/details/${obligationSlug}`
       : `/profile/properties/details/${obligationSlug}`;
   const handleClick = obligations => {
-    setIsLoading(true);
-    createPaymentFromProfile(obligations, config);
+    if (isInCart) {
+      openCartSlider();
+      return;
+    }
+    if (cartEnabled && cartConfig) {
+      const { subClientSlug, addToCartConfig } = cartConfig;
+      configureMultiCart({ cartId: subClientSlug, config: cartConfig });
+      addToMultiCart({
+        cartId: subClientSlug,
+        items: addToCartConfig.items,
+        itemType: addToCartConfig.itemType
+      });
+    } else {
+      setIsLoading(true);
+      createPaymentFromProfile(obligations, config);
+    }
   };
   const handleDetailsClick = () => {
     setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
+  const variant = cartEnabled
+    ? isInCart
+      ? "greenPrimary"
+      : "secondary"
+    : isMobile
+    ? "smallSecondary"
+    : "secondary";
+  const text = cartEnabled ? (isInCart ? "In Cart" : "Add to Cart") : "Pay Now";
   return (
     <Box
       padding={isMobile ? "0" : "16px 0 0"}
@@ -82,6 +112,7 @@ const PaymentDetailsActions = ({
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
               isInCustomerManagement={disableActions}
+              isLoading={isContentLoading}
             />
           </Cluster>
         </Box>
@@ -132,6 +163,7 @@ const PaymentDetailsActions = ({
                 modalOpen={modalOpen}
                 navigateToSettings={navigateToSettings}
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
+                deactivatingSchedule={deactivatingSchedule}
                 controlType="tertiary"
                 isMobile={isMobile}
                 paymentPlanSchedule={paymentPlanSchedule}
@@ -150,9 +182,9 @@ const PaymentDetailsActions = ({
               <ButtonWithAction
                 isLoading={isLoading}
                 action={disableActions ? noop : () => handleClick(obligations)}
-                text="Pay Now"
-                variant={isMobile ? "smallSecondary" : "secondary"}
-                dataQa="Pay Now"
+                text={text}
+                variant={variant}
+                dataQa={text}
                 disabled={disableActions}
               />
             </Box>
@@ -163,9 +195,9 @@ const PaymentDetailsActions = ({
             <ButtonWithAction
               isLoading={isLoading}
               action={disableActions ? noop : () => handleClick(obligations)}
-              text="Pay Now"
-              variant={isMobile ? "smallSecondary" : "secondary"}
-              dataQa="Pay Now"
+              text={text}
+              variant={variant}
+              dataQa={text}
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
               disabled={disableActions}
             />

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

@@ -30,6 +30,7 @@ const RemoveAccountModalModule = ({
       : accountType === "Property" && obligations.length > 1
       ? "properties"
       : accountType.toLowerCase();
+  const accountsText = (accounts ?? "").trim();
 
   return (
     <Modal
@@ -37,7 +38,9 @@ const RemoveAccountModalModule = ({
       hideModal={() => setModalIsOpen(false)}
       modalOpen={modalIsOpen}
       modalHeaderText={`Remove ${accountType}`}
-      modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts}? Any autopay scheduled against ${
+      modalBodyText={`Are you sure you want to remove the ${identifier}${
+        accountsText ? ` ${accountsText}` : ""
+      }? Any autopay scheduled against ${
         obligations.length > 1 ? "them" : "it"
       } will be deactivated.`}
       continueButtonText="Remove"

package/src/components/molecules/pagination/Pagination.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as PaginationStories from './Pagination.stories.js';
+
+<Meta of={PaginationStories} />
+
+<Title />
+
+Pagination renders a control panel that can be used to interact with paginated tables of data. The component takes some props to customize the look of the controls, as well as callback functions to run when a user interacts with the previous, next, and numerical page buttons. The Pagination component should also be supplied with a number to indicate the current page the user is on as well as the total number of pages.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>