mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Merge pull request #2101 from gradido/2077-copy-text-after-transaction-link-creation
Add validation date info to copied text after transaction link creation
This commit is contained in:
Hannes Heine
GitHub
commit
187f86fc4f
@ -6,7 +6,7 @@
|
||||
<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">
|
||||
<b-button size="sm" text="Button" variant="primary" @click="copyLink">
|
||||
{{ $t('gdd_per_link.copy-link') }}
|
||||
</b-button>
|
||||
<b-button variant="primary" class="text-light" @click="$emit('show-qr-code-button')">
|
||||
@ -21,46 +21,10 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { copyLinks } from '../mixins/copyLinks'
|
||||
export default {
|
||||
name: 'ClipboardCopy',
|
||||
props: {
|
||||
link: { type: String, required: true },
|
||||
amount: { type: Number, required: true },
|
||||
memo: { type: String, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canCopyLink: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
CopyLink() {
|
||||
navigator.clipboard
|
||||
.writeText(this.link)
|
||||
.then(() => {
|
||||
this.toastSuccess(this.$t('gdd_per_link.link-copied'))
|
||||
})
|
||||
.catch(() => {
|
||||
this.canCopyLink = false
|
||||
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'))
|
||||
})
|
||||
},
|
||||
},
|
||||
mixins: [copyLinks],
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
:link="link"
|
||||
:amount="amount"
|
||||
:memo="memo"
|
||||
:validUntil="validUntil"
|
||||
@show-qr-code-button="showQrCodeButton"
|
||||
></clipboard-copy>
|
||||
|
||||
@ -33,8 +34,9 @@ export default {
|
||||
},
|
||||
props: {
|
||||
link: { type: String, required: true },
|
||||
amount: { type: Number, required: true },
|
||||
amount: { type: String, required: true },
|
||||
memo: { type: String, required: true },
|
||||
validUntil: { type: String, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -18,14 +18,14 @@
|
||||
<b-icon icon="three-dots-vertical"></b-icon>
|
||||
</template>
|
||||
|
||||
<b-dropdown-item v-if="validLink" class="test-copy-link" @click="copy">
|
||||
<b-dropdown-item v-if="validLink" class="test-copy-link" @click="copyLink">
|
||||
<b-icon icon="clipboard"></b-icon>
|
||||
{{ $t('gdd_per_link.copy-link') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
v-if="validLink"
|
||||
class="test-copy-text pt-3"
|
||||
@click="copyLinkWithText()"
|
||||
@click="copyLinkWithText"
|
||||
>
|
||||
<b-icon icon="clipboard-plus"></b-icon>
|
||||
{{ $t('gdd_per_link.copy-link-with-text') }}
|
||||
@ -76,9 +76,11 @@ import MemoRow from '../TransactionRows/MemoRow'
|
||||
import DateRow from '../TransactionRows/DateRow'
|
||||
import DecayRow from '../TransactionRows/DecayRow'
|
||||
import FigureQrCode from '@/components/QrCode/FigureQrCode.vue'
|
||||
import { copyLinks } from '../../mixins/copyLinks'
|
||||
|
||||
export default {
|
||||
name: 'TransactionLink',
|
||||
mixins: [copyLinks],
|
||||
components: {
|
||||
TypeIcon,
|
||||
AmountAndNameRow,
|
||||
@ -88,43 +90,10 @@ export default {
|
||||
FigureQrCode,
|
||||
},
|
||||
props: {
|
||||
amount: { type: String, required: true },
|
||||
link: { type: String, required: true },
|
||||
holdAvailableAmount: { type: String, required: true },
|
||||
id: { type: Number, required: true },
|
||||
memo: { type: String, required: true },
|
||||
validUntil: { type: String, required: true },
|
||||
},
|
||||
methods: {
|
||||
copy() {
|
||||
navigator.clipboard
|
||||
.writeText(this.link)
|
||||
.then(() => {
|
||||
this.toastSuccess(this.$t('gdd_per_link.link-copied'))
|
||||
})
|
||||
.catch(() => {
|
||||
this.$bvModal.show('modalPopoverCopyError' + this.id)
|
||||
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)
|
||||
|
||||
@ -74,6 +74,9 @@ export const createTransactionLink = gql`
|
||||
mutation($amount: Decimal!, $memo: String!) {
|
||||
createTransactionLink(amount: $amount, memo: $memo) {
|
||||
link
|
||||
amount
|
||||
memo
|
||||
validUntil
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
44
frontend/src/mixins/copyLinks.js
Normal file
44
frontend/src/mixins/copyLinks.js
Normal file
@ -0,0 +1,44 @@
|
||||
export const copyLinks = {
|
||||
props: {
|
||||
link: { type: String, required: true },
|
||||
amount: { type: String, required: true },
|
||||
memo: { type: String, required: true },
|
||||
validUntil: { type: String, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canCopyLink: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyLink() {
|
||||
navigator.clipboard
|
||||
.writeText(this.link)
|
||||
.then(() => {
|
||||
this.toastSuccess(this.$t('gdd_per_link.link-copied'))
|
||||
})
|
||||
.catch(() => {
|
||||
this.canCopyLink = false
|
||||
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.canCopyLink = false
|
||||
this.toastError(this.$t('gdd_per_link.not-copied'))
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -25,6 +25,7 @@ describe('Send', () => {
|
||||
const mocks = {
|
||||
$t: jest.fn((t) => t),
|
||||
$n: jest.fn((n) => String(n)),
|
||||
$d: jest.fn((d) => d),
|
||||
$store: {
|
||||
state: {
|
||||
email: 'sender@example.org',
|
||||
@ -161,11 +162,15 @@ describe('Send', () => {
|
||||
})
|
||||
|
||||
describe('transaction form link', () => {
|
||||
const now = new Date().toISOString()
|
||||
beforeEach(async () => {
|
||||
apolloMutationMock.mockResolvedValue({
|
||||
data: {
|
||||
createTransactionLink: {
|
||||
link: 'http://localhost/redeem/0123456789',
|
||||
amount: '56.78',
|
||||
memo: 'Make the best of the link!',
|
||||
validUntil: now,
|
||||
},
|
||||
},
|
||||
})
|
||||
@ -277,7 +282,8 @@ describe('Send', () => {
|
||||
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!"',
|
||||
'"Make the best of the link!"\n' +
|
||||
'gdd_per_link.credit-your-gradido gdd_per_link.validUntilDate',
|
||||
)
|
||||
})
|
||||
it('toasts success message', () => {
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
:link="link"
|
||||
:amount="amount"
|
||||
:memo="memo"
|
||||
:validUntil="validUntil"
|
||||
@on-reset="onReset"
|
||||
></transaction-result-link>
|
||||
</template>
|
||||
@ -149,9 +150,15 @@ 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
|
||||
const {
|
||||
data: {
|
||||
createTransactionLink: { link, amount, memo, validUntil },
|
||||
},
|
||||
} = result
|
||||
this.link = link
|
||||
this.amount = amount
|
||||
this.memo = memo
|
||||
this.validUntil = validUntil
|
||||
this.transactionData = { ...EMPTY_TRANSACTION_DATA }
|
||||
this.currentTransactionStep = TRANSACTION_STEPS.transactionResultLink
|
||||
this.updateTransactions({})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user