From 4e275da9167a68d59849ac8d066f8461741b9dc7 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 14 Jun 2023 12:44:52 +0100 Subject: [PATCH] Adding a price formatter --- src/components/Helpers/PriceFormatter.jsx | 16 + .../MyActiveJobs/MyActiveJobTable.jsx | 13 +- src/components/MyActiveJobs/MyPastDueJobs.jsx | 58 +- .../MyPendingJobs/MyPendingJobTable.jsx | 16 +- src/components/MyTasks/MyJobTable.jsx | 129 +-- src/components/MyTasks/MyOffersTable.jsx | 795 +++++++++--------- 6 files changed, 527 insertions(+), 500 deletions(-) create mode 100644 src/components/Helpers/PriceFormatter.jsx diff --git a/src/components/Helpers/PriceFormatter.jsx b/src/components/Helpers/PriceFormatter.jsx new file mode 100644 index 0000000..6cd1483 --- /dev/null +++ b/src/components/Helpers/PriceFormatter.jsx @@ -0,0 +1,16 @@ +export const PriceFormatter = (price, currency, currencyName) => { + const supportedCurrencies = ["USD", "EUR", "GBP"]; + const symbolFormatter = supportedCurrencies.includes(currency) + ? currency + : undefined; + + const formatter = new Intl.NumberFormat("en", { + style: symbolFormatter, + currencyDisplay: "symbol", + minimumFractionDigits: 2, + }); + + const displayCurrencyName = symbolFormatter ? "" : currencyName; + + return `${formatter.format(price)} ${displayCurrencyName}`; +}; diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index 0d794c5..53b7b28 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -1,8 +1,9 @@ import React, { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; import dataImage2 from "../../assets/images/data-table-user-2.png"; -import { useNavigate, useLocation } from "react-router-dom"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; export default function MyActiveJobTable({ MyJobList, className }) { const navigate = useNavigate(); @@ -43,7 +44,11 @@ export default function MyActiveJobTable({ MyJobList, className }) { MyJobList.result_list.length > 0 ? ( currentActiveJobList.map((value, index) => { let deliveryDate = value?.delivery_date?.split(" ")[0]; - + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); return ( Price:{" "} - {value.price * 0.01} + {thePrice}
@@ -85,7 +90,7 @@ export default function MyActiveJobTable({ MyJobList, className }) { - Send to:{" "} + Sent to:{" "} {" "} {value.job_to === null diff --git a/src/components/MyActiveJobs/MyPastDueJobs.jsx b/src/components/MyActiveJobs/MyPastDueJobs.jsx index 880ba88..a0f762b 100644 --- a/src/components/MyActiveJobs/MyPastDueJobs.jsx +++ b/src/components/MyActiveJobs/MyPastDueJobs.jsx @@ -5,38 +5,36 @@ import CommonHead from "../UserHeader/CommonHead"; import MyActiveJobTable from "./MyActiveJobTable"; export default function MyPastDueJobs(props) { - const [selectTab, setValue] = useState("today"); - const filterHandler = (value) => { - setValue(value); - }; - return ( - - -
-
- {/* heading */} -
-
-

+ const [selectTab, setValue] = useState("today"); + const filterHandler = (value) => { + setValue(value); + }; + return ( + + +
+
+ {/* heading */} +
+
+

- Pass Due Job(s) + Pass Due Job(s) -

-
-
-
filterHandler("today")} - className="relative" - >
-
-
- -
+

- - ); +
+
filterHandler("today")} + className="relative" + >
+
+
+ +
+
+ + ); } diff --git a/src/components/MyPendingJobs/MyPendingJobTable.jsx b/src/components/MyPendingJobs/MyPendingJobTable.jsx index e807d21..0d93054 100644 --- a/src/components/MyPendingJobs/MyPendingJobTable.jsx +++ b/src/components/MyPendingJobs/MyPendingJobTable.jsx @@ -1,8 +1,9 @@ import React, { useState } from "react"; import dataImage2 from "../../assets/images/data-table-user-2.png"; -import PendingJobsPopout from "../jobPopout/PendingJobsPopout"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; +import PendingJobsPopout from "../jobPopout/PendingJobsPopout"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; export default function MyPendingJobTable({ MyJobList, className }) { let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW @@ -42,6 +43,11 @@ export default function MyPendingJobTable({ MyJobList, className }) { MyJobList.result_list.length > 0 ? ( currentActiveJobList.map((value, index) => { let deliveryDate = value?.expire?.split(" ")[0]; + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); return ( Price:{" "} - {value.price * 0.01} + {thePrice}
@@ -83,7 +89,7 @@ export default function MyPendingJobTable({ MyJobList, className }) { - Send to:{" "} + Sent to:{" "} {" "} {value.job_to} @@ -93,7 +99,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
- + +
+ +
- - ))} + ); + })} {ActiveJobList?.data?.length <= 0 && (
diff --git a/src/components/MyTasks/MyOffersTable.jsx b/src/components/MyTasks/MyOffersTable.jsx index 0c80518..1c34560 100644 --- a/src/components/MyTasks/MyOffersTable.jsx +++ b/src/components/MyTasks/MyOffersTable.jsx @@ -6,413 +6,408 @@ import top4 from "../../assets/images/top-buyer-4.png"; import Icons from "../Helpers/Icons"; import SliderCom from "../Helpers/SliderCom"; -import OfferJobPopout from '../jobPopout/OfferJobPopout' +import OfferJobPopout from "../jobPopout/OfferJobPopout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; +export default function MyOffersTable({ className, MyActiveOffersList }) { + let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW + const settings = { + arrows: false, + dots: false, + infinite: MyActiveOffersList?.result_list?.length > 4, + autoplay: true, + slidesToShow: 4, + slidesToScroll: 1, + responsive: [ + { + breakpoint: 426, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: MyActiveOffersList?.result_list?.length > 2, + }, + }, + ], + }; -export default function MyOffersTable({ className, MyActiveOffersList}) { - let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW - const settings = { - arrows: false, - dots: false, - infinite: MyActiveOffersList?.result_list?.length > 4, - autoplay: true, - slidesToShow: 4, - slidesToScroll: 1, - responsive: [ - { - breakpoint: 426, - settings: { - slidesToShow: 2, - slidesToScroll: 1, - infinite: MyActiveOffersList?.result_list?.length > 2, - }, - }, - ], - }; + console.log("YES WE SEE OFFERS", MyActiveOffersList); + const sellSlider = useRef(null); + //const buySlider = useRef(null); + const prevHandler = (value) => { + if (value === "sell") { + sellSlider.current.slickPrev(); + } + // if (value === "buy") { + // buySlider.current.slickPrev(); + // } + }; + const nextHandler = (value) => { + if (value === "sell") { + sellSlider.current.slickNext(); + } + // if (value === "buy") { + // buySlider.current.slickNext(); + // } + }; - console.log("YES WE SEE OFFERS",MyActiveOffersList); - const sellSlider = useRef(null); - //const buySlider = useRef(null); - const prevHandler = (value) => { - if (value === "sell") { - sellSlider.current.slickPrev(); - } - // if (value === "buy") { - // buySlider.current.slickPrev(); - // } - }; - const nextHandler = (value) => { - if (value === "sell") { - sellSlider.current.slickNext(); - } - // if (value === "buy") { - // buySlider.current.slickNext(); - // } - }; + if (!MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0) { + return ""; // want blank or no appear when no items + } - if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){ - return(''); // want blank or no appear when no items - } - - return ( - <> -
-
-
-
-
-

- Offers -

-
- - -
-
-
- - { - MyActiveOffersList && MyActiveOffersList?.result_list?.length > 0 && - MyActiveOffersList?.result_list?.map((value, index) => ( -
-
- {/* title */} -
-

- {value.title} -

-
- {/* username */} -
-

- {value.timeline_days} Days -

-
- {value.price*0.01} {value.currency} -
-
- {/* items */} - {/*
-
- {value.price*0.01} {value.currency} -
-
*/} - - -
- -
- )) - } - - - - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - -
-
+ return ( + <> +
+
+
+
+
+

+ Offers +

+
+ +
+
+
+ + {MyActiveOffersList && + MyActiveOffersList?.result_list?.length > 0 && + MyActiveOffersList?.result_list?.map((value, index) => { + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + return ( +
+
+ {/* title */} +
+

+ {value.title} +

+
+ {/* username */} +
+

+ {value.timeline_days} Days +

+
+ {thePrice} +
+
+ +
+
+ ); + })} - {/* Offer Job Popout */} - {offerPopout.show && ( - { - setOfferPopout({ show: false, data: {} }); - }} - situation={offerPopout.show} - /> - )} - {/* End of Offer Job Popout */} - + {/*
*/} + {/* /!* img *!/*/} + {/*
*/} + {/*
*/} + {/* top*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/* /!* title *!/*/} + {/*
*/} + {/*

*/} + {/* Brokln Simons*/} + {/*

*/} + {/*
*/} + {/* /!* username *!/*/} + {/*
*/} + {/*

*/} + {/* @broklinslam_75*/} + {/*

*/} + {/*
*/} + {/* /!* items *!/*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/* 3435 Items*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* /!* img *!/*/} + {/*
*/} + {/*
*/} + {/* top*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/* /!* title *!/*/} + {/*
*/} + {/*

*/} + {/* Brokln Simons*/} + {/*

*/} + {/*
*/} + {/* /!* username *!/*/} + {/*
*/} + {/*

*/} + {/* @broklinslam_75*/} + {/*

*/} + {/*
*/} + {/* /!* items *!/*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/* 3435 Items*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* /!* img *!/*/} + {/*
*/} + {/*
*/} + {/* top*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/* /!* title *!/*/} + {/*
*/} + {/*

*/} + {/* Brokln Simons*/} + {/*

*/} + {/*
*/} + {/* /!* username *!/*/} + {/*
*/} + {/*

*/} + {/* @broklinslam_75*/} + {/*

*/} + {/*
*/} + {/* /!* items *!/*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/* 3435 Items*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* /!* img *!/*/} + {/*
*/} + {/*
*/} + {/* top*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/* /!* title *!/*/} + {/*
*/} + {/*

*/} + {/* Brokln Simons*/} + {/*

*/} + {/*
*/} + {/* /!* username *!/*/} + {/*
*/} + {/*

*/} + {/* @broklinslam_75*/} + {/*

*/} + {/*
*/} + {/* /!* items *!/*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/* 3435 Items*/} + {/*
*/} + {/*
*/} + {/*
*/} + +
- - ); +
+
+ + {/* Offer Job Popout */} + {offerPopout.show && ( + { + setOfferPopout({ show: false, data: {} }); + }} + situation={offerPopout.show} + /> + )} + {/* End of Offer Job Popout */} +
+ + ); }