diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx index 67cf91492042..8a11b321550e 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx @@ -1,5 +1,6 @@ import { FormAddressFieldInput } from '@/object-record/record-field/form-types/components/FormAddressFieldInput'; import { FormBooleanFieldInput } from '@/object-record/record-field/form-types/components/FormBooleanFieldInput'; +import { FormEmailsFieldInput } from '@/object-record/record-field/form-types/components/FormEmailsFieldInput'; import { FormFullNameFieldInput } from '@/object-record/record-field/form-types/components/FormFullNameFieldInput'; import { FormLinksFieldInput } from '@/object-record/record-field/form-types/components/FormLinksFieldInput'; import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput'; @@ -9,12 +10,14 @@ import { VariablePickerComponent } from '@/object-record/record-field/form-types import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldAddressValue, + FieldEmailsValue, FieldFullNameValue, FieldLinksValue, FieldMetadata, } from '@/object-record/record-field/types/FieldMetadata'; import { isFieldAddress } from '@/object-record/record-field/types/guards/isFieldAddress'; import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean'; +import { isFieldEmails } from '@/object-record/record-field/types/guards/isFieldEmails'; import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName'; import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks'; import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber'; @@ -88,5 +91,12 @@ export const FormFieldInput = ({ onPersist={onPersist} VariablePicker={VariablePicker} /> + ) : isFieldEmails(field) ? ( + ) : null; }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx new file mode 100644 index 000000000000..479792c23c4b --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx @@ -0,0 +1,45 @@ +import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer'; +import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer'; +import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput'; +import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; +import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata'; +import { InputLabel } from '@/ui/input/components/InputLabel'; + +type FormEmailsFieldInputProps = { + label?: string; + defaultValue?: FieldEmailsValue; + onPersist: (value: FieldEmailsValue) => void; + VariablePicker?: VariablePickerComponent; + readonly?: boolean; +}; + +export const FormEmailsFieldInput = ({ + label, + defaultValue, + onPersist, + readonly, + VariablePicker, +}: FormEmailsFieldInputProps) => { + const handleChange = (email: string) => { + onPersist({ + primaryEmail: email, + additionalEmails: [], + }); + }; + + return ( + + {label ? {label} : null} + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx new file mode 100644 index 000000000000..dbf2ef332731 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { within } from '@storybook/test'; +import { FormEmailsFieldInput } from '../FormEmailsFieldInput'; + +const meta: Meta = { + title: 'UI/Data/Field/Form/Input/FormEmailsFieldInput', + component: FormEmailsFieldInput, + args: {}, + argTypes: {}, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + label: 'Emails', + defaultValue: { + primaryEmail: 'tim@twenty.com', + additionalEmails: [], + }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await canvas.findByText('Emails'); + await canvas.findByText('Primary Email'); + await canvas.findByText('tim@twenty.com'); + }, +};