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

Adding a price formatter

Browse Source
This commit was merged in pull request #170.
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-14 12:44:52 +01:00
parent 610768f4a5
commit 4e275da916
6 changed files with 527 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Helpers/PriceFormatter.jsx
+16
View File
@@ -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}`;
};
src/components/MyActiveJobs/MyActiveJobTable.jsx
+9 -4
View File
@@ -1,8 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import dataImage2 from "../../assets/images/data-table-user-2.png"; import dataImage2 from "../../assets/images/data-table-user-2.png";
import { useNavigate, useLocation } from "react-router-dom";
import { handlePagingFunc } from "../Pagination/HandlePagination"; import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList"; import PaginatedList from "../Pagination/PaginatedList";
import { PriceFormatter } from "../Helpers/PriceFormatter";
export default function MyActiveJobTable({ MyJobList, className }) { export default function MyActiveJobTable({ MyJobList, className }) {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -43,7 +44,11 @@ export default function MyActiveJobTable({ MyJobList, className }) {
MyJobList.result_list.length > 0 ? ( MyJobList.result_list.length > 0 ? (
currentActiveJobList.map((value, index) => { currentActiveJobList.map((value, index) => {
let deliveryDate = value?.delivery_date?.split(" ")[0]; let deliveryDate = value?.delivery_date?.split(" ")[0];
let thePrice = PriceFormatter(
value?.price * 0.01,
value?.currency_code,
value?.currency
);
return ( return (
<tr <tr
key={index} key={index}
@@ -66,7 +71,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
Price:{" "} Price:{" "}
<span className="text-purple"> <span className="text-purple">
{value.price * 0.01} {thePrice}
</span> </span>
</span> </span>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
@@ -85,7 +90,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
</span> </span>
</span> </span>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
Send to:{" "} Sent to:{" "}
<span className="text-purple"> <span className="text-purple">
{" "} {" "}
{value.job_to === null {value.job_to === null
src/components/MyActiveJobs/MyPastDueJobs.jsx
+1 -3
View File
@@ -11,9 +11,7 @@ export default function MyPastDueJobs(props) {
}; };
return ( return (
<Layout> <Layout>
<CommonHead <CommonHead commonHeadData={props.commonHeadData} />
commonHeadData={props.commonHeadData}
/>
<div className="notification-page w-full mb-10"> <div className="notification-page w-full mb-10">
<div className="notification-wrapper w-full"> <div className="notification-wrapper w-full">
{/* heading */} {/* heading */}
src/components/MyPendingJobs/MyPendingJobTable.jsx
+10 -4
View File
@@ -1,8 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import dataImage2 from "../../assets/images/data-table-user-2.png"; import dataImage2 from "../../assets/images/data-table-user-2.png";
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
import { handlePagingFunc } from "../Pagination/HandlePagination"; import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList"; import PaginatedList from "../Pagination/PaginatedList";
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
import { PriceFormatter } from "../Helpers/PriceFormatter";
export default function MyPendingJobTable({ MyJobList, className }) { 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 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 ? ( MyJobList.result_list.length > 0 ? (
currentActiveJobList.map((value, index) => { currentActiveJobList.map((value, index) => {
let deliveryDate = value?.expire?.split(" ")[0]; let deliveryDate = value?.expire?.split(" ")[0];
let thePrice = PriceFormatter(
value?.price * 0.01,
value?.currency_code,
value?.currency
);
return ( return (
<tr <tr
key={index} key={index}
@@ -64,7 +70,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
Price:{" "} Price:{" "}
<span className="text-purple"> <span className="text-purple">
{value.price * 0.01} {thePrice}
</span> </span>
</span> </span>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@@ -83,7 +89,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
</span> </span>
</span> </span>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
Send to:{" "} Sent to:{" "}
<span className="text-purple"> <span className="text-purple">
{" "} {" "}
{value.job_to} {value.job_to}
@@ -106,7 +112,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
</button> </button>
</td> </td>
</tr> </tr>
) );
}) })
) : ( ) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
src/components/MyTasks/MyJobTable.jsx
+13 -6
View File
@@ -4,6 +4,7 @@ import PaginatedList from "../Pagination/PaginatedList";
import { handlePagingFunc } from "../Pagination/HandlePagination"; import { handlePagingFunc } from "../Pagination/HandlePagination";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import { useNavigate, useLocation } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import { PriceFormatter } from "../Helpers/PriceFormatter";
const noTasksBg = require("../../assets/images/no-task-background.jpg"); const noTasksBg = require("../../assets/images/no-task-background.jpg");
@@ -58,7 +59,13 @@ export default function MyJobTable({ className, ActiveJobList }) {
<div className="relative w-full sm:rounded-lg"> <div className="relative w-full sm:rounded-lg">
<div className="h-auto w-full"> <div className="h-auto w-full">
{ActiveJobList?.data?.length > 0 && {ActiveJobList?.data?.length > 0 &&
currentTask?.map((task, idx) => ( currentTask?.map((task, idx) => {
let thePrice = PriceFormatter(
task?.price * 0.01,
task?.currency_code,
task?.currency
);
return (
<div <div
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50" className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
key={idx} key={idx}
@@ -81,11 +88,9 @@ export default function MyJobTable({ className, ActiveJobList }) {
</span> </span>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
Price: Price:
<span className="text-purple ml-1"> <span className="text-purple ml-1">{thePrice}</span>
{Number(task?.price) * 0.01}
</span> </span>
</span> <div className="flex gap-4 items-center">
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
Duration: Duration:
<span className="text-purple ml-1"> <span className="text-purple ml-1">
@@ -109,6 +114,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="flex justify-center items-center py-4 px-2"> <div className="flex justify-center items-center py-4 px-2">
<button <button
@@ -124,7 +130,8 @@ export default function MyJobTable({ className, ActiveJobList }) {
</button> </button>
</div> </div>
</div> </div>
))} );
})}
{ActiveJobList?.data?.length <= 0 && ( {ActiveJobList?.data?.length <= 0 && (
<div className="flex flex-col items-center justify-center gap-9 my-5"> <div className="flex flex-col items-center justify-center gap-9 my-5">
src/components/MyTasks/MyOffersTable.jsx
+15 -20
View File
@@ -6,9 +6,9 @@ import top4 from "../../assets/images/top-buyer-4.png";
import Icons from "../Helpers/Icons"; import Icons from "../Helpers/Icons";
import SliderCom from "../Helpers/SliderCom"; import SliderCom from "../Helpers/SliderCom";
import OfferJobPopout from '../jobPopout/OfferJobPopout' import OfferJobPopout from "../jobPopout/OfferJobPopout";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import { PriceFormatter } from "../Helpers/PriceFormatter";
export default function MyOffersTable({ className, MyActiveOffersList }) { 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 let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
@@ -52,7 +52,7 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
}; };
if (!MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0) { if (!MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0) {
return(''); // want blank or no appear when no items return ""; // want blank or no appear when no items
} }
return ( return (
@@ -114,9 +114,15 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
</div> </div>
<div className="slider-content"> <div className="slider-content">
<SliderCom settings={settings} selector={sellSlider}> <SliderCom settings={settings} selector={sellSlider}>
{ {MyActiveOffersList &&
MyActiveOffersList && MyActiveOffersList?.result_list?.length > 0 && MyActiveOffersList?.result_list?.length > 0 &&
MyActiveOffersList?.result_list?.map((value, index) => ( MyActiveOffersList?.result_list?.map((value, index) => {
let thePrice = PriceFormatter(
value?.price * 0.01,
value?.currency_code,
value?.currency
);
return (
<div className="item" key={index}> <div className="item" key={index}>
<div className="offer-slide-item flex flex-col justify-between items-center"> <div className="offer-slide-item flex flex-col justify-between items-center">
{/* title */} {/* title */}
@@ -131,15 +137,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
{value.timeline_days} Days {value.timeline_days} Days
</p> </p>
<div className="my-2 flex space-x-1 items-center text-purple text-xs"> <div className="my-2 flex space-x-1 items-center text-purple text-xs">
<span>{value.price*0.01} {value.currency}</span> <span>{thePrice}</span>
</div> </div>
</div> </div>
{/* items */}
{/* <div className="flex justify-center">
<div className="flex space-x-1 items-center text-purple text-xs">
<span>{value.price*0.01} {value.currency}</span>
</div>
</div> */}
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@@ -149,14 +149,10 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
> >
Start Task Start Task
</button> </button>
</div> </div>
</div> </div>
)) );
} })}
{/* <div className="item">*/} {/* <div className="item">*/}
{/* /!* img *!/*/} {/* /!* img *!/*/}
@@ -411,7 +407,6 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
/> />
)} )}
{/* End of Offer Job Popout */} {/* End of Offer Job Popout */}
</div> </div>
</> </>
); );