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 (