send request done
This commit is contained in:
print-signs
parent
e7f4eec7d9
commit
28a12730fc
@ -1,227 +1,207 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Button from "@material-ui/core/Button";
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
import swal from "sweetalert";
|
||||||
|
import axios from "axios";
|
||||||
|
import { isAutheticated } from "src/auth";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import Button from '@material-ui/core/Button'
|
|
||||||
import { Link, useNavigate } from 'react-router-dom'
|
|
||||||
import swal from 'sweetalert'
|
|
||||||
import axios from 'axios'
|
|
||||||
import { isAutheticated } from 'src/auth'
|
|
||||||
// import { WebsiteURL } from '../WebsiteURL'
|
// import { WebsiteURL } from '../WebsiteURL'
|
||||||
|
|
||||||
const AddContactRequest = () => {
|
const AddContactRequest = () => {
|
||||||
const token = isAutheticated()
|
const token = isAutheticated();
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const [data, setData] = useState({
|
const [data, setData] = useState({
|
||||||
|
name: "",
|
||||||
|
EmailOrMobile: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
|
||||||
name: '',
|
const [loading, setLoading] = useState(false);
|
||||||
EmailOrMobile: '',
|
|
||||||
message: '',
|
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
})
|
if (
|
||||||
|
data.name.trim() === "" ||
|
||||||
|
data.EmailOrMobile.trim() === "" ||
|
||||||
const [loading, setLoading] = useState(false)
|
data.message.trim() === ""
|
||||||
|
) {
|
||||||
|
swal({
|
||||||
|
title: "Warning",
|
||||||
|
text: "Fill all mandatory fields",
|
||||||
|
icon: "error",
|
||||||
|
button: "Close",
|
||||||
|
dangerMode: true,
|
||||||
const handleChange = (e) => {
|
});
|
||||||
|
return;
|
||||||
|
|
||||||
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
|
||||||
}
|
}
|
||||||
|
setLoading(true);
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.set("name", data.name);
|
||||||
|
formData.set("EmailOrMobile", data.EmailOrMobile);
|
||||||
|
|
||||||
|
formData.set("message", data.message);
|
||||||
|
|
||||||
|
axios
|
||||||
|
.post(`/api/contact/request/new/`, formData, {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
"Content-Type": "multipart/formdata",
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
swal({
|
||||||
|
title: "Added",
|
||||||
|
text: "Contact Requests added successfully!",
|
||||||
|
icon: "success",
|
||||||
|
button: "ok",
|
||||||
|
});
|
||||||
|
setLoading(false);
|
||||||
|
navigate("/contact/request", { replace: true });
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setLoading(false);
|
||||||
|
const message = err.response?.data?.message || "Something went wrong!";
|
||||||
|
swal({
|
||||||
|
title: "Warning",
|
||||||
|
text: message,
|
||||||
|
icon: "error",
|
||||||
|
button: "Retry",
|
||||||
|
dangerMode: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
const handleSubmit = () => {
|
<div className="container">
|
||||||
if (
|
<div className="row">
|
||||||
data.name.trim() === '' ||
|
<div className="col-12">
|
||||||
data.EmailOrMobile.trim() === '' ||
|
<div
|
||||||
|
className="
|
||||||
|
|
||||||
data.message.trim() === ''
|
|
||||||
|
|
||||||
) {
|
|
||||||
swal({
|
|
||||||
title: 'Warning',
|
|
||||||
text: 'Fill all mandatory fields',
|
|
||||||
icon: 'error',
|
|
||||||
button: 'Close',
|
|
||||||
dangerMode: true,
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
setLoading(true)
|
|
||||||
const formData = new FormData()
|
|
||||||
formData.set('name', data.name)
|
|
||||||
formData.set('EmailOrMobile', data.EmailOrMobile)
|
|
||||||
|
|
||||||
|
|
||||||
formData.set('message', data.message)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
axios
|
|
||||||
.post(`/api/contact/request/new/`, formData, {
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
'Content-Type': 'multipart/formdata',
|
|
||||||
'Access-Control-Allow-Origin': '*',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
swal({
|
|
||||||
title: 'Added',
|
|
||||||
text: 'Contact Requests added successfully!',
|
|
||||||
icon: 'success',
|
|
||||||
button: 'ok',
|
|
||||||
})
|
|
||||||
setLoading(false)
|
|
||||||
navigate('/contact/request', { replace: true })
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
setLoading(false)
|
|
||||||
const message = err.response?.data?.message || 'Something went wrong!'
|
|
||||||
swal({
|
|
||||||
title: 'Warning',
|
|
||||||
text: message,
|
|
||||||
icon: 'error',
|
|
||||||
button: 'Retry',
|
|
||||||
dangerMode: true,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container">
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-12">
|
|
||||||
<div
|
|
||||||
className="
|
|
||||||
page-title-box
|
page-title-box
|
||||||
d-flex
|
d-flex
|
||||||
align-items-center
|
align-items-center
|
||||||
justify-content-between
|
justify-content-between
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div style={{ fontSize: '22px' }} className="fw-bold">
|
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||||
New Contact Request
|
New Contact Request
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
<h4 className="mb-0"></h4>
|
<h4 className="mb-0"></h4>
|
||||||
</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' : 'Save'}
|
|
||||||
</Button>
|
|
||||||
<Link to="/contact/request">
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="secondary"
|
|
||||||
style={{
|
|
||||||
fontWeight: 'bold',
|
|
||||||
marginBottom: '1rem',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Back
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
|
||||||
<div className="col-lg-12 col-md-12 col-sm-12 my-1">
|
|
||||||
<div className="card h-100">
|
|
||||||
<div className="card-body px-5">
|
|
||||||
<div className="mb-3">
|
|
||||||
<label htmlFor="title" className="form-label">
|
|
||||||
Name *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
id="name"
|
|
||||||
value={data.name}
|
|
||||||
maxLength={25}
|
|
||||||
onChange={(e) => handleChange(e)}
|
|
||||||
/>
|
|
||||||
{data.name ? <><small className="charLeft mt-4 fst-italic">
|
|
||||||
{25 - data.name.length} characters left
|
|
||||||
</small></> : <></>
|
|
||||||
|
|
||||||
} </div>
|
<div className="page-title-right">
|
||||||
<div className="mb-3">
|
<Button
|
||||||
<label htmlFor="title" className="form-label">
|
variant="contained"
|
||||||
Email/Mobile *
|
color="primary"
|
||||||
</label>
|
style={{
|
||||||
<input
|
fontWeight: "bold",
|
||||||
type="text"
|
marginBottom: "1rem",
|
||||||
className="form-control"
|
textTransform: "capitalize",
|
||||||
id="EmailOrMobile"
|
marginRight: "5px",
|
||||||
value={data.EmailOrMobile}
|
}}
|
||||||
maxLength={25}
|
onClick={() => handleSubmit()}
|
||||||
onChange={(e) => handleChange(e)}
|
disabled={loading}
|
||||||
/>
|
>
|
||||||
{data.EmailOrMobile ? <><small className="charLeft mt-4 fst-italic">
|
{loading ? "Loading" : "Save"}
|
||||||
{25 - data.EmailOrMobile.length} characters left
|
</Button>
|
||||||
</small></> : <></>
|
<Link to="/contact/request">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="secondary"
|
||||||
|
style={{
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginBottom: "1rem",
|
||||||
|
textTransform: "capitalize",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-12 col-md-12 col-sm-12 my-1">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-body px-5">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="name"
|
||||||
|
value={data.name}
|
||||||
|
maxLength={25}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.name ? (
|
||||||
|
<>
|
||||||
|
<small className="charLeft mt-4 fst-italic">
|
||||||
|
{25 - data.name.length} characters left
|
||||||
|
</small>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}{" "}
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Email/Mobile *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="EmailOrMobile"
|
||||||
|
value={data.EmailOrMobile}
|
||||||
|
maxLength={25}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.EmailOrMobile ? (
|
||||||
|
<>
|
||||||
|
<small className="charLeft mt-4 fst-italic">
|
||||||
|
{25 - data.EmailOrMobile.length} characters left
|
||||||
|
</small>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}{" "}
|
||||||
|
</div>
|
||||||
|
|
||||||
} </div>
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Message *
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="message"
|
||||||
|
rows="10"
|
||||||
|
cols="100"
|
||||||
|
value={data.message}
|
||||||
|
placeholder="your message..."
|
||||||
|
maxLength="500"
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
></textarea>
|
||||||
|
|
||||||
<div className="mb-3">
|
{data.message ? (
|
||||||
<label htmlFor="title" className="form-label">
|
<>
|
||||||
Message *
|
<small className="charLeft mt-4 fst-italic">
|
||||||
</label>
|
{500 - data.message.length} characters left
|
||||||
<textarea
|
</small>
|
||||||
type="text"
|
</>
|
||||||
className="form-control"
|
) : (
|
||||||
id="message"
|
<></>
|
||||||
rows="10"
|
)}
|
||||||
cols="100"
|
</div>
|
||||||
value={data.message}
|
|
||||||
placeholder='your message...'
|
|
||||||
maxLength="500"
|
|
||||||
onChange={(e) => handleChange(e)}
|
|
||||||
>
|
|
||||||
</textarea>
|
|
||||||
|
|
||||||
{data.message ? <><small className="charLeft mt-4 fst-italic">
|
{/* <div className="mb-3">
|
||||||
{500 - data.message.length} characters left
|
|
||||||
</small></> : <></>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{/* <div className="mb-3">
|
|
||||||
<label htmlFor="title" className="form-label">
|
<label htmlFor="title" className="form-label">
|
||||||
message *
|
message *
|
||||||
</label>
|
</label>
|
||||||
@ -230,13 +210,12 @@ const AddContactRequest = () => {
|
|||||||
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
|
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
|
||||||
</textarea>
|
</textarea>
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default AddContactRequest
|
export default AddContactRequest;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user