From 50af41f1702a9c541e033d5332828475ebd0007a Mon Sep 17 00:00:00 2001 From: Khuddite <62555977+khuddite@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:41:14 -0500 Subject: [PATCH] Remove duplicate plus sign for phone numbers (#8871) Fixes #8838 1. Summary It seems [this PR](https://github.com/twentyhq/twenty/pull/8614) caused the issue. We added a plus sign on front-end when the [callingCode](https://github.com/twentyhq/twenty/blob/c735026f6c4f011e82e80713f1554b5cdb4fda5b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx#L70) retrieved from back-end already has a plus sign. 2. Solution @guillim Please let me know if I missed a case where the plus sign is not there for the `callingCode`. If so, I think we should check whether or not `callingCode` has a leading plus sign on front-end before adding it. For now, I just removed the code that appends a plus sign on front-end. 3. Screenshots ![localhost_3001_objects_people_view=f4aee583-9d0c-4961-a6e1-fd66bc51dfd5](https://github.com/user-attachments/assets/9fe8b361-47b9-4e3f-82b7-570713cf430c) --------- Co-authored-by: guillim Co-authored-by: Guillim Co-authored-by: Weiko --- .../meta-types/input/components/MultiItemFieldInput.tsx | 2 +- .../meta-types/input/components/PhonesFieldInput.tsx | 9 +++++---- .../components/SettingsDataModelFieldPhonesForm.tsx | 2 +- .../fields/preview/utils/getPhonesFieldPreviewValue.ts | 4 ++-- .../ui/field/display/components/PhonesDisplay.tsx | 4 ++-- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx index 5ba3bebad..f33537852 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx @@ -111,7 +111,7 @@ export const MultiItemFieldInput = ({ break; case FieldMetadataType.Phones: item = items[index] as PhoneRecord; - setInputValue(`+${item.callingCode}` + item.number); + setInputValue(item.callingCode + item.number); break; case FieldMetadataType.Emails: item = items[index] as string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx index 90308beef..9f64d6209 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx @@ -14,6 +14,8 @@ import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal import { FieldMetadataType } from '~/generated-metadata/graphql'; import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString'; +export const DEFAULT_PHONE_COUNTRY_CODE = '1'; + const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)` font-family: ${({ theme }) => theme.font.family}; height: 32px; @@ -71,11 +73,10 @@ export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => { const defaultCallingCode = stripSimpleQuotesFromString( fieldDefinition?.defaultValue?.primaryPhoneCountryCode, - ) ?? '+1'; - + ) ?? DEFAULT_PHONE_COUNTRY_CODE; // TODO : improve once we store the real country code const defaultCountry = useCountries().find( - (obj) => obj.callingCode === defaultCallingCode, + (obj) => `+${obj.callingCode}` === defaultCallingCode, )?.countryCode; const handlePersistPhones = ( @@ -103,7 +104,7 @@ export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => { if (phone !== undefined) { return { number: phone.nationalNumber, - callingCode: `${phone.countryCallingCode}`, + callingCode: `+${phone.countryCallingCode}`, }; } return { diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx index 22ed484e0..070aa79cf 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx @@ -37,7 +37,7 @@ export const SettingsDataModelFieldPhonesForm = ({ .sort((a, b) => a.countryName.localeCompare(b.countryName)) .map((country) => ({ label: `${country.countryName} (+${country.callingCode})`, - value: `${country.callingCode}`, + value: `+${country.callingCode}`, })); countries.unshift({ label: 'No country', value: '' }); const defaultDefaultValue = { diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/utils/getPhonesFieldPreviewValue.ts b/packages/twenty-front/src/modules/settings/data-model/fields/preview/utils/getPhonesFieldPreviewValue.ts index 79c749733..3cd113cd9 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/utils/getPhonesFieldPreviewValue.ts +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/utils/getPhonesFieldPreviewValue.ts @@ -22,9 +22,9 @@ export const getPhonesFieldPreviewValue = ({ const primaryPhoneCountryCode = fieldMetadataItem.defaultValue?.primaryPhoneCountryCode && fieldMetadataItem.defaultValue.primaryPhoneCountryCode !== '' - ? `+${stripSimpleQuotesFromString( + ? stripSimpleQuotesFromString( fieldMetadataItem.defaultValue?.primaryPhoneCountryCode, - )}` + ) : null; return { ...placeholderDefaultValue, 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 745d5960b..de23dbc08 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 @@ -67,7 +67,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => { {phones.map(({ number, callingCode }, index) => { const { parsedPhone, invalidPhone } = - parsePhoneNumberOrReturnInvalidValue(`+${callingCode}` + number); + parsePhoneNumberOrReturnInvalidValue(callingCode + number); const URI = parsedPhone?.getURI(); return ( { {phones.map(({ number, callingCode }, index) => { const { parsedPhone, invalidPhone } = - parsePhoneNumberOrReturnInvalidValue(`+${callingCode}` + number); + parsePhoneNumberOrReturnInvalidValue(callingCode + number); const URI = parsedPhone?.getURI(); return (