admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fixed frquency invalid display

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-29 15:42:36 +05:30
parent 4bbe289c95
commit c00ab582cc
7 changed files with 403 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/UserSubscription/ProcessedPayment.jsx
View File

@ -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} /{" "}
{frequencyLabel(frequency)}
{selectedPlan?.currency?.symbol} {selectedPlan?.price} /
{frequencyLabel(frequency,false)}
</small>
</div>
@ -286,6 +290,8 @@ const ProcessedPayment = ({
</div>
</div>
)}
</>)}
</div>
</div>
<div className="col-12 col-md-4 ">

105
src/components/UserSubscription/SelectPlan.jsx
View File

@ -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,12 +33,15 @@ 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();
};
@ -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>
@ -230,8 +322,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
Next <i className="bx bx-chevron-right"></i>
</button>
</div>
</div>
</div>
);
};

88
src/components/UserSubscription/SelectedPlanSkeleton.jsx Normal file
View File

@ -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;

3
src/hooks/useAuth.jsx
View File

@ -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) => {

2
src/pages/Home/MakeSubscription.jsx
View File

@ -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({

2
src/slices/localVariablesSlice.jsx
View File

@ -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;
},
},
});

11
src/utils/appUtils.js
View File

@ -136,17 +136,18 @@ export const formatFigure = (
return new Intl.NumberFormat(locale, formatterOptions).format(amount);
};
export const frequencyLabel = (freq,isLong=false) => {
switch (freq) {
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 ? "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";
}
};
};