From 578ba97dad321b603a96c3194f8a9346c27db4b1 Mon Sep 17 00:00:00 2001 From: Suhotra Dey <50608734+Lucifer4255@users.noreply.github.com> Date: Mon, 30 Dec 2024 15:41:03 +0530 Subject: [PATCH] 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 --- .../display/components/PhonesFieldDisplay.tsx | 41 ++++++++++++++++++- .../perf/PhonesFieldDisplay.perf.stories.tsx | 2 + .../snack-bar-manager/components/SnackBar.tsx | 13 +----- .../display/components/PhonesDisplay.tsx | 21 +++++++++- 4 files changed, 62 insertions(+), 15 deletions(-) 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..babdf7df7268 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,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 ; + const { enqueueSnackBar } = useSnackBar(); + + const { getIcon } = useIcons(); + + const IconCircleCheck = getIcon('IconCircleCheck'); + const IconExclamationCircle = getIcon('IconExclamationCircle'); + + 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/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx index 94f37ee5cfb6..fce6cfaccd09 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx +++ b/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: {}, diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx index 74be88cd896e..3c0cb5177b5c 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx +++ b/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.Default]: 'Alert', [SnackBarVariant.Error]: 'Error', @@ -183,7 +173,7 @@ export const SnackBar = ({ /> {icon} - {title} + {message} {!!onCancel && } @@ -192,7 +182,6 @@ export const SnackBar = ({ )} - {message && {message}} ); }; 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 9b3e4c5e06a4..d3bef134297e 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'; @@ -13,6 +13,10 @@ import { logError } from '~/utils/logError'; type PhonesDisplayProps = { value?: FieldPhonesValue; isFocused?: boolean; + onPhoneNumberClick?: ( + phoneNumber: string, + event: React.MouseEvent, + ) => 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, + ) => { + onPhoneNumberClick?.(number, event); + }; + return isFocused ? ( {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)} /> ); })}