From 4a349e6017e31714c40c1c3eaa0f7a278abc32be Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 30 Nov 2022 15:44:36 +0100
Subject: [PATCH] gdd send and send per link pannel style

---
 frontend/src/components/ClipboardCopy.vue     | 24 +++---
 .../GddSend/TransactionConfirmationLink.vue   | 54 +++++++++++-
 .../GddSend/TransactionConfirmationSend.vue   | 82 ++++++++++++++-----
 .../GddSend/TransactionResultLink.vue         | 23 +++++-
 .../ContentHeader/CommunityMember.vue         |  4 +-
 frontend/src/locales/de.json                  |  7 +-
 frontend/src/locales/en.json                  |  6 +-
 frontend/src/mixins/copyLinks.js              | 17 ++--
 8 files changed, 164 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/ClipboardCopy.vue b/frontend/src/components/ClipboardCopy.vue
index ebab31aad..d51128cca 100644
--- a/frontend/src/components/ClipboardCopy.vue
+++ b/frontend/src/components/ClipboardCopy.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="clipboard-copy">
-    <b-input-group v-if="canCopyLink" size="lg" class="mb-3" prepend="Link">
-      <b-form-input :value="link" type="text" readonly></b-form-input>
-      <b-input-group-append>
-        <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">
+    <div v-if="canCopyLink" size="lg" class="mb-3">
+      <div class="text-center h2">
+        {{ link }}
+      </div>
+
+      <div class="text-center mt-5">
+        <b-button size="sm" text="Button" variant="gradido" @click="copyLink">
           {{ $t('gdd_per_link.copy-link') }}
         </b-button>
-        <b-button variant="primary" class="text-light" @click="$emit('show-qr-code-button')">
-          <b-img src="img/svg/qr-code.svg" width="19" class="svg"></b-img>
+        <hr />
+        <b-button size="sm" text="Button" variant="gradido" @click="copyLinkWithText">
+          {{ $t('gdd_per_link.copy-link-with-text') }}
         </b-button>
-      </b-input-group-append>
-    </b-input-group>
+        <hr />
+      </div>
+    </div>
     <div v-else>
       <div class="alert-danger p-3">{{ $t('gdd_per_link.not-copied') }}</div>
       <div class="alert-muted h3 p-3">{{ link }}</div>
diff --git a/frontend/src/components/GddSend/TransactionConfirmationLink.vue b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
index 8d6ae0d0f..840c0e612 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationLink.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
@@ -1,5 +1,57 @@
 <template>
-  <div class="transaction-confirm-link bg-white appBoxShadow gradido-border-radius p-3">
+  <div class="transaction-confirm-link">
+    <div class="bg-white appBoxShadow gradido-border-radius p-3">
+      <div class="h3 mb-4">{{ $t('gdd_per_link.header') }}</div>
+      <b-row class="mt-5">
+        <b-col offset="2">
+          <div class="mt-3 h5">{{ $t('form.memo') }}</div>
+          <div>{{ memo }}</div>
+        </b-col>
+        <b-col cols="3">
+          <div class="small">{{ $t('send_gdd') }}</div>
+          <div>{{ amount | GDD }}</div>
+        </b-col>
+      </b-row>
+
+      <b-row class="mt-5 pr-3 text-color-gdd-yellow h3">
+        <b-col cols="2" class="text-right">
+          <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
+        </b-col>
+        <b-col>{{ $t('advanced-calculation') }}</b-col>
+      </b-row>
+      <b-row class="pr-3" offset="2">
+        <b-col offset="2">{{ $t('form.current_balance') }}</b-col>
+        <b-col>{{ balance | GDD }}</b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">
+          <strong>{{ $t('form.your_amount') }}</strong>
+        </b-col>
+        <b-col class="borderbottom">
+          <strong>{{ (amount * -1) | GDD }}</strong>
+        </b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
+        <b-col>{{ (balance - amount) | GDD }}</b-col>
+      </b-row>
+      <b-row class="mt-5 p-5">
+        <b-col>
+          <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
+        </b-col>
+        <b-col class="text-right">
+          <b-button
+            class="send-button"
+            variant="gradido"
+            :disabled="disabled"
+            @click="$emit('send-transaction')"
+          >
+            {{ $t('form.generate_now') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </div>
+
     <b-row class="confirm-box-link">
       <b-col class="text-right mt-4 mb-3">
         <div class="alert-heading text-left h3">{{ $t('gdd_per_link.header') }}</div>
diff --git a/frontend/src/components/GddSend/TransactionConfirmationSend.vue b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
index cbf507c0b..c9653c0ea 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationSend.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
@@ -1,6 +1,63 @@
 <template>
-  <div class="transaction-confirm-send bg-white appBoxShadow gradido-border-radius p-3">
-    <b-row class="confirm-box-send">
+  <div class="transaction-confirm-send">
+    <div class="bg-white appBoxShadow gradido-border-radius p-3">
+      <div class="h3 mb-4">{{ $t('form.send_check') }}</div>
+      <b-row class="mt-5">
+        <b-col cols="2">
+          <b-avatar :text="avatarText" variant="success" size="4em"></b-avatar>
+        </b-col>
+        <b-col>
+          <div class="h4">
+            {{ email }}
+          </div>
+          <div class="mt-3 h5">{{ $t('form.memo') }}</div>
+          <div>{{ memo }}</div>
+        </b-col>
+        <b-col cols="3">
+          <div class="small">{{ $t('send_gdd') }}</div>
+          <div>{{ amount | GDD }}</div>
+        </b-col>
+      </b-row>
+
+      <b-row class="mt-5 pr-3 text-color-gdd-yellow h3">
+        <b-col cols="2" class="text-right">
+          <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
+        </b-col>
+        <b-col>{{ $t('advanced-calculation') }}</b-col>
+      </b-row>
+      <b-row class="pr-3" offset="2">
+        <b-col offset="2">{{ $t('form.current_balance') }}</b-col>
+        <b-col>{{ balance | GDD }}</b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">
+          <strong>{{ $t('form.your_amount') }}</strong>
+        </b-col>
+        <b-col class="borderbottom">
+          <strong>{{ (amount * -1) | GDD }}</strong>
+        </b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
+        <b-col>{{ (balance - amount) | GDD }}</b-col>
+      </b-row>
+      <b-row class="mt-5 p-5">
+        <b-col>
+          <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
+        </b-col>
+        <b-col class="text-right">
+          <b-button
+            variant="gradido"
+            :disabled="disabled"
+            @click="$emit('send-transaction'), (disabled = true)"
+          >
+            {{ $t('form.send_now') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </div>
+
+    <!-- <b-row class="confirm-box-send">
       <b-col>
         <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
         <b-list-group class="">
@@ -31,9 +88,9 @@
           </b-input-group>
         </b-list-group>
       </b-col>
-    </b-row>
+    </b-row> -->
 
-    <b-container class="bv-example-row mt-5 mb-5">
+    <!-- <b-container class="bv-example-row mt-5 mb-5">
       <div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
@@ -51,22 +108,7 @@
         <b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
         <b-col class="text-right">{{ (balance - amount) | GDD }}</b-col>
       </b-row>
-    </b-container>
-
-    <b-row class="mt-4">
-      <b-col>
-        <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
-      </b-col>
-      <b-col class="text-right">
-        <b-button
-          variant="primary"
-          :disabled="disabled"
-          @click="$emit('send-transaction'), (disabled = true)"
-        >
-          {{ $t('form.send_now') }}
-        </b-button>
-      </b-col>
-    </b-row>
+    </b-container> -->
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/GddSend/TransactionResultLink.vue b/frontend/src/components/GddSend/TransactionResultLink.vue
index fac35da3f..31b3cfb83 100644
--- a/frontend/src/components/GddSend/TransactionResultLink.vue
+++ b/frontend/src/components/GddSend/TransactionResultLink.vue
@@ -1,6 +1,23 @@
 <template>
   <div class="bg-white appBoxShadow gradido-border-radius p-4">
-    <b-row>
+    <div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
+
+    <clipboard-copy
+      :link="link"
+      :amount="amount"
+      :memo="memo"
+      :validUntil="validUntil"
+    ></clipboard-copy>
+    <div class="text-center">
+      <div><figure-qr-code :link="link" /></div>
+      <div>
+        <b-button variant="secondary" @click="$emit('on-reset')" class="mt-4">
+          {{ $t('form.close') }}
+        </b-button>
+      </div>
+    </div>
+
+    <!-- <b-row>
       <b-col>
         <div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
         <clipboard-copy
@@ -19,7 +36,7 @@
           </b-button>
         </div>
       </b-col>
-    </b-row>
+    </b-row> -->
   </div>
 </template>
 <script>
@@ -40,7 +57,7 @@ export default {
   },
   data() {
     return {
-      showQrcode: false,
+      // showQrcode: false,
     }
   },
   methods: {
diff --git a/frontend/src/components/Template/ContentHeader/CommunityMember.vue b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
index 78b595228..ce2551e58 100644
--- a/frontend/src/components/Template/ContentHeader/CommunityMember.vue
+++ b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="text-center">
       <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">
-        {{ $t('community.community') }}
+        {{ $t('member') }}
       </b-badge>
     </div>
     <div
@@ -11,7 +11,7 @@
       <b-row>
         <b-col cols="8">
           <div class="h4">{{ $t('community.communityMember') }}</div>
-          <div class="small">{{ CONFIG.COMMUNITY_NAME }}</div>
+          <div>{{ CONFIG.COMMUNITY_NAME }}</div>
         </b-col>
         <b-col cols="4" class="border-left border-light p-3">
           <b-icon icon="people"></b-icon>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 991710c1d..7f650b332 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -1,10 +1,8 @@
 {
   "100": "100%",
   "1000thanks": "1000 Dank, weil du bei uns bist!",
-  "1234": "1234",
   "125": "125%",
   "85": "85%",
-  "active": "aktiv",
   "advanced-calculation": "Vorausberechnung",
   "member": "Mitglied",
   "auth": {
@@ -21,7 +19,6 @@
   "back": "Zurück",
   "community": {
     "choose-another-community": "Eine andere Gemeinschaft auswählen",
-    "city": "Stadt",
     "community": "Gemeinschaft",
     "communityMember": "Du bist aktives Mitglied",
     "continue-to-registration": "Weiter zur Registrierung",
@@ -200,7 +197,7 @@
   },
   "GDT": "GDT",
   "gdt": {
-    "gdt":"Gradido Transform",
+    "gdt": "Gradido Transform",
     "calculation": "Berechnung der Gradido Transform",
     "contribution": "Beitrag",
     "conversion": "Umrechnung",
@@ -217,7 +214,7 @@
     "raise": "Erhöhung",
     "recruited-member": "Eingeladenes Mitglied"
   },
-  "inactive": "inaktiv",
+
   "language": "Sprache",
   "link-load": "den letzten Link nachladen | die letzten {n} Links nachladen |  weitere {n} Links nachladen",
   "login": "Anmelden",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 698794255..2f85f1288 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -1,10 +1,8 @@
 {
   "100": "100%",
   "1000thanks": "1000 thanks for being with us!",
-  "1234": "1234",
   "125": "125%",
   "85": "85%",
-  "active": "active",
   "advanced-calculation": "Advanced calculation",
   "member": "Member",
   "auth": {
@@ -21,7 +19,6 @@
   "back": "Back",
   "community": {
     "choose-another-community": "Choose another community",
-    "city": "City",
     "community": "Community",
     "communityMember": "You are an active member",
     "continue-to-registration": "Continue to registration",
@@ -200,7 +197,7 @@
   },
   "GDT": "GDT",
   "gdt": {
-    "gdt":"Gradido Transform",
+    "gdt": "Gradido Transform",
     "calculation": "Calculation of Gradido Transform",
     "contribution": "Contribution",
     "conversion": "Conversion",
@@ -217,7 +214,6 @@
     "raise": "Increase",
     "recruited-member": "Invited member"
   },
-  "inactive": "inactive",
   "language": "Language",
   "link-load": "Load the last link | Load the last {n} links |  Load more {n} links",
   "login": "Sign in",
diff --git a/frontend/src/mixins/copyLinks.js b/frontend/src/mixins/copyLinks.js
index ac6be95c5..08b5a2e05 100644
--- a/frontend/src/mixins/copyLinks.js
+++ b/frontend/src/mixins/copyLinks.js
@@ -26,12 +26,17 @@ export const copyLinks = {
       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'),
-          })}
-${this.$t('gdd_per_link.link-hint')}`,
+            ${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'),
+            },
+          )}
+          ${this.$t('gdd_per_link.link-hint')}`,
         )
         .then(() => {
           this.toastSuccess(this.$t('gdd_per_link.link-and-text-copied'))