diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx
index 5a7925c3238d..e41706c0d8df 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx
+++ b/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 ;
+ const {enqueueSnackBar} = useSnackBar();
+
+ const {getIcon} = useIcons();
+
+ const IconClipboard = getIcon('IconClipboard');
+
+ const handleClick = async(phoneNumber:string,event: React.MouseEvent) =>{
+ event.preventDefault();
+ try{
+ await navigator.clipboard.writeText(phoneNumber);
+ enqueueSnackBar('Phone number copied to clipboard', {
+ variant: SnackBarVariant.Success,
+ icon: ,
+ duration: 2000
+ });
+ }catch(err){
+ enqueueSnackBar('Error copying to clipboard', {
+ variant: SnackBarVariant.Error,
+ icon: ,
+ duration: 2000
+ });
+ }
+
+
+ }
+
+ return ;
};
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..5b2312caa356 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
@@ -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) => 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) => {
+ if (onPhoneNumberClick) {
+ onPhoneNumberClick(number,event);
+ }
+ };
return isFocused ? (
{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)}
/>
);
})}