Merge pull request #128 from beatz174-bit/codex/fix-packaging-type-filter-functionality-2fmtlc

Allow packaging filters when statuses are mixed

src/screens/ActivePickListScreen.test.tsx

@@ -500,7 +500,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',
@@ -512,6 +512,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(
@@ -522,9 +532,8 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByRole('radio', { name: /all/i })).toBeChecked();
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeEnabled();
-    expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled();
-    expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
   });
 
   it('enables and disables packaging filters based on the visible item statuses', async () => {
@@ -647,7 +656,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 />} />
@@ -658,32 +669,14 @@ describe('ActivePickListScreen product search', () => {
     await user.click(screen.getByRole('radio', { name: /cartons/i }));
     expect(screen.getByRole('radio', { name: /cartons/i })).toBeChecked();
 
-    pickItemsMock.mockReturnValue([
+    await user.click(screen.getByLabelText(/show picked/i));
-      {
-        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,
-      },
-    ]);
 
-    rerender(
+    await waitFor(() => expect(screen.getByRole('radio', { name: /all/i })).toBeChecked());
-      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
-        <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();
     expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
   });
 
+
   it('hides picked items when show picked is unchecked', async () => {
     pickItemsMock.mockReturnValue([
       {

src/screens/ActivePickListScreen.tsx

@@ -220,7 +220,7 @@ export const ActivePickListScreen = () => {
     } else if (itemFilter === 'units' && !hasUnitItems) {
       setItemFilter('cartons');
     }
-  }, [itemFilter, hasCartonItems, hasUnitItems, packagingTypeCount]);
+  }, [itemFilter, packagingFiltersDisabled]);
 
   const visibleItems = useMemo(() => {
     let filteredItems = showPicked
@@ -456,13 +456,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 } }}>