Changes in UI of Dashboard getplans.
This commit is contained in:
parent
7b15309dbf
commit
eea7252b96
@ -1,113 +1,3 @@
|
||||
// // src/components/SubscriptionPlans.jsx
|
||||
// import React, { useState, useEffect } from "react";
|
||||
// import axios from "axios";
|
||||
|
||||
// const SubscriptionPlans = () => {
|
||||
// const [plans, setPlans] = useState([]);
|
||||
// const [frequency, setFrequency] = useState(1); // 1=Monthly, 2=Quarterly, 3=Half-Yearly, 4=Yearly
|
||||
// const [loading, setLoading] = useState(false);
|
||||
|
||||
// useEffect(() => {
|
||||
// const fetchPlans = async () => {
|
||||
// try {
|
||||
// setLoading(true);
|
||||
// const res = await axios.get(
|
||||
// `/api/market/list/subscription-plan?frequency=${frequency}`
|
||||
// );
|
||||
// setPlans(res.data?.data || []);
|
||||
// } catch (err) {
|
||||
// console.error("Error fetching plans:", err);
|
||||
// } finally {
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// fetchPlans();
|
||||
// }, [frequency]);
|
||||
|
||||
// return (
|
||||
// <div className="container py-5">
|
||||
// {/* Frequency Switcher */}
|
||||
// <div className="text-center mb-4">
|
||||
// <div className="btn-group" role="group" aria-label="Plan frequency">
|
||||
// {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map((label, idx) => (
|
||||
// <button
|
||||
// key={idx}
|
||||
// type="button"
|
||||
// className={`btn btn-${frequency === idx + 1 ? "primary" : "outline-secondary"}`}
|
||||
// onClick={() => setFrequency(idx + 1)}
|
||||
// >
|
||||
// {label}
|
||||
// </button>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* Cards */}
|
||||
// <div className="row g-4">
|
||||
// {loading ? (
|
||||
// <div className="text-center">Loading...</div>
|
||||
// ) : plans.length === 0 ? (
|
||||
// <div className="text-center">No plans found</div>
|
||||
// ) : (
|
||||
// plans.map((plan) => (
|
||||
// <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
|
||||
// <div className="card h-100 shadow-sm">
|
||||
// <div className="card-header text-center">
|
||||
// <h4 className="mb-1">{plan.planName}</h4>
|
||||
// <p className="text-muted small">{plan.description}</p>
|
||||
// <div className="d-flex align-items-center justify-content-center">
|
||||
// <span className="h2 text-primary fw-bold mb-0">
|
||||
// {plan.currency?.symbol}
|
||||
// {plan.price}
|
||||
// </span>
|
||||
// <sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
|
||||
// </div>
|
||||
// <div className="text-muted">
|
||||
// Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div className="card-body">
|
||||
// <ul className="list-unstyled">
|
||||
// {plan.features?.modules &&
|
||||
// Object.values(plan.features.modules).map((mod) => (
|
||||
// <li key={mod.id} className="mb-2">
|
||||
// <i className="bx bx-check text-success me-2"></i>
|
||||
// {mod.name}{" "}
|
||||
// {mod.enabled ? (
|
||||
// <span className="badge bg-success ms-2">Enabled</span>
|
||||
// ) : (
|
||||
// <span className="badge bg-secondary ms-2">Disabled</span>
|
||||
// )}
|
||||
// </li>
|
||||
// ))}
|
||||
// <li className="mb-2">
|
||||
// <i className="bx bx-support text-primary me-2"></i>
|
||||
// Support:{" "}
|
||||
// {plan.features?.supports?.prioritySupport
|
||||
// ? "Priority"
|
||||
// : plan.features?.supports?.phoneSupport
|
||||
// ? "Phone & Email"
|
||||
// : "Email Only"}
|
||||
// </li>
|
||||
// </ul>
|
||||
// </div>
|
||||
|
||||
// <div className="card-footer text-center">
|
||||
// <button className="btn btn-primary w-100">Get Started</button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// ))
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default SubscriptionPlans;
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
@ -120,11 +10,10 @@ const SubscriptionPlans = () => {
|
||||
const fetchPlans = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.get(`http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
const res = await axios.get(
|
||||
`http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`,
|
||||
{ headers: { "Content-Type": "application/json" } }
|
||||
);
|
||||
setPlans(res.data?.data || []);
|
||||
} catch (err) {
|
||||
console.error("Error fetching plans:", err);
|
||||
@ -155,7 +44,7 @@ const SubscriptionPlans = () => {
|
||||
key={idx}
|
||||
type="button"
|
||||
className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"}`}
|
||||
onClick={() => setFrequency(idx)} // use idx directly (0,1,2,3)
|
||||
onClick={() => setFrequency(idx)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
@ -163,7 +52,6 @@ const SubscriptionPlans = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Cards */}
|
||||
<div className="row g-4">
|
||||
{loading ? (
|
||||
@ -173,54 +61,65 @@ const SubscriptionPlans = () => {
|
||||
) : (
|
||||
plans.map((plan) => (
|
||||
<div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
|
||||
<div className="card h-100 shadow-sm">
|
||||
<div className="card-header text-center">
|
||||
<h4 className="mb-1">{plan.planName}</h4>
|
||||
<p className="text-muted small">{plan.description}</p>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<span className="h2 text-primary fw-bold mb-0">
|
||||
{plan.currency?.symbol}{plan.price}
|
||||
</span>
|
||||
<sub className="h6 text-muted mb-n1 ms-1">/{frequencyLabel(frequency)}</sub>
|
||||
</div>
|
||||
<div className="text-muted">
|
||||
Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB
|
||||
<div className="card h-100 shadow-sm border-0 p-3">
|
||||
{/* Header */}
|
||||
<div className="d-flex align-items-center gap-3 mb-3">
|
||||
<i className="bx bxs-package text-primary fs-1"></i>
|
||||
<div>
|
||||
<p className="card-title fs-4 fw-bold mb-1 me-6">
|
||||
{plan.planName}
|
||||
</p>
|
||||
<p className="text-muted mb-0">{plan.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled">
|
||||
{plan.features?.modules &&
|
||||
Object.values(plan.features.modules).map((modGroup) =>
|
||||
Object.values(modGroup).map((mod) =>
|
||||
mod && mod.name ? (
|
||||
<li key={mod.id} className="mb-2">
|
||||
<i className="bx bx-check text-success me-2"></i>
|
||||
{mod.name}{" "}
|
||||
{mod.enabled ? (
|
||||
<span className="badge bg-success ms-2">Enabled</span>
|
||||
) : (
|
||||
<span className="badge bg-secondary ms-2">Disabled</span>
|
||||
)}
|
||||
</li>
|
||||
) : null
|
||||
)
|
||||
)}
|
||||
|
||||
<li className="mb-2">
|
||||
<i className="bx bx-support text-primary me-2"></i>
|
||||
Support:{" "}
|
||||
{plan.features?.supports?.prioritySupport
|
||||
? "Priority"
|
||||
: plan.features?.supports?.phoneSupport
|
||||
? "Phone & Email"
|
||||
: "Email Only"}
|
||||
</li>
|
||||
</ul>
|
||||
{/* Price */}
|
||||
<div className="text-start mb-3">
|
||||
<h4 className="fw-semibold mt-auto mb-3">
|
||||
{plan.currency?.symbol} {plan.price}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="card-footer text-center">
|
||||
<button className="btn btn-primary w-100">Get Started</button>
|
||||
{/* Storage & Trial */}
|
||||
<div className="text-start text-muted mb-3">
|
||||
<div className="mb-1">
|
||||
<i className="fa-solid fa-hdd me-2"></i>
|
||||
Storage {plan.maxStorage} MB
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa-regular fa-calendar-check text-success me-2"></i>
|
||||
Trial Days {plan.trialDays}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-start">
|
||||
Features
|
||||
</h6>
|
||||
<ul className="list-unstyled text-start mb-4">
|
||||
{plan.features?.modules &&
|
||||
Object.values(plan.features.modules).map((mod) =>
|
||||
mod && mod.name ? (
|
||||
<li
|
||||
key={mod.id}
|
||||
className="d-flex align-items-center mb-2"
|
||||
>
|
||||
{mod.enabled ? (
|
||||
<i className="fa-regular fa-circle-check text-success me-2"></i>
|
||||
) : (
|
||||
<i className="fa-regular fa-circle-xmark text-danger me-2"></i>
|
||||
)}
|
||||
{mod.name}
|
||||
</li>
|
||||
) : null
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{/* Button */}
|
||||
<div className="mt-auto">
|
||||
<button className="btn btn-outline-primary w-100 fw-bold">
|
||||
Select Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -232,4 +131,3 @@ const SubscriptionPlans = () => {
|
||||
};
|
||||
|
||||
export default SubscriptionPlans;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user