139 lines
4.7 KiB
TypeScript
139 lines
4.7 KiB
TypeScript
import MuiDialog from "@/components/MuiDialog";
|
|
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
|
|
import { Paper } from "@mui/material";
|
|
import { Stack } from '@mui/material';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { DetailFinalLogType } from "../Model/Types";
|
|
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
|
import axios from "@/utils/axios";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import { useNavigate } from "react-router";
|
|
|
|
|
|
type DialogDeleteType = {
|
|
openDialog: boolean;
|
|
setOpenDialog: any;
|
|
onSubmit?: void;
|
|
id: number|undefined;
|
|
}
|
|
|
|
export default function DialogDeleteBenefit({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
|
|
|
|
const [formData, setFormData] = useState({
|
|
reason: null
|
|
});
|
|
|
|
const resetForm = () => {
|
|
setFormData({
|
|
reason: null,
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Update formData setiap kali approve berubah
|
|
setFormData(prevData => ({
|
|
...prevData,
|
|
}));
|
|
}, []);
|
|
|
|
const handleChange = (field, value) => {
|
|
setFormData((prevData) => ({
|
|
...prevData,
|
|
[field]: value,
|
|
}));
|
|
if (field === 'reason') {
|
|
setIsReasonSelected(!!value);
|
|
}
|
|
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (isReasonSelected && formData.reason !== '') {
|
|
axios
|
|
.post(`customer-service/request/benefit_data/${id}`, formData)
|
|
.then((response) => {
|
|
enqueueSnackbar('Benefit Data has Deleted', { variant: 'success' });
|
|
setOpenDialog(false);
|
|
window.location.reload()
|
|
})
|
|
.catch(({ response }) => {
|
|
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
|
|
});
|
|
} else {
|
|
setIsReasonSelected(false);
|
|
alert('Silakan pilih alasan sebelum menghapus data.');
|
|
}
|
|
|
|
}
|
|
|
|
const style1 = {
|
|
color: '#919EAB',
|
|
width: '30%'
|
|
}
|
|
const style2 = {
|
|
width: '70%'
|
|
}
|
|
const marginBottom2 = {
|
|
marginBottom: 2,
|
|
}
|
|
|
|
const [isReasonSelected, setIsReasonSelected] = useState(false);
|
|
|
|
const reasons = [
|
|
{ value: 'agreement', label: 'Agreement changed' },
|
|
{ value: 'endorsement', label: 'Endorsement' },
|
|
{ value: 'renewal', label: 'Renewal' },
|
|
{ value: 'wrong_setting', label: 'Wrong Setting' },
|
|
// Add more options as needed
|
|
];
|
|
const handleCloseDialog = () => {
|
|
setOpenDialog(false);
|
|
}
|
|
|
|
const getContent = () => (
|
|
<Stack spacing={1} marginTop={2}>
|
|
<Typography variant="subtitle2">Are you sure to delete this detail benefit ?</Typography>
|
|
<Grid item xs={12} md={12} marginTop={4}>
|
|
<Card sx={{padding:2, marginTop:2}} >
|
|
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
|
|
<Autocomplete
|
|
options={reasons}
|
|
getOptionLabel={(option) => option.label}
|
|
fullWidth
|
|
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
|
|
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Reason"
|
|
variant="outlined"
|
|
required
|
|
error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
|
|
helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
|
|
|
|
/>
|
|
)}
|
|
/>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
<DialogActions>
|
|
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
|
|
<Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
|
|
</DialogActions>
|
|
</Stack>
|
|
);
|
|
|
|
|
|
return (
|
|
<MuiDialog
|
|
title={{name: "Delete Benefit"}}
|
|
openDialog={openDialog}
|
|
setOpenDialog={setOpenDialog}
|
|
content={getContent()}
|
|
maxWidth="xs"
|
|
/>
|
|
);
|
|
}
|