@thecb/components 11.5.2 → 11.6.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.5.2",
+  "version": "11.6.1-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -22,7 +22,8 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "ai-docs"
   ],
   "homepage": "https://github.com/CityBaseInc/cb-components#readme",
   "devDependencies": {

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

@@ -26,6 +26,7 @@ const Obligation = ({
   autoPayAvailable,
   handleAutopayAction,
   deactivatePaymentSchedule,
+  deactivatingSchedule = false,
   autoPaySchedule,
   paymentPlanSchedule,
   navigateToSettings,
@@ -127,6 +128,7 @@ const Obligation = ({
               autoPayAvailable={autoPayAvailable}
               handleAutopayAction={handleAutopayAction}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
+              deactivatingSchedule={deactivatingSchedule}
               autoPaySchedule={autoPaySchedule}
               paymentPlanSchedule={paymentPlanSchedule}
               navigateToSettings={navigateToSettings}
@@ -153,6 +155,7 @@ const Obligation = ({
           autoPayAvailable={autoPayAvailable}
           handleAutopayAction={handleAutopayAction}
           deactivatePaymentSchedule={deactivatePaymentSchedule}
+          deactivatingSchedule={deactivatingSchedule}
           autoPaySchedule={autoPaySchedule}
           paymentPlanSchedule={paymentPlanSchedule}
           navigateToSettings={navigateToSettings}
@@ -244,6 +247,7 @@ const Obligation = ({
               autoPayAvailable={autoPayAvailable}
               handleAutopayAction={handleAutopayAction}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
+              deactivatingSchedule={deactivatingSchedule}
               autoPaySchedule={autoPaySchedule}
               paymentPlanSchedule={paymentPlanSchedule}
               navigateToSettings={navigateToSettings}
@@ -272,6 +276,7 @@ const Obligation = ({
           autoPayAvailable={autoPayAvailable}
           handleAutopayAction={handleAutopayAction}
           deactivatePaymentSchedule={deactivatePaymentSchedule}
+          deactivatingSchedule={deactivatingSchedule}
           autoPaySchedule={autoPaySchedule}
           paymentPlanSchedule={paymentPlanSchedule}
           navigateToSettings={navigateToSettings}

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

@@ -18,6 +18,7 @@ const meta = {
     autoPayAvailable: false,
     handleAutopayAction: fn(),
     deactivatePaymentSchedule: fn(),
+    deactivatingSchedule: false,
     autoPaySchedule: undefined,
     paymentPlanSchedule: undefined,
     navigateToSettings: fn(),
@@ -84,6 +85,13 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
+    deactivatingSchedule: {
+      description: "Loading state when a payment schedule is being deactivated",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
     autoPaySchedule: {
       description: "Schedule object for autopay",
       table: {

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";
@@ -17,6 +17,7 @@ const AutopayModalModule = ({
   toggleModal,
   modalOpen,
   deactivatePaymentSchedule,
+  deactivatingSchedule,
   navigateToSettings,
   controlType = "tertiary",
   isMobile,
@@ -53,6 +54,14 @@ 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 ? (
@@ -85,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/PaymentDetailsActions.js

@@ -15,6 +15,7 @@ const PaymentDetailsActions = ({
   autoPayAvailable,
   handleAutopayAction,
   deactivatePaymentSchedule,
+  deactivatingSchedule,
   navigateToSettings,
   autoPaySchedule,
   paymentPlanSchedule,
@@ -162,6 +163,7 @@ const PaymentDetailsActions = ({
                 modalOpen={modalOpen}
                 navigateToSettings={navigateToSettings}
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
+                deactivatingSchedule={deactivatingSchedule}
                 controlType="tertiary"
                 isMobile={isMobile}
                 paymentPlanSchedule={paymentPlanSchedule}