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/BankDetailsModal.jsx
+++ b/components/PagesComponent/Subscription/BankDetailsModal.jsx
@@ -0,0 +1,120 @@
+import { useNavigate } from "@/components/Common/useNavigate";
+import NoData from "@/components/EmptyStates/NoData";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  getIsShowBankDetails,
+  hideBankDetails,
+} from "@/redux/reducer/globalStateSlice";
+import { t } from "@/utils";
+import { createPaymentIntentApi } from "@/utils/api";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { toast } from "sonner";
+
+const BankDetailsModal = ({ packageId, bankDetails }) => {
+  const { navigate } = useNavigate();
+  const IsShowBankDetails = useSelector(getIsShowBankDetails);
+  const IsBankDetails = bankDetails && Object.keys(bankDetails).length > 0;
+  const [IsConfirmingPayment, setIsConfirmingPayment] = useState(false);
+
+  const handleConfirmPayment = async () => {
+    try {
+      setIsConfirmingPayment(true);
+      const res = await createPaymentIntentApi.createIntent({
+        package_id: packageId,
+        payment_method: "bankTransfer",
+      });
+      if (res?.data?.error === false) {
+        toast.success(t("paymentConfirmed"));
+        hideBankDetails();
+        navigate("/transactions");
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Failed to confirm Payment", error);
+    } finally {
+      setIsConfirmingPayment(false);
+    }
+  };
+  return (
+    <Dialog open={IsShowBankDetails} onOpenChange={hideBankDetails}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("bankAccountDetails")}
+          </DialogTitle>
+          <DialogDescription className="!text-base">
+            {t("pleaseTransferAmount")}
+          </DialogDescription>
+          {IsBankDetails ? (
+            <>
+              <div className="flex flex-col gap-3 !mt-8">
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    {t("accountHolder")}
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.account_holder_name}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    {t("accountNumber")}
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.account_number}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    {t("bankName")}
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.bank_name}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <p className="w-[35%] opacity-60 font-medium text-base">
+                    SWIFT/IFSC Code
+                  </p>
+                  <p className="text-base px-3 py-2 bg-muted w-[75%] rounded">
+                    {bankDetails?.ifsc_swift_code}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center flex-wrap gap-4 !mt-8">
+                <button
+                  className="px-4 py-2 border flex-1 rounded whitespace-nowrap"
+                  onClick={hideBankDetails}
+                >
+                  {t("cancel")}
+                </button>
+                <button
+                  className="px-4 py-2 bg-primary flex-1 text-white rounded whitespace-nowrap disabled:opacity-66"
+                  onClick={handleConfirmPayment}
+                  disabled={IsConfirmingPayment}
+                >
+                  {IsConfirmingPayment
+                    ? t("confirmingPayment")
+                    : t("confirmPayment")}
+                </button>
+              </div>
+            </>
+          ) : (
+            <NoData name={t("bankAccountDetails")} />
+          )}
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BankDetailsModal;