diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue index 7a6cf0ec1..efddf8ab3 100644 --- a/frontend/src/components/ClipboardCopy.vue +++ b/frontend/src/components/ClipboardCopy.vue @@ -3,8 +3,11 @@ + + {{ $t('gdd_per_link.copy-link-with-text') }} + - {{ $t('gdd_per_link.copy') }} + {{ $t('gdd_per_link.copy-link') }} @@ -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/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') }} { $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', () => { 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({})