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
+4 -5
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,8 +107,7 @@ 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>
@@ -116,9 +117,7 @@ export default function Resources(props) {
<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
src/components/jobPopout/OfferJobPopout.jsx
+143 -93
View File
@@ -1,60 +1,104 @@
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({
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: ''}) setRequestStatus({
setTimeout(()=>{ loading: false,
onClose() status: true,
dispatch(tableReload({type:'MYTASKTABLE'})) message: `Offer ${name}ed Successfully`,
navigate('/mytask', {replace:true}) trigger: "",
setRequestStatus({loading: false, status: false, message: '', trigger: ''}) });
},2000) setTimeout(() => {
}).catch(error => { onClose();
setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''}) dispatch(tableReload({ type: "MYTASKTABLE" }));
}).finally(()=>{ navigate("/mytask", { replace: true });
setTimeout(()=>{ setRequestStatus({
setRequestStatus({loading: false, status: false, message: '', trigger: ''}) loading: false,
},5000) 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}>
@@ -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]}`}
/>
</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)`} value={`${details.timeline_days} day(s)`}
/> />
</div> </div>
<div className='my-2 md:flex'> <div className="my-2 md:flex">
<Detail <Detail
label='Detail' label="Detail"
value={details.job_description || details.description} value={details.job_description || details.description}
/> />
</div> </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
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} {requestStatus.message}
</div>) </div>
: ) : (
requestStatus.status && 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]`}> <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.message}
</div> </div>
) )
)} ))}
{/* End of error or success display */} {/* End of error or success display */}
</div> </div>
</div> </div>
@@ -199,7 +249,7 @@ function OfferJobPopout({details, onClose, situation}) {
{/* end of close button */} {/* end of close button */}
</div> </div>
</ModalCom> </ModalCom>
) );
} }
export default OfferJobPopout export default OfferJobPopout;