franchisee edit
This commit is contained in:
pawan-dot
parent
46ed77392a
commit
ba5f9d1826
@ -52,7 +52,7 @@ const _nav = [
|
||||
component: CNavItem,
|
||||
name: 'Franchisee',
|
||||
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
|
||||
to: '/temples',
|
||||
to: '/franchisees',
|
||||
},
|
||||
{
|
||||
component: CNavGroup,
|
||||
|
||||
@ -22,10 +22,10 @@ import Socialmedia from './views/configuration/Socialmedia.js'
|
||||
import Address from './views/configuration/Address.js'
|
||||
import Logo from './views/configuration/Logo.js'
|
||||
import Login from './views/pages/login/Login'
|
||||
//temple
|
||||
import Temples from './views/Temples/Temples'
|
||||
import AddTemple from './views/Temples/AddTemple'
|
||||
import EditTemple from './views/Temples/EditTemple'
|
||||
//Franchisees
|
||||
import Franchisees from './views/Temples/Franchisees'
|
||||
import AddFranchisee from './views/Temples/AddFranchisee'
|
||||
import EditFranchisee from './views/Temples/EditFranchisee'
|
||||
import Products from './views/Products/Products'
|
||||
//product
|
||||
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 Edittax from './views/configuration/tax/Edittax'
|
||||
import EditOrder from './views/orders/EditOrder'
|
||||
import ViewOrders from './views/orders/ViewOrders'
|
||||
|
||||
const routes = [
|
||||
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
@ -65,7 +67,7 @@ const routes = [
|
||||
{ path: '/orders/new', name: 'New Orders', element: NewOrders },
|
||||
{ path: '/order/add', name: 'add Order', element: AddOrder },
|
||||
{ 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/dispatched', name: 'Dispatched Orders', element: DispatchedOrders },
|
||||
@ -76,9 +78,9 @@ const routes = [
|
||||
|
||||
|
||||
//Temple
|
||||
{ path: '/temples', name: 'Temples', element: Temples },
|
||||
{ path: '/temple/add', name: 'Add Temple', element: AddTemple },
|
||||
{ path: '/temple/edit/:id', name: 'Edit Temples', element: EditTemple },
|
||||
{ path: '/franchisees', name: 'Franchisees', element: Franchisees },
|
||||
{ path: '/franchisee/add', name: 'Add Franchisee', element: AddFranchisee },
|
||||
{ path: '/franchisee/edit/:id', name: 'Edit Franchisee', element: EditFranchisee },
|
||||
|
||||
//dashboard
|
||||
|
||||
|
||||
@ -440,7 +440,7 @@ const AddProduct = () => {
|
||||
</label> <select className=" form-control" name="" id=""
|
||||
onChange={(e) => TaxRatechange(e)}
|
||||
>
|
||||
<option value="" disabled>---</option>
|
||||
<option value="" disabled>-----</option>
|
||||
|
||||
{allTax.map((t, i) =>
|
||||
<option key={i} value={`tax:${t.tax},name:${t.name} ,taxId:${t._id}`}>{t.tax}% {t.name}</option>
|
||||
|
||||
@ -1,45 +1,47 @@
|
||||
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
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 axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
// import { WebsiteURL } from '../WebsiteURL'
|
||||
|
||||
const EditTemple = () => {
|
||||
|
||||
|
||||
const AddFranchisee = () => {
|
||||
const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/')
|
||||
const id = useParams()?.id
|
||||
const token = isAutheticated()
|
||||
const navigate = useNavigate()
|
||||
const [data, setData] = useState({
|
||||
image: '',
|
||||
imageURL: '',
|
||||
name: '',
|
||||
email: '',
|
||||
address_line_1: '',
|
||||
address_line_2: '',
|
||||
contact_Person_Name: '',
|
||||
contact_Number: '',
|
||||
price_Lable: '',
|
||||
city: '',
|
||||
state_name: '',
|
||||
short_url: '',
|
||||
// pan: '',
|
||||
// business_name: '',
|
||||
// gstin: '',
|
||||
// option: '',
|
||||
contact_Number: '',
|
||||
contact_Person_Name: '',
|
||||
price_Lable: '',
|
||||
pin_Code: ''
|
||||
})
|
||||
|
||||
const [cities, setCities] = useState([])
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [validForm, setValidForm] = useState(false)
|
||||
|
||||
|
||||
const [limiter, setLimiter] = useState({
|
||||
name: 100,
|
||||
nameHas: 100,
|
||||
})
|
||||
|
||||
const getRequired = async () => {
|
||||
await axios
|
||||
const getRequired = () => {
|
||||
axios
|
||||
.get(`/api/city`, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
@ -50,36 +52,70 @@ const EditTemple = () => {
|
||||
setCities([...res.data.data])
|
||||
})
|
||||
.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(() => {
|
||||
getRequired()
|
||||
}, [])
|
||||
const [errors, setErrors] = useState({
|
||||
emailError: '',
|
||||
|
||||
useEffect(() => {
|
||||
const setStateName = () => {
|
||||
const city = cities.filter((m) => data.city === m?._id)
|
||||
setData((prev) => ({ ...prev, state_name: city[0]?.state?.state_name || '' }))
|
||||
|
||||
})
|
||||
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
|
||||
}
|
||||
setStateName()
|
||||
}, [data.city])
|
||||
})
|
||||
Object.values(data.email).forEach((val) => {
|
||||
if (val.length <= 0) {
|
||||
valid = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
return valid
|
||||
}
|
||||
|
||||
//cheking email and password
|
||||
useEffect(() => {
|
||||
if (validateForm()) {
|
||||
setValidForm(true)
|
||||
} else {
|
||||
setValidForm(false)
|
||||
}
|
||||
}, [errors])
|
||||
// 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) => {
|
||||
if (e.target.id === 'name') {
|
||||
@ -88,7 +124,19 @@ const EditTemple = () => {
|
||||
...prev,
|
||||
[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 (
|
||||
@ -125,14 +173,18 @@ const EditTemple = () => {
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.name.trim() === '' ||
|
||||
data.email.trim() === '' ||
|
||||
data.contact_Number === '' ||
|
||||
|
||||
data.contact_Person_Name === '' ||
|
||||
data.address_line_1.trim() === '' ||
|
||||
data.address_line_2.trim() === '' ||
|
||||
data.price_Lable.trim() === '' ||
|
||||
data.contact_Number === '' ||
|
||||
data.contact_Person_Name === '' ||
|
||||
data.city === '' ||
|
||||
data.pin_Code.trim() === '' ||
|
||||
data.short_url === '' ||
|
||||
data.state_name === ''
|
||||
data.state_name === '' ||
|
||||
data.imageURL.trim() === ''
|
||||
) {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
@ -146,24 +198,23 @@ const EditTemple = () => {
|
||||
setLoading(true)
|
||||
const formData = new FormData()
|
||||
formData.set('name', data.name)
|
||||
// formData.set('pan', data.pan)
|
||||
// formData.set('business_name', data.business_name)
|
||||
// formData.set('gstin', data.gstin)
|
||||
// formData.set('option', data.option)
|
||||
formData.set('email', data.email)
|
||||
|
||||
formData.set('address_line_1', data.address_line_1)
|
||||
formData.set('address_line_2', data.address_line_2)
|
||||
formData.set('city', data.city)
|
||||
formData.set('price_Lable', data.price_Lable)
|
||||
|
||||
|
||||
formData.set('state_name', data.state_name)
|
||||
formData.set('contact_Number', data.contact_Number)
|
||||
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('short_url', data.short_url)
|
||||
|
||||
formData.append('image', data.image)
|
||||
axios
|
||||
.patch(`/api/Temple/${id}`, formData, {
|
||||
.post(`/api/franchisee/`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'multipart/formdata',
|
||||
@ -172,13 +223,13 @@ const EditTemple = () => {
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: 'Updated',
|
||||
text: 'Temple updated successfully!',
|
||||
title: 'Added',
|
||||
text: res?.data?.message ? res?.data?.message : 'Franchisee added successfully!',
|
||||
icon: 'success',
|
||||
button: 'Return',
|
||||
})
|
||||
setLoading(false)
|
||||
navigate('/temples', { replace: true })
|
||||
navigate('/franchisees', { replace: true })
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
@ -206,7 +257,7 @@ const EditTemple = () => {
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Edit Franchisee
|
||||
Add Franchisee
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
@ -225,9 +276,9 @@ const EditTemple = () => {
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading' : 'Update'}
|
||||
{loading ? 'Loading' : 'Save'}
|
||||
</Button>
|
||||
<Link to="/temples">
|
||||
<Link to="/franchisees">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
@ -244,9 +295,8 @@ const EditTemple = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-body px-5">
|
||||
<div className="mb-3">
|
||||
@ -263,19 +313,24 @@ const EditTemple = () => {
|
||||
/>
|
||||
<p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p>
|
||||
</div>
|
||||
{/* <div className="mb-3">
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
PAN*
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="pan"
|
||||
value={data.pan}
|
||||
id="email"
|
||||
value={data.email}
|
||||
maxLength="50"
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</div> */}
|
||||
{errors.emailError && (
|
||||
<p className="text-center py-2 text-danger">{errors.emailError}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Address Line 1*
|
||||
@ -302,32 +357,7 @@ const EditTemple = () => {
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</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">
|
||||
<label htmlFor="pageToLink" className="form-label">
|
||||
City*
|
||||
@ -364,10 +394,27 @@ const EditTemple = () => {
|
||||
disabled
|
||||
/>
|
||||
</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 className="col-6 my-1">
|
||||
</div>
|
||||
<div className="col-sm-12 col-md-12 col-lg-6 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
|
||||
@ -413,6 +460,7 @@ const EditTemple = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Price Lable*
|
||||
@ -432,6 +480,7 @@ const EditTemple = () => {
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="image" className="form-label">
|
||||
Temple Banner*
|
||||
@ -460,4 +509,4 @@ const EditTemple = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default EditTemple
|
||||
export default AddFranchisee
|
||||
@ -1,22 +1,24 @@
|
||||
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
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 axios from 'axios'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
// import { WebsiteURL } from '../WebsiteURL'
|
||||
|
||||
const AddTemple = () => {
|
||||
const EditFranchisee = () => {
|
||||
|
||||
|
||||
const [WebsiteURL, setWebsiteURL] = useState('https://reinventuniforms.in/')
|
||||
const id = useParams()?.id
|
||||
const token = isAutheticated()
|
||||
const navigate = useNavigate()
|
||||
const [data, setData] = useState({
|
||||
image: '',
|
||||
imageURL: '',
|
||||
name: '',
|
||||
email: '',
|
||||
address_line_1: '',
|
||||
address_line_2: '',
|
||||
city: '',
|
||||
@ -24,19 +26,19 @@ const AddTemple = () => {
|
||||
short_url: '',
|
||||
contact_Number: '',
|
||||
contact_Person_Name: '',
|
||||
price_Lable: ''
|
||||
price_Lable: '',
|
||||
pin_Code: ''
|
||||
})
|
||||
|
||||
const [cities, setCities] = useState([])
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [validForm, setValidForm] = useState(false)
|
||||
const [limiter, setLimiter] = useState({
|
||||
name: 100,
|
||||
nameHas: 100,
|
||||
})
|
||||
|
||||
const getRequired = () => {
|
||||
axios
|
||||
const getRequired = async () => {
|
||||
await axios
|
||||
.get(`/api/city`, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
@ -47,12 +49,121 @@ const AddTemple = () => {
|
||||
setCities([...res.data.data])
|
||||
})
|
||||
.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(() => {
|
||||
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) => {
|
||||
if (e.target.id === 'name') {
|
||||
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,
|
||||
}))
|
||||
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)
|
||||
@ -101,8 +220,7 @@ const AddTemple = () => {
|
||||
const handleSubmit = () => {
|
||||
if (
|
||||
data.name.trim() === '' ||
|
||||
|
||||
// data.pan.trim() === '' ||
|
||||
data.email.trim() === '' ||
|
||||
data.contact_Number === '' ||
|
||||
|
||||
data.contact_Person_Name === '' ||
|
||||
@ -110,6 +228,7 @@ const AddTemple = () => {
|
||||
data.address_line_2.trim() === '' ||
|
||||
data.price_Lable.trim() === '' ||
|
||||
data.city === '' ||
|
||||
data.pin_Code === '' ||
|
||||
data.short_url === '' ||
|
||||
data.state_name === '' ||
|
||||
data.imageURL.trim() === ''
|
||||
@ -126,24 +245,23 @@ const AddTemple = () => {
|
||||
setLoading(true)
|
||||
const formData = new FormData()
|
||||
formData.set('name', data.name)
|
||||
// formData.set('pan', data.pan)
|
||||
// formData.set('business_name', data.business_name)
|
||||
// formData.set('gstin', data.gstin)
|
||||
// formData.set('option', data.option)
|
||||
formData.set('email', data.email)
|
||||
|
||||
formData.set('address_line_1', data.address_line_1)
|
||||
formData.set('address_line_2', data.address_line_2)
|
||||
formData.set('city', data.city)
|
||||
formData.set('price_Lable', data.price_Lable)
|
||||
|
||||
|
||||
formData.set('state_name', data.state_name)
|
||||
formData.set('pin_Code', data.pin_Code)
|
||||
formData.set('contact_Number', data.contact_Number)
|
||||
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('short_url', data.short_url)
|
||||
|
||||
formData.append('image', data.image)
|
||||
axios
|
||||
.post(`/api/temple`, formData, {
|
||||
.patch(`/api/franchisee/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'multipart/formdata',
|
||||
@ -152,13 +270,13 @@ const AddTemple = () => {
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: 'Added',
|
||||
text: 'Temple added successfully!',
|
||||
title: 'Updated',
|
||||
text: res?.data?.message ? res?.data?.message : 'franchisee updated successfully!',
|
||||
icon: 'success',
|
||||
button: 'Return',
|
||||
})
|
||||
setLoading(false)
|
||||
navigate('/temples', { replace: true })
|
||||
navigate('/franchisees', { replace: true })
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false)
|
||||
@ -186,7 +304,7 @@ const AddTemple = () => {
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Add Franchisee
|
||||
Edit Franchisee
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
@ -205,9 +323,9 @@ const AddTemple = () => {
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading' : 'Save'}
|
||||
{loading ? 'Loading' : 'Update'}
|
||||
</Button>
|
||||
<Link to="/temples">
|
||||
<Link to="/franchisees">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
@ -224,8 +342,9 @@ const AddTemple = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-body px-5">
|
||||
<div className="mb-3">
|
||||
@ -242,6 +361,22 @@ const AddTemple = () => {
|
||||
/>
|
||||
<p className="pt-1 pl-2 text-secondary">Remaining characters : {limiter.nameHas}</p>
|
||||
</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">
|
||||
<label htmlFor="title" className="form-label">
|
||||
@ -269,7 +404,32 @@ const AddTemple = () => {
|
||||
onChange={(e) => handleChange(e)}
|
||||
/>
|
||||
</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">
|
||||
<label htmlFor="pageToLink" className="form-label">
|
||||
City*
|
||||
@ -306,10 +466,27 @@ const AddTemple = () => {
|
||||
disabled
|
||||
/>
|
||||
</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 className="col-sm-12 col-md-12 col-lg-6 my-1">
|
||||
</div>
|
||||
<div className="col-6 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
|
||||
@ -355,7 +532,6 @@ const AddTemple = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Price Lable*
|
||||
@ -375,10 +551,9 @@ const AddTemple = () => {
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="image" className="form-label">
|
||||
Temple Banner*
|
||||
franchisee Banner*
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
@ -404,4 +579,4 @@ const AddTemple = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default AddTemple
|
||||
export default EditFranchisee
|
||||
@ -8,15 +8,15 @@ import swal from 'sweetalert'
|
||||
import OverLayButton from './OverLayButton.js'
|
||||
import { isAutheticated } from 'src/auth.js'
|
||||
|
||||
const Temples = () => {
|
||||
const Franchisees = () => {
|
||||
const token = isAutheticated()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [success, setSuccess] = useState(true)
|
||||
const [TemplesData, setTemplesData] = useState([])
|
||||
const [FranchiseesData, setFranchiseesData] = useState([])
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
const [showData, setShowData] = useState(TemplesData)
|
||||
const [showData, setShowData] = useState(FranchiseesData)
|
||||
|
||||
const handleShowEntries = (e) => {
|
||||
setCurrentPage(1)
|
||||
@ -25,11 +25,11 @@ const Temples = () => {
|
||||
|
||||
const getCategories = () => {
|
||||
axios
|
||||
.get(`/api/temple`, {
|
||||
.get(`/api/franchisee`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
setTemplesData(res.data.data)
|
||||
setFranchiseesData(res.data.data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -46,10 +46,10 @@ const Temples = () => {
|
||||
const loadData = () => {
|
||||
const indexOfLastPost = currentPage * itemPerPage
|
||||
const indexOfFirstPost = indexOfLastPost - itemPerPage
|
||||
setShowData(TemplesData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
setShowData(FranchiseesData.slice(indexOfFirstPost, indexOfLastPost))
|
||||
}
|
||||
loadData()
|
||||
}, [currentPage, itemPerPage, TemplesData])
|
||||
}, [currentPage, itemPerPage, FranchiseesData])
|
||||
|
||||
const handleDelete = (id) => {
|
||||
swal({
|
||||
@ -59,7 +59,7 @@ const Temples = () => {
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.delete(`/api/temple/${id}`, {
|
||||
.delete(`/api/franchisee/${id}`, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
Authorization: `Bearer ${token}`,
|
||||
@ -100,7 +100,7 @@ const Temples = () => {
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Link to="/temple/add">
|
||||
<Link to="/franchisee/add">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
@ -176,16 +176,16 @@ const Temples = () => {
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
showData.map((temple, i) => {
|
||||
showData.map((franchisee, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{temple.name}</td>
|
||||
<td className="text-start">{franchisee.name}</td>
|
||||
<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 className="text-start">{temple?.city?.city_name}</td>
|
||||
<td className="text-start">{franchisee?.city?.city_name}</td>
|
||||
<td className="text-start">
|
||||
{new Date(temple.createdAt).toLocaleString('en-IN', {
|
||||
{new Date(franchisee.createdAt).toLocaleString('en-IN', {
|
||||
month: '2-digit',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
@ -195,9 +195,9 @@ const Temples = () => {
|
||||
})}
|
||||
</td>
|
||||
<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
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
@ -211,7 +211,7 @@ const Temples = () => {
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={`/temple/edit/${temple._id}`}>
|
||||
<Link to={`/franchisee/edit/${franchisee._id}`}>
|
||||
<button
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
@ -234,7 +234,7 @@ const Temples = () => {
|
||||
|
||||
"
|
||||
onClick={() => {
|
||||
handleDelete(temple._id)
|
||||
handleDelete(franchisee._id)
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
@ -257,8 +257,8 @@ const Temples = () => {
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
|
||||
{Math.min(currentPage * itemPerPage, TemplesData.length)} of{' '}
|
||||
{TemplesData.length} entries
|
||||
{Math.min(currentPage * itemPerPage, FranchiseesData.length)} of{' '}
|
||||
{FranchiseesData.length} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -301,7 +301,7 @@ const Temples = () => {
|
||||
|
||||
{!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
TemplesData.length - 1
|
||||
FranchiseesData.length - 1
|
||||
) && (
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
@ -320,7 +320,7 @@ const Temples = () => {
|
||||
className={
|
||||
!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
TemplesData.length - 1
|
||||
FranchiseesData.length - 1
|
||||
)
|
||||
? 'paginate_button page-item next'
|
||||
: 'paginate_button page-item next disabled'
|
||||
@ -348,4 +348,4 @@ const Temples = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Temples
|
||||
export default Franchisees
|
||||
@ -79,7 +79,7 @@ function AddOrder() {
|
||||
function getFranchiseeDetails() {
|
||||
setLoading(true)
|
||||
axios
|
||||
.get(`/api/temple`, {
|
||||
.get(`/api/franchisee`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
@ -119,7 +119,7 @@ function AddOrder() {
|
||||
console.log(getFranchiseeID.current.value)
|
||||
|
||||
axios
|
||||
.get(`/api/Temple/arrayspopulate/${getFranchiseeID.current.value}`, {
|
||||
.get(`/api/franchisee/arrayspopulate/${getFranchiseeID.current.value}`, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
Authorization: `Bearer ${token}`,
|
||||
@ -445,8 +445,12 @@ function AddOrder() {
|
||||
Contact No. : {shipingInfo?.contact_Number}
|
||||
</p>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -38,6 +38,7 @@ function EditOrder() {
|
||||
|
||||
const [productDetails, setProductDetails] = useState()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [orderId, setOrderId] = useState(null)
|
||||
const [orderStatus, setOrderStatus] = useState('')
|
||||
// const [data, setData] = useState({
|
||||
// product_Name: '',
|
||||
@ -52,8 +53,7 @@ function EditOrder() {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
if (res.data) {
|
||||
// console.log(res.data?.order?.shippingInfo)
|
||||
|
||||
setOrderId(res.data?.order?.order_id)
|
||||
let options = {
|
||||
Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
|
||||
name: res.data?.order?.shippingInfo?.name,
|
||||
@ -117,7 +117,7 @@ function EditOrder() {
|
||||
function getFranchiseeDetails() {
|
||||
setLoading(true)
|
||||
axios
|
||||
.get(`/api/temple`, {
|
||||
.get(`/api/franchisee`, {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
@ -157,7 +157,7 @@ function EditOrder() {
|
||||
console.log(getFranchiseeID.current.value)
|
||||
|
||||
axios
|
||||
.get(`/api/Temple/arrayspopulate/${getFranchiseeID.current.value}`, {
|
||||
.get(`/api/franchisee/arrayspopulate/${getFranchiseeID.current.value}`, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
Authorization: `Bearer ${token}`,
|
||||
@ -212,6 +212,7 @@ function EditOrder() {
|
||||
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
setLoading(false)
|
||||
const productAllkey = Object.keys(res?.data?.product);
|
||||
const productAllValue = Object.values(res?.data?.product);
|
||||
@ -393,8 +394,11 @@ function EditOrder() {
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
|
||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||
Edit Order
|
||||
<p> Edit Order</p>
|
||||
{orderId && <span><small>Order ID : {orderId}</small> </span>}
|
||||
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
@ -409,7 +413,7 @@ function EditOrder() {
|
||||
onClick={() => handleSubmit()}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Loading' : 'Update'}
|
||||
{loading ? 'Loading' : 'Edit Now'}
|
||||
</Button>
|
||||
<Link to="/orders/new">
|
||||
<Button
|
||||
@ -483,7 +487,10 @@ function EditOrder() {
|
||||
Contact No. : {shipingInfo?.contact_Number}
|
||||
</p>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
@ -200,7 +200,10 @@ function NewOrders() {
|
||||
</span>
|
||||
</td>
|
||||
<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
|
||||
style={{ color: 'white' }}
|
||||
type="button"
|
||||
|
||||
543
src/views/orders/ViewOrders.js
Normal file
543
src/views/orders/ViewOrders.js
Normal 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
|
||||
Loading…
Reference in New Issue
Block a user