From 80eaf1c8ea326a9204c8d2e0de90286f9fc2cb5b Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 26 Jul 2022 18:34:40 +0200 Subject: [PATCH 1/5] add fucntionality to copy link and text after creating a transaction link --- frontend/src/components/ClipboardCopy.vue | 20 +++++++++++++++++++ .../GddSend/TransactionResultLink.vue | 14 ++++++++----- frontend/src/pages/Send.vue | 9 ++++++++- 3 files changed, 37 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue index 7a6cf0ec1..78af3c772 100644 --- a/frontend/src/components/ClipboardCopy.vue +++ b/frontend/src/components/ClipboardCopy.vue @@ -3,6 +3,9 @@ + + {{ $t('gdd_per_link.copy-with-text') }} + {{ $t('gdd_per_link.copy') }} @@ -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')) + }) + }, }, } diff --git a/frontend/src/components/GddSend/TransactionResultLink.vue b/frontend/src/components/GddSend/TransactionResultLink.vue index 04445acfe..81d18644d 100644 --- a/frontend/src/components/GddSend/TransactionResultLink.vue +++ b/frontend/src/components/GddSend/TransactionResultLink.vue @@ -3,7 +3,12 @@
{{ $t('gdd_per_link.created') }}
- +
@@ -27,10 +32,9 @@ export default { FigureQrCode, }, props: { - link: { - type: String, - required: true, - }, + link: { type: String, required: true }, + amount: { type: Number, required: true }, + memo: { type: String, required: true }, }, data() { return { diff --git a/frontend/src/pages/Send.vue b/frontend/src/pages/Send.vue index cd5f8f572..85ac53a52 100644 --- a/frontend/src/pages/Send.vue +++ b/frontend/src/pages/Send.vue @@ -41,7 +41,12 @@ >
@@ -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({}) From 21c9bc22a710febd6d5d61aa5f43a11933981da5 Mon Sep 17 00:00:00 2001 From: mahula Date: Wed, 27 Jul 2022 10:13:00 +0200 Subject: [PATCH 2/5] adapt existing unit tests for copying a created transaction link --- frontend/src/pages/Send.spec.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/Send.spec.js b/frontend/src/pages/Send.spec.js index 47a30ff65..79ba65133 100644 --- a/frontend/src/pages/Send.spec.js +++ b/frontend/src/pages/Send.spec.js @@ -20,6 +20,9 @@ describe('Send', () => { balance: 123.45, GdtBalance: 1234.56, pending: true, + amount: '15', + link: 'http://localhost/redeem/0123456789', + memo: 'Quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet.', } const mocks = { @@ -28,6 +31,7 @@ describe('Send', () => { $store: { state: { email: 'sender@example.org', + firstName: 'Testy', }, }, $apollo: { @@ -228,21 +232,26 @@ 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(0).trigger('click') + await wrapper.findAll('button').at(1).trigger('click') }) it('toasts error message', () => { @@ -253,7 +262,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', () => { From d1cc3115ba642ae9a20ec6c2af92995f4f050438 Mon Sep 17 00:00:00 2001 From: mahula Date: Wed, 27 Jul 2022 11:07:58 +0200 Subject: [PATCH 3/5] add unit tests for copying a created transaction link with username, amount and memo text --- frontend/src/pages/Send.spec.js | 43 ++++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Send.spec.js b/frontend/src/pages/Send.spec.js index 79ba65133..be63027b1 100644 --- a/frontend/src/pages/Send.spec.js +++ b/frontend/src/pages/Send.spec.js @@ -20,9 +20,6 @@ describe('Send', () => { balance: 123.45, GdtBalance: 1234.56, pending: true, - amount: '15', - link: 'http://localhost/redeem/0123456789', - memo: 'Quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet.', } const mocks = { @@ -260,6 +257,46 @@ describe('Send', () => { }) }) + 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') + }) + + it('toasts error message', () => { + expect(toastErrorSpy).toBeCalledWith('gdd_per_link.not-copied') + }) + }) + }) + describe('close button click', () => { beforeEach(async () => { await wrapper.findAll('button').at(3).trigger('click') From 3c539a6edf0a2136470c12c530965462aaaee339 Mon Sep 17 00:00:00 2001 From: mahula Date: Wed, 27 Jul 2022 11:21:47 +0200 Subject: [PATCH 4/5] make the wording more precise wherever a link can be copied --- frontend/src/components/ClipboardCopy.vue | 4 ++-- frontend/src/components/TransactionLinks/TransactionLink.vue | 4 ++-- frontend/src/locales/de.json | 3 ++- frontend/src/locales/en.json | 4 +++- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue index 78af3c772..efddf8ab3 100644 --- a/frontend/src/components/ClipboardCopy.vue +++ b/frontend/src/components/ClipboardCopy.vue @@ -4,10 +4,10 @@ - {{ $t('gdd_per_link.copy-with-text') }} + {{ $t('gdd_per_link.copy-link-with-text') }} - {{ $t('gdd_per_link.copy') }} + {{ $t('gdd_per_link.copy-link') }} diff --git a/frontend/src/components/TransactionLinks/TransactionLink.vue b/frontend/src/components/TransactionLinks/TransactionLink.vue index 5618c8696..fe5e44658 100644 --- a/frontend/src/components/TransactionLinks/TransactionLink.vue +++ b/frontend/src/components/TransactionLinks/TransactionLink.vue @@ -20,7 +20,7 @@ - {{ $t('gdd_per_link.copy') }} + {{ $t('gdd_per_link.copy-link') }} - {{ $t('gdd_per_link.copy-with-text') }} + {{ $t('gdd_per_link.copy-link-with-text') }} Date: Wed, 27 Jul 2022 12:17:04 +0200 Subject: [PATCH 5/5] fix linting and locales --- frontend/src/locales/de.json | 1 - frontend/src/locales/en.json | 2 -- 2 files changed, 3 deletions(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index aebbffab2..91e602990 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -150,7 +150,6 @@ "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-link-with-text": "Link und Text kopieren", "created": "Der Link wurde erstellt!", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 4ace4e10b..fcd604fea 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -12,7 +12,6 @@ "hasAccount": "You already have an account?", "hereLogin": "Log in here", "learnMore": "Learn more …", - "oneDignity": "We gift to each other and give thanks with Gradido.", "oneDonation": "You are a gift for the community. 1000 thanks because you are with us.", "oneGratitude": "For each other, for all people, for nature." @@ -151,7 +150,6 @@ "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-link-with-text": "Copy link and text", "created": "Link was created!",