Implemented input of preview email address

src/features/emails/components/EmailEditor/EmailSettings/PreviewTab.tsx

@@ -1,20 +1,33 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import {
   Alert,
   Box,
   Button,
   CircularProgress,
+  TextField,
   Typography,
 } from '@mui/material';
+import z from 'zod';
+import { ErrorOutlined } from '@mui/icons-material';
 
 import messageIds from 'features/emails/l10n/messageIds';
 import { Msg } from 'core/i18n';
 import useCurrentUser from 'features/user/hooks/useCurrentUser';
 import useSendTestEmail from 'features/emails/hooks/useSendTestEmail';
 
+const emailAddressIsValid = (emailAddress: string): boolean =>
+  z.string().email().safeParse(emailAddress).success;
+
 const PreviewTab: FC = () => {
   const user = useCurrentUser();
   const { emailWasSent, isLoading, reset, sendTestEmail } = useSendTestEmail();
+  const [emailError, setEmailError] = useState(false);
+  const [destinationEmailAddress, setDestinationEmailAddress] = useState('');
+  useEffect(() => {
+    if (user && destinationEmailAddress == '') {
+      setDestinationEmailAddress(user.email);
+    }
+  }, [user?.email]);
 
   if (!user) {
     return null;
@@ -28,7 +41,21 @@ const PreviewTab: FC = () => {
       <Typography>
         <Msg id={messageIds.editor.settings.tabs.preview.sendTo} />
       </Typography>
-      <Typography>{user.email}</Typography>
+      <TextField
+        error={emailError}
+        onChange={(ev) => setDestinationEmailAddress(ev.target.value)}
+        type="email"
+        value={destinationEmailAddress}
+      />
+      {emailError && (
+        <Alert color="error" icon={<ErrorOutlined />}>
+          <Typography>
+            <Msg
+              id={messageIds.editor.settings.tabs.preview.invalidEmailAddress}
+            />
+          </Typography>
+        </Alert>
+      )}
       {emailWasSent && (
         <Alert color="success">
           <Typography mb={2}>
@@ -47,7 +74,12 @@ const PreviewTab: FC = () => {
       {!emailWasSent && (
         <Button
           onClick={() => {
-            sendTestEmail();
+            const emailValid = emailAddressIsValid(destinationEmailAddress);
+            setEmailError(!emailValid);
+            if (!emailValid) {
+              return;
+            }
+            sendTestEmail({ ...user, email: destinationEmailAddress });
           }}
           variant="contained"
         >

src/features/emails/hooks/useSendTestEmail.ts

@@ -1,20 +1,13 @@
 import { useState } from 'react';
 
-import useUser from 'core/hooks/useUser';
 import { useApiClient, useNumericRouteParams } from 'core/hooks';
+import { ZetkinUser } from '../../../utils/types/zetkin';
 
 export default function useSendTestEmail() {
   const apiClient = useApiClient();
   const [isLoading, setIsLoading] = useState(false);
   const [emailWasSent, setEmailWasSent] = useState(false);
 
-  // TODO: Get these as props instead
-  const user = useUser();
-  if (!user) {
-    // This should never happen on pages where this hook is used
-    throw new Error('Sending test email only works for signed in users');
-  }
-
   const { emailId, orgId } = useNumericRouteParams();
 
   return {
@@ -23,14 +16,14 @@ export default function useSendTestEmail() {
     reset: () => {
       setEmailWasSent(false);
     },
-    sendTestEmail: async () => {
+    sendTestEmail: async (recipient: ZetkinUser) => {
       setIsLoading(true);
       await apiClient.post(`/api/orgs/${orgId}/emails/${emailId}/preview`, {
         recipients: [
           {
-            email: user.email,
-            first_name: user.first_name,
-            last_name: user.last_name,
+            email: recipient.email,
+            first_name: recipient.first_name,
+            last_name: recipient.last_name,
           },
         ],
       });

src/features/emails/l10n/messageIds.ts

@@ -44,6 +44,7 @@ export default makeMessages('feat.emails', {
           instructions: m(
             'Here you can send this email to yourself to preview what it will look like for the recipients. '
           ),
+          invalidEmailAddress: m('This is not a valid email address'),
           okButton: m('OK!'),
           sendButton: m('Send'),
           sendTo: m('The email will be sent to this address:'),