WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Fixed Offer Popup

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-01 10:37:59 +01:00
parent fa2102eb61
commit a5dbeaecbf
4 changed files with 234 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Helpers/PriceFormatter.jsx
+25 -22
View File
@@ -1,4 +1,4 @@
import React from 'react' import React from "react";
// export const PriceFormatter = (price, currency, currencyName) => { // export const PriceFormatter = (price, currency, currencyName) => {
// const supportedCurrencies = ["USD", "EUR", "GBP"]; // const supportedCurrencies = ["USD", "EUR", "GBP"];
@@ -17,32 +17,35 @@ import React from 'react'
// return `${formatter.format(price)} ${displayCurrencyName}`; // return `${formatter.format(price)} ${displayCurrencyName}`;
// }; // };
export const PriceFormatter = (
export const PriceFormatter = (price='00', currency='', currencyName='') => { price = "00",
currency = "",
currencyName = ""
) => {
// Convert the number to a string // Convert the number to a string
let numStr = String(price); let numStr = String(price);
// Split the string into integer and decimal parts // Split the string into integer and decimal parts
let parts = numStr.split('.'); let parts = numStr.split(".");
let integerPart = parts[0]; let integerPart = parts[0] || "";
let decimalPart = parts[1] || ''; let decimalPart = parts[1] || "";
// Add thousands separators to the integer part // Add thousands separators to the integer part
// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
let formattedInteger = integerPart; let formattedInteger = integerPart;
// Truncate or pad the decimal part to two decimal points // Truncate or pad the decimal part to two decimal points
let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0'); let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
// Combine the formatted integer and decimal parts // Combine the formatted integer and decimal parts
// let formattedNumber = formattedInteger + '.' + formattedDecimal; // let formattedNumber = formattedInteger + '.' + formattedDecimal;
// return formattedNumber; // return formattedNumber;
return ( return (
<span className='text-sm flex items-center'> <span className="text-sm flex items-center">
<sup>{currency || currencyName || ''}</sup> <sup>{currency || currencyName || ""}</sup>
<span className='px-1 font-bold text-lg'>{formattedInteger}</span> <span className="px-1 font-bold text-lg">{formattedInteger || ""}</span>
<sup>{formattedDecimal}</sup> <sup>{formattedDecimal || ""}</sup>
</span> </span>
) );
} };
src/components/MyTasks/MyOffersTable.jsx
+4 -1
View File
@@ -143,7 +143,10 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
<button <button
type="button" type="button"
onClick={() => { 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" className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
> >
src/components/Resources/index.jsx
+23 -24
View File
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
// import profileBanner from "../../assets/images/profile-cover.png"; // import profileBanner from "../../assets/images/profile-cover.png";
// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off? // import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
// import marketPlace from "../../data/marketplace_data.json"; // 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 products from "../../data/product_data.json";
import Layout from "../Partials/Layout"; import Layout from "../Partials/Layout";
import { import {
@@ -35,6 +35,8 @@ export default function Resources(props) {
setTab(value); setTab(value);
}; };
console.log("first")
// Category Components // Category Components
const tabComponents = { const tabComponents = {
onsale: <OnSaleTab products={onSaleProducts} />, onsale: <OnSaleTab products={onSaleProducts} />,
@@ -105,38 +107,35 @@ export default function Resources(props) {
<> <>
<Layout> <Layout>
<div className="nft-authprofile-wrapper w-full"> <div className="nft-authprofile-wrapper w-full">
{__resources.length == 0 || {__resources.length == 0 || Object.keys(__resources).length == 0 ? (
Object.keys(__resources).length == 0 ? (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
<LoadingSpinner size={16} color="sky-blue" /> <LoadingSpinner size={16} color="sky-blue" />
</div> </div>
) : ( ) : (
<div className="main-wrapper w-full"> <div className="main-wrapper w-full">
<div className="content-wrapper-profile-only w-full mb-6"> <div className="content-wrapper-profile-only w-full mb-6">
<div className="auth-tab-content relative mb-10"> <div className="auth-tab-content relative mb-10">
<div className="lg:flex justify-between"> <div className="lg:flex justify-between">
<div className="tab-items"> <div className="tab-items">
<ul className="lg:flex lg:space-x-14 space-x-8">
<TabList tabCategories={tab_categories} /> <TabList tabCategories={tab_categories} />
</ul> </div>
</div> <div style={{ transform: "translateY(-22px)" }}>
<div style={{ transform: "translateY(-22px)" }}> <Link
<Link to="/upload-product"
to="/upload-product" className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center" >
> Upload Product
Upload Product </Link>
</Link> </div>
</div> </div>
<div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
</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> </div>
<div className="tab-cotainer w-full mb-10">
{selectedTabComponent}
</div>
</div>
)} )}
</div> </div>
</Layout> </Layout>
src/components/jobPopout/OfferJobPopout.jsx
+163 -113
View File
@@ -1,64 +1,108 @@
import React, {useState} from 'react' import React, { useState } from "react";
import Detail from './popoutcomponent/Detail' import Detail from "./popoutcomponent/Detail";
import ModalCom from '../Helpers/ModalCom' import ModalCom from "../Helpers/ModalCom";
import { useNavigate } from 'react-router-dom' import { useNavigate } from "react-router-dom";
import usersService from '../../services/UsersService' import usersService from "../../services/UsersService";
import LoadingSpinner from '../Spinners/LoadingSpinner' import LoadingSpinner from "../Spinners/LoadingSpinner";
import { tableReload } from '../../store/TableReloads' import { tableReload } from "../../store/TableReloads";
import { useDispatch } from 'react-redux' import { useDispatch } from "react-redux";
function OfferJobPopout({details, onClose, situation}) { function OfferJobPopout({ details, onClose, situation }) {
const apiUrl = new usersService() const apiUrl = new usersService();
const navigate = useNavigate() const navigate = useNavigate();
const dispatch = useDispatch() 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 //FUNCTION TO HANDLE AN OFFER
const handleOffer = ({target:{name}}) => { const handleOffer = ({ target: { name } }) => {
const reqData = { const reqData = {
// offer_result: 100, // offer_result: 100,
offer_code: details.contract, offer_code: details.contract,
contract: details.contract contract: details.contract,
} };
//logic to determine the button pressed and set reqDate accordingly //logic to determine the button pressed and set reqDate accordingly
if(name == 'accept'){ if (name == "accept") {
setRequestStatus({loading: true, status: false, message: '', trigger: 'offer'}) setRequestStatus({
reqData.offer_result = 100 loading: true,
status: false,
message: "",
trigger: "offer",
});
reqData.offer_result = 100;
} }
if(name == 'reject'){ if (name == "reject") {
setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'}) setRequestStatus({
reqData.offer_result = 333 loading: true,
status: false,
message: "",
trigger: "reject",
});
reqData.offer_result = 333;
} }
// API CALL // API CALL
apiUrl.offersResponse(reqData).then(response => { apiUrl
if(response.status != 200 || response.data.internal_return < 0){ .offersResponse(reqData)
setRequestStatus({loading: false, status: false, message: `Unable to ${name} Offer, try again later`, trigger: ''}) .then((response) => {
return if (response.status != 200 || response.data.internal_return < 0) {
} setRequestStatus({
setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''}) loading: false,
setTimeout(()=>{ status: false,
onClose() message: `Unable to ${name} Offer, try again later`,
dispatch(tableReload({type:'MYTASKTABLE'})) trigger: "",
navigate('/mytask', {replace:true}) });
setRequestStatus({loading: false, status: false, message: '', trigger: ''}) return;
},2000) }
}).catch(error => { setRequestStatus({
setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''}) loading: false,
}).finally(()=>{ status: true,
setTimeout(()=>{ message: `Offer ${name}ed Successfully`,
setRequestStatus({loading: false, status: false, message: '', trigger: ''}) trigger: "",
},5000) });
}) 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 ( return (
<ModalCom action={onClose} situation={situation}> <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"> <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"> <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
Start Task Start Task
@@ -89,98 +133,104 @@ function OfferJobPopout({details, onClose, situation}) {
</svg> </svg>
</button> </button>
</div> </div>
<div className='md:flex bg-white rounded-lg shadow-lg'> <div className="md:flex bg-white rounded-lg shadow-lg">
<div className='p-4 w-full md:w-3/4 md:border-r-2'> <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> <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
{details.title}
</p>
{/* INPUT SECTION */} {/* INPUT SECTION */}
<div className='my-2 md:flex'> <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>
<div className="my-2 md:flex">
<Detail <Detail
label='Date' label="Offer Expire"
value={details.offer_added || 'default'} value={
details.expire &&
`${details.expire.split(" ")[0]} ${
details.expire.split(" ")[1].split(".")[0]
}`
}
/> />
</div> </div>
<div className='my-2 md:flex'> <div className="my-2 md:flex">
<Detail <Detail
label='Description' label="Price"
value={details.description} value={details.thePrice}
/> />
</div> </div>
<div className='my-2 md:flex'> <div className="my-2 md:flex">
<Detail <Detail
label='Offer Expire' label="Duration"
value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`} value={`${details.timeline_days} day(s)`}
/> />
</div> </div>
<div className='my-2 md:flex'> <div className="my-2 md:flex">
<Detail <Detail
label='Price' label="Detail"
value={`${details.price*0.01} ${details.currency}`} value={details.job_description || details.description}
/> />
</div> </div>
<div className='my-2 md:flex'>
<Detail
label='Duration'
value={`${details.timeline_days} day(s)`}
/>
</div>
<div className='my-2 md:flex'>
<Detail
label='Detail'
value={details.job_description || details.description}
/>
</div>
</div> </div>
{/* ACTION SECTION */} {/* ACTION SECTION */}
<div className='p-4 w-full md:w-1/4 h-full'> <div className="p-4 w-full md:w-1/4 h-full">
<div className='my-3 md:flex md:justify-center'> <div className="my-3 md:flex md:justify-center">
{requestStatus.loading && requestStatus.trigger == 'offer' ? {requestStatus.loading && requestStatus.trigger == "offer" ? (
<LoadingSpinner size={8} color='sky-blue' /> <LoadingSpinner size={8} color="sky-blue" />
: ) : (
<button <button
name='accept' name="accept"
onClick={handleOffer} onClick={handleOffer}
disabled={requestStatus.loading} disabled={requestStatus.loading}
className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'> className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
Accept Offer >
Accept Offer
</button> </button>
} )}
</div> </div>
<div className='mt-10 md:mt-20 md:flex md:justify-center'> <div className="mt-10 md:mt-20 md:flex md:justify-center">
{requestStatus.loading && requestStatus.trigger == 'reject' ? {requestStatus.loading && requestStatus.trigger == "reject" ? (
<LoadingSpinner size={8} color='sky-blue' /> <LoadingSpinner size={8} color="sky-blue" />
: ) : (
<button <button
name='reject' name="reject"
onClick={handleOffer} onClick={handleOffer}
disabled={requestStatus.loading} disabled={requestStatus.loading}
className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'> className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
Reject Offer >
Reject Offer
</button> </button>
} )}
</div> </div>
{/* ERROR DISPLAY AND SUBMIT BUTTON */} {/* ERROR DISPLAY AND SUBMIT BUTTON */}
{requestStatus.message != "" && ( {requestStatus.message != "" &&
!requestStatus.status ? (!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]`}> <div
{requestStatus.message} 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]`}
</div>) >
: {requestStatus.message}
requestStatus.status && </div>
(<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} requestStatus.status && (
</div> <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 */} {/* End of error or success display */}
</div> </div>
</div> </div>
@@ -188,18 +238,18 @@ function OfferJobPopout({details, onClose, situation}) {
{/* close button */} {/* close button */}
<div className="p-6 flex justify-end"> <div className="p-6 flex justify-end">
<button <button
onClick={onClose} onClick={onClose}
disabled={requestStatus.loading} disabled={requestStatus.loading}
type="button" type="button"
className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full" className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
> >
<span className="text-gradient">Cancel</span> <span className="text-gradient">Cancel</span>
</button> </button>
</div> </div>
{/* end of close button */} {/* end of close button */}
</div> </div>
</ModalCom> </ModalCom>
) );
} }
export default OfferJobPopout export default OfferJobPopout;