Default address country 🗺️ & Phone prefix ☎️

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

@@ -1,4 +1,5 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { computeMetadataDefaultValue } from '~/pages/settings/data-model/utils/compute-metadata-defaultValue-utils';
 import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 export const formatFieldMetadataItemInput = (
@@ -18,7 +19,7 @@ export const formatFieldMetadataItemInput = (
   const label = input.label?.trim();
 
   return {
-    defaultValue: input.defaultValue,
+    defaultValue: computeMetadataDefaultValue(input.defaultValue),
     description: input.description?.trim() ?? null,
     icon: input.icon,
     label,

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

@@ -35,8 +35,8 @@ export const useNumberField = () => {
 
   const persistNumberField = (newValue: string) => {
     if (fieldDefinition?.metadata?.settings?.type === 'percentage') {
-      newValue = newValue.replaceAll('%', '');
-      if (!canBeCastAsNumberOrNull(newValue)) {
+      const newValueEscaped = newValue.replaceAll('%', '');
+      if (!canBeCastAsNumberOrNull(newValueEscaped)) {
         return;
       }
       const castedValue = castAsNumberOrNull(newValue);

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

@@ -10,13 +10,13 @@ import { CurrencyCode } from './CurrencyCode';
 export type FieldUuidMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldBooleanMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldTextMetadata = {
@@ -61,80 +61,80 @@ export type FieldLinkMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldLinksMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldCurrencyMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   placeHolder: string;
   isPositive?: boolean;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldFullNameMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldEmailMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldEmailsMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldPhoneMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldRatingMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldAddressMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldRawJsonMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   placeHolder: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldRichTextMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldPositionMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldRelationMetadata = {
@@ -146,47 +146,47 @@ export type FieldRelationMetadata = {
   relationType?: RelationDefinitionType;
   targetFieldMetadataName?: string;
   useEditButton?: boolean;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldSelectMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   options: { label: string; color: ThemeColor; value: string }[];
   isNullable: boolean;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldMultiSelectMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   options: { label: string; color: ThemeColor; value: string }[];
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldActorMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldArrayMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   values: { label: string; value: string }[];
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldPhonesMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldTsVectorMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: null;
 };
 
 export type FieldMetadata =

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

@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { FieldAddressValue } from '../FieldMetadata';
 
-const addressSchema = z.object({
+export const addressSchema = z.object({
   addressStreet1: z.string(),
   addressStreet2: z.string().nullable(),
   addressCity: z.string().nullable(),

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

@@ -1,6 +1,7 @@
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { isFieldAddress } from '@/object-record/record-field/types/guards/isFieldAddress';
 import { isFieldCurrency } from '@/object-record/record-field/types/guards/isFieldCurrency';
 import { isFieldCurrencyValue } from '@/object-record/record-field/types/guards/isFieldCurrencyValue';
 import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
@@ -42,6 +43,20 @@ export const computeDraftValueFromFieldValue = <FieldValue>({
     } as unknown as FieldInputDraftValue<FieldValue>;
   }
 
+  if (isFieldAddress(fieldDefinition)) {
+    if (
+      isFieldValueEmpty({ fieldValue, fieldDefinition }) &&
+      !!fieldDefinition?.defaultValue?.addressCountry
+    ) {
+      return {
+        ...fieldValue,
+        addressCountry: fieldDefinition?.defaultValue?.addressCountry,
+      } as unknown as FieldInputDraftValue<FieldValue>;
+    }
+
+    return fieldValue as FieldInputDraftValue<FieldValue>;
+  }
+
   if (
     isFieldNumber(fieldDefinition) &&
     isFieldNumberValue(fieldValue) &&

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

@@ -151,7 +151,7 @@ export const SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS = {
     },
     exampleValue: {
       addressStreet1: '456 Oak Street',
-      addressStreet2: 'Unit 3B',
+      addressStreet2: '',
       addressCity: 'Springfield',
       addressState: 'California',
       addressCountry: 'United States',

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

@@ -0,0 +1,84 @@
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { addressSchema as addressFieldDefaultValueSchema } from '@/object-record/record-field/types/guards/isFieldAddressValue';
+import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
+import { IconMap } from 'twenty-ui';
+import { z } from 'zod';
+import { stripSimpleQuotesFromStringRecursive } from '~/utils/string/stripSimpleQuotesFromString';
+
+type SettingsDataModelFieldAddressFormProps = {
+  disabled?: boolean;
+  defaultCountry?: string;
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
+  >;
+};
+
+export const settingsDataModelFieldAddressFormSchema = z.object({
+  defaultValue: addressFieldDefaultValueSchema,
+});
+
+export type SettingsDataModelFieldTextFormValues = z.infer<
+  typeof settingsDataModelFieldAddressFormSchema
+>;
+
+export const SettingsDataModelFieldAddressForm = ({
+  disabled,
+  fieldMetadataItem,
+}: SettingsDataModelFieldAddressFormProps) => {
+  const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
+  const countries = useCountries()
+    .sort((a, b) => a.countryName.localeCompare(b.countryName))
+    .map((country) => ({
+      label: country.countryName,
+      value: country.countryName,
+    }));
+  countries.unshift({ label: 'No country', value: '' });
+  const defaultValueInstance = {
+    addressStreet1: '',
+    addressStreet2: null,
+    addressCity: null,
+    addressState: null,
+    addressPostcode: null,
+    addressCountry: null,
+    addressLat: null,
+    addressLng: null,
+  };
+  const fieldMetadataItemDefaultValue = fieldMetadataItem?.defaultValue
+    ? stripSimpleQuotesFromStringRecursive(fieldMetadataItem?.defaultValue)
+    : fieldMetadataItem?.defaultValue;
+
+  return (
+    <Controller
+      name="defaultValue"
+      defaultValue={{
+        ...defaultValueInstance,
+        ...fieldMetadataItemDefaultValue,
+      }}
+      control={control}
+      render={({ field: { onChange, value } }) => {
+        const defaultCountry = value?.addressCountry || '';
+        return (
+          <>
+            <SettingsOptionCardContentSelect
+              Icon={IconMap}
+              dropdownId="selectDefaultCountry"
+              title="Default Country"
+              description="The default country for new addresses"
+              value={defaultCountry}
+              onChange={(newCountry) =>
+                onChange({ ...value, addressCountry: newCountry })
+              }
+              disabled={disabled}
+              options={countries}
+              fullWidth={true}
+            />
+          </>
+        );
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+
+import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
+import { SettingsDataModelFieldAddressForm } from '@/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm';
+import {
+  SettingsDataModelFieldPreviewCard,
+  SettingsDataModelFieldPreviewCardProps,
+} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+
+type SettingsDataModelFieldAddressSettingsFormCardProps = {
+  disabled?: boolean;
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'icon' | 'label' | 'type' | 'defaultValue'
+  >;
+} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
+
+const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
+  flex: 1 1 100%;
+`;
+
+export const SettingsDataModelFieldAddressSettingsFormCard = ({
+  disabled,
+  fieldMetadataItem,
+  objectMetadataItem,
+}: SettingsDataModelFieldAddressSettingsFormCardProps) => {
+  return (
+    <SettingsDataModelPreviewFormCard
+      preview={
+        <StyledFieldPreviewCard
+          fieldMetadataItem={fieldMetadataItem}
+          objectMetadataItem={objectMetadataItem}
+        />
+      }
+      form={
+        <SettingsDataModelFieldAddressForm
+          disabled={disabled}
+          fieldMetadataItem={fieldMetadataItem}
+        />
+      }
+    />
+  );
+};