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

Changes in UI of Subscription-plan.

Browse Source
This commit is contained in:
Kartik Sharma 2025-09-17 16:49:52 +05:30
parent eea7252b96
commit df9107f0d8
1 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
const SubscriptionPlans = () => {
const [plans, setPlans] = useState([]);
@ -26,10 +27,10 @@ const SubscriptionPlans = () => {
const frequencyLabel = (freq) => {
switch (freq) {
case 0: return "mo";
case 0: return "1mo";
case 1: return "3mo";
case 2: return "6mo";
case 3: return "yr";
case 3: return "1yr";
default: return "mo";
}
};
@ -61,28 +62,25 @@ 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 border-0 p-3">
<div className="card h-100 shadow-lg border-0 p-3 text-center">
{/* 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 className="mb-3">
<i className="bx bxs-package text-primary fs-1 mb-2"></i>
<p className="card-title fs-3 fw-bold mb-1">{plan.planName}</p>
<p className="text-muted mb-0 fs-5">{plan.description}</p>
</div>
{/* Price */}
<div className="text-start mb-3">
<h4 className="fw-semibold mt-auto mb-3">
<div className="mb-3">
<h4 className="fw-semibold mt-auto mb-0 fs-3">
{plan.currency?.symbol} {plan.price}
<small className="text-muted ms-1">/ {frequencyLabel(frequency)}</small>
</h4>
</div>
{/* Storage & Trial */}
<div className="text-start text-muted mb-3">
<div className="mb-1">
<div className="text-muted mb-5 d-flex justify-content-center gap-4">
<div>
<i className="fa-solid fa-hdd me-2"></i>
Storage {plan.maxStorage} MB
</div>
@ -92,17 +90,18 @@ const SubscriptionPlans = () => {
</div>
</div>
{/* Features */}
<h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-start">
<h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
Features
</h6>
<ul className="list-unstyled text-start mb-4">
<ul className="list-unstyled text-start mb-4 ms-7 fs-5">
{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"
className="d-flex align-items-center mb-4"
>
{mod.enabled ? (
<i className="fa-regular fa-circle-check text-success me-2"></i>
@ -117,15 +116,19 @@ const SubscriptionPlans = () => {
{/* Button */}
<div className="mt-auto">
<button className="btn btn-outline-primary w-100 fw-bold">
Select Plan
</button>
<Link
to="/auth/reqest/demo"
className="btn btn-outline-primary w-100 fw-bold"
>
Enquiry
</Link>
</div>
</div>
</div>
))
)}
</div>
</div>
);
};