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

stripe button

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-08-23 16:53:50 -04:00
parent 777f3cbec4
commit 9e4de10251
4 changed files with 102 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/subscribe/Subscribe.jsx
+36 -32
View File
@@ -1,25 +1,25 @@
import React, { useState } from 'react'
import React, {useState} 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';
import siteLinks from "../../links/siteLinks";
import { Link, useLocation } from 'react-router-dom'
import {Link, useLocation} from 'react-router-dom'
import SubscribeNewCard from "./SubscribeNewCard";
import SubscribePreviousCard from "./SubscribePreviousCard";
import SubcribePaymentOptions from "./SubcribePaymentOptions";
import StripeSubscriptionButton from "./StripeSubscriptionButton";
export default function Subscribe() {
const {state: {selectedSubscription,customerId}} = useLocation()
const {state:{selectedSubscription}} = useLocation()
console.log('selectedSubscription', selectedSubscription)
console.log('customerId', customerId)
// console.log('selectedSubscription', selectedSubscription)
let [activePaymentType, setActivePaymentType] = useState('previous')
return (
<>
<BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']} />
<BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']}/>
<div className="row">
<div className="col-12 col-lg-6 col-xl-6">
@@ -28,38 +28,42 @@ export default function Subscribe() {
<div className="pricing-content-card">
<h5>Current Subscription(s)</h5>
{/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
<SubcribePaymentOptions activePaymentType={activePaymentType} setActivePaymentType={setActivePaymentType} />
{activePaymentType == 'new' ?
<SubscribeNewCard />
<SubcribePaymentOptions activePaymentType={activePaymentType}
setActivePaymentType={setActivePaymentType}/>
{activePaymentType == 'new' ?
<SubscribeNewCard/>
:
<SubscribePreviousCard />
}
<SubscribePreviousCard/>
}
<>
<StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id} customerId={customerId} />
</>
</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.description}>{item.description}</li>
))}
</ul>
{/*<div className="pt-2">*/}
{/* <button className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
{/*</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>
<ol className="py-2"
style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
{selectedSubscription?.items?.map(item => (
<li key={item.description}>{item.description}</li>
))}
</ol>
{/*<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>
</>