Clicking a phone number should copy its value (#9069)

https://github.com/user-attachments/assets/7ce595fa-be90-4ec7-81e5-075dafee6422

I have added the functionality of copying the phone number to clipboard
according to the issue #8905 . If anything needed to change just comment
in my PR

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -1,11 +1,50 @@
 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 IconCircleCheck = getIcon('IconCircleCheck');
+  const IconExclamationCircle = getIcon('IconExclamationCircle');
+
+  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: <IconCircleCheck size={16} color="green" />,
+        duration: 2000,
+      });
+    } catch (err) {
+      enqueueSnackBar('Error copying to clipboard', {
+        variant: SnackBarVariant.Error,
+        icon: <IconExclamationCircle size={16} color="red" />,
+        duration: 2000,
+      });
+    }
+  };
+
+  return (
+    <PhonesDisplay
+      value={fieldValue}
+      isFocused={isFocused}
+      onPhoneNumberClick={handleClick}
+    />
+  );
 };

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

@@ -4,6 +4,7 @@ import { ComponentDecorator } from 'twenty-ui';
 import { PhonesFieldDisplay } from '@/object-record/record-field/meta-types/display/components/PhonesFieldDisplay';
 import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
 
 const meta: Meta = {
@@ -12,6 +13,7 @@ const meta: Meta = {
     MemoryRouterDecorator,
     getFieldDecorator('person', 'phones'),
     ComponentDecorator,
+    SnackBarDecorator,
   ],
   component: PhonesFieldDisplay,
   args: {},