fix: receipt amount (#459)

GaloyMoney · Apr 17, 2023 · 1e0b54f · 1e0b54f
1 parent 2197b53
commit 1e0b54f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 25 deletions.
diff --git a/components/ParsePOSPayment/index.tsx b/components/ParsePOSPayment/index.tsx
@@ -17,7 +17,7 @@ import ReceiveInvoice from "./Receive-Invoice"
 import { useDisplayCurrency } from "../../lib/use-display-currency"
 import { Currency } from "../../lib/graphql/generated"
 import { ParsedUrlQuery } from "querystring"
-import CurrencyInput from "react-currency-input-field"
+import CurrencyInput, { formatValue } from "react-currency-input-field"
 
 function isRunningStandalone() {
   return window.matchMedia("(display-mode: standalone)").matches
@@ -174,6 +174,11 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
           : safeAmt.toFixed(currencyMetadata.fractionDigits)
     }
     if (isNaN(Number(amt))) return
+    const formattedValue = formatValue({
+      value: amt,
+      intlConfig: { locale: navigator.language, currency: display },
+    })
+    localStorage.setItem("formattedFiatValue", formattedValue)
     setValueInFiat(amt)
 
     // 2) format the sats amount
@@ -183,6 +188,7 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
         : currencyToSats(Number(currentAmount), display, currencyMetadata.fractionDigits)
             .convertedCurrencyAmount
     satsAmt = safeAmount(satsAmt).toFixed()
+    localStorage.setItem("formattedSatsValue", `${formatOperand(satsAmt)} sats`)
     setValueInSats(satsAmt)
 
     // 3) update the query params
@@ -303,7 +309,7 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
           className={`${unit === AmountUnit.Sat ? styles.zero_order : styles.first_order}
           }`}
         >
-          {unit === "CENT" ? "≈" : ""} {formatOperand(valueInSats.toString())} sat
+          {unit === "CENT" ? "≈" : ""} {formatOperand(valueInSats.toString())} sats
           {!hasLoaded.current && (
             <span
               style={{

diff --git a/components/PaymentOutcome/index.tsx b/components/PaymentOutcome/index.tsx
@@ -2,13 +2,10 @@ import { useSubscription } from "@galoymoney/client"
 import { useRouter } from "next/router"
 import React, { useRef } from "react"
 import Image from "react-bootstrap/Image"
-import useSatPrice from "../../lib/use-sat-price"
 import { ACTIONS, ACTION_TYPE } from "../../pages/_reducer"
-import { formatOperand } from "../../utils/utils"
 import styles from "./payment-outcome.module.css"
 import Receipt from "./receipt"
 import { useReactToPrint } from "react-to-print"
-
 interface Props {
   paymentRequest: string
   paymentAmount: string | string[] | undefined
@@ -17,8 +14,7 @@ interface Props {
 
 function PaymentOutcome({ paymentRequest, paymentAmount, dispatch }: Props) {
   const router = useRouter()
-  const { amount, unit, sats, username, memo } = router.query
-  const { satsToUsd } = useSatPrice()
+  const { amount, sats, username, memo } = router.query
   const componentRef = useRef<HTMLDivElement | null>(null)
 
   const printReceipt = useReactToPrint({
@@ -70,7 +66,6 @@ function PaymentOutcome({ paymentRequest, paymentAmount, dispatch }: Props) {
   if (data) {
     const { status, errors } = data.lnInvoicePaymentStatus
     if (status === "PAID") {
-      const usdValueInSatUnit = amount === "0.00" ? "less than 1 cent" : `$ ${amount}`
       return (
         <div className={styles.container}>
           <div aria-labelledby="Payment successful">
@@ -81,15 +76,9 @@ function PaymentOutcome({ paymentRequest, paymentAmount, dispatch }: Props) {
               height="104"
             />
             <p className={styles.text}>
-              The invoice of{" "}
-              {unit === "SAT"
-                ? `${formatOperand(sats?.toString())} sats (~ ${usdValueInSatUnit})`
-                : ` $${formatOperand(
-                    amount?.toString() ?? satsToUsd(Number(paymentAmount)).toFixed(2),
-                  )} (~${formatOperand(
-                    sats?.toString() ?? Number(paymentAmount).toFixed(),
-                  )} sats)`}{" "}
-              has been paid
+              {`The invoice of ${localStorage.getItem("formattedSatsValue")}
+                (~${localStorage.getItem("formattedFiatValue")})
+                has been paid`}
             </p>
 
             {/* the component for printing receipt */}

diff --git a/components/PaymentOutcome/receipt.tsx b/components/PaymentOutcome/receipt.tsx
@@ -2,7 +2,6 @@ import React from "react"
 import Image from "react-bootstrap/Image"
 import GaloyIcon from "./galoy-icon"
 import styles from "./payment-outcome.module.css"
-import { formatOperand } from "../../utils/utils"
 import { formattedDate, formattedTime } from "../../utils/dateUtil"
 
 interface Props {
@@ -15,8 +14,6 @@ interface Props {
 }
 
 function receipt(props: Props) {
-  const usdValueInSatUnit =
-    props.amount === "0.00" ? "less than 1 cent" : `$ ${props.amount}`
   return (
     <div className="w-100">
       <div className="d-flex justify-content-center">
@@ -25,11 +22,8 @@ function receipt(props: Props) {
 
       <div className="text-center">
         <span>Transaction Amount</span>
-        <h1>
-          {formatOperand(props.sats?.toString() ?? Number(props.paymentAmount).toFixed())}{" "}
-          sats
-        </h1>
-        <span> ~ {usdValueInSatUnit}</span>
+        <h1>{localStorage.getItem("formattedSatsValue")}</h1>
+        <span> ~ {localStorage.getItem("formattedFiatValue")}</span>
 
         <div className="d-flex justify-content-center">
           <table className="my-3 w-100">