marco.pms.web/src/components/UserSubscription/VerifiedPayment.jsx

import React, { useEffect, useState } from "react";
import GlobalModel from "../common/GlobalModel";
import Invoice from "./Invoice";
import { useSelector } from "react-redux";
import { blockUI, unblockUI } from "../../utils/blockUI";

import { error } from "pdf-lib";
import { useSelfGetSubscription } from "../../hooks/useAuth";


const VerifiedPayment = ({ responsePayment, setStepStatus }) => {
  const [isGenerateInvoice, setIsGenerateInvoice] = useState(false);

  const { tenantEnquireId, paymentDetailId, planId } = useSelector(
    (store) => store.localVariables.selfTenant
  );

  const {
    mutate: getSubscription,
    isPending,
    isError,
    isSuccess,
    error,
  } = useSelfGetSubscription(
    () => {
      unblockUI();
      setStepStatus?.((prev) => ({ ...prev, 5: "success" }));
    },
    () => {
      unblockUI();
      setStepStatus?.((prev) => ({ ...prev, 5: "failed" }));
    }
  );

  useEffect(() => {
    if (responsePayment?.success) {
      const payload = { tenantEnquireId, paymentDetailId, planId };
      getSubscription(payload);
    }
  }, [responsePayment]);


  if (isError) {
    return (
      <div className="container-md mt-5 text-center">
        <div className="d-flex flex-column align-items-center justify-content-center">
          <div
            className="bg-danger p-3 rounded-circle mb-3 d-flex align-items-center justify-content-center"
            style={{ width: "70px", height: "70px" }}
          >
            <i className="bx bx-x fs-1 text-white fw-bold"></i>
          </div>

          <h4 className="text-danger mb-2">Subscription Generation Failed!</h4>
          <p className="text-muted">
            Unfortunately, your subscription transaction could not be completed.
          </p>

          <div className="mt-4 d-flex gap-3 flex-column flex-md-row justify-content-center">
            <a href="/" className="px-4 py-2 fw-semibold text-muted">
              Please review your payment details carefully and contact our
              Support Team for assistance.
            </a>
          </div>

          <div className="alert alert-light-danger mt-4 w-75 mx-auto text-start">
            <strong>Error Details:</strong>
            <pre className="small mb-0 mt-2 text-wrap">
              {JSON.stringify(error, null, 2)}
            </pre>
          </div>
        </div>
      </div>
    );
  }


  if (isPending) {
    return (
      <div className="container-md mt-5 text-center">
        <div className="d-flex flex-column align-items-center justify-content-center">
          <div className="spinner-border text-primary mb-3 p-1" role="status" />
          <h4 className="text-primary mb-2">Verifying Payment...</h4>
          <p className="text-muted">
            Please wait while we verify your transaction. Do not refresh or
            close this page.
          </p>
        </div>
      </div>
    );
  }


  if (isSuccess) {
    return (
      <div className="container-md mt-3 text-center h-auto">
        {isGenerateInvoice && (
          <GlobalModel
            isOpen={isGenerateInvoice}
            closeModal={() => setIsGenerateInvoice(false)}
          >
            <Invoice invoiceData={responsePayment?.data} />
          </GlobalModel>
        )}

        <div className="d-flex align-items-center justify-content-center">
          <span className="bg-success p-2 p-md-3 rounded-circle">
            <i className="bx bx-check fs-2 fw-bold text-white"></i>
          </span>
          <span className="fs-3 fs-md-2 ms-3 text-success">
            Payment Successful!
          </span>
        </div>

        <p className="text-muted mb-4 fs-6 fs-md-5 text-center mt-4">
          Thank you for your payment. Your <strong>subscription</strong> has
          been successfully activated.
        </p>

        <div className="mt-3">
          <small className="text-muted">
            A <strong>Set Password</strong> link has been sent to your
            registered email address. Please check your inbox.
          </small>
        </div>

        <div className="d-flex flex-column flex-md-row justify-content-center gap-3 my-4">
          <a href="/" className="btn btn-info px-4 py-2 fw-semibold">
            Go to Dashboard
          </a>
          <button
            className="btn btn-outline-primary px-4 py-2 fw-semibold"
            onClick={() => setIsGenerateInvoice(true)}
          >
            Generate Invoice
          </button>
        </div>
      </div>
    );
  }

  return null;
};

export default VerifiedPayment;