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

fixed selected subscription page

Browse Source
This commit was merged in pull request #71.
This commit is contained in:
victorAnumudu
2025-08-18 19:40:49 +01:00
parent ad4a92ceed
commit cb4f9fbb42
4 changed files with 51 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/subscribe/Subscribe.jsx
+37 -73
View File
@@ -5,96 +5,60 @@ import { getSubscriptions } from '../../services/services';
import { useQuery } from '@tanstack/react-query';
import queryKeys from '../../services/queryKeys';
import siteLinks from "../../links/siteLinks";
import { Link, useNavigate } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
import SubscribeNewCard from "./SubscribeNewCard";
import SubscribePreviousCard from "./SubscribePreviousCard";
import SubcribePaymentOptions from "./SubcribePaymentOptions";
export default function Subscribe() {
const navigate = useNavigate()
const pricingFields ={
starter: { name: 'Starter', price: 5.99, active: true },
basic: { name: 'Basic', price: 12.99, active: true },
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 {state:{selectedSubscription}} = useLocation()
const currentSubscription = data?.data?.current_product
const otherSubscriptions = data?.data?.options
console.log('urlData', data?.data)
const subscriptionSelection = otherSubscriptions?.starter;
// console.log('selectedSubscription', selectedSubscription)
return (
<>
<BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']} />
{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-12 col-lg-6 col-xl-6">
<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">{currentSubscription?.display_name}</h2>*/}
<SubcribePaymentOptions />
<div className="row">
<div className="col-12 col-lg-6 col-xl-6">
<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">{currentSubscription?.display_name}</h2>*/}
<SubcribePaymentOptions />
<SubscribeNewCard />
<SubscribePreviousCard />
<SubscribeNewCard />
<SubscribePreviousCard />
</div>
</div>
</div>
</div>
<>
<div key="basic" className="col-12 col-lg-6 col-xl-6">
<div className="card card-statistics text-center py-3">
<div className="card-body pricing-content">
<div className="pricing-content-card">
<h5>{subscriptionSelection.display_name}</h5>
<h2 className="text-primary pt-3">${subscriptionSelection.monthly}</h2>
<p className="text-primary pb-3">/ Monthly</p>
<ul className="py-2">
{subscriptionSelection?.items?.map(item =>(
<li key={item}>{item}</li>
))}
</ul>
{/*<div className="pt-2">*/}
{/* <button className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
{/*</div>*/}
</div>
</div>
</div>
</div>
</>
</div>
}
</div>
<>
<div key="basic" className="col-12 col-lg-6 col-xl-6">
<div className="card card-statistics text-center py-3">
<div className="card-body pricing-content">
<div className="pricing-content-card">
<h5>{selectedSubscription.display_name}</h5>
<h2 className="text-primary pt-3">${selectedSubscription.monthly}</h2>
<p className="text-primary pb-3">/ Monthly</p>
<ul className="py-2">
{selectedSubscription?.items?.map(item =>(
<li key={item}>{item}</li>
))}
</ul>
{/*<div className="pt-2">*/}
{/* <button className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
{/*</div>*/}
</div>
</div>
</div>
</div>
</>
</div>
</>
)
}