added initially

public/assets/css/core-extend.css

@@ -71,21 +71,18 @@
   transition: all 0.3s ease;
 }
 
-/* ✅ Success */
 .timeline-point.completed {
   background-color: var(--bs-success);
   color: #fff;
   box-shadow: 0 0 5px rgba(25, 135, 84, 0.5);
 }
 
-/* ❌ Failed */
 .timeline-point.failed {
   background-color: var(--bs-danger);
   color: #fff;
   box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
 }
 
-/* ⏳ Pending (Active) */
 .timeline-point.active {
   background-color: var(--bs-info);
   color: #fff;
@@ -93,7 +90,6 @@
   box-shadow: 0 0 6px rgba(13, 202, 240, 0.5);
 }
 
-/* Connecting line */
 .timeline-line-horizontal {
   content: "";
   position: absolute;

src/components/ThemeColorChanger.jsx

@@ -0,0 +1,39 @@
+
+import React from "react";
+
+const ThemeColorChanger = () => {
+  const changePrimaryColor = (color) => {
+    document.documentElement.style.setProperty("--primary-color", color);
+  };
+
+  return (
+    <>
+    <div className="d-flex gap-2 align-items-center">
+      <span>Choose Primary Color:</span>
+      <button
+        className="btn btn-sm"
+        style={{ backgroundColor: "red" }}
+        onClick={() => changePrimaryColor("#ff0000")}
+      ></button>
+      <button
+        className="btn btn-sm"
+        style={{ backgroundColor: "blue" }}
+        onClick={() => changePrimaryColor("#007bff")}
+      ></button>
+      <button
+        className="btn btn-sm"
+        style={{ backgroundColor: "green" }}
+        onClick={() => changePrimaryColor("#28a745")}
+      ></button>
+
+
+    </div>
+     <div className="card mt-4 p-3">
+        <h4 style={{ color: "var(--primary-color)" }}>Primary Color Demo</h4>
+        <button className="btn btn-primary mt-3">Primary Button</button>
+      </div>
+    </>
+  );
+};
+
+export default ThemeColorChanger;

src/components/UserSubscription/ProcessedPayment.jsx

@@ -10,98 +10,90 @@ import {
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { PaymentRepository } from "../../repositories/PaymentRepository";
 import { useMakePayment } from "../../hooks/usePayment";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setSelfTenant } from "../../slices/localVariablesSlice";
 import { unblockUI } from "../../utils/blockUI";
+import showToast from "../../services/toastService";
 
-const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
+const ProcessedPayment = ({
+  onNext,
+  resetPaymentStep,
+  setCurrentStep,
+  setStepStatus,
+  resetFormStep,
+}) => {
   const { frequency, planName } = useParams();
-  const dispatch = useDispatch();
+
-  const [selectedPlan, setSelectedPlan] = useState(planName);
+  const { details: client, planId: selectedPlanId } = useSelector(
+    (store) => store.localVariables.selfTenant
+  );
+  const [selectedPlan, setSelectedPlan] = useState(null);
   const [currentPlan, setCurrentPlan] = useState(null);
   const [failPayment, setFailPayment] = useState(null);
+
   const {
     data: plans,
     isError: isPlanError,
     isLoading,
   } = useSubscription(frequency);
-  const handleChange = (e) => {
-    setSelectedPlan(e.target.value);
-  };
-  const visiblePlans = useMemo(() => {
-    if (!plans) return [];
 
-    const planOrder = ["basic", "pro", "super"];
+  useEffect(() => {
-    const currentIndex = planOrder.indexOf(planName?.toLowerCase());
+    if (!plans || !selectedPlanId) return;
+    const selected = plans.find((p) => p.id === selectedPlanId);
+    setSelectedPlan(selected);
+  }, [plans, selectedPlanId]);
 
-    if (currentIndex === -1) return plans;
+  const loadScript = (src) =>
-    const visibleNames = planOrder.slice(currentIndex);
+    new Promise((resolve) => {
-    const selected = plans?.find((p) => p.planName === selectedPlan);
-    debugger;
-    dispatch(
-      setSelfTenant({
-        planId: selected?.id,
-      })
-    );
-
-    setCurrentPlan(selected);
-
-    return plans.filter((p) =>
-      visibleNames.includes(p.planName?.toLowerCase())
-    );
-  }, [plans, selectedPlan]);
-
-  const loadScript = (src) => {
-    return new Promise((resolve) => {
       const script = document.createElement("script");
       script.src = src;
       script.onload = () => resolve(true);
       script.onerror = () => resolve(false);
       document.body.appendChild(script);
     });
-  };
 
   const { mutate: MakePayment, isPending } = useMakePayment(
     (response) => {
-      unblockUI()
+      debugger
+      unblockUI();
       onNext(response);
     },
     (fail) => {
-       unblockUI()
+      debu
+      unblockUI();
       setFailPayment(fail);
       onNext(fail);
     },
     currentPlan
   );
-  const ProcessToPayment = async (payload) => {
+
+  const ProcessToPayment = async () => {
+    setStepStatus((prev) => ({ ...prev, 3: "success" }));
+    setCurrentStep(4);
     const res = await loadScript(
       "https://checkout.razorpay.com/v1/checkout.js"
     );
-
+    if (!res) {
+      alert("Failed to load Razorpay SDK");
+      return;
+    }
     MakePayment({ amount: 1 });
   };
 
-  const clients = [
-    {
-      firstName: "Alice",
-      lastName: "Smith",
-      email: "alice.smith@example.com",
-      billingAddress:
-        "456 Elm Street, Metropolis, USA 456 Elm Street, Metropolis, USA 456 Elm Street, Metropolis, USA",
-      organizationName: "BetaTech Ltd.",
-      contactNumber: "+44 20 7946 0958",
-      onBoardingDate: "2025-09-15",
-      organizationSize: "10-50",
-      industryId: "c4d5e6f7-8901-2345-6789-abcdef123456",
-      reference: "d2e3f4a5-6789-0123-4567-89abcdef0123",
-    },
-  ];
-
   const handleRetry = () => {
     setFailPayment(null);
-    resetPaymentStep();
+    if (typeof resetPaymentStep === "function") resetPaymentStep();
   };
 
+  // useEffect(() => {
+  //   if (!client || Object.keys(client).length === 0) {
+  //     setFailPayment(null);
+  //     if (typeof resetFormStep === "function") {
+  //       resetFormStep();
+  //     }
+  //   }
+  // }, [client]);
+
   if (failPayment) {
     return (
       <div className="container-md mt-5 text-center">
@@ -146,78 +138,43 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
     );
   }
   return (
-    <div className="container-md text-start">
+    <div className="container-sm  text-start ">
-      <h6 className="fs-4 fw-bold">
-        Make sure your selected details, and process to payment
-      </h6>
       <div className="row gx-1 gy-3 justify-content-between">
         <div className="col-12  col-md-6">
           <div className="row">
             <div className="col-12 mb-3 text-start">
-              <h4 className=" ">
+              <h4>You’ve Selected the Perfect Plan for Your Organization</h4>
-                Choose the Perfect Plan for Your Organization
-              </h4>
               <p className="text-muted small mb-3">
-                Select a plan that fits your team’s needs and unlock the
+                Great choice! This plan is tailored to meet your team’s needs
-                features that drive productivity.
+                and help you maximize productivity.
               </p>
             </div>
-            {visiblePlans?.map((plan) => {
+            {selectedPlan && (
-              let colSize = "8";
+              <div className="col-12 col-md-8 mb-md-3 mb-2">
-
+                <div className="custom-option custom-option-basic text-start w-100 bg-light-primary border border-primary shadow-md p-3 rounded-3">
-              if (visiblePlans.length === 2) colSize = "6";
+                  <div className="custom-option-header d-flex justify-content-between align-items-center">
-              else if (visiblePlans.length === 3) colSize = "4";
+                    <span className="h6 mb-0">{selectedPlan?.planName}</span>
-              else if (visiblePlans.length >= 4) colSize = "3";
+                    <i className="bx bx-check-circle text-primary fs-4"></i>
-
-              return (
-                <div
-                  key={plan?.id}
-                  className={`col-12 col-md-${colSize} mb-md-3 mb-2`}
-                >
-                  <div
-                    className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${
-                      selectedPlan === plan?.planName
-                        ? "border border-primary shadow-md"
-                        : ""
-                    }`}
-                  >
-                    <label
-                      className="form-check-label custom-option-content w-100"
-                      htmlFor={`customRadioTemp${plan?.id}`}
-                    >
-                      <input
-                        name="customRadioTemp"
-                        className="form-check-input"
-                        type="radio"
-                        value={plan?.planName}
-                        id={`customRadioTemp${plan?.id}`}
-                        checked={selectedPlan === plan?.planName}
-                        onChange={handleChange}
-                      />
-                      <span className="custom-option-header d-flex justify-content-between align-items-center">
-                        <span className="h6 mb-0">{plan?.planName}</span>
-                        <span>
-                          {plan.currency?.symbol} {plan.price} /{" "}
-                          {frequencyLabel(frequency)}
-                        </span>
-                      </span>
-                      <span className="custom-option-body d-block mt-1">
-                        <small>{plan?.description}</small>
-                      </span>
-                    </label>
                   </div>
+
+                  <div className="d-flex justify-content-between mt-1">
+                    <small className="text-muted">
+                      {selectedPlan?.currency?.symbol} {selectedPlan?.price} /{" "}
+                      {frequencyLabel(frequency)}
+                    </small>
+                  </div>
+
+                  <span className="custom-option-body d-block mt-1">
+                    <small>{selectedPlan?.description}</small>
+                  </span>
                 </div>
-              );
+              </div>
-            })}
+            )}
+
             {selectedPlan && (
               <div className="col-12 text-start">
                 <div className="border-warning  mt-3">
                   {(() => {
-                    const selected = plans?.find(
-                      (p) => p.planName === selectedPlan
-                    );
-                    if (!selected) return null;
-
                     const {
                       planName,
                       description,
@@ -228,7 +185,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
                       maxStorage,
                       currency,
                       features,
-                    } = selected;
+                    } = selectedPlan;
                     return (
                       <>
                         <div className="row g-2 mb-3">
@@ -262,7 +219,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
                               .map(([key, mod]) => (
                                 <div
                                   key={key}
-                                  className="col-4 mb-2 d-flex align-items-center mb-2"
+                                  className="col-4 mb-2 d-flex align-items-center mb-1"
                                 >
                                   <i
                                     className={`fa-regular ${
@@ -276,7 +233,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
                               ))}
                         </div>
 
-                        <h6 className="fw-bold text-secondary mt-3 mb-2">
+                        <h6 className="fw-bold text-secondary mt-3 mb-1">
                           Support
                         </h6>
                         <ul className="list-unstyled d-flex flex-wrap gap-3 align-items-center mb-0 small">
@@ -299,22 +256,21 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
                             </li>
                           )}
                         </ul>
-
+                        <hr className="divider border-2 " />
-                        <hr className="divider border-2" />
+                        <div className="d-flex flex-column co-12  ">
-                        <div className="d-flex flex-column co-12">
                           <div className="d-flex justify-content-between">
                             <h6 className="fs-6 m-0">Duration</h6>
                             <h5 className="fs-6 m-0">
-                              {frequencyLabel(frequency, true)}
+                              {frequencyLabel(selectedPlan?.frequency, true)}
                             </h5>
                           </div>
 
-                          <div className="d-flex justify-content-between ">
+                          <div className="d-flex justify-content-between">
                             <h6 className="fs-4">Total Price</h6>
                             <h5 className="fs-3">
-                              {formatFigure(price, {
+                              {formatFigure(selectedPlan?.price, {
                                 type: "currency",
-                                currency: currency.currencyCode,
+                                currency: selectedPlan?.currency.currencyCode,
                               })}
                             </h5>
                           </div>
@@ -327,19 +283,17 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
             )}
           </div>
         </div>
-        <div className="col-12   col-md-4 mt-12 ">
+        <div className="col-12   col-md-4  ">
-          {clients.map((client, idx) => (
+
-            <div key={idx} className="text-start">
+          {client && (
+            <div className="text-start">
+              <h6 className="fs-md-4 my-4">Confirm your organization details.</h6>
               <div className="row g-2">
                 <div className="col-sm-6 mb-2">
-                  <strong>First Name:</strong>
+                  <strong>Name:</strong>
                 </div>
-                <div className="col-sm-6 mb-2">{client.firstName}</div>
+                <div className="col-sm-6 mb-2">{client.firstName} {client.lastName}</div>
-
+               
-                <div className="col-sm-6 mb-2">
-                  <strong>Last Name:</strong>
-                </div>
-                <div className="col-sm-6 mb-2">{client.lastName}</div>
 
                 <div className="col-sm-6">
                   <strong>Email:</strong>
@@ -356,10 +310,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
                 </div>
                 <div className="col-sm-6 mb-2">{client.organizationName}</div>
 
-                <div className="col-sm-6 mb-2">
+               
-                  <strong>Organization Size:</strong>
-                </div>
-                <div className="col-sm-6 mb-2">{client.organizationSize}</div>
 
                 <div className="col-sm-6 mb-2">
                   <strong>Onboarding Date:</strong>
@@ -374,17 +325,12 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
                 <div className="col-sm-6 mb-2">{client.billingAddress}</div>
 
                 <div className="col-sm-6 mb-2">
-                  <strong>Industry ID:</strong>
+                  <strong>Industry :</strong>
                 </div>
-                <div className="col-sm-6 mb-2">{client.industryId}</div>
+                <div className="col-sm-6 mb-2">{client?.industry?.name}</div>
-
-                {/* <div className="col-sm-6">
-              <strong>Reference:</strong>
-            </div>
-            <div className="col-sm-6">{client.reference}</div> */}
               </div>
             </div>
-          ))}
+          )}
         </div>
       </div>
       <div className="col-12 d-flex justify-content-end">

src/components/UserSubscription/Review.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Review = () => {
+  return (
+    <div>
+      
+    </div>
+  )
+}
+
+export default Review

src/components/UserSubscription/SelectPlan.jsx

@@ -0,0 +1,238 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+import { useSubscription } from "../../hooks/useAuth";
+import { formatFigure, frequencyLabel } from "../../utils/appUtils";
+import { setSelfTenant } from "../../slices/localVariablesSlice";
+
+const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
+  const { frequency, planName } = useParams();
+  const dispatch = useDispatch();
+
+  const client = useSelector(
+    (store) => store.localVariables.selfTenant.details
+  );
+  const [selectedPlan, setSelectedPlan] = useState(planName);
+  const [currentPlan, setCurrentPlan] = useState(null);
+  const [failPayment, setFailPayment] = useState(null);
+
+  const {
+    data: plans,
+    isError: isPlanError,
+    isLoading,
+  } = useSubscription(frequency);
+
+  const handleChange = (e) => setSelectedPlan(e.target.value);
+
+  useEffect(() => {
+    if (!plans || !selectedPlan) return;
+    const selected = plans.find((p) => p.planName === selectedPlan);
+    if (selected) {
+      setCurrentPlan(selected);
+      dispatch(setSelfTenant({ planId: selected.id }));
+    }
+  }, [plans, selectedPlan, dispatch]);
+
+  const handleNextStep = () => {
+    setStepStatus((prev) => ({ ...prev, 2: "success"}));
+    onNext();
+  };
+
+  return (
+  <div className="container text-start ">
+  <div className="row gx-4 gy-5 align-items-center justify-content-around">
+    <div className="col-sm-12 col-md-6">
+      <div className="row">
+        <div className="col-12 mb-3 text-start">
+          <h4>Choose the Perfect Plan for Your Organization</h4>
+          <p className="text-muted small mb-3">
+            Select a plan that fits your team’s needs and unlock the
+            features that drive productivity.
+          </p>
+        </div>
+
+        {plans?.map((plan) => (
+          <div key={plan?.id} className="col-12 col-md-4 mb-md-3 mb-2">
+            <div
+              className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${
+                selectedPlan === plan?.planName
+                  ? "border border-primary shadow-md"
+                  : ""
+              }`}
+            >
+              <label
+                className="form-check-label custom-option-content w-100"
+                htmlFor={`customRadioTemp${plan?.id}`}
+              >
+                <input
+                  name="customRadioTemp"
+                  className="form-check-input"
+                  type="radio"
+                  value={plan?.planName}
+                  id={`customRadioTemp${plan?.id}`}
+                  checked={selectedPlan === plan?.planName}
+                  onChange={handleChange}
+                />
+                <span className="custom-option-header d-flex justify-content-between align-items-center">
+                  <span className="h6 mb-0">{plan?.planName}</span>
+                  <span>
+                    {plan.currency?.symbol} {plan.price} /{" "}
+                    {frequencyLabel(frequency)}
+                  </span>
+                </span>
+                <span className="custom-option-body d-block mt-1">
+                  <small>{plan?.description}</small>
+                </span>
+              </label>
+            </div>
+          </div>
+        ))}
+
+        {selectedPlan && (
+          <div className="col-12 text-start">
+            <div className="border-warning mt-3">
+              {(() => {
+                const selected = plans?.find(
+                  (p) => p.planName === selectedPlan
+                );
+                if (!selected) return null;
+
+                const {
+                  price,
+                  frequency,
+                  trialDays,
+                  maxUser,
+                  maxStorage,
+                  currency,
+                  features,
+                } = selected;
+
+                return (
+                  <>
+                    <div className="row g-2 mb-3">
+                      <div className="col-sm-6 col-md-4">
+                        <div className="border rounded-3 p-2 bg-light">
+                          <i className="bx bx-user me-1 text-primary"></i>
+                          <strong>Max Users:</strong> {maxUser}
+                        </div>
+                      </div>
+                      <div className="col-sm-6 col-md-4">
+                        <div className="border rounded-3 p-2 bg-light">
+                          <i className="bx bx-hdd me-1 text-primary"></i>
+                          <strong>Max Storage:</strong> {maxStorage} MB
+                        </div>
+                      </div>
+                      <div className="col-sm-6 col-md-4">
+                        <div className="border rounded-3 p-2 bg-light">
+                          <i className="bx bx-time-five me-1 text-primary"></i>
+                          <strong>Trial Days:</strong> {trialDays}
+                        </div>
+                      </div>
+                    </div>
+
+                    <h6 className="fw-bold text-secondary mb-2">
+                      Included Features
+                    </h6>
+                    <div className="row">
+                      {features &&
+                        Object.entries(features?.modules || {})
+                          .filter(([key]) => key !== "id")
+                          .map(([key, mod]) => (
+                            <div
+                              key={key}
+                              className="col-4 mb-2 d-flex align-items-center"
+                            >
+                              <i
+                                className={`fa-regular ${
+                                  mod.enabled
+                                    ? "fa-circle-check text-success"
+                                    : "fa-circle-xmark text-danger"
+                                }`}
+                              ></i>
+                              <small className="ms-1">{mod.name}</small>
+                            </div>
+                          ))}
+                    </div>
+
+                    <h6 className="fw-bold text-secondary mt-3 mb-2">
+                      Support
+                    </h6>
+                    <ul className="list-unstyled d-flex flex-wrap gap-3 align-items-center mb-0 small">
+                      {features?.supports?.emailSupport && (
+                        <li className="d-flex align-items-center">
+                          <i className="bx bx-envelope text-primary me-1 fs-5"></i>
+                          Email Support
+                        </li>
+                      )}
+                      {features?.supports?.phoneSupport && (
+                        <li className="d-flex align-items-center">
+                          <i className="bx bx-phone text-primary me-1 fs-5"></i>
+                          Phone Support
+                        </li>
+                      )}
+                      {features?.supports?.prioritySupport && (
+                        <li className="d-flex align-items-center">
+                          <i className="bx bx-star text-warning me-1 fs-5"></i>
+                          Priority Support
+                        </li>
+                      )}
+                    </ul>
+
+                    <hr className="divider border-2" />
+                    <div className="d-flex flex-column co-12">
+                      <div className="d-flex justify-content-between">
+                        <h6 className="fs-6 m-0">Duration</h6>
+                        <h5 className="fs-6 m-0">
+                          {frequencyLabel(frequency, true)}
+                        </h5>
+                      </div>
+
+                      <div className="d-flex justify-content-between">
+                        <h6 className="fs-4">Total Price</h6>
+                        <h5 className="fs-3">
+                          {formatFigure(price, {
+                            type: "currency",
+                            currency: currency.currencyCode,
+                          })}
+                        </h5>
+                      </div>
+                    </div>
+                  </>
+                );
+              })()}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+
+    {/* Image Section */}
+    <div className="d-none d-md-flex col-md-6 justify-content-center align-items-center">
+      <img
+        src="/public/img/illustrations/undraw_pricing.png"
+        alt="image"
+        className="img-fluid"
+        style={{
+          maxWidth: "70%",
+          height: "auto",
+          objectFit: "contain",
+        }}
+      />
+    </div>
+  </div>
+
+  <div className="col-12 d-flex justify-content-end mt-3">
+    <button
+      type="submit"
+      className="btn btn-label-primary d-flex align-items-center me-2"
+      onClick={handleNextStep}
+    >
+      Next <i className="bx bx-chevron-right"></i>
+    </button>
+  </div>
+</div>
+
+  );
+};
+
+export default SelectPlan;

src/components/UserSubscription/SubscriptionForm.jsx

@@ -12,9 +12,7 @@ import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
 import { useCreateSelfTenant } from "../../hooks/useAuth";
 import { blockUI } from "../../utils/blockUI";
 
-const SubscriptionForm = ({currentStep,
+const SubscriptionForm = ({ currentStep, setCurrentStep, setStepStatus }) => {
-          setCurrentStep,
-          setStepStatus }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
   const {
     register,
@@ -42,9 +40,9 @@ const SubscriptionForm = ({currentStep,
     // reset();
   };
   return (
-    <div className="container-md ">
+    <div className="container-fluid  col-md-6  py-3">
-      <div className="row">
+      <div className="d-flex justify-content-center ">
-        <div className="col-12 col-md-6">
+        <div className="col-12  mt-8">
           <div className="row px-4">
             <div className="text-start">
               <form onSubmit={handleSubmit(onSubmit)}>
@@ -233,13 +231,13 @@ const SubscriptionForm = ({currentStep,
                   </div>
                 </div>
 
-                <div className="d-flex justify-content-end mb-3">
+                <div className="d-flex justify-content-end mt-6">
                   <button
                     type="submit"
                     className="btn btn-label-primary d-flex align-items-center me-2"
                   >
                     {isPending ? (
-                      "Please Wait..."
+                      <span><i class='bx bx-loader-alt bx-md bx-spin me-2'></i>Please Wait...</span>
                     ) : (
                       <>
                         <span className="me-1">Next</span>
@@ -252,103 +250,6 @@ const SubscriptionForm = ({currentStep,
             </div>
           </div>
         </div>
-        <div className="d-none d-md-block col-md-6">
-          {/* <div
-            id="carouselExample "
-            className="carousel slide col-md-8 offset-md-2 modal-min-h"
-            data-bs-ride="carousel"
-          >
-            <div class="carousel-indicators">
-              <button
-                type="button"
-                data-bs-target="#carouselExample"
-                data-bs-slide-to="0"
-                class="active"
-              ></button>
-              <button
-                type="button"
-                data-bs-target="#carouselExample"
-                data-bs-slide-to="1"
-              ></button>
-              <button
-                type="button"
-                data-bs-target="#carouselExample"
-                data-bs-slide-to="2"
-              ></button>
-            </div>
-            <div className="carousel-inner">
-              <div className="carousel-item active">
-                <img
-                  className="d-block w-100"
-                  src="../../assets/img/elements/6.png"
-                  alt="First slide"
-                />
-                <div className="carousel-caption d-none d-md-block">
-                  <h3>First slide</h3>
-                  <p>
-                    Eos mutat malis maluisset et, agam ancillae quo te, in vim
-                    congue pertinacia.
-                  </p>
-                </div>
-              </div>
-              <div className="carousel-item">
-                <img
-                  className="d-block w-100"
-                  src="../../assets/img/elements/7.png"
-                  alt="Second slide"
-                />
-                <div className="carousel-caption d-none d-md-block">
-                  <h3>Second slide</h3>
-                  <p>In numquam omittam sea.</p>
-                </div>
-              </div>
-              <div className="carousel-item">
-                <img
-                  className="d-block w-100"
-                  src="../../assets/img/elements/8.png"
-                  alt="Third slide"
-                />
-                <div className="carousel-caption d-none d-md-block">
-                  <h3>Third slide</h3>
-                  <p>
-                    Lorem ipsum dolor sit amet, virtute consequat ea qui, minim
-                    graeco mel no.
-                  </p>
-                </div>
-              </div>
-            </div>
-            <a
-              className="carousel-control-prev"
-              href="#carouselExample"
-              role="button"
-              data-bs-slide="prev"
-            >
-              <span
-                className="carousel-control-prev-icon"
-                aria-hidden="true"
-              ></span>
-              <span className="visually-hidden">Previous</span>
-            </a>
-            <a
-              className="carousel-control-next"
-              href="#carouselExample"
-              role="button"
-              data-bs-slide="next"
-            >
-              <span
-                className="carousel-control-next-icon"
-                aria-hidden="true"
-              ></span>
-              <span className="visually-hidden">Next</span>
-            </a>
-          </div> */}
-          <div>
-            <p>
-              Provide organization information including name, size, industry,
-              and contact details.
-            </p>
-          </div>
-        </div>
       </div>
     </div>
   );

src/components/UserSubscription/SubscriptionLayout.jsx

@@ -7,7 +7,7 @@ const SubscriptionLayout = ({
   stepStatus = {},
 }) => {
   return (
-    <div className="stepper-container my-4">
+    <div className="container-fluid stepper-container align-items-start my-4">
       <ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-100">
         {configStep.map((step, index) => {
           const stepNumber = index + 1;
@@ -34,8 +34,10 @@ const SubscriptionLayout = ({
                 )}
               </div>
 
-              <h6
+              <small
-                className={`fw-semibold mb-0 ${
+                className={`fw-semibold fs-sm-6 fs-md-6 mb-0 text-muted`}
+              >
+                {/* ${
                   status === "success"
                     ? "text-success"
                     : status === "failed"
@@ -43,10 +45,9 @@ const SubscriptionLayout = ({
                     : stepNumber === currentStep
                     ? "text-primary"
                     : "text-muted"
-                }`}
+                } */}
-              >
                 {step.name}
-              </h6>
+              </small>
 
               {index !== configStep.length - 1 && (
                 <div className={`timeline-line-horizontal`}></div>

src/hooks/useAuth.jsx

@@ -89,10 +89,12 @@ export const useCreateSelfTenant = (onSuccessCallBack, onFailureCallBack) => {
       
       dispatch(
         setSelfTenant({
-          tenantEnquireId: response?.tenantEnquireId,
+          tenantEnquireId: response?.id,
           planId: null,
+          details:response
         })
       );
+      debugger
       if (onSuccessCallBack) onSuccessCallBack(response);
     },
     onError: (error) => {

src/pages/Home/MakeSubscription.jsx

@@ -4,26 +4,37 @@ import SubscriptionLayout from "../../components/UserSubscription/SubscriptionLa
 import SubscriptionForm from "../../components/UserSubscription/SubscriptionForm";
 import ProcessedPayment from "../../components/UserSubscription/ProcessedPayment";
 import VerifiedPayment from "../../components/UserSubscription/VerifiedPayment";
+import SelectPlan from "../../components/UserSubscription/SelectPlan";
+import Review from "../../components/UserSubscription/Review";
 
 const MakeSubscription = () => {
-  const [currentStep, setCurrentStep] = useState(1);
+  const [currentStep, setCurrentStep] = useState(4);
   const [responsePayment, setResponsePayment] = useState(null);
 
   const [stepStatus, setStepStatus] = useState({
     1: "pending",
     2: "pending",
     3: "pending",
+    4: "pending",
+    5: "pending",
   });
 
   const handleVerification = (resp) => {
     setResponsePayment(resp);
     if (resp?.success) {
-      setStepStatus((prev) => ({ ...prev, 2: "success", 3: "success" }));
+      setStepStatus((prev) => ({ ...prev,  4: "success" }));
       setCurrentStep(3);
     } else {
-      setStepStatus((prev) => ({ ...prev, 2: "failed" }));
+      setStepStatus((prev) => ({ ...prev, 4: "failed" }));
     }
   };
+const handleNext = () => {
+  setStepStatus((prev) => ({
+    ...prev,
+    [currentStep + 1]: "pending", 
+  }));
+  setCurrentStep((prev) => prev + 1);
+};
 
   const checkOut_Steps = [
     {
@@ -37,14 +48,48 @@ const MakeSubscription = () => {
       ),
     },
     {
-      name: "Payment",
+      name: "Select Plan",
+      component: () => (
+        <SelectPlan
+          currentStep={currentStep}
+          setStepStatus={setStepStatus}
+         onNext={handleNext}
+        />
+      ),
+    },
+    {
+      name: "Review",
       component: () => (
         <ProcessedPayment
           onNext={(resp) => handleVerification(resp)}
-          onFail={() => setStepStatus((prev) => ({ ...prev, 2: "failed" }))}
+         
           resetPaymentStep={() =>
-            setStepStatus((prev) => ({ ...prev, 2: "pending" }))
+            setStepStatus((prev) => ({ ...prev, 4: "pending" }))
           }
+          setCurrentStep={setCurrentStep}
+          setStepStatus={setStepStatus}
+          resetFormStep={() => {
+            setStepStatus((prev) => ({ ...prev, 1: "pending" }));
+            setCurrentStep(1);
+          }}
+        />
+      ),
+    },
+    {
+      name: "Payment",
+      component: () => (
+          <ProcessedPayment
+          onNext={(resp) => handleVerification(resp)}
+         
+          resetPaymentStep={() =>
+            setStepStatus((prev) => ({ ...prev, 4: "pending" }))
+          }
+          setCurrentStep={setCurrentStep}
+          setStepStatus={setStepStatus}
+          resetFormStep={() => {
+            setStepStatus((prev) => ({ ...prev, 1: "pending" }));
+            setCurrentStep(1);
+          }}
         />
       ),
     },
@@ -60,14 +105,96 @@ const MakeSubscription = () => {
   ];
 
   return (
-    <div className="container-fluid bg-light-secondary min-vh-100 p-2">
+    <>
-      <SubscriptionLayout
+      <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar py-2 mb-md-1 mb-12 ">
-        configStep={checkOut_Steps}
+        <div className="container-fluid px-4">
-        currentStep={currentStep}
+          <a
-        setCurrentStep={setCurrentStep}
+            className="navbar-brand fw-bold text-green d-flex align-items-center"
-        stepStatus={stepStatus}
+            href="#"
-      />
+          >
-    </div>
+            <span className="text-blue">OnField</span>
+            <span>Work</span>
+            <span className="text-dark">.com</span>
+          </a>
+
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarNav"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon"></span>
+          </button>
+
+          <div
+            className="collapse navbar-collapse justify-content-end"
+            id="navbarNav"
+          >
+            <ul className="navbar-nav me-4">
+              <li className="nav-item">
+                <a className="nav-link fw-semibold" href="#">
+                  Home
+                </a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link fw-semibold" href="#features">
+                  Features
+                </a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link fw-semibold" href="#pricing">
+                  Pricing
+                </a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link fw-semibold" href="#about">
+                  About
+                </a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link fw-semibold" href="#faq">
+                  FAQ
+                </a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link fw-semibold" href="#contact">
+                  Contact
+                </a>
+              </li>
+            </ul>
+
+            {/* Auth Buttons */}
+            <ul className="navbar-nav align-items-center">
+              <li className="nav-item">
+                <a
+                  className="btn btn-outline-success btn-sm px-3 fw-semibold"
+                  href="/auth/login"
+                >
+                  Login
+                </a>
+              </li>
+              <li className="nav-item ms-2">
+                <a className="btn btn-success btn-sm px-3 fw-semibold" href="#">
+                  Get Started
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+
+      <div className="pt-5 d-block align-items-start mt-8 mt-2">
+        <SubscriptionLayout
+          configStep={checkOut_Steps}
+          currentStep={currentStep}
+          setCurrentStep={setCurrentStep}
+          stepStatus={stepStatus}
+        />
+      </div>
+    </>
   );
 };
 

src/slices/localVariablesSlice.jsx

@@ -35,6 +35,7 @@ const localVariablesSlice = createSlice({
     selfTenant: {
       tenantEnquireId: null,
       planId: null,
+      details:null,
     },
   },
   reducers: {
@@ -106,6 +107,8 @@ const localVariablesSlice = createSlice({
         action.payload.tenantEnquireId ?? state.selfTenant.tenantEnquireId;
       state.selfTenant.planId =
         action.payload.planId ?? state.selfTenant.planId;
+        state.selfTenant.details =
+        action.payload.details ?? state.selfTenant.details;
     },
   },
 });