From 5a8c903136120b2d87710836270e921a2d580f6c Mon Sep 17 00:00:00 2001
From: siddharth <siddharthtiwarikreplind@gmail.com>
Date: Tue, 14 May 2024 18:37:39 +0530
Subject: [PATCH] chore(voucher): updated confirm voucher modal

---
 .../confirm-modal/confirm-modal.module.css    |   6 +-
 .../components/create/confirm-modal/index.tsx | 270 +++++++++---------
 2 files changed, 141 insertions(+), 135 deletions(-)

diff --git a/apps/voucher/components/create/confirm-modal/confirm-modal.module.css b/apps/voucher/components/create/confirm-modal/confirm-modal.module.css
index d5d2d7b2cc..94a7063607 100644
--- a/apps/voucher/components/create/confirm-modal/confirm-modal.module.css
+++ b/apps/voucher/components/create/confirm-modal/confirm-modal.module.css
@@ -1,9 +1,9 @@
-/* ConfirmModal.module.css */
 .modal_container {
   display: flex;
   flex-direction: column;
-  gap: 0.7em;
+  gap: 1.3em;
   min-height: 10em;
+  justify-content: space-between;
 }
 
 .modalTitle {
@@ -17,7 +17,7 @@
 }
 
 .modalSubtitle {
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: bold;
 }
 
diff --git a/apps/voucher/components/create/confirm-modal/index.tsx b/apps/voucher/components/create/confirm-modal/index.tsx
index b75085c68b..efad31f956 100644
--- a/apps/voucher/components/create/confirm-modal/index.tsx
+++ b/apps/voucher/components/create/confirm-modal/index.tsx
@@ -26,6 +26,16 @@ type Props = {
   usdWallet: WalletDetails
 }
 
+const calculateProfitAmount = ({
+  amount,
+  commissionRatePercentage,
+}: {
+  amount: number
+  commissionRatePercentage: number
+}) => {
+  return (amount * commissionRatePercentage) / 100
+}
+
 const ConfirmModal = ({
   open,
   onClose,
@@ -35,28 +45,40 @@ const ConfirmModal = ({
   btcWallet,
   usdWallet,
 }: Props) => {
+  const router = useRouter()
+  const { update } = useSession()
+
   const [selectedWalletId, setSelectedWalletId] = useState("")
   const [modalLoading, setModalLoading] = useState<boolean>(false)
   const [modalError, setModalError] = useState<string | null>(null)
   const [formIsValid, setFormIsValid] = useState(false)
+
+  const [createWithdrawLink, { loading: withdrawLinkLoading }] =
+    useCreateWithdrawLinkMutation()
+
   const { data: currencyConversion, refetch } = useCurrencyConversionEstimationQuery({
-    variables: {
-      amount: Number(amount),
-      currency,
-    },
-    context: {
-      endpoint: "GALOY",
-    },
+    variables: { amount: Number(amount), currency },
+    context: { endpoint: "GALOY" },
     pollInterval: 60000,
   })
 
+  const { data: currencyDataForOneUnit } = useCurrencyConversionEstimationQuery({
+    variables: { amount: 1, currency },
+    context: { endpoint: "GALOY" },
+  })
+
   useEffect(() => {
-    refetch({
-      amount: Number(amount),
-      currency,
-    })
+    refetch({ amount: Number(amount), currency })
   }, [amount, currency, refetch])
 
+  const usdToCurrencyRate = Number(
+    currencyDataForOneUnit?.currencyConversionEstimation.usdCentAmount / 100,
+  )
+  const profitAmount = calculateProfitAmount({
+    amount: Number(amount),
+    commissionRatePercentage: Number(commissionPercentage),
+  })
+
   const amountInDollars = Number(
     (currencyConversion?.currencyConversionEstimation.usdCentAmount / 100).toFixed(2),
   )
@@ -66,11 +88,6 @@ const ConfirmModal = ({
     commissionRatePercentage: Number(commissionPercentage),
   })
 
-  const { update } = useSession()
-  const [createWithdrawLink, { loading: withdrawLinkLoading }] =
-    useCreateWithdrawLinkMutation()
-  const router = useRouter()
-
   const handleSubmit = async ({
     voucherAmountInCents,
     commissionPercentage,
@@ -83,13 +100,7 @@ const ConfirmModal = ({
     setModalLoading(true)
     try {
       const createWithdrawLinkResult = await createWithdrawLink({
-        variables: {
-          input: {
-            voucherAmountInCents,
-            commissionPercentage,
-            walletId,
-          },
-        },
+        variables: { input: { voucherAmountInCents, commissionPercentage, walletId } },
       })
       update()
 
@@ -112,123 +123,118 @@ const ConfirmModal = ({
 
   const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const selected = e.target.value
-    const isValid = selected !== "default"
     setSelectedWalletId(selected === "btc" ? btcWallet.id : usdWallet.id)
-    setFormIsValid(isValid)
+    setFormIsValid(selected !== "default")
   }
 
-  if (modalLoading || withdrawLinkLoading) {
-    return (
-      <ModalComponent open={open} onClose={onClose}>
-        <div className={styles.modal_container}>
-          <LoadingComponent />
-        </div>
-      </ModalComponent>
-    )
-  }
+  const renderErrorModal = () => (
+    <div className="flex flex-col justify-between gap-4 h-full">
+      <h1 className={styles.modalTitle}>Error</h1>
+      <div className="text-center mt-0">
+        <p className={styles.modalText}>{modalError}</p>
+      </div>
+      <Button className="w-full" onClick={() => setModalError(null)}>
+        Okay
+      </Button>
+    </div>
+  )
 
-  return (
-    <ModalComponent open={open} onClose={onClose}>
-      <div className={styles.modal_container}>
-        {modalError ? (
-          <>
-            <h1 className={styles.modalTitle}>Error</h1>
-            <div
-              style={{
-                justifyContent: "center",
-                display: "flex",
-                margin: "auto",
-                flexDirection: "column",
-                gap: "1em",
-              }}
-            >
-              <p className={styles.modalText}>{modalError}</p>
-              <div className={styles.button_container}>
-                <Button
-                  className="w-full"
-                  onClick={() => {
-                    setModalError(null)
-                  }}
-                >
-                  Okay
-                </Button>
-              </div>
-            </div>
-          </>
-        ) : (
-          <>
-            <h1 className={styles.modalTitle}>Confirm</h1>
-            <div>
-              <h3 className={styles.modalSubtitle}>Sales Amount </h3>
+  const renderConfirmationModal = () => (
+    <>
+      <div className="flex justify-between w-full">
+        <div>
+          <h3 className={styles.modalSubtitle}>Price</h3>
+          <p className={styles.modalText}>
+            {formatCurrency({ amount: Number(amount), currency })}
+          </p>
+        </div>
+        <div>
+          <h3 className={`${styles.modalSubtitle} text-right`}>Value</h3>
+          <p className={styles.modalText}>{Number(voucherAmountInDollars)} US Dollar</p>
+        </div>
+      </div>
+      <div className="flex justify-between w-full">
+        <div>
+          <h3 className={styles.modalSubtitle}>Commission</h3>
+          <p className={styles.modalText}>
+            {Number(commissionPercentage)}%
+            {currency !== "USD" &&
+              ` (${formatCurrency({ amount: profitAmount, currency })})`}
+          </p>
+        </div>
+        <div>
+          {currency === "USD" ? (
+            <>
+              <h3 className={`${styles.modalSubtitle} text-right`}>Profit</h3>
               <p className={styles.modalText}>
-                {formatCurrency({
-                  amount: Number(amount),
-                  currency,
-                })}
+                {formatCurrency({ amount: profitAmount, currency })} {currency}
               </p>
-            </div>
-            <div>
-              <h3 className={styles.modalSubtitle}>Voucher Amount</h3>
+            </>
+          ) : (
+            <>
+              <h3 className={`${styles.modalSubtitle} text-right`}>Rate</h3>
               <p className={styles.modalText}>
-                {Number(voucherAmountInDollars)} US Dollar
+                1 USD = {formatCurrency({ amount: usdToCurrencyRate, currency })}{" "}
+                {currency}
               </p>
-            </div>
-
-            <div>
-              <h3 className={styles.modalSubtitle}>Sales Commission</h3>
-              <p className={styles.modalText}>{Number(commissionPercentage)}%</p>
-            </div>
-
-            <div>
-              <h3 className={styles.modalSubtitle}>Paying Wallet</h3>
-              <select
-                name=""
-                id=""
-                defaultValue="default"
-                required={true}
-                onChange={handleSelectChange}
-                data-testid="wallet-select"
-              >
-                <option value="default" disabled>
-                  Select Wallet
-                </option>
-                <option data-testid="wallet-select-btc" value="btc">
-                  <div>BTC Wallet</div>
-                  <div> {btcWallet.balance} sats</div>
-                </option>
-                <option
-                  data-testid="wallet-select-usd"
-                  value="usd"
-                  className="flex flex-col p-1"
-                >
-                  <div>USD Wallet</div>
-                  <div> ${usdWallet.balance / 100} USD</div>
-                </option>
-              </select>
-            </div>
-
-            <div className="flex gap-2 mt-6">
-              <Button className="w-1/4" variant="link" onClick={onClose}>
-                Cancel
-              </Button>
-              <Button
-                className="w-3/4"
-                data-testid="pay-voucher-amount-btn"
-                disabled={!formIsValid}
-                onClick={() =>
-                  handleSubmit({
-                    voucherAmountInCents: Number(
-                      (Number(voucherAmountInDollars) * 100).toFixed(),
-                    ),
-                    commissionPercentage: Number(commissionPercentage),
-                    walletId: selectedWalletId,
-                  })
-                }
-              >
-                Pay
-              </Button>
-            </div>
-          </>
+            </>
+          )}
+        </div>
+      </div>
+      <div>
+        <h3 className={styles.modalSubtitle}>Paying Wallet</h3>
+        <select
+          defaultValue="default"
+          required
+          onChange={handleSelectChange}
+          data-testid="wallet-select"
+          className="w-full p-2 border rounded-md bg-secondary mt-1"
+        >
+          <option data-testid="wallet-select-btc" value="btc">
+            BTC Wallet - {btcWallet.balance} sats
+          </option>
+          <option data-testid="wallet-select-usd" value="usd">
+            USD Wallet - ${usdWallet.balance / 100} USD
+          </option>
+        </select>
+      </div>
+      <div className="flex gap-2 mt-0 flex-col w-full">
+        <Button
+          className="w-full"
+          data-testid="pay-voucher-amount-btn"
+          disabled={!formIsValid}
+          onClick={() =>
+            handleSubmit({
+              voucherAmountInCents: Number(
+                (Number(voucherAmountInDollars) * 100).toFixed(),
+              ),
+              commissionPercentage: Number(commissionPercentage),
+              walletId: selectedWalletId,
+            })
+          }
+        >
+          Pay
+        </Button>
+        <Button
+          className="w-full text-primary font-bold p-1"
+          variant="link"
+          onClick={onClose}
+        >
+          Cancel
+        </Button>
+      </div>
+    </>
+  )
+
+  return (
+    <ModalComponent open={open} onClose={onClose}>
+      <div className={`${styles.modal_container} h-full`}>
+        {modalLoading || withdrawLinkLoading ? (
+          <LoadingComponent />
+        ) : modalError ? (
+          renderErrorModal()
+        ) : (
+          renderConfirmationModal()
         )}
       </div>
     </ModalComponent>