From d91310c7de8d831b9a0b41228caf7ffbf4f368fc Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Wed, 9 Mar 2022 17:16:26 +0100
Subject: [PATCH] WIP Implement the frontend to show the
 transactionLinkInformation.

---
 .../ShowTransactionLinkInformations.spec.js   |  1 +
 .../pages/ShowTransactionLinkInformations.vue | 56 +++++++++++++++++++
 frontend/src/routes/routes.js                 |  4 ++
 3 files changed, 61 insertions(+)
 create mode 100644 frontend/src/pages/ShowTransactionLinkInformations.spec.js
 create mode 100644 frontend/src/pages/ShowTransactionLinkInformations.vue

diff --git a/frontend/src/pages/ShowTransactionLinkInformations.spec.js b/frontend/src/pages/ShowTransactionLinkInformations.spec.js
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/pages/ShowTransactionLinkInformations.spec.js
@@ -0,0 +1 @@
+
diff --git a/frontend/src/pages/ShowTransactionLinkInformations.vue b/frontend/src/pages/ShowTransactionLinkInformations.vue
new file mode 100644
index 000000000..c56db14d6
--- /dev/null
+++ b/frontend/src/pages/ShowTransactionLinkInformations.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <!-- Header -->
+    <div class="header py-7 py-lg-8 pt-lg-9">
+      <b-container>
+        <div class="header-body text-center mb-7">
+          <p class="h1">
+            {{ displaySetup.user.firstName }} {{ displaySetup.user.lastName }}
+            {{ $t('wants to send you') }} {{ displaySetup.amount | GDD }}
+          </p>
+          <p class="h4">{{ $t(displaySetup.subtitle) }}</p>
+          <hr />
+          <b-button v-if="displaySetup.linkTo" :to="displaySetup.linkTo">
+            {{ $t(displaySetup.button) }}
+          </b-button>
+        </div>
+      </b-container>
+    </div>
+  </div>
+</template>
+<script>
+import { queryTransactionLink } from '@/graphql/queries'
+
+export default {
+  name: 'ShowTransactionLinkInformations',
+  data() {
+    return {
+      displaySetup: {},
+    }
+  },
+  methods: {
+    setTransactionLinkInformation() {
+      this.$apollo
+        .query({
+          query: queryTransactionLink,
+          variables: {
+            code: this.$route.params.code,
+          },
+        })
+        .then((result) => {
+          const {
+            data: { queryTransactionLink },
+          } = result
+          this.displaySetup = queryTransactionLink
+          this.$store.commit('publisherId', queryTransactionLink.user.publisherId)
+        })
+        .catch((error) => {
+          this.toastError(error)
+        })
+    },
+  },
+  created() {
+    this.setDisplaySetup()
+  },
+}
+</script>
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 3fc8dc766..ea7539190 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -82,6 +82,10 @@ const routes = [
     path: '/checkEmail/:optin',
     component: () => import('@/pages/ResetPassword.vue'),
   },
+  {
+    path: '/redeem/:code',
+    component: () => import('@/pages/ShowTransactionLinkInformations.vue'),
+  },
   { path: '*', component: NotFound },
 ]