aso/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx

// @mui
import { styled } from '@mui/material/styles';
import {
  Typography,
  LinearProgress,
  linearProgressClasses,
  Stack,
  FormControlLabel,
} from '@mui/material';
import { LoadingButton } from '@mui/lab';
import Checkbox from '@mui/material/Checkbox';
// components
import MuiDialog from '../../components/MuiDialog';
import { FormProvider, RHFTextField } from '../../components/hook-form';
// React
import { ReactElement, useEffect, useState } from 'react';
import { fCurrency } from '../../utils/formatNumber';
// yup
import * as Yup from 'yup';
// form
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

// ----------------------------------------------------------------------

type DataContent = {
  info: string;
  date: string;
  time: string;
};

type MuiDialogProps = {
  title?: {
    name?: string;
    icon?: string;
  };
  openDialog: boolean;
  setOpenDialog: Function;
  content?: ReactElement;
  data?: DataContent[];
};

type FormValuesProps = {
  topup: string;
};

// ----------------------------------------------------------------------

const testData = {
  companyName: 'PT. Aman Mineral',
  policyNumber: 12345678,
  totalMembers: 50,
  totalCases: 100,
  totalPersen: 75,
  myLimit: 375000000,
  totalLimit: 500000000,
};

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 10,
  borderRadius: 6,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 6,
    background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
  },
}));

// ----------------------------------------------------------------------

const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
  const [isDisabledCheckbox, setIsDisabledCheckbox] = useState(false);
  const [isDisabledButton, setIsDisabledButton] = useState(true);

  const TopUpSchema = Yup.object().shape({
    topup: Yup.number(),
    //   /*
    // // @ts-ignore */
    //   .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
  });

  const defaultValues = {
    topup: 0,
  };

  const methods = useForm<FormValuesProps>({
    resolver: yupResolver(TopUpSchema),
    defaultValues,
  });

  const {
    setValue,
    reset,
    handleSubmit,
    formState: { isSubmitting },
  } = methods;

  useEffect(() => {
    if (openDialog === false) {
      reset();
    }
  }, [openDialog, reset]);

  const onSubmit = async (data: FormValuesProps) => {
    reset();
  };

  const onCheckHandler = (data: FormValuesProps) => {
    setIsDisabledCheckbox(!isDisabledCheckbox);
    setIsDisabledButton(false);
    setValue('topup', testData.totalLimit - testData.myLimit);
  };

  const onTopupHandler = (value: string) => {
    value === '0' || value === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
    setValue('topup', value);
  };

  const getContent = () => (
    <Stack spacing={1} marginTop={2}>
      <Stack>
        <Typography variant="caption" color="#637381">
          Company Name
        </Typography>
        <Typography variant="body2">{testData.companyName}</Typography>
      </Stack>
      <Stack>
        <Typography variant="caption" color="#637381">
          Policy Number
        </Typography>
        <Typography variant="body2">{testData.policyNumber}</Typography>
      </Stack>
      <Stack direction="row" spacing={22}>
        <Stack>
          <Typography variant="caption" color="#637381">
            Total Member
          </Typography>
          <Typography variant="body2">{testData.totalMembers} Person</Typography>
        </Stack>
        <Stack>
          <Typography variant="caption" color="#637381">
            Total Cases
          </Typography>
          <Typography variant="body2">{testData.totalCases} Cases</Typography>
        </Stack>
      </Stack>
      <Stack spacing={1} sx={{ backgroundColor: '#F4F6F8', borderRadius: 1.5, padding: 2 }}>
        <Stack direction="row" justifyContent="space-between" alignItems="center">
          <Stack>
            <Typography variant="body2">Company Pooled Fund</Typography>
            <Typography variant="body2">{fCurrency(testData.myLimit)}</Typography>
            <Typography variant="caption" color="#919EAB">
              / {testData.totalLimit}
            </Typography>
          </Stack>
          <Stack>
            <Typography variant="h5">{testData.totalPersen}%</Typography>
          </Stack>
        </Stack>
        <BorderLinearProgress variant="determinate" value={testData.totalPersen} />
      </Stack>
      <Stack spacing={2}>
        <Typography variant="subtitle1" marginTop={3}>
          Top Up Limit
        </Typography>
        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
          <RHFTextField
            name="topup"
            label="Top Up"
            type="number"
            disabled={isDisabledCheckbox}
            onChange={(e) => onTopupHandler(e.target.value)}
          />
          <FormControlLabel
            sx={{ typography: 'caption' }}
            control={<Checkbox />}
            label={'Max ' + fCurrency(testData.totalLimit - testData.myLimit)}
            onChange={handleSubmit(onCheckHandler)}
          />

          <LoadingButton
            fullWidth
            size="large"
            type="submit"
            variant="contained"
            loading={isSubmitting}
            sx={{ marginTop: 2 }}
            disabled={isDisabledButton}
          >
            Ajukan Permintaan
          </LoadingButton>
        </FormProvider>
      </Stack>
    </Stack>
  );

  return (
    <MuiDialog
      title={title}
      openDialog={openDialog}
      setOpenDialog={setOpenDialog}
      content={getContent()}
      maxWidth="xs"
    />
  );
};

export default DialogTopUpLimit;