Compare commits

...

4 Commits

3 changed files with 141 additions and 30 deletions
@@ -170,7 +170,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
<hr className="mb-1" />
<span className="flex items-center gap-2">
{content?.text}
<strong>{content?.bold}</strong>
<strong>{thePrice}</strong>
</span>
<hr className="mt-1" />
</>
@@ -4,8 +4,8 @@ import Layout from "../Partials/Layout";
import CommonHead from "../UserHeader/CommonHead";
import usersService from "../../services/UsersService";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";
// import { handlePagingFunc } from "../Pagination/HandlePagination";
// import PaginatedList from "../Pagination/PaginatedList";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import OthersInterestedTable from "./OthersInterestedTable";
@@ -15,25 +15,72 @@ export default function ManageInterestOffer(props) {
let [redirectTime, setRedirectTime] = useState(5)
let [messageToSend, setMessageToSend] = useState('')
let [tab, setTab] = useState("info"); //message STATE FOR SWITCHING BETWEEN TABS
let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', processType: ''})
const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
let [messageListReload, setMessageListReload] = useState(false) // STATE TO DETERMINE WHEN MESSAGE LIST WILL RELOAD
const handlePagination = (e) => {
handlePagingFunc(e, setCurrentPage);
};
const [messageList, setMessageList] = useState({loading: true, data: [1,2,3,4,5,6,7,8,95,6,7,8,9]}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
// const [currentPage, setCurrentPage] = useState(0);
// const indexOfFirstItem = Number(currentPage);
// const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
// const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
// const handlePagination = (e) => {
// handlePagingFunc(e, setCurrentPage);
// };
const [selectTab, setValue] = useState("today");
const filterHandler = (value) => {
setValue(value);
};
//FUNCTION TO HANDLE ON CHANGE MESSAGE IN TEXTAREA
const onMessageChange = ({target:{value}}) => {
if(messageToSend.length > 149){
setRequestStatus({loading: false, status: false, message: 'max of 150 characters', processType: 'sendmessage'})
}else{
setRequestStatus({loading: false, status: false, message: '', processType: 'sendmessage'})
}
setMessageToSend(value)
}
//FUNCTION TO SEND MESSAGE TO CLIENT
const sendMessage = () => {
let reqData = { // API PAYLOADS
msg_type: 'MRKTINT',
yourmessage: messageToSend,
offer_uid: props.offerDetails.offer_uid,
interest_uid: props.offerDetails.interest_uid
}
setRequestStatus(prev => ({...prev, loading: true, processType: 'sendmessage'}))
if(!messageToSend){
setRequestStatus({loading: false, status: false, message: 'Please enter message to send', processType: 'sendmessage'})
return
}
if(messageToSend.length > 149){
return
}
apiCall.offerInterestMsg(reqData).then(res=>{
if(res.status != 200 || res.data.internal_return < 0){
setRequestStatus({loading: false, status: false, message: 'message not sent, try again', processType: 'sendmessage'})
return
}
setRequestStatus({loading: false, status: true, message: 'message sent', processType: 'sendmessage'})
setMessageToSend('') // sets message to empty strings
setMessageListReload(prev => !prev) //A FUNCTION TO MAKE MESSAGE LIST RELOAD
}).catch(error => {
setRequestStatus({loading: false, status: false, message: 'Opps, an error occured', processType: 'sendmessage'})
}).finally(()=>{
setTimeout(() => {
setRequestStatus({loading: false, status: false, message: '', processType: ''})
}, 5000);
})
}
//FUNCTION TO ACCEPT/REJECT OFFER INTEREST
const interestOfferProcess = ({target:{name}}) => {
setRequestStatus(prev => ({...prev, loading: true, processType: name}))
@@ -66,8 +113,16 @@ export default function ManageInterestOffer(props) {
}
useEffect(()=>{
// run API to get message to replace message array above, add reload variable as dependence array
},[])
// run API to get message to replace message array above, add reload variable as dependence array. CODE IS DUMMY FOR NOW
setMessageList({loading: true, data: []})
apiCall.offerInterestMsg().then(res=>{
console.log('Data', res.data)
setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
}).catch(err => {
setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
console.log('Failed', err)
})
},[messageListReload])
return (
<Layout>
<CommonHead
@@ -180,32 +235,76 @@ export default function ManageInterestOffer(props) {
</div>
:
<div className="message-details w-full border-t">
<div className="my-0 w-full flex items-center gap-5">
<div className="w-3/4">
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
<textarea rows={2} autoFocus={true} className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none" />
<p className="my-1 text-base text-dark-gray dark:text-white tracking-wide">To: <span className="font-bold">{props.offerDetails?.client_name}</span></p>
<div className="w-full flex items-center gap-5">
<div className="w-full">
<textarea
value={messageToSend}
onChange={onMessageChange}
rows={2} autoFocus={true}
className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none"
/>
</div>
<div className="w-1/4 flex flex-col justify-center items-center">
<button
type="button"
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
<span className="text-white">Send</span>
</button>
<div className="flex justify-end items-center">
{requestStatus.loading && requestStatus.processType == 'sendmessage' ?
<LoadingSpinner color='sky-blue' size='10' />
:
<button
type="button"
onClick={sendMessage}
disabled={requestStatus.loading}
// className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
className="w-[100px] h-[50px] bg-sky-blue text-center text-lg font-semibold text-white rounded-md shadow-md flex justify-center items-center"
>
Send
</button>
}
</div>
</div>
{/* ERROR DISPLAY FOR MESSAGE SENDING */}
<div className="w-full">
{/* error or success display */}
{requestStatus.message != "" && requestStatus.processType == 'sendmessage' &&
(!requestStatus.status ? (
<div
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
>
{requestStatus.message}
</div>
) : (
requestStatus.status && (
<div
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
>
{requestStatus.message}
</div>
)
))}
</div>
{/* END OF ERROR DISPLAY FOR MESSAGE SENDING */}
{/* message list */}
<div className="min-h-[100px] max-h-[200px] overflow-y-auto">
{currentMessageList.map((item, index)=>(
<div className="my-1 min-h-[100px] max-h-[200px] border-t overflow-y-scroll">
{ messageList.loading ?
<LoadingSpinner color='sky-blue' size='16' />
: messageList.data.map((item, index)=>(
<div key={index} className="my-2 w-full flex items-center gap-1">
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
</div>
))}
))
}
{/* {messageList.data.map((item, index)=>(
<div key={index} className="my-2 w-full flex items-center gap-1">
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
<p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
</div>
))} */}
</div>
{/* PAGINATION BUTTON */}
<PaginatedList
{/* <PaginatedList
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
@@ -217,7 +316,7 @@ export default function ManageInterestOffer(props) {
data={messageList?.data}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
/> */}
{/* END OF PAGINATION BUTTON */}
</div>
}
@@ -263,7 +362,7 @@ export default function ManageInterestOffer(props) {
{/* ERROR DISPLAY */}
<div className="w-full">
{/* error or success display */}
{requestStatus.message != "" && requestStatus.processType != 'sendmeassge' &&
{requestStatus.message != "" && requestStatus.processType != 'sendmessage' &&
(!requestStatus.status ? (
<div
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+12
View File
@@ -729,6 +729,18 @@ class usersService {
};
return this.postAuxEnd("/paylistcard", postData);
}
// END POINT TO SEND AND GET OFFER INTEREST MESSAGE
offerInterestMsg(reqData) {
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
action: 13037,
...reqData
};
return this.postAuxEnd("/offerinterestmsg", postData);
}
/*
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)