Adding a price formatter

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 (
                         <tr
                           key={index}
@@ -64,7 +70,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                 <span className="text-sm text-thin-light-gray">
                                   Price:{" "}
                                   <span className="text-purple">
-                                    {value.price * 0.01}
+                                    {thePrice}
                                   </span>
                                 </span>
                                 <div className="flex items-center gap-4">
@@ -83,7 +89,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                     </span>
                                   </span>
                                   <span className="text-sm text-thin-light-gray">
-                                    Send to:{" "}
+                                    Sent to:{" "}
                                     <span className="text-purple">
                                       {" "}
                                       {value.job_to}
@@ -93,7 +99,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                               </div>
                             </div>
                           </td>
-  
+
                           <td className="text-right py-4 px-2">
                             <button
                               type="button"
@@ -106,7 +112,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                             </button>
                           </td>
                         </tr>
-                      )
+                      );
                     })
                   ) : (
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">