314 lines
12 KiB
JavaScript
314 lines
12 KiB
JavaScript
import React, { useState } from "react";
|
|
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
|
import { Box, Button, HStack, Input, InputGroup, InputRightAddon, Textarea, useDisclosure, Image, Icon, VStack, Text, useToast } from "@chakra-ui/react";
|
|
import {
|
|
FormControl,
|
|
FormLabel,
|
|
FormHelperText,
|
|
} from "@chakra-ui/react";
|
|
import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
|
|
import SelectInvestorModal from "./SelectInvestorModal";
|
|
import { Controller, useForm } from "react-hook-form"; // Import useForm
|
|
import { yupResolver } from "@hookform/resolvers/yup"; // Import resolver for Yup
|
|
import * as Yup from "yup"; // Import Yup for validation
|
|
import { motion } from 'framer-motion'; // Import Framer Motion for animations
|
|
import { bytesToMB } from "../../Constants/Constants";
|
|
import { useCreateFawateerRequestMutation } from "../../Services/fawateer.maker.service";
|
|
import ToastBox from "../../Components/ToastBox";
|
|
import { useNavigate } from "react-router-dom";
|
|
import CurrencyInput from "../../Components/CurrencyInput";
|
|
|
|
// Validation schema using Yup
|
|
const validationSchema = Yup.object().shape({
|
|
investorName: Yup.string().required("Investor name is required"),
|
|
clientId: Yup.string().required("Client ID is required"),
|
|
transaction_date: Yup.date()
|
|
.required('Date is required')
|
|
.transform((value, originalValue) => {
|
|
return originalValue === "" ? null : value; // Convert empty strings to null
|
|
})
|
|
.typeError('Please enter a valid date').max(new Date(), "Date cannot be in the future"),
|
|
transaction_amount: Yup.number()
|
|
.required("Transaction amount is required")
|
|
.transform((value, originalValue) => originalValue === "" ? null : value) // Convert empty strings to null
|
|
.typeError('Transaction amount must be a number') // Custom error message if it's not a number
|
|
.positive('Transaction amount must be greater than zero'),
|
|
spportFile_path: Yup.mixed().required("Support file is required"),
|
|
makerComment: Yup.string(),
|
|
});
|
|
|
|
const CreateRequest = () => {
|
|
const toast = useToast()
|
|
const navigate=useNavigate()
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
const [selectedInvestor, setSelectorInvestor] = useState({});
|
|
const [filePreview, setFilePreview] = useState(null); // State for previewing the file
|
|
const [fileType, setFileType] = useState(null); // State to store file type for conditional rendering
|
|
const[ isLoading, setIsLoading ] = useState(false)
|
|
const [id, setId ] = useState(null)
|
|
|
|
// Initialize useForm with the resolver for Yup validation
|
|
const {control, register, handleSubmit, setValue,reset, formState: { errors } } = useForm({
|
|
resolver: yupResolver(validationSchema),
|
|
});
|
|
|
|
|
|
const [ creatFawaateerRequest ] = useCreateFawateerRequestMutation()
|
|
|
|
|
|
const onSubmit = async (data) => {
|
|
console.log(data);
|
|
setIsLoading(true)
|
|
|
|
// Convert data to FormData
|
|
const formData = new FormData();
|
|
|
|
// Append each field from the data object to the FormData
|
|
Object.keys(data).forEach((key) => {
|
|
if (key === "spportFile_path" && data[key] instanceof FileList) {
|
|
// Append the first file from FileList (assuming single file input)
|
|
formData.append(key, data[key][0]); // Append the file
|
|
} else {
|
|
formData.append(key, data[key]); // Append other fields
|
|
}
|
|
});
|
|
|
|
try {
|
|
// Make the API call with formData
|
|
const res = await creatFawaateerRequest({ data: formData, id });
|
|
|
|
if (res?.error) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox status={"error"} message={res?.error?.data?.message} />
|
|
),
|
|
});
|
|
setIsLoading(false);
|
|
reset()
|
|
return
|
|
} else if (res?.data) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox message={res?.data?.message} />
|
|
),
|
|
});
|
|
setIsLoading(false);
|
|
navigate('/fawateer-history')
|
|
return
|
|
} else {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox status={'error'} message={"Something went wrong"} />
|
|
),
|
|
});
|
|
setIsLoading(false);
|
|
return
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
toast({
|
|
render: () => (
|
|
<ToastBox status={'error'} message={"An error occurred"} />
|
|
),
|
|
});
|
|
setIsLoading(false);
|
|
return
|
|
}
|
|
};
|
|
|
|
|
|
// Handle file change and preview
|
|
const handleFileChange = (e) => {
|
|
const file = e.target.files[0];
|
|
console.log(file);
|
|
setValue("spportFile_path", file); // Set the file value in the form
|
|
setFileType(file); // Set the file type
|
|
|
|
if (file && file.type.startsWith("image/")) {
|
|
// If the file is an image, generate a preview
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
setFilePreview(reader.result); // Set the image preview
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
setFilePreview(null); // Clear preview if the file is not an image
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
|
|
<Box
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
flexWrap={'wrap'}
|
|
alignItems={"center"}
|
|
mt={5}
|
|
px={4}
|
|
as="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
>
|
|
{/* Investor Name Field */}
|
|
<FormControl isRequired w={"49%"} mb={2} isInvalid={errors.investorName}>
|
|
<FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
|
|
Investor name
|
|
</FormLabel>
|
|
<InputGroup size='sm'>
|
|
<Input
|
|
bg={"#F5F8F6"}
|
|
focusBorderColor="forestGreen.300"
|
|
size={"sm"}
|
|
fontSize={"sm"}
|
|
rounded={"sm"}
|
|
type={"text"}
|
|
readOnly={true}
|
|
placeholder={"Investor name"}
|
|
{...register("investorName")}
|
|
_placeholder={{ fontSize: "sm" }}
|
|
/>
|
|
<InputRightAddon gap={2} color={'forestgreen.400'} onClick={onOpen} cursor={'pointer'} fontWeight={600} fontSize={'xs'}>
|
|
<Search2Icon /> Search
|
|
</InputRightAddon>
|
|
</InputGroup>
|
|
<FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.investorName?.message}</FormHelperText>
|
|
</FormControl>
|
|
|
|
{/* Client ID Field */}
|
|
<FormControl isRequired w={"49%"} mb={2} isInvalid={errors.clientId}>
|
|
<FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
|
|
Client Id
|
|
</FormLabel>
|
|
<Input
|
|
bg={"#F5F8F6"}
|
|
focusBorderColor="forestGreen.300"
|
|
size={"sm"}
|
|
fontSize={"sm"}
|
|
rounded={"sm"}
|
|
type={"text"}
|
|
readOnly={true}
|
|
placeholder={"Client ID"}
|
|
{...register("clientId")}
|
|
/>
|
|
<FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.clientId?.message}</FormHelperText>
|
|
</FormControl>
|
|
|
|
{/* Date Field */}
|
|
<FormControl isRequired w={"49%"} mb={2} isInvalid={errors.date}>
|
|
<FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
|
|
Date
|
|
</FormLabel>
|
|
<Input
|
|
bg={"#F5F8F6"}
|
|
focusBorderColor="forestGreen.300"
|
|
size={"sm"}
|
|
fontSize={"sm"}
|
|
rounded={"sm"}
|
|
type={"date"}
|
|
max={new Date().toISOString().split("T")[0]} // Disable future dates
|
|
{...register("transaction_date")}
|
|
/>
|
|
<FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.transaction_date?.message}</FormHelperText>
|
|
</FormControl>
|
|
|
|
{/* Amount Field */}
|
|
<FormControl isRequired w={"49%"} mb={2} isInvalid={errors.amount}>
|
|
<FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
|
|
Amount (BHD)
|
|
</FormLabel>
|
|
<Controller
|
|
name="transaction_amount"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<CurrencyInput bg={"#F5F8F6"} {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
|
|
)}
|
|
/>
|
|
<FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>
|
|
{errors.transaction_amount?.message}
|
|
</FormHelperText>
|
|
</FormControl>
|
|
|
|
{/* Support File Field with Preview */}
|
|
<FormControl isRequired w={"49%"} mb={2} isInvalid={errors.spportFile_path}>
|
|
<FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
|
|
Support file
|
|
</FormLabel>
|
|
<Input
|
|
bg={"#F5F8F6"}
|
|
focusBorderColor="forestGreen.300"
|
|
size={"sm"}
|
|
fontSize={"sm"}
|
|
rounded={"sm"}
|
|
type={"file"}
|
|
className="form-control"
|
|
name="spportFile_path"
|
|
placeholder={"Support file"}
|
|
{...register("spportFile_path")}
|
|
// onChange={handleFileChange}
|
|
/>
|
|
<FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.spportFile_path?.message}</FormHelperText>
|
|
|
|
{/* Animated Preview */}
|
|
{filePreview && fileType?.type.startsWith("image/") && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
style={{ marginTop: "10px" }}
|
|
>
|
|
<Box position={'relative'} display={'flex'} alignContent={'flex-end'} gap={3} mt={2}>
|
|
<Image src={filePreview} alt="File preview" maxW={"150px"} borderRadius="md" boxShadow="md" />
|
|
<Icon onClick={()=> setFilePreview(null)} className="link" rounded={'md'} color={'red.700'} cursor={'pointer'} p={1.5} position={'absolute'} top={0} right={0} as={DeleteIcon} boxSize={7} />
|
|
<VStack justifyItems={'flex-end'} alignItems={'flex-start'}>
|
|
<Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Name: <Text as={'span'} color={'GrayText'}> {fileType?.name}</Text></Text>
|
|
<Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Size: <Text as={'span'} color={'GrayText'}> {bytesToMB(fileType?.size)} Mb</Text></Text>
|
|
<Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Type: <Text as={'span'} color={'GrayText'}> {fileType?.type}</Text></Text>
|
|
|
|
</VStack>
|
|
</Box>
|
|
</motion.div>
|
|
)}
|
|
</FormControl>
|
|
|
|
{/* Description Field */}
|
|
<FormControl w={"100%"} mb={2} isInvalid={errors.makerComment}>
|
|
<FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
|
|
Description
|
|
</FormLabel>
|
|
<Textarea
|
|
bg={"#F5F8F6"}
|
|
focusBorderColor="forestGreen.300"
|
|
size={"sm"}
|
|
fontSize={"sm"}
|
|
rounded={"sm"}
|
|
placeholder={"Description"}
|
|
{...register("makerComment")}
|
|
/>
|
|
<FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.makerComment?.message}</FormHelperText>
|
|
</FormControl>
|
|
|
|
{/* Submit Button */}
|
|
<HStack mt={2} w={'100%'} justifyContent={'flex-end'}>
|
|
<Button
|
|
colorScheme="forestGreen"
|
|
size={"sm"}
|
|
rounded={"sm"}
|
|
fontSize={"xs"}
|
|
type="submit"
|
|
isLoading={isLoading}
|
|
>
|
|
Create request
|
|
</Button>
|
|
</HStack>
|
|
</Box>
|
|
|
|
<SelectInvestorModal setId={setId} setValue={setValue} onClose={onClose} isOpen={isOpen} onOpen={onOpen}/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CreateRequest;
|