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

price formatter style changed

Browse Source
This commit was merged in pull request #200.
This commit is contained in:
victorAnumudu
2023-06-22 14:24:56 +01:00
parent 03b79f0e0c
commit a6c6c36fbc
9 changed files with 55 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Cards/AvailableJobsCard.jsx
+1 -1
View File
@@ -187,7 +187,7 @@ export default function AvailableJobsCard({
</div> </div>
</div> */} </div> */}
<div className="block sm:flex flex-wrap gap-4"> <div className="block sm:flex flex-wrap gap-4">
<p className="text-sm text-thin-light-gray"> <p className="text-sm text-thin-light-gray flex flext-start gap-1">
Price: <span className="text-purple">{thePrice}</span> Price: <span className="text-purple">{thePrice}</span>
</p> </p>
<p className="text-sm text-thin-light-gray"> <p className="text-sm text-thin-light-gray">
src/components/FamilyAcc/Tabs/FamilyTasks.jsx
+1 -1
View File
@@ -72,7 +72,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
{value.title} {value.title}
</h1> </h1>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray flex flex-start gap-1">
Price:{" "} Price:{" "}
<span className="text-purple"> <span className="text-purple">
{thePrice} {thePrice}
src/components/Helpers/PriceFormatter.jsx
+45 -13
View File
@@ -1,16 +1,48 @@
export const PriceFormatter = (price, currency, currencyName) => { import React from 'react'
const supportedCurrencies = ["USD", "EUR", "GBP"];
const symbolFormatter = supportedCurrencies.includes(currency)
? currency
: undefined;
const formatter = new Intl.NumberFormat("en", { // export const PriceFormatter = (price, currency, currencyName) => {
style: symbolFormatter, // const supportedCurrencies = ["USD", "EUR", "GBP"];
currencyDisplay: "symbol", // const symbolFormatter = supportedCurrencies.includes(currency)
minimumFractionDigits: 2, // ? 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 (
<span className='text-sm flex items-center'>
<sup>{currency || currencyName || ''}</sup>
<span className='px-1 font-bold text-lg'>{formattedInteger}</span>
<sup>{formattedDecimal}</sup>
</span>
)
}
src/components/MyActiveJobs/MyActiveJobTable.jsx
+1 -1
View File
@@ -68,7 +68,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
{value.title} {value.title}
</h1> </h1>
<div>{value.description}</div> <div>{value.description}</div>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray flex flext-start gap-1">
Price:{" "} Price:{" "}
<span className="text-purple"> <span className="text-purple">
{thePrice} {thePrice}
src/components/MyJobs/MyJobTable.jsx
+1 -1
View File
@@ -119,7 +119,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
{value.title} {value.title}
</h1> </h1>
<div>{value.description}</div> <div>{value.description}</div>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray flex items-start gap-1">
Price: <span className="text-purple">{thePrice}</span> Price: <span className="text-purple">{thePrice}</span>
</span> </span>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
src/components/MyPendingJobs/MyPendingJobTable.jsx
+1 -1
View File
@@ -67,7 +67,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
{value.title} {value.title}
</h1> </h1>
<div>{value.description}</div> <div>{value.description}</div>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray flex items-start gap-1">
Price:{" "} Price:{" "}
<span className="text-purple"> <span className="text-purple">
{thePrice} {thePrice}
src/components/MyTasks/MyJobTable.jsx
+1 -1
View File
@@ -86,7 +86,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
<span className="text-base text-gray-600"> <span className="text-base text-gray-600">
{task?.description} {task?.description}
</span> </span>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray flex flext-start gap-1">
Price: Price:
<span className="text-purple ml-1">{thePrice}</span> <span className="text-purple ml-1">{thePrice}</span>
</span> </span>
src/components/jobPopout/DeleteJobPopout.jsx
+1 -1
View File
@@ -118,7 +118,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
<p className="text-xl tracking-wide text-dark-gray dark:text-white"> <p className="text-xl tracking-wide text-dark-gray dark:text-white">
{details.title} {details.title}
</p> </p>
<p className="text-lg tracking-wide text-dark-gray dark:text-white"> <p className="text-lg tracking-wide text-dark-gray dark:text-white flex items-start gap-1">
Price: {details.thePrice} Price: {details.thePrice}
</p> </p>
<p className="text-lg tracking-wide text-dark-gray dark:text-white"> <p className="text-lg tracking-wide text-dark-gray dark:text-white">
src/components/jobPopout/PendingJobsPopout.jsx
+3 -1
View File
@@ -4,6 +4,7 @@ import ModalCom from "../Helpers/ModalCom";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import { PriceFormatter } from "../Helpers/PriceFormatter";
const showSuccessToast = (message) => { const showSuccessToast = (message) => {
toast.success(message, { toast.success(message, {
@@ -133,7 +134,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
<div className="my-2 md:flex"> <div className="my-2 md:flex">
<Detail <Detail
label="Price" label="Price"
value={`${details.price * 0.01} ${details.currency}`} // value={`${details.price * 0.01} ${details.currency}`}
value={PriceFormatter(details.price * 0.01, details?.currency_code, details.currency)}
/> />
</div> </div>