classify web

2026-02-24 12:52:49 +05:00
commit 64af77101f
310 changed files with 45449 additions and 0 deletions
--- a/components/PagesComponent/Subscription/RazorpayPayment.jsx
+++ b/components/PagesComponent/Subscription/RazorpayPayment.jsx
@@ -0,0 +1,109 @@
+import { createPaymentIntentApi } from "@/utils/api";
+import { useState } from "react";
+import { useRazorpay } from "react-razorpay";
+import RazorpayLogo from "../../../public/assets/ic_razorpay.png";
+import { FaAngleRight } from "react-icons/fa";
+import { useSelector } from "react-redux";
+import { toast } from "sonner";
+import { t } from "@/utils";
+import CustomImage from "@/components/Common/CustomImage";
+import { Loader2 } from "lucide-react";
+
+const RazorpayPayment = ({
+  packageSettings,
+  selectedPackage,
+  setShowPaymentModal,
+  setToggleApiAfterPaymentSuccess
+}) => {
+  const { Razorpay } = useRazorpay();
+  const { data: settingsData } = useSelector((state) => state.Settings);
+  const { data: user } = useSelector((state) => state.UserSignup);
+  const [isLoading, setIsLoading] = useState(false);
+  let rzpay;
+
+  const PayWithRazorPay = async () => {
+    try {
+      setIsLoading(true);
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: selectedPackage.id,
+        payment_method: packageSettings.Razorpay.payment_method,
+      });
+      if (res.data.error) {
+        toast.error(res.data.message);
+        return;
+      }
+      setShowPaymentModal(false);
+      const paymentIntent = res.data.data.payment_intent;
+      const options = {
+        key: packageSettings.Razorpay.api_key,
+        name: settingsData.company_name,
+        description: settingsData.company_name,
+        image: settingsData.company_logo,
+        order_id: paymentIntent.id,
+        handler: function (response) {
+          toast.success(t("paymentSuccess"));
+          setToggleApiAfterPaymentSuccess((prev) => !prev)
+        },
+        prefill: {
+          name: user.name,
+          email: user.email,
+          contact: user.mobile,
+        },
+        notes: {
+          address: user.address,
+          user_id: user.id,
+          package_id: selectedPackage.id,
+        },
+        theme: {
+          color: settingsData.web_theme_color,
+        },
+      };
+
+      rzpay = new Razorpay(options); // Assign rzpay outside the function
+
+      rzpay.on("payment.failed", function (response) {
+        console.error(response.error.description);
+        if (rzpay) {
+          rzpay?.close();
+        }
+      });
+
+      rzpay.open();
+    } catch (error) {
+      console.error("Error during payment", error);
+      toast.error(t("errorProcessingPayment"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={PayWithRazorPay} className="w-full p-2">
+        <div className="flex items-center gap-2 justify-between ">
+          <div className="flex gap-3 items-center">
+            <div className="w-8 h-8">
+              <CustomImage
+                src={RazorpayLogo.src}
+                alt="Razorpay"
+                width={32}
+                height={32}
+                className="w-full h-full "
+              />
+            </div>
+            <p className="text-lg font-semibold">{t("razorPay")}</p>
+          </div>
+          <div>
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <FaAngleRight size={18} className="rtl:scale-x-[-1]" />
+            )}
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default RazorpayPayment;