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)} /> ); })}