Phone country code unique (#9035)

fix #8775

packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx

@@ -3,8 +3,10 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { phonesSchema as phonesFieldDefaultValueSchema } from '@/object-record/record-field/types/guards/isFieldPhonesValue';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { countryCodeToCallingCode } from '@/settings/data-model/fields/preview/utils/getPhonesFieldPreviewValue';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
 import { Select } from '@/ui/input/components/Select';
+import { CountryCode } from 'libphonenumber-js';
 import { IconMap } from 'twenty-ui';
 import { z } from 'zod';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
@@ -27,22 +29,27 @@ export type SettingsDataModelFieldTextFormValues = z.infer<
   typeof settingsDataModelFieldPhonesFormSchema
 >;
 
+export type CountryCodeOrEmpty = CountryCode | '';
+
 export const SettingsDataModelFieldPhonesForm = ({
   disabled,
   fieldMetadataItem,
 }: SettingsDataModelFieldPhonesFormProps) => {
   const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
 
-  const countries = useCountries()
-    .sort((a, b) => a.countryName.localeCompare(b.countryName))
-    .map((country) => ({
-      label: `${country.countryName} (+${country.callingCode})`,
-      value: `+${country.callingCode}`,
-    }));
-  countries.unshift({ label: 'No country', value: '' });
+  const countries = [
+    { label: 'No country', value: '' },
+    ...useCountries()
+      .sort((a, b) => a.countryName.localeCompare(b.countryName))
+      .map((country) => ({
+        label: `${country.countryName} (+${country.callingCode})`,
+        value: country.countryCode as CountryCodeOrEmpty,
+      })),
+  ];
   const defaultDefaultValue = {
     primaryPhoneNumber: "''",
     primaryPhoneCountryCode: "''",
+    primaryPhoneCallingCode: "''",
     additionalPhones: null,
   };
   const fieldMetadataItemDefaultValue = fieldMetadataItem?.defaultValue;
@@ -73,6 +80,9 @@ export const SettingsDataModelFieldPhonesForm = ({
                   ...value,
                   primaryPhoneCountryCode:
                     applySimpleQuotesToString(newPhoneCountryCode),
+                  primaryPhoneCallingCode: applySimpleQuotesToString(
+                    countryCodeToCallingCode(newPhoneCountryCode),
+                  ),
                 })
               }
               disabled={disabled}

packages/twenty-front/src/modules/settings/data-model/fields/preview/utils/getPhonesFieldPreviewValue.ts

@@ -1,9 +1,29 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { DEFAULT_PHONE_CALLING_CODE } from '@/object-record/record-field/meta-types/input/components/PhonesFieldInput';
 import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
 import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
+import {
+  CountryCode,
+  getCountries,
+  getCountryCallingCode,
+} from 'libphonenumber-js';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
 
+const isStrCountryCodeGuard = (str: string): str is CountryCode => {
+  return getCountries().includes(str as CountryCode);
+};
+
+export const countryCodeToCallingCode = (countryCode: string): string => {
+  if (!countryCode || !isStrCountryCodeGuard(countryCode)) {
+    return `+${DEFAULT_PHONE_CALLING_CODE}`;
+  }
+
+  const callingCode = getCountryCallingCode(countryCode);
+
+  return callingCode ? `+${callingCode}` : `+${DEFAULT_PHONE_CALLING_CODE}`;
+};
+
 export const getPhonesFieldPreviewValue = ({
   fieldMetadataItem,
 }: {
@@ -26,8 +46,16 @@ export const getPhonesFieldPreviewValue = ({
           fieldMetadataItem.defaultValue?.primaryPhoneCountryCode,
         )
       : null;
+  const primaryPhoneCallingCode =
+    fieldMetadataItem.defaultValue?.primaryPhoneCallingCode &&
+    fieldMetadataItem.defaultValue.primaryPhoneCallingCode !== ''
+      ? stripSimpleQuotesFromString(
+          fieldMetadataItem.defaultValue?.primaryPhoneCallingCode,
+        )
+      : null;
   return {
     ...placeholderDefaultValue,
     primaryPhoneCountryCode,
+    primaryPhoneCallingCode,
   };
 };