Change Permission & WIP Dashboard Client Portal

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

@@ -20,6 +20,7 @@ import * as Yup from 'yup';
 // form
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
+import axios from '../../utils/axios';
 
 /* ---------------------------------- types --------------------------------- */
 type MuiDialogProps = {
@@ -30,15 +31,21 @@ type MuiDialogProps = {
   openDialog: boolean;
   setOpenDialog: Function;
   content?: ReactElement;
-  data?: {
-    companyName: string;
-    policyNumber: number;
-    totalMembers: number;
-    totalCases: number;
-    totalPersen: number;
-    myLimit: number;
-    totalLimit: number;
+  data?: DataProps;
+};
+
+type DataProps = {
+  companyName: string;
+  policyNumber: number;
+  totalMembers: number;
+  totalCases: number;
+  totalPersen: number;
+  myLimit: {
+    balance: number;
+    total: number;
+    percentage: number;
   };
+  maxTopUp: number;
 };
 
 type FormValuesProps = {
@@ -46,16 +53,6 @@ type FormValuesProps = {
 };
 /* -------------------------------------------------------------------------- */
 
-// 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,
@@ -76,14 +73,15 @@ export default function DialogTopUpLimit({
   setOpenDialog,
   data,
 }: MuiDialogProps) {
-  const [isDisabledCheckbox, setIsDisabledCheckbox] = useState(false);
+  const [isDisabledInput, setIsDisabledInput] = useState(false);
   const [isDisabledButton, setIsDisabledButton] = useState(true);
+  const [isCheckboxChecked, setIsCheckboxChecked] = useState(false);
 
   const TopUpSchema = Yup.object().shape({
-    topup: Yup.number(),
-    /*
-    // @ts-ignore */
-    // .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
+    topup: Yup.number().max(
+      data?.maxTopUp,
+      `Maximum top-up amount is ${fCurrency(data?.maxTopUp)}`
+    ),
   });
 
   const defaultValues = {
@@ -100,29 +98,52 @@ export default function DialogTopUpLimit({
     setValue,
     reset,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
   } = methods;
 
   useEffect(() => {
     if (openDialog === false) {
+      setIsDisabledInput(false);
+      setIsDisabledButton(true);
+      setIsCheckboxChecked(false);
+
       reset();
     }
   }, [openDialog, reset]);
 
   const onSubmit = async (data: FormValuesProps) => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    setIsDisabledInput(false);
+    setIsDisabledButton(true);
+    setIsCheckboxChecked(false);
+
+    // await axios.post('');
+
     reset();
   };
 
-  const onCheckHandler = (data: FormValuesProps) => {
-    setIsDisabledCheckbox(!isDisabledCheckbox);
-    setIsDisabledButton(false);
+  const onCheckHandler = (value: string) => {
+    setIsDisabledInput(!isDisabledInput);
+    value === '0' || value === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
+    setIsCheckboxChecked(!isCheckboxChecked);
     // @ts-ignore
-    setValue('topup', testData.totalLimit - testData.myLimit);
+    setValue('topup', data.maxTopUp);
   };
 
   const onTopupHandler = (value: string) => {
-    value === '0' || value === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
-    setValue('topup', value);
+    console.log(!!errors);
+
+    let newValue;
+
+    if (value.startsWith('0')) {
+      newValue = '0';
+    } else {
+      newValue = value;
+    }
+
+    newValue === '0' || newValue === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
+    setValue('topup', newValue);
   };
 
   const getContent = () => (
@@ -157,16 +178,16 @@ export default function DialogTopUpLimit({
         <Stack direction="row" justifyContent="space-between" alignItems="center">
           <Stack>
             <Typography variant="body2">Company Pooled Fund</Typography>
-            <Typography variant="body2">{fCurrency(data ? data.myLimit : 0)}</Typography>
+            <Typography variant="body2">{fCurrency(data ? data.myLimit.balance : 0)}</Typography>
             <Typography variant="caption" color="#919EAB">
-              / {data ? data.totalLimit : 0}
+              / {data ? data.myLimit.total : 0}
             </Typography>
           </Stack>
           <Stack>
-            <Typography variant="h5">{data ? data.totalPersen : 0}%</Typography>
+            <Typography variant="h5">{data ? data.myLimit.percentage : 0}%</Typography>
           </Stack>
         </Stack>
-        <BorderLinearProgress variant="determinate" value={data ? data.totalPersen : 0} />
+        <BorderLinearProgress variant="determinate" value={data ? data.myLimit.percentage : 0} />
       </Stack>
       <Stack spacing={2}>
         <Typography variant="subtitle1" marginTop={3}>
@@ -177,14 +198,21 @@ export default function DialogTopUpLimit({
             name="topup"
             label="Top Up"
             type="number"
-            disabled={isDisabledCheckbox}
+            disabled={isDisabledInput}
             onChange={(e) => onTopupHandler(e.target.value)}
+            error={!!errors.topup}
+            helperText={errors.topup?.message}
           />
           <FormControlLabel
+            name="checkboxTopUp"
             sx={{ typography: 'caption' }}
-            control={<Checkbox />}
-            label={'Max ' + fCurrency((data ? data.totalLimit : 0) - (data ? data.myLimit : 0))}
-            onChange={handleSubmit(onCheckHandler)}
+            control={
+              <Checkbox
+                checked={isCheckboxChecked}
+                onChange={(e) => onCheckHandler(e.target.value)}
+              />
+            }
+            label={'Max ' + fCurrency(data ? data.maxTopUp : 0)}
           />
 
           <LoadingButton