Enable phone field type (#5052)

### Description

 Enable phone field type

### Refs

https://github.com/twentyhq/twenty/issues/2700

### Demo


https://github.com/twentyhq/twenty/assets/140154534/e9810718-9916-4ad4-a080-4d718777de15

Fixes #2700

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions.ts

@@ -17,6 +17,7 @@ export const formatFieldMetadataItemsAsSortDefinitions = ({
         FieldMetadataType.Text,
         FieldMetadataType.Boolean,
         FieldMetadataType.Select,
+        FieldMetadataType.Phone,
       ].includes(field.type)
     ) {
       return acc;

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getOperandsForFilterType.ts

@@ -10,6 +10,7 @@ export const getOperandsForFilterType = (
     case 'EMAIL':
     case 'FULL_NAME':
     case 'ADDRESS':
+    case 'PHONE':
     case 'LINK':
       return [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain];
     case 'CURRENCY':

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePhoneField.ts

@@ -15,7 +15,7 @@ import { isFieldPhone } from '../../types/guards/isFieldPhone';
 export const usePhoneField = () => {
   const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
 
-  assertFieldMetadata(FieldMetadataType.Text, isFieldPhone, fieldDefinition);
+  assertFieldMetadata(FieldMetadataType.Phone, isFieldPhone, fieldDefinition);
 
   const fieldName = fieldDefinition.metadata.fieldName;
 

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

@@ -4,8 +4,6 @@ import { FieldDefinition } from '../FieldDefinition';
 import { FieldMetadata, FieldPhoneMetadata } from '../FieldMetadata';
 
 export const isFieldPhone = (
-  field: Pick<FieldDefinition<FieldMetadata>, 'type' | 'metadata'>,
+  field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
 ): field is FieldDefinition<FieldPhoneMetadata> =>
-  field.metadata.objectMetadataNameSingular === 'person' &&
-  field.metadata.fieldName === 'phone' &&
-  field.type === FieldMetadataType.Text;
+  field.type === FieldMetadataType.Phone;

packages/twenty-front/src/modules/object-record/record-field/utils/isFieldValueEmpty.ts

@@ -17,6 +17,7 @@ import { isFieldLinkValue } from '@/object-record/record-field/types/guards/isFi
 import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/isFieldMultiSelect';
 import { isFieldMultiSelectValue } from '@/object-record/record-field/types/guards/isFieldMultiSelectValue';
 import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
+import { isFieldPhone } from '@/object-record/record-field/types/guards/isFieldPhone';
 import { isFieldRating } from '@/object-record/record-field/types/guards/isFieldRating';
 import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
@@ -47,8 +48,8 @@ export const isFieldValueEmpty = ({
     isFieldEmail(fieldDefinition) ||
     isFieldBoolean(fieldDefinition) ||
     isFieldRelation(fieldDefinition) ||
-    isFieldRawJson(fieldDefinition)
-    //|| isFieldPhone(fieldDefinition)
+    isFieldRawJson(fieldDefinition) ||
+    isFieldPhone(fieldDefinition)
   ) {
     return isValueEmpty(fieldValue);
   }

packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts

@@ -100,7 +100,11 @@ export const SETTINGS_FIELD_TYPE_CONFIGS: Record<
     Icon: IconRelationManyToMany,
   },
   [FieldMetadataType.Email]: { label: 'Email', Icon: IconMail },
-  [FieldMetadataType.Phone]: { label: 'Phone', Icon: IconPhone },
+  [FieldMetadataType.Phone]: {
+    label: 'Phone',
+    Icon: IconPhone,
+    defaultValue: '+1234-567-890',
+  },
   [FieldMetadataType.Probability]: {
     label: 'Rating',
     Icon: IconTwentyStar,

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

@@ -74,6 +74,7 @@ const previewableTypes = [
   FieldMetadataType.Text,
   FieldMetadataType.Address,
   FieldMetadataType.RawJson,
+  FieldMetadataType.Phone,
 ];
 
 export const SettingsDataModelFieldSettingsFormCard = ({

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx

@@ -284,7 +284,6 @@ export const SettingsObjectNewFieldStep2 = () => {
     FieldMetadataType.Link,
     FieldMetadataType.Links,
     FieldMetadataType.Numeric,
-    FieldMetadataType.Phone,
     FieldMetadataType.Probability,
     FieldMetadataType.Uuid,
   ];