diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx index 9f64d6209..07727b1ec 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx @@ -2,13 +2,13 @@ import { usePhonesField } from '@/object-record/record-field/meta-types/hooks/us import { PhonesFieldMenuItem } from '@/object-record/record-field/meta-types/input/components/PhonesFieldMenuItem'; import styled from '@emotion/styled'; import { E164Number, parsePhoneNumber } from 'libphonenumber-js'; -import { useMemo } from 'react'; import ReactPhoneNumberInput from 'react-phone-number-input'; import 'react-phone-number-input/style.css'; -import { TEXT_INPUT_STYLE, isDefined } from 'twenty-ui'; +import { TEXT_INPUT_STYLE } from 'twenty-ui'; import { MultiItemFieldInput } from './MultiItemFieldInput'; +import { createPhonesFromFieldValue } from '@/object-record/record-field/meta-types/input/utils/phonesUtils'; import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'; import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton'; import { FieldMetadataType } from '~/generated-metadata/graphql'; @@ -52,23 +52,10 @@ type PhonesFieldInputProps = { }; export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => { - const { persistPhonesField, hotkeyScope, draftValue, fieldDefinition } = + const { persistPhonesField, hotkeyScope, fieldDefinition, fieldValue } = usePhonesField(); - const phones = useMemo<{ number: string; callingCode: string }[]>(() => { - if (!isDefined(draftValue)) { - return []; - } - return [ - draftValue.primaryPhoneNumber - ? { - number: draftValue.primaryPhoneNumber, - callingCode: draftValue.primaryPhoneCountryCode, - } - : null, - ...(draftValue.additionalPhones ?? []), - ].filter(isDefined); - }, [draftValue]); + const phones = createPhonesFromFieldValue(fieldValue); const defaultCallingCode = stripSimpleQuotesFromString( diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/utils/__tests__/phonesUtils.test.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/utils/__tests__/phonesUtils.test.ts new file mode 100644 index 000000000..11f28a19b --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/utils/__tests__/phonesUtils.test.ts @@ -0,0 +1,96 @@ +import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata'; +import { createPhonesFromFieldValue } from '../phonesUtils'; + +describe('createPhonesFromFieldValue test suite', () => { + it('should return an empty array if fieldValue is undefined', () => { + const result = createPhonesFromFieldValue( + undefined as unknown as FieldPhonesValue, + ); + expect(result).toEqual([]); + }); + + it('should return an empty array if fieldValue is null', () => { + const result = createPhonesFromFieldValue( + null as unknown as FieldPhonesValue, + ); + expect(result).toEqual([]); + }); + + it('should return an array with primary phone number if it is defined', () => { + const fieldValue: FieldPhonesValue = { + primaryPhoneNumber: '123456789', + primaryPhoneCountryCode: '+1', + additionalPhones: [], + }; + const result = createPhonesFromFieldValue(fieldValue); + expect(result).toEqual([ + { + number: '123456789', + callingCode: '+1', + }, + ]); + }); + + it('should return an array with both primary and additional phones if they are defined', () => { + const fieldValue: FieldPhonesValue = { + primaryPhoneNumber: '123456789', + primaryPhoneCountryCode: '+1', + additionalPhones: [ + { number: '987654321', callingCode: '+44' }, + { number: '555555555', callingCode: '+33' }, + ], + }; + const result = createPhonesFromFieldValue(fieldValue); + expect(result).toEqual([ + { + number: '123456789', + callingCode: '+1', + }, + { number: '987654321', callingCode: '+44' }, + { number: '555555555', callingCode: '+33' }, + ]); + }); + + it('should return an array with additional phones if they are defined while no primary phone defined', () => { + const fieldValue: FieldPhonesValue = { + primaryPhoneNumber: '', + primaryPhoneCountryCode: '', + additionalPhones: [ + { number: '987654321', callingCode: '+44' }, + { number: '555555555', callingCode: '+33' }, + ], + }; + const result = createPhonesFromFieldValue(fieldValue); + expect(result).toEqual([ + { number: '987654321', callingCode: '+44' }, + { number: '555555555', callingCode: '+33' }, + ]); + }); + + it('should return an array with both primary and additional phones if they are defined, with primary as an extra space', () => { + const fieldValue: FieldPhonesValue = { + primaryPhoneNumber: ' ', + primaryPhoneCountryCode: '', + additionalPhones: [ + { number: '987654321', callingCode: '+44' }, + { number: '555555555', callingCode: '+33' }, + ], + }; + const result = createPhonesFromFieldValue(fieldValue); + expect(result).toEqual([ + { number: ' ', callingCode: '' }, + { number: '987654321', callingCode: '+44' }, + { number: '555555555', callingCode: '+33' }, + ]); + }); + + it('should return an empty array if only country code is defined', () => { + const fieldValue: FieldPhonesValue = { + primaryPhoneNumber: '', + primaryPhoneCountryCode: '+33', + additionalPhones: [], + }; + const result = createPhonesFromFieldValue(fieldValue); + expect(result).toEqual([]); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/utils/phonesUtils.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/utils/phonesUtils.ts new file mode 100644 index 000000000..56f413d8a --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/utils/phonesUtils.ts @@ -0,0 +1,16 @@ +import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata'; +import { isDefined } from 'twenty-ui'; + +export const createPhonesFromFieldValue = (fieldValue: FieldPhonesValue) => { + return !isDefined(fieldValue) + ? [] + : [ + fieldValue.primaryPhoneNumber + ? { + number: fieldValue.primaryPhoneNumber, + callingCode: fieldValue.primaryPhoneCountryCode, + } + : null, + ...(fieldValue.additionalPhones ?? []), + ].filter(isDefined); +};