From a6c6c36fbcd86f7cd0f8c8c59cde20cdf31a98bd Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 22 Jun 2023 14:24:56 +0100 Subject: [PATCH] price formatter style changed --- src/components/Cards/AvailableJobsCard.jsx | 2 +- src/components/FamilyAcc/Tabs/FamilyTasks.jsx | 2 +- src/components/Helpers/PriceFormatter.jsx | 58 ++++++++++++++----- .../MyActiveJobs/MyActiveJobTable.jsx | 2 +- src/components/MyJobs/MyJobTable.jsx | 2 +- .../MyPendingJobs/MyPendingJobTable.jsx | 2 +- src/components/MyTasks/MyJobTable.jsx | 2 +- src/components/jobPopout/DeleteJobPopout.jsx | 2 +- .../jobPopout/PendingJobsPopout.jsx | 4 +- 9 files changed, 55 insertions(+), 21 deletions(-) diff --git a/src/components/Cards/AvailableJobsCard.jsx b/src/components/Cards/AvailableJobsCard.jsx index 5b795b3..755bc17 100644 --- a/src/components/Cards/AvailableJobsCard.jsx +++ b/src/components/Cards/AvailableJobsCard.jsx @@ -187,7 +187,7 @@ export default function AvailableJobsCard({ */}
-

+

Price: {thePrice}

diff --git a/src/components/FamilyAcc/Tabs/FamilyTasks.jsx b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx index 0649980..455824c 100644 --- a/src/components/FamilyAcc/Tabs/FamilyTasks.jsx +++ b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx @@ -72,7 +72,7 @@ export default function FamilyTasks({ familyData, className, loader }) { {value.title}

- + Price:{" "} {thePrice} diff --git a/src/components/Helpers/PriceFormatter.jsx b/src/components/Helpers/PriceFormatter.jsx index 6cd1483..de417a3 100644 --- a/src/components/Helpers/PriceFormatter.jsx +++ b/src/components/Helpers/PriceFormatter.jsx @@ -1,16 +1,48 @@ -export const PriceFormatter = (price, currency, currencyName) => { - const supportedCurrencies = ["USD", "EUR", "GBP"]; - const symbolFormatter = supportedCurrencies.includes(currency) - ? currency - : undefined; +import React from 'react' - const formatter = new Intl.NumberFormat("en", { - style: symbolFormatter, - currencyDisplay: "symbol", - minimumFractionDigits: 2, - }); +// export const PriceFormatter = (price, currency, currencyName) => { +// const supportedCurrencies = ["USD", "EUR", "GBP"]; +// const symbolFormatter = supportedCurrencies.includes(currency) +// ? currency +// : undefined; - const displayCurrencyName = symbolFormatter ? "" : currencyName; +// const formatter = new Intl.NumberFormat("en", { +// style: symbolFormatter, +// currencyDisplay: "symbol", +// minimumFractionDigits: 2, +// }); - return `${formatter.format(price)} ${displayCurrencyName}`; -}; +// const displayCurrencyName = symbolFormatter ? "" : currencyName; + +// return `${formatter.format(price)} ${displayCurrencyName}`; +// }; + + +export const PriceFormatter = (price='00', currency='', currencyName='') => { + // Convert the number to a string +let numStr = String(price); + +// 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; + +// 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; + +// return formattedNumber; + return ( + + {currency || currencyName || ''} + {formattedInteger} + {formattedDecimal} + + ) +} diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index 53b7b28..506e08c 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -68,7 +68,7 @@ export default function MyActiveJobTable({ MyJobList, className }) { {value.title}
{value.description}
- + Price:{" "} {thePrice} diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index f0e5bfa..606bcb4 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -119,7 +119,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { {value.title}
{value.description}
- + Price: {thePrice} diff --git a/src/components/MyPendingJobs/MyPendingJobTable.jsx b/src/components/MyPendingJobs/MyPendingJobTable.jsx index 0d93054..9cf4fc7 100644 --- a/src/components/MyPendingJobs/MyPendingJobTable.jsx +++ b/src/components/MyPendingJobs/MyPendingJobTable.jsx @@ -67,7 +67,7 @@ export default function MyPendingJobTable({ MyJobList, className }) { {value.title}
{value.description}
- + Price:{" "} {thePrice} diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 50a083d..0d47ce2 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -86,7 +86,7 @@ export default function MyJobTable({ className, ActiveJobList }) { {task?.description} - + Price: {thePrice} diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx index 421a96e..7b0cc71 100644 --- a/src/components/jobPopout/DeleteJobPopout.jsx +++ b/src/components/jobPopout/DeleteJobPopout.jsx @@ -118,7 +118,7 @@ function DeleteJobPopout({ details, onClose, situation }) {

{details.title}

-

+

Price: {details.thePrice}

diff --git a/src/components/jobPopout/PendingJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx index f42f444..5b2331f 100644 --- a/src/components/jobPopout/PendingJobsPopout.jsx +++ b/src/components/jobPopout/PendingJobsPopout.jsx @@ -4,6 +4,7 @@ import ModalCom from "../Helpers/ModalCom"; import usersService from "../../services/UsersService"; import { toast } from "react-toastify"; import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; const showSuccessToast = (message) => { toast.success(message, { @@ -133,7 +134,8 @@ function PendingJobsPopout({ details, onClose, situation }) {

-- 2.34.1