marco.pms.web/src/hooks/usePayments.jsx

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { PaymentRepository } from "../repositories/PaymentRepository";
import showToast from "../services/toastService";
import { useDispatch, useSelector } from "react-redux";
import { blockUI, unblockUI } from "../utils/blockUI";
import { setSelfTenant } from "../slices/localVariablesSlice";

export const removeRazorpayArtifacts=()=> {
  try {
    document
      .querySelectorAll("iframe[src*='razorpay'], iframe[name^='__PRIVATE']")
      .forEach((iframe) => iframe.remove());

    document
      .querySelectorAll(
        "div.razorpay-container, div[class*='razorpay-backdrop'], div[style*='z-index: 1040'], div[style*='z-index: 9999']"
      )
      .forEach((el) => el.remove());
    Array.from(document.querySelectorAll("body > div")).forEach((div) => {
      const html = div.outerHTML || "";
      if (
        html.includes("razorpay-container") ||
        html.includes("Test Mode") ||
        html.includes("razorpay-backdrop")
      ) {
        div.remove();
      }
    });

    document.body.removeAttribute("style");
    document.body.style.overflow = "";
    document.body.style.position = "";
    document.body.style.height = "";
    document.body.style.pointerEvents = "auto";

    document.documentElement.style.overflow = "";
    document.documentElement.style.removeProperty("overflow");

    window.scrollTo(0, 0);
  } catch (err) {
    console.warn(" Error while cleaning Razorpay artifacts:", err);
  }
}

const closeRazorpayPopup=()=> {
  try {
    if (window.Razorpay && typeof window.Razorpay.close === "function") {
      window.Razorpay.close();
    }

    setTimeout(removeRazorpayArtifacts, 600);
  } catch (err) {
    console.warn(" Error closing Razorpay popup:", err);
    removeRazorpayArtifacts();
  }
}

export const useVerifyPayment = (onSuccessCallBack, onFailureCallBack) => {
  const client = useQueryClient();
  const dispatch = useDispatch()

  return useMutation({
    mutationFn: (payload) => PaymentRepository.verifyPayment(payload),

    onSuccess: (data) => {
    dispatch(setSelfTenant({ paymentDetailId: data?.data?.id }));
      if (onSuccessCallBack) onSuccessCallBack(data);
    },

    onError: (error) => {
      if (onFailureCallBack) onFailureCallBack(error);
      showToast(
        error?.message ||
          error?.response?.message ||
          "Something went wrong. Please try again later.",
        "error"
      );
    },
  });
};

export const useMakePayment = (
  onSuccessCallBack,
  onFailureCallBack,
  currentPlan
) => {
  const client = useQueryClient();
  const { tenantEnquireId, planId } = useSelector(
    (store) => store.localVariables.selfTenant
  );

  const { mutate: verifyPayment } = useVerifyPayment(
    (response) => onSuccessCallBack?.(response),
    (error) => onFailureCallBack?.(error)
  );

  return useMutation({
    mutationFn: (payload) => PaymentRepository.makePayment(payload),

    onSuccess: (data) => {
      const orderId = data?.data?.orderId;
      const key = data?.data?.key;

      if (!orderId || !key) {
        showToast("Invalid Razorpay order details.", "error");
        return;
      }

      let manuallyClosed = false;

      const options = {
        key,
        amount: (currentPlan?.amount ?? 1) * 100,
        currency: currentPlan?.currency?.currencyCode || "INR",
        name: "MarcoAIOT Subscription",
        order_id: orderId,

        handler: async (response) => {
          if (manuallyClosed) {
            unblockUI()
            return;
          } 

          try {
            const payload = {
              tenantEnquireId,
              planId,
              orderId: response.razorpay_order_id,
              paymentId: response.razorpay_payment_id,
              signature: response.razorpay_signature,
            };
            verifyPayment(payload);
          } finally {
            closeRazorpayPopup();
          }
        },

        prefill: {
          name: "",
          email: "",
          contact: "",
        },

        theme: { color: "#ea3b0fff" },

        modal: {
          ondismiss: () => {
            manuallyClosed = true; 
            unblockUI();
            closeRazorpayPopup();
          },
        },
      };

      try {
        const razorpay = new window.Razorpay(options);

        razorpay.on("payment.failed", (response) => {
          if (manuallyClosed) return; 
          onFailureCallBack?.({
            status: "failed",
            message: response.error?.description || "Payment failed.",
            error: response.error,
            reason: "transaction_failed",
          });
          closeRazorpayPopup();
        });

        blockUI("Please Wait...");
        razorpay.open();
      } catch (err) {
        alert("This browser is not supported. Please try another browser.");
        closeRazorpayPopup();
      }
    },

    onError: (error) => {
      showToast(
        error?.message ||
          error?.response?.message ||
          "Something went wrong. Please try again later.",
        "error"
      );
    },
  });
};