add fucntionality to copy link and text after creating a transaction link

frontend/src/components/ClipboardCopy.vue

@@ -3,6 +3,9 @@
     <b-input-group v-if="canCopyLink" size="lg" class="mb-3" prepend="Link">
       <b-form-input :value="link" type="text" readonly></b-form-input>
       <b-input-group-append>
+        <b-button size="sm" text="Button" variant="primary" @click="copyLinkWithText">
+          {{ $t('gdd_per_link.copy-with-text') }}
+        </b-button>
         <b-button size="sm" text="Button" variant="primary" @click="CopyLink">
           {{ $t('gdd_per_link.copy') }}
         </b-button>
@@ -22,6 +25,8 @@ export default {
   name: 'ClipboardCopy',
   props: {
     link: { type: String, required: true },
+    amount: { type: Number, required: true },
+    memo: { type: String, required: true },
   },
   data() {
     return {
@@ -40,6 +45,21 @@ export default {
           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'))
+        })
+    },
   },
 }
 </script>

frontend/src/components/GddSend/TransactionResultLink.vue

@@ -3,7 +3,12 @@
     <b-col>
       <b-card class="p-0 gradido-custom-background">
         <div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
-        <clipboard-copy :link="link" @show-qr-code-button="showQrCodeButton" />
+        <clipboard-copy
+          :link="link"
+          :amount="amount"
+          :memo="memo"
+          @show-qr-code-button="showQrCodeButton"
+        ></clipboard-copy>
 
         <div class="text-center">
           <figure-qr-code v-if="showQrcode" :link="link" />
@@ -27,10 +32,9 @@ export default {
     FigureQrCode,
   },
   props: {
-    link: {
+    link: { type: String, required: true },
-      type: String,
+    amount: { type: Number, required: true },
-      required: true,
+    memo: { type: String, required: true },
-    },
   },
   data() {
     return {

frontend/src/pages/Send.vue

@@ -41,7 +41,12 @@
           ></transaction-result-send-error>
         </template>
         <template #transactionResultLink>
-          <transaction-result-link :link="link" @on-reset="onReset"></transaction-result-link>
+          <transaction-result-link
+            :link="link"
+            :amount="amount"
+            :memo="memo"
+            @on-reset="onReset"
+          ></transaction-result-link>
         </template>
       </gdd-send>
       <hr />
@@ -145,6 +150,8 @@ 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
               this.transactionData = { ...EMPTY_TRANSACTION_DATA }
               this.currentTransactionStep = TRANSACTION_STEPS.transactionResultLink
               this.updateTransactions({})