fixed selected subscription page #71
@@ -8,7 +8,9 @@ import getImage from "../../utils/getImage";
|
||||
import { IoMdArrowDropdown } from "react-icons/io";
|
||||
import { completeProfile, getCommonPractice } from '../../services/services';
|
||||
import siteLinks from "../../links/siteLinks";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { updateUserDetails } from "../../store/UserDetails";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
|
||||
// const validationSchema = Yup.object().shape({
|
||||
@@ -26,8 +28,12 @@ import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function ProfileCompleteCom(){
|
||||
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const {state:{redirectLink}} = useLocation()
|
||||
|
||||
const [practices, setPractices] = useState([])
|
||||
|
||||
const [initialValues, setInitialValues] = useState({
|
||||
@@ -61,8 +67,9 @@ export default function ProfileCompleteCom(){
|
||||
if(res.data.resultCode != '0'){
|
||||
throw({message: res?.data?.resultDescription})
|
||||
}
|
||||
dispatch(updateUserDetails({profile_completed: res?.data?.profile_completed }));
|
||||
setTimeout(()=>{
|
||||
navigate(siteLinks.home)
|
||||
navigate(redirectLink)
|
||||
},2000)
|
||||
// console.log('res', res)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -28,7 +28,7 @@ export default function Subscription() {
|
||||
|
||||
const currentSubscription = data?.data?.current_product
|
||||
const otherSubscriptions = data?.data?.options
|
||||
console.log('urlData', data?.data)
|
||||
// console.log('urlData', data?.data)
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -73,7 +73,7 @@ export default function Subscription() {
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-2">
|
||||
<button onClick={()=>{navigate(siteLinks.subscribe)}} className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
|
||||
<button onClick={()=>{navigate(siteLinks.subscribe, {state:{selectedSubscription: value}})}} className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,18 +2,19 @@ import React, { useEffect } from 'react'
|
||||
import ProductFactory from '../component/product/ProductFactory'
|
||||
import { useSelector } from 'react-redux';
|
||||
import siteLinks from '../links/siteLinks';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
|
||||
export default function ProductPage() {
|
||||
|
||||
const navigate = useNavigate()
|
||||
let {pathname} = useLocation()
|
||||
|
||||
const { userDetails: { profile_completed }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
|
||||
useEffect(()=>{
|
||||
if(!profile_completed){
|
||||
navigate(siteLinks.profile_complete, {replace: true, state:{profile_completed: false}})
|
||||
navigate(siteLinks.profile_complete, {replace: true, state:{redirectLink: pathname}})
|
||||
}
|
||||
},[])
|
||||
|
||||
|
||||
Reference in New Issue
Block a user