@thecb/components 4.1.21 → 4.1.24-beta.0

package/dist/index.cjs.js

@@ -34492,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) {
@@ -34536,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,
@@ -34931,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, {
@@ -34986,15 +34990,15 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
 
-  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
+  var emailFieldErrorMessages = (_emailFieldErrorMessa = {}, _defineProperty(_emailFieldErrorMessa, required.error, "Email address is required"), _defineProperty(_emailFieldErrorMessa, isProbablyEmail.error, "Invalid email address"), _emailFieldErrorMessa);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
-    "aria-label": "Email"
+    "aria-label": "Email address"
   }, guestCheckout && /*#__PURE__*/React__default.createElement(Paragraph$1, {
     margin: "0 0 1.125rem 0"
   }, "If desired, you can create a wallet later for faster checkout"), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Email",
+    labelTextWhenNoError: "Email address",
     errorMessages: emailFieldErrorMessages,
     type: "email",
     field: fields.email,
@@ -35045,9 +35049,9 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     }, []);
   }
 
-  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email is not valid"), _EmailErrorMessages);
+  var EmailErrorMessages = (_EmailErrorMessages = {}, _defineProperty(_EmailErrorMessages, required.error, "Email address is required"), _defineProperty(_EmailErrorMessages, isProbablyEmail.error, "Email address is not valid"), _EmailErrorMessages);
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Email",
+    labelTextWhenNoError: "Email address",
     errorMessages: EmailErrorMessages,
     field: fields.email,
     fieldActions: actions.fields.email,
@@ -35142,7 +35146,7 @@ var LoginForm = function LoginForm(_ref) {
     }, []);
   }
 
-  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
+  var emailErrorMessages = (_emailErrorMessages = {}, _defineProperty(_emailErrorMessages, required.error, "Email address is required"), _defineProperty(_emailErrorMessages, isProbablyEmail.error, "Invalid email address"), _emailErrorMessages);
 
   var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
 
@@ -35150,7 +35154,7 @@ var LoginForm = function LoginForm(_ref) {
     role: "form",
     "aria-label": "Login"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
-    labelTextWhenNoError: "Email",
+    labelTextWhenNoError: "Email address",
     errorMessages: emailErrorMessages,
     type: "email",
     field: fields.email,
@@ -38156,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,
@@ -38177,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),
@@ -38232,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);
@@ -38249,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),
@@ -38260,11 +38266,11 @@ var AmountModule = function AmountModule(_ref) {
     padding: "0 0.25rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, isMobile && /*#__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, {
+    textAlign: "left"
+  }, "Amount Due"), /*#__PURE__*/React__default.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
     textAlign: isMobile ? "left" : "right"
   }), autoPayEnabled && /*#__PURE__*/React__default.createElement(AutopayModalModule, {
@@ -38276,7 +38282,8 @@ var AmountModule = function AmountModule(_ref) {
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     isMobile: isMobile,
     paymentPlanSchedule: paymentPlanSchedule,
-    isPaymentPlan: isPaymentPlan
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate
   })));
 };
 
@@ -38292,7 +38299,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 +38355,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 +38394,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 +38435,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 +38482,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 +38496,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 +38510,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.24-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -25,12 +25,12 @@ const EmailForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const emailFieldErrorMessages = {
-    [required.error]: "Email is required",
+    [required.error]: "Email address is required",
     [isProbablyEmail.error]: "Invalid email address"
   };
 
   return (
-    <FormContainer variant={variant} role="form" aria-label="Email">
+    <FormContainer variant={variant} role="form" aria-label="Email address">
       {guestCheckout && (
         <Paragraph margin="0 0 1.125rem 0">
           If desired, you can create a wallet later for faster checkout
@@ -38,7 +38,7 @@ const EmailForm = ({
       )}
       <FormInputColumn>
         <FormInput
-          labelTextWhenNoError="Email"
+          labelTextWhenNoError="Email address"
           errorMessages={emailFieldErrorMessages}
           type="email"
           field={fields.email}

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

@@ -14,13 +14,13 @@ const ForgotPasswordForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const EmailErrorMessages = {
-    [required.error]: "Email is required",
-    [isProbablyEmail.error]: "Email is not valid"
+    [required.error]: "Email address is required",
+    [isProbablyEmail.error]: "Email address is not valid"
   };
 
   return (
     <FormInput
-      labelTextWhenNoError="Email"
+      labelTextWhenNoError="Email address"
       errorMessages={EmailErrorMessages}
       field={fields.email}
       fieldActions={actions.fields.email}

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

@@ -14,7 +14,7 @@ const LoginForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const emailErrorMessages = {
-    [required.error]: "Email is required",
+    [required.error]: "Email address is required",
     [isProbablyEmail.error]: "Invalid email address"
   };
   const passwordErrorMessages = {
@@ -23,7 +23,7 @@ const LoginForm = ({
   return (
     <FormInputColumn role="form" aria-label="Login">
       <FormInput
-        labelTextWhenNoError="Email"
+        labelTextWhenNoError="Email address"
         errorMessages={emailErrorMessages}
         type="email"
         field={fields.email}

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,7 +1,7 @@
 import React, { useState } from "react";
-import Text from "../../../atoms/text";
 import AmountCallout from "../../../atoms/amount-callout";
 import { Box, Stack } from "../../../atoms/layouts";
+import Text from "../../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency } from "../../../../util/general";
 import { AutopayModalModule } from "./AutopayModalModule";
@@ -14,19 +14,18 @@ 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>
+        {isMobile && (
+          <Text variant="pS" weight={FONT_WEIGHT_SEMIBOLD} textAlign="left">
+            Amount Due
+          </Text>
+        )}
         <AmountCallout
           amount={displayCurrency(totalAmountDue)}
           textAlign={isMobile ? "left" : "right"}
@@ -42,6 +41,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>