73 lines
3.9 KiB
React
73 lines
3.9 KiB
React
import React, {useState} from 'react'
|
|
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
|
import {Link, useLocation} from 'react-router-dom'
|
|
import SubscribeNewCard from "./SubscribeNewCard";
|
|
import SubscribePreviousCard from "./SubscribePreviousCard";
|
|
import SubcribePaymentOptions from "./SubcribePaymentOptions";
|
|
import StripeSubscriptionButton from "./StripeSubscriptionButton";
|
|
import SubscribeInfo from "./SubscribeInfo";
|
|
|
|
export default function Subscribe() {
|
|
const {state: {selectedSubscription, customerId}} = useLocation()
|
|
|
|
console.log('selectedSubscription', selectedSubscription)
|
|
console.log('selectedSubscription.option_name', selectedSubscription.option_name)
|
|
console.log('customerId', customerId)
|
|
|
|
let [activePaymentType, setActivePaymentType] = useState('previous')
|
|
|
|
return (
|
|
<>
|
|
<BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']}/>
|
|
|
|
<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 activePaymentType={activePaymentType}*/}
|
|
{/* setActivePaymentType={setActivePaymentType}/>*/}
|
|
{/*{activePaymentType == 'new' ?*/}
|
|
{/* <SubscribeNewCard/>*/}
|
|
{/* :*/}
|
|
{/* <SubscribePreviousCard/>*/}
|
|
{/*}*/}
|
|
<>
|
|
<SubscribeInfo />
|
|
<StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id}
|
|
customerId={customerId}
|
|
option_name={selectedSubscription.option_name}/>
|
|
</>
|
|
</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>
|
|
<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>
|
|
</>
|
|
)
|
|
} |