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

package/package.json

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

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

@@ -6,7 +6,6 @@ import {
   ATHENS_GREY,
   GRECIAN_GREY
 } from "../../../constants/colors";
-import { ACH_METHOD, CC_METHOD, CASH_METHOD } from "../../../constants/general";
 import {
   IconModule,
   TitleModule,
@@ -47,11 +46,6 @@ const Obligation = ({
     (Collection accounts look different in the Account Details page)
   */
   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);";
@@ -61,7 +55,8 @@ const Obligation = ({
       borderRadius="4px"
       boxShadow={boxShadowValue}
       as="section"
-      aria-label={`${description} - ${subDescription}`}
+      aria-label={`${firstObligation?.description ??
+        "account"} ${firstObligation?.subDescription ?? obligationAssocID}`}
       border={`1px solid ${GRECIAN_GREY}`}
       borderWidthOverride="1px 0 0 0"
     >
@@ -90,8 +85,8 @@ const Obligation = ({
                     />
                   )}
                   <TitleModule
-                    title={description}
-                    subtitle={subDescription}
+                    title={firstObligation?.description}
+                    subtitle={firstObligation?.subDescription}
                     titleColor={BRIGHT_GREY}
                     isMobile={isMobile}
                   />
@@ -111,9 +106,6 @@ const Obligation = ({
                   paymentPlanSchedule={paymentPlanSchedule}
                   isPaymentPlan={isPaymentPlan}
                   nextAutopayDate={nextAutopayDate}
-                  description={description}
-                  subDescription={subDescription}
-                  allowedPaymentInstruments={allowedPaymentInstruments}
                 />
               )}
             </Cluster>
@@ -134,9 +126,6 @@ const Obligation = ({
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
-              description={description}
-              subDescription={subDescription}
-              allowedPaymentInstruments={allowedPaymentInstruments}
             />
           )}
         </Stack>
@@ -157,9 +146,6 @@ const Obligation = ({
           isPaymentPlan={isPaymentPlan}
           nextAutopayDate={nextAutopayDate}
           obligationAssocID={obligationAssocID}
-          description={description}
-          subDescription={subDescription}
-          allowedPaymentInstruments={allowedPaymentInstruments}
         />
       )}
     </Box>
@@ -215,9 +201,6 @@ const Obligation = ({
                   dueDate={dueDate}
                   agencyName={agencyName}
                   configType={config.type}
-                  description={description}
-                  subDescription={subDescription}
-                  allowedPaymentInstruments={allowedPaymentInstruments}
                 />
               )}
             </Cluster>
@@ -237,9 +220,6 @@ 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,10 +15,7 @@ const AmountModule = ({
   autoPaySchedule,
   paymentPlanSchedule,
   isPaymentPlan,
-  nextAutopayDate,
-  description,
-  subDescription,
-  allowedPaymentInstruments
+  nextAutopayDate
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   return (
@@ -46,9 +43,6 @@ const AmountModule = ({
             isPaymentPlan={isPaymentPlan}
             nextAutopayDate={nextAutopayDate}
             controlType="link"
-            description={description}
-            subDescription={subDescription}
-            allowedPaymentInstruments={allowedPaymentInstruments}
           />
         )}
       </Stack>

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

@@ -5,10 +5,8 @@ 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,
@@ -24,41 +22,27 @@ const AutopayModal = ({
   isPaymentPlan,
   nextAutopayDate,
   dueDate,
-  inactive,
-  description,
-  subDescription,
-  allowedPaymentInstruments
+  inactive
 }) => {
-  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 planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive
-      ? titleCaseString(deactivateText)
-      : titleCaseString(activateText),
+      ? `Deactivate ${planType}`
+      : `Set Up ${planType}`,
     modalBodyText: autoPayActive
-      ? `Are you sure you want to deactivate ${plan}? ${
+      ? `Are you sure you want to deactivate ${
+          isPaymentPlan ? "your payment plan" : "autopay"
+        }? ${
           !inactive && nextDate
             ? `Your next payment will be due on ${nextDate}.`
             : ""
         }`
-      : generateMethodNeededText(plan, allowedPaymentInstruments),
+      : `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?`,
     continueButtonText: autoPayActive
-      ? `Disable ${shortPlan}`
+      ? `Disable ${planType}`
       : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
@@ -90,9 +74,7 @@ const AutopayModal = ({
       case "secondary": {
         return (
           <ButtonWithAction
-            text={
-              autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
-            }
+            text={autoPayActive ? `Turn off ${planType}` : `Set Up ${planType}`}
             variant="secondary"
             action={() => {
               toggleModal(true);
@@ -109,7 +91,7 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
-            text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
+            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
             variant="tertiary"
             action={() => {
               toggleModal(true);
@@ -142,13 +124,13 @@ const AutopayModal = ({
                   e.key === "Enter" && toggleModal(true);
                 }}
                 tabIndex="0"
-                dataQa={`${shortPlan} On`}
+                dataQa={`${planType} On`}
                 color={SEA_GREEN}
                 weight={themeValues.fontWeight}
                 hoverStyles={themeValues.modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
               >
-                {`${shortPlan} ${nextAutopayDate}`}
+                {`${planType} ${nextAutopayDate}`}
               </Text>
             </Cluster>
           </Box>

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

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

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

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

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

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

package/src/util/general.js

@@ -144,18 +144,3 @@ export const throttle = (delay, fn) => {
     return fn(...args);
   };
 };
-
-export const titleCaseWord = word => {
-  return word.charAt(0).toUpperCase() + word.slice(1);
-};
-
-export const titleCaseString = string => {
-  return string
-    .split(" ")
-    .map((word, index, string) =>
-      index === 0 || index === string.length - 1 || word.length > 3
-        ? titleCaseWord(word.toLowerCase())
-        : word
-    )
-    .join(" ");
-};

package/src/constants/general.js

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