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

Adding additional fields in landing subscription cards.

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-13 09:54:02 +05:30
parent 3a8c1745f4
commit 44f3d8783d
1 changed files with 72 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/Home/SubscriptionPlans.jsx
View File

@ -9,7 +9,7 @@ const SubscriptionPlans = () => {
const [frequency, setFrequency] = useState(1);
const { data, isLoading, isError, error } = useSubscription(frequency);
const [loading, setLoading] = useState(false);
console.log(data);
const frequencyLabel = (freq) => {
switch (freq) {
case 0:
@ -35,8 +35,7 @@ const SubscriptionPlans = () => {
<button
key={idx}
type="button"
className={`btn btn-${
frequency === idx ? "primary" : "outline-secondary"
className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"
}`}
onClick={() => setFrequency(idx)}
>
@ -102,24 +101,76 @@ const SubscriptionPlans = () => {
<h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
Features
</h6>
<ul className="list-unstyled text-start mb-4 ms-7 fs-6">
<div className="accordion" id={`planFeatures-${plan.id}`}>
{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"
Object.entries(plan.features.modules).map(([key, mod]) => {
if (!mod || !mod.name) return null;
return (
<div className="accordion-item mb-2" key={mod.id}>
<h2 className="accordion-header" id={`heading-${mod.id}`}>
<button
className="accordion-button collapsed py-2 d-flex justify-content-between align-items-center"
type="button"
data-bs-toggle="collapse"
data-bs-target={`#collapse-${mod.id}-${plan.id}`}
aria-expanded="false"
aria-controls={`collapse-${mod.id}-${plan.id}`}
>
<span className="fw-semibold d-flex align-items-center">
{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}
</span>
{/* Down arrow */}
<i
className="bx bx-chevron-down ms-2 transition-arrow"
style={{ fontSize: "16px", transition: "transform 0.3s" }}
></i>
</button>
</h2>
<div
id={`collapse-${mod.id}-${plan.id}`}
className="accordion-collapse collapse"
data-bs-parent={`#planFeatures-${plan.id}`}
>
<div className="accordion-body py-2">
{mod.features && mod.features.length > 0 ? (
<ul className="list-unstyled ms-2">
{mod.features.map((feat) => (
<li
key={feat.id}
className="d-flex align-items-start mb-1"
>
<i
className={`fa-regular ${mod.enabled ? "bx bxs-circle text-success" : "bx bxs-circle text-danger"
} me-2 mt-1`}
style={{ fontSize: "8px" }}
></i>
<span>{feat.name}</span>
</li>
) : null
)}
))}
</ul>
) : (
<p className="text-muted small mb-0">
No additional features
</p>
)}
</div>
</div>
</div>
);
})}
</div>
{/* Button */}
<div className="mt-auto">