tanami-admin-panel/src/Pages/Master/ExchangeRate/EditExchangeRate.jsx

import {
  Box,
  Button,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  FormControl,
  FormLabel,
  Input,
  Text,
  Tooltip,
  useDisclosure,
  useToast,
} from "@chakra-ui/react";
import React, { useContext, useRef, useState, useEffect } from "react";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { FiEdit3 } from "react-icons/fi";
import { BiMessageSquareEdit } from "react-icons/bi";
import { TbEdit } from "react-icons/tb";
import { EditIcon, ViewIcon } from "@chakra-ui/icons";
import { formatDate } from "../../../Components/Functions/UTCConvertor";
import {
  useGetExchangeRateByIdQuery,
  useUpdateExchangeRateMutation,
} 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
    .string()
    .required("Rate is required")
    .matches(
      /^\d+\.\d{8}$/,
      "Rate must have exactly 8 decimal places"
    )
    .test(
      "is-positive",
      "Rate must be greater than 0",
      (value) => parseFloat(value) > 0
    ),
});

// Convert date to YYYY-MM-DD format
const formatDateValue = (date) => {
  if (!date) return "";
  const d = new Date(date);
  let month = "" + (d.getMonth() + 1);
  let day = "" + d.getDate();
  const year = d.getFullYear();

  if (month.length < 2) month = "0" + month;
  if (day.length < 2) day = "0" + day;

  return [year, month, day].join("-");
};

const EditExchangeRate = ({
  id,
  setIsLoading,
  isOpen,
  onOpen,
  onClose,
  btnRef,
}) => {
  const toast = useToast();
  const {} = useDisclosure();
  const [isBtnLoading, setIsBtnLoading] = useState(false);
  const [rateError, setRateError] = useState("");

  const { data, isLoading, errors,refetch, isFetching } = useGetExchangeRateByIdQuery(id, {
    skip: !id,
  });

  const [updateExchange] = useUpdateExchangeRateMutation();
  const foundObject = data?.data;
  const [rate, setRate] = useState("");
  const [alert, setAlert] = useState(false);

  console.log(rate);
  

  useEffect(() => {
    if (id) {refetch()}
    if (foundObject) {
      const numericRate = parseFloat(foundObject.rate) || 0; // Convert to number or default to 0 if invalid
      setRate(numericRate.toFixed(8)); // Set rate with exactly 8 decimal places
    }
  }, [foundObject, isOpen]);
  

  // useEffect(()=>{
  //   if (id) {
  //     refetch()
  //   }
  // },[isOpen])

  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,
      };
      const res = await updateExchange({ data, id });
      if (res?.data?.statusCode === 200) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        setIsBtnLoading(false);
        setAlert(false);
        onClose();
      }
    } 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
        // size={"md"}
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <form onSubmit={(e) => checkValidate(e)}>
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader fontSize={"md"}>Edit rate</DrawerHeader>

            {isFetching ? (
              <FullscreenLoaders />
            ) : (
              <>
                {" "}
                <DrawerBody>
                  <Box display={"flex"} mb={5}>
                    <Box
                      w={"50%"}
                      display={"flex"}
                      flexDirection={"column"}
                      gap={1}
                    >
                      <FormLabel fontSize={"sm"}>From</FormLabel>
                      <Text as={"span"} fontSize={"sm"} fontWeight={"bold"}>
                        {foundObject?.fromCurrency?.currencyCode}
                      </Text>
                    </Box>
                    <Box
                      w={"50%"}
                      display={"flex"}
                      flexDirection={"column"}
                      gap={1}
                    >
                      <FormLabel fontSize={"sm"}>To</FormLabel>
                      <Text as={"span"} fontSize={"sm"} fontWeight={"bold"}>
                        {foundObject?.toCurrency?.currencyCode}
                      </Text>
                    </Box>
                  </Box>

                  {/* <FormControl mb={4}>
                <FormLabel fontSize={"sm"}>Last effective date</FormLabel>
                <Text color={'gray.500'}  fontSize={"sm"}>
                  {formatDate(foundObject?.effectiveFrom)}
                </Text>
              </FormControl>   */}
                  <FormControl mb={4}>
                    <FormLabel fontSize={"sm"}>Effective from</FormLabel>
                    <Text fontSize={"sm"}>{formatDate(getTomorrowDate())}</Text>
                  </FormControl>

                  <FormControl mb={4} isRequired isInvalid={!!rateError}>
                    <FormLabel fontSize={"sm"}>Rate</FormLabel>
                    <Input
                      type="number"
                      placeholder="Type rate here..."
                      size={"sm"}
                      value={rate}
                      onChange={(e) => {
                        const value = e.target.value;
                        // Match numbers with at most 8 decimal places
                        if (/^\d*\.?\d{0,8}$/.test(value)) {
                          setRate(value);
                        }
                      }}
                    />
                    {rateError && (
                      <Text color="red.500" fontSize="sm" mt={1}>
                        {rateError}
                      </Text>
                    )}
                  </FormControl>
                </DrawerBody>
                <DrawerFooter>
                  <Button
                    variant="outline"
                    colorScheme={"forestGreen"}
                    rounded={"sm"}
                    size={"sm"}
                    mr={3}
                    onClick={onClose}
                    // onClick={() => {
                    //   window.location.reload();
                    //   onClose(); 
                    // }}
                    // onClick={() => {
                    //   setRate(""); 
                    //   setRateError(""); 
                    //   onClose();
                    // }}
                  >
                    Cancel
                  </Button>

                  <Button
                    colorScheme={"forestGreen"}
                    rounded={"sm"}
                    size={"sm"}
                    type="submit"
                  >
                    Save
                  </Button>
                </DrawerFooter>
              </>
            )}
          </DrawerContent>
        </form>
      </Drawer>
      <CustomAlertDialog
        isOpen={alert}
        onClose={() => setAlert(false)}
        alertHandler={handleSave}
        message={"Are you sure you want to update rates?"}
        isLoading={isBtnLoading}
      />
    </>
  );
};

export default EditExchangeRate;