Fix phone cell display (#4924)

Closes #4796 

## What has been done
- fix phone number value detection
- Update formatting from International format to National format

## Before
phone were formatted as text field type

![image](https://github.com/twentyhq/twenty/assets/29927851/27d87522-5b02-4131-8b83-6bce7501fb1b)

## After
phone are properly formatted in National format

![image](https://github.com/twentyhq/twenty/assets/29927851/72f71b0f-4fd7-4060-afe3-feb87bddab0d)

## FYI
Phones in International format look like

![image](https://github.com/twentyhq/twenty/assets/29927851/6bd47dc1-6350-46b9-b5fd-94f4344bffac)

packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx

@@ -34,13 +34,18 @@ import { isFieldUuid } from '../types/guards/isFieldUuid';
 export const FieldDisplay = () => {
   const { fieldDefinition, isLabelIdentifier } = useContext(FieldContext);
 
-  return isLabelIdentifier &&
+  const isChipDisplay =
+    isLabelIdentifier &&
     (isFieldText(fieldDefinition) ||
       isFieldFullName(fieldDefinition) ||
-      isFieldNumber(fieldDefinition)) ? (
+      isFieldNumber(fieldDefinition));
+
+  return isChipDisplay ? (
     <ChipFieldDisplay />
   ) : isFieldRelation(fieldDefinition) ? (
     <RelationFieldDisplay />
+  ) : isFieldPhone(fieldDefinition) ? (
+    <PhoneFieldDisplay />
   ) : isFieldText(fieldDefinition) ? (
     <TextFieldDisplay />
   ) : isFieldUuid(fieldDefinition) ? (
@@ -57,8 +62,6 @@ export const FieldDisplay = () => {
     <CurrencyFieldDisplay />
   ) : isFieldFullName(fieldDefinition) ? (
     <FullNameFieldDisplay />
-  ) : isFieldPhone(fieldDefinition) ? (
-    <PhoneFieldDisplay />
   ) : isFieldSelect(fieldDefinition) ? (
     <SelectFieldDisplay />
   ) : isFieldMultiSelect(fieldDefinition) ? (

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldAddress.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldAddressMetadata, FieldMetadata } from '../FieldMetadata';
 
 export const isFieldAddress = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldAddressMetadata> => field.type === 'ADDRESS';
+): field is FieldDefinition<FieldAddressMetadata> =>
+  field.type === FieldMetadataType.Address;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldBoolean.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldBooleanMetadata, FieldMetadata } from '../FieldMetadata';
 
 export const isFieldBoolean = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldBooleanMetadata> => field.type === 'BOOLEAN';
+): field is FieldDefinition<FieldBooleanMetadata> =>
+  field.type === FieldMetadataType.Boolean;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldCurrency.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldCurrencyMetadata, FieldMetadata } from '../FieldMetadata';
 
 export const isFieldCurrency = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldCurrencyMetadata> => field.type === 'CURRENCY';
+): field is FieldDefinition<FieldCurrencyMetadata> =>
+  field.type === FieldMetadataType.Currency;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldDateTime.ts

@@ -1,7 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldDateTimeMetadata, FieldMetadata } from '../FieldMetadata';
 
 export const isFieldDateTime = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
 ): field is FieldDefinition<FieldDateTimeMetadata> =>
-  field.type === 'DATE_TIME';
+  field.type === FieldMetadataType.DateTime;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldEmail.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldEmailMetadata, FieldMetadata } from '../FieldMetadata';
 
 export const isFieldEmail = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldEmailMetadata> => field.type === 'EMAIL';
+): field is FieldDefinition<FieldEmailMetadata> =>
+  field.type === FieldMetadataType.Email;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldFullName.ts

@@ -1,7 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldFullNameMetadata, FieldMetadata } from '../FieldMetadata';
 
 export const isFieldFullName = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
 ): field is FieldDefinition<FieldFullNameMetadata> =>
-  field.type === 'FULL_NAME';
+  field.type === FieldMetadataType.FullName;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldLink.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldLinkMetadata, FieldMetadata } from '../FieldMetadata';
 
 export const isFieldLink = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldLinkMetadata> => field.type === 'LINK';
+): field is FieldDefinition<FieldLinkMetadata> =>
+  field.type === FieldMetadataType.Link;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldNumber.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldNumberMetadata } from '../FieldMetadata';
 
 export const isFieldNumber = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldNumberMetadata> => field.type === 'NUMBER';
+): field is FieldDefinition<FieldNumberMetadata> =>
+  field.type === FieldMetadataType.Number;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldPhone.ts

@@ -1,3 +1,5 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldPhoneMetadata } from '../FieldMetadata';
 
@@ -6,4 +8,4 @@ export const isFieldPhone = (
 ): field is FieldDefinition<FieldPhoneMetadata> =>
   field.metadata.objectMetadataNameSingular === 'person' &&
   field.metadata.fieldName === 'phone' &&
-  field.type === 'TEXT';
+  field.type === FieldMetadataType.Text;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldRawJson.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldRawJsonMetadata } from '../FieldMetadata';
 
 export const isFieldRawJson = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldRawJsonMetadata> => field.type === 'RAW_JSON';
+): field is FieldDefinition<FieldRawJsonMetadata> =>
+  field.type === FieldMetadataType.RawJson;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldRelation.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldRelationMetadata } from '../FieldMetadata';
 
 export const isFieldRelation = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldRelationMetadata> => field.type === 'RELATION';
+): field is FieldDefinition<FieldRelationMetadata> =>
+  field.type === FieldMetadataType.Relation;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldText.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldTextMetadata } from '../FieldMetadata';
 
 export const isFieldText = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldTextMetadata> => field.type === 'TEXT';
+): field is FieldDefinition<FieldTextMetadata> =>
+  field.type === FieldMetadataType.Text;

packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldUuid.ts

@@ -1,6 +1,9 @@
+import { FieldMetadataType } from '~/generated-metadata/graphql.ts';
+
 import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldUuidMetadata } from '../FieldMetadata';
 
 export const isFieldUuid = (
   field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
-): field is FieldDefinition<FieldUuidMetadata> => field.type === 'UUID';
+): field is FieldDefinition<FieldUuidMetadata> =>
+  field.type === FieldMetadataType.Uuid;

packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx

@@ -18,7 +18,7 @@ export const PhoneDisplay = ({ value }: PhoneDisplayProps) => (
           event.stopPropagation();
         }}
       >
-        {parsePhoneNumber(value, 'FR')?.formatInternational() || value}
+        {parsePhoneNumber(value, 'FR')?.formatNational() || value}
       </ContactLink>
     ) : (
       <ContactLink href="#">{value}</ContactLink>