modal comma

This commit is contained in:
YasinShaikh123
2024-09-09 17:49:49 +05:30
parent 226b8a39bc
commit a1d7b1e9f9
5 changed files with 404 additions and 308 deletions

View File

@@ -16,7 +16,7 @@ import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import {
AddIcon,
CheckIcon,
CloseIcon,
CloseIcon,
DeleteIcon,
EditIcon,
ViewIcon,
@@ -35,7 +35,10 @@ import NormalTable from "../../../Components/DataTable/NormalTable";
import { useGetDepositRequestQuery } from "../../../Services/deposit.request.service";
import { current } from "@reduxjs/toolkit";
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
import { generateSerialNumber, removeTrailingZeros } from "../../../Constants/Constants";
import {
generateSerialNumber,
removeTrailingZeros,
} from "../../../Constants/Constants";
export const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
@@ -64,12 +67,11 @@ const DepositRequest = () => {
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
const formatDate = (date) => {
return new Date(date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
return new Date(date).toLocaleDateString("en-GB", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});
};
@@ -77,7 +79,7 @@ const DepositRequest = () => {
data,
isLoading: depositRequestLoading,
error,
refetch
refetch,
} = useGetDepositRequestQuery({ page: currentPage, size: pageSize });
// Use useEffect to refetch data when the component mounts
@@ -85,7 +87,6 @@ const DepositRequest = () => {
refetch();
}, [refetch]);
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr.no",
@@ -95,7 +96,7 @@ const DepositRequest = () => {
"Country",
"Phone Number",
"Amount in Investor currency",
"Deposit Date",
"Deposit Date",
"Action",
];
@@ -113,26 +114,26 @@ const DepositRequest = () => {
}, 300);
const filteredData = data?.data?.rows
.filter((item) => {
// Filter by name (case insensitive)
const name = [item.firstName, item.lastName, item.countryName].filter(Boolean).join(' ');
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
.filter((item) => {
// Filter by name (case insensitive)
const name = [item.firstName, item.lastName, item.countryName]
.filter(Boolean)
.join(" ");
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
// Filter by status (Uncomment and use if needed)
// const status = item.status;
// const statusLower = status ? "active" : "inactive";
// const statusMatches =
// statusFilter === "all" ||
// (statusFilter === "active" && status === true) ||
// (statusFilter === "inactive" && status === false);
return nameMatches;
})
.sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
// Filter by status (Uncomment and use if needed)
// const status = item.status;
// const statusLower = status ? "active" : "inactive";
// const statusMatches =
// statusFilter === "all" ||
// (statusFilter === "active" && status === true) ||
// (statusFilter === "inactive" && status === false);
return nameMatches;
})
.sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
const extractedArray = filteredData?.map((item, idx) => ({
// id: item?.id,
@@ -145,7 +146,7 @@ const DepositRequest = () => {
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{generateSerialNumber(idx,currentPage, pageSize )}
{generateSerialNumber(idx, currentPage, pageSize)}
</Text>
),
"Client ID": (
@@ -161,7 +162,7 @@ const DepositRequest = () => {
</Text>
),
"First Name": (
<Box isTruncated={true} w={"170px"}>
<Box isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item?.firstName}
</Text>
@@ -187,20 +188,30 @@ const DepositRequest = () => {
{item?.mobileNumber}
</Text>
</Box>
),
),
"Amount in Investor currency": (
<Box display={'flex'} justifyContent={'end'} w={"100px"} isTruncated={true}>
<Box
display={"flex"}
justifyContent={"end"}
w={"130px"}
isTruncated={true}
>
<Text as={"span"} color={"teal.900"}>
{/* {formatCurrency(removeTrailingZeros(item?.investorAmount))} */}
{parseFloat(item?.investorAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
{parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
<Badge ms={1} colorScheme="green">
{item?.currencyCode}
</Badge>
</Text>
</Box>
),
"Deposit Date": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
@@ -260,7 +271,7 @@ const DepositRequest = () => {
onRejectOpen();
}}
py={1}
// variant={"solid"}
// variant={"solid"}
>
<CloseIcon fontSize={"10px"} />
</Button>
@@ -343,12 +354,12 @@ const DepositRequest = () => {
isOpen={isConfirmOpen}
onClose={onConfirmClose}
id={actionId}
// firstField={firstField}
// firstField={firstField}
/>
<DepositRequestReject
isOpen={isRejectOpen}
onClose={onRejectClose}
id={actionId}
id={actionId}
/>
</Box>
);

View File

@@ -3,6 +3,7 @@ import {
Box,
Button,
FormControl,
FormErrorMessage,
FormLabel,
Input,
Modal,
@@ -20,11 +21,15 @@ import {
import React, { useEffect, useState } from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import { useGetDepositRequestByIdQuery, useGetDepositRequestQuery, useUpdateDepositRequestMutation } from "../../../Services/deposit.request.service";
import { Controller, useForm } from "react-hook-form";
import {
useGetDepositRequestByIdQuery,
useGetDepositRequestQuery,
useUpdateDepositRequestMutation,
} from "../../../Services/deposit.request.service";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import ToastBox from "../../../Components/ToastBox";
import { formatCurrency } from "../../../Components/CurrencyInput";
import CurrencyInput, { formatCurrency } from "../../../Components/CurrencyInput";
const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
@@ -37,20 +42,26 @@ export const conformModalSchema = yup.object().shape({
// }),
});
const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
const toast = useToast()
const DepositRequestApprove = ({
isOpen,
onClose,
firstField,
id,
data: requestData,
}) => {
const toast = useToast();
const [file, setFile] = useState();
const [isBtnLoading , setIsBtnLoading] = useState(false)
const [isBtnLoading, setIsBtnLoading] = useState(false);
const [ updateDepositRequest ] = useUpdateDepositRequestMutation()
const { data, isLoading } = useGetDepositRequestByIdQuery(id, {
const [updateDepositRequest] = useUpdateDepositRequestMutation();
const { data, isLoading } = useGetDepositRequestByIdQuery(id, {
skip: !id,
});
console.log(data?.data?.investorAmount);
const {
const {
control,
register,
reset,
watch,
@@ -59,8 +70,8 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
} = useForm({
resolver: yupResolver(conformModalSchema),
});
useEffect(() => {
useEffect(() => {
if (data) {
const investorAmount = parseFloat(data?.data?.investorAmount);
reset({
@@ -69,9 +80,9 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
});
}
}, [id, data, reset]);
const onSubmit = async(data) => {
setIsBtnLoading(true)
const onSubmit = async (data) => {
setIsBtnLoading(true);
const formData = new FormData();
formData.append("investorAmount", data.investorAmount);
@@ -79,42 +90,38 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
const file = data.supporting_FileName["0"];
formData.append("supporting_FileName", file);
try {
const res = await updateDepositRequest({ id, data: formData });
try {
const res = await updateDepositRequest({ id ,data: formData})
if (res?.error) {
toast({
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
setIsBtnLoading(false);
} else if (res?.data?.statusCode === 200) {
toast({
render: () => <ToastBox message={res?.data?.message} />,
});
setIsBtnLoading(false);
}
} catch (error) {}
if (res?.error) {
toast({
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
setIsBtnLoading(false)
}else if(res?.data?.statusCode === 200) {
toast({
render: () => (
<ToastBox message={res?.data?.message} />
),
});
setIsBtnLoading(false)
}
} catch (error) {
}
heandleOnClose();
heandleOnClose();
};
const heandleOnClose = () =>{
reset()
onClose()
}
const heandleOnClose = () => {
reset();
onClose();
};
return (
<Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
<Modal
isOpen={isOpen}
onClose={heandleOnClose}
initialFocusRef={firstField}
>
<ModalOverlay />
<ModalContent pb={4}>
@@ -125,14 +132,16 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
) : (
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<FormControl mb={4} isRequired>
<FormLabel fontSize="sm">Deposit Amount <Badge colorScheme="green">{data?.data?.currencyCode}</Badge></FormLabel>
{/* <FormControl mb={4} isRequired>
<FormLabel fontSize="sm">
Deposit Amount
<Badge colorScheme="green">{data?.data?.currencyCode}</Badge>
</FormLabel>
<Input
focusBorderColor="green.400"
name="investorAmount"
{...register("investorAmount")}
// value={formatCurrency(watch('investorAmount'))}
value={formatCurrency(watch("investorAmount"))}
fontSize="sm"
type="number"
size="sm"
@@ -145,7 +154,24 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
{errors.investorAmount.message}
</Text>
)}
</FormControl> */}
<FormControl mb={5} isRequired>
<FormLabel fontSize={"sm"}>Deposit Amount</FormLabel>
<Controller
name="investorAmount"
control={control}
render={({ field }) => (
<CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
)}
/>
{errors.investorAmount && (
<Text fontSize="xs" color="red">
{errors.investorAmount.message}
</Text>
)}
</FormControl>
<FormControl mb={4} isRequired>
<FormLabel fontSize="sm">Upload Supporting</FormLabel>
<Input

View File

@@ -37,7 +37,7 @@ const cashDetails = yup.object().shape({
});
const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
const params = useParams()
const params = useParams()
const id = params?.id
const [file, setFile] = useState("");
const [fileName, setFileName] = useState("");
@@ -134,7 +134,7 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
<DrawerBody>
<Stack spacing={4}>
<FormControl isInvalid={errors.transactionDate} isRequired>
<FormControl isInvalid={errors.transactionDate} isRequired>
<FormLabel fontSize={"sm"}>Date Selection</FormLabel>
<Controller
name="transactionDate"

View File

@@ -285,7 +285,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
</HStack>
<Box gap={8} me={12} w={"200px"}>
<Box gap={8} me={12} w={"220px"}>
<Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
<Text

View File

@@ -1,236 +1,295 @@
import {
Badge,
Box,
Button,
FormControl,
FormLabel,
Heading,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
Textarea,
useDisclosure,
useToast,
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import { useGetDepositRequestByIdQuery, useUpdateDepositRequestMutation } from "../../../Services/deposit.request.service";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import ToastBox from "../../../Components/ToastBox";
import { useGetDrawalRequestByIdQuery, useUpdateDrawalRequestMutation } from "../../../Services/drawal.request.service";
const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
export const conformModalSchema = yup.object().shape({
investorAmount: yup.string().required("Investor amount is required"),
comment: yup.string().notRequired(),
Badge,
Box,
Button,
FormControl,
FormLabel,
Heading,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
Textarea,
useDisclosure,
useToast,
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { Controller, useForm } from "react-hook-form";
import {
useGetDepositRequestByIdQuery,
useUpdateDepositRequestMutation,
} from "../../../Services/deposit.request.service";
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
import ToastBox from "../../../Components/ToastBox";
import {
useGetDrawalRequestByIdQuery,
useUpdateDrawalRequestMutation,
} from "../../../Services/drawal.request.service";
import CurrencyInput from "../../../Components/CurrencyInput";
const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
export const conformModalSchema = yup.object().shape({
investorAmount: yup.string().required("Investor amount is required"),
comment: yup.string().notRequired(),
});
const DrawalRequestApprove = ({
isOpen,
onClose,
firstField,
id,
data: requestData,
}) => {
const toast = useToast();
const [file, setFile] = useState();
const [isBtnLoading, setIsBtnLoading] = useState(false);
const [updateDrawalRequest] = useUpdateDrawalRequestMutation();
const { data, isLoading } = useGetDrawalRequestByIdQuery(id, {
skip: !id,
});
const DrawalRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
const toast = useToast()
const [file, setFile] = useState();
const [isBtnLoading , setIsBtnLoading] = useState(false)
const filteredData = data?.dat;
const {
control,
register,
reset,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(conformModalSchema),
});
useEffect(() => {
if (data) {
const investorAmount = parseFloat(data?.data?.investorAmount);
reset({
investorAmount: investorAmount,
accountName: data?.data?.accountName,
});
}
}, [id, data, reset]);
const [ updateDrawalRequest ] = useUpdateDrawalRequestMutation()
const { data, isLoading } = useGetDrawalRequestByIdQuery(id, {
skip: !id,
});
const onSubmit = async (data) => {
setIsBtnLoading(true);
const filteredData =data?.dat;
const {
register,
reset,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(conformModalSchema),
});
useEffect(() => {
if (data) {
const investorAmount = parseFloat(data?.data?.investorAmount);
reset({
investorAmount: investorAmount,
accountName: data?.data?.accountName,
});
}
}, [id, data, reset]);
const onSubmit = async(data) => {
setIsBtnLoading(true)
try {
const res = await updateDrawalRequest({ id ,data})
const res = await updateDrawalRequest({ id, data });
if (res?.error) {
toast({
render: () => (
<ToastBox message={res?.error?.data?.message} status={"error"} />
),
});
setIsBtnLoading(false)
}else if(res?.data?.statusCode === 200) {
setIsBtnLoading(false);
} else if (res?.data?.statusCode === 200) {
toast({
render: () => (
<ToastBox message={res?.data?.message} />
),
render: () => <ToastBox message={res?.data?.message} />,
});
setIsBtnLoading(false)
}
} catch (error) {
}
setIsBtnLoading(false);
}
} catch (error) {}
heandleOnClose();
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
// useEffect(() => {
// if (data) {
// reset({
// investorAmount: data?.data?.dataValues?.investorAmount,
// });
// }
// }, [data, reset]);
const heandleOnClose = () =>{
reset({
investorAmount:""
})
onClose()
}
return (
<Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
<ModalOverlay />
<ModalContent pb={4}>
<ModalHeader fontSize={"md"}>Confirm</ModalHeader>
<ModalCloseButton />
{isLoading ? (
<FullscreenLoaders height={"50vh"} />
) : (
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<FormControl mb={5} isRequired>
<FormLabel fontSize="sm">Withdrawal Amount <Badge colorScheme="green">{filteredData?.currencyCode}</Badge></FormLabel>
<Input
focusBorderColor="green.400"
name="investorAmount"
{...register("investorAmount")}
fontSize="sm"
type="number"
size="sm"
placeholder={"100,000"}
textAlign={"right"}
// readOnly
/>
{errors.investorAmount && (
<Text fontSize="xs" color="red">
{errors.investorAmount.message}
</Text>
)}
</FormControl>
<Heading fontSize="sm" fontWeight={600} mb={4}>Investor Account Details</Heading>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>IBAN:</Text>
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.IBANnumber}</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Account No:</Text>
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.accountNumber}</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Bank Name:</Text>
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.bankName}</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Account Name:</Text>
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.accountName}</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>SWIFT Code:</Text>
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.swiftCode}</Text>
</Box>
<Box display={"flex"} mb={5}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Bank Address:</Text>
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.bankAddress}</Text>
</Box>
<Box display={"flex"} mb={5}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Bank Nick Name:</Text>
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.bankNickName}</Text>
</Box>
<FormControl mb={4}>
<FormLabel fontSize="sm">Comments</FormLabel>
<Textarea
rows={5}
focusBorderColor="green.400"
name="comment"
{...register("comment")}
fontSize="sm"
type="textarea"
size="sm"
placeholder={"Enter your comments...."}
resize={"none"}
/>
{errors.comment && (
<Text fontSize="xs" color="red">
{errors.comment.message}
</Text>
)}
</FormControl>
</ModalBody>
<ModalFooter>
<Button
colorScheme="gray"
mr={3}
onClick={onClose}
size={"sm"}
rounded={"sm"}
>
Cancel
</Button>
<Button
colorScheme="forestGreen"
variant="solid"
size={"sm"}
rounded={"sm"}
isLoading={isBtnLoading}
type="submit"
>
Confirm
</Button>
</ModalFooter>
</Box>
)}
</ModalContent>
</Modal>
);
};
export default DrawalRequestApprove;
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
// useEffect(() => {
// if (data) {
// reset({
// investorAmount: data?.data?.dataValues?.investorAmount,
// });
// }
// }, [data, reset]);
const heandleOnClose = () => {
reset({
investorAmount: "",
});
onClose();
};
return (
<Modal
isOpen={isOpen}
onClose={heandleOnClose}
initialFocusRef={firstField}
>
<ModalOverlay />
<ModalContent pb={4}>
<ModalHeader fontSize={"md"}>Confirm</ModalHeader>
<ModalCloseButton />
{isLoading ? (
<FullscreenLoaders height={"50vh"} />
) : (
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
{/* <FormControl mb={5} isRequired>
<FormLabel fontSize="sm">
Withdrawal Amount{" "}
<Badge colorScheme="green">
{filteredData?.currencyCode}
</Badge>
</FormLabel>
<Input
focusBorderColor="green.400"
name="investorAmount"
{...register("investorAmount")}
fontSize="sm"
type="number"
size="sm"
placeholder={"100,000"}
textAlign={"right"}
// readOnly
/>
{errors.investorAmount && (
<Text fontSize="xs" color="red">
{errors.investorAmount.message}
</Text>
)}
</FormControl> */}
{/* =======================[ Coma is acchived using Controller ]================================ */}
<FormControl mb={5} isRequired>
<FormLabel fontSize={"sm"}>Withdrawal Amount</FormLabel>
<Controller
name="investorAmount"
control={control}
render={({ field }) => (
<CurrencyInput
{...field}
textAlign={"right"}
fontSize={"sm"}
type="number"
size={"sm"}
/>
)}
/>
{errors.investorAmount && (
<Text fontSize="xs" color="red">
{errors.investorAmount.message}
</Text>
)}
</FormControl>
<Heading fontSize="sm" fontWeight={600} mb={4}>
Investor Account Details
</Heading>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
IBAN:
</Text>
<Text fontSize="xs" mb={0}>
{data?.data?.bank_payouts?.IBANnumber}
</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
Account No:
</Text>
<Text fontSize="xs" mb={0}>
{data?.data?.bank_payouts?.accountNumber}
</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
Bank Name:
</Text>
<Text fontSize="xs" mb={0}>
{data?.data?.bank_payouts?.bankName}
</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
Account Name:
</Text>
<Text fontSize="xs" mb={0}>
{data?.data?.bank_payouts?.accountName}
</Text>
</Box>
<Box display={"flex"} mb={3}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
SWIFT Code:
</Text>
<Text fontSize="xs" mb={0}>
{data?.data?.bank_payouts?.swiftCode}
</Text>
</Box>
<Box display={"flex"} mb={5}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
Bank Address:
</Text>
<Text fontSize="xs" mb={0}>
{data?.data?.bank_payouts?.bankAddress}
</Text>
</Box>
<Box display={"flex"} mb={5}>
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
Bank Nick Name:
</Text>
<Text fontSize="xs" mb={0}>
{data?.data?.bank_payouts?.bankNickName}
</Text>
</Box>
<FormControl mb={4}>
<FormLabel fontSize="sm">Comments</FormLabel>
<Textarea
rows={5}
focusBorderColor="green.400"
name="comment"
{...register("comment")}
fontSize="sm"
type="textarea"
size="sm"
placeholder={"Enter your comments...."}
resize={"none"}
/>
{errors.comment && (
<Text fontSize="xs" color="red">
{errors.comment.message}
</Text>
)}
</FormControl>
</ModalBody>
<ModalFooter>
<Button
colorScheme="gray"
mr={3}
onClick={onClose}
size={"sm"}
rounded={"sm"}
>
Cancel
</Button>
<Button
colorScheme="forestGreen"
variant="solid"
size={"sm"}
rounded={"sm"}
isLoading={isBtnLoading}
type="submit"
>
Confirm
</Button>
</ModalFooter>
</Box>
)}
</ModalContent>
</Modal>
);
};
export default DrawalRequestApprove;