added upgraded subscription functionality
This commit is contained in:
parent
6e300389e3
commit
4af5ba8a6d
@ -173,7 +173,7 @@ const EditProfile = ({ TenantId,onClose }) => {
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-center gap-2 mt-3">
|
||||
<button type="submit" disabled={isPending} className="btn btn-sm btn-primary">Submit</button>
|
||||
<button type="submit" disabled={isPending} className="btn btn-sm btn-primary">{isPending ? "Please Wait..." : "Submit"}</button>
|
||||
<button type="button" disabled={isPending} className="btn btn-sm btn-secondary">Camcel</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useAddSubscription, useSubscriptionPlan } from "../../hooks/useTenant";
|
||||
import { useAddSubscription, useSubscriptionPlan, useUpgradeSubscription } from "../../hooks/useTenant";
|
||||
import SegmentedControl from "./SegmentedControl";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { CONSTANT_TEXT } from "../../utils/constants";
|
||||
@ -11,13 +11,14 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
|
||||
const [frequency, setFrequency] = useState(2);
|
||||
const [selectedPlanId, setSelectedPlanId] = useState(null);
|
||||
const selectedTenant = useSelector(
|
||||
(store) => store.globalVariables.currentTenant?.data
|
||||
(store) => store.globalVariables.currentTenant
|
||||
);
|
||||
const naviget = useNavigate();
|
||||
const {
|
||||
data: plans = [],
|
||||
isError,
|
||||
isLoading,
|
||||
error:subscriptionGettingError
|
||||
} = useSubscriptionPlan(frequency);
|
||||
|
||||
const {
|
||||
@ -35,6 +36,11 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
|
||||
} = useAddSubscription(() => {
|
||||
naviget("/tenants")
|
||||
});
|
||||
const {
|
||||
mutate : updgradeSubscription,isPending : upgrading
|
||||
} = useUpgradeSubscription(()=>{
|
||||
naviget("/tenants")
|
||||
})
|
||||
const handleSubscriptionSubmit = async () => {
|
||||
const isValid = await trigger([
|
||||
"planId",
|
||||
@ -48,11 +54,19 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
|
||||
if (isValid) {
|
||||
const payload = getValues();
|
||||
// onSubmitSubScription(payload);
|
||||
const subscriptionPayload = { ...payload, tenantId: selectedTenant.id };
|
||||
AddSubScription(subscriptionPayload);
|
||||
let subscriptionPayload = null;
|
||||
|
||||
if(selectedTenant?.operationMode === 1){
|
||||
subscriptionPayload = { planId : payload.planId,currencyId :payload.currencyId,maxUsers:payload.maxUsers, tenantId: selectedTenant?.data?.id }
|
||||
updgradeSubscription(subscriptionPayload)
|
||||
}else{
|
||||
subscriptionPayload = {...payload,tenantId: selectedTenant?.data?.id}
|
||||
AddSubScription(subscriptionPayload);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handlePlanSelection = (plan) => {
|
||||
setSelectedPlanId(plan.id);
|
||||
setValue("planId", plan.id);
|
||||
@ -61,7 +75,8 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
|
||||
};
|
||||
|
||||
const selectedPlan = plans.find((p) => p.id === selectedPlanId);
|
||||
|
||||
if(isLoading) return <div className="text-center">Loading....</div>
|
||||
if(isError) return <div className="text-center">{subscriptionGettingError?.message}</div>
|
||||
return (
|
||||
<div className="text-start">
|
||||
<SegmentedControl setFrequency={setFrequency} />
|
||||
@ -208,9 +223,9 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
|
||||
onClick={handleSubscriptionSubmit}
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
disabled={isPending || upgrading}
|
||||
>
|
||||
{isPending ? "Please Wait..." : "Submit"}
|
||||
{isPending || upgrading ? "Please Wait..." : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -64,83 +64,85 @@ const SubScriptionHistory = ({ tenantId }) => {
|
||||
if (percentage < 80) return "warning";
|
||||
return "danger";
|
||||
};
|
||||
const SubscriptionColumns = [
|
||||
{
|
||||
key: "createdAt",
|
||||
label: "Date",
|
||||
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "frequency",
|
||||
label: "Type",
|
||||
getValue: (e) => {
|
||||
switch (e.frequency) {
|
||||
case 1:
|
||||
return "Monthly";
|
||||
case 3:
|
||||
return "Quarterly";
|
||||
case 12:
|
||||
return "Yearly";
|
||||
default:
|
||||
return "N/A";
|
||||
}
|
||||
},
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "price",
|
||||
label: "Amount",
|
||||
getValue: (e) => (
|
||||
<>
|
||||
{e.currency?.symbol || "₹"} {e.price}
|
||||
</>
|
||||
),
|
||||
align: "text-end",
|
||||
},
|
||||
{
|
||||
key: "submittedBy",
|
||||
label: "Submitted By",
|
||||
getValue: (e) =>
|
||||
`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A",
|
||||
customRender: (e) => (
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-2"
|
||||
firstName={e.createdBy?.firstName}
|
||||
lastName={e.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-truncate">
|
||||
{`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "action",
|
||||
label: "Action",
|
||||
customRender: (e) => (
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary"
|
||||
onClick={() => console.log("Action clicked for", e.id)}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
),
|
||||
align: "text-center",
|
||||
},
|
||||
];
|
||||
// const SubscriptionColumns = [
|
||||
// {
|
||||
// key: "createdAt",
|
||||
// label: "Date",
|
||||
// getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
// align: "text-start",
|
||||
// },
|
||||
// {
|
||||
// key: "frequency",
|
||||
// label: "Type",
|
||||
// getValue: (e) => {
|
||||
// switch (e.frequency) {
|
||||
// case 1:
|
||||
// return "Monthly";
|
||||
// case 3:
|
||||
// return "Quarterly";
|
||||
// case 12:
|
||||
// return "Yearly";
|
||||
// default:
|
||||
// return "N/A";
|
||||
// }
|
||||
// },
|
||||
// align: "text-start",
|
||||
// },
|
||||
// {
|
||||
// key: "price",
|
||||
// label: "Amount",
|
||||
// getValue: (e) => (
|
||||
// <>
|
||||
// {e.currency?.symbol || "₹"} {e.price}
|
||||
// </>
|
||||
// ),
|
||||
// align: "text-end",
|
||||
// },
|
||||
// {
|
||||
// key: "submittedBy",
|
||||
// label: "Submitted By",
|
||||
// getValue: (e) =>
|
||||
// `${e.createdBy?.firstName ?? ""} ${
|
||||
// e.createdBy?.lastName ?? ""
|
||||
// }`.trim() || "N/A",
|
||||
// customRender: (e) => (
|
||||
// <div className="d-flex align-items-center">
|
||||
// <Avatar
|
||||
// size="xs"
|
||||
// classAvatar="m-0 me-2"
|
||||
// firstName={e.createdBy?.firstName}
|
||||
// lastName={e.createdBy?.lastName}
|
||||
// />
|
||||
// <span className="text-truncate">
|
||||
// {`${e.createdBy?.firstName ?? ""} ${
|
||||
// e.createdBy?.lastName ?? ""
|
||||
// }`.trim() || "N/A"}
|
||||
// </span>
|
||||
// </div>
|
||||
// ),
|
||||
// align: "text-start",
|
||||
// },
|
||||
// {
|
||||
// key: "action",
|
||||
// label: "Action",
|
||||
// customRender: (e) => (
|
||||
// <button
|
||||
// className="btn btn-sm btn-outline-primary"
|
||||
// onClick={() => console.log("Action clicked for", e.id)}
|
||||
// >
|
||||
// View
|
||||
// </button>
|
||||
// ),
|
||||
// align: "text-center",
|
||||
// },
|
||||
// ];
|
||||
|
||||
return (
|
||||
<div className="container-fluid p-2">
|
||||
<div className=" p-2">
|
||||
<div className="text-start mb-3">
|
||||
<p className="fw-bold">Active Subscription</p>
|
||||
<div className="divider text-start my-1">
|
||||
<div className="divider-text">Active Subscription</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-sm-8 border rounded p-3 shadow-sm">
|
||||
@ -176,37 +178,45 @@ const SubScriptionHistory = ({ tenantId }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-start">
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead className="align-middle">
|
||||
<tr>
|
||||
<th className="text-start">Date</th>
|
||||
<th className="text-start">Type</th>
|
||||
<th className="text-center">Amount</th>
|
||||
<th className="text-start">Plan Name</th>
|
||||
<th className="text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="align-middle">
|
||||
{data?.subscriptionHistery?.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>{formatUTCToLocalTime(item.createdAt)}</td>
|
||||
<td>{SUBSCRIPTION_PLAN_FREQUENCIES[item.frequency] || "N/A"}</td>
|
||||
<td className="text-end pe-4 me-3">
|
||||
<span className="px-3"> {item.currency?.symbol}
|
||||
{item.price}</span>
|
||||
</td>
|
||||
<td className="ps-4">{item.planName}</td>
|
||||
<td className="text-center">
|
||||
<i className="bx bx-cloud-download"></i>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div className="text-start my-2">
|
||||
|
||||
</div>
|
||||
<div className="divider text-start my-1">
|
||||
<div className="divider-text"> <i className="bx bx-history"></i> <small>History</small></div>
|
||||
</div>
|
||||
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead className="align-middle">
|
||||
<tr>
|
||||
<th className="text-start">Date</th>
|
||||
<th className="text-start">Type</th>
|
||||
<th className="text-center">Amount</th>
|
||||
<th className="text-start">Plan Name</th>
|
||||
<th className="text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="align-middle">
|
||||
{data?.subscriptionHistery?.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>{formatUTCToLocalTime(item.createdAt)}</td>
|
||||
<td>
|
||||
{SUBSCRIPTION_PLAN_FREQUENCIES[item.frequency] || "N/A"}
|
||||
</td>
|
||||
<td className="text-end pe-4 me-3">
|
||||
<span className="px-3">
|
||||
{" "}
|
||||
{item.currency?.symbol}
|
||||
{item.price}
|
||||
</span>
|
||||
</td>
|
||||
<td className="ps-4">{item.planName}</td>
|
||||
<td className="text-center">
|
||||
<i className="bx bx-cloud-download"></i>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -36,7 +36,7 @@ useEffect(() => {
|
||||
}
|
||||
} else {
|
||||
// Default: no tenant selected
|
||||
setActiveTab(0);
|
||||
return ;
|
||||
}
|
||||
}, [HasSelectedCurrentTenant,activeTab]);
|
||||
|
||||
|
||||
@ -72,7 +72,6 @@ export const useSubscriptionPlan=(freq)=>{
|
||||
return useQuery({
|
||||
queryKey:['SubscriptionPlan',freq],
|
||||
queryFn:async()=>{
|
||||
console.log("call")
|
||||
const res = await TenantRepository.getSubscriptionPlan(freq);
|
||||
return res.data;
|
||||
}
|
||||
@ -124,12 +123,43 @@ export const useAddSubscription =(onSuccessCallback)=>{
|
||||
return res.data;
|
||||
},
|
||||
onSuccess:(data,variables)=>{
|
||||
const {tenantId} = variables;
|
||||
showToast("Tenant Plan Added SuccessFully","success")
|
||||
queryClient.invalidateQueries({queryKey:["Tenants"]});
|
||||
queryClient.invalidateQueries({queryKey:["Tenant",tenantId]})
|
||||
if(onSuccessCallback) onSuccessCallback()
|
||||
},
|
||||
onError:(error)=>{
|
||||
showToast(error.response.message || error.message || `Something went wrong`,"error")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const useUpgradeSubscription = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (subscriptionPayload) => {
|
||||
const res = await TenantRepository.upgradeSubscription(subscriptionPayload);
|
||||
return res.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
const { tenantId } = variables;
|
||||
showToast("Tenant Plan Upgraded Successfully", "success");
|
||||
|
||||
// Refetch tenant details
|
||||
queryClient.invalidateQueries({ queryKey: ["Tenant", tenantId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["Tenants"] });
|
||||
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error?.response?.message ||
|
||||
error?.response?.data?.errors ||
|
||||
error.message ||
|
||||
"Something went wrong",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -16,4 +16,5 @@ export const TenantRepository = {
|
||||
updateTenantDetails :(id,data)=> api.put(`/api/Tenant/edit/${id}`,data),
|
||||
|
||||
addSubscription: (data) => api.post("/api/Tenant/add-subscription", data),
|
||||
upgradeSubscription :(data)=> api.put("/api/Tenant/update-subscription",data)
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user