+
{configStep[currentStep - 1]?.component()}
-
);
};
-
export default SubscriptionLayout;
diff --git a/src/components/UserSubscription/VerifiedPayment.jsx b/src/components/UserSubscription/VerifiedPayment.jsx
new file mode 100644
index 00000000..59527d2c
--- /dev/null
+++ b/src/components/UserSubscription/VerifiedPayment.jsx
@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react";
+import GlobalModel from "../common/GlobalModel";
+import Invoice from "./Invoice";
+
+const VerifiedPayment = ({ onNext, responsePayment }) => {
+ const [isGenerateInvoice, setIsGenerateInvoice] = useState(false);
+
+ if (!responsePayment) {
+ return (
+
+
+
+
Verifying payment...
+
+ Please wait while we verify your transaction. Do not refresh or
+ close this page.
+
+
+
+ );
+ }
+
+ if (responsePayment?.success) {
+ onNext();
+ return (
+
+ {isGenerateInvoice && (
+
setIsGenerateInvoice(false)}
+ >
+
+
+ )}
+
+
+
+
+
+ Payment Successful!
+
+
+
+
+ Thank you for your payment. Your subscription has
+ been successfully activated.
+
+
+ {/*
+
+
+ Subscription Details
+
+
+ -
+ Plan Name:
+ Premium Plan
+
+ -
+ Amount Paid:
+ ₹999.00
+
+ -
+ Payment ID:
+ {responsePayment?.paymentId}
+
+ -
+ Activation Date:
+ {new Date().toLocaleDateString()}
+
+ -
+ Expiry Date:
+ 27 Nov 2025
+
+
+
+
*/}
+
+
+
+ );
+ }
+
+ return null;
+};
+
+export default VerifiedPayment;
diff --git a/src/hooks/useAuth.jsx b/src/hooks/useAuth.jsx
index 6b87ade6..ad59f964 100644
--- a/src/hooks/useAuth.jsx
+++ b/src/hooks/useAuth.jsx
@@ -11,8 +11,10 @@ import { useDispatch, useSelector } from "react-redux";
import {
closeAuthModal,
openAuthModal,
+ setSelfTenant,
} from "../slices/localVariablesSlice.jsx";
import { removeSession } from "../utils/authUtils.js";
+import showToast from "../services/toastService.tsx";
// ----------------------------Modal--------------------------
@@ -76,6 +78,30 @@ export const useSelectTenant = (onSuccessCallBack) => {
});
};
+export const useCreateSelfTenant = (onSuccessCallBack, onFailureCallBack) => {
+ const dispatch = useDispatch();
+ return useMutation({
+ mutationFn: async (payload) => {
+ const resp = await AuthRepository.createSuscription(payload);
+ return resp.data;
+ },
+ onSuccess: (response, variables) => {
+
+ dispatch(
+ setSelfTenant({
+ tenantEnquireId: response?.tenantEnquireId,
+ planId: null,
+ })
+ );
+ if (onSuccessCallBack) onSuccessCallBack(response);
+ },
+ onError: (error) => {
+ showToast("Somthing worng went happend", "error");
+ if (onFailureCallBack) onFailureCallBack();
+ },
+ });
+};
+
export const useAuthModal = () => {
const dispatch = useDispatch();
const { isOpen } = useSelector((state) => state.localVariables.AuthModal);
diff --git a/src/hooks/usePayment.jsx b/src/hooks/usePayment.jsx
index f5d30ca1..72078e6f 100644
--- a/src/hooks/usePayment.jsx
+++ b/src/hooks/usePayment.jsx
@@ -1,36 +1,188 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { PaymentRepository } from "../repositories/PaymentRepository";
+import showToast from "../services/toastService";
+import { useSelector } from "react-redux";
-export const useMakePayment = (onSuccessCallBack) => {
- const client = useQueryClient();
- return useMutation({
- mutationFn: (payload) => PaymentRepository.makePayment(payload),
- onSuccess: (_, varibales) => {
- if (onSuccessCallBack) onSuccessCallBack();
- },
- onError: (error) => {
- showToast(
- error.message ||
- error.response.message ||
- "Something went wrong.Please try again later.",
- "error"
- );
- },
- });
-};
+export function removeRazorpayArtifacts() {
+ try {
+ document
+ .querySelectorAll("iframe[src*='razorpay'], iframe[name^='__PRIVATE']")
+ .forEach((iframe) => iframe.remove());
-export const useVerifyPayment = () => {
+ 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: (_, varibales) => {
- if (onSuccessCallBack) onSuccessCallBack();
+
+ 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?.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"
);
},
diff --git a/src/pages/Home/HomeSchema.jsx b/src/pages/Home/HomeSchema.jsx
index 631c9ea0..867d9d52 100644
--- a/src/pages/Home/HomeSchema.jsx
+++ b/src/pages/Home/HomeSchema.jsx
@@ -13,9 +13,9 @@ export const OrganizationSchema = z.object({
/^[+]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/,
"Invalid phone number format"
),
- onBoardingDate: z.coerce
- .date()
- .refine((d) => !Number.isNaN(d.getTime()), { message: "Invalid date" }),
+ // onBoardingDate: z.coerce
+ // .date()
+ // .refine((d) => !Number.isNaN(d.getTime()), { message: "Invalid date" }),
organizationSize: z.string().min(1, "Organization Size is required"),
industryId: z.string().uuid("Industry is required"),
reference: z.string().min(1,{message:"Reference is required"}),
diff --git a/src/pages/Home/MakeSubscription.jsx b/src/pages/Home/MakeSubscription.jsx
index 7d7ac231..24b88891 100644
--- a/src/pages/Home/MakeSubscription.jsx
+++ b/src/pages/Home/MakeSubscription.jsx
@@ -3,29 +3,70 @@ import React, { useState, useMemo } from "react";
import SubscriptionLayout from "../../components/UserSubscription/SubscriptionLayout";
import SubscriptionForm from "../../components/UserSubscription/SubscriptionForm";
import ProcessedPayment from "../../components/UserSubscription/ProcessedPayment";
+import VerifiedPayment from "../../components/UserSubscription/VerifiedPayment";
const MakeSubscription = () => {
- const [currentStep, setCurrentStep] = useState(2);
+ const [currentStep, setCurrentStep] = useState(1);
+ const [responsePayment, setResponsePayment] = useState(null);
+
+ const [stepStatus, setStepStatus] = useState({
+ 1: "success",
+ 2: "pending",
+ 3: "pending",
+ });
+
+ const handleVerification = (resp) => {
+ setResponsePayment(resp);
+ if (resp?.success) {
+ setStepStatus((prev) => ({ ...prev, 2: "success", 3: "success" }));
+ setCurrentStep(3);
+ } else {
+ setStepStatus((prev) => ({ ...prev, 2: "failed" }));
+ }
+ };
+
const checkOut_Steps = [
{
name: "Client Info",
- component: () =>
setCurrentStep(prev => prev + 1)}/>,
+ component: () => (
+
+ ),
},
{
name: "Payment",
- component: () => setCurrentStep(prev => prev + 1)}/>,
+ component: () => (
+ handleVerification(resp)}
+ onFail={() => setStepStatus((prev) => ({ ...prev, 2: "failed" }))}
+ resetPaymentStep={() =>
+ setStepStatus((prev) => ({ ...prev, 2: "pending" }))
+ }
+ />
+ ),
},
{
name: "Verified",
- component: () => Verified
,
+ component: () => (
+ ({ ...prev, 4: "success" })}
+ responsePayment={responsePayment}
+ />
+ ),
},
];
return (
-
+ setCurrentStep={setCurrentStep}
+ stepStatus={stepStatus}
+ />
);
};
diff --git a/src/repositories/AuthRepository.jsx b/src/repositories/AuthRepository.jsx
index 7ac9466e..81c677b3 100644
--- a/src/repositories/AuthRepository.jsx
+++ b/src/repositories/AuthRepository.jsx
@@ -12,6 +12,7 @@ const AuthRepository = {
sendMail: (data) => api.postPublic("/api/auth/sendmail", data),
getSubscription: (frequency) =>
api.getPublic(`/api/market/list/subscription-plan?frequency=${frequency}`),
+ createSuscription:(data)=>api.post(`/api/Tenant/self/create`,data),
// Protected routes (require auth token)
logout: (data) => api.post("/api/auth/logout", data),
diff --git a/src/repositories/PaymentRepository.jsx b/src/repositories/PaymentRepository.jsx
index f3e7b5c5..40e48264 100644
--- a/src/repositories/PaymentRepository.jsx
+++ b/src/repositories/PaymentRepository.jsx
@@ -2,6 +2,6 @@ import { api } from "../utils/axiosClient";
export const PaymentRepository = {
- makePayment: () => api.post(`/api/Payment/create-order`),
- verifyPayment: () => api.post(`/api/Payment/verify-payment`),
+ makePayment: (payload) => api.post(`/api/Payment/create-order`,payload),
+ verifyPayment: (payload) => api.post(`/api/Payment/verify-payment`,payload),
};
diff --git a/src/slices/localVariablesSlice.jsx b/src/slices/localVariablesSlice.jsx
index b520b7e5..83695f25 100644
--- a/src/slices/localVariablesSlice.jsx
+++ b/src/slices/localVariablesSlice.jsx
@@ -31,6 +31,11 @@ const localVariablesSlice = createSlice({
AuthModal: {
isOpen: false,
},
+
+ selfTenant: {
+ tenantEnquireId: null,
+ planId: null,
+ },
},
reducers: {
changeMaster: (state, action) => {
@@ -96,6 +101,12 @@ const localVariablesSlice = createSlice({
const { modalType } = action.payload;
state.modals[modalType].isOpen = !state.modals[modalType].isOpen;
},
+ setSelfTenant: (state, action) => {
+ state.selfTenant.tenantEnquireId =
+ action.payload.tenantEnquireId ?? state.selfTenant.tenantEnquireId;
+ state.selfTenant.planId =
+ action.payload.planId ?? state.selfTenant.planId;
+ },
},
});
@@ -110,6 +121,10 @@ export const {
toggleOrgModal,
openAuthModal,
closeAuthModal,
- setOrganization,openModal, closeModal, toggleModal
+ setOrganization,
+ openModal,
+ closeModal,
+ toggleModal,
+ setSelfTenant,
} = localVariablesSlice.actions;
export default localVariablesSlice.reducer;
diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js
index d304aa1b..0cd7382e 100644
--- a/src/utils/appUtils.js
+++ b/src/utils/appUtils.js
@@ -136,16 +136,16 @@ export const formatFigure = (
return new Intl.NumberFormat(locale, formatterOptions).format(amount);
};
-export const frequencyLabel = (freq) => {
+export const frequencyLabel = (freq,isLong=false) => {
switch (freq) {
case 0:
- return "1 mo";
+ return isLong ? "1 Month" : "1 mo";
case 1:
- return "3 mo";
+ return isLong ? "3 Months" : "3 mo";
case 2:
- return "6 mo";
+ return isLong ? "6 Months" : "6 mo";
case 3:
- return "1 yr";
+ return isLong ? "1 Year" : "1 yr";
default:
return "mo";
}