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

merms panel

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-08-23 08:30:32 -04:00
parent a6e9d507ae
commit 777f3cbec4
1 changed files with 63 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/subscription/Subscription.jsx
+23 -13
View File
@@ -1,18 +1,18 @@
import React from 'react' import React from 'react'
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
import { getSubscriptions } from '../../services/services'; import {getSubscriptions} from '../../services/services';
import { useQuery } from '@tanstack/react-query'; import {useQuery} from '@tanstack/react-query';
import queryKeys from '../../services/queryKeys'; import queryKeys from '../../services/queryKeys';
import siteLinks from "../../links/siteLinks"; import siteLinks from "../../links/siteLinks";
import { Link, useNavigate } from 'react-router-dom' import {Link, useNavigate} from 'react-router-dom'
export default function Subscription() { export default function Subscription() {
const navigate = useNavigate() const navigate = useNavigate()
const pricingFields ={ const pricingFields = {
starter: { name: 'Starter', price: 5.99, active: true }, starter: {name: 'Starter', price: 5.99, active: true},
basic: { name: 'Basic', price: 12.99, active: true }, basic: {name: 'Basic', price: 12.99, active: true},
premium: { name: 'Premium', price: 20.00, active: true }, premium: {name: 'Premium', price: 20.00, active: true},
} }
const {data, isFetching, isError, error} = useQuery({ const {data, isFetching, isError, error} = useQuery({
@@ -32,7 +32,7 @@ export default function Subscription() {
return ( return (
<> <>
<BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} /> <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']}/>
{isFetching ? {isFetching ?
<> <>
@@ -53,6 +53,11 @@ export default function Subscription() {
<h5>Your Subscription(s)</h5> <h5>Your Subscription(s)</h5>
<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2> <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
</div> </div>
<div className="pt-2" style={{textAlign: 'left'}}>
<div style={{fontSize: '10px'}}>
Next Payment: {currentSubscription?.next_payment}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -67,15 +72,20 @@ export default function Subscription() {
<h5>{value.display_name}</h5> <h5>{value.display_name}</h5>
<h2 className="text-primary pt-3">${value.monthly}</h2> <h2 className="text-primary pt-3">${value.monthly}</h2>
<p className="text-primary pb-3">/ Monthly</p> <p className="text-primary pb-3">/ Monthly</p>
<ol className="py-2" style={{fontSize: '14px', fontWeight:'bold', textAlign:'left'}}> <ol className="py-2"
{value?.items?.map(item =>( style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
{value?.items?.map(item => (
<li key={item.description}>{item.description}</li> <li key={item.description}>{item.description}</li>
))} ))}
</ol> </ol>
</div>
</div>
<div className="pt-2"> <div className="pt-2">
<button onClick={()=>{navigate(siteLinks.subscribe, {state:{selectedSubscription: value}})}} className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button> <button onClick={() => {
</div> navigate(siteLinks.subscribe, {state: {selectedSubscription: value}})
</div> }}
className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
</div> </div>
</div> </div>
</div> </div>