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,4 +1,4 @@
-import React from 'react'
+import React from "react";

 // export const PriceFormatter = (price, currency, currencyName) => {
 //   const supportedCurrencies = ["USD", "EUR", "GBP"];
@@ -17,32 +17,35 @@ import React from 'react'
 //   return `${formatter.format(price)} ${displayCurrencyName}`;
 // };

-
-export const PriceFormatter = (price='00', currency='', currencyName='') => {
+export const PriceFormatter = (
+  price = "00",
+  currency = "",
+  currencyName = ""
+) => {
  // Convert the number to a string
-let numStr = String(price);
+  let numStr = String(price);

-// Split the string into integer and decimal parts
-let parts = numStr.split('.');
-let integerPart = parts[0];
-let decimalPart = parts[1] || '';
+  // Split the string into integer and decimal parts
+  let parts = numStr.split(".");
+  let integerPart = parts[0] || "";
+  let decimalPart = parts[1] || "";

-// Add thousands separators to the integer part
-// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-let formattedInteger = integerPart;
+  // Add thousands separators to the integer part
+  // let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  let formattedInteger = integerPart;

-// Truncate or pad the decimal part to two decimal points
-let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
+  // Truncate or pad the decimal part to two decimal points
+  let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");

-// Combine the formatted integer and decimal parts
-// let formattedNumber = formattedInteger + '.' + formattedDecimal;
+  // Combine the formatted integer and decimal parts
+  // let formattedNumber = formattedInteger + '.' + formattedDecimal;

-// return formattedNumber;
+  // return formattedNumber;
  return (
-    <span className='text-sm flex items-center'>
-      <sup>{currency || currencyName || ''}</sup>
-      <span className='px-1 font-bold text-lg'>{formattedInteger}</span>
-      <sup>{formattedDecimal}</sup>
+    <span className="text-sm flex items-center">
+      <sup>{currency || currencyName || ""}</sup>
+      <span className="px-1 font-bold text-lg">{formattedInteger || ""}</span>
+      <sup>{formattedDecimal || ""}</sup>
    </span>
-  )
-}
+  );
+};
@@ -143,7 +143,10 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
                            <button
                              type="button"
                              onClick={() => {
-                                setOfferPopout({ show: true, data: value });
+                                setOfferPopout({
+                                  show: true,
+                                  data: {...value, thePrice },
+                                });
                              }}
                              className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
                            >
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 // import profileBanner from "../../assets/images/profile-cover.png";
 // import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
 // import marketPlace from "../../data/marketplace_data.json";
-import LoadingSpinner from "../../components/Spinners/LoadingSpinner"
+import LoadingSpinner from "../../components/Spinners/LoadingSpinner";
 import products from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import {
@@ -35,6 +35,8 @@ export default function Resources(props) {
    setTab(value);
  };

+  console.log("first")
+
  // Category Components
  const tabComponents = {
    onsale: <OnSaleTab products={onSaleProducts} />,
@@ -105,38 +107,35 @@ export default function Resources(props) {
    <>
      <Layout>
        <div className="nft-authprofile-wrapper w-full">
-          {__resources.length == 0 ||
-          Object.keys(__resources).length == 0 ? (
+          {__resources.length == 0 || Object.keys(__resources).length == 0 ? (
            <div className="w-full h-full flex items-center justify-center">
              <LoadingSpinner size={16} color="sky-blue" />
            </div>
          ) : (
-          <div className="main-wrapper w-full">
-            <div className="content-wrapper-profile-only w-full mb-6">
-              <div className="auth-tab-content relative mb-10">
-                <div className="lg:flex justify-between">
-                  <div className="tab-items">
-                    <ul className="lg:flex lg:space-x-14 space-x-8">
+            <div className="main-wrapper w-full">
+              <div className="content-wrapper-profile-only w-full mb-6">
+                <div className="auth-tab-content relative mb-10">
+                  <div className="lg:flex justify-between">
+                    <div className="tab-items">
                      <TabList tabCategories={tab_categories} />
-                    </ul>
-                  </div>
-                  <div style={{ transform: "translateY(-22px)" }}>
-                    <Link
-                      to="/upload-product"
-                      className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                    >
-                      Upload Product
-                    </Link>
+                    </div>
+                    <div style={{ transform: "translateY(-22px)" }}>
+                      <Link
+                        to="/upload-product"
+                        className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+                      >
+                        Upload Product
+                      </Link>
+                    </div>
                  </div>
+                  <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                </div>
-                <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
+              </div>
+
+              <div className="tab-cotainer w-full mb-10">
+                {selectedTabComponent}
              </div>
            </div>
-
-            <div className="tab-cotainer w-full mb-10">
-              {selectedTabComponent}
-            </div>
-          </div>
          )}
        </div>
      </Layout>
@@ -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;