610 lines
18 KiB
JavaScript
610 lines
18 KiB
JavaScript
import React, { useContext, useEffect, useState } from "react";
|
|
import FormInputMain from "../../../Components/FormInputMain";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { useForm } from "react-hook-form";
|
|
import * as yup from "yup";
|
|
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
|
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
|
|
import {
|
|
useCreateIOMutation,
|
|
useGetIOByIdQuery,
|
|
useUpdateIOMutation,
|
|
} from "../../../Services/io.service";
|
|
import ToastBox from "../../../Components/ToastBox";
|
|
import {
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import { formatDatee } from "../../../Components/FormField";
|
|
import { formatDateToYYYYMMDD, removeTrailingZeros } from "../../../Constants/Constants";
|
|
|
|
const schema = yup.object().shape({
|
|
investmentNameEnglish: yup
|
|
.string()
|
|
.required("IO name in English is required")
|
|
.min(3, "IO name in English must be at least 3 characters long")
|
|
.max(150, "IO name in English must be at most 150 characters long"),
|
|
|
|
investmentNameArabic: yup
|
|
.string()
|
|
.required("IO name in Arabic is required")
|
|
.min(3, "IO name in Arabic must be at least 3 characters long")
|
|
.max(50, "IO name in Arabic must be at most 50 characters long"),
|
|
|
|
descriptionEnglish: yup
|
|
.string()
|
|
.required("Description in English is required")
|
|
.min(10, "Description in English must be at least 10 characters long")
|
|
.max(1000, "Description in English must be at most 1000 characters long"),
|
|
|
|
descriptionArabic: yup
|
|
.string()
|
|
.required("Description in Arabic is required")
|
|
.min(10, "Description in Arabic must be at least 10 characters long")
|
|
.max(2000, "Description in Arabic must be at most 500 characters long"),
|
|
expectedReturnArabic: yup
|
|
.string()
|
|
.required("Expected return in Arabic is required"),
|
|
|
|
goalAmount: yup
|
|
.number()
|
|
.typeError("Goal Amount is must be number")
|
|
.required('Goal amount is required')
|
|
.positive('Goal amount must be a positive number'),
|
|
closingDate: yup
|
|
.date()
|
|
.notRequired("Closing date is required")
|
|
.min(new Date(), "Closing date cannot be in the past"),
|
|
|
|
holdingPeriod: yup.string().required("Holding period is required"),
|
|
holdingPeriodArabic: yup.string().required("Holding period is required"),
|
|
|
|
// minInvestmentAmount: yup
|
|
// .number()
|
|
// .required("Minimum investment is required")
|
|
// .positive("Minimum investment must be a positive number")
|
|
// .min(1, "Minimum investment must be at least 1"),
|
|
|
|
ISIN: yup.string().notRequired(),
|
|
|
|
InvestmentDetails: yup.string().notRequired(),
|
|
|
|
comment: yup.string().notRequired()
|
|
// .min(10, "Comment must be at least 10 characters long")
|
|
.max(100, "Comment must be at most 100 characters long"),
|
|
|
|
expectedReturn: yup
|
|
.string()
|
|
.required("Expected return is required"),
|
|
});
|
|
|
|
const IODetails = ({ enableNextTab, index, data }) => {
|
|
|
|
const params = useParams();
|
|
const navigate = useNavigate();
|
|
const toast = useToast();
|
|
|
|
|
|
const handleInputChangeCreate = (index, newValue) => {
|
|
|
|
const updatedValues = [...values];
|
|
updatedValues[index].value = newValue;
|
|
setValues(updatedValues);
|
|
console.log(values);
|
|
};
|
|
|
|
const handleInputChangeEdit = (index, newValue) => {
|
|
// Allow only whole numbers using regex
|
|
if (/^\d*$/.test(newValue)) {
|
|
const updatedValues = [...values];
|
|
updatedValues[index].value = newValue;
|
|
setValues(updatedValues);
|
|
console.log(values);
|
|
}
|
|
};
|
|
|
|
// ======================[ States ]
|
|
const [isLoading, setIsLoading] = useState();
|
|
|
|
// ======================[ Variables Api ]
|
|
const id = params?.id;
|
|
|
|
// ======================[ Cotext Api ]
|
|
const { investmentType, sponser, setIOStatus, setIODetails, setIOloading } =
|
|
useContext(GlobalStateContext);
|
|
|
|
// ======================[ RTK Querry Api ]
|
|
|
|
const {
|
|
data: IObyID,
|
|
isLoading: IObyIDisLoading,
|
|
error: IObyIDerror,
|
|
} = useGetIOByIdQuery(id, { skip: !id });
|
|
console.log(IObyID);
|
|
|
|
const [creatIO] = useCreateIOMutation();
|
|
const [updateIO] = useUpdateIOMutation();
|
|
|
|
// ======================[ Selector filter ]
|
|
const investmentTypeOptions = data?.investmentType.map(
|
|
({ investmentTypeName, id }) => {
|
|
return {
|
|
label: investmentTypeName,
|
|
value: Number(id),
|
|
};
|
|
}
|
|
);
|
|
|
|
const sponserNameOption = data?.sponsor?.map(({ sponsorName, id }) => {
|
|
return {
|
|
label: sponsorName,
|
|
value: Number(id),
|
|
};
|
|
});
|
|
|
|
const miniValue = data?.country?.map(
|
|
({ countryName, flagIcon, minInvestmentAmt, countryCode, id, currency }, index) => {
|
|
return {
|
|
id:id,
|
|
country: countryName,
|
|
value: minInvestmentAmt,
|
|
logo: flagIcon,
|
|
curr: currency?.currencyCode,
|
|
};
|
|
}
|
|
);
|
|
|
|
const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode, country_xid,id })=>{
|
|
console.log(currencyCode);
|
|
return{
|
|
_id:id,
|
|
id:country_xid,
|
|
country: country?.countryName,
|
|
value: removeTrailingZeros(minInvestmentAmt),
|
|
logo: country?.flagIcon,
|
|
curr: currencyCode,
|
|
}
|
|
})
|
|
|
|
|
|
const schemaEdit = yup.object().shape({
|
|
investmentNameEnglish: yup
|
|
.string()
|
|
.required("IO name in English is required")
|
|
.min(3, "IO name in English must be at least 3 characters long")
|
|
.max(150, "IO name in English must be at most 150 characters long"),
|
|
|
|
investmentNameArabic: yup
|
|
.string()
|
|
.required("IO name in Arabic is required")
|
|
.min(3, "IO name in Arabic must be at least 3 characters long")
|
|
.max(50, "IO name in Arabic must be at most 50 characters long"),
|
|
|
|
descriptionEnglish: yup
|
|
.string()
|
|
.required("Description in English is required")
|
|
.min(10, "Description in English must be at least 10 characters long")
|
|
.max(1000, "Description in English must be at most 1000 characters long"),
|
|
|
|
descriptionArabic: yup
|
|
.string()
|
|
.required("Description in Arabic is required")
|
|
.min(10, "Description in Arabic must be at least 10 characters long")
|
|
.max(2000, "Description in Arabic must be at most 500 characters long"),
|
|
expectedReturnArabic: yup
|
|
.string()
|
|
.required("Expected return in Arabic is required"),
|
|
|
|
goalAmount: yup
|
|
.number()
|
|
.typeError("Goal Amount is must be number")
|
|
.required('Goal amount is required')
|
|
.positive('Goal amount must be a positive number')
|
|
.min(IObyID?.data?.totalAmtInvestmentInUSD, `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`),
|
|
closingDate: yup
|
|
.date()
|
|
.notRequired("Closing date is required")
|
|
.min(new Date(), "Closing date cannot be in the past"),
|
|
|
|
holdingPeriod: yup.string().required("Holding period is required"),
|
|
holdingPeriodArabic: yup.string().required("Holding period is required"),
|
|
isShariah: yup.string().required("CheckBox is required"),
|
|
|
|
|
|
// minInvestmentAmount: yup
|
|
// .number()
|
|
// .required("Minimum investment is required")
|
|
// .positive("Minimum investment must be a positive number")
|
|
// .min(1, "Minimum investment must be at least 1"),
|
|
|
|
ISIN: yup.string().notRequired(),
|
|
|
|
InvestmentDetails: yup.string().notRequired(),
|
|
|
|
comment: yup.string().notRequired()
|
|
.min(10, "Comment must be at least 10 characters long")
|
|
.max(100, "Comment must be at most 100 characters long"),
|
|
|
|
expectedReturn: yup
|
|
.string()
|
|
.required("Expected return is required"),
|
|
});
|
|
|
|
|
|
|
|
|
|
const [values, setValues] = useState(id?minInvestmentById:miniValue);
|
|
|
|
|
|
const formatNumber = (num) => {
|
|
// Remove non-numeric characters and format with commas
|
|
return num.replace(/\D/g, '')
|
|
.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
};
|
|
// console.log(values);
|
|
|
|
// ======================[ Validator filter ]
|
|
const {
|
|
control,
|
|
reset,
|
|
watch,
|
|
setValue,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(id ? schemaEdit : schema),
|
|
});
|
|
|
|
useEffect(() => {
|
|
setIOloading(IObyIDisLoading)
|
|
setIODetails({
|
|
...IObyID?.data,
|
|
});
|
|
if (IObyID?.data) {
|
|
reset({
|
|
investmentNameEnglish: IObyID?.data?.investmentNameEnglish,
|
|
investmentNameArabic: IObyID?.data?.investmentNameArabic,
|
|
descriptionEnglish: IObyID?.data?.descriptionEnglish,
|
|
descriptionArabic: IObyID?.data?.descriptionArabic,
|
|
goalAmount: IObyID?.data?.goalAmount,
|
|
closingDate: formatDatee(IObyID?.data?.closingDate),
|
|
holdingPeriod: IObyID?.data?.holdingPeriod,
|
|
ISIN: IObyID?.data?.ISIN,
|
|
comment: IObyID?.data?.comment,
|
|
expectedReturn: IObyID?.data?.expectedReturn,
|
|
investmentType_xid: IObyID?.data?.investmentType_xid,
|
|
InvestmentDetails: IObyID?.data?.InvestmentDetails,
|
|
minInvestmentAmount: IObyID?.data?.minInvestmentAmount,
|
|
holdingPeriodArabic: IObyID?.data?.minInvestmentAmount,
|
|
expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
|
|
isShariah: IObyID?.data?.isShariah
|
|
});
|
|
}
|
|
|
|
}, [id, IObyID]);
|
|
|
|
//=======================[ Creator ]
|
|
const formFields = [
|
|
{
|
|
label: "IO Name",
|
|
name: "investmentNameEnglish",
|
|
value: IObyID?.data?.investmentNameEnglish,
|
|
type: "text",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "49%",
|
|
maxLength:150,
|
|
helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameEnglish?.length || 0} characters.`
|
|
},
|
|
{
|
|
label: "IO Name (Arabic)",
|
|
name: "investmentNameArabic",
|
|
value: IObyID?.data?.investmentNameArabic,
|
|
type: "text",
|
|
isRequired: true,
|
|
arabic: true,
|
|
section: " ",
|
|
width: "49%",
|
|
maxLength:150,
|
|
helperText:`Maximum length should be 150 characters. You have entered ${watch()?.investmentNameArabic?.length || 0} characters.`
|
|
},
|
|
{
|
|
label: "Description",
|
|
name: "descriptionEnglish",
|
|
value: IObyID?.data?.descriptionEnglish,
|
|
type: "textarea",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "49%",
|
|
maxLength:1000,
|
|
helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionEnglish?.length || 0} characters.`
|
|
},
|
|
{
|
|
label: "Description (Arabic)",
|
|
name: "descriptionArabic",
|
|
value: IObyID?.data?.descriptionArabic,
|
|
type: "textarea",
|
|
isRequired: true,
|
|
arabic: true,
|
|
section: " ",
|
|
width: "49%",
|
|
maxLength:1000,
|
|
helperText:`Maximum length should be 1000 characters. You have entered ${watch()?.descriptionArabic?.length || 0} characters.`
|
|
|
|
},
|
|
{
|
|
label: "Holding Period",
|
|
name: "holdingPeriod",
|
|
type: "text",
|
|
placeHolder: "1Y",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "49%",
|
|
value: IObyID?.data?.holdingPeriod,
|
|
maxLength:20,
|
|
helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriod?.length || 0} characters.`
|
|
},
|
|
{
|
|
label: "Holding Period (Arabic)",
|
|
name: "holdingPeriodArabic",
|
|
type: "text",
|
|
placeHolder: "1Y",
|
|
isRequired: true,
|
|
arabic: true,
|
|
section: " ",
|
|
width: "49%",
|
|
value: IObyID?.data?.holdingPeriodArabic,
|
|
maxLength:20,
|
|
helperText:`Maximum length should be 20 characters. You have entered ${watch()?.holdingPeriodArabic?.length || 0} characters.`
|
|
},
|
|
|
|
|
|
{
|
|
label: "Expected Return",
|
|
name: "expectedReturn",
|
|
type: "text",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
value: IObyID?.data?.expectedReturn,
|
|
},
|
|
|
|
{
|
|
label: "Expected Return (Arabic)",
|
|
name: "expectedReturnArabic",
|
|
type: "text",
|
|
isRequired: true,
|
|
arabic: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
value: IObyID?.data?.expectedReturnArabic,
|
|
},
|
|
{
|
|
label: "Shariah",
|
|
name: "isShariah",
|
|
type: "checkBox",
|
|
value:IObyID?.data?.isShariah,
|
|
// isRequired: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
value: IObyID?.data?.isShariah,
|
|
},
|
|
|
|
|
|
{
|
|
label: "Investment Type",
|
|
placeHolder: "Select option",
|
|
name: "investmentType",
|
|
type: "select",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
options: investmentTypeOptions,
|
|
value: IObyID?.data?.investmentType_xid,
|
|
},
|
|
{
|
|
label: "Sponsor Name",
|
|
placeHolder: "Select option",
|
|
name: "sponserName",
|
|
type: "select",
|
|
isRequired: true,
|
|
options: sponserNameOption,
|
|
section: " ",
|
|
width: "32.3%",
|
|
value: IObyID?.data?.sponsor_xid,
|
|
},
|
|
{
|
|
label: "Goal Amount",
|
|
placeHolder: "$00.00",
|
|
value: IObyID?.data?.goalAmount,
|
|
name: "goalAmount",
|
|
type: "number",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
{
|
|
label: "Closing Date",
|
|
name: "closingDate",
|
|
// value: "IObyID?.data?.closingDate",
|
|
type: "date",
|
|
isRequired: true,
|
|
section: " ",
|
|
width: "32.3%",
|
|
dateValue:formatDatee(IObyID?.data?.closingDate),
|
|
// helperText: IObyID && `Current closing date is : ${formatDate(IObyID?.data?.closingDate)}`
|
|
closingDate:true
|
|
},
|
|
{
|
|
label: "ISIN",
|
|
placeHolder: "",
|
|
name: "ISIN",
|
|
type: "text",
|
|
align:"right",
|
|
section: " ",
|
|
width: "32.3%",
|
|
},
|
|
{
|
|
label: "Investment Details",
|
|
placeHolder: "",
|
|
name: "InvestmentDetails",
|
|
type: "text",
|
|
section: " ",
|
|
width: "32.3%",
|
|
value: IObyID?.data?.InvestmentDetails,
|
|
maxLength:20,
|
|
helperText:`Maximum length should be 20 characters. You have entered ${watch()?.InvestmentDetails?.length || 0} characters.`
|
|
},
|
|
|
|
{
|
|
label: "Minimum Investment",
|
|
placeHolder: "Enter comment here",
|
|
name: "table",
|
|
type: "table",
|
|
section: " ",
|
|
width: "100%",
|
|
isRequired: true,
|
|
options: investmentTypeOptions,
|
|
handleInputChange:id ? handleInputChangeEdit : handleInputChangeCreate,
|
|
value: values,
|
|
},
|
|
|
|
{
|
|
label: "Comment",
|
|
placeHolder: "Enter comment here",
|
|
name: "comment",
|
|
type: "textarea",
|
|
section: " ",
|
|
width: "100%",
|
|
options: investmentTypeOptions,
|
|
value: IObyID?.data?.comment,
|
|
maxLength:100,
|
|
helperText:`Maximum length should be 100 characters. You have entered ${watch()?.comment?.length || 0} characters.`
|
|
},
|
|
];
|
|
const groupedFields = formFields.reduce((groups, field) => {
|
|
const { section } = field;
|
|
if (!groups[section]) {
|
|
groups[section] = [];
|
|
}
|
|
groups[section].push(field);
|
|
return groups;
|
|
}, {});
|
|
|
|
const onSubmit = async (data) => {
|
|
|
|
delete data.table;
|
|
|
|
setIsLoading(true);
|
|
const updatedMinAmount = values?.map(({id, value, _id})=>{
|
|
return {
|
|
id:_id,
|
|
country_xid:id,
|
|
minInvestmentAmt: Number(value)
|
|
}
|
|
})
|
|
|
|
// console.log(formatDateToYYYYMMDD(data.closingDate));
|
|
const formData = {
|
|
...data,
|
|
investmentType_xid: Number(data.investmentType),
|
|
sponsor_xid: Number(data.sponserName),
|
|
minInvestmentAmt:updatedMinAmount,
|
|
closingDate: formatDateToYYYYMMDD(data.closingDate)
|
|
};
|
|
|
|
// console.log(formData);
|
|
if (id) {
|
|
console.log("========================",formData);
|
|
const res = await updateIO({ data: formData, id });
|
|
console.log(res);
|
|
if (res?.data?.statusCode === 200) {
|
|
setIsLoading(false);
|
|
toast({
|
|
render: () => <ToastBox message={res?.data?.message} />,
|
|
});
|
|
navigate(`/view-io/${id}`);
|
|
enableNextTab(index);
|
|
} else if(res?.error?.status === 400){
|
|
setIsLoading(false);
|
|
toast({
|
|
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
|
|
});
|
|
} else if(res?.error?.status === 500){
|
|
setIsLoading(false);
|
|
toast({
|
|
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
|
|
});
|
|
}
|
|
} else {
|
|
try {
|
|
console.log("========================",formData);
|
|
const res = await creatIO(formData);
|
|
console.log(res?.error?.status);
|
|
if (res?.data?.statusCode === 200) {
|
|
setIsLoading(false);
|
|
toast({
|
|
render: () => <ToastBox message={res?.data?.message} />,
|
|
});
|
|
navigate(`/view-io/${res?.data?.data}`);
|
|
enableNextTab(index);
|
|
} else if(res?.error?.status === 400){
|
|
setIsLoading(false);
|
|
toast({
|
|
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
|
|
});
|
|
}else if(res?.error?.status === 500){
|
|
setIsLoading(false);
|
|
toast({
|
|
render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
|
|
// ==========================
|
|
// if (params?.id) {
|
|
// return enableNextTab(index);
|
|
// }
|
|
// const id = generateUniqueId();
|
|
// const status = "Draft";
|
|
// // setValue("id", id)
|
|
// const updatedData = { ...data, id, ioStatus: status };
|
|
|
|
// // Add the updated data to the IODetails array
|
|
// setIODetails([...IODetails, updatedData]);
|
|
|
|
// // Navigate to the new route
|
|
// navigate(`/create-io/${updatedData?.id}`);
|
|
};
|
|
|
|
return IObyIDisLoading ? (
|
|
<FullscreenLoaders height={'70vh'} />
|
|
) : (
|
|
|
|
<FormInputMain
|
|
p={0.1}
|
|
w={250}
|
|
width={"23.8%"}
|
|
groupedFields={groupedFields}
|
|
control={control}
|
|
errors={errors}
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
btnLoading={isLoading}
|
|
submitTitle={id ? "Update" : "Submit"}
|
|
>
|
|
{/* <Box display={"flex"} justifyContent={"end"} mb={3} mt={4} me={3}>
|
|
<Checkbox colorScheme='forestGreen' display={"flex"} gap={3} flexDirection= {"row-reverse"}>
|
|
<Text as={"span"} fontWeight={500} fontSize={"sm"}>Shariah</Text>
|
|
</Checkbox>
|
|
</Box> */}
|
|
</FormInputMain>
|
|
);
|
|
};
|
|
|
|
export default IODetails;
|