From c14a2fa8e921b0ccba5a4fcefd931bb85117ccab Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Sun, 25 Aug 2024 14:59:04 -0400
Subject: [PATCH] improve Donnation component and fix string format for the
 value in the wallet

---
 src/views/creators/DonationButton.vue | 30 ++++++++++++++++++++-------
 src/views/main/Wallet.vue             |  7 ++-----
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/views/creators/DonationButton.vue b/src/views/creators/DonationButton.vue
index 361f94f..5e6c35d 100644
--- a/src/views/creators/DonationButton.vue
+++ b/src/views/creators/DonationButton.vue
@@ -26,13 +26,19 @@
         </div>
 
         <v-card-text>
-          <v-text-field v-model="tipAmount"
-                        class="p-2"
-                        label="Montant"
-                        density="comfortable"
-                        variant="outlined"
-                        hide-details
-                        clearable
+          <v-text-field
+              v-model="tipAmount"
+              type="number"
+              :min="0"
+              class="p-2"
+              label="Montant"
+              density="comfortable"
+              variant="outlined"
+              hide-details
+              clearable
+              inputmode="numeric"
+              @keydown="preventNonNumeric"
+              prepend-inner-icon="mdi-currency-usd"
           ></v-text-field>
 
           <v-textarea v-model="tipMessage"
@@ -139,7 +145,6 @@ function closeDialog() {
     checkout.destroy();
   }
 }
-
 async function goPay() {
   isPaymentDialogActive.value = true;
 
@@ -149,4 +154,13 @@ async function goPay() {
 
   await checkout.mount('#checkout');
 }
+
+function preventNonNumeric(event) {
+  const key = event.key;
+  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
+    event.preventDefault();
+  }
+}
 </script>
diff --git a/src/views/main/Wallet.vue b/src/views/main/Wallet.vue
index 4f41a7d..244f2ab 100644
--- a/src/views/main/Wallet.vue
+++ b/src/views/main/Wallet.vue
@@ -64,11 +64,8 @@ const formattedTransactions = computed(() => {
 });
 
 const formattedBalance = computed(() => {
-  const balanceStr = totalBalance.value.toString();
-  const balanceParts = balanceStr.split(".");
-  const integerPart = balanceParts[0]
-  const decimalPart = balanceParts[1]
-  return integerPart + ',' + decimalPart + ' $';
+  const balance = totalBalance.value.toString();
+  return `${balance} $`
 });
 
 const transactionCount = computed(() => userTransactions.value.length);