From c30e720574c40334d737bbafa843b846abcf661f Mon Sep 17 00:00:00 2001
From: Lucifer4255 <deysuhotra@gmail.com>
Date: Fri, 13 Dec 2024 18:39:58 +0000
Subject: [PATCH] Clicking a phone number should copy its value

---
 .../display/components/PhonesDisplay.tsx      | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
index de23dbc0878a..54a271c5d86d 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
@@ -5,10 +5,16 @@ import { RoundedLink, THEME_COMMON } from 'twenty-ui';
 import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
 
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { IconClipboard } from '@tabler/icons-react';
 import { parsePhoneNumber } from 'libphonenumber-js';
 import { isDefined } from '~/utils/isDefined';
 import { logError } from '~/utils/logError';
 
+
+
+
 type PhonesDisplayProps = {
   value?: FieldPhonesValue;
   isFocused?: boolean;
@@ -30,6 +36,23 @@ const StyledContainer = styled.div`
 `;
 
 export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
+  const { enqueueSnackBar } = useSnackBar();
+  const handlePhoneClick = async (event: React.MouseEvent, phoneNumber: string | undefined) => {
+    event.preventDefault(); // Prevent default link behavior
+    
+    try {
+      if(phoneNumber != undefined){
+        await navigator.clipboard.writeText(phoneNumber);
+        enqueueSnackBar('Phone number copied to clipboard', {
+          variant: SnackBarVariant.Success,
+          icon: <IconClipboard size={16} />,
+          duration: 2000
+        });
+      }
+    } catch (error) {
+      console.error('Failed to copy phone number:', error);
+    }
+  };
   const phones = useMemo(
     () =>
       [
@@ -76,6 +99,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
             label={
               parsedPhone ? parsedPhone.formatInternational() : invalidPhone
             }
+            onClick={(event) => handlePhoneClick(event,URI)}
           />
         );
       })}