From bf915a9668ff71322974a8abe10c0a9dabd76387 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 21 Mar 2022 10:09:28 +0100
Subject: [PATCH] add components RedeemInformation.vue

---
 .../LinkInformations/RedeemInformation.vue    | 21 ++++++++++++
 .../LinkInformations/RedeemLoggedOut.vue      | 14 ++++----
 .../LinkInformations/RedeemSelfCreator.vue    | 13 ++++----
 .../LinkInformations/RedeemValid.vue          | 14 ++++----
 ...mationItem.vue => TransactionLinkItem.vue} |  2 +-
 frontend/src/pages/Register.vue               |  3 +-
 frontend/src/pages/TransactionLink.vue        | 32 +++++++++----------
 7 files changed, 57 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/LinkInformations/RedeemInformation.vue
 rename frontend/src/components/{TransactionLinkInformationItem.vue => TransactionLinkItem.vue} (81%)

diff --git a/frontend/src/components/LinkInformations/RedeemInformation.vue b/frontend/src/components/LinkInformations/RedeemInformation.vue
new file mode 100644
index 000000000..71c0b27ad
--- /dev/null
+++ b/frontend/src/components/LinkInformations/RedeemInformation.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="redeem-information">
+    <b-jumbotron bg-variant="muted" text-variant="dark" border-variant="info">
+      <h1>
+        {{ user.firstName }}
+        {{ $t('transaction-link.send_you') }} {{ amount | GDD }}
+      </h1>
+      <b>{{ memo }}</b>
+    </b-jumbotron>
+  </div>
+</template>
+<script>
+export default {
+  name: 'RedeemInformation',
+  props: {
+    user: { type: Object, required: true },
+    amount: { type: String, required: true },
+    memo: { type: String, required: true, default: '' },
+  },
+}
+</script>
diff --git a/frontend/src/components/LinkInformations/RedeemLoggedOut.vue b/frontend/src/components/LinkInformations/RedeemLoggedOut.vue
index d059dfc10..15d9a985b 100644
--- a/frontend/src/components/LinkInformations/RedeemLoggedOut.vue
+++ b/frontend/src/components/LinkInformations/RedeemLoggedOut.vue
@@ -1,12 +1,7 @@
 <template>
   <div class="redeem-logged-out">
-    <b-jumbotron bg-variant="muted" text-variant="dark" border-variant="info">
-      <h1>
-        {{ user.firstName }}
-        {{ $t('transaction-link.send_you') }} {{ amount | GDD }}
-      </h1>
-      <b>{{ memo }}</b>
-    </b-jumbotron>
+    <redeem-information :user="user" :amount="amount" :memo="memo" />
+
     <b-jumbotron>
       <div class="mb-6">
         <h2>{{ $t('gdd_per_link.redeem') }}</h2>
@@ -28,8 +23,13 @@
   </div>
 </template>
 <script>
+import RedeemInformation from '@/components/LinkInformations/RedeemInformation.vue'
+
 export default {
   name: 'RedeemLoggedOut',
+  components: {
+    RedeemInformation,
+  },
   props: {
     user: { type: Object, required: true },
     amount: { type: String, required: true },
diff --git a/frontend/src/components/LinkInformations/RedeemSelfCreator.vue b/frontend/src/components/LinkInformations/RedeemSelfCreator.vue
index 9b8405ad6..ffcdc2543 100644
--- a/frontend/src/components/LinkInformations/RedeemSelfCreator.vue
+++ b/frontend/src/components/LinkInformations/RedeemSelfCreator.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="redeem-self-creator">
-    <b-jumbotron bg-variant="muted" text-variant="dark" border-variant="info">
-      <h1>
-        {{ user.firstName }}
-        {{ $t('transaction-link.send_you') }} {{ amount | GDD }}
-      </h1>
-      <b>{{ memo }}</b>
-    </b-jumbotron>
+    <redeem-information :user="user" :amount="amount" :memo="memo" />
 
     <b-jumbotron>
       <div class="mb-3 text-center">
@@ -21,8 +15,13 @@
   </div>
 </template>
 <script>
+import RedeemInformation from '@/components/LinkInformations/RedeemInformation.vue'
+
 export default {
   name: 'RedeemSelfCreator',
+  components: {
+    RedeemInformation,
+  },
   props: {
     user: { type: Object, required: true },
     amount: { type: String, required: true },
diff --git a/frontend/src/components/LinkInformations/RedeemValid.vue b/frontend/src/components/LinkInformations/RedeemValid.vue
index 10b9200c8..96af8e3b2 100644
--- a/frontend/src/components/LinkInformations/RedeemValid.vue
+++ b/frontend/src/components/LinkInformations/RedeemValid.vue
@@ -1,13 +1,6 @@
 <template>
   <div class="redeem-valid">
-    <b-jumbotron bg-variant="muted" text-variant="dark" border-variant="info">
-      <h1>
-        {{ user.firstName }}
-        {{ $t('transaction-link.send_you') }} {{ amount | GDD }}
-      </h1>
-      <b>{{ memo }}</b>
-    </b-jumbotron>
-
+    <redeem-information :user="user" :amount="amount" :memo="memo" />
     <b-jumbotron>
       <div class="mb-3 text-center">
         <b-button variant="primary" @click="$emit('redeem-link', amount)" size="lg">
@@ -18,8 +11,13 @@
   </div>
 </template>
 <script>
+import RedeemInformation from '@/components/LinkInformations/RedeemInformation.vue'
+
 export default {
   name: 'RedeemValid',
+  components: {
+    RedeemInformation,
+  },
   props: {
     user: { type: Object, required: false },
     amount: { type: String, required: false },
diff --git a/frontend/src/components/TransactionLinkInformationItem.vue b/frontend/src/components/TransactionLinkItem.vue
similarity index 81%
rename from frontend/src/components/TransactionLinkInformationItem.vue
rename to frontend/src/components/TransactionLinkItem.vue
index da17435a9..bea893724 100644
--- a/frontend/src/components/TransactionLinkInformationItem.vue
+++ b/frontend/src/components/TransactionLinkItem.vue
@@ -5,7 +5,7 @@
 </template>
 <script>
 export default {
-  name: 'TransactionLinkInformationItem',
+  name: 'TransactionLinkItem',
   props: {
     type: {
       type: String,
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 5638159b8..b2df16e0f 100755
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -130,8 +130,7 @@
                             readonly
                             id="redeem-code"
                             type="text"
-                            v-model="redeemCode"
-                            @input="commitStoreRedeemCode(redeemCode)"
+                            v-model="$store.state.redeemCode"
                           ></b-form-input>
                         </b-input-group>
                       </div>
diff --git a/frontend/src/pages/TransactionLink.vue b/frontend/src/pages/TransactionLink.vue
index 755026058..08601a977 100644
--- a/frontend/src/pages/TransactionLink.vue
+++ b/frontend/src/pages/TransactionLink.vue
@@ -2,28 +2,28 @@
   <div class="show-transaction-link-informations">
     <div class="text-center"><b-img :src="img" fluid alt="logo"></b-img></div>
     <b-container class="mt-4">
-      <transaction-link-information-item :type="itemType">
-        <template #X1>
+      <transaction-link-item :type="itemType">
+        <template #LOGGED_OUT>
           <redeem-logged-out v-bind="linkData" />
         </template>
 
-        <template #X2>
+        <template #SELF_CREATOR>
           <redeem-self-creator v-bind="linkData" />
         </template>
 
-        <template #X3>
+        <template #VALID>
           <redeem-valid v-bind="linkData" @redeem-link="redeemLink" />
         </template>
 
-        <template #X4>
+        <template #TEXT>
           <redeemed-text-box :text="redeemedBoxText" />
         </template>
-      </transaction-link-information-item>
+      </transaction-link-item>
     </b-container>
   </div>
 </template>
 <script>
-import TransactionLinkInformationItem from '@/components/TransactionLinkInformationItem'
+import TransactionLinkItem from '@/components/TransactionLinkItem'
 import RedeemLoggedOut from '@/components/LinkInformations/RedeemLoggedOut'
 import RedeemSelfCreator from '@/components/LinkInformations/RedeemSelfCreator'
 import RedeemValid from '@/components/LinkInformations/RedeemValid'
@@ -34,7 +34,7 @@ import { redeemTransactionLink } from '@/graphql/mutations'
 export default {
   name: 'TransactionLink',
   components: {
-    TransactionLinkInformationItem,
+    TransactionLinkItem,
     RedeemLoggedOut,
     RedeemSelfCreator,
     RedeemValid,
@@ -104,7 +104,7 @@ export default {
         this.redeemedBoxText = this.$t('gdd_per_link.link-deleted', {
           date: this.linkData.deletedAt,
         })
-        return `X4`
+        return `TEXT`
       } else {
         // link ist abgelaufen, nicht gelöscht
         if (new Date(this.linkData.validUntil) < new Date()) {
@@ -112,7 +112,7 @@ export default {
           this.redeemedBoxText = this.$t('gdd_per_link.link-expired', {
             date: this.linkData.validUntil,
           })
-          return `X4`
+          return `TEXT`
         }
 
         // der link wurde eingelöst, nicht gelöscht
@@ -121,16 +121,14 @@ export default {
           this.redeemedBoxText = this.$t('gdd_per_link.redeemed-at', {
             date: this.linkData.redeemedAt,
           })
-          return `X4`
+          return `TEXT`
         }
       }
 
-      if (!this.$store.state.token) {
-        return `X1`
-      } else {
+      if (this.$store.state.token) {
         // logged in, nicht berechtigt einzulösen, eigener link
         if (this.$store.state.email === this.linkData.user.email) {
-          return `X2`
+          return `SELF_CREATOR`
         }
 
         // logged in und berechtigt einzulösen
@@ -139,11 +137,11 @@ export default {
           !this.linkData.redeemedAt &&
           !this.linkData.deletedAt
         ) {
-          return `X3`
+          return `VALID`
         }
       }
 
-      return `X`
+      return `LOGGED_OUT`
     },
   },
   created() {