diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx index 2c076cc..f1974bb 100644 --- a/src/components/PickItemRow.tsx +++ b/src/components/PickItemRow.tsx @@ -1,5 +1,17 @@ import { Add, Delete } from '@mui/icons-material'; -import { Button, Checkbox, IconButton, Stack, Typography } from '@mui/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'; @@ -20,6 +32,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'; @@ -28,6 +41,11 @@ export const PickItemRow = ({ onStatusChange(checked ? 'picked' : 'pending'); }; + const handleConfirmDelete = () => { + onDelete(); + setIsConfirmOpen(false); + }; + return ( } onClick={onIncrementQuantity}> Add 1 - + setIsConfirmOpen(true)} + aria-label={`Delete ${product?.name ?? 'item'}`} + > + + 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?`} + + + + + + + ); };