Fix packaging filter behavior

src/screens/ActivePickListScreen.test.tsx

@@ -415,7 +415,7 @@ describe('ActivePickListScreen product search', () => {
     expect(itemLabels).toEqual(['Apple Juice', 'Chips', 'Cola', 'Cola']);
   });
 
-  it('disables packaging filters when only one packaging type is present', () => {
+  it('keeps packaging filters enabled when items share a single packaging type but mixed statuses', () => {
     pickItemsMock.mockReturnValue([
       {
         id: 'item-1',
@@ -427,6 +427,16 @@ describe('ActivePickListScreen product search', () => {
         created_at: 0,
         updated_at: 0,
       },
+      {
+        id: 'item-2',
+        pick_list_id: 'list-1',
+        product_id: 'prod-2',
+        quantity: 1,
+        is_carton: false,
+        status: 'picked',
+        created_at: 0,
+        updated_at: 0,
+      },
     ]);
 
     render(
@@ -437,9 +447,8 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByRole('radio', { name: /all/i })).toBeChecked();
-    expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
-    expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeEnabled();
+    expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled();
   });
 
   it('enables and disables packaging filters based on the visible item statuses', async () => {
@@ -492,9 +501,7 @@ describe('ActivePickListScreen product search', () => {
     expect(unitsRadio).toBeEnabled();
   });
 
-  it('resets the filter when the selected packaging type is unavailable', async () => {
-    const user = userEvent.setup();
-
+  it('resets the packaging filter when show picked is unchecked', async () => {
     pickItemsMock.mockReturnValue([
       {
         id: 'item-1',
@@ -518,7 +525,9 @@ describe('ActivePickListScreen product search', () => {
       },
     ]);
 
-    const { rerender } = render(
+    const user = userEvent.setup();
+
+    render(
       <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
@@ -529,32 +538,14 @@ describe('ActivePickListScreen product search', () => {
     await user.click(screen.getByRole('radio', { name: /cartons/i }));
     expect(screen.getByRole('radio', { name: /cartons/i })).toBeChecked();
 
-    pickItemsMock.mockReturnValue([
-      {
-        id: 'item-2',
-        pick_list_id: 'list-1',
-        product_id: 'prod-2',
-        quantity: 1,
-        is_carton: false,
-        status: 'pending',
-        created_at: 0,
-        updated_at: 0,
-      },
-    ]);
+    await user.click(screen.getByLabelText(/show picked/i));
 
-    rerender(
-      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-        <Routes>
-          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    await waitFor(() => expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled());
-    expect(screen.getByRole('radio', { name: /all/i })).toBeChecked();
+    await waitFor(() => expect(screen.getByRole('radio', { name: /all/i })).toBeChecked());
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
     expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
   });
 
+
   it('hides picked items when show picked is unchecked', async () => {
     pickItemsMock.mockReturnValue([
       {
@@ -650,6 +641,48 @@ describe('ActivePickListScreen product search', () => {
     expect(screen.queryByText('Chips')).not.toBeInTheDocument();
   });
 
+  it('retains a chosen packaging filter when statuses are mixed but packaging types are not', async () => {
+    pickItemsMock.mockReturnValue([
+      {
+        id: 'item-1',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 1,
+        is_carton: false,
+        status: 'pending',
+        created_at: 0,
+        updated_at: 0,
+      },
+      {
+        id: 'item-2',
+        pick_list_id: 'list-1',
+        product_id: 'prod-2',
+        quantity: 1,
+        is_carton: false,
+        status: 'picked',
+        created_at: 0,
+        updated_at: 0,
+      },
+    ]);
+
+    const user = userEvent.setup();
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const unitsRadio = screen.getByRole('radio', { name: /units/i });
+    await user.click(unitsRadio);
+
+    expect(unitsRadio).toBeChecked();
+    expect(screen.getByText('Cola')).toBeVisible();
+    expect(screen.getByText('Chips')).toBeVisible();
+  });
+
   it('disables packaging filters when all items share the same status', () => {
     pickItemsMock.mockReturnValue([
       {
@@ -686,6 +719,42 @@ describe('ActivePickListScreen product search', () => {
     expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
   });
 
+  it('disables packaging filters when every item is picked', () => {
+    pickItemsMock.mockReturnValue([
+      {
+        id: 'item-1',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 1,
+        is_carton: true,
+        status: 'picked',
+        created_at: 0,
+        updated_at: 0,
+      },
+      {
+        id: 'item-2',
+        pick_list_id: 'list-1',
+        product_id: 'prod-2',
+        quantity: 1,
+        is_carton: false,
+        status: 'picked',
+        created_at: 0,
+        updated_at: 0,
+      },
+    ]);
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
+  });
+
   it('disables show picked toggle when all items are picked', async () => {
     pickItemsMock.mockReturnValue([
       {

src/screens/ActivePickListScreen.tsx

@@ -48,19 +48,22 @@ export const ActivePickListScreen = () => {
     [itemState, showPicked],
   );
 
-  const allItemsPicked = useMemo(
-    () => itemState.length > 0 && itemState.every((item) => item.status === 'picked'),
+  const hasPickedItemsInList = useMemo(
+    () => itemState.some((item) => item.status === 'picked'),
     [itemState],
   );
-  const hasUnpickedItems = useMemo(
-    () => itemsVisibleByStatus.some((item) => item.status !== 'picked'),
-    [itemsVisibleByStatus],
+  const hasUnpickedItemsInList = useMemo(
+    () => itemState.some((item) => item.status !== 'picked'),
+    [itemState],
   );
-  const hasPickedItems = useMemo(
-    () => itemsVisibleByStatus.some((item) => item.status === 'picked'),
-    [itemsVisibleByStatus],
+  const allItemsPicked = useMemo(
+    () => itemState.length > 0 && !hasUnpickedItemsInList,
+    [hasUnpickedItemsInList, itemState.length],
+  );
+  const allItemsUnpicked = useMemo(
+    () => itemState.length > 0 && !hasPickedItemsInList,
+    [hasPickedItemsInList, itemState.length],
   );
-  const hasMixedPickStatuses = hasPickedItems && hasUnpickedItems;
 
   const productMap = useMemo(() => {
     const map = new Map<string, Product>();
@@ -140,17 +143,19 @@ export const ActivePickListScreen = () => {
     );
   }, [pickList?.categories, sortedProducts]);
 
-  const hasCartonItems = useMemo(
-    () => itemsVisibleByStatus.some((item) => item.is_carton),
+  const visibleHasPicked = useMemo(
+    () => itemsVisibleByStatus.some((item) => item.status === 'picked'),
     [itemsVisibleByStatus],
   );
-  const hasUnitItems = useMemo(
-    () => itemsVisibleByStatus.some((item) => !item.is_carton),
+  const visibleHasUnpicked = useMemo(
+    () => itemsVisibleByStatus.some((item) => item.status !== 'picked'),
     [itemsVisibleByStatus],
   );
-  const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems);
-  const singlePackagingType = packagingTypeCount === 1;
-  const packagingFiltersDisabled = !hasMixedPickStatuses;
+
+  const packagingFiltersDisabled =
+    !showPicked || itemsVisibleByStatus.length === 0 || !visibleHasPicked || !visibleHasUnpicked;
+
+  const appliedItemFilter = packagingFiltersDisabled ? 'all' : itemFilter;
 
   const productIdsInList = useMemo(
     () => new Set(itemState.map((item) => item.product_id)),
@@ -185,36 +190,26 @@ export const ActivePickListScreen = () => {
   }, [allItemsPicked, showPicked]);
 
   useEffect(() => {
-    if (packagingTypeCount <= 1) {
-      if (itemFilter !== 'all') {
-        setItemFilter('all');
-      }
-
-      return;
+    if (packagingFiltersDisabled && itemFilter !== 'all') {
+      setItemFilter('all');
     }
-
-    if (itemFilter === 'cartons' && !hasCartonItems) {
-      setItemFilter('units');
-    } else if (itemFilter === 'units' && !hasUnitItems) {
-      setItemFilter('cartons');
-    }
-  }, [itemFilter, hasCartonItems, hasUnitItems, packagingTypeCount]);
+  }, [itemFilter, packagingFiltersDisabled]);
 
   const visibleItems = useMemo(() => {
     let filteredItems = showPicked
       ? sortedItems
       : sortedItems.filter((item) => item.status !== 'picked');
 
-    if (itemFilter === 'cartons') {
+    if (appliedItemFilter === 'cartons') {
       return filteredItems.filter((item) => item.is_carton);
     }
 
-    if (itemFilter === 'units') {
+    if (appliedItemFilter === 'units') {
       return filteredItems.filter((item) => !item.is_carton);
     }
 
     return filteredItems;
-  }, [itemFilter, showPicked, sortedItems]);
+  }, [appliedItemFilter, showPicked, sortedItems]);
 
   const updateItemState = (itemId: string, updater: (item: PickItem) => PickItem) => {
     setItemState((current) => current.map((item) => (item.id === itemId ? updater(item) : item)));
@@ -423,7 +418,7 @@ export const ActivePickListScreen = () => {
             >
               <RadioGroup
                 row
-                value={itemFilter}
+                value={appliedItemFilter}
                 onChange={(event) =>
                   setItemFilter(event.target.value as 'all' | 'cartons' | 'units')
                 }
@@ -434,13 +429,13 @@ export const ActivePickListScreen = () => {
                   value="cartons"
                   control={<Radio />}
                   label="Cartons"
-                  disabled={packagingFiltersDisabled || !hasCartonItems}
+                  disabled={packagingFiltersDisabled}
                 />
                 <FormControlLabel
                   value="units"
                   control={<Radio />}
                   label="Units"
-                  disabled={packagingFiltersDisabled || !hasUnitItems}
+                  disabled={packagingFiltersDisabled}
                 />
               </RadioGroup>
               <Stack direction="row" spacing={1} alignItems="center" sx={{ ml: { xs: 0, sm: 2 } }}>