Quiz_dashboard/src/Pages/ReSeller/Sales/Model/ValidationModelForm.tsx
2024-09-24 15:23:09 +03:00

73 lines
2.2 KiB
TypeScript

import { Col, Row } from "reactstrap";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import useFormatDataToSelect from "../../../../utils/useFormatDataToSelect";
import { useFormikContext } from "formik";
import { useModalState } from "../../../../zustand/Modal";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import { Divider, Spin } from "antd";
import { MdCancel } from "react-icons/md";
const Form = ({status}:{status?:any}) => {
const {values,setFieldValue} = useFormikContext<any>()
console.log(values?.currentModalIndex);
const { isOpen, setIsOpen } = useModalState((state) => state);
const { setObjectToEdit } = useObjectToEdit();
const {t} = useTranslation();
const formik = useFormikContext();
const handleNext = ()=>{
setFieldValue( "currentModalIndex" , values?.currentModalIndex + 1 )
}
const handleCancel = () => {
setIsOpen("");
setObjectToEdit({});
};
return (
values?.currentModalIndex == 1 &&
<div className="w-100">
<header className="modal_title">
<span>
{t(`models.`)}{" "}
</span>
<MdCancel onClick={handleCancel} />
</header>
<Divider />
<Row className="w-100">
<Col>
<ValidationField
placeholder="phone_number"
label="phone_number"
name="phone_number"
/>
<Divider className="margin_auto"/>
</Col>
{values?.currentModalIndex}
<div className="buttons">
<div className="back_button pointer" onClick={handleCancel}>
{t("practical.cancel")}
</div>
<button
className="add_button"
disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
onClick={handleNext}
>
{t(`practical.search`)}
{status === QueryStatusEnum.LOADING && (
<span className="Spinier_Div">
<Spin />
</span>
)}
</button>
</div>
</Row>
</div>
);
};
export default Form;