347 lines
11 KiB
JavaScript
347 lines
11 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
// import Button from "@material-ui/core/Button";
|
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
import swal from "sweetalert";
|
|
import axios from "axios";
|
|
import { isAutheticated } from "src/auth";
|
|
import { Button, ImageList, InputLabel, ImageListItem } from "@mui/material";
|
|
import MessageList from "./MessageList";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
import toast from "react-hot-toast";
|
|
const SupportReply = () => {
|
|
const token = isAutheticated();
|
|
const navigate = useNavigate();
|
|
const [data, setData] = useState({
|
|
user: "admin",
|
|
replyDate: "",
|
|
message: "",
|
|
});
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleChange = (e) => {
|
|
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
|
};
|
|
const options = {
|
|
weekday: "short", // Abbreviated weekday (e.g., "Tue")
|
|
day: "numeric", // Numeric day (e.g., "5")
|
|
month: "short", // Abbreviated month (e.g., "Mar")
|
|
year: "numeric", // Numeric year (e.g., "2024")
|
|
hour: "numeric", // Numeric hour (e.g., "10")
|
|
minute: "2-digit", // Two-digit minute (e.g., "27")
|
|
hour12: true, // Use 12-hour clock (true/false)
|
|
};
|
|
|
|
const { ticketID } = useParams();
|
|
|
|
|
|
const [ticketDetails, setticketDetails] = useState(null);
|
|
const [fetchData, setFetchData] = useState(false);
|
|
|
|
const getSupportTicketDetails = async () => {
|
|
// console.log(ticketID);
|
|
axios
|
|
.get(`/api/support/getOne/${ticketID}`, {
|
|
headers: {
|
|
"Access-Control-Allow-Origin": "*",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
// console.log(res?.data);
|
|
// setticketDetails(res.data?.support);
|
|
// setTicket(res.data?.support);
|
|
console.log(res.data?.support);
|
|
getuserName(res.data?.support);
|
|
// setLoading(false);
|
|
})
|
|
.catch((error) => {
|
|
swal({
|
|
title: error,
|
|
text: "please login to access the resource or refresh the page ",
|
|
icon: "error",
|
|
button: "Retry",
|
|
dangerMode: true,
|
|
});
|
|
// setLoading(false);
|
|
});
|
|
};
|
|
// ************************************
|
|
// updating message in backend************
|
|
const handleSubmit = () => {
|
|
if (data.message.trim() === "") {
|
|
swal({
|
|
title: "Warning",
|
|
text: "Fill all mandatory fields",
|
|
icon: "error",
|
|
button: "Close",
|
|
dangerMode: true,
|
|
});
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
const formData = {
|
|
message: data.message,
|
|
replyDate: new Date().toLocaleString("en-US", options),
|
|
user: "admin",
|
|
};
|
|
axios
|
|
.patch(
|
|
`/api/support/update/${ticketID}`,
|
|
{
|
|
message: formData,
|
|
},
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
)
|
|
.then((res) => {
|
|
toast.success("Message Sent successfully!");
|
|
setLoading(false);
|
|
setData({ message: "" });
|
|
setFetchData(true);
|
|
navigate("/support/request", { replace: true });
|
|
})
|
|
.catch((error) => {
|
|
swal({
|
|
title: "Error",
|
|
text: "Something went wrong",
|
|
icon: "error",
|
|
button: "Close",
|
|
});
|
|
});
|
|
};
|
|
// ************************************
|
|
const getuserName = async (ticket) => {
|
|
try {
|
|
const userId = ticket.addedBy;
|
|
let resp = await axios.get(`/api/v1/admin/user/${userId}`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
console.log(resp?.data?.user?.name);
|
|
const userName = resp?.data?.user?.name;
|
|
const userMailId = resp?.data?.user?.email;
|
|
// console.log(userName);
|
|
// Update support ticket with user name
|
|
const ticketWithUserName = {
|
|
...ticket,
|
|
userName: userName,
|
|
userMailId: userMailId,
|
|
};
|
|
setticketDetails(ticketWithUserName);
|
|
} catch (error) {
|
|
// Handle errors
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
getSupportTicketDetails();
|
|
setFetchData(false);
|
|
}, [fetchData]);
|
|
|
|
// ************************************
|
|
return (
|
|
<div className="container">
|
|
<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">
|
|
Support Chat
|
|
</div>
|
|
<div style={{ display: "flex", gap: "1rem" }}>
|
|
<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" : "Submit"}
|
|
</Button> */}
|
|
{/* <Button
|
|
variant="outlined"
|
|
color="error"
|
|
style={{
|
|
fontWeight: "bold",
|
|
marginBottom: "1rem",
|
|
textTransform: "capitalize",
|
|
}}
|
|
onClick={() => {
|
|
swal({
|
|
title: "Warning",
|
|
text: "Are you sure you want to go back?",
|
|
icon: "error",
|
|
buttons: ["No", "Yes"], // Specify the buttons array
|
|
dangerMode: true,
|
|
}).then((value) => {
|
|
if (value) {
|
|
navigate("/support/request", { replace: true });
|
|
} else {
|
|
return;
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
Back
|
|
</Button> */}
|
|
</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">
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
Ticket ID: {ticketDetails?.ticketId}
|
|
</InputLabel>
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
User ID: {ticketDetails?.addedBy}
|
|
</InputLabel>
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
User Name: {ticketDetails?.userName}
|
|
</InputLabel>
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
User MailId: {ticketDetails?.userMailId}
|
|
</InputLabel>
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
Date and Time: {ticketDetails?.createdOn}
|
|
</InputLabel>
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
Subject: {ticketDetails?.subject}
|
|
</InputLabel>
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
Description:{" "}
|
|
{ticketDetails?.description
|
|
? ticketDetails?.description
|
|
: "No Description"}
|
|
</InputLabel>
|
|
</div>
|
|
<div className="mb-3">
|
|
{ticketDetails?.image?.length > 0 && (
|
|
<div>
|
|
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
|
|
Image:
|
|
</InputLabel>
|
|
<ImageList sx={{ width: 500 }} cols={3} rowHeight={164}>
|
|
{ticketDetails?.image?.map((item) => (
|
|
<ImageListItem key={item.public_id}>
|
|
<img
|
|
srcSet={`${item.url}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
|
|
src={`${item.url}?w=164&h=164&fit=crop&auto=format`}
|
|
alt={item.title || "No image"}
|
|
loading="lazy"
|
|
/>
|
|
</ImageListItem>
|
|
))}
|
|
</ImageList>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mb-3">
|
|
{ticketDetails && (
|
|
<MessageList messages={ticketDetails?.message} />
|
|
)}
|
|
</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>
|
|
|
|
{data.message ? (
|
|
<>
|
|
<small className="charLeft mt-4 fst-italic">
|
|
{500 - data.message.length} characters left
|
|
</small>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
<div className="mb-3">
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
style={{
|
|
fontWeight: "bold",
|
|
marginBottom: "1rem",
|
|
textTransform: "capitalize",
|
|
marginRight: "5px",
|
|
}}
|
|
onClick={() => handleSubmit()}
|
|
disabled={loading}
|
|
>
|
|
{loading ? "Loading" : "Submit"}
|
|
</Button>
|
|
{/* <Link to="/support/request"> */}
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
style={{
|
|
fontWeight: "bold",
|
|
marginBottom: "1rem",
|
|
textTransform: "capitalize",
|
|
}}
|
|
onClick={() => {
|
|
swal({
|
|
title: "Warning",
|
|
text: "Are you sure you want to go back?",
|
|
icon: "error",
|
|
buttons: ["No", "Yes"], // Specify the buttons array
|
|
dangerMode: true,
|
|
}).then((value) => {
|
|
if (value) {
|
|
navigate("/support/request", { replace: true });
|
|
} else {
|
|
return;
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
Back
|
|
</Button>
|
|
{/* </Link> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SupportReply;
|