Fixed Offer Popup

2023-07-01 10:37:59 +01:00
parent fa2102eb61
commit a5dbeaecbf
4 changed files with 234 additions and 179 deletions
@@ -1,64 +1,108 @@
-import React, {useState} from 'react'
-import Detail from './popoutcomponent/Detail'
-import ModalCom from '../Helpers/ModalCom'
-import { useNavigate } from 'react-router-dom'
+import React, { useState } from "react";
+import Detail from "./popoutcomponent/Detail";
+import ModalCom from "../Helpers/ModalCom";
+import { useNavigate } from "react-router-dom";

-import usersService from '../../services/UsersService'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";

-import { tableReload } from '../../store/TableReloads'
-import { useDispatch } from 'react-redux'
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";

-function OfferJobPopout({details, onClose, situation}) {
-  const apiUrl = new usersService()
-  const navigate = useNavigate()
-  const dispatch = useDispatch()
+function OfferJobPopout({ details, onClose, situation }) {
+  const apiUrl = new usersService();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();

-  const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''})
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+    trigger: "",
+  });

  //FUNCTION TO HANDLE AN OFFER
-  const handleOffer = ({target:{name}}) => {
+  const handleOffer = ({ target: { name } }) => {
    const reqData = {
      // offer_result: 100,
      offer_code: details.contract,
-      contract: details.contract
-    }
+      contract: details.contract,
+    };

    //logic to determine the button pressed and set reqDate accordingly
-    if(name == 'accept'){
-      setRequestStatus({loading: true, status: false, message: '', trigger: 'offer'})
-      reqData.offer_result = 100
+    if (name == "accept") {
+      setRequestStatus({
+        loading: true,
+        status: false,
+        message: "",
+        trigger: "offer",
+      });
+      reqData.offer_result = 100;
    }
-    if(name == 'reject'){
-      setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'})
-      reqData.offer_result = 333
+    if (name == "reject") {
+      setRequestStatus({
+        loading: true,
+        status: false,
+        message: "",
+        trigger: "reject",
+      });
+      reqData.offer_result = 333;
    }

    // API CALL
-    apiUrl.offersResponse(reqData).then(response => {
-      if(response.status != 200 || response.data.internal_return < 0){
-        setRequestStatus({loading: false, status: false, message: `Unable to ${name} Offer, try again later`, trigger: ''})
-        return
-      }
-      setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''})
-      setTimeout(()=>{
-        onClose()
-        dispatch(tableReload({type:'MYTASKTABLE'}))
-        navigate('/mytask', {replace:true})
-        setRequestStatus({loading: false, status: false, message: '', trigger: ''})
-      },2000)
-    }).catch(error => {
-      setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''})
-    }).finally(()=>{
-      setTimeout(()=>{
-        setRequestStatus({loading: false, status: false, message: '', trigger: ''})
-      },5000)
-    })
-  }
+    apiUrl
+      .offersResponse(reqData)
+      .then((response) => {
+        if (response.status != 200 || response.data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: `Unable to ${name} Offer, try again later`,
+            trigger: "",
+          });
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: `Offer ${name}ed Successfully`,
+          trigger: "",
+        });
+        setTimeout(() => {
+          onClose();
+          dispatch(tableReload({ type: "MYTASKTABLE" }));
+          navigate("/mytask", { replace: true });
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "",
+            trigger: "",
+          });
+        }, 2000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: `Opps! An Error Occurred`,
+          trigger: "",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "",
+            trigger: "",
+          });
+        }, 5000);
+      });
+  };

  return (
    <ModalCom action={onClose} situation={situation}>
-    <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
            Start Task
@@ -89,117 +133,123 @@ function OfferJobPopout({details, onClose, situation}) {
            </svg>
          </button>
        </div>
-        <div className='md:flex bg-white rounded-lg shadow-lg'>
-          <div className='p-4 w-full md:w-3/4 md:border-r-2'>
-            <p className='text-lg my-5 font-semibold text-slate-900 tracking-wide'>{details.title}</p>
-  
+        <div className="md:flex bg-white rounded-lg shadow-lg">
+          <div className="p-4 w-full md:w-3/4 md:border-r-2">
+            <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
+              {details.title}
+            </p>
+
            {/* INPUT SECTION */}
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Date' 
-                  value={details.offer_added || 'default'}
-              />
+            <div className="my-2 md:flex">
+              <Detail label="Date" value={details.offer_added || "default"} />
            </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Description' 
-                  value={details.description} 
-              />
+
+            <div className="my-2 md:flex">
+              <Detail label="Description" value={details.description} />
            </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Offer Expire' 
-                  value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
-              />
-            </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Price' 
-                  value={`${details.price*0.01} ${details.currency}`} 
-              />
-            </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Duration' 
-                  value={`${details.timeline_days} day(s)`} 
+
+            <div className="my-2 md:flex">
+              <Detail
+                label="Offer Expire"
+                value={
+                  details.expire &&
+                  `${details.expire.split(" ")[0]} ${
+                    details.expire.split(" ")[1].split(".")[0]
+                  }`
+                }
              />
            </div>

-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Detail' 
-                  value={details.job_description || details.description} 
+            <div className="my-2 md:flex">
+              <Detail
+                label="Price"
+                value={details.thePrice}
              />
            </div>
-  
-          </div>
-  
-          {/* ACTION SECTION */}
-          <div className='p-4 w-full md:w-1/4 h-full'>
-            <div className='my-3 md:flex md:justify-center'>
-              {requestStatus.loading && requestStatus.trigger == 'offer' ?
-                <LoadingSpinner size={8} color='sky-blue' />
-              :
-                <button 
-                  name='accept' 
-                  onClick={handleOffer} 
-                  disabled={requestStatus.loading}
-                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
-                    Accept Offer
-                </button>
-              }
+
+            <div className="my-2 md:flex">
+              <Detail
+                label="Duration"
+                value={`${details.timeline_days} day(s)`}
+              />
            </div>
-  
-            <div className='mt-10 md:mt-20 md:flex md:justify-center'>
-              {requestStatus.loading && requestStatus.trigger == 'reject' ?
-                <LoadingSpinner size={8} color='sky-blue' />
-              :
-                <button 
-                  name='reject' 
+
+            <div className="my-2 md:flex">
+              <Detail
+                label="Detail"
+                value={details.job_description || details.description}
+              />
+            </div>
+          </div>
+
+          {/* ACTION SECTION */}
+          <div className="p-4 w-full md:w-1/4 h-full">
+            <div className="my-3 md:flex md:justify-center">
+              {requestStatus.loading && requestStatus.trigger == "offer" ? (
+                <LoadingSpinner size={8} color="sky-blue" />
+              ) : (
+                <button
+                  name="accept"
                  onClick={handleOffer}
                  disabled={requestStatus.loading}
-                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
-                    Reject Offer
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  Accept Offer
                </button>
-              }
+              )}
+            </div>
+
+            <div className="mt-10 md:mt-20 md:flex md:justify-center">
+              {requestStatus.loading && requestStatus.trigger == "reject" ? (
+                <LoadingSpinner size={8} color="sky-blue" />
+              ) : (
+                <button
+                  name="reject"
+                  onClick={handleOffer}
+                  disabled={requestStatus.loading}
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  Reject Offer
+                </button>
+              )}
            </div>

            {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-            {requestStatus.message != "" && (
-                  !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>
-                      )
-                )}
+            {requestStatus.message != "" &&
+              (!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>
+                )
+              ))}
            {/* End of error or success display */}
          </div>
        </div>

-        {/* close button */} 
+        {/* close button */}
        <div className="p-6 flex justify-end">
          <button
-              onClick={onClose}
-              disabled={requestStatus.loading}
-              type="button"
-              className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
+            onClick={onClose}
+            disabled={requestStatus.loading}
+            type="button"
+            className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
+          >
+            <span className="text-gradient">Cancel</span>
+          </button>
        </div>
        {/* end of close button */}
-    </div>
-  </ModalCom>
-    )
+      </div>
+    </ModalCom>
+  );
 }

-export default OfferJobPopout
+export default OfferJobPopout;