219 lines
9.5 KiB
TypeScript
Executable File
219 lines
9.5 KiB
TypeScript
Executable File
import * as Yup from 'yup';
|
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
import { useEffect, useState } from 'react';
|
|
import { Box, Grid } from '@mui/material';
|
|
import { LoadingButton } from '@mui/lab';
|
|
import Button from '@mui/material/Button';
|
|
import { styled } from '@mui/material/styles';
|
|
import Dialog from '@mui/material/Dialog';
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import Typography from '@mui/material/Typography';
|
|
import { useForm } from 'react-hook-form';
|
|
import { FormProvider } from '@/components/hook-form';
|
|
import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';
|
|
|
|
/**
|
|
* Custom Style
|
|
* =====================================================
|
|
*/
|
|
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
|
|
|
}));
|
|
|
|
/**
|
|
* Utils, Types, Functions
|
|
* ============================================
|
|
*/
|
|
import palette from '@/theme/palette';
|
|
import { BenefitConfigurationListType } from '../Model/Types';
|
|
import { editBenefitConfiguration } from '../Model/Functions';
|
|
|
|
/**
|
|
* Props
|
|
* =====================================================
|
|
*/
|
|
type Props = {
|
|
data?: BenefitConfigurationListType,
|
|
isOpen: boolean,
|
|
handleCancleProp: () => void,
|
|
handleSuccessProp: () => void,
|
|
};
|
|
|
|
export default function BenefitConfigurationDialog({ ...props }: Props) {
|
|
|
|
// setup form
|
|
// ====================================
|
|
const defaultValues: BenefitConfigurationListType = {
|
|
claim_service_benefits_id: 0,
|
|
benefit_name: '',
|
|
amount_incurred: 0,
|
|
amount_approved: 0,
|
|
amount_not_approved: 0,
|
|
excess_paid: 0,
|
|
};
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
amount_incurred : Yup.string().typeError('').required(''),
|
|
amount_approved : Yup.string().typeError('').required(''),
|
|
amount_not_approved : Yup.string().typeError('').required(''),
|
|
excess_paid : Yup.string().typeError('').required(''),
|
|
});
|
|
|
|
const methods = useForm<any>({
|
|
resolver: yupResolver(validationSchema),
|
|
defaultValues
|
|
});
|
|
|
|
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
|
|
|
|
console.log(errors);
|
|
console.log(watch());
|
|
|
|
// Submit Form
|
|
// =====================================
|
|
const submitHandler = async (data: BenefitConfigurationListType) => {
|
|
let response = await editBenefitConfiguration(data);
|
|
|
|
if (response == true) {
|
|
props.handleSuccessProp()
|
|
props.handleCancleProp()
|
|
}
|
|
}
|
|
|
|
// Set Value Form
|
|
// =====================================
|
|
useEffect(() => {
|
|
setValue('claim_service_benefits_id', props.data?.claim_service_benefits_id)
|
|
setValue('amount_incurred', props.data?.amount_incurred)
|
|
setValue('amount_approved', props.data?.amount_approved)
|
|
setValue('amount_not_approved', props.data?.amount_not_approved)
|
|
setValue('excess_paid', props.data?.excess_paid)
|
|
}, [props.data])
|
|
|
|
return (
|
|
<Dialog
|
|
onClose={props.handleCancleProp}
|
|
aria-labelledby="customized-dialog-title"
|
|
open={props.isOpen}
|
|
maxWidth={'md'}
|
|
>
|
|
<FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
|
|
<DialogTitle sx={{ m: 0, p: 2, background: palette.light.primary.main, color: palette.light.grey[0], display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} id="customized-dialog-title">
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
|
|
Client Benefit Configuration
|
|
</Typography>
|
|
|
|
<IconButton
|
|
aria-label="close"
|
|
onClick={props.handleCancleProp}
|
|
sx={{color: (theme) => theme.palette.grey[0]}}
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
|
|
<DialogContent sx={{ p: '0px' }}>
|
|
<Box sx={{ py: '24px', px: '32px'}}>
|
|
<Box sx={{ p: '24px', border: '1px solid rgba(0,0,0,0.125)', borderRadius: '12px'}}>
|
|
<Grid container spacing={3}>
|
|
{/* Benefit Name */}
|
|
<Grid item xs={12}>
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
|
|
{props.data?.benefit_name}
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={3}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="body2" component="div">
|
|
Amount Incurred*
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
|
<RHFTextFieldMoney
|
|
id="amount_incurred"
|
|
name='amount_incurred'
|
|
placeholder='Amount Incurred'
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Grid item xs={3}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="body2" component="div">
|
|
Amount Approved*
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
|
<RHFTextFieldMoney
|
|
id="amount_approved"
|
|
name='amount_approved'
|
|
placeholder='Amount Approved'
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Grid item xs={3}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="body2" component="div">
|
|
Amount Not Approved*
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
|
<RHFTextFieldMoney
|
|
id="amount_not_approved"
|
|
name='amount_not_approved'
|
|
placeholder='Amount Not Approved'
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Grid item xs={3}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="body2" component="div">
|
|
Excess Paid*
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
|
|
<RHFTextFieldMoney
|
|
id="excess_paid"
|
|
name='excess_paid'
|
|
placeholder='Excess Paid'
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button variant='outlined' onClick={props.handleCancleProp} aria-label="close">
|
|
Cancle
|
|
</Button>
|
|
<LoadingButton disabled={!isDirty} type="submit" variant="contained" loading={isSubmitting}>
|
|
Save Changes
|
|
</LoadingButton>
|
|
</DialogActions>
|
|
</FormProvider>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|