Merge pull request #1149 from gradido/1078-GDD-Calculate-Decay-Tool-clear

1057 display gdd balance when sending

frontend/src/locales/de.json

@@ -57,6 +57,7 @@
     "at": "am",
     "cancel": "Abbrechen",
     "close": "schließen",
+    "current_balance": "aktueller Kontostand",
     "date": "Datum",
     "description": "Beschreibung",
     "edit": "bearbeiten",
@@ -66,6 +67,7 @@
     "lastname": "Nachname",
     "memo": "Nachricht",
     "message": "Nachricht",
+    "new_balance": "neuer Kontostand nach Bestätigung",
     "password": "Passwort",
     "passwordRepeat": "Passwort wiederholen",
     "password_new": "neues Passwort",
@@ -90,7 +92,8 @@
       "is-not": "Du kannst dir selbst keine Gradidos überweisen",
       "usernmae-regex": "Der Username muss mit einem Buchstaben beginnen auf den mindestens zwei alfanumerische Zeichen folgen müssen.",
       "usernmae-unique": "Der Username ist bereits vergeben."
-    }
+    },
+    "your_amount": "Dein Betrag"
   },
   "gdt": {
     "action": "Aktion",

frontend/src/locales/en.json

@@ -57,6 +57,7 @@
     "at": "at",
     "cancel": "Cancel",
     "close": "Close",
+    "current_balance": "current balance",
     "date": "Date",
     "description": "Description",
     "edit": "Edit",
@@ -66,6 +67,7 @@
     "lastname": "Lastname",
     "memo": "Message",
     "message": "Message",
+    "new_balance": "account balance after confirmation",
     "password": "Password",
     "passwordRepeat": "Repeat password",
     "password_new": "New password",
@@ -90,7 +92,8 @@
       "is-not": "You cannot send Gradidos to yourself",
       "usernmae-regex": "The username must start with a letter, followed by at least two alphanumeric characters.",
       "usernmae-unique": "The username is already taken."
-    }
+    },
+    "your_amount": "Your amount"
   },
   "gdt": {
     "action": "Action",

frontend/src/views/Pages/SendOverview.spec.js

@@ -13,7 +13,9 @@ describe('SendOverview', () => {
 
   const propsData = {
     balance: 123.45,
-    transactionCount: 1,
+    GdtBalance: 1234.56,
+    transactions: [{ balance: 0.1 }],
+    pending: true,
   }
 
   const mocks = {
@@ -42,18 +44,16 @@ describe('SendOverview', () => {
       expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
     })
 
-    // it('has a transactions table', () => {
-    //  expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
-    // })
-
     describe('transaction form', () => {
-      it('steps forward in the dialog', async () => {
-        await wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
+      beforeEach(async () => {
+        wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
           email: 'user@example.org',
           amount: 23.45,
           memo: 'Make the best of it!',
         })
-        expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBeTruthy()
+      })
+      it('steps forward in the dialog', () => {
+        expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBe(true)
       })
     })
 
@@ -112,18 +112,22 @@ describe('SendOverview', () => {
       describe('transaction is confirmed and server response is error', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
-          sendMock.mockRejectedValue({ message: 'receiver not found' })
+          sendMock.mockRejectedValue({ message: 'recipiant not known' })
           await wrapper
             .findComponent({ name: 'TransactionConfirmation' })
             .vm.$emit('send-transaction')
         })
 
         it('shows the error page', () => {
-          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_error')
+          expect(wrapper.find('.test-send_transaction_error').text()).toContain(
+            'form.send_transaction_error',
+          )
         })
 
         it('shows recipient not found', () => {
-          expect(wrapper.text()).toContain('transaction.receiverNotFound')
+          expect(wrapper.find('.test-receiver-not-found').text()).toContain(
+            'transaction.receiverNotFound',
+          )
         })
       })
     })

frontend/src/views/Pages/SendOverview.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
     <b-container>
-      <gdd-send :currentTransactionStep="currentTransactionStep">
+      <gdd-send :currentTransactionStep="currentTransactionStep" class="pt-3">
         <template #transaction-form>
           <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
         </template>
         <template #transaction-confirmation>
           <transaction-confirmation
+            :balance="balance"
+            :transactions="transactions"
             :email="transactionData.email"
             :amount="transactionData.amount"
             :memo="transactionData.memo"
@@ -44,7 +46,6 @@ export default {
   name: 'SendOverview',
   components: {
     GddSend,
-
     TransactionForm,
     TransactionConfirmation,
     TransactionResult,

frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue

@@ -2,23 +2,61 @@
   <div>
     <b-row>
       <b-col>
-        <div class="display-4 p-4">{{ $t('form.send_check') }}</div>
-        <b-list-group>
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
-            {{ email }}
-            <b-badge variant="primary" pill>{{ $t('form.recipient') }}</b-badge>
-          </b-list-group-item>
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
-            {{ $n(amount, 'decimal') }} GDD
-            <b-badge variant="primary" pill>{{ $t('form.amount') }}</b-badge>
-          </b-list-group-item>
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
-            {{ memo ? memo : '-' }}
-            <b-badge variant="primary" pill>{{ $t('form.message') }}</b-badge>
-          </b-list-group-item>
+        <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
+        <b-list-group class="">
+          <label class="input-1" for="input-1">{{ $t('form.recipient') }}</label>
+          <b-input-group id="input-group-1" class="borderbottom" size="lg">
+            <b-input-group-prepend class="d-none d-md-block gray-background">
+              <b-icon icon="envelope" class="display-4 m-3"></b-icon>
+            </b-input-group-prepend>
+            <div class="p-3">{{ email }}</div>
+          </b-input-group>
+          <br />
+          <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
+          <b-input-group id="input-group-2" class="borderbottom" size="lg">
+            <b-input-group-prepend class="p-2 d-none d-md-block gray-background">
+              <div class="m-1 mt-2">GDD</div>
+            </b-input-group-prepend>
+
+            <div class="p-3">{{ $n(amount, 'decimal') }}</div>
+          </b-input-group>
+
+          <br />
+          <label class="input-3" for="input-3">{{ $t('form.message') }}</label>
+          <b-input-group id="input-group-3" class="borderbottom">
+            <b-input-group-prepend class="d-none d-md-block gray-background">
+              <b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
+            </b-input-group-prepend>
+            <div class="p-3">{{ memo ? memo : '-' }}</div>
+          </b-input-group>
         </b-list-group>
       </b-col>
     </b-row>
+
+    <b-container class="bv-example-row mt-3 gray-background p-2">
+      <b-row class="pr-3">
+        <b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
+        <b-col class="text-right">{{ $n(balance, 'decimal') }}</b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col class="text-right">
+          <strong>{{ $t('form.your_amount') }}</strong>
+        </b-col>
+        <b-col class="text-right">
+          <strong>- {{ $n(amount, 'decimal') }}</strong>
+        </b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col class="text-right">{{ $t('decay.decay') }}</b-col>
+        <b-col class="text-right" style="border-bottom: double">- {{ $n(decay, 'decimal') }}</b-col>
+      </b-row>
+
+      <b-row class="pr-3">
+        <b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
+        <b-col class="text-right">~ {{ $n(balance - amount - decay, 'decimal') }}</b-col>
+      </b-row>
+    </b-container>
+
     <b-row class="mt-4">
       <b-col>
         <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
@@ -35,10 +73,27 @@
 export default {
   name: 'TransactionConfirmation',
   props: {
+    balance: { type: Number, default: 0 },
     email: { type: String, default: '' },
     amount: { type: Number, default: 0 },
     memo: { type: String, default: '' },
     loading: { type: Boolean, default: false },
+    transactions: {
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      decay: this.transactions[0].balance,
+    }
   },
 }
 </script>
+<style>
+.gray-background {
+  background-color: #ecebe6a3 !important;
+}
+.borderbottom {
+  border-bottom: 1px solid rgb(70, 65, 65);
+}
+</style>

frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue

@@ -20,10 +20,10 @@
           <div>{{ $t('form.sorry') }}</div>
           <hr />
 
-          <div>{{ $t('form.send_transaction_error') }}</div>
+          <div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
 
           <hr />
-          <div v-if="errorResult === 'receiver not found'">
+          <div class="test-receiver-not-found" v-if="errorResult === 'recipiant not known'">
             {{ $t('transaction.receiverNotFound') }}
           </div>
           <div v-else>({{ errorResult }})</div>