update exchange rate numbar

src/Pages/Master/ExchangeRate/EditExchangeRate.jsx

@@ -30,8 +30,35 @@ import {
 } from "../../../Services/exchange.rate.service";
 import ToastBox from "../../../Components/ToastBox";
 import { getTomorrowDate } from "../../../Constants/Constants";
+import * as yup from "yup";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 
+// const editExchange = yup.object().shape({
+//   rate: yup
+//     .number()
+//     .required("Rate is required")
+//     .positive("Rate must be greater than 0")
+//     .test(
+//       "is-decimal",
+//       "Rate must have at most 8 decimal places",
+//       (value) =>
+//         value !== undefined && value.toString().match(/^\d+(\.\d{1,8})?$/)
+//     ),
+// });
+
+const editExchange = yup.object().shape({
+  rate: yup
+    .number()
+    .required("Rate is required")
+    .positive("Rate must be greater than 0")
+    .test(
+      "is-decimal",
+      "Rate must have exactly 8 decimal places",
+      (value) =>
+        value !== undefined && value.toString().match(/^\d+(\.\d{8})?$/)
+    ),
+});
+
 // Convert date to YYYY-MM-DD format
 const formatDateValue = (date) => {
   if (!date) return "";
@@ -57,6 +84,7 @@ const EditExchangeRate = ({
   const toast = useToast();
   const {} = useDisclosure();
   const [isBtnLoading, setIsBtnLoading] = useState(false);
+  const [rateError, setRateError] = useState("");
 
   const { data, isLoading, errors } = useGetExchangeRateByIdQuery(id, {
     skip: !id,
@@ -73,11 +101,27 @@ const EditExchangeRate = ({
     }
   }, [foundObject]);
 
+  const validateRate = async () => {
+    try {
+      await editExchange.validate({ rate });
+      setRateError(""); // Clear validation error if valid
+      return true;
+    } catch (error) {
+      setRateError(error.message); // Display validation error
+      return false;
+    }
+  };
+
   const handleSave = async () => {
+    const isValid = await validateRate();
+    if (!isValid) {
+      return; // Prevent submission if validation fails
+    }
+
     setIsBtnLoading(true);
     try {
       const data = {
-        rate: rate,
+        rate,
       };
       const res = await updateExchange({ data, id });
       if (res?.data?.statusCode === 200) {
@@ -88,9 +132,31 @@ const EditExchangeRate = ({
         setAlert(false);
         onClose();
       }
-    } catch (error) {}
+    } catch (error) {
+      setIsBtnLoading(false);
+      // Handle error
+    }
   };
 
+  const checkValidate = async (e) => {
+    e.preventDefault();
+
+    // Wait for the validation to complete
+    const isValid = await validateRate();
+
+    if (!isValid) {
+      return; // Prevent submission if validation fails
+    } else {
+      setAlert(true); // Only trigger modal if validation passes
+    }
+  };
+
+  useEffect(() => {
+    if (rate) {
+      validateRate();
+    }
+  }, [rate]);
+
   return (
     <>
       <Drawer
@@ -100,12 +166,7 @@ const EditExchangeRate = ({
         onClose={onClose}
         finalFocusRef={btnRef}
       >
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            setAlert(true);
-          }}
-        >
+        <form onSubmit={(e) => checkValidate(e)}>
           <DrawerOverlay />
           <DrawerContent>
             <DrawerCloseButton />
@@ -153,16 +214,23 @@ const EditExchangeRate = ({
                     <Text fontSize={"sm"}>{formatDate(getTomorrowDate())}</Text>
                   </FormControl>
 
-                  <FormControl mb={4} isRequired>
+                  <FormControl mb={4} isRequired isInvalid={!!rateError}>
                     <FormLabel fontSize={"sm"}>Rate</FormLabel>
                     <Input
-                      required
                       type="number"
                       placeholder="Type rate here..."
                       size={"sm"}
                       value={rate}
-                      onChange={(e) => setRate(e.target.value)}
+                      onChange={(e) => {
+                        return setRate(e.target.value);
+                        // validateRate()
+                      }}
                     />
+                    {rateError && (
+                      <Text color="red.500" fontSize="sm" mt={1}>
+                        {rateError}
+                      </Text>
+                    )}
                   </FormControl>
                 </DrawerBody>
                 <DrawerFooter>