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/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -74,7 +74,6 @@ const StyledHeader = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
   gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ theme }) => theme.spacing(6)};
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledActions = styled.div`
@@ -83,15 +82,6 @@ const StyledActions = styled.div`
   margin-left: auto;
 `;
 
-const StyledDescription = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  padding-left: ${({ theme }) => theme.spacing(6)};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 200px;
-`;
-
 const defaultTitleByVariant: Record<SnackBarVariant, string> = {
   [SnackBarVariant.Default]: 'Alert',
   [SnackBarVariant.Error]: 'Error',
@@ -183,7 +173,7 @@ export const SnackBar = ({
       />
       <StyledHeader>
         {icon}
-        {title}
+        {message}
         <StyledActions>
           {!!onCancel && <LightButton title="Cancel" onClick={onCancel} />}
 
@@ -192,7 +182,6 @@ export const SnackBar = ({
           )}
         </StyledActions>
       </StyledHeader>
-      {message && <StyledDescription>{message}</StyledDescription>}
     </StyledContainer>
   );
 };

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';
@@ -13,6 +13,10 @@ import { logError } from '~/utils/logError';
 type PhonesDisplayProps = {
   value?: FieldPhonesValue;
   isFocused?: boolean;
+  onPhoneNumberClick?: (
+    phoneNumber: string,
+    event: React.MouseEvent<HTMLElement>,
+  ) => void;
 };
 
 const themeSpacing = THEME_COMMON.spacingMultiplicator;
@@ -30,7 +34,11 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
+export const PhonesDisplay = ({
+  value,
+  isFocused,
+  onPhoneNumberClick,
+}: PhonesDisplayProps) => {
   const phones = useMemo(
     () =>
       [
@@ -67,6 +75,13 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
     }
   };
 
+  const handleClick = (
+    number: string,
+    event: React.MouseEvent<HTMLElement>,
+  ) => {
+    onPhoneNumberClick?.(number, event);
+  };
+
   return isFocused ? (
     <ExpandableList isChipCountDisplayed>
       {phones.map(({ number, callingCode }, index) => {
@@ -80,6 +95,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
             label={
               parsedPhone ? parsedPhone.formatInternational() : invalidPhone
             }
+            onClick={(event) => handleClick(callingCode + number, event)}
           />
         );
       })}
@@ -97,6 +113,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
             label={
               parsedPhone ? parsedPhone.formatInternational() : invalidPhone
             }
+            onClick={(event) => handleClick(callingCode + number, event)}
           />
         );
       })}