Support for multiple values in the Phone field (#6882)

### Description

- This is the first PR on Phones field;


- We are introducing new field type(Phones)


- We are Forbidding creation of Phone field


- We Added support for filtering and sorting on Phones field


- We are using the same display mode as used on the Links field type
(chips), check the Domain field of the Company object


- We are also using the same logic of the link when editing the field

**How to Test**

1. Checkout to TWNTY-6260 branch
2. Reset database using "npx nx database:reset twenty-server" command
3. Add custom field of type Phones in settings/data-model

**Loom Video:**\

<https://www.loom.com/share/3c981260be254dcf851256d020a20ab0?sid=58507361-3a3b-452c-9de8-b5b1abda70ac>

### Refs

#6260

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>

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

@@ -24,7 +24,7 @@ export const PhoneDisplay = ({ value }: PhoneDisplayProps) => {
   }
 
   const URI = parsedPhoneNumber.getURI();
-  const formattedNational = parsedPhoneNumber?.formatNational();
+  const formatedPhoneNumber = parsedPhoneNumber.formatInternational();
 
   return (
     <ContactLink
@@ -33,7 +33,7 @@ export const PhoneDisplay = ({ value }: PhoneDisplayProps) => {
         event.stopPropagation();
       }}
     >
-      {formattedNational || value}
+      {formatedPhoneNumber || value}
     </ContactLink>
   );
 };

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

@@ -0,0 +1,87 @@
+import styled from '@emotion/styled';
+import { useMemo } from 'react';
+import { THEME_COMMON } from 'twenty-ui';
+
+import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
+import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
+
+import { parsePhoneNumber } from 'libphonenumber-js';
+import { isDefined } from '~/utils/isDefined';
+
+type PhonesDisplayProps = {
+  value?: FieldPhonesValue;
+  isFocused?: boolean;
+};
+
+const themeSpacing = THEME_COMMON.spacingMultiplicator;
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeSpacing * 1}px;
+  justify-content: flex-start;
+
+  max-width: 100%;
+
+  overflow: hidden;
+
+  width: 100%;
+`;
+
+export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
+  const phones = useMemo(
+    () =>
+      [
+        value?.primaryPhoneNumber
+          ? {
+              number: value.primaryPhoneNumber,
+              countryCode: value.primaryPhoneCountryCode,
+            }
+          : null,
+        ...(value?.additionalPhones ?? []),
+      ]
+        .filter(isDefined)
+        .map(({ number, countryCode }) => {
+          return {
+            number,
+            countryCode,
+          };
+        }),
+    [
+      value?.primaryPhoneNumber,
+      value?.primaryPhoneCountryCode,
+      value?.additionalPhones,
+    ],
+  );
+
+  return isFocused ? (
+    <ExpandableList isChipCountDisplayed>
+      {phones.map(({ number, countryCode }, index) => {
+        const parsedPhone = parsePhoneNumber(countryCode + number);
+        const URI = parsedPhone.getURI();
+        return (
+          <RoundedLink
+            key={index}
+            href={URI}
+            label={parsedPhone.formatInternational()}
+          />
+        );
+      })}
+    </ExpandableList>
+  ) : (
+    <StyledContainer>
+      {phones.map(({ number, countryCode }, index) => {
+        const parsedPhone = parsePhoneNumber(countryCode + number);
+        const URI = parsedPhone.getURI();
+        return (
+          <RoundedLink
+            key={index}
+            href={URI}
+            label={parsedPhone.formatInternational()}
+          />
+        );
+      })}
+    </StyledContainer>
+  );
+};