@thecb/components 4.1.20 → 4.1.23

package/dist/index.cjs.js

@@ -20593,6 +20593,8 @@ var FormInput = function FormInput(_ref13) {
       errorMessages = _ref13.errorMessages,
       _ref13$isNum = _ref13.isNum,
       isNum = _ref13$isNum === void 0 ? false : _ref13$isNum,
+      _ref13$isEmail = _ref13.isEmail,
+      isEmail = _ref13$isEmail === void 0 ? false : _ref13$isEmail,
       _ref13$helperModal = _ref13.helperModal,
       helperModal = _ref13$helperModal === void 0 ? false : _ref13$helperModal,
       field = _ref13.field,
@@ -20605,7 +20607,7 @@ var FormInput = function FormInput(_ref13) {
       background = _ref13.background,
       customHeight = _ref13.customHeight,
       extraStyles = _ref13.extraStyles,
-      props = _objectWithoutProperties(_ref13, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
+      props = _objectWithoutProperties(_ref13, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -20672,7 +20674,7 @@ var FormInput = function FormInput(_ref13) {
     type: type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
-    inputMode: isNum ? "numeric" : "",
+    inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     formatter: formatter,
     showErrors: showErrors,
@@ -20688,7 +20690,7 @@ var FormInput = function FormInput(_ref13) {
     type: type === "password" && showPassword ? "text" : type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
-    inputMode: isNum ? "numeric" : "",
+    inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
@@ -34490,7 +34492,10 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
       children = _ref.children,
       _ref$customTitle = _ref.customTitle,
-      customTitle = _ref$customTitle === void 0 ? false : _ref$customTitle;
+      customTitle = _ref$customTitle === void 0 ? false : _ref$customTitle,
+      _ref$stackTitle = _ref.stackTitle,
+      stackTitle = _ref$stackTitle === void 0 ? false : _ref$stackTitle,
+      stackTitleContent = _ref.stackTitleContent;
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -34534,8 +34539,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     hoverStyles: "outline: none;",
     animate: isOpen ? "open" : "closed",
     positionTransition: true
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: isOpen ? "0.5rem" : "0rem"
+  }, stackTitle && /*#__PURE__*/React__default.createElement(React.Fragment, null, stackTitleContent), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: isOpen && !isMobile ? "0.5rem" : "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
@@ -34929,10 +34934,11 @@ var TableListItem = function TableListItem(_ref) {
       canEdit = _ref$canEdit === void 0 ? false : _ref$canEdit,
       _ref$canRemove = _ref.canRemove,
       canRemove = _ref$canRemove === void 0 ? false : _ref$canRemove,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      borderTopItem = _ref.borderTopItem;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0px",
-    extraStyles: "&:last-child {\n    > * {\n      border-bottom: none;\n    }\n  }"
+    extraStyles: "&:last-child {\n    > * {\n      border-bottom: none;\n    }\n  }\n  ".concat(isMobile && borderTopItem && "&:first-child {\n    > * {\n      border-top: 1px solid ".concat(GHOST_GREY, ";\n    }\n  }"), "\n  ")
   }, /*#__PURE__*/React__default.createElement(ItemWrapper, null, /*#__PURE__*/React__default.createElement(EditableTableListItem, {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(TableItemKey, {
@@ -35000,7 +35006,8 @@ var EmailForm = function EmailForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isEmail: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
@@ -35051,7 +35058,8 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isEmail: true
   });
 };
 
@@ -35154,7 +35162,8 @@ var LoginForm = function LoginForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isEmail: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -38151,7 +38160,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,
@@ -38172,7 +38181,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),
@@ -38227,11 +38237,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);
@@ -38244,7 +38254,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),
@@ -38255,11 +38266,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, {
@@ -38271,7 +38278,8 @@ var AmountModule = function AmountModule(_ref) {
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     isMobile: isMobile,
     paymentPlanSchedule: paymentPlanSchedule,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   })));
 };
 
@@ -38287,7 +38295,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),
@@ -38342,7 +38351,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, {
@@ -38380,7 +38390,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;"
@@ -38420,7 +38431,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, {
@@ -38466,7 +38478,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,
@@ -38479,7 +38492,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,
@@ -38492,7 +38506,8 @@ var Obligation = function Obligation(_ref) {
     config: config,
     actions: actions,
     isMobile: isMobile,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   }));
 };
 
@@ -38544,6 +38559,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
       },
       placeholder: "$0.00",
       formatter: moneyFormat,
+      isNum: true,
       decorator: /*#__PURE__*/React__default.createElement(Text$1, {
         variant: "p"
       }, "Amount owed:", "  ", /*#__PURE__*/React__default.createElement(Text$1, {
@@ -39114,6 +39130,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
     showErrors: showErrors,
+    isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
@@ -39135,13 +39152,15 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
     errorMessages: accountNumberErrors,
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
+    isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
@@ -39163,7 +39182,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
     options: [{
@@ -39298,7 +39318,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     formatter: creditCardFormat,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: "20rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
@@ -39310,13 +39331,15 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     formatter: expirationDateFormat,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     errorMessages: cvvErrors,
     field: fields.cvv,
     fieldActions: actions.fields.cvv,
     showErrors: showErrors,
+    isNum: true,
     background: checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX" ? "/AmexCVVHint.svg" : "/CVVHint.svg",
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
@@ -39415,7 +39438,8 @@ var PhoneForm = function PhoneForm(_ref) {
     formatter: src_2(phoneFormats, formatDelimiter),
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    isNum: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -39696,7 +39720,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "email"
+    type: "email",
+    isEmail: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,

package/package.json

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

package/src/components/atoms/form-layouts/FormInput.js

@@ -85,6 +85,7 @@ const FormInput = ({
   labelTextWhenNoError = "",
   errorMessages,
   isNum = false,
+  isEmail = false,
   helperModal = false,
   field,
   fieldActions,
@@ -176,7 +177,7 @@ const FormInput = ({
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
-            inputMode={isNum ? "numeric" : ""}
+            inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             formatter={formatter}
             showErrors={showErrors}
@@ -193,7 +194,7 @@ const FormInput = ({
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
-            inputMode={isNum ? "numeric" : ""}
+            inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             showErrors={showErrors}
             data-qa={labelTextWhenNoError}

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { fallbackValues } from "./CollapsibleSection.theme";
 import { AnimatePresence } from "framer-motion";
 import { themeComponent } from "../../../util/themeUtils";
@@ -19,7 +19,9 @@ const CollapsibleSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   children,
-  customTitle = false
+  customTitle = false,
+  stackTitle = false,
+  stackTitleContent
 }) => {
   const handleKeyDown = e => {
     if (e.keyCode === 13) {
@@ -68,7 +70,8 @@ const CollapsibleSection = ({
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >
-      <Stack childGap={isOpen ? "0.5rem" : "0rem"}>
+      {stackTitle && <Fragment>{stackTitleContent}</Fragment>}
+      <Stack childGap={isOpen && !isMobile ? "0.5rem" : "0rem"}>
         <Box
           padding={customPadding ? customPadding : "0"}
           background={themeValues.headingBackgroundColor}

package/src/components/molecules/editable-table/TableListItem.js

@@ -9,14 +9,15 @@ import {
 } from "./EditableTable.styled";
 import { Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
-import { CHARADE_GREY } from "../../../constants/colors";
+import { CHARADE_GREY, GHOST_GREY } from "../../../constants/colors";
 
 const TableListItem = ({
   title,
   value,
   canEdit = false,
   canRemove = false,
-  isMobile
+  isMobile,
+  borderTopItem
 }) => (
   <Box
     padding="0px"
@@ -24,7 +25,15 @@ const TableListItem = ({
     > * {
       border-bottom: none;
     }
+  }
+  ${isMobile &&
+    borderTopItem &&
+    `&:first-child {
+    > * {
+      border-top: 1px solid ${GHOST_GREY};
+    }
   }`}
+  `}
   >
     <ItemWrapper>
       <EditableTableListItem isMobile={isMobile}>

package/src/components/molecules/email-form/EmailForm.js

@@ -45,6 +45,7 @@ const EmailForm = ({
           fieldActions={actions.fields.email}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isEmail
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -26,6 +26,7 @@ const ForgotPasswordForm = ({
       fieldActions={actions.fields.email}
       showErrors={showErrors}
       onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+      isEmail
     />
   );
 };

package/src/components/molecules/login-form/LoginForm.js

@@ -30,6 +30,7 @@ const LoginForm = ({
         fieldActions={actions.fields.email}
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        isEmail
       />
       <FormInput
         labelTextWhenNoError="Password"

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>

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -57,6 +57,7 @@ const PartialAmountForm = ({
             style={{ textAlign: "right" }}
             placeholder="$0.00"
             formatter={moneyFormat}
+            isNum
             decorator={
               <Text variant="p">
                 Amount owed:{"  "}

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -77,6 +77,7 @@ const PaymentFormACH = ({
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
+          isNum
           helperModal={() => (
             <AccountAndRoutingModal
               link="What is this?"
@@ -97,6 +98,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         <FormInput
           labelTextWhenNoError="Account number"
@@ -104,6 +106,7 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
+          isNum
           helperModal={() => (
             <AccountAndRoutingModal
               link="What is this?"
@@ -124,6 +127,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         {allowBankAccountType && (
           <FormSelect

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -94,6 +94,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           formatter={creditCardFormat}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         <FormInputRow breakpoint="20rem">
           <FormInput
@@ -104,6 +105,7 @@ const PaymentFormCard = ({
             showErrors={showErrors}
             formatter={expirationDateFormat}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            isNum
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -111,6 +113,7 @@ const PaymentFormCard = ({
             field={fields.cvv}
             fieldActions={actions.fields.cvv}
             showErrors={showErrors}
+            isNum
             background={
               checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX"
                 ? "/AmexCVVHint.svg"

package/src/components/molecules/phone-form/PhoneForm.js

@@ -40,6 +40,7 @@ const PhoneForm = ({
           showErrors={showErrors}
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
+          isNum
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -76,6 +76,7 @@ const RegistrationForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="email"
+        isEmail
       />
       <FormInput
         labelTextWhenNoError="Password"