@thecb/components 11.1.11-beta.1 → 11.1.12-beta.0

package/package.json

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

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

@@ -99,6 +99,7 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
 
 const FormInput = ({
   type = "text",
+  labelDisplayOverride = null,
   labelTextWhenNoError = "",
   errorMessages,
   isNum = false,
@@ -147,39 +148,47 @@ const FormInput = ({
       <Box padding="0">
         {helperModal ? (
           <Cluster justify="space-between" align="center">
-            <Text
-              as="label"
-              color={themeValues.labelColor}
-              variant={labelTextVariant}
-              weight={themeValues.fontWeight}
-              extraStyles={`word-break: break-word;
+            {labelDisplayOverride ? (
+              labelDisplayOverride
+            ) : (
+              <Text
+                as="label"
+                color={themeValues.labelColor}
+                variant={labelTextVariant}
+                weight={themeValues.fontWeight}
+                extraStyles={`word-break: break-word;
                   font-family: Public Sans;
                   &::first-letter {
                     text-transform: uppercase;
                   }`}
-              id={createIdFromString(labelTextWhenNoError)}
-            >
-              {labelTextWhenNoError}
-            </Text>
+                id={createIdFromString(labelTextWhenNoError)}
+              >
+                {labelTextWhenNoError}
+              </Text>
+            )}
             {helperModal()}
           </Cluster>
         ) : (
           <Box padding="0" minWidth="100%">
             <Cluster justify="space-between" align="center">
-              <Text
-                as="label"
-                color={themeValues.labelColor}
-                variant={labelTextVariant}
-                fontWeight={themeValues.fontWeight}
-                extraStyles={`word-break: break-word;
+              {labelDisplayOverride ? (
+                labelDisplayOverride
+              ) : (
+                <Text
+                  as="label"
+                  color={themeValues.labelColor}
+                  variant={labelTextVariant}
+                  fontWeight={themeValues.fontWeight}
+                  extraStyles={`word-break: break-word;
                     font-family: Public Sans;
                     &::first-letter {
                       text-transform: uppercase;
                     }`}
-                id={createIdFromString(labelTextWhenNoError)}
-              >
-                {labelTextWhenNoError}
-              </Text>
+                  id={createIdFromString(labelTextWhenNoError)}
+                >
+                  {labelTextWhenNoError}
+                </Text>
+              )}
               {type === "password" && (
                 <Text
                   variant={labelTextVariant}

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js

@@ -11,6 +11,7 @@ import FilterDropdown from "./__private__/FilterDropdown";
 import SearchBox from "./__private__/SearchBox";
 import FilterableList from "./__private__/FilterableList";
 import useOutsideClickHook from "../../../hooks/use-outside-click";
+import { mergeOptions } from "./__private__/util";
 
 const MultipleSelectFilter = ({
   actions,
@@ -32,34 +33,71 @@ const MultipleSelectFilter = ({
   placeholder = "Search",
   searchable = true,
   themeValues,
-  truncateBtnTextWidth = "15rem"
+  truncateBtnTextWidth = "15rem",
+  activeAppliedOptions
 }) => {
+  // State to manage whether the dropdown is open or closed
   const [opened, setOpened] = useState(false);
+
+  // State to manage the currently selected options
   const [selectedOptions, setSelectedOptions] = useState([]);
-  const [appliedOptions, setAppliedOptions] = useState([]);
+
+  // State to manage the applied options, initialized with activeAppliedOptions or an empty array
+  const [appliedOptions, setAppliedOptions] = useState(
+    activeAppliedOptions || []
+  );
+
+  // State to track whether the user has interacted with the component
+  const [hasInteracted, setHasInteracted] = useState(false);
+
+  // Reference to keep track of the opened state across renders without causing re-renders
   const openedRef = useRef(opened);
 
-  const handleOnClose = () => {
-    if (openedRef.current) {
-      setOpened(false);
-      actions.fields.searchTerm.set("");
-    }
-  };
+  // Hook to detect clicks outside the component and close the dropdown
   const containerRef = useOutsideClickHook(() => handleOnClose());
+
+  // References to various elements within the component
   const dropdownRef = useRef(null);
   const filterButtonRef = useRef(null);
   const applyFilterButtonRef = useRef(null);
+
+  // IDs for accessibility and identification purposes
   const filterDropdownID = `${name}-filter-dropdown`;
   const listGroupID = `${name}-list-group`;
 
+  const handleOnClose = () => {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
+  };
+
   useEffect(() => {
     openedRef.current = opened;
     if (!opened) {
-      onApply(selectedOptions);
-      setAppliedOptions(selectedOptions);
+      if (hasInteracted) {
+        onApply(selectedOptions);
+        setAppliedOptions(selectedOptions);
+      }
+    } else {
+      setHasInteracted(true);
     }
   }, [opened]);
 
+  useEffect(() => {
+    // Update the applied options state with the current active applied options,
+    // or an empty array if activeAppliedOptions is undefined or null.
+    // This ensures that the current applied options are in sync with the parent component.
+    setAppliedOptions(activeAppliedOptions || []);
+
+    // Merge the selected options with the active applied options.
+    const mergedSelections = mergeOptions(
+      selectedOptions,
+      activeAppliedOptions
+    );
+    setSelectedOptions(mergedSelections);
+  }, [activeAppliedOptions]);
+
   useEffect(() => {
     const handleKeyDown = event => {
       if (event.key === "Escape") {
@@ -122,6 +160,7 @@ const MultipleSelectFilter = ({
         filterLabel={filterLabel}
         selectedOptions={selectedOptions}
         extraStyles={btnExtraStyles}
+        dataAppliedOptions={appliedOptions?.length}
       ></FilterButton>
       <FilterDropdown
         id={filterDropdownID}

package/src/components/molecules/multiple-select-filter/__private__/FilterButton.js

@@ -21,7 +21,8 @@ const FilterButton = forwardRef(
       truncateBtnTextWidth,
       filterLabel,
       selectedOptions,
-      extraStyles
+      extraStyles,
+      dataAppliedOptions
     },
     ref
   ) => {
@@ -48,6 +49,7 @@ const FilterButton = forwardRef(
         dataQa={`${name}-filter-button`}
         extraStyles={extraStyles}
         aria-label={`${filterLabel} Filter: ${btnTextFilterDescription} ${btnTextItemsDescription}`}
+        data-applied-options={dataAppliedOptions}
         contentOverride
       >
         {btnContentOverride ? (

package/src/components/molecules/multiple-select-filter/__private__/util.js

@@ -29,3 +29,16 @@ export const selectOption = (option, selectedOptions, setSelectedOptions) => {
     setSelectedOptions(moreOptions);
   }
 };
+
+export const mergeOptions = (selectedOptions, activeOptions) => {
+  if (!activeOptions.length) return selectedOptions;
+  if (!selectedOptions.length) return activeOptions;
+
+  const mergedOptions = [...selectedOptions];
+  activeOptions.forEach(activeOption => {
+    if (!mergedOptions.some(option => option.name === activeOption.name)) {
+      mergedOptions.push(activeOption);
+    }
+  });
+  return mergedOptions;
+};

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

@@ -20,7 +20,7 @@ import { fallbackValues } from "./Obligation.theme";
 
 const Obligation = ({
   config,
-  obligations,
+  obligations = [],
   actions,
   autoPayEnabled,
   autoPayAvailable,
@@ -121,6 +121,7 @@ const Obligation = ({
           {!isMobile && (
             <PaymentDetailsActions
               obligations={obligations}
+              obligationAssocID={obligationAssocID}
               autoPayEnabled={autoPayEnabled}
               autoPayAvailable={autoPayAvailable}
               handleAutopayAction={handleAutopayAction}
@@ -146,6 +147,7 @@ const Obligation = ({
       {isMobile && (
         <PaymentDetailsActions
           obligations={obligations}
+          obligationAssocID={obligationAssocID}
           autoPayEnabled={autoPayEnabled}
           autoPayAvailable={autoPayAvailable}
           handleAutopayAction={handleAutopayAction}

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

@@ -33,8 +33,8 @@ const AutopayModalModule = ({
   onKeyPress
 }) => {
   const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
-    const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
-    const allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    const allowsCard = allowedPaymentInstruments?.includes(CC_METHOD);
+    const allowsACH = allowedPaymentInstruments?.includes(ACH_METHOD);
     const methodRequired =
       allowsCard && !allowsACH
         ? "debit or credit card payment method"

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

@@ -2,18 +2,34 @@ import React from "react";
 import { equals } from "ramda";
 import { FormInput } from "../../atoms/form-layouts";
 import { displayCurrency } from "../../../util/general";
-import Text from "../../atoms/text";
-
+import { Stack, Detail, Text } from "../../atoms";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./PartialAmountField.theme";
 const PartialAmountField = ({
   lineItem,
   field,
   showErrors,
   errorMessages,
   moneyFormat,
-  fieldActions
+  fieldActions,
+  themeValues
 }) => (
   <FormInput
-    labelTextWhenNoError={lineItem.description}
+    labelDisplayOverride={
+      <Stack childGap="0px">
+        <Detail
+          as="h3"
+          variant={themeValues.detailVariant}
+          weight={themeValues.weightTitle}
+        >
+          <span>{lineItem.description}</span>
+        </Detail>
+        <Detail as="p" variant={themeValues.detailVariant} weight="400">
+          {lineItem.subDescription}
+        </Detail>
+      </Stack>
+    }
+    labelTextWhenNoError={`${lineItem.description} | ${lineItem.subDescription}`}
     key={lineItem.id}
     field={field}
     fieldActions={fieldActions}
@@ -46,4 +62,12 @@ function arePropsEqual(prevProps, nextProps) {
   );
 }
 
-export default React.memo(PartialAmountField, arePropsEqual);
+export default React.memo(
+  themeComponent(
+    PartialAmountField,
+    "PartialAmountField",
+    fallbackValues,
+    "default"
+  ),
+  arePropsEqual
+);

package/src/components/molecules/partial-amount-form/PartialAmountField.theme.js

@@ -0,0 +1,7 @@
+const weightTitle = { default: "600", small: "400" };
+const detailVariant = { default: "large", small: "small" };
+
+export const fallbackValues = {
+  weightTitle,
+  detailVariant
+};