Merge pull request #2098 from gradido/2077-copy-text-after-transaction-link-creation

Enable copying the link, username, amount, and memo text after transaction link creation

frontend/src/components/ClipboardCopy.vue

@@ -3,8 +3,11 @@
     <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-link-with-text') }}
+        </b-button>
         <b-button size="sm" text="Button" variant="primary" @click="CopyLink">
-          {{ $t('gdd_per_link.copy') }}
+          {{ $t('gdd_per_link.copy-link') }}
         </b-button>
         <b-button variant="primary" class="text-light" @click="$emit('show-qr-code-button')">
           <b-img src="img/svg/qr-code.svg" width="19" class="svg"></b-img>
@@ -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/components/TransactionLinks/TransactionLink.vue

@@ -20,7 +20,7 @@
 
               <b-dropdown-item v-if="validLink" class="test-copy-link" @click="copy">
                 <b-icon icon="clipboard"></b-icon>
-                {{ $t('gdd_per_link.copy') }}
+                {{ $t('gdd_per_link.copy-link') }}
               </b-dropdown-item>
               <b-dropdown-item
                 v-if="validLink"
@@ -28,7 +28,7 @@
                 @click="copyLinkWithText()"
               >
                 <b-icon icon="clipboard-plus"></b-icon>
-                {{ $t('gdd_per_link.copy-with-text') }}
+                {{ $t('gdd_per_link.copy-link-with-text') }}
               </b-dropdown-item>
               <b-dropdown-item
                 v-if="validLink"

frontend/src/locales/de.json

@@ -151,8 +151,8 @@
   "GDD": "GDD",
   "gdd_per_link": {
     "choose-amount": "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.",
-    "copy": "kopieren",
+    "copy-link": "Link kopieren",
-    "copy-with-text": "Link und Text kopieren",
+    "copy-link-with-text": "Link und Text kopieren",
     "created": "Der Link wurde erstellt!",
     "credit-your-gradido": "Damit die Gradido gutgeschrieben werden können, klicke auf den Link!",
     "decay-14-day": "Vergänglichkeit für 14 Tage",

frontend/src/locales/en.json

@@ -151,8 +151,8 @@
   "GDD": "GDD",
   "gdd_per_link": {
     "choose-amount": "Select an amount that you would like to send via link. You can also enter a message. Click 'Generate now' to create a link that you can share.",
-    "copy": "copy",
+    "copy-link": "Copy link",
-    "copy-with-text": "Copy link and text",
+    "copy-link-with-text": "Copy link and text",
     "created": "Link was created!",
     "credit-your-gradido": "For the Gradido to be credited, click on the link!",
     "decay-14-day": "Decay for 14 days",

frontend/src/pages/Send.spec.js

@@ -28,6 +28,7 @@ describe('Send', () => {
     $store: {
       state: {
         email: 'sender@example.org',
+        firstName: 'Testy',
       },
     },
     $apollo: {
@@ -228,18 +229,63 @@ describe('Send', () => {
             navigator.clipboard = navigatorClipboard
           })
 
-          describe('copy with success', () => {
+          describe('copy link with success', () => {
             beforeEach(async () => {
               navigatorClipboardMock.mockResolvedValue()
-              await wrapper.findAll('button').at(0).trigger('click')
+              await wrapper.findAll('button').at(1).trigger('click')
             })
 
+            it('should call clipboard.writeText', () => {
+              expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+                'http://localhost/redeem/0123456789',
+              )
+            })
             it('toasts success message', () => {
               expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.link-copied')
             })
           })
 
-          describe('copy with error', () => {
+          describe('copy link with error', () => {
+            beforeEach(async () => {
+              navigatorClipboardMock.mockRejectedValue()
+              await wrapper.findAll('button').at(1).trigger('click')
+            })
+
+            it('toasts error message', () => {
+              expect(toastErrorSpy).toBeCalledWith('gdd_per_link.not-copied')
+            })
+          })
+        })
+
+        describe('copy link and text with success', () => {
+          const navigatorClipboard = navigator.clipboard
+          beforeAll(() => {
+            delete navigator.clipboard
+            navigator.clipboard = { writeText: navigatorClipboardMock }
+          })
+          afterAll(() => {
+            navigator.clipboard = navigatorClipboard
+          })
+
+          describe('copy link and text with success', () => {
+            beforeEach(async () => {
+              navigatorClipboardMock.mockResolvedValue()
+              await wrapper.findAll('button').at(0).trigger('click')
+            })
+
+            it('should call clipboard.writeText', () => {
+              expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+                'http://localhost/redeem/0123456789\n' +
+                  'Testy transaction-link.send_you 56.78 Gradido.\n' +
+                  '"Make the best of the link!"',
+              )
+            })
+            it('toasts success message', () => {
+              expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.link-and-text-copied')
+            })
+          })
+
+          describe('copy link and text with error', () => {
             beforeEach(async () => {
               navigatorClipboardMock.mockRejectedValue()
               await wrapper.findAll('button').at(0).trigger('click')
@@ -253,7 +299,7 @@ describe('Send', () => {
 
         describe('close button click', () => {
           beforeEach(async () => {
-            await wrapper.findAll('button').at(2).trigger('click')
+            await wrapper.findAll('button').at(3).trigger('click')
           })
 
           it('Shows the TransactionForm', () => {

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({})