Add In-Reply-To to Email Workflow Node (#18641)

Co-authored-by: github-actions <github-actions@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/workflow/types/EmailFormData.ts

@@ -9,4 +9,5 @@ export type EmailFormData = {
   subject: string;
   body: string;
   files: WorkflowAttachment[];
+  inReplyTo: string;
 };

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionEmailBase.tsx

@@ -75,12 +75,14 @@ export const WorkflowEditActionEmailBase = ({
   const [visibleAdvancedFields, setVisibleAdvancedFields] = useState<{
     cc: boolean;
     bcc: boolean;
+    inReplyTo: boolean;
   }>(() => {
     const inputRecipients = action.settings.input.recipients;
 
     return {
       cc: Boolean(inputRecipients?.cc),
       bcc: Boolean(inputRecipients?.bcc),
+      inReplyTo: Boolean(action.settings.input.inReplyTo),
     };
   });
 
@@ -89,7 +91,9 @@ export const WorkflowEditActionEmailBase = ({
   const advancedOptionsDropdownId = `${action.id}-email-advanced-options`;
 
   const hasAvailableAdvancedOptions =
-    !visibleAdvancedFields.cc || !visibleAdvancedFields.bcc;
+    !visibleAdvancedFields.cc ||
+    !visibleAdvancedFields.bcc ||
+    !visibleAdvancedFields.inReplyTo;
 
   const handleReauthorize = async () => {
     if (!isDefined(missingScopes)) {
@@ -276,6 +280,18 @@ export const WorkflowEditActionEmailBase = ({
               VariablePicker={WorkflowVariablePicker}
             />
           )}
+          {visibleAdvancedFields.inReplyTo && (
+            <FormTextFieldInput
+              label={t`In-Reply-To`}
+              placeholder={t`Enter Message-ID to reply to`}
+              readonly={actionOptions.readonly}
+              defaultValue={formData.inReplyTo}
+              onChange={(value) => {
+                handleFieldChange('inReplyTo', value);
+              }}
+              VariablePicker={WorkflowVariablePicker}
+            />
+          )}
           {!actionOptions.readonly && hasAvailableAdvancedOptions && (
             <Dropdown
               dropdownId={advancedOptionsDropdownId}
@@ -317,6 +333,18 @@ export const WorkflowEditActionEmailBase = ({
                         }}
                       />
                     )}
+                    {!visibleAdvancedFields.inReplyTo && (
+                      <MenuItem
+                        text={t`Add In-Reply-To`}
+                        onClick={() => {
+                          setVisibleAdvancedFields((prev) => ({
+                            ...prev,
+                            inReplyTo: true,
+                          }));
+                          closeDropdown(advancedOptionsDropdownId);
+                        }}
+                      />
+                    )}
                   </DropdownMenuItemsContainer>
                 </DropdownContent>
               }

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionEmailBase.stories.tsx

@@ -32,6 +32,7 @@ const DEFAULT_SEND_EMAIL_ACTION: WorkflowSendEmailAction = {
       subject: '',
       body: '',
       files: [],
+      inReplyTo: '',
     },
     outputSchema: {},
     errorHandlingOptions: {
@@ -62,6 +63,7 @@ const CONFIGURED_SEND_EMAIL_ACTION: WorkflowSendEmailAction = {
       subject: 'Welcome to Twenty!',
       body: 'Dear Tim,\n\nWelcome to Twenty! We are excited to have you on board.\n\nBest regards,\nThe Team',
       files: [],
+      inReplyTo: '',
     },
     outputSchema: {},
     errorHandlingOptions: {
@@ -91,6 +93,7 @@ const DEFAULT_DRAFT_EMAIL_ACTION: WorkflowDraftEmailAction = {
       subject: '',
       body: '',
       files: [],
+      inReplyTo: '',
     },
     outputSchema: {},
     errorHandlingOptions: {

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/hooks/useEmailForm.ts

@@ -28,6 +28,7 @@ export const useEmailForm = ({
       subject: action.settings.input.subject ?? '',
       body: action.settings.input.body ?? '',
       files: action.settings.input.files ?? [],
+      inReplyTo: action.settings.input.inReplyTo ?? '',
     };
   });
 
@@ -46,6 +47,7 @@ export const useEmailForm = ({
           subject: formData.subject,
           body: formData.body,
           files: formData.files,
+          inReplyTo: formData.inReplyTo,
         },
       },
     });