@thecb/components 11.1.10-beta.0 → 11.1.11-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.1.10-beta.0",
+  "version": "11.1.11-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -20,7 +20,7 @@ import { fallbackValues } from "./Obligation.theme";
 
 const Obligation = ({
   config,
-  obligations = [],
+  obligations,
   actions,
   autoPayEnabled,
   autoPayAvailable,
@@ -121,7 +121,6 @@ const Obligation = ({
           {!isMobile && (
             <PaymentDetailsActions
               obligations={obligations}
-              obligationAssocID={obligationAssocID}
               autoPayEnabled={autoPayEnabled}
               autoPayAvailable={autoPayAvailable}
               handleAutopayAction={handleAutopayAction}
@@ -147,7 +146,6 @@ const Obligation = ({
       {isMobile && (
         <PaymentDetailsActions
           obligations={obligations}
-          obligationAssocID={obligationAssocID}
           autoPayEnabled={autoPayEnabled}
           autoPayAvailable={autoPayAvailable}
           handleAutopayAction={handleAutopayAction}

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

@@ -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,
@@ -32,8 +33,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"
@@ -54,13 +55,28 @@ const AutopayModalModule = ({
   const nextDate = dueDate || nextAutopayDate;
   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