Skip to content

refactor: Outbound message forms #36972

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 8 commits into from
Sep 19, 2025
Merged

refactor: Outbound message forms #36972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
31506bd
refactor: extract fields from RepliesForm
aleksandernsilva Sep 17, 2025
7c2ab6d
refactor: moved recipient form unit tests to the correct folder
aleksandernsilva Sep 17, 2025
ea04a45
chore: yarn lock
aleksandernsilva Sep 17, 2025
00c3f34
refactor: extracted template field from message form
aleksandernsilva Sep 18, 2025
13923a9
refactor: removed redundant keyboard shortcut
aleksandernsilva Sep 18, 2025
d553243
fix: Agents unable to assign outbound message replies to themselves …
aleksandernsilva Sep 19, 2025
6a085ef
Merge branch 'develop' into refactor/outbound-forms
kodiakhq[bot] Sep 19, 2025
9c7b622
Merge branch 'develop' into refactor/outbound-forms
kodiakhq[bot] Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions ...l/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@ import MessageForm from './MessageForm';
import { createFakeContactWithManagerData } from '../../../../../../../../tests/mocks/data';
import { createFakeOutboundTemplate } from '../../../../../../../../tests/mocks/data/outbound-message';

jest.mock('tinykeys', () => ({
__esModule: true,
default: jest.fn().mockReturnValue(() => () => undefined),
}));

const component = {
header: { type: 'header', text: 'New {{1}} appointment' },
body: { type: 'body', text: 'Hello {{1}}' },
Expand Down
65 changes: 6 additions & 59 deletions ...hannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import type { IOutboundProviderTemplate, Serialized, ILivechatContact } from '@rocket.chat/core-typings';
import { Box, Button, Field, FieldError, FieldGroup, FieldHint, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
import { Box, Button, FieldGroup } from '@rocket.chat/fuselage';
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
import type { ReactNode } from 'react';
import { useId, useMemo } from 'react';
import { useController, useForm, useWatch } from 'react-hook-form';
import { useForm, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import TemplateField from './components/TemplateField';
import TemplatePlaceholderField from './components/TemplatePlaceholderField';
import TemplatePreviewForm from './components/TemplatePreviewField';
import { OUTBOUND_DOCS_LINK } from '../../../../constants';
import type { TemplateParameters } from '../../../../definitions/template';
import { extractParameterMetadata } from '../../../../utils/template';
import TemplateSelect from '../../../TemplateSelect';
import { useFormKeyboardSubmit } from '../../hooks/useFormKeyboardSubmit';
import { cxp } from '../../utils/cx';
import { FormFetchError } from '../../utils/errors';

export type MessageFormData = {
Expand Down Expand Up @@ -47,7 +44,7 @@ const MessageForm = (props: MessageFormProps) => {

const {
control,
formState: { errors, isSubmitting },
formState: { isSubmitting },
handleSubmit,
setValue,
} = useForm<MessageFormData>({
Expand All @@ -59,29 +56,11 @@ const MessageForm = (props: MessageFormProps) => {
},
});

const { field: templateIdField } = useController({
control,
name: 'templateId',
rules: {
validate: {
// NOTE: The order of these validations matters
templatesNotFound: () => (!templates?.length ? t('No_templates_available') : true),
templateNotFound: () => (templateId && !template ? t('Error_loading__name__information', { name: t('template') }) : true),
required: (value) => (!value?.trim() ? t('Required_field', { field: t('Template_message') }) : true),
},
},
});

const templateId = useWatch({ control, name: 'templateId' });
const template = useMemo(() => templates?.find((template) => template.id === templateId), [templates, templateId]);
const parametersMetadata = useMemo(() => (template ? extractParameterMetadata(template) : []), [template]);
const customActions = useMemo(() => renderActions?.({ isSubmitting }), [isSubmitting, renderActions]);

const handleTemplateChange = useEffectEvent((value: string) => {
setValue('templateParameters', {});
templateIdField.onChange(value);
});

const submit = useEffectEvent(async (values: MessageFormData) => {
try {
const { templateId, templateParameters } = values;
Expand All @@ -98,42 +77,10 @@ const MessageForm = (props: MessageFormProps) => {
}
});

const formRef = useFormKeyboardSubmit(() => handleSubmit(submit)(), [submit, handleSubmit]);

return (
<form ref={formRef} id={messageFormId} onSubmit={handleSubmit(submit)} noValidate>
<form id={messageFormId} onSubmit={handleSubmit(submit)} noValidate>
<FieldGroup>
<Field>
<FieldLabel is='span' required id={`${messageFormId}-template`}>
{t('Template')}
</FieldLabel>
<FieldRow>
<TemplateSelect
aria-labelledby={`${messageFormId}-template`}
aria-invalid={!!errors.templateId}
aria-describedby={cxp(messageFormId, {
'template-error': !!errors.templateId,
'template-hint': true,
})}
placeholder={t('Select_template')}
error={errors.templateId?.message}
templates={templates || []}
value={templateIdField.value}
onChange={handleTemplateChange}
/>
</FieldRow>
{errors.templateId && (
<FieldError aria-live='assertive' id={`${templateId}-template-error`}>
{errors.templateId.message}
</FieldError>
)}
<FieldHint id={`${messageFormId}-template-hint`}>
{/* TODO: Change to the correct address */}
<a href={OUTBOUND_DOCS_LINK} target='_blank' rel='noopener noreferrer'>
{t('Learn_more')}
</a>
</FieldHint>
</Field>
<TemplateField control={control} templates={templates} onChange={() => setValue('templateParameters', {})} />

{parametersMetadata.map((metadata) => (
<TemplatePlaceholderField key={metadata.id} control={control} metadata={metadata} contact={contact} />
Expand Down
82 changes: 82 additions & 0 deletions ...ndMessage/components/OutboundMessageWizard/forms/MessageForm/components/TemplateField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import type { IOutboundProviderTemplate, Serialized } from '@rocket.chat/core-typings';
import { Field, FieldError, FieldHint, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
import { useId } from 'react';
import type { Control } from 'react-hook-form';
import { useController } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import { OUTBOUND_DOCS_LINK } from '../../../../../constants';
import TemplateSelect from '../../../../TemplateSelect';
import { cxp } from '../../../utils/cx';
import type { MessageFormData } from '../MessageForm';

type TemplateFieldProps = {
control: Control<MessageFormData>;
templates: Serialized<IOutboundProviderTemplate>[] | undefined;
onChange?: (templateId: string) => void;
};

const TemplateField = ({ control, templates, onChange: onChangeExternal }: TemplateFieldProps) => {
const { t } = useTranslation();
const templateFieldId = useId();

const {
field: templateField,
fieldState: { error: templateFieldError },
} = useController({
control,
name: 'templateId',
rules: {
validate: {
// NOTE: The order of these validations matters
templatesNotFound: () => (!templates?.length ? t('No_templates_available') : true),
templateNotFound: (templateId) =>
templateId && !templates?.some((template) => template.id === templateId)
? t('Error_loading__name__information', { name: t('template') })
: true,
required: (value) => (!value?.trim() ? t('Required_field', { field: t('Template_message') }) : true),
},
},
});

const handleTemplateChange = useEffectEvent((value: string) => {
onChangeExternal?.(value);
templateField.onChange(value);
});

return (
<Field>
<FieldLabel is='span' required id={templateFieldId}>
{t('Template')}
</FieldLabel>
<FieldRow>
<TemplateSelect
aria-labelledby={templateFieldId}
aria-invalid={!!templateFieldError}
aria-describedby={cxp(templateFieldId, {
error: !!templateFieldError,
hint: true,
})}
placeholder={t('Select_template')}
error={templateFieldError?.message}
templates={templates || []}
value={templateField.value}
onChange={handleTemplateChange}
/>
</FieldRow>
{templateFieldError && (
<FieldError aria-live='assertive' id={`${templateFieldId}-error`}>
{templateFieldError.message}
</FieldError>
)}
<FieldHint id={`${templateFieldId}-hint`}>
<a href={OUTBOUND_DOCS_LINK} target='_blank' rel='noopener noreferrer'>
{t('Learn_more')}
</a>
</FieldHint>
</Field>
);
};

export default TemplateField;
11 changes: 2 additions & 9 deletions ...essageWizard/forms/RecipientForm.spec.tsx → ...orms/RecipientForm/RecipientForm.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,8 @@ import { axe } from 'jest-axe';
import { VirtuosoMockContext } from 'react-virtuoso';

import RecipientForm from './RecipientForm';
import { createFakeContactChannel, createFakeContactWithManagerData } from '../../../../../../../tests/mocks/data';
import { createFakeOutboundTemplate, createFakeProviderMetadata } from '../../../../../../../tests/mocks/data/outbound-message';

// NOTE: Mocking tinykeys to avoid conflicts with esm/cjs imports in Jest
// Can be safely removed once cause is found and fixed
jest.mock('tinykeys', () => ({
__esModule: true,
default: jest.fn().mockReturnValue(() => () => undefined),
}));
import { createFakeContactChannel, createFakeContactWithManagerData } from '../../../../../../../../tests/mocks/data';
import { createFakeOutboundTemplate, createFakeProviderMetadata } from '../../../../../../../../tests/mocks/data/outbound-message';

const recipientOnePhoneNumber = '+12125554567';
const recipientTwoPhoneNumber = '+12125557788';
Expand Down
5 changes: 1 addition & 4 deletions ...el/OutboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import ContactField from './components/ContactField';
import RecipientField from './components/RecipientField';
import SenderField from './components/SenderField';
import { omnichannelQueryKeys } from '../../../../../../../lib/queryKeys';
import { useFormKeyboardSubmit } from '../../hooks/useFormKeyboardSubmit';
import { ContactNotFoundError, ProviderNotFoundError } from '../../utils/errors';

export type RecipientFormData = {
Expand Down Expand Up @@ -175,10 +174,8 @@ const RecipientForm = (props: RecipientFormProps) => {
}
});

const formRef = useFormKeyboardSubmit(() => handleSubmit(submit)(), [submit, handleSubmit]);

return (
<form ref={formRef} id={recipientFormId} onSubmit={handleSubmit(submit)} noValidate>
<form id={recipientFormId} onSubmit={handleSubmit(submit)} noValidate>
<FieldGroup>
<ContactField
control={control}
Expand Down
Loading
Loading