Chore: Convert Mailer to TS

apps/meteor/client/contexts/ServerContext/methods.ts

@@ -128,7 +128,7 @@ export type ServerMethods = {
 	'livechat:saveTrigger': (...args: any[]) => any;
 	'livechat:saveUnit': (...args: any[]) => any;
 	'livechat:webhookTest': (...args: any[]) => any;
-	'Mailer.sendMail': (...args: any[]) => any;
+	'Mailer.sendMail': (from: string, subject: string, body: string, dryrun: boolean, query: string) => any;
 	'muteUserInRoom': (...args: any[]) => any;
 	'personalAccessTokens:generateToken': (...args: any[]) => any;
 	'personalAccessTokens:regenerateToken': (...args: any[]) => any;

apps/meteor/client/views/admin/mailer/Mailer.js → apps/meteor/client/views/admin/mailer/Mailer.tsx

@@ -1,17 +1,22 @@
 import { TextInput, TextAreaInput, Field, FieldGroup, CheckBox, Button, Icon, ButtonGroup } from '@rocket.chat/fuselage';
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, SyntheticEvent } from 'react';
 
 import { validateEmail } from '../../../../lib/emailValidator';
 import { isJSON } from '../../../../lib/utils/isJSON';
 import Page from '../../../components/Page';
 import { useTranslation } from '../../../contexts/TranslationContext';
+import { sendMailObject } from './MailerRoute';
 
-export function Mailer({ sendMail = () => {} }) {
+type MailerProps = {
+	sendMail: ({ fromEmail, subject, emailBody, dryRun, query }: sendMailObject) => void;
+};
+
+export function Mailer({ sendMail }: MailerProps) {
 	const t = useTranslation();
 
-	const [fromEmail, setFromEmail] = useState({ value: '' });
+	const [fromEmail, setFromEmail] = useState<{ value: string; error?: string }>({ value: '' });
 	const [dryRun, setDryRun] = useState(false);
-	const [query, setQuery] = useState({ value: '' });
+	const [query, setQuery] = useState<{ value: string; error?: string }>({ value: '' });
 	const [subject, setSubject] = useState('');
 	const [emailBody, setEmailBody] = useState('');
 
@@ -40,10 +45,10 @@ export function Mailer({ sendMail = () => {} }) {
 								placeholder={t('Type_your_email')}
 								value={fromEmail.value}
 								error={fromEmail.error}
-								onChange={(e) => {
+								onChange={(e: SyntheticEvent<HTMLInputElement>) => {
 									setFromEmail({
 										value: e.currentTarget.value,
-										error: !validateEmail(e.currentTarget.value) ? t('Invalid_Email') : undefined,
+										error: !validateEmail(e.currentTarget.value) ? t('Invalid_email') : undefined,
 									});
 								}}
 							/>
@@ -63,7 +68,7 @@ export function Mailer({ sendMail = () => {} }) {
 								id='query'
 								value={query.value}
 								error={query.error}
-								onChange={(e) => {
+								onChange={(e: SyntheticEvent<HTMLInputElement>) => {
 									setQuery({
 										value: e.currentTarget.value,
 										error: e.currentTarget.value && !isJSON(e.currentTarget.value) ? t('Invalid_JSON') : undefined,
@@ -78,9 +83,8 @@ export function Mailer({ sendMail = () => {} }) {
 						<Field.Row>
 							<TextInput
 								id='subject'
-								value={subject.value}
-								error={subject.error}
-								onChange={(e) => {
+								value={subject}
+								onChange={(e: SyntheticEvent<HTMLInputElement>) => {
 									setSubject(e.currentTarget.value);
 								}}
 							/>
@@ -89,7 +93,12 @@ export function Mailer({ sendMail = () => {} }) {
 					<Field>
 						<Field.Label>{t('Email_body')}</Field.Label>
 						<Field.Row>
-							<TextAreaInput id='emailBody' rows={10} value={emailBody} onChange={(e) => setEmailBody(e.currentTarget.value)} />
+							<TextAreaInput
+								id='emailBody'
+								rows={10}
+								value={emailBody}
+								onChange={(e: SyntheticEvent<HTMLInputElement>) => setEmailBody(e.currentTarget.value)}
+							/>
 						</Field.Row>
 						<Field.Hint dangerouslySetInnerHTML={{ __html: t('Mailer_body_tags') }} />
 					</Field>

apps/meteor/client/views/admin/mailer/MailerRoute.js → apps/meteor/client/views/admin/mailer/MailerRoute.tsx

@@ -7,7 +7,17 @@ import { useTranslation } from '../../../contexts/TranslationContext';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import { Mailer } from './Mailer';
 
-const useSendMail = () => {
+export type sendMailObject = {
+	fromEmail: { value: string; error?: string };
+	subject: string;
+	emailBody: string;
+	dryRun: boolean;
+	query: { value: string; error?: string };
+};
+
+type useSendMailType = () => ({ fromEmail, subject, emailBody, dryRun, query }: sendMailObject) => void;
+
+const useSendMail: useSendMailType = () => {
 	const meteorSendMail = useMethod('Mailer.sendMail');
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -20,7 +30,7 @@ const useSendMail = () => {
 			});
 			return;
 		}
-		if (fromEmail.error || fromEmail.length < 1) {
+		if (fromEmail.error || fromEmail.value.length < 1) {
 			dispatchToastMessage({
 				type: 'error',
 				message: t('error-invalid-from-address'),

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -2354,6 +2354,7 @@
   "Invalid_setting_s": "Invalid setting: %s",
   "Invalid_two_factor_code": "Invalid two factor code",
   "Invalid_username": "The username entered is invalid",
+  "Invalid_JSON": "Invalid JSON",
   "invisible": "invisible",
   "Invisible": "Invisible",
   "Invitation": "Invitation",
@@ -4994,4 +4995,4 @@
   "onboarding.form.standaloneServerForm.servicesUnavailable": "Some of the services will be unavailable or will require manual setup",
   "onboarding.form.standaloneServerForm.publishOwnApp": "In order to send push notitications you need to compile and publish your own app to Google Play and App Store",
   "onboarding.form.standaloneServerForm.manuallyIntegrate": "Need to manually integrate with external services"
-}
+}