diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx index 3c78592..6c01516 100644 --- a/src/components/PickItemRow.tsx +++ b/src/components/PickItemRow.tsx @@ -1,5 +1,17 @@ -import { Add, Delete, Remove, SwapHoriz } from '@mui/icons-material'; -import { Checkbox, IconButton, Stack, Typography } from '@mui/material'; +import { Add, Delete } from '@mui/icons-material'; +import { + Button, + Checkbox, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + IconButton, + Stack, + Typography, +} from '@mui/material'; +import { useState } from 'react'; import { PickItem } from '../models/PickItem'; import { Product } from '../models/Product'; @@ -22,6 +34,7 @@ export const PickItemRow = ({ onStatusChange, onDelete, }: PickItemRowProps) => { + const [isConfirmOpen, setIsConfirmOpen] = useState(false); const packagingLabel = item.is_carton ? product?.bulk_name ?? 'Carton' : product?.unit_type ?? 'Unit'; @@ -30,6 +43,11 @@ export const PickItemRow = ({ onStatusChange(checked ? 'picked' : 'pending'); }; + const handleConfirmDelete = () => { + onDelete(); + setIsConfirmOpen(false); + }; + return ( + + setIsConfirmOpen(false)} + aria-labelledby="confirm-delete-title" + aria-describedby="confirm-delete-description" + > + Delete item + + + {`Are you sure you want to delete ${product?.name ?? 'this product'} from the pick list?`} + + + + + + + ); };