Remove duplicate plus sign for phone numbers (#8871)

Fixes #8838 1. Summary It seems [this PR](#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 <[email protected]> Co-authored-by: Guillim <[email protected]> Co-authored-by: Weiko <[email protected]>
twentyhq · Dec 5, 2024 · 50af41f · 50af41f
1 parent 4623b61
commit 50af41f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/...rc/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/...rc/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
@@ -111,7 +111,7 @@ export const MultiItemFieldInput = <T,>({
         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/...t/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/...t/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/...s/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx b/...s/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/...-front/src/modules/settings/data-model/fields/preview/utils/getPhonesFieldPreviewValue.ts b/...-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
@@ -67,7 +67,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
     <ExpandableList isChipCountDisplayed>
       {phones.map(({ number, callingCode }, index) => {
         const { parsedPhone, invalidPhone } =
-          parsePhoneNumberOrReturnInvalidValue(`+${callingCode}` + number);
+          parsePhoneNumberOrReturnInvalidValue(callingCode + number);
         const URI = parsedPhone?.getURI();
         return (
           <RoundedLink
@@ -84,7 +84,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
     <StyledContainer>
       {phones.map(({ number, callingCode }, index) => {
         const { parsedPhone, invalidPhone } =
-          parsePhoneNumberOrReturnInvalidValue(`+${callingCode}` + number);
+          parsePhoneNumberOrReturnInvalidValue(callingCode + number);
         const URI = parsedPhone?.getURI();
         return (
           <RoundedLink