@thecb/components 7.7.0-beta.0 → 7.7.0-beta.1

package/package.json

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

package/src/components/atoms/{icons/PaymentIcon.js → formatted-bank-account/FormattedBankAccount.js}

@@ -1,7 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import { REGENT_GREY, CHARADE_GREY } from "../../../constants/colors";
-import BankIcon from "./BankIcon";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./FormattedBankAccount.theme";
+import BankIcon from "../icons/BankIcon";
 import { Stack, Box } from "../layouts";
 import Text from "../text";
 
@@ -12,7 +13,7 @@ export const BankItemWrapper = styled.div`
 `;
 
 export const BankAccountText = styled.h4`
-  color: ${CHARADE_GREY};
+  color: ${({ color }) => color};
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
@@ -24,22 +25,31 @@ export const BankAccountText = styled.h4`
 const CHECKING = "CHECKING";
 const SAVINGS = "SAVINGS";
 
-const PaymentIcon = ({ lastFour, accountType, autoPay }) => (
+const FormattedBankAccount = ({
+  lastFour,
+  accountType,
+  autoPay,
+  themeValues
+}) => (
   <BankItemWrapper>
     <Box padding="0.25rem 0 0 0" extraStyles={`margin-right: 1rem;`}>
       <BankIcon />
     </Box>
     <Stack childGap="0">
       {accountType === CHECKING && (
-        <BankAccountText>Checking Account ending in {lastFour}</BankAccountText>
+        <BankAccountText color={themeValues.textColor}>
+          Checking Account ending in {lastFour}
+        </BankAccountText>
       )}
       {accountType === SAVINGS && (
-        <BankAccountText>Savings Account ending in {lastFour}</BankAccountText>
+        <BankAccountText color={themeValues.textColor}>
+          Savings Account ending in {lastFour}
+        </BankAccountText>
       )}
       {autoPay && (
         <Text
           variant="p"
-          color={REGENT_GREY}
+          color={themeValues.autopayTextColor}
           extraStyles={`font-style: italic;`}
         >{`Autopay Enabled`}</Text>
       )}
@@ -47,4 +57,8 @@ const PaymentIcon = ({ lastFour, accountType, autoPay }) => (
   </BankItemWrapper>
 );
 
-export default PaymentIcon;
+export default themeComponent(
+  FormattedBankAccount,
+  "FormattedBankAccount",
+  fallbackValues
+);

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.theme.js

@@ -0,0 +1,9 @@
+import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+
+const textColor = `${CHARADE_GREY}`;
+const autopayTextColor = `${REGENT_GREY}`;
+
+export const fallbackValues = {
+  textColor,
+  autopayTextColor
+};

package/src/components/atoms/formatted-bank-account/index.js

@@ -0,0 +1,3 @@
+import FormattedBankAccount from "./FormattedBankAccount";
+
+export default FormattedBankAccount;

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -2,15 +2,10 @@ import React, { Fragment } from "react";
 import styled from "styled-components";
 import GenericCard from "../icons/GenericCard";
 import Text from "../text";
-import Paragraph from "../paragraph";
 import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
-
-const ACTIVE = "ACTIVE";
-const EXPIRING_SOON = "EXPIRING_SOON";
-const EXPIRED = "EXPIRED";
+import { renderCardStatus } from "../../../util/general";
 
 export const CreditCardWrapper = styled.div`
   display: flex;
@@ -31,61 +26,38 @@ const FormattedCreditCard = ({
   expireDate,
   expirationStatus,
   themeValues
-}) => {
-  const renderCardStatus = () => {
-    switch (expirationStatus) {
-      case ACTIVE:
-        return (
-          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
-            Exp Date {expireDate}
-          </Paragraph>
-        );
-      case EXPIRING_SOON:
-        return (
-          <Paragraph variant="pXS" color={FIRE_YELLOW} textAlign="left">
-            Expiring Soon {expireDate}
-          </Paragraph>
-        );
-      case EXPIRED:
-        return (
-          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
-            Expired
-          </Paragraph>
-        );
-      default:
-        null;
-    }
-  };
-  return (
-    <CreditCardWrapper>
-      <CCIconWrapper>
-        <GenericCard />
-      </CCIconWrapper>
-      <Stack childGap="0">
-        <Box padding="0">
-          <Text
-            variant="p"
-            padding="0 0 0 8px"
-            color={themeValues.textColor}
-            textAlign="left"
-            extraStyles={`display: inline-block;`}
-          >
-            {`Card ending in ${lastFour}`}
-          </Text>
-          {expireDate && <Fragment>{renderCardStatus()}</Fragment>}
-        </Box>
-        {autoPay && (
-          <Text
-            variant="p"
-            color={themeValues.autopayTextColor}
-            extraStyles={`font-style: italic;`}
-          >{`Autopay Enabled`}</Text>
+}) => (
+  <CreditCardWrapper>
+    <CCIconWrapper>
+      <GenericCard />
+    </CCIconWrapper>
+    <Stack childGap="0">
+      <Box padding="0">
+        <Text
+          variant="p"
+          padding="0 0 0 8px"
+          color={themeValues.textColor}
+          textAlign="left"
+          extraStyles={`display: inline-block;`}
+        >
+          {`Card ending in ${lastFour}`}
+        </Text>
+        {expireDate && (
+          <Fragment>
+            {renderCardStatus(expirationStatus, expireDate, "left", "p")}
+          </Fragment>
         )}
-      </Stack>
-    </CreditCardWrapper>
-  );
-};
-
+      </Box>
+      {autoPay && (
+        <Text
+          variant="p"
+          color={themeValues.autopayTextColor}
+          extraStyles={`font-style: italic;`}
+        >{`Autopay Enabled`}</Text>
+      )}
+    </Stack>
+  </CreditCardWrapper>
+);
 export default themeComponent(
   FormattedCreditCard,
   "FormattedCreditCard",

package/src/components/atoms/icons/index.js

@@ -18,7 +18,6 @@ import RoutingNumberImage from "./RoutingNumberImage";
 import CheckmarkIcon from "./CheckmarkIcon";
 import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
-import PaymentIcon from "./PaymentIcon";
 import IconAdd from "./IconAdd";
 import IconQuitLarge from "./IconQuitLarge";
 import TimeoutImage from "./TimeoutImage";
@@ -85,7 +84,6 @@ export {
   CheckmarkIcon,
   BankIcon,
   GenericCard,
-  PaymentIcon,
   IconAdd,
   IconQuitLarge,
   TimeoutImage,

package/src/components/atoms/index.js

@@ -16,6 +16,7 @@ export { default as Dropdown } from "./dropdown";
 export * from "./form-layouts";
 export { default as FormSelect } from "./form-select";
 export { default as FormattedAddress } from "./formatted-address";
+export { default as FormattedBankAccount } from "./formatted-bank-account";
 export { default as FormattedCreditCard } from "./formatted-credit-card";
 export { default as HamburgerButton } from "./hamburger-button";
 export { default as Heading } from "./heading";

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

@@ -6,6 +6,7 @@ import {
   ATHENS_GREY,
   GRECIAN_GREY
 } from "../../../constants/colors";
+import { ACH_METHOD, CC_METHOD, CASH_METHOD } from "../../../constants/general";
 import {
   IconModule,
   TitleModule,
@@ -45,7 +46,12 @@ const Obligation = ({
     The top level desc/subdesc for all obligations in a collection is the same
     (Collection accounts look different in the Account Details page)
   */
-  const firstObligation = obligations[0];
+  const firstObligation = obligations?.[0] ?? {};
+  const {
+    allowedPaymentInstruments = [CASH_METHOD, CC_METHOD, ACH_METHOD],
+    description = "Account",
+    subDescription = obligationAssocID
+  } = firstObligation;
   const customAttributes = firstObligation?.customAttributes ?? {};
   const boxShadowValue =
     "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
@@ -55,8 +61,7 @@ const Obligation = ({
       borderRadius="4px"
       boxShadow={boxShadowValue}
       as="section"
-      aria-label={`${firstObligation?.description ??
-        "account"} ${firstObligation?.subDescription ?? obligationAssocID}`}
+      aria-label={`${description} - ${subDescription}`}
       border={`1px solid ${GRECIAN_GREY}`}
       borderWidthOverride="1px 0 0 0"
     >
@@ -85,8 +90,8 @@ const Obligation = ({
                     />
                   )}
                   <TitleModule
-                    title={firstObligation?.description}
-                    subtitle={firstObligation?.subDescription}
+                    title={description}
+                    subtitle={subDescription}
                     titleColor={BRIGHT_GREY}
                     isMobile={isMobile}
                   />
@@ -106,6 +111,9 @@ const Obligation = ({
                   paymentPlanSchedule={paymentPlanSchedule}
                   isPaymentPlan={isPaymentPlan}
                   nextAutopayDate={nextAutopayDate}
+                  description={description}
+                  subDescription={subDescription}
+                  allowedPaymentInstruments={allowedPaymentInstruments}
                 />
               )}
             </Cluster>
@@ -126,6 +134,9 @@ const Obligation = ({
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
+              description={description}
+              subDescription={subDescription}
+              allowedPaymentInstruments={allowedPaymentInstruments}
             />
           )}
         </Stack>
@@ -146,6 +157,9 @@ const Obligation = ({
           isPaymentPlan={isPaymentPlan}
           nextAutopayDate={nextAutopayDate}
           obligationAssocID={obligationAssocID}
+          description={description}
+          subDescription={subDescription}
+          allowedPaymentInstruments={allowedPaymentInstruments}
         />
       )}
     </Box>
@@ -201,6 +215,9 @@ const Obligation = ({
                   dueDate={dueDate}
                   agencyName={agencyName}
                   configType={config.type}
+                  description={description}
+                  subDescription={subDescription}
+                  allowedPaymentInstruments={allowedPaymentInstruments}
                 />
               )}
             </Cluster>
@@ -220,6 +237,9 @@ const Obligation = ({
               dueDate={dueDate}
               agencyName={agencyName}
               configType={config.type}
+              description={description}
+              subDescription={subDescription}
+              allowedPaymentInstruments={allowedPaymentInstruments}
             />
           )}
         </Stack>

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

@@ -15,7 +15,10 @@ const AmountModule = ({
   autoPaySchedule,
   paymentPlanSchedule,
   isPaymentPlan,
-  nextAutopayDate
+  nextAutopayDate,
+  description,
+  subDescription,
+  allowedPaymentInstruments
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -43,6 +46,9 @@ const AmountModule = ({
             isPaymentPlan={isPaymentPlan}
             nextAutopayDate={nextAutopayDate}
             controlType="link"
+            description={description}
+            subDescription={subDescription}
+            allowedPaymentInstruments={allowedPaymentInstruments}
           />
         )}
       </Stack>

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

@@ -5,8 +5,10 @@ import Text from "../../../atoms/text";
 import { AutopayOnIcon } from "../../../atoms/icons";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { SEA_GREEN } from "../../../../constants/colors";
+import { ACH_METHOD, CC_METHOD } from "../../../../constants/general";
 import { fallbackValues } from "./AutopayModalModule.theme";
 import { themeComponent } from "../../../../util/themeUtils";
+import { titleCaseString } from "../../../../util/general";
 
 const AutopayModal = ({
   autoPayActive,
@@ -22,27 +24,41 @@ const AutopayModal = ({
   isPaymentPlan,
   nextAutopayDate,
   dueDate,
-  inactive
+  inactive,
+  description,
+  subDescription,
+  allowedPaymentInstruments
 }) => {
-  const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+  const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
+    const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
+    const allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    const methodRequired =
+      allowsCard && !allowsACH
+        ? "debit or credit card payment method"
+        : !allowsCard && allowsACH
+        ? "checking account payment method"
+        : "payment method";
+
+    return `To setup ${planText} you must have a saved ${methodRequired} and address in your profile. Do you want to save these now?`;
+  };
+  const plan = isPaymentPlan ? "your payment plan" : "autopay";
+  const shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
+  const deactivateText = `deactivate ${shortPlan} for ${description}: ${subDescription}`;
+  const activateText = `Set Up ${shortPlan} for ${description}: ${subDescription}`;
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive
-      ? `Deactivate ${planType}`
-      : `Set Up ${planType}`,
+      ? titleCaseString(deactivateText)
+      : titleCaseString(activateText),
     modalBodyText: autoPayActive
-      ? `Are you sure you want to deactivate ${
-          isPaymentPlan ? "your payment plan" : "autopay"
-        }? ${
+      ? `Are you sure you want to deactivate ${plan}? ${
           !inactive && nextDate
             ? `Your next payment will be due on ${nextDate}.`
             : ""
         }`
-      : `To set up ${
-          isPaymentPlan ? "a payment plan" : "autopay"
-        } you must save a payment method and address in your profile. Do you want to save these now?`,
+      : generateMethodNeededText(plan, allowedPaymentInstruments),
     continueButtonText: autoPayActive
-      ? `Disable ${planType}`
+      ? `Disable ${shortPlan}`
       : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
@@ -74,7 +90,9 @@ const AutopayModal = ({
       case "secondary": {
         return (
           <ButtonWithAction
-            text={autoPayActive ? `Turn off ${planType}` : `Set Up ${planType}`}
+            text={
+              autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
+            }
             variant="secondary"
             action={() => {
               toggleModal(true);
@@ -91,7 +109,7 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
-            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+            text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
             action={() => {
               toggleModal(true);
@@ -124,13 +142,13 @@ const AutopayModal = ({
                   e.key === "Enter" && toggleModal(true);
                 }}
                 tabIndex="0"
-                dataQa={`${planType} On`}
+                dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
                 weight={themeValues.fontWeight}
                 hoverStyles={themeValues.modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
               >
-                {`${planType} ${nextAutopayDate}`}
+                {`${shortPlan} ${nextAutopayDate}`}
               </Text>
             </Cluster>
           </Box>

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

@@ -18,7 +18,10 @@ const InactiveControlsModule = ({
   dueDate,
   agencyName,
   configType,
-  actions
+  actions,
+  description,
+  subDescription,
+  allowedPaymentInstruments
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   const { deleteObligationAssoc } = actions;
@@ -52,6 +55,9 @@ const InactiveControlsModule = ({
               dueDate={dueDate}
               controlType="secondary"
               inactive
+              description={description}
+              subDescription={subDescription}
+              allowedPaymentInstruments={allowedPaymentInstruments}
             />
           </Box>
         )}

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

@@ -20,7 +20,10 @@ const PaymentDetailsActions = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  dueDate
+  dueDate,
+  description,
+  subDescription,
+  allowedPaymentInstruments
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -73,6 +76,9 @@ const PaymentDetailsActions = ({
               paymentPlanSchedule={paymentPlanSchedule}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
+              description={description}
+              subDescription={subDescription}
+              allowedPaymentInstruments={allowedPaymentInstruments}
             />
           </Cluster>
         </Box>
@@ -128,6 +134,9 @@ const PaymentDetailsActions = ({
                 isPaymentPlan={isPaymentPlan}
                 nextAutopayDate={nextAutopayDate}
                 dueDate={dueDate}
+                description={description}
+                subDescription={subDescription}
+                allowedPaymentInstruments={allowedPaymentInstruments}
               />
             )}
           </Box>

package/src/components/molecules/radio-group/RadioGroup.js

@@ -48,7 +48,10 @@ const RadioGroup = ({
             groupName={groupName}
             setValue={setValue}
             handleChange={handleChange}
-            aria-invalid={(field.dirty && field.hasErrors) || field.hasErrors}
+            aria-invalid={
+              (field.dirty && field.hasErrors) ||
+              (field.hasErrors && showErrors)
+            }
           />
         ))}
       </Stack>

package/src/components/molecules/radio-section/RadioSection.js

@@ -7,7 +7,7 @@ import RadioButton from "./radio-button/RadioButton";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { noop } from "../../../util/general";
 import Text from "../../atoms/text";
-import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
+import { CHARADE_GREY } from "../../../constants/colors";
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -17,7 +17,8 @@ import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
       hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
       hidden: boolean, (hides section entirely)
       dataQa: string,
-      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
+      content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work),
+      rightTitleContent: <React Component(s)> (rendered on the very right of the title section, use to supplement "rightIcons" with text, as in expired CC status, or render other custom content)
     }
   
   Also takes an "openSection" which should equal the id of the section that should be open
@@ -30,10 +31,6 @@ import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
 
 */
 
-const ACTIVE = "ACTIVE";
-const EXPIRING_SOON = "EXPIRING_SOON";
-const EXPIRED = "EXPIRED";
-
 const RadioSection = ({
   themeValues,
   isMobile,
@@ -51,44 +48,6 @@ const RadioSection = ({
     }
   };
 
-  const renderCardStatus = item => {
-    const { expirationStatus, expireDate } = item;
-    switch (expirationStatus) {
-      case ACTIVE:
-        return (
-          <Text
-            variant="pXS"
-            color={ASH_GREY}
-            extraStyles={`text-align: right;`}
-          >
-            Exp Date {expireDate}
-          </Text>
-        );
-      case EXPIRING_SOON:
-        return (
-          <Text
-            variant="pXS"
-            color={FIRE_YELLOW}
-            extraStyles={`text-align: right;`}
-          >
-            Expiring Soon {expireDate}
-          </Text>
-        );
-      case EXPIRED:
-        return (
-          <Text
-            variant="pXS"
-            color={ASH_GREY}
-            extraStyles={`text-align: right;`}
-          >
-            Expired
-          </Text>
-        );
-      default:
-        null;
-    }
-  };
-
   const wrapper = {
     open: {
       height: openHeight,
@@ -146,9 +105,9 @@ const RadioSection = ({
               tabIndex={
                 section.hideRadioButton || section.disabled ? "-1" : "0"
               }
-              onKeyDown={e => handleKeyDown(section.id, e)}
-              onFocus={() => setFocused(section.id)}
-              onBlur={() => setFocused(null)}
+              onKeyDown={e => !section.disabled && handleKeyDown(section.id, e)}
+              onFocus={() => !section.disabled && setFocused(section.id)}
+              onBlur={() => !section.disabled && setFocused(null)}
               hoverStyles={themeValues.focusStyles}
               animate={openSection === section.id ? "open" : "closed"}
               initial={initiallyOpen ? "open" : "closed"}
@@ -173,7 +132,7 @@ const RadioSection = ({
                       : () => toggleOpenSection(section.id)
                   }
                   onTouchEnd={
-                    (isMobile && supportsTouch) || !section.disabled
+                    isMobile && supportsTouch && !section.disabled
                       ? () => toggleOpenSection(section.id)
                       : noop
                   }
@@ -232,8 +191,8 @@ const RadioSection = ({
                         ))}
                       </Cluster>
                     )}
-                    {section.shouldDisplayCardExpiration && (
-                      <Fragment>{renderCardStatus(section)}</Fragment>
+                    {section.rightTitleContent && (
+                      <Fragment>{rightTitleContent}</Fragment>
                     )}
                   </Cluster>
                 </Box>

package/src/constants/general.js

@@ -0,0 +1,3 @@
+export const ACH_METHOD = "BANK_ACCOUNT";
+export const CC_METHOD = "CREDIT_CARD";
+export const CASH_METHOD = "CASH";