Merge pull request #2030 from gradido/link-text-for-emails

Transaction link: copy link, text and more

frontend/src/components/TransactionLinks/TransactionLink.spec.js

@@ -9,15 +9,16 @@ const mockAPIcall = jest.fn()
 const navigatorClipboardMock = jest.fn()
 
 const mocks = {
-  $i18n: {
-    locale: 'en',
-  },
   $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
-  $tc: jest.fn((tc) => tc),
   $apollo: {
     mutate: mockAPIcall,
   },
+  $store: {
+    state: {
+      firstName: 'Testy',
+    },
+  },
 }
 
 const propsData = {
@@ -77,7 +78,7 @@ describe('TransactionLink', () => {
           navigator.clipboard = navigatorClipboard
         })
 
-        describe('copy with success', () => {
+        describe('copy link with success', () => {
           beforeEach(async () => {
             navigatorClipboardMock.mockResolvedValue()
             await wrapper.find('.test-copy-link .dropdown-item').trigger('click')
@@ -93,7 +94,26 @@ describe('TransactionLink', () => {
           })
         })
 
-        describe('copy with error', () => {
+        describe('copy link and text with success', () => {
+          beforeEach(async () => {
+            navigatorClipboardMock.mockResolvedValue()
+            await wrapper.find('.test-copy-text .dropdown-item').trigger('click')
+          })
+
+          it('should call clipboard.writeText', () => {
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+              'http://localhost/redeem/c00000000c000000c0000\n' +
+                'Testy transaction-link.send_you 75 Gradido.\n' +
+                '"Katzenauge, Eulenschrei, was verschwunden komm herbei!"\n' +
+                'gdd_per_link.credit-your-gradido gdd_per_link.validUntilDate',
+            )
+          })
+          it('toasts success message', () => {
+            expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.link-and-text-copied')
+          })
+        })
+
+        describe('copy link with error', () => {
           beforeEach(async () => {
             navigatorClipboardMock.mockRejectedValue()
             await wrapper.find('.test-copy-link .dropdown-item').trigger('click')
@@ -103,6 +123,17 @@ describe('TransactionLink', () => {
             expect(toastErrorSpy).toBeCalledWith('gdd_per_link.not-copied')
           })
         })
+
+        describe('copy link and text with error', () => {
+          beforeEach(async () => {
+            navigatorClipboardMock.mockRejectedValue()
+            await wrapper.find('.test-copy-text .dropdown-item').trigger('click')
+          })
+
+          it('toasts an error', () => {
+            expect(toastErrorSpy).toBeCalledWith('gdd_per_link.not-copied')
+          })
+        })
       })
 
       describe('qr code modal', () => {

frontend/src/components/TransactionLinks/TransactionLink.vue

@@ -22,6 +22,14 @@
                 <b-icon icon="clipboard"></b-icon>
                 {{ $t('gdd_per_link.copy') }}
               </b-dropdown-item>
+              <b-dropdown-item
+                v-if="validLink"
+                class="test-copy-text pt-3"
+                @click="copyLinkWithText()"
+              >
+                <b-icon icon="clipboard-plus"></b-icon>
+                {{ $t('gdd_per_link.copy-with-text') }}
+              </b-dropdown-item>
               <b-dropdown-item
                 v-if="validLink"
                 @click="$bvModal.show('modalPopover-' + id)"
@@ -99,6 +107,24 @@ 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}"
+${this.$t('gdd_per_link.credit-your-gradido')} ${this.$t('gdd_per_link.validUntilDate', {
+            date: this.$d(new Date(this.validUntil), 'short'),
+          })}`,
+        )
+        .then(() => {
+          this.toastSuccess(this.$t('gdd_per_link.link-and-text-copied'))
+        })
+        .catch(() => {
+          this.$bvModal.show('modalPopoverCopyError' + this.id)
+          this.toastError(this.$t('gdd_per_link.not-copied'))
+        })
+    },
     deleteLink() {
       this.$bvModal.msgBoxConfirm(this.$t('gdd_per_link.delete-the-link')).then(async (value) => {
         if (value)

frontend/src/locales/de.json

@@ -125,7 +125,9 @@
   "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-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",
     "delete-the-link": "Den Link löschen?",
     "deleted": "Der Link wurde gelöscht!",
@@ -133,6 +135,7 @@
     "has-account": "Du besitzt bereits ein Gradido Konto?",
     "header": "Gradidos versenden per Link",
     "isFree": "Gradido ist weltweit kostenfrei.",
+    "link-and-text-copied": "Der Link und deine Nachricht wurden in die Zwischenablage kopiert. Du kannst ihn jetzt in eine E-Mail oder Nachricht einfügen.",
     "link-copied": "Link wurde in die Zwischenablage kopiert. Du kannst ihn jetzt in eine E-Mail oder Nachricht einfügen.",
     "link-deleted": "Der Link wurde am {date} gelöscht.",
     "link-expired": "Der Link ist nicht mehr gültig. Die Gültigkeit ist am {date} abgelaufen.",
@@ -149,7 +152,8 @@
     "redeemed-title": "eingelöst",
     "to-login": "Log dich ein",
     "to-register": "Registriere ein neues Konto.",
-    "validUntil": "Gültig bis"
+    "validUntil": "Gültig bis",
+    "validUntilDate": "Der Link ist bis zum {date} gültig."
   },
   "gdt": {
     "calculation": "Berechnung der Gradido Transform",

frontend/src/locales/en.json

@@ -125,7 +125,9 @@
   "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-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",
     "delete-the-link": "Delete the link?",
     "deleted": "The link was deleted!",
@@ -133,6 +135,7 @@
     "has-account": "You already have a Gradido account?",
     "header": "Send Gradidos via link",
     "isFree": "Gradido is free of charge worldwide.",
+    "link-and-text-copied": "The link and your message have been copied to the clipboard. You can now include it in an email or message.",
     "link-copied": "Link has been copied to the clipboard. You can now paste it into an email or message.",
     "link-deleted": "The link was deleted on {date}.",
     "link-expired": "The link is no longer valid. The validity expired on {date}.",
@@ -149,7 +152,8 @@
     "redeemed-title": "redeemed",
     "to-login": "Log in",
     "to-register": "Register a new account.",
-    "validUntil": "Valid until"
+    "validUntil": "Valid until",
+    "validUntilDate": "The link is valid until {date}."
   },
   "gdt": {
     "calculation": "Calculation of Gradido Transform",