fixed frquency invalid display

src/components/UserSubscription/ProcessedPayment.jsx

@@ -14,6 +14,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { setSelfTenant } from "../../slices/localVariablesSlice";
 import { unblockUI } from "../../utils/blockUI";
 import showToast from "../../services/toastService";
+import SelectedPlanSkeleton from "./SelectedPlanSkeleton";
 
 const ProcessedPayment = ({
   onNext,
@@ -22,11 +23,12 @@ const ProcessedPayment = ({
   setStepStatus,
   resetFormStep,
 }) => {
-  const { frequency, planName } = useParams();
+  const {  planName } = useParams();
 
-  const { details: client, planId: selectedPlanId } = useSelector(
+  const { details: client, planId: selectedPlanId,frequency } = useSelector(
     (store) => store.localVariables.selfTenant
   );
+  console.log(frequency)
   const [selectedPlan, setSelectedPlan] = useState(null);
   const [currentPlan, setCurrentPlan] = useState(null);
   const [failPayment, setFailPayment] = useState(null);
@@ -36,7 +38,6 @@ const ProcessedPayment = ({
     isError: isPlanError,
     isLoading,
   } = useSubscription(frequency);
-
   useEffect(() => {
     if (!plans || !selectedPlanId) return;
     const selected = plans.find((p) => p.id === selectedPlanId);
@@ -77,7 +78,7 @@ const ProcessedPayment = ({
       alert("Failed to load Razorpay SDK");
       return;
     }
-    MakePayment({ amount: 1 });
+    MakePayment({ amount:selectedPlan?.price  });
   };
 
   const handleRetry = () => {
@@ -154,6 +155,9 @@ const ProcessedPayment = ({
                 and help you maximize productivity.
               </p>
             </div>
+
+            {isLoading ?  <SelectedPlanSkeleton/> : (<>
+            
             {selectedPlan && (
               <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">
@@ -164,8 +168,8 @@ const ProcessedPayment = ({
 
                   <div className="d-flex justify-content-between mt-1">
                     <small className="text-muted">
-                      {selectedPlan?.currency?.symbol} {selectedPlan?.price} /{" "}
+                      {selectedPlan?.currency?.symbol} {selectedPlan?.price} /
-                      {frequencyLabel(frequency)}
+                      {frequencyLabel(frequency,false)}
                     </small>
                   </div>
 
@@ -286,6 +290,8 @@ const ProcessedPayment = ({
                 </div>
               </div>
             )}
+            </>)}
+            
           </div>
         </div>
         <div className="col-12   col-md-4  ">

src/components/UserSubscription/SelectPlan.jsx

@@ -4,9 +4,13 @@ import { useParams } from "react-router-dom";
 import { useSubscription } from "../../hooks/useAuth";
 import { formatFigure, frequencyLabel } from "../../utils/appUtils";
 import { setSelfTenant } from "../../slices/localVariablesSlice";
+import SelectedPlanSkeleton from "./SelectedPlanSkeleton";
 
 const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
   const { frequency, planName } = useParams();
+  const [selectedFrequency, setSelectedFrequency] = useState(
+    parseInt(frequency)
+  );
   const dispatch = useDispatch();
 
   const client = useSelector(
@@ -20,7 +24,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
     data: plans,
     isError: isPlanError,
     isLoading,
-  } = useSubscription(frequency);
+  } = useSubscription(selectedFrequency);
 
   const handleChange = (e) => setSelectedPlan(e.target.value);
 
@@ -29,11 +33,14 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
     const selected = plans.find((p) => p.planName === selectedPlan);
     if (selected) {
       setCurrentPlan(selected);
-      dispatch(setSelfTenant({ planId: selected.id }));
+      dispatch(
+        setSelfTenant({ planId: selected.id, frequency: selectedFrequency })
+      );
     }
-  }, [plans, selectedPlan, dispatch]);
+  }, [plans, selectedPlan, dispatch, selectedFrequency]);
 
   const handleNextStep = () => {
+    dispatch(setSelfTenant({ frequency: selectedFrequency }));
     setStepStatus((prev) => ({ ...prev, 2: "success" }));
     onNext();
   };
@@ -49,8 +56,91 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                 Select a plan that fits your team’s needs and unlock the
                 features that drive productivity.
               </p>
+
+              <div>
+                <div className="form-check form-check-inline mt-4">
+                  <input
+                    className="form-check-input"
+                    type="radio"
+                    name="frequencyOptions"
+                    id="frequencyMonthly"
+                    value={0}
+                    checked={selectedFrequency === 0}
+                    onChange={(e) =>
+                      setSelectedFrequency(Number(e.target.value))
+                    }
+                  />
+                  <label
+                    className="form-check-label"
+                    htmlFor="frequencyMonthly"
+                  >
+                    Monthly
+                  </label>
                 </div>
 
+                <div className="form-check form-check-inline">
+                  <input
+                    className="form-check-input"
+                    type="radio"
+                    name="frequencyOptions"
+                    id="frequencyQuarterly"
+                    value={1}
+                    checked={selectedFrequency === 1}
+                    onChange={(e) =>
+                      setSelectedFrequency(Number(e.target.value))
+                    }
+                  />
+                  <label
+                    className="form-check-label"
+                    htmlFor="frequencyQuarterly"
+                  >
+                    Quarterly
+                  </label>
+                </div>
+
+                <div className="form-check form-check-inline">
+                  <input
+                    className="form-check-input"
+                    type="radio"
+                    name="frequencyOptions"
+                    id="frequencyHalfYear"
+                    value={2}
+                    checked={selectedFrequency === 2}
+                    onChange={(e) =>
+                      setSelectedFrequency(Number(e.target.value))
+                    }
+                  />
+                  <label
+                    className="form-check-label"
+                    htmlFor="frequencyHalfYear"
+                  >
+                    Half-Yearly
+                  </label>
+                </div>
+
+                <div className="form-check form-check-inline">
+                  <input
+                    className="form-check-input"
+                    type="radio"
+                    name="frequencyOptions"
+                    id="frequencyYearly"
+                    value={3}
+                    checked={selectedFrequency === 3}
+                    onChange={(e) =>
+                      setSelectedFrequency(Number(e.target.value))
+                    }
+                  />
+                  <label className="form-check-label" htmlFor="frequencyYearly">
+                    Yearly
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            {isLoading ? (
+              <SelectedPlanSkeleton />
+            ) : (
+              <>
                 {plans?.map((plan) => (
                   <div key={plan?.id} className="col-12 col-md-4 mb-md-3 mb-2">
                     <div
@@ -77,7 +167,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                           <span className="h6 mb-0">{plan?.planName}</span>
                           <span>
                             {plan.currency?.symbol} {plan.price} /{" "}
-                    {frequencyLabel(frequency)}
+                            {frequencyLabel(selectedFrequency)}
                           </span>
                         </span>
                         <span className="custom-option-body d-block mt-1">
@@ -203,6 +293,8 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                     </div>
                   </div>
                 )}
+              </>
+            )}
           </div>
         </div>
 
@@ -231,7 +323,6 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
         </button>
       </div>
     </div>
-
   );
 };
 

src/components/UserSubscription/SelectedPlanSkeleton.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+
+const SkeletonLine = ({ height = 16, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+
+const SelectedPlanSkeleton = () => {
+  return (
+    <div className="row">
+      {/* Plan Summary Card */}
+      <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 border shadow-md p-3 rounded-3">
+          <div className="d-flex justify-content-between align-items-center mb-2">
+            <SkeletonLine height={20} width="40%" />
+            <SkeletonLine height={20} width="25px" />
+          </div>
+
+          <SkeletonLine height={16} width="60%" />
+          <SkeletonLine height={14} width="80%" />
+        </div>
+      </div>
+
+      {/* Plan Details */}
+      <div className="col-12 text-start mt-2">
+        <div className="border rounded-3 p-3 bg-light">
+          {/* Stats (Max Users, Storage, Trial Days) */}
+          <div className="row g-2 mb-3">
+            {[...Array(3)].map((_, i) => (
+              <div className="col-sm-6 col-md-4" key={i}>
+                <div className="border rounded-3 p-2 bg-white d-flex align-items-center">
+                  <SkeletonLine height={18} width="80%" />
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Included Features */}
+          <h6 className="fw-bold text-secondary mb-2">
+            <SkeletonLine height={18} width="40%" />
+          </h6>
+          <div className="row">
+            {[...Array(6)].map((_, i) => (
+              <div
+                className="col-4 mb-2 d-flex align-items-center"
+                key={i}
+              >
+                <SkeletonLine height={14} width="70%" />
+              </div>
+            ))}
+          </div>
+
+          {/* Support */}
+          <h6 className="fw-bold text-secondary mt-3 mb-2">
+            <SkeletonLine height={18} width="30%" />
+          </h6>
+          <div className="d-flex flex-wrap gap-3 mb-2">
+            {[...Array(3)].map((_, i) => (
+              <SkeletonLine key={i} height={14} width="100px" />
+            ))}
+          </div>
+
+          <hr className="divider border-2" />
+
+          {/* Duration and Total */}
+          <div className="d-flex flex-column">
+            <div className="d-flex justify-content-between mb-1">
+              <SkeletonLine height={16} width="40%" />
+              <SkeletonLine height={16} width="30%" />
+            </div>
+            <div className="d-flex justify-content-between">
+              <SkeletonLine height={20} width="50%" />
+              <SkeletonLine height={22} width="40%" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SelectedPlanSkeleton;

src/hooks/useAuth.jsx

@@ -15,6 +15,7 @@ import {
 } from "../slices/localVariablesSlice.jsx";
 import { removeSession } from "../utils/authUtils.js";
 import showToast from "../services/toastService.tsx";
+import eventBus from "../services/eventBus.js";
 
 // ----------------------------Modal--------------------------
 
@@ -38,6 +39,7 @@ export const useSubscription = (frequency) => {
       const resp = await AuthRepository.getSubscription(frequency);
       return resp.data;
     },
+    enabled: frequency !== null && frequency !== undefined
   });
 };
 
@@ -94,7 +96,6 @@ export const useCreateSelfTenant = (onSuccessCallBack, onFailureCallBack) => {
           details:response
         })
       );
-      debugger
       if (onSuccessCallBack) onSuccessCallBack(response);
     },
     onError: (error) => {

src/pages/Home/MakeSubscription.jsx

@@ -8,7 +8,7 @@ import SelectPlan from "../../components/UserSubscription/SelectPlan";
 import Review from "../../components/UserSubscription/Review";
 
 const MakeSubscription = () => {
-  const [currentStep, setCurrentStep] = useState(1);
+  const [currentStep, setCurrentStep] = useState(2);
   const [responsePayment, setResponsePayment] = useState(null);
 
   const [stepStatus, setStepStatus] = useState({

src/slices/localVariablesSlice.jsx

@@ -36,6 +36,7 @@ const localVariablesSlice = createSlice({
       tenantEnquireId: null,
       planId: null,
       details:null,
+      frequency:null,
     },
   },
   reducers: {
@@ -109,6 +110,7 @@ const localVariablesSlice = createSlice({
         action.payload.planId ?? state.selfTenant.planId;
         state.selfTenant.details =
         action.payload.details ?? state.selfTenant.details;
+       state.selfTenant.frequency =  action.payload.frequency ?? state.selfTenant.frequency;
     },
   },
 });

src/utils/appUtils.js

@@ -137,16 +137,17 @@ export const formatFigure = (
 };
 
 export const frequencyLabel = (freq, isLong = false) => {
-    switch (freq) {
+    const frequency = parseInt(freq, 10);
+  switch (frequency) {
     case 0:
       return isLong ? "1 Month" : "1 mo";
     case 1:
-        return isLong ? "3 Months" : "3 mo";
+      return isLong ? "Quarterly (3 Months)" : "3 mo";
     case 2:
       return isLong ? "6 Months" : "6 mo";
     case 3:
       return isLong ? "1 Year" : "1 yr";
     default:
-        return "mo";
+      return isLong ? "Unknown" : "N/A";
   }
 };