Merge remote-tracking branch 'origin/frontend-generate-link-for-send-gdd' into Elweyn/issue1558

2025-12-13 07:45:54 +00:00 · 2022-03-09 17:17:06 +01:00 · 2022-03-09 17:17:06 +01:00 · fe5909e649
commit fe5909e649
parent d91310c7de 28fea1942d
14 changed files with 372 additions and 218 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -40,3 +40,8 @@ export default {
  },
 }
 </script>
+<style>
+.pointer {
+  cursor: pointer;
+}
+</style>
--- a/frontend/src/components/GddSend/TransactionConfirmation.spec.js
+++ b/frontend/src/components/GddSend/TransactionConfirmation.spec.js
@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import TransactionConfirmation from './TransactionConfirmation'
+
+const localVue = global.localVue
+
+describe('GddSend confirm', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $i18n: {
+      locale: jest.fn(() => 'en'),
+    },
+    $n: jest.fn((n) => String(n)),
+  }
+
+  const propsData = {
+    balance: 1234,
+    email: 'user@example.org',
+    amount: 12.34,
+    memo: 'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
+    loading: false,
+    selected: 'send',
+  }
+
+  const Wrapper = () => {
+    return mount(TransactionConfirmation, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component div.transaction-confirm', () => {
+      expect(wrapper.find('div.transaction-confirm').exists()).toBeTruthy()
+    })
+
+    describe('has selected "send"', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          selected: 'send',
+        })
+      })
+
+      it('renders the component div.confirm-box-send', () => {
+        expect(wrapper.find('div.confirm-box-send').exists()).toBeTruthy()
+      })
+    })
+
+    describe('has selected "link"', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          selected: 'link',
+        })
+      })
+
+      it('renders the component div.confirm-box-link', () => {
+        expect(wrapper.findAll('div.confirm-box-link').at(0).exists()).toBeTruthy()
+      })
+    })
+  })
+})
--- a/frontend/src/components/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmation.vue
@ -1,6 +1,16 @@
 <template>
-  <div>
-    <b-row>
+  <div class="transaction-confirm">
+    <b-row v-if="selected === 'link'" class="confirm-box-link">
+      <b-alert class="mb-3 mt-3" show variant="muted">
+        <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
+
+        <div>
+          Du versendest per Link:
+          <h1>{{ $n(amount, 'decimal') }} GDD</h1>
+        </div>
+      </b-alert>
+    </b-row>
+    <b-row v-else class="confirm-box-send">
      <b-col>
        <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
        <b-list-group class="">
@ -43,13 +53,24 @@
        <b-col class="text-right">
          <strong>{{ $t('form.your_amount') }}</strong>
        </b-col>
-        <b-col class="text-right borderbottom">
+        <b-col class="text-right">
          <strong>- {{ $n(amount, 'decimal') }}</strong>
        </b-col>
      </b-row>
+      <b-row class="pr-3">
+        <b-col class="text-right">
+          <strong>Vergänglichkeit für 14 Tage</strong>
+        </b-col>
+        <b-col class="text-right borderbottom">
+          <strong>- {{ $n(amount * 0.028, 'decimal') }}</strong>
+        </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, 'decimal') }}</b-col>
+        <b-col v-if="selected === 'link'" class="text-right">
+          ~ {{ $n(balance - amount - amount * 0.028, 'decimal') }}
+        </b-col>
+        <b-col v-else class="text-right">~ {{ $n(balance - amount, 'decimal') }}</b-col>
      </b-row>
    </b-container>

@ -59,29 +80,44 @@
      </b-col>
      <b-col class="text-right">
        <b-button variant="success" :disabled="loading" @click="$emit('send-transaction')">
-          {{ $t('form.send_now') }}
+          {{ selected === 'send' ? $t('form.send_now') : $t('form.generate_now') }}
        </b-button>
      </b-col>
    </b-row>
+
+    <b-alert class="mt-3 confirm-box-link" show v-if="selected === 'link'" variant="muted">
+      <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
+
+      <p>
+        -
+        <b>{{ $t('gdd_per_link.sentence_2') }}</b>
+      </p>
+      <p>
+        -
+        <b>{{ $t('gdd_per_link.sentence_3') }}</b>
+      </p>
+      <p>
+        -
+        <b>{{ $t('gdd_per_link.sentence_4') }}</b>
+      </p>
+
+      <hr />
+      <p class="mb-0">
+        {{ $t('gdd_per_link.sentence_5') }}
+      </p>
+    </b-alert>
  </div>
 </template>
 <script>
 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,
-    }
+    balance: { type: Number, default: 0, required: true },
+    email: { type: String, default: '', required: false },
+    amount: { type: Number, default: 0, required: true },
+    memo: { type: String, default: '', required: true },
+    loading: { type: Boolean, default: false, required: true },
+    selected: { type: String, default: 'send', required: true },
  },
 }
 </script>
--- a/frontend/src/components/GddSend/TransactionForm.spec.js
+++ b/frontend/src/components/GddSend/TransactionForm.spec.js
@ -55,180 +55,203 @@ describe('GddSend', () => {
      })
    })

-    describe('transaction form', () => {
-      beforeEach(() => {
-        wrapper.setProps({ balance: 100.0 })
-      })
-      describe('transaction form show because balance 100,0 GDD', () => {
-        it('has no warning message ', () => {
-          expect(wrapper.find('.text-danger').exists()).toBeFalsy()
-        })
-        it('has a reset button', () => {
-          expect(wrapper.find('.test-buttons').findAll('button').at(0).attributes('type')).toBe(
-            'reset',
-          )
-        })
-        it('has a submit button', () => {
-          expect(wrapper.find('.test-buttons').findAll('button').at(1).attributes('type')).toBe(
-            'submit',
-          )
-        })
+    describe('is selected: "send"', () => {
+      beforeEach(async () => {
+        // await wrapper.setData({
+        //   selected: 'send',
+        // })
+        await wrapper.findAll('input[type="radio"]').at(0).setChecked()
      })

-      describe('email field', () => {
-        it('has an input field of type email', () => {
-          expect(wrapper.find('#input-group-1').find('input').attributes('type')).toBe('email')
+      describe('transaction form', () => {
+        beforeEach(() => {
+          wrapper.setProps({ balance: 100.0 })
+        })
+        describe('transaction form show because balance 100,0 GDD', () => {
+          it('has no warning message ', () => {
+            expect(wrapper.find('.text-danger').exists()).toBeFalsy()
+          })
+          it('has a reset button', () => {
+            expect(wrapper.find('.test-buttons').findAll('button').at(0).attributes('type')).toBe(
+              'reset',
+            )
+          })
+          it('has a submit button', () => {
+            expect(wrapper.find('.test-buttons').findAll('button').at(1).attributes('type')).toBe(
+              'submit',
+            )
+          })
        })

-        it('has an envelope icon', () => {
-          expect(wrapper.find('#input-group-1').find('svg').attributes('aria-label')).toBe(
-            'envelope',
-          )
+        describe('email field', () => {
+          it('has an input field of type email', () => {
+            expect(wrapper.find('#input-group-1').find('input').attributes('type')).toBe('email')
+          })
+
+          it('has an envelope icon', () => {
+            expect(wrapper.find('#input-group-1').find('svg').attributes('aria-label')).toBe(
+              'envelope',
+            )
+          })
+
+          it('has a label form.receiver', () => {
+            expect(wrapper.find('label.input-1').text()).toBe('form.recipient')
+          })
+
+          it('has a placeholder "E-Mail"', () => {
+            expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe(
+              'E-Mail',
+            )
+          })
+
+          it('flushes an error message when no valid email is given', async () => {
+            await wrapper.find('#input-group-1').find('input').setValue('a')
+            await flushPromises()
+            expect(wrapper.find('span.errors').text()).toBe('validations.messages.email')
+          })
+
+          it('trims the email after blur', async () => {
+            await wrapper.find('#input-group-1').find('input').setValue('  valid@email.com  ')
+            await wrapper.find('#input-group-1').find('input').trigger('blur')
+            await flushPromises()
+            expect(wrapper.vm.form.email).toBe('valid@email.com')
+          })
        })

-        it('has a label form.receiver', () => {
-          expect(wrapper.find('label.input-1').text()).toBe('form.recipient')
+        describe('amount field', () => {
+          it('has an input field of type text', () => {
+            expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text')
+          })
+
+          it('has an GDD text icon', () => {
+            expect(wrapper.find('#input-group-2').find('div.m-1').text()).toBe('GDD')
+          })
+
+          it('has a label form.amount', () => {
+            expect(wrapper.find('label.input-2').text()).toBe('form.amount')
+          })
+
+          it('has a placeholder "0.01"', () => {
+            expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe(
+              '0.01',
+            )
+          })
+
+          it('does not update form amount when invalid', async () => {
+            await wrapper.find('#input-group-2').find('input').setValue('invalid')
+            await wrapper.find('#input-group-2').find('input').trigger('blur')
+            await flushPromises()
+            expect(wrapper.vm.form.amountValue).toBe(0)
+          })
+
+          it('flushes an error message when no valid amount is given', async () => {
+            await wrapper.find('#input-group-2').find('input').setValue('a')
+            await flushPromises()
+            expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount')
+          })
+
+          it('flushes an error message when amount is too high', async () => {
+            await wrapper.find('#input-group-2').find('input').setValue('123.34')
+            await flushPromises()
+            expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount')
+          })
+
+          it('flushes no errors when amount is valid', async () => {
+            await wrapper.find('#input-group-2').find('input').setValue('87.34')
+            await flushPromises()
+            expect(wrapper.find('span.errors').exists()).toBeFalsy()
+          })
        })

-        it('has a placeholder "E-Mail"', () => {
-          expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe(
-            'E-Mail',
-          )
+        describe('message text box', () => {
+          it('has an textarea field', () => {
+            expect(wrapper.find('#input-group-3').find('textarea').exists()).toBeTruthy()
+          })
+
+          it('has an chat-right-text icon', () => {
+            expect(wrapper.find('#input-group-3').find('svg').attributes('aria-label')).toBe(
+              'chat right text',
+            )
+          })
+
+          it('has a label form.message', () => {
+            expect(wrapper.find('label.input-3').text()).toBe('form.message')
+          })
+
+          it('flushes an error message when memo is less than 5 characters', async () => {
+            await wrapper.find('#input-group-3').find('textarea').setValue('a')
+            await flushPromises()
+            expect(wrapper.find('span.errors').text()).toBe('validations.messages.min')
+          })
+
+          it('flushes no error message when memo is valid', async () => {
+            await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
+            await flushPromises()
+            expect(wrapper.find('span.errors').exists()).toBeFalsy()
+          })
        })

-        it('flushes an error message when no valid email is given', async () => {
-          await wrapper.find('#input-group-1').find('input').setValue('a')
-          await flushPromises()
-          expect(wrapper.find('span.errors').text()).toBe('validations.messages.email')
+        describe('cancel button', () => {
+          it('has a cancel button', () => {
+            expect(wrapper.find('button[type="reset"]').exists()).toBeTruthy()
+          })
+
+          it('has the text "form.cancel"', () => {
+            expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset')
+          })
+
+          it('clears all fields on click', async () => {
+            await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
+            await wrapper.find('#input-group-2').find('input').setValue('87.23')
+            await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
+            await flushPromises()
+            expect(wrapper.vm.form.email).toBe('someone@watches.tv')
+            expect(wrapper.vm.form.amount).toBe('87.23')
+            expect(wrapper.vm.form.memo).toBe('Long enough')
+            await wrapper.find('button[type="reset"]').trigger('click')
+            await flushPromises()
+            expect(wrapper.vm.form.email).toBe('')
+            expect(wrapper.vm.form.amount).toBe('')
+            expect(wrapper.vm.form.memo).toBe('')
+          })
        })

-        it('trims the email after blur', async () => {
-          await wrapper.find('#input-group-1').find('input').setValue('  valid@email.com  ')
-          await wrapper.find('#input-group-1').find('input').trigger('blur')
-          await flushPromises()
-          expect(wrapper.vm.form.email).toBe('valid@email.com')
+        describe('submit', () => {
+          beforeEach(async () => {
+            await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
+            await wrapper.find('#input-group-2').find('input').setValue('87.23')
+            await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
+            await wrapper.find('form').trigger('submit')
+            await flushPromises()
+          })
+
+          it('emits set-transaction', async () => {
+            expect(wrapper.emitted('set-transaction')).toBeTruthy()
+            expect(wrapper.emitted('set-transaction')).toEqual([
+              [
+                {
+                  email: 'someone@watches.tv',
+                  amount: 87.23,
+                  memo: 'Long enough',
+                  selected: 'send',
+                },
+              ],
+            ])
+          })
        })
      })
+    })

-      describe('amount field', () => {
-        it('has an input field of type text', () => {
-          expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text')
-        })
-
-        it('has an GDD text icon', () => {
-          expect(wrapper.find('#input-group-2').find('div.m-1').text()).toBe('GDD')
-        })
-
-        it('has a label form.amount', () => {
-          expect(wrapper.find('label.input-2').text()).toBe('form.amount')
-        })
-
-        it('has a placeholder "0.01"', () => {
-          expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe(
-            '0.01',
-          )
-        })
-
-        it('does not update form amount when invalid', async () => {
-          await wrapper.find('#input-group-2').find('input').setValue('invalid')
-          await wrapper.find('#input-group-2').find('input').trigger('blur')
-          await flushPromises()
-          expect(wrapper.vm.form.amountValue).toBe(0)
-        })
-
-        it('flushes an error message when no valid amount is given', async () => {
-          await wrapper.find('#input-group-2').find('input').setValue('a')
-          await flushPromises()
-          expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount')
-        })
-
-        it('flushes an error message when amount is too high', async () => {
-          await wrapper.find('#input-group-2').find('input').setValue('123.34')
-          await flushPromises()
-          expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount')
-        })
-
-        it('flushes no errors when amount is valid', async () => {
-          await wrapper.find('#input-group-2').find('input').setValue('87.34')
-          await flushPromises()
-          expect(wrapper.find('span.errors').exists()).toBeFalsy()
-        })
+    describe('is selected: "link"', () => {
+      beforeEach(async () => {
+        // await wrapper.setData({
+        //   selected: 'link',
+        // })
+        await wrapper.findAll('input[type="radio"]').at(1).setChecked()
      })

-      describe('message text box', () => {
-        it('has an textarea field', () => {
-          expect(wrapper.find('#input-group-3').find('textarea').exists()).toBeTruthy()
-        })
-
-        it('has an chat-right-text icon', () => {
-          expect(wrapper.find('#input-group-3').find('svg').attributes('aria-label')).toBe(
-            'chat right text',
-          )
-        })
-
-        it('has a label form.message', () => {
-          expect(wrapper.find('label.input-3').text()).toBe('form.message')
-        })
-
-        it('flushes an error message when memo is less than 5 characters', async () => {
-          await wrapper.find('#input-group-3').find('textarea').setValue('a')
-          await flushPromises()
-          expect(wrapper.find('span.errors').text()).toBe('validations.messages.min')
-        })
-
-        it('flushes no error message when memo is valid', async () => {
-          await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
-          await flushPromises()
-          expect(wrapper.find('span.errors').exists()).toBeFalsy()
-        })
-      })
-
-      describe('cancel button', () => {
-        it('has a cancel button', () => {
-          expect(wrapper.find('button[type="reset"]').exists()).toBeTruthy()
-        })
-
-        it('has the text "form.cancel"', () => {
-          expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset')
-        })
-
-        it('clears all fields on click', async () => {
-          await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
-          await wrapper.find('#input-group-2').find('input').setValue('87.23')
-          await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
-          await flushPromises()
-          expect(wrapper.vm.form.email).toBe('someone@watches.tv')
-          expect(wrapper.vm.form.amount).toBe('87.23')
-          expect(wrapper.vm.form.memo).toBe('Long enough')
-          await wrapper.find('button[type="reset"]').trigger('click')
-          await flushPromises()
-          expect(wrapper.vm.form.email).toBe('')
-          expect(wrapper.vm.form.amount).toBe('')
-          expect(wrapper.vm.form.memo).toBe('')
-        })
-      })
-
-      describe('submit', () => {
-        beforeEach(async () => {
-          await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
-          await wrapper.find('#input-group-2').find('input').setValue('87.23')
-          await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
-          await wrapper.find('form').trigger('submit')
-          await flushPromises()
-        })
-
-        it('emits set-transaction', async () => {
-          expect(wrapper.emitted('set-transaction')).toBeTruthy()
-          expect(wrapper.emitted('set-transaction')).toEqual([
-            [
-              {
-                email: 'someone@watches.tv',
-                amount: 87.23,
-                memo: 'Long enough',
-              },
-            ],
-          ])
-        })
+      it('has no input field of id input-group-1', () => {
+        expect(wrapper.find('#input-group-1').isVisible()).toBeFalsy()
      })
    })
  })
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@ -2,26 +2,39 @@
  <b-row class="transaction-form">
    <b-col xl="12" md="12" class="p-0">
      <b-card class="p-0 m-0" style="background-color: #ebebeba3 !important">
-        <!-- -<QrCode @set-transaction="setTransaction"></QrCode> -->
        <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
          <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
-            <!-- <div>
-                 <qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
-                 </div>
-                 <br />
-            -->
+            <b-row>
+              <b-col>
+                <b-form-radio v-model="selected" name="radios" value="send" size="lg">
+                  {{ $t('send_gdd') }}
+                </b-form-radio>
+              </b-col>
+              <b-col>
+                <b-form-radio v-model="selected" name="radios" value="link" size="lg">
+                  {{ $t('send_per_link') }}
+                </b-form-radio>
+              </b-col>
+            </b-row>
+            <b-alert class="mt-3" v-show="selected === 'link'" show variant="muted">
+              <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
+              <p>
+                {{ $t('gdd_per_link.sentence_1') }}
+              </p>
+            </b-alert>

            <div>
              <validation-provider
+                v-show="selected === 'send'"
                name="Email"
                :rules="{
-                  required: true,
+                  required: selected === 'send' ? true : false,
                  email: true,
                  is_not: $store.state.email,
                }"
                v-slot="{ errors }"
              >
-                <label class="input-1" for="input-1">{{ $t('form.recipient') }}</label>
+                <label class="input-1 mt-5" for="input-1">{{ $t('form.recipient') }}</label>
                <b-input-group
                  id="input-group-1"
                  class="border border-default"
@ -115,7 +128,6 @@
                </b-col>
              </validation-provider>
            </div>
-
            <br />
            <div v-if="!!isBalanceDisabled" class="text-danger">
              {{ $t('form.no_gdd_available') }}
@ -128,7 +140,7 @@
              </b-col>
              <b-col class="text-right">
                <b-button type="submit" variant="success">
-                  {{ $t('form.send_now') }}
+                  {{ selected === 'send' ? $t('form.send_now') : $t('form.generate_now') }}
                </b-button>
              </b-col>
            </b-row>
@ -141,16 +153,12 @@
  </b-row>
 </template>
 <script>
-// import QrCode from './QrCode'
-// import { QrcodeDropZone } from 'vue-qrcode-reader'
 import { BIcon } from 'bootstrap-vue'

 export default {
  name: 'TransactionForm',
  components: {
    BIcon,
-    //    QrCode,
-    // QrcodeDropZone,
  },
  props: {
    balance: { type: Number, default: 0 },
@ -165,12 +173,14 @@ export default {
        memo: '',
        amountValue: 0.0,
      },
+      selected: 'send',
    }
  },
  methods: {
    onSubmit() {
      this.normalizeAmount(true)
      this.$emit('set-transaction', {
+        selected: this.selected,
        email: this.form.email,
        amount: this.form.amountValue,
        memo: this.form.memo,
@ -182,11 +192,6 @@ export default {
      this.form.amount = ''
      this.form.memo = ''
    },
-    /*
-     setTransaction(data) {
-       this.form.email = data.email
-       this.form.amount = data.amount
-     }, */
    normalizeAmount(isValid) {
      this.amountFocused = false
      if (!isValid) return
--- a/frontend/src/components/GddTransactionList.spec.js
+++ b/frontend/src/components/GddTransactionList.spec.js
@ -19,7 +19,7 @@ describe('GddTransactionList', () => {
    $t: jest.fn((t) => t),
    $d: jest.fn((d) => d),
    $i18n: {
-      locale: () => 'de',
+      locale: () => 'en',
    },
  }

@ -96,13 +96,13 @@ describe('GddTransactionList', () => {
              typeId: 'DECAY',
              amount: '-0.16778637075575395772595',
              balance: '31.59320453982945549519405',
-              balanceDate: '2022-03-03T08:54:54.020Z',
+              balanceDate: '2022-03-03T08:54:54',
              memo: '',
              linkedUser: null,
              decay: {
                decay: '-0.16778637075575395772595',
-                start: '2022-02-28T13:55:47.000Z',
-                end: '2022-03-03T08:54:54.020Z',
+                start: '2022-02-28T13:55:47',
+                end: '2022-03-03T08:54:54',
                duration: 241147.02,
              },
            },
@ -111,7 +111,7 @@ describe('GddTransactionList', () => {
              typeId: 'SEND',
              amount: '1',
              balance: '31.76099091058520945292',
-              balanceDate: '2022-02-28T13:55:47.000Z',
+              balanceDate: '2022-02-28T13:55:47',
              memo: 'adasd adada',
              linkedUser: {
                firstName: 'Bibi',
@ -119,8 +119,8 @@ describe('GddTransactionList', () => {
              },
              decay: {
                decay: '-0.2038314055482643084',
-                start: '2022-02-25T07:29:26.000Z',
-                end: '2022-02-28T13:55:47.000Z',
+                start: '2022-02-25T07:29:26',
+                end: '2022-02-28T13:55:47',
                duration: 282381,
              },
            },
@ -129,7 +129,7 @@ describe('GddTransactionList', () => {
              typeId: 'CREATION',
              amount: '1000',
              balance: '32.96482231613347376132',
-              balanceDate: '2022-02-25T07:29:26.000Z',
+              balanceDate: '2022-02-25T07:29:26',
              memo: 'asd adada dad',
              linkedUser: {
                firstName: 'Gradido',
@ -137,8 +137,8 @@ describe('GddTransactionList', () => {
              },
              decay: {
                decay: '-0.03517768386652623868',
-                start: '2022-02-23T10:55:30.000Z',
-                end: '2022-02-25T07:29:26.000Z',
+                start: '2022-02-23T10:55:30',
+                end: '2022-02-25T07:29:26',
                duration: 160436,
              },
            },
@ -147,7 +147,7 @@ describe('GddTransactionList', () => {
              typeId: 'RECEIVE',
              amount: '10',
              balance: '10',
-              balanceDate: '2022-02-23T10:55:30.000Z',
+              balanceDate: '2022-02-23T10:55:30',
              memo: 'asd adaaad adad addad ',
              linkedUser: {
                firstName: 'Bibi',
@ -256,7 +256,7 @@ describe('GddTransactionList', () => {

        it('shows the date of the transaction', () => {
          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
-            'Mon Feb 28 2022 13:55:47 GMT+0000 (Coordinated Universal Time)',
+            'Mon Feb 28 2022 13:55:47 GMT+0000',
          )
        })

@ -321,7 +321,7 @@ describe('GddTransactionList', () => {

        it('shows the date of the transaction', () => {
          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
-            'Fri Feb 25 2022 07:29:26 GMT+0000 (Coordinated Universal Time)',
+            'Fri Feb 25 2022 07:29:26 GMT+0000',
          )
        })
      })
@ -383,7 +383,7 @@ describe('GddTransactionList', () => {

        it('shows the date of the transaction', () => {
          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
-            'Wed Feb 23 2022 10:55:30 GMT+0000 (Coordinated Universal Time)',
+            'Wed Feb 23 2022 10:55:30 GMT+0000',
          )
        })

--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@ -13,7 +13,7 @@
      </div>

      <div v-for="({ id, typeId }, index) in transactions" :key="id">
-        <transaction-list-item :typeId="typeId">
+        <transaction-list-item :typeId="typeId" class="pointer">
          <template #DECAY>
            <transaction-decay class="list-group-item" v-bind="transactions[index]" />
          </template>
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-creation">
+  <div class="transaction-slot-creation">
    <div @click="visible = !visible">
      <!-- Collaps Icon  -->
      <div class="text-right" style="width: 95%; position: absolute">
@ -75,7 +75,7 @@
        </b-row>
      </div>

-      <b-collapse class="pb-4 pt-5" v-model="visible">
+      <b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
        <decay-information-before-startblock v-if="decay.start === null" />
        <decay-information-decay-startblock
          v-else-if="isStartBlock"
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-decay">
+  <div class="transaction-slot-decay">
    <div @click="visible = !visible">
      <!-- Collaps Icon  -->
      <div class="text-right" style="width: 95%; position: absolute">
@ -38,7 +38,7 @@
        </b-row>
      </div>

-      <b-collapse class="pb-4 pt-5" v-model="visible">
+      <b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
        <decay-information-decay :balance="balance" :decay="decay" />
      </b-collapse>
    </div>
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-receive">
+  <div class="transaction-slot-receive">
    <div @click="visible = !visible">
      <!-- Collaps Icon  -->
      <div class="text-right" style="width: 95%; position: absolute">
@ -78,7 +78,7 @@
        </b-row>
      </div>

-      <b-collapse class="pb-4 pt-5" v-model="visible">
+      <b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
        <decay-information-before-startblock v-if="decay.start === null" />
        <decay-information-decay-startblock
          v-else-if="isStartBlock"
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-send">
+  <div class="transaction-slot-send">
    <div @click="visible = !visible">
      <!-- Collaps Icon  -->
      <div class="text-right" style="width: 95%; position: absolute">
@ -75,7 +75,7 @@
        </b-row>
      </div>

-      <b-collapse class="pb-4 pt-5" v-model="visible">
+      <b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
        <decay-information-before-startblock v-if="decay.start === null" />
        <decay-information-decay-startblock
          v-else-if="isStartBlock"
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@ -67,6 +67,7 @@
    "email": "E-Mail",
    "firstname": "Vorname",
    "from": "Von",
+    "generate_now": "jetzt generieren",
    "lastname": "Nachname",
    "memo": "Nachricht",
    "message": "Nachricht",
@ -99,6 +100,14 @@
    },
    "your_amount": "Dein Betrag"
  },
+  "gdd_per_link": {
+    "header": "Gradidos versenden per Link",
+    "sentence_1": "Wähle einen Betrag, aus welchen du per Link versenden möchtest. Du kannst auch noch eine Nachricht eintragen. Beim Klick „jetzt generieren“ wird ein Link erstellt, den du versenden kannst.",
+    "sentence_2": "Der Link ist 14 Tage gültig!",
+    "sentence_3": "Wird der Link nicht innerhalb der 14 Tage Frist abgerufen, wird er automatisch gelöscht. Der Betrag wird dann wieder deinem Konto gutgeschrieben.",
+    "sentence_4": "Wer den Link klick aktiviert, erhält die Zahlung von deinem Konto. Wer noch nicht Mitglied bei Gradido ist, wird durch den Registrierungsprozess geleitet und bekommt den GDD Betrag nach Registrierung / Bestätigung seines Gradido Kontos gut geschrieben.",
+    "sentence_5": "Der Vergänglichkeitsbetrag wird von dir getragen und für die maximale Gültigkeit deinem Betrag aufgerechnet. Dir wird aber nur der Betrag als Vergänglichkeit berechnet, je nachdem wie viel Tage bis zum Einlösen des Links vergangen sind. Der Restbetrag wird dir wieder zurückerstattet."
+  },
  "gdt": {
    "action": "Aktion",
    "calculation": "Berechnung der GradidoTransform",
@ -129,6 +138,8 @@
    "publisherId": "Publisher-Id"
  },
  "send": "Senden",
+  "send_gdd": "GDD versenden",
+  "send_per_link": "GDD versenden per Link",
  "settings": {
    "coinanimation": {
      "coinanimation": "Münzanimation",
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@ -67,6 +67,7 @@
    "email": "Email",
    "firstname": "Firstname",
    "from": "from",
+    "generate_now": "Generate now",
    "lastname": "Lastname",
    "memo": "Message",
    "message": "Message",
@ -99,6 +100,14 @@
    },
    "your_amount": "Your amount"
  },
+  "gdd_per_link": {
+    "header": "Send Gradidos by link",
+    "sentence_1": "Select an amount that you would like to send via a link. You can also enter a message. Click 'Generate now' to create a link that you can send.",
+    "sentence_2": "The link is valid for 14 days!",
+    "sentence_3": "If the link is not called up within the 14-day period, it will be deleted automatically. The amount will then be credited to your account.",
+    "sentence_4": "Whoever activates the link will receive the payment from your account. If you are not yet a member of Gradido, you will be guided through the registration process and will get the GDD amount credited to your account after registration / confirmation of your Gradido account.",
+    "sentence_5": "The transience amount will be borne by you and will be added to your amount for the maximum validity. However, you will only be charged the amount as transience depending on how many days have passed until the link is redeemed. The remaining amount will be refunded to you."
+  },
  "gdt": {
    "action": "Action",
    "calculation": "Calculation of GradidoTransform",
@ -129,6 +138,8 @@
    "publisherId": "PublisherID"
  },
  "send": "Send",
+  "send_gdd": "GDD send",
+  "send_per_link": "GDD send via link",
  "settings": {
    "coinanimation": {
      "coinanimation": "Coin animation",
--- a/frontend/src/pages/Send.vue
+++ b/frontend/src/pages/Send.vue
@ -8,7 +8,7 @@
        <template #transaction-confirmation>
          <transaction-confirmation
            :balance="balance"
-            :transactions="transactions"
+            :selected="transactionData.selected"
            :email="transactionData.email"
            :amount="transactionData.amount"
            :memo="transactionData.memo"