From 5775bdeaff817d409e7d82b5c6983a2f6144d08f Mon Sep 17 00:00:00 2001
From: Seddik <SeddikKadi>
Date: Sat, 18 May 2024 17:45:53 +0200
Subject: [PATCH] nwe: dev: factorize out the content of the transaction form

---
 src/components/MoneyRequestModal.vue  | 120 +++----------
 src/components/MoneyTransaction.vue   | 240 ++++++++++++++++++++++++++
 src/components/MoneyTransferModal.vue | 106 +++---------
 src/i18n/fr-FR/app.po                 |  98 ++++++-----
 4 files changed, 335 insertions(+), 229 deletions(-)
 create mode 100644 src/components/MoneyTransaction.vue

diff --git a/src/components/MoneyRequestModal.vue b/src/components/MoneyRequestModal.vue
index 81748ebb..3bb646e3 100644
--- a/src/components/MoneyRequestModal.vue
+++ b/src/components/MoneyRequestModal.vue
@@ -10,68 +10,15 @@
           <button class="delete" aria-label="close" @click="close()"></button>
         </header>
         <section class="modal-card-body">
-          <div
-            class="
-              is-flex is-flex-direction-column is-justify-content-space-evenly
-            "
-          >
-            <div class="is-flex is-flex-direction-column custom-amount-input">
-              <div v-if="selectedAccount">
-                <h2 class="frame3-sub-title mb-3">
-                  {{ $gettext("To") }}
-                </h2>
-                <BankAccountItem
-                  :bal="selectedAccount.bal"
-                  :curr="selectedAccount.curr"
-                  :backend="selectedAccount.backend"
-                  :type="selectedAccount.type"
-                  :active="selectedAccount.active"
-                  class="mb-4"
-                >
-                  <template v-slot:name>{{ selectedAccount.name() }}</template>
-                </BankAccountItem>
-              </div>
-              <h2 class="frame3-sub-title mt-3 mb-3">
-                {{ $gettext("Amount") }}
-              </h2>
-              <div class="is-flex">
-                <input
-                  v-model.number="amount"
-                  ref="amountRequested"
-                  type="number"
-                  min="0"
-                  class="input is-custom"
-                  id="send-amount-input"
-                  :placeholder="$gettext('e.g. 50')"
-                  :class="{
-                    'is-danger': errors.amount,
-                  }"
-                  @input="handleAmountInput()"
-                />
-                <div class="amount-currency-symbol pl-2">
-                  {{ selectedAccount?.curr }}
-                </div>
-              </div>
-              <div class="notification is-danger is-light" v-if="errors.amount">
-                {{ errors.amount }}
-              </div>
-              <textarea
-                @input="handleMessageInput()"
-                v-model="message"
-                class="custom-textarea textarea mt-5"
-                :class="{
-                  'is-danger': errors.message,
-                }"
-                :placeholder="$gettext('Add a memo (optional)')"
-              ></textarea>
-              <div
-                class="notification is-danger is-light mt-2"
-                v-if="errors.message"
-              >
-                {{ errors.message }}
-              </div>
-            </div>
-          </div>
+          <MoneyTransaction
+            directionTransfer="receive"
+            :account="$modal.args.value[0].account"
+            :selectedRecipient="selectedRecipient"
+            :config="config"
+            @update:amount="(x) => (amount = x)"
+            @update:message="(x) => (message = x)"
+            @update:isValid="(x) => (isValid = x)"
+          />
         </section>
         <footer
           class="
@@ -81,7 +28,7 @@
           "
         >
           <button
-            :disabled="!amount || errors.amount || errors.message"
+            :disabled="!isValid"
             class="button custom-button-modal has-text-weight-medium"
             id="send-money-button"
             @click="$modal.next()"
@@ -95,10 +42,7 @@
       <div class="modal-card">
         <header class="modal-card-head">
           <span class="is-flex is-flex-shrink-0">
-            <a
-              class="mr-3 is-flex"
-              @click="$modal.back(), setFocus('amountRequested')"
-            >
+            <a class="mr-3 is-flex" @click="$modal.back()">
               <span class="icon has-text-white">
                 <fa-icon icon="arrow-left" class="fa-lg" />
               </span>
@@ -162,7 +106,7 @@
   import { UIError } from "../exception"
   import { makeUIProxyBackend } from "@/services/lokapiService"
   import QrCodeVue from "qrcode.vue"
-
+  import MoneyTransaction from "@/components//MoneyTransaction.vue"
   import UseBatchLoading from "@/services/UseBatchLoading"
 
   @Options({
@@ -172,44 +116,32 @@
       RecipientItem,
       BankAccountItem,
       QrCodeVue,
+      MoneyTransaction,
     },
     data() {
       return {
-        selectedAccount: null,
         amount: null,
         message: null,
-        errors: {
-          amount: false,
-          message: false,
-        },
+        isValid: false,
+        config: {},
       }
     },
-    mounted() {
-      this.setFocus("amountRequested")
-      this.selectedAccount = this.$modal.args.value[0].account
-    },
     computed: {
       ...mapModuleState("lokapi", ["userProfile"]),
     },
-    methods: {
-      handleMessageInput() {
-        if (this.message.length > 50) {
-          this.errors.message = this.$gettext(
-            "the message description is too long"
-          )
-          return
-        }
-        this.errors.message = false
+    watch: {
+      message: {
+        handler(newVal, oldVal) {
+          this.config.message = newVal
+        },
       },
-      handleAmountInput() {
-        if (this.amount <= 0 || this.amount.length === 0) {
-          this.errors.amount = this.$gettext(
-            "Amount requested must be a number greater than 0"
-          )
-          return
-        }
-        this.errors.amount = false
+      amount: {
+        handler(newVal, oldVal) {
+          this.config.amount = newVal
+        },
       },
+    },
+    methods: {
       close() {
         this.amount = 0
         this.$modal.close()
diff --git a/src/components/MoneyTransaction.vue b/src/components/MoneyTransaction.vue
new file mode 100644
index 00000000..f210a442
--- /dev/null
+++ b/src/components/MoneyTransaction.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="is-flex is-flex-direction-column is-justify-content-space-evenly">
+    <div class="is-flex is-flex-direction-column custom-amount-input">
+      <div v-if="account">
+        <h2 class="frame3-sub-title mb-3">
+          {{ $gettext("To") }}
+        </h2>
+        <BankAccountItem
+          :bal="account.bal"
+          :curr="account.curr"
+          :backend="account.backend"
+          :type="account.type"
+          :active="account.active"
+          class="mb-4"
+        >
+          <template v-slot:name>{{ account.name() }}</template>
+        </BankAccountItem>
+      </div>
+      <div v-if="directionTransfer === 'send'">
+        <h2 class="frame3-sub-title mb-3">
+          {{ $gettext("To") }}
+        </h2>
+        <RecipientItem :recipient="selectedRecipient" />
+      </div>
+      <h2 class="frame3-sub-title mt-3 mb-3">
+        {{ $gettext("Amount") }}
+      </h2>
+      <div class="is-flex">
+        <input
+          v-model.number="amount"
+          ref="amountRequested"
+          type="number"
+          min="0"
+          class="input is-custom"
+          id="send-amount-input"
+          :placeholder="$gettext('e.g. 50')"
+          :class="{
+            'is-danger': errors.amount || parentErrors,
+          }"
+          @input="handleAmountInput()"
+          :disabled="config?.amount && directionTransfer === 'send'"
+        />
+        <div class="amount-currency-symbol pl-2">
+          {{ selectedRecipient?.curr }}
+        </div>
+      </div>
+      <div class="notification is-danger is-light" v-if="errors.amount">
+        {{ errors.amount }}
+      </div>
+      <div class="notification is-danger is-light" v-if="parentErrors">
+        {{ parentErrors }}
+      </div>
+      <textarea
+        @input="handleMessageInput()"
+        v-model="message"
+        class="custom-textarea textarea mt-5"
+        :class="{
+          'is-danger': errors.message,
+        }"
+        :placeholder="$gettext('Add a memo (optional)')"
+      ></textarea>
+      <div class="notification is-danger is-light mt-2" v-if="errors.message">
+        {{ errors.message }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { Options, Vue } from "vue-class-component"
+  import { mapModuleState } from "@/utils/vuex"
+  import RecipientItem from "@/components/RecipientItem.vue"
+  import BankAccountItem from "@/components/BankAccountItem.vue"
+
+  @Options({
+    name: "MoneyTransaction",
+    components: {
+      RecipientItem,
+      BankAccountItem,
+    },
+    emits: ["update:amount", "update:message", "update:isValid"],
+    props: {
+      account: Object,
+      selectedRecipient: Object,
+      directionTransfer: String,
+      config: Object,
+      parentErrors: String,
+    },
+    data() {
+      return {
+        amount: null,
+        message: null,
+        errors: {
+          amountLength: true,
+          amount: false,
+          message: false,
+        },
+        isValid: false,
+      }
+    },
+    mounted() {
+      this.setFocus("amountRequested")
+      if (this.config?.amount) {
+        this.amount = this.config?.amount
+        this.message = this.config?.message
+        this.errors.amountLength = this.amount?.length === 0
+      }
+      this.checkForErrors()
+    },
+    computed: {
+      ...mapModuleState("lokapi", ["userProfile"]),
+    },
+    watch: {
+      errors: {
+        handler(newVal, oldVal) {
+          this.checkForErrors()
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      handleAmountInput() {
+        if (this.amount <= 0 || this.amount.length === 0) {
+          if (this.directionTransfer === "send")
+            this.errors.amount = this.$gettext(
+              "Amount to send must be a number greater than 0"
+            )
+          else
+            this.errors.amount = this.$gettext(
+              "Amount to request must be a number greater than 0"
+            )
+          return
+        }
+        this.errors.amountLength = this.amount.length === 0
+        this.$emit("update:amount", parseFloat(this.amount).toFixed(2))
+        this.errors.amount = false
+      },
+      handleMessageInput() {
+        if (this.message.length > 50) {
+          this.errors.message = this.$gettext(
+            "the message description is too long"
+          )
+          return
+        }
+        this.$emit("update:message", this.message)
+        this.errors.message = false
+      },
+      setFocus(refLabel: string) {
+        this.$nextTick(() => {
+          const ref = this.$refs[refLabel]
+          ref.focus()
+          ref.select()
+        })
+      },
+      checkForErrors() {
+        this.$emit(
+          "update:isValid",
+          Object.values(this.errors).every((value) => value === false)
+        )
+      },
+    },
+  })
+  export default class MoneyTransaction extends Vue {}
+</script>
+<style lang="scss" scoped>
+  @import "@/assets/custom-variables";
+
+  .search-area {
+    background: #f0faf9;
+  }
+  .button.action {
+    white-space: normal;
+    height: auto;
+  }
+  .card-recipient-wrapper {
+    width: 90%;
+  }
+  .favorit-icon-wrapper {
+    width: 10%;
+  }
+  .modal-card-body {
+    min-height: 120px;
+  }
+  .loader-container {
+    position: relative;
+    height: 80px;
+  }
+  .amount-currency-symbol {
+    margin: auto;
+    font-size: 1.25em;
+    font-weight: bold;
+    line-height: 1em;
+    padding-bottom: calc(0.5em - 1px);
+    padding-left: calc(0.75em - 1px);
+    padding-right: calc(0.75em - 1px);
+    padding-top: calc(0.5em - 1px);
+  }
+  .w-100 {
+    width: 100%;
+  }
+  .custom-search-bar {
+    margin: auto;
+  }
+  .search-bar-container {
+    width: 75%;
+  }
+  .qrcode-icon {
+    font-size: 1.5em;
+    opacity: 0.8;
+    padding: 0.1em;
+    border: 0.2em solid #e8e8e8;
+    border-radius: 5px;
+  }
+  .custom-search-bar input {
+    background: #ffffff;
+    border: 1px solid #e8e8e8;
+    border-radius: 24px;
+    width: 100% !important;
+  }
+
+  .custom-pictogram-search svg {
+    width: 24px !important;
+    height: 24px !important;
+  }
+
+  .custom-pictogram-search path,
+  rect {
+    fill: $color-2 !important;
+    background: $color-2 !important;
+  }
+
+  .custom-button-pictogram {
+    background-color: inherit !important;
+    border: none;
+    cursor: pointer;
+  }
+  .qrcode-container {
+    width: fit-content;
+    margin: auto;
+  }
+</style>
diff --git a/src/components/MoneyTransferModal.vue b/src/components/MoneyTransferModal.vue
index 08fe37e3..399d7599 100644
--- a/src/components/MoneyTransferModal.vue
+++ b/src/components/MoneyTransferModal.vue
@@ -134,67 +134,16 @@
           <button class="delete" aria-label="close" @click="close()"></button>
         </header>
         <section class="modal-card-body">
-          <div
-            class="
-              is-flex is-flex-direction-column is-justify-content-space-evenly
-            "
-          >
-            <div class="is-flex is-flex-direction-column custom-amount-input">
-              <h2 class="frame3-sub-title mb-3">
-                {{ $gettext("From") }}
-              </h2>
-              <BankAccountItem
-                :bal="ownSelectedAccount.bal"
-                :curr="ownSelectedAccount.curr"
-                :backend="ownSelectedAccount.backend"
-                :type="ownSelectedAccount.type"
-                :active="ownSelectedAccount.active"
-                class="mb-4"
-              >
-                <template v-slot:name>{{ ownSelectedAccount.name() }}</template>
-              </BankAccountItem>
-              <h2 class="frame3-sub-title mb-3">
-                {{ $gettext("To") }}
-              </h2>
-              <RecipientItem :recipient="selectedRecipient" />
-              <h2 class="frame3-sub-title mt-3 mb-3">
-                {{ $gettext("Amount") }}
-              </h2>
-              <div class="is-flex">
-                <input
-                  v-model.number="amount"
-                  ref="amountSend"
-                  type="number"
-                  min="0"
-                  class="input is-custom"
-                  id="send-amount-input"
-                  :placeholder="$gettext('e.g. 50')"
-                  :class="{
-                    'is-danger': errors.balance || errors.amount,
-                  }"
-                  :readonly="config?.amount"
-                  :disabled="config?.amount"
-                />
-                <div class="amount-currency-symbol pl-2">
-                  {{ selectedRecipient.currencySymbol }}
-                </div>
-              </div>
-              <div
-                class="notification is-danger is-light"
-                v-if="errors.balance"
-              >
-                {{ errors.balance }}
-              </div>
-              <div class="notification is-danger is-light" v-if="errors.amount">
-                {{ errors.amount }}
-              </div>
-              <textarea
-                v-model="message"
-                class="custom-textarea textarea mt-5"
-                :placeholder="$gettext('Add a memo (optional)')"
-              ></textarea>
-            </div>
-          </div>
+          <MoneyTransaction
+            directionTransfer="send"
+            :account="ownSelectedAccount"
+            :selectedRecipient="selectedRecipient"
+            :config="config"
+            :parentErrors="errors"
+            @update:amount="(x) => (amount = x)"
+            @update:message="(x) => (message = x)"
+            @update:isValid="(x) => (isValid = x)"
+          />
         </section>
         <footer
           class="
@@ -207,6 +156,7 @@
             class="button custom-button-modal has-text-weight-medium"
             id="send-money-button"
             @click="sendTransaction()"
+            :disabled="!isValid"
           >
             {{ $gettext("Send") }}
           </button>
@@ -229,7 +179,7 @@
   import { Camera, CameraResultType } from "@capacitor/camera"
   import { UIError } from "../exception"
   import { makeUIProxyBackend } from "@/services/lokapiService"
-
+  import MoneyTransaction from "./MoneyTransaction.vue"
   import UseBatchLoading from "@/services/UseBatchLoading"
 
   @Options({
@@ -238,6 +188,7 @@
       Loading,
       RecipientItem,
       BankAccountItem,
+      MoneyTransaction,
     },
     data() {
       return {
@@ -249,11 +200,9 @@
         amount: null,
         config: {},
         message: null,
-        errors: {
-          balance: false,
-          amount: false,
-        },
+        errors: false,
         account: null,
+        isValid: false,
       }
     },
     created() {
@@ -364,12 +313,10 @@
             (va: any) => va.currencyId === config.recipient.backendId
           )
         this.$modal.next()
-        this.errors.balance = false
-        this.errors.amount = false
+        this.errors = false
         this.amount = config?.amount
         this.message = config?.message
         this.config = config
-        this.setFocus("amountSend")
       },
       async sendTransaction(): Promise<void> {
         if (this.transferOngoing) {
@@ -380,17 +327,7 @@
         }
         this.transferOngoing = true
 
-        this.errors.amount = false
-        this.errors.balance = false
-        if (this.amount <= 0) {
-          this.errors.amount = this.$gettext(
-            "Amount to send must be greater than 0"
-          )
-          this.transferOngoing = false
-          return
-        }
-        // This to ensure we are left with 2 decimals only
-        this.amount = parseFloat(this.amount).toFixed(2)
+        this.errors = false
 
         if (this.ownSelectedAccount._obj.getGlobalBalance) {
           let realBal
@@ -422,13 +359,13 @@
           )
 
           if (amount_cents > bal_cents) {
-            this.errors.balance = this.$gettext(
+            this.errors = this.$gettext(
               "Transaction was refused due to insufficient balance"
             )
             return
           }
           if (amount_cents > realBal_cents) {
-            this.errors.balance = this.$gettext(
+            this.errors = this.$gettext(
               "The last transactions were not yet all processed. " +
                 "To ensure that this payment can be sent, you need " +
                 "to wait for these pending transactions to be processed. " +
@@ -475,7 +412,7 @@
             return
           }
           if (err instanceof LokapiExc.InsufficientBalance) {
-            this.errors.balance = this.$gettext(
+            this.errors = this.$gettext(
               "Transaction was refused due to insufficient balance"
             )
             return
@@ -512,8 +449,7 @@
           this.$loading.hide()
         }
 
-        this.errors.balance = false
-        this.errors.amount = false
+        this.errors = false
         this.$modal.args.value[0].refreshTransaction()
         this.close()
         this.$modal.open("ConfirmPaymentModal", {
diff --git a/src/i18n/fr-FR/app.po b/src/i18n/fr-FR/app.po
index 59218256..6e9f9b56 100644
--- a/src/i18n/fr-FR/app.po
+++ b/src/i18n/fr-FR/app.po
@@ -22,7 +22,7 @@ msgstr ""
 msgid "%{ appName } version %{ appVersion }"
 msgstr "%{ appName } version %{ appVersion }"
 
-#: src/components/MoneyTransferModal.vue:547
+#: src/components/MoneyTransferModal.vue:483
 msgid "%{ name } was added to your favorite list"
 msgstr "%{ name } a bien été ajouté en favori"
 
@@ -55,18 +55,17 @@ msgstr "Comptes en attente de validation"
 msgid "Action"
 msgstr "Action"
 
-#: src/components/MoneyTransferModal.vue:532
+#: src/components/MoneyTransferModal.vue:468
 msgid "Add"
 msgstr "Ajouter"
 
-#: src/components/MoneyRequestModal.vue:39
-#: src/components/MoneyRequestModal.vue:43
-#: src/components/MoneyRequestModal.vue:65
-#: src/components/MoneyTransferModal.vue:194
+#: src/components/MoneyTransaction.vue:36
+#: src/components/MoneyTransaction.vue:37
+#: src/components/MoneyTransaction.vue:60
 msgid "Add a memo (optional)"
 msgstr "Ajoutez un texte (optionnel)"
 
-#: src/components/MoneyTransferModal.vue:526
+#: src/components/MoneyTransferModal.vue:462
 msgid "Add as favorite"
 msgstr "Ajouter aux favoris"
 
@@ -88,22 +87,21 @@ msgstr "Toutes les opérations"
 msgid "Already have an account ?"
 msgstr "Avez-vous déjà créé un compte ?"
 
-#: src/components/AmountField.vue:5 src/components/MoneyRequestModal.vue:35
-#: src/components/MoneyTransferModal.vue:161
+#: src/components/AmountField.vue:5 src/components/MoneyTransaction.vue:26
 #: src/components/TransactionListModal.vue:428
 #: src/views/admin/PendingCredits.vue:52
 msgid "Amount"
 msgstr "Montant"
 
-#: src/components/MoneyRequestModal.vue:206
-msgid "Amount requested must be a number greater than 0"
-msgstr "Le montant demandé doit être un nombre positif"
+#: src/components/MoneyTransaction.vue:128
+msgid "Amount to request must be a number greater than 0"
+msgstr "Le montant à demander doit être un nombre positif"
 
-#: src/components/MoneyTransferModal.vue:386
-msgid "Amount to send must be greater than 0"
+#: src/components/MoneyTransaction.vue:124
+msgid "Amount to send must be a number greater than 0"
 msgstr "Le montant à transférer doit être un nombre positif"
 
-#: src/components/MoneyTransferModal.vue:345
+#: src/components/MoneyTransferModal.vue:294
 msgid "An error occured while searching recipient"
 msgstr "Il y a eu un problème lors de la recherche du destinataire"
 
@@ -129,7 +127,7 @@ msgstr ""
 "Il y a eu un problème lors de la tentative de validation de la demande de "
 "crédit de %{ name }"
 
-#: src/components/MoneyTransferModal.vue:282
+#: src/components/MoneyTransferModal.vue:231
 #: src/components/TransactionListModal.vue:327
 msgid "An unexpected issue occured while downloading recipient list"
 msgstr ""
@@ -144,7 +142,7 @@ msgstr ""
 "Il y a eu un problème lors de la tentative de téléchargement de la liste des "
 "transactions"
 
-#: src/components/MoneyTransferModal.vue:496
+#: src/components/MoneyTransferModal.vue:433
 msgid ""
 "An unexpected issue occurred during the money transfer. We are sorry for the "
 "inconvenience."
@@ -166,7 +164,7 @@ msgstr ""
 "La requête s'est terminée de façon inattendue, impossible de joindre le "
 "serveur distant."
 
-#: src/components/MoneyTransferModal.vue:403
+#: src/components/MoneyTransferModal.vue:340
 msgid ""
 "An unexpected issue occurred while checking available funds. The transaction "
 "was not sent. We are sorry for the inconvenience."
@@ -287,8 +285,8 @@ msgstr ""
 msgid "click here"
 msgstr "cliquez ici"
 
-#: src/components/MoneyRequestModal.vue:133
-#: src/components/MoneyRequestModal.vue:139 src/components/QrCodeModal.vue:49
+#: src/components/MoneyRequestModal.vue:77
+#: src/components/MoneyRequestModal.vue:83 src/components/QrCodeModal.vue:49
 msgid "Close"
 msgstr "Fermer"
 
@@ -313,7 +311,7 @@ msgstr "Confirmez votre mot de passe"
 msgid "Connection successful"
 msgstr "Connection réussie"
 
-#: src/components/MoneyTransferModal.vue:470
+#: src/components/MoneyTransferModal.vue:407
 msgid "Contact your administrator if it fails to show up."
 msgstr "Contactez votre administrateur si elle ne s'affiche pas"
 
@@ -357,7 +355,7 @@ msgstr[1] "chiffres"
 msgid "Discard"
 msgstr "Annuler"
 
-#: src/components/MoneyTransferModal.vue:527
+#: src/components/MoneyTransferModal.vue:463
 msgid "Do you want to add %{ name } to your favorite list ?"
 msgstr "Voulez vous ajouter %{ name } aux favoris ?"
 
@@ -370,8 +368,7 @@ msgid "Download transactions"
 msgstr "Télécharger les opérations"
 
 #: src/components/AmountField.vue:12 src/components/MoneyCreditModal.vue:52
-#: src/components/MoneyRequestModal.vue:45
-#: src/components/MoneyTransferModal.vue:171
+#: src/components/MoneyTransaction.vue:36
 msgid "e.g. 50"
 msgstr "ex: 50"
 
@@ -431,12 +428,8 @@ msgstr "Mot de passe oublié ?"
 msgid "from"
 msgstr "De"
 
-#: src/components/MoneyTransferModal.vue:144
-msgid "From"
-msgstr "Depuis"
-
-#: src/components/MoneyRequestModal.vue:78
-#: src/components/MoneyRequestModal.vue:84
+#: src/components/MoneyRequestModal.vue:25
+#: src/components/MoneyRequestModal.vue:31
 msgid "Generate QrCode"
 msgstr "Générer le QrCode"
 
@@ -461,7 +454,7 @@ msgstr "Identifiant ou mot de passe incorrect"
 msgid "Invalid email."
 msgstr "E-mail invalide."
 
-#: src/components/MoneyTransferModal.vue:322
+#: src/components/MoneyTransferModal.vue:271
 msgid "Invalid QR code content format"
 msgstr "Format du QR code invalide"
 
@@ -473,7 +466,7 @@ msgstr "Préférences de langue"
 msgid "Lastname"
 msgstr "Nom"
 
-#: src/components/MoneyTransferModal.vue:533
+#: src/components/MoneyTransferModal.vue:469
 msgid "Later"
 msgstr "Plus tard"
 
@@ -649,7 +642,7 @@ msgstr ""
 "Veuillez remplir les champs ci-dessous et cliquer sur le bouton Inscription "
 "pour créer votre compte."
 
-#: src/components/MoneyTransferModal.vue:465
+#: src/components/MoneyTransferModal.vue:402
 msgid ""
 "Please make sure to double check in the transaction list if this transaction "
 "appears in the near future. "
@@ -665,7 +658,7 @@ msgstr ""
 "Attention, ce mot de passe n'est pas récupérable, alors veillez à le garder "
 "dans un endroit sûr et accessible."
 
-#: src/components/MoneyRequestModal.vue:128 src/components/QrCodeModal.vue:35
+#: src/components/MoneyRequestModal.vue:72 src/components/QrCodeModal.vue:35
 msgid "Please scan the QR code above to proceed"
 msgstr "Veuillez scanner le QR code ci-dessus pour continuer"
 
@@ -710,7 +703,7 @@ msgstr "Recevoir"
 msgid "Request failed to remote server."
 msgstr "La requête a échoué, impossible de joindre le serveur distant."
 
-#: src/components/MoneyRequestModal.vue:108
+#: src/components/MoneyRequestModal.vue:52
 #: src/components/MoneyRequestModal.vue:8
 msgid "Request money"
 msgstr "Recevoir"
@@ -759,8 +752,8 @@ msgstr "Sélectionnez un intervalle de temps :"
 #: src/components/AuthChallengeDirect.vue:13
 #: src/components/AuthChallengeDirect.vue:7
 #: src/components/AuthChallengeDirect.vue:8
-#: src/components/MoneyTransferModal.vue:201
-#: src/components/MoneyTransferModal.vue:207
+#: src/components/MoneyTransferModal.vue:150
+#: src/components/MoneyTransferModal.vue:156
 msgid "Send"
 msgstr "Envoyer"
 
@@ -829,7 +822,7 @@ msgstr "Source"
 msgid "Target"
 msgstr "Destination"
 
-#: src/components/MoneyTransferModal.vue:485
+#: src/components/MoneyTransferModal.vue:422
 msgid "Target account is inactive."
 msgstr "Le compte destinataire du tranfert est désactivé."
 
@@ -858,7 +851,7 @@ msgstr ""
 msgid "The following top up requests needs to be paid or canceled"
 msgstr "Les demandes de rechargement suivantes doivent être payées ou annulées"
 
-#: src/components/MoneyTransferModal.vue:431
+#: src/components/MoneyTransferModal.vue:368
 msgid ""
 "The last transactions were not yet all processed. To ensure that this "
 "payment can be sent, you need to wait for these pending transactions to be "
@@ -877,7 +870,7 @@ msgstr ""
 msgid "The maximum top up amount must be equal or less than %{ amount }"
 msgstr "Le montant à créditer doit être égal ou inférieur à %{ amount }"
 
-#: src/components/MoneyRequestModal.vue:197
+#: src/components/MoneyTransaction.vue:139
 msgid "the message description is too long"
 msgstr "Le message de description est trop long"
 
@@ -898,7 +891,7 @@ msgstr "Votre demande de rechargement a été supprimée"
 msgid "The Top-up request has been successfully payed"
 msgstr "Votre demande de rechargement a été traitée avec succès"
 
-#: src/components/MoneyTransferModal.vue:461
+#: src/components/MoneyTransferModal.vue:398
 msgid "The transaction was sent but no confirmation was received. "
 msgstr "La transaction a été envoyée mais aucune confirmation n'a été reçue."
 
@@ -932,8 +925,7 @@ msgstr ""
 msgid "to"
 msgstr "à"
 
-#: src/components/MoneyRequestModal.vue:21
-#: src/components/MoneyTransferModal.vue:157
+#: src/components/MoneyTransaction.vue:21 src/components/MoneyTransaction.vue:6
 msgid "To"
 msgstr "Vers"
 
@@ -1019,8 +1011,8 @@ msgstr "Opération traitée"
 msgid "Transaction sent"
 msgstr "Opération envoyée"
 
-#: src/components/MoneyTransferModal.vue:425
-#: src/components/MoneyTransferModal.vue:478
+#: src/components/MoneyTransferModal.vue:362
+#: src/components/MoneyTransferModal.vue:415
 msgid "Transaction was refused due to insufficient balance"
 msgstr "Transaction refusée en raison de fonds insuffisants"
 
@@ -1028,7 +1020,7 @@ msgstr "Transaction refusée en raison de fonds insuffisants"
 msgid "Transactions"
 msgstr "Opérations"
 
-#: src/components/MoneyTransferModal.vue:334
+#: src/components/MoneyTransferModal.vue:283
 msgid "Unable to read QR code"
 msgstr "Impossible de lire le QR code."
 
@@ -1140,12 +1132,12 @@ msgstr ""
 "Vous avez déjà une demande de rechargement en attente. Veuillez la payer ou "
 "la supprimer avant de poursuivre"
 
-#: src/components/MoneyTransferModal.vue:329
+#: src/components/MoneyTransferModal.vue:278
 msgid "You can not transfer money to your own account"
 msgstr "Vous ne pouvez pas envoyer de l'argent vers votre propre compte."
 
-#: src/components/MoneyTransferModal.vue:408
-#: src/components/MoneyTransferModal.vue:501
+#: src/components/MoneyTransferModal.vue:345
+#: src/components/MoneyTransferModal.vue:438
 msgid ""
 "You can try again. If the issue persists, please contact your administrator."
 msgstr ""
@@ -1162,7 +1154,7 @@ msgstr ""
 "Vous pouvez essayer de recharger la page, ou contacter votre administrateur "
 "si l'erreur persiste."
 
-#: src/components/MoneyTransferModal.vue:487
+#: src/components/MoneyTransferModal.vue:424
 msgid "You can't send money to this account."
 msgstr "Vous ne pouvez pas envoyer de l'argent vers ce compte."
 
@@ -1185,3 +1177,9 @@ msgstr "Vos identifiants seront enregistrés après votre prochaine connexion"
 #: src/components/TheBankAccountList.vue:104
 msgid "your pending accounts"
 msgstr "vos comptes en attente de création"
+
+#~ msgid "Amount to send must be greater than 0"
+#~ msgstr "Le montant à transférer doit être un nombre positif"
+
+#~ msgid "From"
+#~ msgstr "Depuis"