including validation date infos to link copying after transaction link creation

- adapt transaction link creation mutation to get the validation date
- add validation date and text to link copy
- utilize mixins to avoid code doubling

frontend/src/components/ClipboardCopy.vue

@@ -6,7 +6,7 @@
         <b-button size="sm" text="Button" variant="primary" @click="copyLinkWithText">
           {{ $t('gdd_per_link.copy-link-with-text') }}
         </b-button>
-        <b-button size="sm" text="Button" variant="primary" @click="CopyLink">
+        <b-button size="sm" text="Button" variant="primary" @click="copyLink">
           {{ $t('gdd_per_link.copy-link') }}
         </b-button>
         <b-button variant="primary" class="text-light" @click="$emit('show-qr-code-button')">
@@ -21,46 +21,10 @@
   </div>
 </template>
 <script>
+import { copyLinks } from '@/mixins/copyLinks'
 export default {
   name: 'ClipboardCopy',
-  props: {
-    link: { type: String, required: true },
-    amount: { type: Number, required: true },
-    memo: { type: String, required: true },
-  },
-  data() {
-    return {
-      canCopyLink: true,
-    }
-  },
-  methods: {
-    CopyLink() {
-      navigator.clipboard
-        .writeText(this.link)
-        .then(() => {
-          this.toastSuccess(this.$t('gdd_per_link.link-copied'))
-        })
-        .catch(() => {
-          this.canCopyLink = false
-          this.toastError(this.$t('gdd_per_link.not-copied'))
-        })
-    },
-    copyLinkWithText() {
-      navigator.clipboard
-        .writeText(
-          `${this.link}
-${this.$store.state.firstName} ${this.$t('transaction-link.send_you')} ${this.amount} Gradido.
-"${this.memo}"`,
-        )
-        .then(() => {
-          this.toastSuccess(this.$t('gdd_per_link.link-and-text-copied'))
-        })
-        .catch(() => {
-          this.canCopyLink = false
-          this.toastError(this.$t('gdd_per_link.not-copied'))
-        })
-    },
-  },
+  mixins: [copyLinks],
 }
 </script>
 <style>

frontend/src/components/GddSend/TransactionResultLink.vue

@@ -7,6 +7,7 @@
           :link="link"
           :amount="amount"
           :memo="memo"
+          :validUntil="validUntil"
           @show-qr-code-button="showQrCodeButton"
         ></clipboard-copy>
 
@@ -33,8 +34,9 @@ export default {
   },
   props: {
     link: { type: String, required: true },
-    amount: { type: Number, required: true },
+    amount: { type: String, required: true },
     memo: { type: String, required: true },
+    validUntil: { type: String, required: true },
   },
   data() {
     return {

frontend/src/graphql/mutations.js

@@ -74,6 +74,9 @@ export const createTransactionLink = gql`
   mutation($amount: Decimal!, $memo: String!) {
     createTransactionLink(amount: $amount, memo: $memo) {
       link
+      amount
+      memo
+      validUntil
     }
   }
 `

frontend/src/pages/Send.vue

@@ -45,6 +45,7 @@
             :link="link"
             :amount="amount"
             :memo="memo"
+            :validUntil="validUntil"
             @on-reset="onReset"
           ></transaction-result-link>
         </template>
@@ -149,9 +150,15 @@ export default {
             })
             .then((result) => {
               this.$emit('set-tunneled-email', null)
-              this.link = result.data.createTransactionLink.link
-              this.amount = this.transactionData.amount
-              this.memo = this.transactionData.memo
+              const {
+                data: {
+                  createTransactionLink: { link, amount, memo, validUntil },
+                },
+              } = result
+              this.link = link
+              this.amount = amount
+              this.memo = memo
+              this.validUntil = validUntil
               this.transactionData = { ...EMPTY_TRANSACTION_DATA }
               this.currentTransactionStep = TRANSACTION_STEPS.transactionResultLink
               this.updateTransactions({})