@thecb/components 11.1.9 → 11.1.11-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.1.9",
+  "version": "11.1.11-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/modules/AutopayModalModule.js

@@ -8,6 +8,7 @@ import { SEA_GREEN } from "../../../../constants/colors";
 import { ACH_METHOD, CC_METHOD } from "../../../../constants/general";
 import { titleCaseString, noop } from "../../../../util/general";
 import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
+import Paragraph from "../../../atoms/paragraph/index";
 
 const AutopayModalModule = ({
   autoPayActive,
@@ -54,13 +55,28 @@ const AutopayModalModule = ({
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive ? deactivateText : activateText,
-    modalBodyText: autoPayActive
-      ? `Are you sure you want to stop ${plan}? ${
-          !inactive && nextDate && nextDate !== "On"
+    modalBodyText: autoPayActive ? (
+      <>
+        <Paragraph>
+          Are you sure you want to stop {plan}?
+          {!inactive && nextDate && nextDate !== "On"
             ? "Your next payment will be due on " + nextDate + "."
-            : ""
-        }`
-      : generateMethodNeededText(plan, allowedPaymentInstruments),
+            : ""}
+        </Paragraph>
+        {!isPaymentPlan && (
+          <>
+            <br />
+            <Paragraph>
+              If your next autopayment is scheduled to run today, you may be
+              billed today and autopay will then stop for the next billing
+              cycle.
+            </Paragraph>
+          </>
+        )}
+      </>
+    ) : (
+      generateMethodNeededText(plan, allowedPaymentInstruments)
+    ),
     continueButtonText: autoPayActive ? `Stop ${shortPlan}` : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive