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