@thecb/components 4.1.21 → 4.1.22

package/dist/index.cjs.js

@@ -38156,7 +38156,7 @@ var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
 var linkColor$3 = "#357fb8";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
-var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #357fb8;";
+var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
 var fallbackValues$w = {
   color: color$a,
   hoverColor: hoverColor$4,
@@ -38177,7 +38177,8 @@ var AutopayModal = function AutopayModal(_ref) {
       buttonLinkType = _ref.buttonLinkType,
       isMobile = _ref.isMobile,
       themeValues = _ref.themeValues,
-      isPaymentPlan = _ref.isPaymentPlan;
+      isPaymentPlan = _ref.isPaymentPlan,
+      nextAutopayDate = _ref.nextAutopayDate;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   var modalExtraProps = {
     modalHeaderText: autoPayActive ? "Deactivate ".concat(planType) : "Set Up ".concat(planType),
@@ -38232,11 +38233,11 @@ var AutopayModal = function AutopayModal(_ref) {
     },
     tabIndex: "0",
     dataQa: "".concat(planType, " On"),
-    color: themeValues.linkColor,
+    color: SEA_GREEN,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "padding: 0 0 0 6px;"
-  }, "".concat(planType, " On")))));
+    extraStyles: "padding-left: 0.25rem;"
+  }, "".concat(planType, " ").concat(nextAutopayDate)))));
 };
 
 var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$w);
@@ -38249,7 +38250,8 @@ var AmountModule = function AmountModule(_ref) {
       navigateToSettings = _ref.navigateToSettings,
       autoPaySchedule = _ref.autoPaySchedule,
       paymentPlanSchedule = _ref.paymentPlanSchedule,
-      isPaymentPlan = _ref.isPaymentPlan;
+      isPaymentPlan = _ref.isPaymentPlan,
+      nextAutopayDate = _ref.nextAutopayDate;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -38260,11 +38262,7 @@ var AmountModule = function AmountModule(_ref) {
     padding: "0 0.25rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
-    weight: FONT_WEIGHT_SEMIBOLD,
-    extraStyles: isMobile ? "text-align: left;" : "text-align: right;"
-  }, isMobile ? "Total Due" : "Total Amount Due"), /*#__PURE__*/React__default.createElement(AmountCallout$1, {
+  }, /*#__PURE__*/React__default.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
     textAlign: isMobile ? "left" : "right"
   }), autoPayEnabled && /*#__PURE__*/React__default.createElement(AutopayModalModule, {
@@ -38276,7 +38274,8 @@ var AmountModule = function AmountModule(_ref) {
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     isMobile: isMobile,
     paymentPlanSchedule: paymentPlanSchedule,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   })));
 };
 
@@ -38292,7 +38291,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
       navigateToSettings = _ref.navigateToSettings,
       autoPaySchedule = _ref.autoPaySchedule,
       paymentPlanSchedule = _ref.paymentPlanSchedule,
-      isPaymentPlan = _ref.isPaymentPlan;
+      isPaymentPlan = _ref.isPaymentPlan,
+      nextAutopayDate = _ref.nextAutopayDate;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
 
   var _useState = React.useState(false),
@@ -38347,7 +38347,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     navigateToSettings: navigateToSettings,
     autoPaySchedule: autoPaySchedule,
     paymentPlanSchedule: paymentPlanSchedule,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -38385,7 +38386,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     buttonLinkType: true,
     isMobile: isMobile,
     paymentPlanSchedule: paymentPlanSchedule,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0 0 0 8px" : "8px",
     extraStyles: isMobile && "flex-grow: 1;"
@@ -38425,7 +38427,8 @@ var Obligation = function Obligation(_ref) {
       paymentPlanSchedule = _ref.paymentPlanSchedule,
       navigateToSettings = _ref.navigateToSettings,
       isMobile = _ref.isMobile,
-      isPaymentPlan = _ref.isPaymentPlan;
+      isPaymentPlan = _ref.isPaymentPlan,
+      nextAutopayDate = _ref.nextAutopayDate;
   var obligation = obligations[0];
   var customAttributes = obligation.customAttributes;
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -38471,7 +38474,8 @@ var Obligation = function Obligation(_ref) {
     navigateToSettings: navigateToSettings,
     autoPaySchedule: autoPaySchedule,
     paymentPlanSchedule: paymentPlanSchedule,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -38484,7 +38488,8 @@ var Obligation = function Obligation(_ref) {
     config: config,
     actions: actions,
     isMobile: isMobile,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -38497,7 +38502,8 @@ var Obligation = function Obligation(_ref) {
     config: config,
     actions: actions,
     isMobile: isMobile,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.21",
+  "version": "4.1.22",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -20,7 +20,8 @@ const Obligation = ({
   paymentPlanSchedule,
   navigateToSettings,
   isMobile,
-  isPaymentPlan
+  isPaymentPlan,
+  nextAutopayDate
 }) => {
   const obligation = obligations[0];
   const { customAttributes } = obligation;
@@ -71,6 +72,7 @@ const Obligation = ({
                   autoPaySchedule={autoPaySchedule}
                   paymentPlanSchedule={paymentPlanSchedule}
                   isPaymentPlan={isPaymentPlan}
+                  nextAutopayDate={nextAutopayDate}
                 />
               )}
             </Cluster>
@@ -89,6 +91,7 @@ const Obligation = ({
               actions={actions}
               isMobile={isMobile}
               isPaymentPlan={isPaymentPlan}
+              nextAutopayDate={nextAutopayDate}
             />
           )}
         </Stack>
@@ -107,6 +110,7 @@ const Obligation = ({
           actions={actions}
           isMobile={isMobile}
           isPaymentPlan={isPaymentPlan}
+          nextAutopayDate={nextAutopayDate}
         />
       )}
     </Box>

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

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
-import Text from "../../../atoms/text";
 import AmountCallout from "../../../atoms/amount-callout";
 import { Box, Stack } from "../../../atoms/layouts";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency } from "../../../../util/general";
 import { AutopayModalModule } from "./AutopayModalModule";
 
@@ -14,19 +12,13 @@ const AmountModule = ({
   navigateToSettings,
   autoPaySchedule,
   paymentPlanSchedule,
-  isPaymentPlan
+  isPaymentPlan,
+  nextAutopayDate
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
     <Box padding="0 0.25rem 0 0">
       <Stack childGap="0">
-        <Text
-          variant="pS"
-          weight={FONT_WEIGHT_SEMIBOLD}
-          extraStyles={isMobile ? `text-align: left;` : `text-align: right;`}
-        >
-          {isMobile ? "Total Due" : "Total Amount Due"}
-        </Text>
         <AmountCallout
           amount={displayCurrency(totalAmountDue)}
           textAlign={isMobile ? "left" : "right"}
@@ -42,6 +34,7 @@ const AmountModule = ({
             isMobile={isMobile}
             paymentPlanSchedule={paymentPlanSchedule}
             isPaymentPlan={isPaymentPlan}
+            nextAutopayDate={nextAutopayDate}
           />
         )}
       </Stack>

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

@@ -4,6 +4,7 @@ import ButtonWithAction from "../../../atoms/button-with-action";
 import Text from "../../../atoms/text";
 import { AutopayOnIcon } from "../../../atoms/icons";
 import { Box, Cluster } from "../../../atoms/layouts";
+import { SEA_GREEN } from "../../../../constants/colors";
 import { fallbackValues } from "./AutopayModalModule.theme";
 import { themeComponent } from "../../../../util/themeUtils";
 
@@ -18,7 +19,8 @@ const AutopayModal = ({
   buttonLinkType,
   isMobile,
   themeValues,
-  isPaymentPlan
+  isPaymentPlan,
+  nextAutopayDate
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const modalExtraProps = {
@@ -101,12 +103,12 @@ const AutopayModal = ({
               }}
               tabIndex="0"
               dataQa={`${planType} On`}
-              color={themeValues.linkColor}
+              color={SEA_GREEN}
               weight={themeValues.fontWeight}
               hoverStyles={themeValues.modalLinkHoverFocus}
-              extraStyles={`padding: 0 0 0 6px;`}
+              extraStyles={`padding-left: 0.25rem;`}
             >
-              {`${planType} On`}
+              {`${planType} ${nextAutopayDate}`}
             </Text>
           </Cluster>
         </Box>

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

@@ -8,7 +8,7 @@ const fontWeight = FONT_WEIGHT_REGULAR;
 const modalLinkHoverFocus = `outline: none;
   cursor: pointer;
   text-decoration: underline;
-  text-decoration-color: #357fb8;`;
+  text-decoration-color: #317D4F;`;
 
 export const fallbackValues = {
   color,

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

@@ -17,7 +17,8 @@ const PaymentDetailsActions = ({
   navigateToSettings,
   autoPaySchedule,
   paymentPlanSchedule,
-  isPaymentPlan
+  isPaymentPlan,
+  nextAutopayDate
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -69,6 +70,7 @@ const PaymentDetailsActions = ({
               autoPaySchedule={autoPaySchedule}
               paymentPlanSchedule={paymentPlanSchedule}
               isPaymentPlan={isPaymentPlan}
+              nextAutopayDate={nextAutopayDate}
             />
           </Cluster>
         </Box>
@@ -122,6 +124,7 @@ const PaymentDetailsActions = ({
                 isMobile={isMobile}
                 paymentPlanSchedule={paymentPlanSchedule}
                 isPaymentPlan={isPaymentPlan}
+                nextAutopayDate={nextAutopayDate}
               />
             )}
           </Box>