fixed template data bug

.env

@@ -1,15 +1,16 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
-REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
+NODE_ENV="development"
-REACT_APP_MAIN_API="https://api.mermsemr.com"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dsocket.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://www.mermsemr.com/'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://www.mermsemr.com/about'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://www.mermsemr.com/contacts'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://www.mermsemr.com/terms'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

.env.production

@@ -1,7 +1,8 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="production"
+NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
-REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MAIN_API="https://api.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"
 

.env.qa

@@ -1,5 +1,6 @@
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
+NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"

package.json

@@ -10,6 +10,8 @@
     "@fullcalendar/timegrid": "^6.1.15",
     "@popperjs/core": "^2.11.8",
     "@reduxjs/toolkit": "^2.4.0",
+    "@stripe/react-stripe-js": "^3.9.1",
+    "@stripe/stripe-js": "^7.8.0",
     "@tanstack/react-query": "^5.62.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -33,8 +35,7 @@
   },
   "scripts": {
     "start": "react-scripts start -e .env.development",
-    "build": "react-scripts start -e .env.development",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
-    "build_real": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

run.sh

@@ -4,12 +4,17 @@ set -x
 
 export NODE_ENV="${NODE_ENV:-development}"
 
-if [ $NODE_ENV == "development" ]; then
+if [ $NODE_ENV = "development" ]; then
   # this runs webpack-dev-server with hot reloading
   echo "Development build"
   npm install --legacy-peer-deps
   npm start
   # npm run build
+elif [ $NODE_ENV = "qa" -o $NODE_ENV = "test" ]; then
+  echo "QA build"
+  export NODE_ENV="test"
+  npm install --legacy-peer-deps
+  npm start
 else
   # build the app and serve it via nginx
   echo "Production build"

src/AppRouters.jsx

@@ -23,7 +23,7 @@ import SubscriptionPage from './views/SubscriptionPage';
 import OnboardPage from "./views/OnboardPage";
 import AccPWDResetPage from './views/AccPWDResetPage';
 import ProfileCompletePage from './views/ProfileCompletePage';
-
+import  SubscribePage from './views/Subscribe'
 
 function AppRouters() {
   return (
@@ -52,9 +52,11 @@ function AppRouters() {
               <Route path={siteLinks.contacts} element={<ContactsPage />} />
               <Route path={siteLinks.user} element={<UserPage />} />
               <Route path={siteLinks.subscription} element={<SubscriptionPage />} />
+              <Route path={siteLinks.subscription_success} element={<SubscriptionPage />} />
               <Route path={siteLinks.onboard} element={<OnboardPage />} />
               <Route path={siteLinks.calendar} element={<CalendarPage />} />
               <Route path={siteLinks.settings} element={<SettingsPage />} />
+              <Route path={siteLinks.subscribe} element={<SubscribePage />} />
               <Route path={siteLinks.help} element={<HelpPage />} />
             </Route>
           </Route>

src/component/home/TopBar.jsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
 import queryKeys from '../../services/queryKeys'
+import { Link } from 'react-router-dom'
 
 export default function TopBar() {
 
@@ -68,7 +69,7 @@ export default function TopBar() {
                                         <small className="d-block">{item?.data_span}</small>
                                     </div>
                                     <div className="col text-right">
-                                        <h5 className="text-muted mb-0"><a href={item?.link}>{item?.description}</a></h5>
+                                        <h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></h5>
                                     </div>
                                 </div>
                                 <div className="apexchart-wrapper">

src/component/product/ProductStart.jsx

@@ -83,7 +83,7 @@ export default function ProductStart(props){
                         <img className="card-img-top" src={getImage(productBanner)}  alt="Card image cap" />
                         <div className="card-body">
                             <h4 className="card-title">{productTitle}</h4>
-                            <div className="card-text" dangerouslySetInnerHTML={{__html: productDescription}}/>
+                            <div className="card-text" style={{fontSize: '14px'}} dangerouslySetInnerHTML={{__html: productDescription}}/>
                             {/* <p className="card-text">{productDescription}</p> */}
                         </div>
                     </div>
@@ -97,7 +97,7 @@ export default function ProductStart(props){
                                 </>
 
                                 <div className="card-body">
-                                    <p className="card-text">Start with your goals in mind and then work possible. </p>
+                                    <p className="card-text">We are actively working to launch this feature soon and will keep you informed every step of the way. </p>
                                 </div>
                                 <ul className="list-group list-group-flush">
                                     <li className="list-group-item"><h4>Coming soon!!!</h4></li>
@@ -109,19 +109,15 @@ export default function ProductStart(props){
                                 {/*<img className="card-img-top" src={getImage('widget/01.jpg')} alt="Card image cap" />*/}
                                 <div className="card-body">
                                     <h4 className="card-title">Subscription</h4>
-                                    <p className="card-text">Start with your goals in mind and then work possible.ith yand Goals. If the plan doesn’t support the vision then change it! </p>
+                                    <p className="card-text">Launch your <span style={{color: '#148399' , fontWeight: 'bolder'}}>{productTitle}</span> with us for free! Benefit from our dedicated support and customize features that align perfectly with your goals. Experience everything at no cost! </p>
                                 </div>
                                 <ul className="list-group list-group-flush">
                                     <li className="list-group-item"><h4>{promotion_text}</h4></li>
-                                    <li className="list-group-item">90 days free and 3.95/Month</li>
+                                    <li className="list-group-item">90 days free and $5.99/Month</li>
                                     <li className="list-group-item"></li>
                                 </ul>
-                                {/*<div className="card-body">*/}
-                                {/*    <a href="javascript:void(0)" className="card-link">Card link</a>*/}
-                                {/*    <a href="javascript:void(0)" className="card-link">Another link</a>*/}
-                                {/*</div>*/}
                                 <div  className="subscribe-box">
-                                    <button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Start Subscription</button>
+                                    <button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Activate Now!</button>
                                 </div>
                             </div>
                         </>
@@ -134,13 +130,13 @@ export default function ProductStart(props){
                 <div className="modal-dialog modal-dialog-centered" role="document">
                     <div className="modal-content">
                         <div className="modal-header">
-                            <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
+                            <h5 className="modal-title" style={{fontSize: '18px'}} id="verticalCenterTitle">{productTitle}</h5>
                             <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
                         <div className="modal-body">
-                            <div className="" dangerouslySetInnerHTML={{__html: saleText}}/>
+                            <div style={{fontSize: '18px'}} className="" dangerouslySetInnerHTML={{__html: saleText}}/>
                             {/* {mutation.error &&
                             <>
                                 <div className="col-12">
@@ -162,8 +158,8 @@ export default function ProductStart(props){
                             )}
                         </div>
                         <div className="modal-footer">
-                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
-                            <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
+                            <button type="button" className="btn btn-primary" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'activating...' : 'Start Activation'}</button>
                         </div>
                     </div>
                 </div>

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,12 +1,15 @@
 import React, {memo, useState} from 'react'
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { pageSettings } from "../../../services/services";
 import SiteTemplateSelector from './SiteTemplateSelector';
 import NoYesBooleanDropdown from './NoYesBooleanDropdown';
 import { IoMdArrowDropdown } from 'react-icons/io';
+import queryKeys from '../../../services/queryKeys';
 
 const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
 
+    const queryClient = useQueryClient()
+
     const [reqStatus, setReqStatus] = useState({error: null, message: ''})
 
     const fieldData = {}
@@ -17,7 +20,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
     fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
     })
 
-    console.log('fieldData', fieldData)
+    // console.log('fieldData', fieldData)
 
     const [fields, setFields] = useState(fieldData)
     
@@ -41,6 +44,9 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
             setReqStatus({error: true, message: 'Unable to complete, try again later'})
         },
         onSettled: () => {
+            queryClient.refetchQueries({  // refetches productProvision API call
+                queryKey: [...queryKeys.settingsData],
+            })
             setTimeout(()=>{
                 setReqStatus({error: null, message: ''})
             },3000)

src/component/product/settingsTab/SiteTemplateSelector.jsx

@@ -1,14 +1,69 @@
 import React, {memo} from 'react'
 import getImage from "../../../utils/getImage";
+import { useQuery } from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import { getProductTemplateData } from '../../../services/services';
 
-const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
+const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
-        console.log("Page data == ", data)
+
+        const {data:templateData, isFetching, isError, error} = useQuery({
+            queryKey: queryKeys.productTemplateData,
+            queryFn: () => {
+                let reqData = {
+                    token: localStorage.getItem('token'), // USER TOKEN
+                    uid: localStorage.getItem('uid'), // USER UID
+                    product_id: productData?.product_id
+                }
+            return getProductTemplateData(reqData)
+            },
+            staleTime: 0
+        })
+
+        const templateResponse = templateData?.data
+        const templates = templateResponse?.templates
+
+        // console.log('data Template', templates)
+        // console.log("Page data == ", data)
         return (
             <div className="page-account-form">
                 <div className="p-0">
+                    {isFetching ? 
+                    <>
+                        <div className="row">
+                            <div className="col-12">
+                                <p className='text-mute'>Loading...</p>
+                            </div>
+                        </div>
+                    </>
+                    : isError ?
+                    <div className="row">
+                        <div className="col-12">
+                            <p className='text-danger'>{error?.message}</p>
+                        </div>
+                    </div>
+                    :
                     <div className="row">
                         <>
-                            {Object.entries(data)?.map(([key, value]) => (
+                        {!templates.length ?
+                            <p>No data Found</p>
+                            :
+                            templates.map(template => (
+                                <div key={template.template_uid} className="col-xl-6 col-sm-6">
+                                    <div className="card card-statistics">
+                                        <div className="card-body">
+                                            <div className="text-center p-2">
+                                                <div className="mb-2">
+                                                    <img  src={getImage('file-icon/svg.png')} alt={template.title} />
+                                                </div>
+                                                <h4 className="mb-0">{template.title}</h4>
+                                                <a href="#" className="btn btn-light">Activate</a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                            {/* {Object.entries(data)?.map(([key, value]) => (
                                 <div key={key} className="col-xl-6 col-sm-6">
                                     <div className="card card-statistics">
                                         <div className="card-body">
@@ -22,9 +77,10 @@ const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
                                         </div>
                                     </div>
                                 </div>
-                            ))}
+                            ))} */}
                         </>
                     </div>
+                    }
                 </div>
             </div>
         )

src/component/profile_complete/ProfileCompleteCom.jsx

@@ -1,67 +1,109 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
-import { useLocation } from "react-router-dom";
+// import { useLocation } from "react-router-dom";
-import { Form, Formik } from "formik";
+// import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import getImage from "../../utils/getImage";
 import { IoMdArrowDropdown } from "react-icons/io";
 import { completeProfile, getCommonPractice } from '../../services/services';
+import siteLinks from "../../links/siteLinks";
+import { useLocation, useNavigate } from "react-router-dom";
+import { updateUserDetails } from "../../store/UserDetails";
+import { useDispatch } from "react-redux";
 
 
-const validationSchema = Yup.object().shape({
+// const validationSchema = Yup.object().shape({
-    practice: Yup.string().required("Required"),
+//     practice: Yup.string().required("Required"),
-    specialization: Yup.string().required("Required"),
+//     specialization: Yup.string().required("Required"),
-    introduction: Yup.string().min(1, "Minimum 10 characters").max(50, "Maximum 50 characters").required("Required"),
+//     introduction: Yup.string().min(1, "Minimum 10 characters").max(50, "Maximum 50 characters").required("Required"),
-  })
+// })
 
-  const initialValues = {
+//   const initialValues = {
-    practice: '',
+//     practice: '',
-    specialization: '',
+//     specialization: '',
-    introduction: '',
+//     introduction: '',
-  };
+//   };
 
 
 export default function ProfileCompleteCom(){
 
-    const [practices, setPractices] = useState({practice: [], specialization: []})
+    const dispatch = useDispatch()
+
+    const navigate = useNavigate()
+
+    const {state:{redirectLink}} = useLocation()
+
+    const [practices, setPractices] = useState([])
+    
+    const [initialValues, setInitialValues] = useState({
+        practice: '',
+        specialization: '',
+        introduction: '',
+    })
+
+    const specialties = useMemo(()=>{ // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
+        setInitialValues(prev => ({...prev, specialization: ''}))
+        if(!initialValues.practice){
+            return []
+        }
+        const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties
+        return specialtiesArr
+    },[initialValues.practice])
 
-    const {state:{profile_completed}} = useLocation()
 
     const mutation = useMutation({
         mutationFn: (fields) => {
+            const {practice, specialization} = fields
+            if(!practice || !specialization){
+                throw new Error('Please select both practice and specialization fields')
+            }
             return completeProfile(fields)
         },
+        onError: () => {
+            setTimeout(()=>{mutation.reset()}, 4000)
+        },
         onSuccess: (res) => {
-            console.log('res', res)
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription})
+            }
+            dispatch(updateUserDetails({profile_completed: res?.data?.profile_completed }));
+            setTimeout(()=>{
+                navigate(redirectLink)
+            },2000)
+            // console.log('res', res)
         }
     })
 
-    const handleCompleteProfile = (values, helpers) => {
-    // helpers.resetForm()
-    let reqData = {
-        token: localStorage.getItem('token'), // USER TOKEN
-        uid: localStorage.getItem('uid'), // USER UID
-        // ...values
-    }
-    console.log('values', values, helpers)
-    // mutation.mutate(reqData)
-    }
-
     const commonPractices = useMutation({ // FUNCTION TO GET COMMON PRACTICES
         mutationFn: (fields) => {
             return getCommonPractice(fields)
         },
         onError: ()=> {
-            setPractices({practice: [], specialization: []})
+            setPractices([])
         },
         onSuccess: (res) => {
-            let returnPractices = []
+            if(!res?.data){
-            let returnSpecialization = []
+                return setPractices([])
-            setPractices(res)
+            }
+            let returnPractices = Object.entries(res?.data).filter(([key, value]) => typeof value == 'object')?.map(item => item[1])
+            setPractices(returnPractices)
         }
     })
 
+    const handlePracticeChange = ({target:{name, value}}) => {
+        setInitialValues(prev => ({...prev, [name]:value}))
+    }
+
+    const handleCompleteProfile = () => { // FUNCTION TO COMPLETE PROFILE
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            ...initialValues
+        }
+        mutation.mutate(reqData)
+    }
+
     useEffect(()=>{
         let reqData = {
             token: localStorage.getItem('token'), // USER TOKEN
@@ -70,11 +112,9 @@ export default function ProfileCompleteCom(){
         commonPractices.mutate(reqData)
     },[])
 
-    console.log('practices', practices)
-
     return <>
 
-        <BreadcrumbComBS title='Update Profile' paths={['Dashboard', 'Profile']} />
+        <BreadcrumbComBS title='Tell us more about your practice.' paths={['Dashboard', 'Profile']} />
 
         {commonPractices?.isFetching ?
             <>
@@ -101,67 +141,67 @@ export default function ProfileCompleteCom(){
                         </div> */}
                         {/* <div style={{minHeight: '400px'}}></div> */}
                         <div className="card-body">
-                            <Formik
+                            <div className='h-100 row flex-column'>
-                                initialValues={initialValues}
+                                {/* <div className="row"> */}
-                                validationSchema={validationSchema}
+                                    <>
-                                onSubmit={handleCompleteProfile}
+                                        <div className="">
-                            >
+                                            <div className="form-group position-relative">
-                                {(props) => {
+                                                <label className={`text-black fw-bold control-label`}>Practice :</label>
-                                return (
+                                                <div className="position-relative">    
-                                    <Form className='h-100 row flex-column'>
+                                                    {/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
-                                        {/* <div className="row"> */}
+                                                        <option value=''>Select</option>
+                                                        {practices.map((practice, index)=>(
+                                                            <option key={index} value={practice.practice}>{practice.practice}</option>
+                                                        ))}
+                                                    </select> */}
+                                                    <select onChange={handlePracticeChange} name='practice' value={initialValues.practice} className="form-control">
+                                                        <option value=''>Select</option>
+                                                        {practices.map((practice, index)=>(
+                                                            <option key={index} value={practice.practice}>{practice.practice}</option>
+                                                        ))}
+                                                    </select>
+                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> 
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div className="">
+                                            <div className="form-group">
+                                                <label className={`text-black fw-bold control-label`}>Specialization :</label>
+                                                <div className="position-relative">
+                                                    <select onChange={handlePracticeChange} name='specialization' value={initialValues.specialization} className="form-control">
+                                                        <option value=''>Select</option>
+                                                        {specialties.map((specialty, index)=>(
+                                                            <option key={index} value={specialty}>{specialty}</option>
+                                                        ))}
+                                                    </select>
+                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> 
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div className="">
+                                            <div className="form-group position-relative">
+                                                <label className={`text-black fw-bold control-label`}>General Information :</label>
+                                                <textarea name='introduction' rows={10} style={{resize: 'none'}} className="form-control" value={initialValues.introduction} onChange={handlePracticeChange} />
+                                            </div>
+                                        </div>
+                        
+
+                                        {(mutation.isError || mutation.isSuccess) &&
                                             <>
-                                                <div className="">
+                                            <div className="">
-                                                    <div className="form-group position-relative">
+                                                <p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
-                                                        <label className={`text-black fw-bold control-label ${(props.errors.practice && props.touched.practice) && 'text-danger'}`}>Practice :</label>
+                                            </div>
-                                                        <div className="position-relative">    
-                                                            <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
-                                                                <option value=''>Select</option>
-                                                                <option value='engineering'>Engineering</option>
-                                                            </select>
-                                                            <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> 
-                                                        </div>
-                                                    </div>
-                                                </div>
-
-                                                <div className="">
-                                                    <div className="form-group">
-                                                        <label className={`text-black fw-bold control-label ${(props.errors.specialization && props.touched.specialization) && 'text-danger'}`}>Specialization :</label>
-                                                        <div className="position-relative">
-                                                            <select onChange={props.handleChange} name='specialization' value={props.values.specialization} className="form-control">
-                                                                <option value=''>Select</option>
-                                                                <option value='construction'>Construction</option>
-                                                            </select>
-                                                            <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} /> 
-                                                        </div>
-                                                    </div>
-                                                </div>
-
-                                                <div className="">
-                                                    <div className="form-group position-relative">
-                                                        <label className={`text-black fw-bold control-label ${(props.errors.introduction && props.touched.introduction) && 'text-danger'}`}>General Information :</label>
-                                                        <textarea name='introduction' rows={10} style={{resize: 'none'}} className="form-control" value={props.values.introduction} onChange={props.handleChange} />
-                                                    </div>
-                                                </div>
-                                
-
-                                                {/* {(mutation.isError || mutation.isSuccess) &&
-                                                    <>
-                                                    <div className="col-12">
-                                                        <p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully' : mutation.error.message}</p>
-                                                    </div>
-                                                    </>
-                                                } */}
-
-                                                <div className="mt-auto text-end">
-                                                    <button type='submit' className="btn btn-primary text-uppercase">{false ? 'loading...' : 'Continue'}</button>
-                                                </div>
                                             </>
-                                        {/* </div> */}
+                                        }
-                                    </Form>
+
-                                );
+                                        <div className="mt-auto text-end">
-                                }}
+                                            <button type='button' onClick={handleCompleteProfile} className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
-                            </Formik>
+                                        </div>
+                                    </>
+                                {/* </div> */}
+                            </div>
                         </div>
                     </div>
                 </div>

src/component/subscribe/StripeSubscriptionButton.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+import {MyProductData, StripeSubscriptionCreate} from '../../services/services';
+import {useQuery} from "@tanstack/react-query";
+import queryKeys from "../../services/queryKeys";
+import { useNavigate } from 'react-router-dom';
+//const stripePromise = loadStripe('your_stripe_publishable_key');
+const stripePromise = loadStripe('pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT');
+
+const CheckoutForm = ({ priceId, customerId ,option_name }) => {
+    const stripe = useStripe();
+    const elements = useElements();
+    const navigate = useNavigate();
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+
+        if (!stripe || !elements) {
+            return;
+        }
+
+        let reqData = {
+            priceId : priceId,
+            customerId: customerId,
+            option_name: option_name,
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid') // USER UID
+        }
+
+        StripeSubscriptionCreate(reqData).then( (res)=>{
+            console.log(res);
+            console.log(res.data.stripe_session);
+            //navigate(res.data.stripe_session)
+            window.location.replace(res.data.stripe_session);
+        });
+
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <CardElement />
+            <button type="submit" disabled={!stripe}>
+                Subscribe
+            </button>
+        </form>
+    );
+};
+
+const StripeSubscriptionButton = ({ priceId, customerId ,option_name}) => {
+    return (
+        <Elements stripe={stripePromise}>
+            <CheckoutForm priceId={priceId} customerId={customerId} option_name={option_name} />
+        </Elements>
+    );
+};
+
+export default StripeSubscriptionButton;

src/component/subscribe/SubcribePaymentOptions.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+export default function SubcribePaymentOptions({activePaymentType, setActivePaymentType}){
+
+    const handleSwitch = ({target:{name, value}}) => {
+        console.log('SWITCH', name, value)
+        setActivePaymentType(value)
+    }
+
+    return <>
+
+
+                <div className="card-header">
+                    <div className="card-heading">
+                        <h4 className="card-title">Select Payment Option</h4>
+                    </div>
+                </div>
+                <div className="card-body">
+
+                    <div className="form-check form-check-inline">
+                        <input onChange={handleSwitch} className="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
+                               value="previous" checked={activePaymentType == 'previous'} />
+                            <label className="form-check-label" htmlFor="inlineRadio1">Previous Cards</label>
+                    </div>
+                    <div className="form-check form-check-inline">
+                        <input onChange={handleSwitch} className="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
+                               value="new" checked={activePaymentType == 'new'} />
+                            <label className="form-check-label" htmlFor="inlineRadio2">Add New card</label>
+                    </div>
+                </div>
+                {/*<div className="card card-statistics"> </div>*/}
+
+    </>
+
+}

src/component/subscribe/Subscribe.jsx

@@ -0,0 +1,72 @@
+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";
+
+
+
+
+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/>
+                                }
+                                <>
+                                    <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>
+        </>
+    )
+}

src/component/subscribe/SubscribeNewCard.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+export default function SubscribeNewCard(){
+
+    return <>
+        <div className="row">
+            <div className="col-md-12 col-12 selects-contant">
+                <div className="card card-statistics">
+                    <div className="card-header">
+                        <div className="card-heading" style={{textAlign: 'left'}}>
+                            <h4 className="card-title">Pay with New Card</h4>
+                        </div>
+                    </div>
+                    <div className="card-body">
+                        <div className="form-group mb-0">
+
+
+
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+    </>
+
+}

src/component/subscribe/SubscribePreviousCard.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { IoMdArrowDropdown } from 'react-icons/io'
+
+export default function SubscribePreviousCard() {
+
+    return <>
+        {/*<div className="row select-wrapper">*/}
+        {/*    <div className="col-md-12 col-12 selects-contant">*/}
+                <div className="row">
+                    <div className="col-md-12 col-12 selects-contant">
+                        <div className="card card-statistics">
+                            <div className="card-header">
+                                <div className="card-heading" style={{textAlign: 'left'}}>
+                                    <h4 className="card-title">Pay with Previous Card</h4>
+                                </div>
+                            </div>
+                            <div className="card-body">
+                                <div className="position-relative form-group mb-0">
+                                    <select className="js-basic-single form-control" name="state">
+                                        <option value="AK">Visa xxxx xxxx xxxx 1234</option>
+                                        <option value="HI">Mastercard xxxx xxxx xxxx 1234</option>
+                                    </select>
+                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />                                               
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+            {/*    </div>*/}
+            {/*</div>*/}
+        </div>
+
+
+    </>
+
+}

src/component/subscription/Subscription.jsx

@@ -1,16 +1,19 @@
 import React from 'react'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 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 siteLinks from "../../links/siteLinks";
+import {Link, useNavigate} from 'react-router-dom'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
 
 export default function Subscription() {
-
+    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({
@@ -26,63 +29,75 @@ export default function Subscription() {
 
     const currentSubscription = data?.data?.current_product
     const otherSubscriptions = data?.data?.options
-    console.log('urlData', data?.data)
+    const stripe_customer_id = data?.data.stripe_customer_id
+
+    // console.log('urlData', data?.data)
 
     return (
         <>
-            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
+            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']}/>
-
-        {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-3">
-                    <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>
-                            </div>
-                        </div>
-                    </div>
-                </div>
 
+            {isFetching ?
                 <>
-                    {Object.entries(otherSubscriptions)?.map(([key, value]) => (
+                    <div className="col-12">
-
+                        <p className='text-mute'>Loading...</p>
-                    <div key={key} className="col-12 col-lg-6 col-xl-3">
+                    </div>
-                        <div className="card card-statistics text-center py-3">
+                </>
-                            <div className="card-body pricing-content">
+                : isError ?
-                                <div className="pricing-content-card">
+                    <div className="col-12">
-                                    <h5>{value.display_name}</h5>
+                        <p className='text-danger'>{error.message}</p>
-                                    <h2 className="text-primary pt-3">${value.monthly}</h2>
+                    </div>
-                                    <p className="text-primary pb-3">/ Monthly</p>
+                    :
-                                        <ul className="py-2">
+                    <div className="row">
-                                            {value?.items?.map(item =>(
+                        <div className="col-12 col-lg-6 col-xl-3">
-                                            <li key={item}>{item}</li>
+                            <div className="card card-statistics text-center py-3" style={{backgroundColor: '#e6f5f4'}}>
-                                            ))}
+                                <div className="card-body pricing-content">
-                                        </ul>
+                                    <div className="pricing-content-card" style={{minHeight: '350px'}}>
-                                    <div className="pt-2">
+                                        <h5>Your Subscription(s)</h5>
-                                        <button className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
+                                        <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
+                                    </div>
+                                    <div className="pt-2" style={{textAlign: 'left'}}>
+                                        <div style={{fontSize: '10px'}}>
+                                            Next Payment: {getDateFromDateString(currentSubscription?.next_payment)}
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
+
+                        <>
+                            {Object.entries(otherSubscriptions)?.map(([key, value]) => (
+
+                                <div key={key} className="col-12 col-lg-6 col-xl-3">
+                                    <div className="card card-statistics text-center py-3">
+                                        <div className="card-body pricing-content">
+                                            <div className="pricing-content-card" style={{minHeight: '350px'}}>
+                                                <h5>{value.display_name}</h5>
+                                                <h2 className="text-primary pt-3">${value.monthly}</h2>
+                                                <p className="text-primary pb-3">/ Monthly</p>
+                                                <ol className="py-2"
+                                                    style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
+                                                    {value?.items?.map(item => (
+                                                        <li key={item.description}>{item.description}</li>
+                                                    ))}
+                                                </ol>
+
+                                            </div>
+                                        </div>
+                                        <div className="pt-2">
+                                            <button onClick={() => {
+                                                navigate(siteLinks.subscribe, {state: {selectedSubscription: value, customerId: stripe_customer_id }})
+                                            }}
+                                                    className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            ))}
+                        </>
+
                     </div>
-
+            }
-                    ))}
-                </>
-
-            </div>
-        }
         </>
     )
-}
+}

src/helpers/GetDateFromDateString.js

@@ -0,0 +1,33 @@
+function getDateFromDateString(dateString) {
+  const date = new Date(dateString);
+
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
+                  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+  const dayName = days[date.getDay()];
+  const monthName = months[date.getMonth()];
+  const day = date.getDate();
+  const year = date.getFullYear();
+
+  // Add ordinal suffix
+  function getOrdinal(n) {
+    if (n > 3 && n < 21) return "th"; // 4-20 are all "th"
+    switch (n % 10) {
+      case 1: return "st";
+      case 2: return "nd";
+      case 3: return "rd";
+      default: return "th";
+    }
+  }
+
+  // Format time in 12hr with AM/PM
+  let hours = date.getHours();
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const ampm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12 || 12;
+
+  return `${dayName}, ${monthName} ${day}${getOrdinal(day)} ${year} ${hours}:${minutes}${ampm}`;
+}
+
+export default getDateFromDateString

src/links/siteLinks.js

@@ -9,6 +9,8 @@ const siteLinks = {
     comments: '/comments',
     reports: '/reports',
     subscription: '/subscription',
+    subscription_success:'/subscription-success',
+    subscribe: '/subscribe',
     onboard: '/subscription',
     user: '/user',
     calendar: '/calendar',

src/services/queryKeys.js

@@ -6,6 +6,7 @@ const queryKeys = {
     product_page: ['product_page'],
     recentAction: ['recent-action'],
     settingsData: ['settings_data'],
+    productTemplateData: ['product_template_data'],
     subscriptions: ['subscriptions'],
     
     dashboard: ['dashboard'],

src/services/services.js

@@ -83,6 +83,13 @@ export const MyProductData = (reqData) => {
     return postAuxEnd(`/panel/myproduct/dash`, postData, false)
 }
 
+export const StripeSubscriptionCreate = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/subscription/start`, postData, false)
+}
+
 // FUNCTION TO GET CALENDAR EVENTS
 export const getCalendarEvents = (reqData) => {
     let postData = {
@@ -166,6 +173,14 @@ export const getSettingsData = (reqData) => {
     return postAuxEnd(`/panel/myproduct/settings/values`, postData, false)
 }
 
+// FUNCTION TO GET SETTINGS DATA
+export const getProductTemplateData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/templates`, postData, false)
+}
+
 // FUNCTION TO GET PRODUCT SUBSCRIPTIONS
 export const completeProfile = (reqData) => {
     let postData = {

src/views/ProductPage.jsx

@@ -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}})
         }
     },[])
     

src/views/Subscribe.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+//import Signup2 from '../component/auth/Signup2'
+import Subscribe from '../component/subscribe/Subscribe'
+
+export default function SubscribePage() {
+    return (
+        <Subscribe />
+    )
+}