From 7b15309dbfad73f711fed346a04d789d451c1fbf Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Wed, 17 Sep 2025 14:38:57 +0530 Subject: [PATCH] Calling API for Dashboard paln show. --- src/pages/Home/LandingPage.jsx | 338 +-------------------------- src/pages/Home/SubscriptionPlans.jsx | 235 +++++++++++++++++++ 2 files changed, 238 insertions(+), 335 deletions(-) create mode 100644 src/pages/Home/SubscriptionPlans.jsx diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx index 0156ae5b..c7806349 100644 --- a/src/pages/Home/LandingPage.jsx +++ b/src/pages/Home/LandingPage.jsx @@ -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. Choose the best plan to fit your needs.

-
-
-
- - - -
- {/* */} - {/*
- pricing plans arrow - Save 25% -
*/} -
-
-
- {/* Basic Plan: Start */} -
-
-
-
- paper airplane icon -

Basic

-
- - $19 - - - $14 - - /mo -
-
-
- $ 168 / year -
-
-
-
-
-
    -
  • -
    - - - - Timeline -
    -
    • -
  • -
    - - - - Basic search -
    -
    • -
  • -
    - - - - Live chat widget -
    -
    • -
  • -
    - - - - Email marketing -
    -
    • -
  • -
    - - - - Custom Forms -
    -
    • -
  • -
    - - - - Traffic analytics -
    -
    • -
  • -
    - - - - Basic Support -
    -
    • -
- -
-
-
- {/* Basic Plan: End */} - - {/* Favourite Plan: Start */} -
-
-
-
- plane icon -

Team

-
- - $29 - - - $22 - - /mo -
-
-
- $ 264 / year -
-
-
-
-
-
    -
  • -
    - - - - Everything in basic -
    -
    • -
  • -
    - - - - Timeline with database -
    -
    • -
  • -
    - - - - Advanced search -
    -
    • -
  • -
    - - - - Marketing automation -
    -
    • -
  • -
    - - - - Advanced chatbot -
    -
    • -
  • -
    - - - - Campaign management -
    -
    • -
  • -
    - - - - Collaboration tools -
    -
    • -
- -
-
-
- {/* Favourite Plan: End */} - - {/* Standard Plan: Start */} -
-
-
-
- shuttle rocket icon -

Enterprise

-
- - $49 - - - $37 - - /mo -
-
-
- $ 444 / year -
-
-
-
-
-
    -
  • -
    - - - - Everything in premium -
    -
    • -
  • -
    - - - - Timeline with database -
    -
    • -
  • -
    - - - - Fuzzy search -
    -
    • -
  • -
    - - - - A/B testing sanbox -
    -
    • -
  • -
    - - - - Custom permissions -
    -
    • -
  • -
    - - - - Social media automation -
    -
    • -
  • -
    - - - - Sales automation tools -
    -
    • -
- -
-
-
- {/* Standard Plan: End */} -
+ {/* */} + {/* Pricing plans: End */} diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx new file mode 100644 index 00000000..0d44472c --- /dev/null +++ b/src/pages/Home/SubscriptionPlans.jsx @@ -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 ( +//
+// {/* Frequency Switcher */} +//
+//
+// {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map((label, idx) => ( +// +// ))} +//
+//
+ +// {/* Cards */} +//
+// {loading ? ( +//
Loading...
+// ) : plans.length === 0 ? ( +//
No plans found
+// ) : ( +// plans.map((plan) => ( +//
+//
+//
+//

{plan.planName}

+//

{plan.description}

+//
+// +// {plan.currency?.symbol} +// {plan.price} +// +// /mo +//
+//
+// Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB +//
+//
+ +//
+//
    +// {plan.features?.modules && +// Object.values(plan.features.modules).map((mod) => ( +//
  • +// +// {mod.name}{" "} +// {mod.enabled ? ( +// Enabled +// ) : ( +// Disabled +// )} +//
    • +// ))} +//
  • +// +// Support:{" "} +// {plan.features?.supports?.prioritySupport +// ? "Priority" +// : plan.features?.supports?.phoneSupport +// ? "Phone & Email" +// : "Email Only"} +//
    • +//
+//
+ +//
+// +//
+//
+//
+// )) +// )} +//
+//
+// ); +// }; + +// 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 ( +
+ {/* Frequency Switcher */} +
+
+ {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map((label, idx) => ( + + ))} +
+
+ + + {/* Cards */} +
+ {loading ? ( +
Loading...
+ ) : plans.length === 0 ? ( +
No plans found
+ ) : ( + plans.map((plan) => ( +
+
+
+

{plan.planName}

+

{plan.description}

+
+ + {plan.currency?.symbol}{plan.price} + + /{frequencyLabel(frequency)} +
+
+ Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB +
+
+ +
+
    + {plan.features?.modules && + Object.values(plan.features.modules).map((modGroup) => + Object.values(modGroup).map((mod) => + mod && mod.name ? ( +
  • + + {mod.name}{" "} + {mod.enabled ? ( + Enabled + ) : ( + Disabled + )} +
    • + ) : null + ) + )} + +
  • + + Support:{" "} + {plan.features?.supports?.prioritySupport + ? "Priority" + : plan.features?.supports?.phoneSupport + ? "Phone & Email" + : "Email Only"} +
    • +
+
+ +
+ +
+
+
+ )) + )} +
+
+ ); +}; + +export default SubscriptionPlans; +