chore(voucher): rename details in user link

apps/voucher/components/user-links/index.tsx

@@ -6,6 +6,7 @@ import styles from "./user-links.module.css"
 
 import { formatDate } from "@/utils/helpers"
 import { Status, WithdrawLink } from "@/lib/graphql/generated"
+import { formatCurrency } from "@/lib/utils"
 
 interface UserLinksProps {
   withdrawLink: WithdrawLink
@@ -44,14 +45,14 @@ export default function UserLinks({ withdrawLink }: UserLinksProps) {
                   withdrawLink.status === Status.Paid
                     ? "#a9a9a975"
                     : withdrawLink.status === Status.Active
-                      ? "#207f3c75"
-                      : "white",
+                    ? "#207f3c75"
+                    : "white",
                 color:
                   withdrawLink.status === Status.Paid
                     ? "#757575"
                     : withdrawLink.status === Status.Active
-                      ? "#0a802d"
-                      : "white",
+                    ? "#0a802d"
+                    : "white",
               }}
               className={styles.Status}
             >
@@ -66,15 +67,21 @@ export default function UserLinks({ withdrawLink }: UserLinksProps) {
           </div>
           <div className={styles.DetailsContainer}>
             <div className={styles.LinkDetails}>
-              <Bold>Voucher Amount</Bold>{" "}
-              <p>${withdrawLink.voucherAmountInCents / 100} US</p>
+              <Bold>Voucher Value</Bold>{" "}
+              <p>
+                {formatCurrency({
+                  amount: withdrawLink.voucherAmountInCents / 100,
+                  currency: "USD",
+                })}
+              </p>
             </div>
             <div className={styles.LinkDetails}>
-              <Bold>Percent commission</Bold> <p>{withdrawLink.commissionPercentage}</p>
+              <Bold>Percent commission</Bold>
+              <p>{withdrawLink.commissionPercentage}</p>
             </div>
             <div className={styles.LinkDetails}>
-              <Bold>Sales amount</Bold>{" "}
-              <p>${withdrawLink?.salesAmountInCents / 100} US</p>
+              <Bold>Voucher Price</Bold>
+              <p>{withdrawLink?.displayVoucherPrice}</p>
             </div>
           </div>
         </div>