Fix packaging filter availability logic

src/screens/ActivePickListScreen.test.tsx

@@ -492,6 +492,50 @@ describe('ActivePickListScreen product search', () => {
     expect(unitsRadio).toBeEnabled();
   });
 
+  it('resets the packaging filter when show picked is unchecked', async () => {
+    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: 'pending',
+        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>,
+    );
+
+    await user.click(screen.getByRole('radio', { name: /cartons/i }));
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeChecked();
+
+    await user.click(screen.getByLabelText(/show picked/i));
+
+    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('resets the filter when the selected packaging type is unavailable', async () => {
     const user = userEvent.setup();
 
@@ -686,6 +730,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>();
@@ -150,7 +153,7 @@ export const ActivePickListScreen = () => {
   );
   const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems);
   const singlePackagingType = packagingTypeCount === 1;
-  const packagingFiltersDisabled = !hasMixedPickStatuses;
+  const packagingFiltersDisabled = !showPicked || allItemsPicked || allItemsUnpicked;
 
   const productIdsInList = useMemo(
     () => new Set(itemState.map((item) => item.product_id)),
@@ -184,6 +187,12 @@ export const ActivePickListScreen = () => {
     }
   }, [allItemsPicked, showPicked]);
 
+  useEffect(() => {
+    if (packagingFiltersDisabled && itemFilter !== 'all') {
+      setItemFilter('all');
+    }
+  }, [itemFilter, packagingFiltersDisabled]);
+
   useEffect(() => {
     if (packagingTypeCount <= 1) {
       if (itemFilter !== 'all') {