Added user invite emails

Author: jzongker

src/components/SendInviteDialog.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, CircularProgress, Alert } from "@mui/material";
+import { ApiHelper } from "@churchapps/apphelper";
+
+interface Props {
+  open: boolean;
+  personName: string;
+  personEmail: string;
+  contextName: string;
+  onClose: () => void;
+}
+
+export const SendInviteDialog: React.FC<Props> = (props) => {
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSend = async () => {
+    setSending(true);
+    setError("");
+    try {
+      await ApiHelper.post("/users/sendInviteEmail", {
+        email: props.personEmail,
+        personName: props.personName,
+        contextName: props.contextName
+      }, "MembershipApi");
+      setSent(true);
+      setTimeout(() => props.onClose(), 1500);
+    } catch (err: any) {
+      setError(err?.message || "Failed to send invite email.");
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!sending) props.onClose();
+  };
+
+  return (
+    <Dialog open={props.open} onClose={handleClose} maxWidth="xs" fullWidth>
+      <DialogTitle>Send Invite Email?</DialogTitle>
+      <DialogContent>
+        {sent ? (
+          <Alert severity="success">Invite email sent to {props.personEmail}.</Alert>
+        ) : (
+          <>
+            {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+            <Typography>
+              <strong>{props.personName}</strong> has been added to <strong>{props.contextName}</strong>.
+              Would you like to send them an email invitation at <strong>{props.personEmail}</strong>?
+            </Typography>
+          </>
+        )}
+      </DialogContent>
+      {!sent && (
+        <DialogActions>
+          <Button onClick={handleClose} disabled={sending}>No Thanks</Button>
+          <Button variant="contained" onClick={handleSend} disabled={sending} startIcon={sending ? <CircularProgress size={16} /> : null}>
+            Send Invite
+          </Button>
+        </DialogActions>
+      )}
+    </Dialog>
+  );
+};

src/components/index.ts

@@ -18,6 +18,7 @@ export { DocChatWidget } from "./docChat";
 // Person Management Components (moved from AppHelper)
 export { PersonAdd } from "./PersonAdd";
 export { CreatePerson } from "./CreatePerson";
+export { SendInviteDialog } from "./SendInviteDialog";
 
 // UI Components
 export * from "./ui";

src/groups/components/GroupMembers.tsx

@@ -20,6 +20,7 @@ import { Link } from "react-router-dom";
 import { Button, FormControl, InputLabel, MenuItem, Select, Table, TableBody, TableCell, TableHead, TableRow, TextField } from "@mui/material";
 import { Send as SendIcon } from "@mui/icons-material";
 import { SmallButton } from "@churchapps/apphelper";
+import { SendInviteDialog } from "../../components";
 
 interface Props {
   group: GroupInterface;
@@ -33,6 +34,7 @@ export const GroupMembers: React.FC<Props> = memo((props) => {
   const [selectedTemplate, setSelectedTemplate] = useState<string>("");
   const [message, setMessage] = useState<string>("");
   const [count, setCount] = useState<number>(0);
+  const [showInviteDialog, setShowInviteDialog] = useState<boolean>(false);
 
   const groupMembers = useQuery<GroupMemberInterface[]>({
     queryKey: [`/groupmembers?groupId=${props.group?.id}`, "MembershipApi"],
@@ -68,13 +70,16 @@ export const GroupMembers: React.FC<Props> = memo((props) => {
     [groupMembers.data]
   );
 
-  const handleAdd = useCallback(() => {
+  const handleAdd = useCallback(async () => {
     if (getMemberByPersonId(props.addedPerson.id) === null) {
       const gm = { groupId: props.group.id, personId: props.addedPerson.id, person: props.addedPerson } as GroupMemberInterface;
-      ApiHelper.post("/groupmembers", [gm], "MembershipApi").then(() => {
-        groupMembers.refetch();
-      });
-      props.addedCallback();
+      await ApiHelper.post("/groupmembers", [gm], "MembershipApi");
+      groupMembers.refetch();
+      if (props.addedPerson.contactInfo?.email) {
+        setShowInviteDialog(true);
+      } else {
+        props.addedCallback();
+      }
     }
   }, [props, getMemberByPersonId, groupMembers]);
 
@@ -287,6 +292,15 @@ export const GroupMembers: React.FC<Props> = memo((props) => {
         </div>
       )}
       {getTable()}
+      {showInviteDialog && props.addedPerson && (
+        <SendInviteDialog
+          open={showInviteDialog}
+          personName={props.addedPerson.name?.display || `${props.addedPerson.name?.first || ""} ${props.addedPerson.name?.last || ""}`.trim()}
+          personEmail={props.addedPerson.contactInfo.email}
+          contextName={props.group.name}
+          onClose={() => { setShowInviteDialog(false); props.addedCallback(); }}
+        />
+      )}
     </DisplayBox>
   );
 });

src/settings/components/UserAdd.tsx

@@ -15,6 +15,7 @@ import {
 } from "@churchapps/apphelper";
 import { AssociatePerson } from "./";
 import { TextField } from "@mui/material";
+import { SendInviteDialog } from "../../components";
 
 interface Props {
   role: RoleInterface;
@@ -37,6 +38,19 @@ export const UserAdd = (props: Props) => {
   const [showNameFields, setShowNameFields] = useState<boolean>(false);
   const [editMode, setEditMode] = useState<boolean>(false);
   const [hasSearched, setHasSearched] = useState<boolean>(false);
+  const [showInviteDialog, setShowInviteDialog] = useState<boolean>(false);
+  const [inviteEmail, setInviteEmail] = useState<string>("");
+  const [invitePersonName, setInvitePersonName] = useState<string>("");
+
+  const showInviteOrFinish = (emailAddr: string, personName: string, isNewUser: boolean) => {
+    if (isNewUser || !emailAddr) {
+      props.updatedFunction();
+    } else {
+      setInviteEmail(emailAddr);
+      setInvitePersonName(personName);
+      setShowInviteDialog(true);
+    }
+  };
 
   const saveExistingUser = async () => {
     if (validate()) {
@@ -48,7 +62,7 @@ export const UserAdd = (props: Props) => {
         person.name.first = firstName;
         person.name.last = lastName;
         await ApiHelper.post("/people", [person], "MembershipApi");
-        props.updatedFunction();
+        showInviteOrFinish(email, firstName, false);
       } catch {
         setErrors([Locale.label("settings.userAdd.errAnother")]);
       }
@@ -60,7 +74,7 @@ export const UserAdd = (props: Props) => {
       const user = await createUserAndToGroup(firstName, lastName, email);
       const person = await createPerson(user.id);
       await linkUserAndPerson(user.id, person.id);
-      props.updatedFunction();
+      showInviteOrFinish(email, firstName, user.isNewUser === true);
     }
   };
 
@@ -85,7 +99,7 @@ export const UserAdd = (props: Props) => {
       setErrors([Locale.label("settings.userAdd.errDiff")]);
     }
 
-    props.updatedFunction();
+    showInviteOrFinish(userEmail, first, user.isNewUser === true);
   };
 
   const handleSave = async () => {
@@ -107,9 +121,9 @@ export const UserAdd = (props: Props) => {
     await ApiHelper.post(`/userchurch?userId=${userId}`, { personId }, "MembershipApi");
   };
 
-  const createUserAndToGroup = async (firstName: string, lastName: string, userEmail: string) => {
+  const createUserAndToGroup = async (firstName: string, lastName: string, userEmail: string): Promise<UserInterface & { isNewUser?: boolean }> => {
     const userPayload: LoadCreateUserRequestInterface = { firstName, lastName, userEmail };
-    const user: UserInterface = await ApiHelper.post("/users/loadOrCreate", userPayload, "MembershipApi");
+    const user: UserInterface & { isNewUser?: boolean } = await ApiHelper.post("/users/loadOrCreate", userPayload, "MembershipApi");
     const roleMember: RoleMemberInterface = { userId: user.id, roleId: props.role.id, churchId: UserHelper.currentUserChurch.church.id };
     await ApiHelper.post("/rolemembers/", [roleMember], "MembershipApi");
 
@@ -157,7 +171,7 @@ export const UserAdd = (props: Props) => {
         setErrors([Locale.label("settings.userAdd.errDiff")]);
         return;
       }
-      props.updatedFunction();
+      showInviteOrFinish(userEmail, first, user.isNewUser === true);
     }
   };
 
@@ -225,6 +239,15 @@ export const UserAdd = (props: Props) => {
       {nameField}
       {emailField}
       {message}
+      {showInviteDialog && (
+        <SendInviteDialog
+          open={showInviteDialog}
+          personName={invitePersonName}
+          personEmail={inviteEmail}
+          contextName={props.role.name}
+          onClose={() => { setShowInviteDialog(false); props.updatedFunction(); }}
+        />
+      )}
     </InputBox>
   );
 };