Calling API for Dashboard paln show.
This commit is contained in:
parent
a86c815ca2
commit
7b15309dbf
@ -12,6 +12,7 @@ import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import SwaperSlideContent from "./SwaperSlideContent";
|
||||
import SwaperBlogContent from "./SwaperBlogContent";
|
||||
import SubscriptionPlans from "./SubscriptionPlans";
|
||||
|
||||
const swiperConfig = {
|
||||
spaceBetween: 30,
|
||||
@ -496,341 +497,8 @@ const LandingPage = () => {
|
||||
No matter which plan you choose, you’ll get access to powerful
|
||||
features. <strong>Choose the best plan to fit your needs.</strong>
|
||||
</p>
|
||||
<div className="text-center mb-8">
|
||||
<div className="position-relative d-inline-block pt-3 pt-md-0">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-outline-secondary">
|
||||
Basic
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">
|
||||
Team
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary">
|
||||
Enterprise
|
||||
</button>
|
||||
</div>
|
||||
{/* <label className="switch switch-sm switch-primary me-0">
|
||||
<span className="switch-label fs-6 text-body me-3">
|
||||
Pay Monthly
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input price-duration-toggler"
|
||||
checked
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label fs-6 text-body ms-3">
|
||||
Pay Annual
|
||||
</span>
|
||||
</label> */}
|
||||
{/* <div className="pricing-plans-item position-absolute d-flex">
|
||||
<img
|
||||
src="./../../public/img/icons/pricing-plans-arrow.png"
|
||||
alt="pricing plans arrow"
|
||||
className="scaleX-n1-rtl"
|
||||
/>
|
||||
<span className="fw-medium mt-2 ms-1"> Save 25%</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-6 pt-0">
|
||||
{/* Basic Plan: Start */}
|
||||
<div className="col-xl-4 col-lg-6 col-md-4">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="/img/icons/paper-airplane.png"
|
||||
alt="paper airplane icon"
|
||||
className="mb-8 pb-2"
|
||||
/>
|
||||
<h4 className="mb-0">Basic</h4>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<span className="price-monthly h2 text-primary fw-extrabold mb-0">
|
||||
$19
|
||||
</span>
|
||||
<span className="price-yearly h2 text-primary fw-extrabold mb-0 d-none">
|
||||
$14
|
||||
</span>
|
||||
<sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
|
||||
</div>
|
||||
<div className="position-relative pt-2">
|
||||
<div className="price-yearly text-muted price-yearly-toggle d-none">
|
||||
$ 168 / year
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="text start list-unstyled pricing-list">
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Timeline
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Basic search
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Live chat widget
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Email marketing
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Custom Forms
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Traffic analytics
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Basic Support
|
||||
</h6>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="d-grid mt-8">
|
||||
<a
|
||||
href="#landingPricing"
|
||||
className="btn btn-label-primary"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Basic Plan: End */}
|
||||
|
||||
{/* Favourite Plan: Start */}
|
||||
<div className="col-xl-4 col-lg-6 col-md-4">
|
||||
<div className="card border border-primary shadow-xl">
|
||||
<div className="card-header">
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="/img/icons/plane.png"
|
||||
alt="plane icon"
|
||||
className="mb-8 pb-2"
|
||||
/>
|
||||
<h4 className="mb-0">Team</h4>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<span className="price-monthly h2 text-primary fw-extrabold mb-0">
|
||||
$29
|
||||
</span>
|
||||
<span className="price-yearly h2 text-primary fw-extrabold mb-0 d-none">
|
||||
$22
|
||||
</span>
|
||||
<sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
|
||||
</div>
|
||||
<div className="position-relative pt-2">
|
||||
<div className="price-yearly text-muted price-yearly-toggle d-none">
|
||||
$ 264 / year
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="text start list-unstyled pricing-list">
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Everything in basic
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Timeline with database
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Advanced search
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Marketing automation
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Advanced chatbot
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Campaign management
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Collaboration tools
|
||||
</h6>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="d-grid mt-8">
|
||||
<a href="payment-page.html" className="btn btn-primary">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Favourite Plan: End */}
|
||||
|
||||
{/* Standard Plan: Start */}
|
||||
<div className="col-xl-4 col-lg-6 col-md-4">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="/img/icons/shuttle-rocket.png"
|
||||
alt="shuttle rocket icon"
|
||||
className="mb-8 pb-2"
|
||||
/>
|
||||
<h4 className="mb-0">Enterprise</h4>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<span className="price-monthly h2 text-primary fw-extrabold mb-0">
|
||||
$49
|
||||
</span>
|
||||
<span className="price-yearly h2 text-primary fw-extrabold mb-0 d-none">
|
||||
$37
|
||||
</span>
|
||||
<sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
|
||||
</div>
|
||||
<div className="position-relative pt-2">
|
||||
<div className="price-yearly text-muted price-yearly-toggle d-none">
|
||||
$ 444 / year
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="text start list-unstyled pricing-list">
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Everything in premium
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Timeline with database
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Fuzzy search
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
A/B testing sanbox
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Custom permissions
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Social media automation
|
||||
</h6>
|
||||
</li>
|
||||
<li>
|
||||
<h6 className="d-flex align-items-center mb-3">
|
||||
<span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
|
||||
<i className="bx bx-check bx-12px"></i>
|
||||
</span>
|
||||
Sales automation tools
|
||||
</h6>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="d-grid mt-8">
|
||||
<a
|
||||
href="payment-page.html"
|
||||
className="btn btn-label-primary"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Standard Plan: End */}
|
||||
</div>
|
||||
{/* <SubscriptionPlans/> */}
|
||||
<SubscriptionPlans />
|
||||
</div>
|
||||
</section>
|
||||
{/* Pricing plans: End */}
|
||||
|
||||
235
src/pages/Home/SubscriptionPlans.jsx
Normal file
235
src/pages/Home/SubscriptionPlans.jsx
Normal file
@ -0,0 +1,235 @@
|
||||
// // 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";
|
||||
|
||||
const SubscriptionPlans = () => {
|
||||
const [plans, setPlans] = useState([]);
|
||||
const [frequency, setFrequency] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
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"
|
||||
}
|
||||
});
|
||||
setPlans(res.data?.data || []);
|
||||
} catch (err) {
|
||||
console.error("Error fetching plans:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchPlans();
|
||||
}, [frequency]);
|
||||
|
||||
const frequencyLabel = (freq) => {
|
||||
switch (freq) {
|
||||
case 0: return "mo";
|
||||
case 1: return "3mo";
|
||||
case 2: return "6mo";
|
||||
case 3: return "yr";
|
||||
default: return "mo";
|
||||
}
|
||||
};
|
||||
|
||||
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 ? "primary" : "outline-secondary"}`}
|
||||
onClick={() => setFrequency(idx)} // use idx directly (0,1,2,3)
|
||||
>
|
||||
{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">/{frequencyLabel(frequency)}</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((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>
|
||||
</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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user