gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

franchisee edit

Browse Source
This commit is contained in:
pawan-dot 2023-02-09 18:05:02 +05:30
parent 46ed77392a
commit ba5f9d1826
10 changed files with 949 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_nav.js
View File

@ -52,7 +52,7 @@ const _nav = [
component: CNavItem, component: CNavItem,
name: 'Franchisee', name: 'Franchisee',
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />, icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
to: '/temples', to: '/franchisees',
}, },
{ {
component: CNavGroup, component: CNavGroup,

18
src/routes.js
View File

@ -22,10 +22,10 @@ import Socialmedia from './views/configuration/Socialmedia.js'
import Address from './views/configuration/Address.js' import Address from './views/configuration/Address.js'
import Logo from './views/configuration/Logo.js' import Logo from './views/configuration/Logo.js'
import Login from './views/pages/login/Login' import Login from './views/pages/login/Login'
//temple //Franchisees
import Temples from './views/Temples/Temples' import Franchisees from './views/Temples/Franchisees'
import AddTemple from './views/Temples/AddTemple' import AddFranchisee from './views/Temples/AddFranchisee'
import EditTemple from './views/Temples/EditTemple' import EditFranchisee from './views/Temples/EditFranchisee'
import Products from './views/Products/Products' import Products from './views/Products/Products'
//product //product
import AddProduct from './views/Products/AddProduct' import AddProduct from './views/Products/AddProduct'
@ -46,6 +46,8 @@ import Tax from './views/configuration/tax/Tax'
import Addtax from './views/configuration/tax/Addtax' import Addtax from './views/configuration/tax/Addtax'
import Edittax from './views/configuration/tax/Edittax' import Edittax from './views/configuration/tax/Edittax'
import EditOrder from './views/orders/EditOrder' import EditOrder from './views/orders/EditOrder'
import ViewOrders from './views/orders/ViewOrders'
const routes = [ const routes = [
{ path: '/', exact: true, name: 'Home' }, { path: '/', exact: true, name: 'Home' },
@ -65,7 +67,7 @@ const routes = [
{ path: '/orders/new', name: 'New Orders', element: NewOrders }, { path: '/orders/new', name: 'New Orders', element: NewOrders },
{ path: '/order/add', name: 'add Order', element: AddOrder }, { path: '/order/add', name: 'add Order', element: AddOrder },
{ path: '/orders/edit/:id', name: 'Edit Order', element: EditOrder }, { path: '/orders/edit/:id', name: 'Edit Order', element: EditOrder },
//{ path: '/orders/view/:id', name: 'Edit Order', element: EditOrder }, { path: '/orders/view/:id', name: 'View Order', element: ViewOrders },
// { path: '/orders/processing', name: 'Processing Orders', element: ProcessingOrders }, // { path: '/orders/processing', name: 'Processing Orders', element: ProcessingOrders },
// { path: '/orders/dispatched', name: 'Dispatched Orders', element: DispatchedOrders }, // { path: '/orders/dispatched', name: 'Dispatched Orders', element: DispatchedOrders },
@ -76,9 +78,9 @@ const routes = [
//Temple //Temple
{ path: '/temples', name: 'Temples', element: Temples }, { path: '/franchisees', name: 'Franchisees', element: Franchisees },
{ path: '/temple/add', name: 'Add Temple', element: AddTemple }, { path: '/franchisee/add', name: 'Add Franchisee', element: AddFranchisee },
{ path: '/temple/edit/:id', name: 'Edit Temples', element: EditTemple }, { path: '/franchisee/edit/:id', name: 'Edit Franchisee', element: EditFranchisee },
//dashboard //dashboard

2
src/views/Products/AddProduct.js
View File

@ -440,7 +440,7 @@ const AddProduct = () => {
</label> <select className=" form-control" name="" id="" </label> <select className=" form-control" name="" id=""
onChange={(e) => TaxRatechange(e)} onChange={(e) => TaxRatechange(e)}
> >
<option value="" disabled>---</option> <option value="" disabled>-----</option>
{allTax.map((t, i) => {allTax.map((t, i) =>
<option key={i} value={`tax:${t.tax},name:${t.name} ,taxId:${t._id}`}>{t.tax}% {t.name}</option> <option key={i} value={`tax:${t.tax},name:${t.name} ,taxId:${t._id}`}>{t.tax}% {t.name}</option>

229
src/views/Temples/EditTemple.js → src/views/Temples/AddFranchisee.js
View File

@ -1,45 +1,47 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Button from '@material-ui/core/Button' import Button from '@material-ui/core/Button'
import { Link, useNavigate, useParams } from 'react-router-dom' import { Link, useNavigate } from 'react-router-dom'
import swal from 'sweetalert' import swal from 'sweetalert'
import axios from 'axios' import axios from 'axios'
import { isAutheticated } from 'src/auth' import { isAutheticated } from 'src/auth'
// import { WebsiteURL } from '../WebsiteURL'
const EditTemple = () => { const AddFranchisee = () => {
const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/') const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/')
const id = useParams()?.id
const token = isAutheticated() const token = isAutheticated()
const navigate = useNavigate() const navigate = useNavigate()
const [data, setData] = useState({ const [data, setData] = useState({
image: '', image: '',
imageURL: '', imageURL: '',
name: '', name: '',
email: '',
address_line_1: '', address_line_1: '',
address_line_2: '', address_line_2: '',
contact_Person_Name: '',
contact_Number: '',
price_Lable: '',
city: '', city: '',
state_name: '', state_name: '',
short_url: '', short_url: '',
// pan: '', contact_Number: '',
// business_name: '', contact_Person_Name: '',
// gstin: '', price_Lable: '',
// option: '', pin_Code: ''
}) })
const [cities, setCities] = useState([]) const [cities, setCities] = useState([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [validForm, setValidForm] = useState(false)
const [limiter, setLimiter] = useState({ const [limiter, setLimiter] = useState({
name: 100, name: 100,
nameHas: 100, nameHas: 100,
}) })
const getRequired = async () => { const getRequired = () => {
await axios axios
.get(`/api/city`, { .get(`/api/city`, {
headers: { headers: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
@ -50,36 +52,70 @@ const EditTemple = () => {
setCities([...res.data.data]) setCities([...res.data.data])
}) })
.catch((err) => { }) .catch((err) => { })
axios
.get(`/api/Temple/withoutpopulate/${id}`, {
headers: {
'Access-Control-Allow-Origin': '*',
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setData((prev) => ({
...prev,
...res.data?.data,
city: res.data?.data?.city,
imageURL: res.data?.data?.banner?.url,
}))
setLimiter((prev) => ({ ...prev, nameHas: prev.name - res.data?.data?.name?.length || 0 }))
})
.catch((err) => { })
} }
useEffect(() => { useEffect(() => {
getRequired() getRequired()
}, []) }, [])
const [errors, setErrors] = useState({
emailError: '',
})
const validEmailRegex = RegExp(
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
)
const validateForm = () => {
let valid = true
Object.values(errors).forEach((val) => {
if (val.length > 0) {
valid = false
return false
}
})
Object.values(data.email).forEach((val) => {
if (val.length <= 0) {
valid = false
return false
}
})
return valid
}
//cheking email and password
useEffect(() => { useEffect(() => {
const setStateName = () => { if (validateForm()) {
const city = cities.filter((m) => data.city === m?._id) setValidForm(true)
setData((prev) => ({ ...prev, state_name: city[0]?.state?.state_name || '' })) } else {
setValidForm(false)
} }
setStateName() }, [errors])
}, [data.city]) // const handleChange = (e) => {
// const { name, value } = e.target
// switch (name) {
// case 'email':
// setErrors({
// ...errors,
// emailError: validEmailRegex.test(value) ? '' : 'Email is not valid!',
// })
// break
// case 'password':
// setErrors((errors) => ({
// ...errors,
// passwordError: validPasswordRegex.test(value)
// ? ''
// : 'Password Shoud Be 8 Characters Long, Atleast One Uppercase, Atleast One Lowercase,Atleast One Digit, Atleast One Special Character',
// }))
// break
// default:
// break
// }
// setAuth({ ...auth, [name]: value })
// }
const handleChange = (e) => { const handleChange = (e) => {
if (e.target.id === 'name') { if (e.target.id === 'name') {
@ -88,7 +124,19 @@ const EditTemple = () => {
...prev, ...prev,
[e.target.id + 'Has']: prev[e.target.id] - e.target.value.length, [e.target.id + 'Has']: prev[e.target.id] - e.target.value.length,
})) }))
// setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') })) setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
}
if (e.target.id === 'email') {
setErrors({
...errors,
emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
})
}
if (e.target.id === 'city') {
const city = cities.filter((m) => e.target.value === m?._id)
setData((prev) => ({ ...prev, state_name: city[0]?.state?.state_name || '' }))
} }
if (e.target.id === 'image') { if (e.target.id === 'image') {
if ( if (
@ -125,14 +173,18 @@ const EditTemple = () => {
const handleSubmit = () => { const handleSubmit = () => {
if ( if (
data.name.trim() === '' || data.name.trim() === '' ||
data.email.trim() === '' ||
data.contact_Number === '' ||
data.contact_Person_Name === '' ||
data.address_line_1.trim() === '' || data.address_line_1.trim() === '' ||
data.address_line_2.trim() === '' || data.address_line_2.trim() === '' ||
data.price_Lable.trim() === '' || data.price_Lable.trim() === '' ||
data.contact_Number === '' ||
data.contact_Person_Name === '' ||
data.city === '' || data.city === '' ||
data.pin_Code.trim() === '' ||
data.short_url === '' || data.short_url === '' ||
data.state_name === '' data.state_name === '' ||
data.imageURL.trim() === ''
) { ) {
swal({ swal({
title: 'Warning', title: 'Warning',
@ -146,24 +198,23 @@ const EditTemple = () => {
setLoading(true) setLoading(true)
const formData = new FormData() const formData = new FormData()
formData.set('name', data.name) formData.set('name', data.name)
// formData.set('pan', data.pan) formData.set('email', data.email)
// formData.set('business_name', data.business_name)
// formData.set('gstin', data.gstin)
// formData.set('option', data.option)
formData.set('address_line_1', data.address_line_1) formData.set('address_line_1', data.address_line_1)
formData.set('address_line_2', data.address_line_2) formData.set('address_line_2', data.address_line_2)
formData.set('city', data.city) formData.set('city', data.city)
formData.set('price_Lable', data.price_Lable)
formData.set('state_name', data.state_name) formData.set('state_name', data.state_name)
formData.set('contact_Number', data.contact_Number) formData.set('contact_Number', data.contact_Number)
formData.set('contact_Person_Name', data.contact_Person_Name) formData.set('contact_Person_Name', data.contact_Person_Name)
formData.set('price_Lable', data.price_Lable)
formData.set('pin_Code', data.pin_Code)
formData.set('url', WebsiteURL + data.short_url + '/login') formData.set('url', WebsiteURL + data.short_url + '/login')
formData.set('short_url', data.short_url) formData.set('short_url', data.short_url)
formData.append('image', data.image) formData.append('image', data.image)
axios axios
.patch(`/api/Temple/${id}`, formData, { .post(`/api/franchisee/`, formData, {
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/formdata', 'Content-Type': 'multipart/formdata',
@ -172,13 +223,13 @@ const EditTemple = () => {
}) })
.then((res) => { .then((res) => {
swal({ swal({
title: 'Updated', title: 'Added',
text: 'Temple updated successfully!', text: res?.data?.message ? res?.data?.message : 'Franchisee added successfully!',
icon: 'success', icon: 'success',
button: 'Return', button: 'Return',
}) })
setLoading(false) setLoading(false)
navigate('/temples', { replace: true }) navigate('/franchisees', { replace: true })
}) })
.catch((err) => { .catch((err) => {
setLoading(false) setLoading(false)
@ -206,7 +257,7 @@ const EditTemple = () => {
" "
> >
<div style={{ fontSize: '22px' }} className="fw-bold"> <div style={{ fontSize: '22px' }} className="fw-bold">
Edit Franchisee Add Franchisee
</div> </div>
<div style={{ display: 'flex', gap: '1rem' }}> <div style={{ display: 'flex', gap: '1rem' }}>
<h4 className="mb-0"></h4> <h4 className="mb-0"></h4>
@ -225,9 +276,9 @@ const EditTemple = () => {
onClick={() => handleSubmit()} onClick={() => handleSubmit()}
disabled={loading} disabled={loading}
> >
{loading ? 'Loading' : 'Update'} {loading ? 'Loading' : 'Save'}
</Button> </Button>
<Link to="/temples"> <Link to="/franchisees">
<Button <Button
variant="contained" variant="contained"
color="secondary" color="secondary"
@ -244,9 +295,8 @@ const EditTemple = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-6 my-1"> <div className="col-sm-12 col-md-12 col-lg-6 my-1">
<div className="card h-100"> <div className="card h-100">
<div className="card-body px-5"> <div className="card-body px-5">
<div className="mb-3"> <div className="mb-3">
@ -263,19 +313,24 @@ const EditTemple = () => {
/> />
<p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p> <p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p>
</div> </div>
{/* <div className="mb-3">
<div className="mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
PAN* Email *
</label> </label>
<input <input
type="text" type="email"
className="form-control" className="form-control"
id="pan" id="email"
value={data.pan} value={data.email}
maxLength="50" maxLength="50"
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
/> />
</div> */} {errors.emailError && (
<p className="text-center py-2 text-danger">{errors.emailError}</p>
)}
</div>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
Address Line 1* Address Line 1*
@ -302,32 +357,7 @@ const EditTemple = () => {
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
/> />
</div> </div>
{/* <div className="mb-3">
<label htmlFor="title" className="form-label">
Business Name*
</label>
<input
type="text"
className="form-control"
id="business_name"
value={data.business_name}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
GSTIN*
</label>
<input
type="text"
className="form-control"
id="gstin"
value={data.gstin}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
</div> */}
<div className="mb-3"> <div className="mb-3">
<label htmlFor="pageToLink" className="form-label"> <label htmlFor="pageToLink" className="form-label">
City* City*
@ -364,10 +394,27 @@ const EditTemple = () => {
disabled disabled
/> />
</div> </div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Pin Code *
</label>
<input
type="Number"
className="form-control"
id="pin_Code"
value={data.pin_Code}
maxLength={8}
onChange={(e) => handleChange(e)}
/>
{/* {data.pin_Code ? <><small className="charLeft mt-4 fst-italic">
{8 - data.pin_Code.length} characters left
</small></> : <></>
} */}
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="col-6 my-1"> <div className="col-sm-12 col-md-12 col-lg-6 my-1">
<div className="card h-100"> <div className="card h-100">
<div className="card-body px-5"> <div className="card-body px-5">
@ -413,6 +460,7 @@ const EditTemple = () => {
/> />
</div> </div>
</div> </div>
<div className=" mb-3"> <div className=" mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
Price Lable* Price Lable*
@ -432,6 +480,7 @@ const EditTemple = () => {
</select> </select>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="image" className="form-label"> <label htmlFor="image" className="form-label">
Temple Banner* Temple Banner*
@ -460,4 +509,4 @@ const EditTemple = () => {
) )
} }
export default EditTemple export default AddFranchisee

239
src/views/Temples/AddTemple.js → src/views/Temples/EditFranchisee.js
View File

@ -1,22 +1,24 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Button from '@material-ui/core/Button' import Button from '@material-ui/core/Button'
import { Link, useNavigate } from 'react-router-dom' import { Link, useNavigate, useParams } from 'react-router-dom'
import swal from 'sweetalert' import swal from 'sweetalert'
import axios from 'axios' import axios from 'axios'
import { isAutheticated } from 'src/auth' import { isAutheticated } from 'src/auth'
// import { WebsiteURL } from '../WebsiteURL'
const AddTemple = () => { const EditFranchisee = () => {
const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/') const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/')
const id = useParams()?.id
const token = isAutheticated() const token = isAutheticated()
const navigate = useNavigate() const navigate = useNavigate()
const [data, setData] = useState({ const [data, setData] = useState({
image: '', image: '',
imageURL: '', imageURL: '',
name: '', name: '',
email: '',
address_line_1: '', address_line_1: '',
address_line_2: '', address_line_2: '',
city: '', city: '',
@ -24,19 +26,19 @@ const AddTemple = () => {
short_url: '', short_url: '',
contact_Number: '', contact_Number: '',
contact_Person_Name: '', contact_Person_Name: '',
price_Lable: '' price_Lable: '',
pin_Code: ''
}) })
const [cities, setCities] = useState([]) const [cities, setCities] = useState([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [validForm, setValidForm] = useState(false)
const [limiter, setLimiter] = useState({ const [limiter, setLimiter] = useState({
name: 100, name: 100,
nameHas: 100, nameHas: 100,
}) })
const getRequired = () => { const getRequired = async () => {
axios await axios
.get(`/api/city`, { .get(`/api/city`, {
headers: { headers: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
@ -47,12 +49,121 @@ const AddTemple = () => {
setCities([...res.data.data]) setCities([...res.data.data])
}) })
.catch((err) => { }) .catch((err) => { })
axios
.get(`/api/franchisee/withoutpopulate/${id}`, {
headers: {
'Access-Control-Allow-Origin': '*',
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setData((prev) => ({
...prev,
...res.data?.data,
city: res.data?.data?.city,
imageURL: res.data?.data?.banner?.url,
}))
setLimiter((prev) => ({ ...prev, nameHas: prev.name - res.data?.data?.name?.length || 0 }))
})
.catch((err) => { })
} }
useEffect(() => { useEffect(() => {
getRequired() getRequired()
}, []) }, [])
useEffect(() => {
const setStateName = () => {
const city = cities.filter((m) => data.city === m?._id)
setData((prev) => ({ ...prev, state_name: city[0]?.state?.state_name || '' }))
}
setStateName()
}, [data.city])
//validate
const [errors, setErrors] = useState({
emailError: '',
})
const validEmailRegex = RegExp(
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
)
const validateForm = () => {
let valid = true
Object.values(errors).forEach((val) => {
if (val.length > 0) {
valid = false
return false
}
})
Object.values(data.email).forEach((val) => {
if (val.length <= 0) {
valid = false
return false
}
})
return valid
}
//cheking email
useEffect(() => {
if (validateForm()) {
setValidForm(true)
} else {
setValidForm(false)
}
}, [errors])
// const handleChange = (e) => {
// if (e.target.id === 'name') {
// if (e.target.value.length === limiter[e.target.id] + 1) return
// setLimiter((prev) => ({
// ...prev,
// [e.target.id + 'Has']: prev[e.target.id] - e.target.value.length,
// }))
// if (e.target.id === 'email') {
// setErrors({
// ...errors,
// emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
// })
// }
// // setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
// }
// if (e.target.id === 'image') {
// if (
// e.target.files[0]?.type === 'image/jpeg' ||
// e.target.files[0]?.type === 'image/png' ||
// e.target.files[0]?.type === 'image/jpg'
// ) {
// setData((prev) => ({
// ...prev,
// imageURL: URL.createObjectURL(e.target.files[0]),
// image: e.target.files[0],
// }))
// return
// } else {
// swal({
// title: 'Warning',
// text: 'Upload jpg, jpeg, png only.',
// icon: 'error',
// button: 'Close',
// dangerMode: true,
// })
// setData((prev) => ({
// ...prev,
// imageURL: '',
// image: '',
// }))
// e.target.value = null
// return
// }
// }
// setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
// }
const handleChange = (e) => { const handleChange = (e) => {
if (e.target.id === 'name') { if (e.target.id === 'name') {
if (e.target.value.length === limiter[e.target.id] + 1) return if (e.target.value.length === limiter[e.target.id] + 1) return
@ -61,6 +172,14 @@ const AddTemple = () => {
[e.target.id + 'Has']: prev[e.target.id] - e.target.value.length, [e.target.id + 'Has']: prev[e.target.id] - e.target.value.length,
})) }))
setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') })) setData((prev) => ({ ...prev, short_url: e.target.value.toLowerCase().replace(/\s+/g, '-') }))
}
if (e.target.id === 'email') {
setErrors({
...errors,
emailError: validEmailRegex.test(e.target.value) ? '' : 'Email is not valid!',
})
} }
if (e.target.id === 'city') { if (e.target.id === 'city') {
const city = cities.filter((m) => e.target.value === m?._id) const city = cities.filter((m) => e.target.value === m?._id)
@ -101,8 +220,7 @@ const AddTemple = () => {
const handleSubmit = () => { const handleSubmit = () => {
if ( if (
data.name.trim() === '' || data.name.trim() === '' ||
data.email.trim() === '' ||
// data.pan.trim() === '' ||
data.contact_Number === '' || data.contact_Number === '' ||
data.contact_Person_Name === '' || data.contact_Person_Name === '' ||
@ -110,6 +228,7 @@ const AddTemple = () => {
data.address_line_2.trim() === '' || data.address_line_2.trim() === '' ||
data.price_Lable.trim() === '' || data.price_Lable.trim() === '' ||
data.city === '' || data.city === '' ||
data.pin_Code === '' ||
data.short_url === '' || data.short_url === '' ||
data.state_name === '' || data.state_name === '' ||
data.imageURL.trim() === '' data.imageURL.trim() === ''
@ -126,24 +245,23 @@ const AddTemple = () => {
setLoading(true) setLoading(true)
const formData = new FormData() const formData = new FormData()
formData.set('name', data.name) formData.set('name', data.name)
// formData.set('pan', data.pan) formData.set('email', data.email)
// formData.set('business_name', data.business_name)
// formData.set('gstin', data.gstin)
// formData.set('option', data.option)
formData.set('address_line_1', data.address_line_1) formData.set('address_line_1', data.address_line_1)
formData.set('address_line_2', data.address_line_2) formData.set('address_line_2', data.address_line_2)
formData.set('city', data.city) formData.set('city', data.city)
formData.set('price_Lable', data.price_Lable)
formData.set('state_name', data.state_name) formData.set('state_name', data.state_name)
formData.set('pin_Code', data.pin_Code)
formData.set('contact_Number', data.contact_Number) formData.set('contact_Number', data.contact_Number)
formData.set('contact_Person_Name', data.contact_Person_Name) formData.set('contact_Person_Name', data.contact_Person_Name)
formData.set('price_Lable', data.price_Lable)
formData.set('url', WebsiteURL + data.short_url + '/login') formData.set('url', WebsiteURL + data.short_url + '/login')
formData.set('short_url', data.short_url) formData.set('short_url', data.short_url)
formData.append('image', data.image) formData.append('image', data.image)
axios axios
.post(`/api/temple`, formData, { .patch(`/api/franchisee/${id}`, formData, {
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/formdata', 'Content-Type': 'multipart/formdata',
@ -152,13 +270,13 @@ const AddTemple = () => {
}) })
.then((res) => { .then((res) => {
swal({ swal({
title: 'Added', title: 'Updated',
text: 'Temple added successfully!', text: res?.data?.message ? res?.data?.message : 'franchisee updated successfully!',
icon: 'success', icon: 'success',
button: 'Return', button: 'Return',
}) })
setLoading(false) setLoading(false)
navigate('/temples', { replace: true }) navigate('/franchisees', { replace: true })
}) })
.catch((err) => { .catch((err) => {
setLoading(false) setLoading(false)
@ -186,7 +304,7 @@ const AddTemple = () => {
" "
> >
<div style={{ fontSize: '22px' }} className="fw-bold"> <div style={{ fontSize: '22px' }} className="fw-bold">
Add Franchisee Edit Franchisee
</div> </div>
<div style={{ display: 'flex', gap: '1rem' }}> <div style={{ display: 'flex', gap: '1rem' }}>
<h4 className="mb-0"></h4> <h4 className="mb-0"></h4>
@ -205,9 +323,9 @@ const AddTemple = () => {
onClick={() => handleSubmit()} onClick={() => handleSubmit()}
disabled={loading} disabled={loading}
> >
{loading ? 'Loading' : 'Save'} {loading ? 'Loading' : 'Update'}
</Button> </Button>
<Link to="/temples"> <Link to="/franchisees">
<Button <Button
variant="contained" variant="contained"
color="secondary" color="secondary"
@ -224,8 +342,9 @@ const AddTemple = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-sm-12 col-md-12 col-lg-6 my-1"> <div className="col-6 my-1">
<div className="card h-100"> <div className="card h-100">
<div className="card-body px-5"> <div className="card-body px-5">
<div className="mb-3"> <div className="mb-3">
@ -242,6 +361,22 @@ const AddTemple = () => {
/> />
<p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p> <p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p>
</div> </div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Email *
</label>
<input
type="email"
className="form-control"
id="email"
value={data.email}
onChange={(e) => handleChange(e)}
/>
{errors.emailError && (
<p className="text-center py-2 text-danger">{errors.emailError}</p>
)}
</div>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
@ -269,7 +404,32 @@ const AddTemple = () => {
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
/> />
</div> </div>
{/* <div className="mb-3">
<label htmlFor="title" className="form-label">
Business Name*
</label>
<input
type="text"
className="form-control"
id="business_name"
value={data.business_name}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
GSTIN*
</label>
<input
type="text"
className="form-control"
id="gstin"
value={data.gstin}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
</div> */}
<div className="mb-3"> <div className="mb-3">
<label htmlFor="pageToLink" className="form-label"> <label htmlFor="pageToLink" className="form-label">
City* City*
@ -306,10 +466,27 @@ const AddTemple = () => {
disabled disabled
/> />
</div> </div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Pin Code *
</label>
<input
type="Number"
className="form-control"
id="pin_Code"
value={data.pin_Code}
maxLength='8'
onChange={(e) => handleChange(e)}
/>
{/* {data.pin_Code ? <><small className="charLeft mt-4 fst-italic">
{8 - data.pin_Code.length} characters left
</small></> : <></>
} */}
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-12 col-md-12 col-lg-6 my-1"> <div className="col-6 my-1">
<div className="card h-100"> <div className="card h-100">
<div className="card-body px-5"> <div className="card-body px-5">
@ -355,7 +532,6 @@ const AddTemple = () => {
/> />
</div> </div>
</div> </div>
<div className=" mb-3"> <div className=" mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
Price Lable* Price Lable*
@ -375,10 +551,9 @@ const AddTemple = () => {
</select> </select>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="image" className="form-label"> <label htmlFor="image" className="form-label">
Temple Banner* franchisee Banner*
</label> </label>
<input <input
type="file" type="file"
@ -404,4 +579,4 @@ const AddTemple = () => {
) )
} }
export default AddTemple export default EditFranchisee

46
src/views/Temples/Temples.js → src/views/Temples/Franchisees.js
View File

@ -8,15 +8,15 @@ import swal from 'sweetalert'
import OverLayButton from './OverLayButton.js' import OverLayButton from './OverLayButton.js'
import { isAutheticated } from 'src/auth.js' import { isAutheticated } from 'src/auth.js'
const Temples = () => { const Franchisees = () => {
const token = isAutheticated() const token = isAutheticated()
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [success, setSuccess] = useState(true) const [success, setSuccess] = useState(true)
const [TemplesData, setTemplesData] = useState([]) const [FranchiseesData, setFranchiseesData] = useState([])
const [currentPage, setCurrentPage] = useState(1) const [currentPage, setCurrentPage] = useState(1)
const [itemPerPage, setItemPerPage] = useState(10) const [itemPerPage, setItemPerPage] = useState(10)
const [showData, setShowData] = useState(TemplesData) const [showData, setShowData] = useState(FranchiseesData)
const handleShowEntries = (e) => { const handleShowEntries = (e) => {
setCurrentPage(1) setCurrentPage(1)
@ -25,11 +25,11 @@ const Temples = () => {
const getCategories = () => { const getCategories = () => {
axios axios
.get(`/api/temple`, { .get(`/api/franchisee`, {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
}) })
.then((res) => { .then((res) => {
setTemplesData(res.data.data) setFranchiseesData(res.data.data)
setLoading(false) setLoading(false)
}) })
.catch((err) => { .catch((err) => {
@ -46,10 +46,10 @@ const Temples = () => {
const loadData = () => { const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage const indexOfLastPost = currentPage * itemPerPage
const indexOfFirstPost = indexOfLastPost - itemPerPage const indexOfFirstPost = indexOfLastPost - itemPerPage
setShowData(TemplesData.slice(indexOfFirstPost, indexOfLastPost)) setShowData(FranchiseesData.slice(indexOfFirstPost, indexOfLastPost))
} }
loadData() loadData()
}, [currentPage, itemPerPage, TemplesData]) }, [currentPage, itemPerPage, FranchiseesData])
const handleDelete = (id) => { const handleDelete = (id) => {
swal({ swal({
@ -59,7 +59,7 @@ const Temples = () => {
}).then((value) => { }).then((value) => {
if (value === true) { if (value === true) {
axios axios
.delete(`/api/temple/${id}`, { .delete(`/api/franchisee/${id}`, {
headers: { headers: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
@ -100,7 +100,7 @@ const Temples = () => {
</div> </div>
<div className="page-title-right"> <div className="page-title-right">
<Link to="/temple/add"> <Link to="/franchisee/add">
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
@ -176,16 +176,16 @@ const Temples = () => {
</td> </td>
</tr> </tr>
) : ( ) : (
showData.map((temple, i) => { showData.map((franchisee, i) => {
return ( return (
<tr key={i}> <tr key={i}>
<td className="text-start">{temple.name}</td> <td className="text-start">{franchisee.name}</td>
<td className="text-start"> <td className="text-start">
<img src={temple.banner.url} alt="Test Image" height="50" /> <img src={franchisee.banner.url} alt="Test Image" height="50" />
</td> </td>
<td className="text-start">{temple?.city?.city_name}</td> <td className="text-start">{franchisee?.city?.city_name}</td>
<td className="text-start"> <td className="text-start">
{new Date(temple.createdAt).toLocaleString('en-IN', { {new Date(franchisee.createdAt).toLocaleString('en-IN', {
month: '2-digit', month: '2-digit',
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
@ -195,9 +195,9 @@ const Temples = () => {
})} })}
</td> </td>
<td className=" text-center"> <td className=" text-center">
<OverLayButton data={{ url: temple?.url }} /> <OverLayButton data={{ url: franchisee?.url }} />
<Link to={`/temple/products/${temple._id}`}> <Link to={`/franchisee/products/${franchisee._id}`}>
<button <button
style={{ color: 'white' }} style={{ color: 'white' }}
type="button" type="button"
@ -211,7 +211,7 @@ const Temples = () => {
</button> </button>
</Link> </Link>
<Link to={`/temple/edit/${temple._id}`}> <Link to={`/franchisee/edit/${franchisee._id}`}>
<button <button
style={{ color: 'white' }} style={{ color: 'white' }}
type="button" type="button"
@ -234,7 +234,7 @@ const Temples = () => {
" "
onClick={() => { onClick={() => {
handleDelete(temple._id) handleDelete(franchisee._id)
}} }}
> >
Delete Delete
@ -257,8 +257,8 @@ const Temples = () => {
aria-live="polite" aria-live="polite"
> >
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '} Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
{Math.min(currentPage * itemPerPage, TemplesData.length)} of{' '} {Math.min(currentPage * itemPerPage, FranchiseesData.length)} of{' '}
{TemplesData.length} entries {FranchiseesData.length} entries
</div> </div>
</div> </div>
@ -301,7 +301,7 @@ const Temples = () => {
{!( {!(
(currentPage + 1) * itemPerPage - itemPerPage > (currentPage + 1) * itemPerPage - itemPerPage >
TemplesData.length - 1 FranchiseesData.length - 1
) && ( ) && (
<li className="paginate_button page-item "> <li className="paginate_button page-item ">
<span <span
@ -320,7 +320,7 @@ const Temples = () => {
className={ className={
!( !(
(currentPage + 1) * itemPerPage - itemPerPage > (currentPage + 1) * itemPerPage - itemPerPage >
TemplesData.length - 1 FranchiseesData.length - 1
) )
? 'paginate_button page-item next' ? 'paginate_button page-item next'
: 'paginate_button page-item next disabled' : 'paginate_button page-item next disabled'
@ -348,4 +348,4 @@ const Temples = () => {
) )
} }
export default Temples export default Franchisees

10
src/views/orders/AddOrder.js
View File

@ -79,7 +79,7 @@ function AddOrder() {
function getFranchiseeDetails() { function getFranchiseeDetails() {
setLoading(true) setLoading(true)
axios axios
.get(`/api/temple`, { .get(`/api/franchisee`, {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
}) })
.then((res) => { .then((res) => {
@ -119,7 +119,7 @@ function AddOrder() {
console.log(getFranchiseeID.current.value) console.log(getFranchiseeID.current.value)
axios axios
.get(`/api/Temple/arrayspopulate/${getFranchiseeID.current.value}`, { .get(`/api/franchisee/arrayspopulate/${getFranchiseeID.current.value}`, {
headers: { headers: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
@ -445,8 +445,12 @@ function AddOrder() {
Contact No. : {shipingInfo?.contact_Number} Contact No. : {shipingInfo?.contact_Number}
</p> </p>
<p className="m-0 ms-2 mt-1"> <p className="m-0 ms-2 mt-1">
contact Person Name. : {shipingInfo?.contact_Person_Name} Contact Person Name : {shipingInfo?.contact_Person_Name}
</p> </p>
<p className="m-0 ms-2 mt-1">
Price Lable : {shipingInfo?.price_Lable}
</p>

21
src/views/orders/EditOrder.js
View File

@ -38,6 +38,7 @@ function EditOrder() {
const [productDetails, setProductDetails] = useState() const [productDetails, setProductDetails] = useState()
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [orderId, setOrderId] = useState(null)
const [orderStatus, setOrderStatus] = useState('') const [orderStatus, setOrderStatus] = useState('')
// const [data, setData] = useState({ // const [data, setData] = useState({
// product_Name: '', // product_Name: '',
@ -52,8 +53,7 @@ function EditOrder() {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
}) })
if (res.data) { if (res.data) {
// console.log(res.data?.order?.shippingInfo) setOrderId(res.data?.order?.order_id)
let options = { let options = {
Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id, Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
name: res.data?.order?.shippingInfo?.name, name: res.data?.order?.shippingInfo?.name,
@ -117,7 +117,7 @@ function EditOrder() {
function getFranchiseeDetails() { function getFranchiseeDetails() {
setLoading(true) setLoading(true)
axios axios
.get(`/api/temple`, { .get(`/api/franchisee`, {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
}) })
.then((res) => { .then((res) => {
@ -157,7 +157,7 @@ function EditOrder() {
console.log(getFranchiseeID.current.value) console.log(getFranchiseeID.current.value)
axios axios
.get(`/api/Temple/arrayspopulate/${getFranchiseeID.current.value}`, { .get(`/api/franchisee/arrayspopulate/${getFranchiseeID.current.value}`, {
headers: { headers: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
@ -212,6 +212,7 @@ function EditOrder() {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` }, headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
}) })
.then((res) => { .then((res) => {
setLoading(false) setLoading(false)
const productAllkey = Object.keys(res?.data?.product); const productAllkey = Object.keys(res?.data?.product);
const productAllValue = Object.values(res?.data?.product); const productAllValue = Object.values(res?.data?.product);
@ -393,8 +394,11 @@ function EditOrder() {
justify-content-between justify-content-between
" "
> >
<div style={{ fontSize: '22px' }} className="fw-bold"> <div style={{ fontSize: '22px' }} className="fw-bold">
Edit Order <p> Edit Order</p>
{orderId && <span><small>Order ID : {orderId}</small> </span>}
</div> </div>
<div className="page-title-right"> <div className="page-title-right">
<Button <Button
@ -409,7 +413,7 @@ function EditOrder() {
onClick={() => handleSubmit()} onClick={() => handleSubmit()}
disabled={loading} disabled={loading}
> >
{loading ? 'Loading' : 'Update'} {loading ? 'Loading' : 'Edit Now'}
</Button> </Button>
<Link to="/orders/new"> <Link to="/orders/new">
<Button <Button
@ -483,7 +487,10 @@ function EditOrder() {
Contact No. : {shipingInfo?.contact_Number} Contact No. : {shipingInfo?.contact_Number}
</p> </p>
<p className="m-0 ms-2 mt-1"> <p className="m-0 ms-2 mt-1">
contact Person Name. : {shipingInfo?.contact_Person_Name} Contact Person Name : {shipingInfo?.contact_Person_Name}
</p>
<p className="m-0 ms-2 mt-1">
Price Lable : {shipingInfo?.price_Lable}
</p> </p>

5
src/views/orders/NewOrders.js
View File

@ -200,7 +200,10 @@ function NewOrders() {
</span> </span>
</td> </td>
<td className="text-start"> <td className="text-start">
<Link to={`/orders/${order.orderStatus}/${order._id}`}>
{/* <Link to={`/orders/${order.orderStatus}/${order._id}`}> */}
<Link to={`/orders/view/${order._id}`}>
<button <button
style={{ color: 'white' }} style={{ color: 'white' }}
type="button" type="button"

543
src/views/orders/ViewOrders.js Normal file
View File

@ -0,0 +1,543 @@
import React, { useState, useEffect, useRef } from 'react'
import axios from 'axios'
import { Link, useNavigate, useParams } from 'react-router-dom'
import QRCode from 'react-qr-code'
import { isAutheticated } from 'src/auth'
import { useDispatch, useSelector } from 'react-redux'
import { addItemsToCart } from 'src/redux/Actions/cartAction'
import toast from 'react-hot-toast'
import { cibBlackberry } from '@coreui/icons'
import Button from '@material-ui/core/Button'
function ViewOrders() {
const { status, id } = useParams()
const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } = useSelector(
(state) => state.cart
);
const AllStates = useSelector(
(state) => state
);
const getValue = useRef()
const getFranchiseeID = useRef()
const dispatch = useDispatch();
const navigate = useNavigate()
const printOrderRef = useRef()
const token = isAutheticated()
const [productData, setProductData] = useState([])
const [allFranchisee, setAllFranchisee] = useState([])
const [allTax, setAllTax] = useState([])
const [orderDetails, setOrderDetails] = useState()
const [productDetails, setProductDetails] = useState()
const [loading, setLoading] = useState(true)
const [orderId, setOrderId] = useState(null)
const [orderStatus, setOrderStatus] = useState('')
// const [data, setData] = useState({
// product_Name: '',
// address: '',
// quantity: '',
// contact_Number: '',
// total_Price: '',
// })
useEffect(() => {
const getSingleOrder = async () => {
setLoading(true)
const res = await axios.get(`/api/order/getOne/${id}`, {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
})
if (res.data) {
setLoading(false)
setOrderId(res.data?.order?.order_id)
setOrderDetails(res.data?.order)
console.log(res.data?.order.shippingInfo?.city)
// let options = {
// Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
// name: res.data?.order?.shippingInfo?.name,
// contact_Number: res.data?.order?.shippingInfo?.contact_Number,
// contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name,
// address: res.data?.order?.shippingInfo?.address,
// city: res.data?.order?.shippingInfo?.city,
// price_Lable: res.data?.order?.shippingInfo?.Franchisee?.price_Lable,
// state: res.data?.order?.shippingInfo?.state,
// banner: res.data?.order?.shippingInfo?.Franchisee?.banner?.url,
// // Franchisee_Url: res?.data?.data?.url
// }
// dispatch({ type: "addShippingInfo", payload: options });
// if (res.data?.order?.orderItems) {
// res.data?.order?.orderItems.map((i, ind) => {
// dispatch({ type: "addToCart", payload: i });
// dispatch({ type: "calculatePrice" });
// })
// }
}
}
getSingleOrder()
}, [token])
const handleChange = (e) => {
if (e.target.type === 'text') {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
} else {
setOrderStatus(e.target.value)
}
}
const handleQuantityChange = (e) => {
setData((prev) => ({
...prev,
quantity: e.target.value,
total_Price: (productDetails?.base_Price * e.target.value)
}))
}
function getBack() {
navigate(`/orders/${status}`, { replace: true })
}
return (
<>
{' '}
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: '22px' }} className="fw-bold">
<p> View Order</p>
{orderId && <span><small>Order ID : {orderId}</small> </span>}
</div>
<div className="page-title-right">
{/* <Button
variant="contained"
color="primary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
marginRight: '5px',
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? 'Loading' : 'Edit Now'}
</Button> */}
<Link to="/orders/new">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
{loading ? (
<div class="d-flex justify-content-center">
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
) : (
<div className="row">
<div className="col-lg-6 mt-3">
<div className="card">
<div className="card-body">
<div className="mt-1">
<h5 className='text-success'>Order Status: {orderDetails?.orderStatus}</h5>
<label className="fw-bold">Franchisee :</label>
{/* <div className="d-flex">
<select
className="form-control me-2"
onChange={handleChange}
value={orderStatus}
ref={getFranchiseeID}
disabled={shipingInfo !== null}
>
<option value="" disabled></option>
{allFranchisee && allFranchisee.map((item, index) =>
<option key={index} value={item?._id}>{item?.name}</option>
)}
</select>
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
</div> */}
</div>
{
orderDetails?.shipingInfo !== null &&
<div className="my-2">
<div className="row" style={{ fontSize: '14px' }}>
<div className="col-sm-4">
<img
src={orderDetails?.shippingInfo?.Franchisee?.banner?.url}
alt={orderDetails?.shippingInfo?.name}
// width='100%'
style={{
width: '100%',
objectFit: 'contain',
maxHeight: '100px',
}}
/>
</div>
<div className="col-sm-8">
<h6 className="m-0 ms-2">{orderDetails?.shippingInfo?.name}</h6>
<parent className="m-0 ms-2 mt-3">
Address. : {orderDetails?.shippingInfo?.address}
</parent>
<p className="m-0 ms-2 mt-1">
Contact No. : {orderDetails?.shippingInfo?.contact_Number}
</p>
<p className="m-0 ms-2 mt-1">
Contact Person Name : {orderDetails?.shippingInfo?.contact_Person_Name}
</p>
<p className="m-0 ms-2 mt-1">
Price Lable : {orderDetails?.shippingInfo?.Franchisee?.price_Lable}
</p>
<p className="m-0 ms-2 mt-1">
City : {orderDetails?.shippingInfo?.city}
</p>
<p className="m-0 ms-2 mt-1">
State : {orderDetails?.shippingInfo?.state}
</p>
</div>
</div>
<hr />
</div>
}
<div className="mt-3">
<label>
<span className="fw-bold">Payment Status : </span>
{orderDetails?.isPaid === false ? 'Not Paid' : 'Paid'}
</label>
</div>
<div className="mt-1">
<label>
<span className="fw-bold"> Order Created By: </span>
{orderDetails?.user?.name}
</label>
</div>
<div className="mt-1">
<label>
<span className="fw-bold">Razorpay Order ID : </span>
{productData?.razorpay_order_id}
</label>
</div>
<div className="mt-1">
<label>
<span className="fw-bold">Razorpay Payment ID : </span>
{productData?.razorpay_payment_id}
</label>
</div>
</div>
</div>
</div>
<div className="col-lg-6 mt-3">
{orderDetails?.shipingInfo !== null && <div className="card">
<div className="card-body">
{/* <div className="mt-1">
<label className="fw-bold">Select Product:</label>
<div className="d-flex">
<select
className="form-control me-2"
// onChange={handleGetSingleProduct}
// value={productData?._id}
ref={getValue}
>
<option value="" >-----</option>
{productData && productData.map((item, index) =>
<option key={index} value={item?._id}>{item?.name}</option>
)}
</select>
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleProduct(e)}>Add</button>
</div>
</div> */}
<div className="mt-2">
<h6 className="fw-bold">Products : {orderDetails?.orderItems?.length}</h6>
{
orderDetails?.orderItems && orderDetails?.orderItems.map((productDetails, i) =>
<div className="my-2">
<div className="row" style={{ fontSize: '14px' }}>
<div className="col-sm-4">
<img
src={productDetails?.image}
alt={productDetails?.name}
style={{
width: '100%',
objectFit: 'contain',
maxHeight: '150px',
}}
/>
</div>
<div className="col-sm-8">
<h6 className="m-0 ms-2">{productDetails?.name}</h6>
<div className="row">
<div className="col-sm-6">
<div
className='d-flex justify-content-center mt-3 me-3 '
style={{
width: "6rem",
}}>
<span className='px-2 mt-1' style={{}}> Quantity: {productDetails?.quantity}</span>
</div>
<p className="m-0 mt-3 ms-3">
<stong>Price With Tax:</stong> ₹{productDetails?.price_With_Tax}
</p>
</div>
<div className="col-sm-6">
<p className="m-0 mt-3">
<stong> Price:</stong> ₹{productDetails?.price}
</p>
</div>
</div>
</div>
</div>
<hr />
</div>
)
}
<h5 className="m-0 contents-center mt-3">
<small className='mb-2'>Shipping Charge: </small> ₹{orderDetails?.shipping_charge}
<br />
<span className='mt-2'> Total Order Value: </span> ₹{orderDetails?.total_amount}
</h5>
</div>
</div>
</div>
}
<div className="card my-1">
<div className="card-body">
<label className="fw-bold">Status Timeline :</label>
<table
className="table table-info table-sm m-0"
style={{
borderRadius: '8px',
borderCollapse: 'collapse',
overflow: 'hidden',
}}
>
<tbody>
<tr className="text-center">
<th scope="row">Order Placed On</th>
<td> : </td>
<td>
{orderDetails?.createdAt
? new Date(orderDetails?.createdAt).toLocaleString('en-IN', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
})
: new Date(productData?.placed_on).toLocaleString('en-IN', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
})}
</td>
</tr>
<tr className="text-center">
<th scope="row">Processing Started</th>
<td> : </td>
<td>
{productData?.status_timeline?.processing
? new Date(productData?.status_timeline?.processing).toLocaleString(
'en-IN',
{
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
},
)
: '-'}
</td>
</tr>
<tr className="text-center">
<th scope="row">Dispatched On</th>
<td> : </td>
<td>
{productData?.status_timeline?.dispatched
? new Date(productData?.status_timeline?.dispatched).toLocaleString(
'en-IN',
{
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
},
)
: '-'}
</td>
</tr>
<tr className="text-center">
<th scope="row">Delivered On</th>
<td> : </td>
<td>
{productData?.status_timeline?.delivered
? new Date(productData?.status_timeline?.delivered).toLocaleString(
'en-IN',
{
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
},
)
: '-'}
</td>
</tr>
<tr className="text-center">
<th scope="row">Cancelled On</th>
<td> : </td>
<td>
{productData?.status_timeline?.cancelled
? new Date(productData?.status_timeline?.cancelled).toLocaleString(
'en-IN',
{
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
},
)
: '-'}
</td>
</tr>
<tr className="text-center">
<th scope="row">Returned On</th>
<td> : </td>
<td>
{productData?.status_timeline?.returned
? new Date(productData?.status_timeline?.returned).toLocaleString(
'en-IN',
{
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: 'numeric',
hour12: true,
},
)
: '-'}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>)}
</div>
</div>
</div>
<div style={{ display: 'none' }}>
{/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */}
</div>
</>
)
}
export default ViewOrders