From 63f4c049a006883d8ef49d7f94bc6b2d141f48f1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 6 May 2024 21:09:14 +0530
Subject: [PATCH] chore: added lead/deal name on top right with copy to
 clipboard feat

---
 .../src/components/Icons/WhatsAppIcon.vue     |  2 +-
 frontend/src/pages/Deal.vue                   |  6 +++--
 frontend/src/pages/Lead.vue                   |  6 +++--
 frontend/src/utils/index.js                   | 22 +++++++++++++++++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Icons/WhatsAppIcon.vue b/frontend/src/components/Icons/WhatsAppIcon.vue
index 924a16b8..b4ee2250 100644
--- a/frontend/src/components/Icons/WhatsAppIcon.vue
+++ b/frontend/src/components/Icons/WhatsAppIcon.vue
@@ -9,7 +9,7 @@
     <path
       d="M4.19429 13.6C5.56327 14.5333 8.15223 15.1961 9.73933 14.8099C11.3264 14.4238 12.7265 13.4706 13.6872 12.1223C14.6479 10.7739 15.1061 9.11889 14.9793 7.45557C14.8524 5.79226 14.1487 4.22998 12.9952 3.05026C11.8416 1.87055 10.3139 1.15098 8.68746 1.02121C7.061 0.891454 5.4427 1.36004 4.12418 2.34253C2.80566 3.32502 1.87363 4.7568 1.49604 6.37987C1.11846 8.00294 1.45633 10.3333 2.36898 11.7333L1 15L4.19429 13.6Z"
       stroke="currentColor"
-      stroke-width="1.25"
+      stroke-width="1"
       stroke-linecap="round"
       stroke-linejoin="round"
     />
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 3e010b00..d38fae9a 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -47,9 +47,10 @@
     </Tabs>
     <div class="flex w-[352px] flex-col justify-between border-l">
       <div
-        class="flex h-10.5 items-center border-b px-5 py-2.5 text-lg font-semibold"
+        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-semibold"
+        @click="copyToClipboard(deal.data.name)"
       >
-        {{ __('About this Deal') }}
+        {{ __(deal.data.name) }}
       </div>
       <div class="flex items-center justify-start gap-5 border-b p-5">
         <Tooltip :text="__('Organization logo')">
@@ -316,6 +317,7 @@ import {
   setupAssignees,
   setupCustomActions,
   errorMessage,
+  copyToClipboard,
 } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { organizationsStore } from '@/stores/organizations'
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index fe976a3d..e94e4c2f 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -52,9 +52,10 @@
     </Tabs>
     <div class="flex w-[352px] flex-col justify-between border-l">
       <div
-        class="flex h-10.5 items-center border-b px-5 py-2.5 text-lg font-semibold"
+        class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-semibold"
+        @click="copyToClipboard(lead.data.name)"
       >
-        {{ __('About this Lead') }}
+        {{ __(lead.data.name) }}
       </div>
       <FileUploader
         @success="(file) => updateField('image', file.file_url)"
@@ -282,6 +283,7 @@ import {
   setupAssignees,
   setupCustomActions,
   errorMessage,
+  copyToClipboard,
 } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { contactsStore } from '@/stores/contacts'
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 0c7dc03b..77065a49 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -147,3 +147,25 @@ export function errorMessage(title, message) {
     iconClasses: 'text-red-600',
   })
 }
+
+export function copyToClipboard(text) {
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(string).then(show_success_alert)
+  } else {
+    let input = document.createElement('textarea')
+    document.body.appendChild(input)
+    input.value = text
+    input.select()
+    document.execCommand('copy')
+    show_success_alert()
+    document.body.removeChild(input)
+  }
+  function show_success_alert() {
+    createToast({
+      title: 'Copied to clipboard',
+      text: text,
+      icon: 'check',
+      iconClasses: 'text-green-600',
+    })
+  }
+}