@thecb/components 11.1.9 → 11.1.10-beta.0

package/package.json

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

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

@@ -11,7 +11,6 @@ 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,
@@ -33,71 +32,34 @@ const MultipleSelectFilter = ({
   placeholder = "Search",
   searchable = true,
   themeValues,
-  truncateBtnTextWidth = "15rem",
-  activeAppliedOptions
+  truncateBtnTextWidth = "15rem"
 }) => {
-  // 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([]);
-
-  // 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 [appliedOptions, setAppliedOptions] = useState([]);
   const openedRef = useRef(opened);
 
-  // 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("");
     }
   };
+  const containerRef = useOutsideClickHook(() => handleOnClose());
+  const dropdownRef = useRef(null);
+  const filterButtonRef = useRef(null);
+  const applyFilterButtonRef = useRef(null);
+  const filterDropdownID = `${name}-filter-dropdown`;
+  const listGroupID = `${name}-list-group`;
 
   useEffect(() => {
     openedRef.current = opened;
     if (!opened) {
-      if (hasInteracted) {
-        onApply(selectedOptions);
-        setAppliedOptions(selectedOptions);
-      }
-    } else {
-      setHasInteracted(true);
+      onApply(selectedOptions);
+      setAppliedOptions(selectedOptions);
     }
   }, [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") {
@@ -160,7 +122,6 @@ 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,8 +21,7 @@ const FilterButton = forwardRef(
       truncateBtnTextWidth,
       filterLabel,
       selectedOptions,
-      extraStyles,
-      dataAppliedOptions
+      extraStyles
     },
     ref
   ) => {
@@ -49,7 +48,6 @@ 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,16 +29,3 @@ 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

@@ -32,8 +32,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"