@thecb/components 7.6.0 → 7.6.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.6.0",
+  "version": "7.6.1-beta.1",
   "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,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/constants/general.js

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

package/src/util/general.js

@@ -144,3 +144,18 @@ 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(" ");
+};