// pages/AdView
<div className="col-md-5">
<ContactSeller ad={ad} />
</div>
// components/forms/ContactSeller.js
import { useState, useEffect } from "react";
import { Avatar } from "antd";
import toast from "react-hot-toast";
import axios from "axios";
import { useAuth } from "../../context/auth";
import { Link, useNavigate } from "react-router-dom";
export default function ContactSeller({ ad }) {
// context
const [auth, setAuth] = useAuth();
// state
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [phone, setPhone] = useState("");
const [loading, setLoading] = useState(false);
// hooks
const navigate = useNavigate();
useEffect(() => {
if (auth?.user) {
setName(auth.user?.name);
setEmail(auth.user?.email);
setPhone(auth.user?.phone);
}
}, [auth?.user]);
const handleSubmit = async () => {
setLoading(true);
try {
console.log(name, email, message, phone);
} catch (err) {
console.log(err);
setLoading(false);
toast.error("Something went wrong. Try again.");
}
};
return (
<div className="card shadow px-3 py-3">
<div className="row">
<div className="col">
<div className="row mx-2 mb-3 mt-3">
<div>
<h4>Contact {ad.postedBy?.name ?? ad.postedBy?.username}</h4>
<p>
About {ad?.type} in {ad?.address} for {ad?.action} ${ad?.price}
</p>
</div>
<textarea
className="form-control mb-3"
name="message"
value={message}
placeholder="✍️ Write description"
onChange={(e) => setMessage(e.target.value)}
/>
<input
name="name"
type="text"
className="form-control mb-3 text-danger"
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={auth?.user?.name}
required
/>
<input
type="email"
placeholder="Enter your email"
className="form-control mb-3 text-danger"
value={email}
onChange={(e) => setEmail(e.target.value?.toLowerCase())}
disabled={auth?.user?.email}
required
/>
<input
name="phone"
type="text"
className="form-control mb-3 text-danger"
placeholder="Enter your phone"
value={phone}
onChange={(e) => setPhone(e.target.value)}
disabled={auth?.user?.phone}
/>
<button
className="btn btn-primary"
disabled={!name || !email || loading}
onClick={handleSubmit}
>
{loading ? "Please wait.." : "Send enquiry"}
</button>
</div>
</div>
</div>
</div>
);
}