From ba91f8d6fe76fbe0181434572bd656f36224d8a9 Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Fri, 18 Oct 2024 14:58:58 +0200
Subject: [PATCH] feat(frontend): links and emails in messages (#3377)

* feat(frontend): Transform links and mails in transaction messages into clickable links and mailto links.

* feat(frontend): Lint fix
---
 .../DecayInformation-BeforeStartblock.vue     | 33 +++++++++++++------
 .../DecayInformation-Long.vue                 | 25 +++++++++++++-
 .../components/TransactionRows/MemoRow.vue    | 24 +++++++++++++-
 3 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue b/frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue
index a3c4611d2..61d64500e 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-BeforeStartblock.vue
@@ -2,21 +2,34 @@
   <div class="decayinformation-startblock">
     <div class="my-4">
       <div class="fw-bold pb-2">{{ $t('form.memo') }}</div>
-      <div>{{ memo }}</div>
+      <div v-html="displayData" />
     </div>
     <div class="mt-3 mb-3 text-center">
       <b>{{ $t('decay.before_startblock_transaction') }}</b>
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'DecayInformationStartBlock',
-  props: {
-    memo: {
-      type: String,
-      required: true,
-    },
-  },
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  memo: String,
+})
+
+const formatLinks = (text) => {
+  // URL regex pattern
+  const urlPattern = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim
+  // Email regex pattern
+  const emailPattern = /(\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b)/g
+
+  // Replace URLs with clickable links
+  text = text.replace(urlPattern, '<a href="$1" target="_blank">$1</a>')
+
+  // Replace email addresses with mailto links
+  text = text.replace(emailPattern, '<a href="mailto:$1">$1</a>')
+
+  return text
 }
+
+const displayData = computed(() => formatLinks(props.memo))
 </script>
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Long.vue b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
index 46f9051a5..96cdfb5c5 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Long.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
@@ -2,7 +2,7 @@
   <div class="decayinformation-long px-1">
     <div class="word-break mb-5 mt-lg-3">
       <div class="fw-bold pb-2">{{ $t('form.memo') }}</div>
-      <div class="">{{ memo }}</div>
+      <div @click.stop v-html="displayData" />
     </div>
     <div class="mb-3">
       <IBiDropletHalf class="me-2" />
@@ -73,6 +73,7 @@
 </template>
 <script>
 import DurationRow from '@/components/TransactionRows/DurationRow'
+import { computed } from 'vue'
 
 export default {
   name: 'DecayInformationLong',
@@ -89,5 +90,27 @@ export default {
       type: Object,
     },
   },
+  computed: {
+    displayData() {
+      return this.formatLinks(this.memo)
+    },
+  },
+  methods: {
+    formatLinks(text) {
+      const urlPattern = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim
+      const emailPattern = /(\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b)/g
+
+      // Replace URLs with clickable links
+      text = text.replace(
+        urlPattern,
+        '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
+      )
+
+      // Replace email addresses with mailto links
+      text = text.replace(emailPattern, '<a href="mailto:$1">$1</a>')
+
+      return text
+    },
+  },
 }
 </script>
diff --git a/frontend/src/components/TransactionRows/MemoRow.vue b/frontend/src/components/TransactionRows/MemoRow.vue
index f59cb506a..8303408e4 100644
--- a/frontend/src/components/TransactionRows/MemoRow.vue
+++ b/frontend/src/components/TransactionRows/MemoRow.vue
@@ -5,7 +5,7 @@
         <div class="text-end">{{ $t('form.memo') }}</div>
       </BCol>
       <BCol cols="7">
-        <div class="gdd-transaction-list-message">{{ memo }}</div>
+        <div class="gdd-transaction-list-message" v-html="displayData" />
       </BCol>
     </BRow>
   </div>
@@ -19,5 +19,27 @@ export default {
       required: true,
     },
   },
+  computed: {
+    displayData() {
+      return this.formatLinks(this.memo)
+    },
+  },
+  methods: {
+    formatLinks(text) {
+      const urlPattern = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim
+      const emailPattern = /(\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b)/g
+
+      // Replace URLs with clickable links
+      text = text.replace(
+        urlPattern,
+        '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
+      )
+
+      // Replace email addresses with mailto links
+      text = text.replace(emailPattern, '<a href="mailto:$1">$1</a>')
+
+      return text
+    },
+  },
 }
 </script>