add show textbox for deleted link and redeemed link

frontend/src/graphql/queries.js

@@ -137,6 +137,8 @@ export const queryTransactionLink = gql`
       memo
       createdAt
       validUntil
+      redeemedAt
+      deletedAt
       user {
         firstName
         publisherId

frontend/src/locales/de.json

@@ -105,6 +105,9 @@
     "links_count": "Aktive Links",
     "links_sum": "Summe deiner versendeten Gradidos",
     "link-overview":"Linkübersicht",
+    "link-invalid":"Der Link ist nicht mehr gültig.",
+    "link-deleted":"Der Link wurde gelöscht.",
+    "redeemed":"Erfolgreich eingelöst! Deinem Konto wurden {n} GDD gutgeschrieben.",
     "not-copied": "Konnte den Link nicht kopieren: {err}",
     "sentence_1": "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.",
     "redeem":"Einlösen",

frontend/src/locales/en.json

@@ -105,6 +105,9 @@
     "links_count": "Active links",
     "links_sum": "Total of your sent Gradidos",
     "link-overview":"Link overview",
+    "link-invalid":"The link is no longer valid.",
+    "link-deleted":"The link has been deleted.",
+    "redeemed":"Successfully redeemed! Your account has been credited with {n} GDD.",
     "not-copied": "Could not copy link: {err}",
     "sentence_1": "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.",
     "redeem": "Redeem",

frontend/src/pages/ShowTransactionLinkInformations.vue

@@ -1,8 +1,45 @@
 <template>
   <div class="show-transaction-link-informations">
     <div class="text-center"><b-img :src="img" fluid alt="logo"></b-img></div>
-    <b-container class="pt-5">
+    <b-container v-if="displaySetup.redeemedAt" class="pt-5">
+      <b-jumbotron bg-variant="info" text-variant="dark" border-variant="dark">
+        <div class="text-center">
+          <h1>
+            {{ $t('gdd_per_link.link-invalid') }}
+          </h1>
+        </div>
+      </b-jumbotron>
+      <div class="text-center">
+        <b-button to="/overview">{{ $t('back') }}</b-button>
+      </div>
+    </b-container>
+    <b-container v-else-if="displaySetup.deletedAt" class="pt-5">
+      <b-jumbotron bg-variant="info" text-variant="dark" border-variant="dark">
+        <div class="text-center">
+          <h1>
+            {{ $t('gdd_per_link.link-deleted') }}
+          </h1>
+        </div>
+      </b-jumbotron>
+      <div class="text-center">
+        <b-button to="/overview">{{ $t('back') }}</b-button>
+      </div>
+    </b-container>
+    <b-container v-else-if="redeemed" class="pt-5">
+      <b-jumbotron bg-variant="info" text-variant="dark" border-variant="dark">
+        <div class="text-center">
+          <h1>
+            {{ $t('gdd_per_link.redeemed', { n: displaySetup.amount }) }}
+          </h1>
+        </div>
+      </b-jumbotron>
+      <div class="text-center">
+        <b-button to="/overview">{{ $t('back') }}</b-button>
+      </div>
+    </b-container>
+    <b-container v-else class="pt-5">
       <div>
+        <div></div>
         <b-jumbotron bg-variant="info" text-variant="dark" border-variant="dark">
           <h1>
             {{ displaySetup.user.firstName }}
@@ -11,7 +48,6 @@
           <b>{{ displaySetup.memo }}</b>
         </b-jumbotron>
       </div>
-
       <div v-if="$store.state.token">
         <b-jumbotron>
           <div class="mb-3 text-center">
@@ -64,7 +100,9 @@ export default {
         user: {
           firstName: '',
         },
+        deletedAt: null,
       },
+      redeemed: null,
     }
   },
   methods: {
@@ -80,8 +118,8 @@ export default {
           this.displaySetup = result.data.queryTransactionLink
           this.$store.commit('publisherId', result.data.queryTransactionLink.user.publisherId)
         })
-        .catch((error) => {
-          this.toastError(error)
+        .catch(() => {
+          this.displaySetup.deletedAt = true
         })
     },
     redeemLink() {
@@ -95,6 +133,7 @@ export default {
               },
             })
             .then((result) => {
+              if (result) this.redeemed = true
               alert(result.data.redeemTransactionLink)
               // this.toastSuccess(this.$t('gdd_per_link.deleted'))
               // this.$emit('reset-transaction-link-list')