MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

added subscription endpoint

Browse Source
This commit was merged in pull request #64.
This commit is contained in:
victorAnumudu
2025-08-11 21:49:13 +01:00
parent 80d5c8ea12
commit c776419dcf
5 changed files with 82 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/subscription/Subscription.jsx
+42 -25
View File
@@ -1,6 +1,9 @@
import React from 'react'
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage";
import { getSubscriptions } from '../../services/services';
import { useQuery } from '@tanstack/react-query';
import queryKeys from '../../services/queryKeys';
export default function Subscription() {
@@ -10,52 +13,66 @@ export default function Subscription() {
premium: { name: 'Premium', price: 20.00, active: true },
}
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.subscriptions,
queryFn: () => {
let reqData = {
token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid') // USER UID
}
return getSubscriptions(reqData)
}
})
const currentSubscription = data?.data?.current_product
const otherSubscriptions = data?.data?.options
console.log('urlData', data?.data)
return (
<>
<BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
{isFetching ?
<>
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</>
: isError ?
<div className="col-12">
<p className='text-danger'>{error.message}</p>
</div>
:
<div className="row">
<div className="col-xl-3 col-md-6">
<div className="col-12 col-lg-6 col-xl-3">
<div className="card card-statistics text-center py-3">
<div className="card-body pricing-content">
<div className="pricing-content-card">
<h5>Current Subscription(s)</h5>
<h2 className="text-primary pt-3">Basic</h2>
{/*<p className="text-primary pb-3">/ Monthly</p>*/}
{/*<ul className="py-2">*/}
{/* <li>post jobs</li>*/}
{/* <li>advanced instructors search</li>*/}
{/* <li>invite candidates</li>*/}
{/* <li>post events</li>*/}
{/* <li>cancel any time</li>*/}
{/*</ul>*/}
<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
</div>
</div>
</div>
</div>
<>
{Object.entries(pricingFields)?.map(([key, value]) => (
{Object.entries(otherSubscriptions)?.map(([key, value]) => (
<div key={key} className="col-xl-3 col-md-6">
<div key={key} className="col-12 col-lg-6 col-xl-3">
<div className="card card-statistics text-center py-3">
<div className="card-body pricing-content">
<div className="pricing-content-card">
<h5>{value.name}</h5>
<h2 className="text-primary pt-3">${value.price}</h2>
<h5>{value.display_name}</h5>
<h2 className="text-primary pt-3">${value.monthly}</h2>
<p className="text-primary pb-3">/ Monthly</p>
<ul className="py-2">
<li>post jobs</li>
<li>advanced instructors search</li>
<li>invite candidates</li>
<li>post events</li>
<li>cancel any time</li>
{value?.items?.map(item =>(
<li key={item}>{item}</li>
))}
</ul>
<div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go {value.name}</a></div>
<div className="pt-2">
<button className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
</div>
</div>
</div>
</div>
@@ -65,7 +82,7 @@ export default function Subscription() {
</>
</div>
}
</>
)
}