From c00ab582ccfe41388b149c17de641946524c9c69 Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Wed, 29 Oct 2025 15:42:36 +0530 Subject: [PATCH] fixed frquency invalid display --- .../UserSubscription/ProcessedPayment.jsx | 18 +- .../UserSubscription/SelectPlan.jsx | 475 +++++++++++------- .../UserSubscription/SelectedPlanSkeleton.jsx | 88 ++++ src/hooks/useAuth.jsx | 3 +- src/pages/Home/MakeSubscription.jsx | 2 +- src/slices/localVariablesSlice.jsx | 2 + src/utils/appUtils.js | 29 +- 7 files changed, 403 insertions(+), 214 deletions(-) create mode 100644 src/components/UserSubscription/SelectedPlanSkeleton.jsx diff --git a/src/components/UserSubscription/ProcessedPayment.jsx b/src/components/UserSubscription/ProcessedPayment.jsx index 7db96edc..06d2b0ce 100644 --- a/src/components/UserSubscription/ProcessedPayment.jsx +++ b/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.

+ + {isLoading ? : (<> + {selectedPlan && (
@@ -164,8 +168,8 @@ const ProcessedPayment = ({
- {selectedPlan?.currency?.symbol} {selectedPlan?.price} /{" "} - {frequencyLabel(frequency)} + {selectedPlan?.currency?.symbol} {selectedPlan?.price} / + {frequencyLabel(frequency,false)}
@@ -286,6 +290,8 @@ const ProcessedPayment = ({
)} + )} +
diff --git a/src/components/UserSubscription/SelectPlan.jsx b/src/components/UserSubscription/SelectPlan.jsx index ace3d2cf..68d64fd2 100644 --- a/src/components/UserSubscription/SelectPlan.jsx +++ b/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,209 +33,296 @@ 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 = () => { - setStepStatus((prev) => ({ ...prev, 2: "success"})); + dispatch(setSelfTenant({ frequency: selectedFrequency })); + setStepStatus((prev) => ({ ...prev, 2: "success" })); onNext(); }; return ( -
-
-
-
-
-

Choose the Perfect Plan for Your Organization

-

- Select a plan that fits your team’s needs and unlock the - features that drive productivity. -

+
+
+
+
+
+

Choose the Perfect Plan for Your Organization

+

+ Select a plan that fits your team’s needs and unlock the + features that drive productivity. +

+ +
+
+ + setSelectedFrequency(Number(e.target.value)) + } + /> + +
+ +
+ + setSelectedFrequency(Number(e.target.value)) + } + /> + +
+ +
+ + setSelectedFrequency(Number(e.target.value)) + } + /> + +
+ +
+ + setSelectedFrequency(Number(e.target.value)) + } + /> + +
+
+
+ + {isLoading ? ( + + ) : ( + <> + {plans?.map((plan) => ( +
+
+ +
+
+ ))} + + {selectedPlan && ( +
+
+ {(() => { + const selected = plans?.find( + (p) => p.planName === selectedPlan + ); + if (!selected) return null; + + const { + price, + frequency, + trialDays, + maxUser, + maxStorage, + currency, + features, + } = selected; + + return ( + <> +
+
+
+ + Max Users: {maxUser} +
+
+
+
+ + Max Storage: {maxStorage} MB +
+
+
+
+ + Trial Days: {trialDays} +
+
+
+ +
+ Included Features +
+
+ {features && + Object.entries(features?.modules || {}) + .filter(([key]) => key !== "id") + .map(([key, mod]) => ( +
+ + {mod.name} +
+ ))} +
+ +
+ Support +
+
    + {features?.supports?.emailSupport && ( +
  • + + Email Support +
    • + )} + {features?.supports?.phoneSupport && ( +
  • + + Phone Support +
    • + )} + {features?.supports?.prioritySupport && ( +
  • + + Priority Support +
    • + )} +
+ +
+
+
+
Duration
+
+ {frequencyLabel(frequency, true)} +
+
+ +
+
Total Price
+
+ {formatFigure(price, { + type: "currency", + currency: currency.currencyCode, + })} +
+
+
+ + ); + })()} +
+
+ )} + + )} +
- {plans?.map((plan) => ( -
-
- -
-
- ))} + {/* Image Section */} +
+ image +
+
- {selectedPlan && ( -
-
- {(() => { - const selected = plans?.find( - (p) => p.planName === selectedPlan - ); - if (!selected) return null; - - const { - price, - frequency, - trialDays, - maxUser, - maxStorage, - currency, - features, - } = selected; - - return ( - <> -
-
-
- - Max Users: {maxUser} -
-
-
-
- - Max Storage: {maxStorage} MB -
-
-
-
- - Trial Days: {trialDays} -
-
-
- -
- Included Features -
-
- {features && - Object.entries(features?.modules || {}) - .filter(([key]) => key !== "id") - .map(([key, mod]) => ( -
- - {mod.name} -
- ))} -
- -
- Support -
-
    - {features?.supports?.emailSupport && ( -
  • - - Email Support -
    • - )} - {features?.supports?.phoneSupport && ( -
  • - - Phone Support -
    • - )} - {features?.supports?.prioritySupport && ( -
  • - - Priority Support -
    • - )} -
- -
-
-
-
Duration
-
- {frequencyLabel(frequency, true)} -
-
- -
-
Total Price
-
- {formatFigure(price, { - type: "currency", - currency: currency.currencyCode, - })} -
-
-
- - ); - })()} -
-
- )} +
+
- - {/* Image Section */} -
- image -
-
- -
- -
-
- ); }; diff --git a/src/components/UserSubscription/SelectedPlanSkeleton.jsx b/src/components/UserSubscription/SelectedPlanSkeleton.jsx new file mode 100644 index 00000000..b453a505 --- /dev/null +++ b/src/components/UserSubscription/SelectedPlanSkeleton.jsx @@ -0,0 +1,88 @@ +import React from "react"; + + +const SkeletonLine = ({ height = 16, width = "100%", className = "" }) => ( +
+); + +const SelectedPlanSkeleton = () => { + return ( +
+ {/* Plan Summary Card */} +
+
+
+ + +
+ + + +
+
+ + {/* Plan Details */} +
+
+ {/* Stats (Max Users, Storage, Trial Days) */} +
+ {[...Array(3)].map((_, i) => ( +
+
+ +
+
+ ))} +
+ + {/* Included Features */} +
+ +
+
+ {[...Array(6)].map((_, i) => ( +
+ +
+ ))} +
+ + {/* Support */} +
+ +
+
+ {[...Array(3)].map((_, i) => ( + + ))} +
+ +
+ + {/* Duration and Total */} +
+
+ + +
+
+ + +
+
+
+
+
+ ); +}; + +export default SelectedPlanSkeleton; diff --git a/src/hooks/useAuth.jsx b/src/hooks/useAuth.jsx index e0bf44a3..ed45725e 100644 --- a/src/hooks/useAuth.jsx +++ b/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) => { diff --git a/src/pages/Home/MakeSubscription.jsx b/src/pages/Home/MakeSubscription.jsx index 7c4194cd..1995fe03 100644 --- a/src/pages/Home/MakeSubscription.jsx +++ b/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({ diff --git a/src/slices/localVariablesSlice.jsx b/src/slices/localVariablesSlice.jsx index af70d936..f80780bd 100644 --- a/src/slices/localVariablesSlice.jsx +++ b/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; }, }, }); diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js index 0cd7382e..6f2291fb 100644 --- a/src/utils/appUtils.js +++ b/src/utils/appUtils.js @@ -136,17 +136,18 @@ export const formatFigure = ( return new Intl.NumberFormat(locale, formatterOptions).format(amount); }; -export const frequencyLabel = (freq,isLong=false) => { - switch (freq) { - case 0: - return isLong ? "1 Month" : "1 mo"; - case 1: - return isLong ? "3 Months" : "3 mo"; - case 2: - return isLong ? "6 Months" : "6 mo"; - case 3: - return isLong ? "1 Year" : "1 yr"; - default: - return "mo"; - } - }; \ No newline at end of file +export const frequencyLabel = (freq, isLong = false) => { + const frequency = parseInt(freq, 10); + switch (frequency) { + case 0: + return isLong ? "1 Month" : "1 mo"; + case 1: + 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 isLong ? "Unknown" : "N/A"; + } +};