new: add transaction confirmation screen after sending money and on a…

…ll past transaction

src/components/ConfirmPaymentModal.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="modal is-active">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title is-title-shrink">
+          {{
+            {
+              transactionDetail: $gettext("Transaction details"),
+              paymentConfirmation: $gettext("Payment confirmation"),
+            }[$modal.args?.value[0].type]
+          }}
+        </p>
+        <button
+          class="delete"
+          aria-label="close"
+          @click="$modal.close()"
+        ></button>
+      </header>
+
+      <section class="modal-card-body">
+        <div class="body-content is-size-4">
+          <p class="custom-card-title has-text-weight-bold">
+            {{
+              {
+                transactionDetail: $modal.args?.value[0].transaction.pending
+                  ? $gettext("Transaction sent")
+                  : $gettext("Transaction processed"),
+                paymentConfirmation: $gettext("Payment sent"),
+              }[$modal.args?.value[0].type]
+            }}
+          </p>
+          <div class="confirm-icon-container">
+            <fa-icon icon="fa-check" class="confirm-icon fa-thin" />
+          </div>
+
+          <p
+            class="
+              amount
+              custom-card-destinataire
+              has-text-weight-bold
+              is-size-4
+            "
+          >
+            {{
+              ((t) =>
+                t.amount < 0
+                  ? $gettext("Sent %{amount}", {
+                      amount: `${numericFormat(-t.amount)} ${t.currency}`,
+                    })
+                  : $gettext("Received %{amount}", {
+                      amount: `${numericFormat(t.amount)} ${t.currency}`,
+                    }))($modal.args?.value[0].transaction)
+            }}
+          </p>
+
+          <h2 class="frame3-sub-title">
+            {{
+              $modal.args?.value[0].transaction.amount < 0
+                ? $gettext("to")
+                : $gettext("from")
+            }}
+          </h2>
+          <p
+            class="
+              frame3-sub-title
+              has-text-weight-bold
+              is-size-3
+              hide-overflow
+            "
+          >
+            {{ $modal.args?.value[0].transaction.related }}
+          </p>
+
+          <p class="frame3-sub-title mb-3">
+            {{ dateFormat }}
+          </p>
+        </div>
+      </section>
+      <footer
+        class="
+          modal-card-foot
+          custom-modal-card-foot
+          is-justify-content-flex-end
+        "
+      >
+        <button
+          class="button custom-button-modal has-text-weight-medium"
+          :title="$gettext('Ok')"
+          @click="$modal.close()"
+        >
+          <span>{{ $gettext("Ok") }}</span>
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { Options, Vue } from "vue-class-component"
+  import { mapGetters } from "vuex"
+  import moment from "moment"
+
+  @Options({
+    name: "ConfirmPaymentModal",
+    computed: {
+      ...mapGetters(["numericFormat"]),
+      dateFormat() {
+        return moment(
+          this.$modal.args?.value[0].transaction.date.toString()
+        ).format("YYYY-MM-DD HH:mm:ssZ")
+      },
+    },
+  })
+  export default class ConfirmPaymentModal extends Vue {}
+</script>
+<style lang="scss" scoped>
+  @import "../assets/custom-variables";
+
+  .confirm-icon-container {
+    width: fit-content;
+    margin: auto;
+  }
+  .confirm-icon {
+    font-size: 4em;
+    color: $color-2;
+  }
+  .body-content {
+    text-align: center;
+  }
+  .hide-overflow {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

src/components/Modal.vue

@@ -8,6 +8,7 @@
   import MoneyCreditModal from "./MoneyCreditModal.vue"
   import AboutModal from "./AboutModal.vue"
   import TransactionListModal from "./TransactionListModal.vue"
+  import ConfirmPaymentModal from "./ConfirmPaymentModal.vue"
 
   @Options({
     name: "Modal",
@@ -16,6 +17,7 @@
       MoneyCreditModal,
       AboutModal,
       TransactionListModal,
+      ConfirmPaymentModal,
     },
     data() {
       return {

src/components/MoneyTransferModal.vue

@@ -239,6 +239,7 @@
           balance: false,
           amount: false,
         },
+        account: null,
       }
     },
     created() {
@@ -249,6 +250,7 @@
       } else {
         account = account._obj.parent
       }
+      this.account = account
       const backend = account.parent
 
       this.recipientBatchLoader = UseBatchLoading({
@@ -315,9 +317,11 @@
         }
         // This to ensure we are left with 2 decimals only
         this.amount = parseFloat(this.amount).toFixed(2)
+        let dateBegin = Date.now()
+        let payment
         try {
           this.$store.commit("setRequestLoadingAfterCreds", true)
-          await this.selectedRecipient.transfer(
+          payment = await this.selectedRecipient.transfer(
             this.amount.toString(),
             this.message
           )
@@ -356,17 +360,17 @@
           return
         } finally {
           this.transferOngoing = false
-          this.$loading.hide()
           this.$store.commit("setRequestLoadingAfterCreds", false)
         }
+
+        this.$loading.hide()
         this.errors.balance = false
         this.errors.amount = false
         this.close(true)
-        this.$msg.success(
-          this.$gettext("Payment issued to %{ name }", {
-            name: this.selectedRecipient.name,
-          })
-        )
+        this.$modal.open("ConfirmPaymentModal", {
+          transaction: payment,
+          type: "paymentConfirmation",
+        })
         if (!this.selectedRecipient.is_favorite) {
           this.$dialog
             .show({
@@ -399,6 +403,13 @@
         }
         await this.$store.dispatch("fetchAccounts")
       },
+      wait(ms: number): Promise<void> {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve()
+          }, ms)
+        })
+      },
       close(refreshTransactions: any = false) {
         this.searchName = ""
         this.amount = 0

src/components/TransactionItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb-3 pt-3">
+  <div class="pb-3 pt-3 shadow-bottom">
     <div class="is-pulled-right">
       <h5 class="custom-card-destinataire has-text-right">
         {{ dateFormat(transaction.date) }}
@@ -32,7 +32,6 @@
       </h5>
     </div>
   </div>
-  <span class="custom-line-separator has-background-white-ter mb-2 mt-1"></span>
 </template>
 
 <script lang="ts">
@@ -82,4 +81,7 @@
   .status .fa-check {
     color: $color-2;
   }
+  .shadow-bottom {
+    box-shadow: 0 3px 6px -6px black;
+  }
 </style>

src/components/TransactionListRecent.vue

@@ -47,6 +47,12 @@
         v-for="transaction in transactions"
         :key="transaction"
         :transaction="transaction"
+        @click="
+          $modal.open('ConfirmPaymentModal', {
+            transaction,
+            type: 'transactionDetail',
+          })
+        "
       />
       <div v-if="transactions.length" class="has-text-centered mt-5">
         <button