updated the phonedisplay adding a prop

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx

@@ -1,11 +1,41 @@
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { usePhonesFieldDisplay } from '@/object-record/record-field/meta-types/hooks/usePhonesFieldDisplay';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { PhonesDisplay } from '@/ui/field/display/components/PhonesDisplay';
+import React from 'react';
+import { useIcons } from 'twenty-ui';
 
 export const PhonesFieldDisplay = () => {
   const { fieldValue } = usePhonesFieldDisplay();
 
   const { isFocused } = useFieldFocus();
 
-  return <PhonesDisplay value={fieldValue} isFocused={isFocused} />;
+  const {enqueueSnackBar} = useSnackBar();
+
+  const {getIcon} = useIcons();
+
+  const IconClipboard = getIcon('IconClipboard');
+
+  const handleClick = async(phoneNumber:string,event: React.MouseEvent<HTMLElement>) =>{
+      event.preventDefault();
+      try{
+        await navigator.clipboard.writeText(phoneNumber);
+        enqueueSnackBar('Phone number copied to clipboard', {
+          variant: SnackBarVariant.Success,
+          icon: <IconClipboard size={16} />,
+          duration: 2000
+        });
+      }catch(err){
+        enqueueSnackBar('Error copying to clipboard', {
+          variant: SnackBarVariant.Error,
+          icon: <IconClipboard size={16} />,
+          duration: 2000
+        });
+      }
+
+
+  }
+
+  return <PhonesDisplay value={fieldValue} isFocused={isFocused} onPhoneNumberClick={handleClick}/>;
 };

packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { RoundedLink, THEME_COMMON } from 'twenty-ui';
 
 import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
@@ -12,6 +12,7 @@ import { logError } from '~/utils/logError';
 type PhonesDisplayProps = {
   value?: FieldPhonesValue;
   isFocused?: boolean;
+  onPhoneNumberClick?: (phoneNumber: string,event : React.MouseEvent<HTMLElement>) => void;
 };
 
 const themeSpacing = THEME_COMMON.spacingMultiplicator;
@@ -29,7 +30,7 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
+export const PhonesDisplay = ({ value, isFocused, onPhoneNumberClick }: PhonesDisplayProps) => {
   const phones = useMemo(
     () =>
       [
@@ -62,7 +63,11 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
       return { invalidPhone: number };
     }
   };
-
+  const handleClick = (number: string,event :React.MouseEvent<HTMLElement>) => {
+    if (onPhoneNumberClick) {
+      onPhoneNumberClick(number,event);
+    }
+  };
   return isFocused ? (
     <ExpandableList isChipCountDisplayed>
       {phones.map(({ number, callingCode }, index) => {
@@ -76,6 +81,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
             label={
               parsedPhone ? parsedPhone.formatInternational() : invalidPhone
             }
+            onClick={(event) => handleClick(callingCode + number,event)}
           />
         );
       })}
@@ -93,6 +99,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
             label={
               parsedPhone ? parsedPhone.formatInternational() : invalidPhone
             }
+            onClick={(event) => handleClick(callingCode + number,event)}
           />
         );
       })}