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

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { PaymentRepository } from "../repositories/PaymentRepository";
import showToast from "../services/toastService";
import { useSelector } from "react-redux";

export function 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);
  }
}

function 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();

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

    onSuccess: (data) => {
      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) => {
      if (onSuccessCallBack) onSuccessCallBack(response);
    },
    (error) => {
      if (onFailureCallBack) 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;
      }

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

        handler: async (response) => {
          try {
            const payload = {
              tenantEnquireId: tenantEnquireId,
              planId: 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: () => {
            if (onFailureCallBack) {
              onFailureCallBack({
                status: "failed",
                message: "Payment was cancelled before completion.",
                reason: "popup_closed",
              });
            }
            closeRazorpayPopup();
          },
        },
      };

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

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

          try {
            razorpay.open();
          } catch (err) {
            alert("This browser is not supported. Please try another browser.");
            closeRazorpayPopup();
          }
        }, 300);
      } 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"
      );
    },
  });
};