Added functionality to send Email to selected Group of People

client/src/generated/graphql.tsx

@@ -729,6 +729,7 @@ export type DeleteRsvpMutation = {
 
 export type SendEventInviteMutationVariables = Exact<{
   id: Scalars['Int'];
+  emailGroups?: Maybe<Array<string>>;
 }>;
 
 export type SendEventInviteMutation = {
@@ -1892,8 +1893,8 @@ export type DeleteRsvpMutationOptions = Apollo.BaseMutationOptions<
   DeleteRsvpMutationVariables
 >;
 export const SendEventInviteDocument = gql`
-  mutation sendEventInvite($id: Int!) {
-    sendEventInvite(id: $id)
+  mutation sendEventInvite($id: Int!, $emailGroups: [String!]) {
+    sendEventInvite(id: $id, emailGroups: $emailGroups)
   }
 `;
 export type SendEventInviteMutationFn = Apollo.MutationFunction<

client/src/modules/dashboard/Events/components/Actions.tsx

@@ -1,9 +1,10 @@
+import { useDisclosure } from '@chakra-ui/hooks';
 import { Button, HStack } from '@chakra-ui/react';
 import { useConfirm, useConfirmDelete } from 'chakra-confirm';
 import { LinkButton } from 'chakra-next-link';
 import React, { useMemo } from 'react';
-
 import { EVENT, EVENTS } from '../graphql/queries';
+import SendEmailModal from './SendEmailModal';
 import {
   Event,
   useCancelEventMutation,
@@ -17,6 +18,7 @@ interface ActionsProps {
 }
 
 const Actions: React.FC<ActionsProps> = ({ event, onDelete, hideCancel }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const [cancel] = useCancelEventMutation();
   const [remove] = useDeleteEventMutation();
 
@@ -53,6 +55,9 @@ const Actions: React.FC<ActionsProps> = ({ event, onDelete, hideCancel }) => {
     }
   };
 
+  const clickEmailAttendees = () => {
+    onOpen();
+  };
   return (
     <HStack spacing="1">
       <Button size="sm" colorScheme="red" onClick={clickDelete}>
@@ -70,6 +75,10 @@ const Actions: React.FC<ActionsProps> = ({ event, onDelete, hideCancel }) => {
           Cancel
         </Button>
       )}
+      <Button size="sm" colorScheme="blue" onClick={clickEmailAttendees}>
+        Email Attendees
+      </Button>
+      <SendEmailModal onClose={onClose} isOpen={isOpen} eventId={event.id} />
     </HStack>
   );
 };

client/src/modules/dashboard/Events/components/SendEmailModal.tsx

@@ -0,0 +1,114 @@
+import { Button } from '@chakra-ui/button';
+import { Checkbox } from '@chakra-ui/checkbox';
+import { Stack } from '@chakra-ui/layout';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalFooter,
+  ModalOverlay,
+} from '@chakra-ui/modal';
+import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useSendEventInviteMutation } from 'generated/graphql';
+interface SendEmailModalProps {
+  onClose: () => any;
+  isOpen: boolean;
+  eventId: number;
+}
+interface FormInputs {
+  confirmed: boolean;
+  on_waitlist: boolean;
+  canceled: boolean;
+}
+const SendEmailModal: React.FC<SendEmailModalProps> = ({
+  onClose,
+  isOpen,
+  eventId,
+}) => {
+  const {
+    register,
+    getValues,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormInputs>({ defaultValues: { confirmed: true } });
+
+  const atLeastOneChecked = () => {
+    return (
+      getValues('confirmed') ||
+      getValues('on_waitlist') ||
+      getValues('canceled')
+    );
+  };
+
+  const [publish] = useSendEventInviteMutation();
+  const onSubmit = (data: FormInputs) => {
+    const emailGroups = [];
+    if (data.confirmed) {
+      emailGroups.push('confirmed');
+    }
+    if (data.canceled) {
+      emailGroups.push('canceled');
+    }
+    if (data.on_waitlist) {
+      emailGroups.push('on_waitlist');
+    }
+    publish({ variables: { id: eventId, emailGroups: emailGroups } });
+    onClose();
+  };
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Send Email to Attendees</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <form id="sendemail" onSubmit={handleSubmit(onSubmit)}>
+            <label htmlFor="attendees">
+              Who do you want to send the email to?
+            </label>
+            <Stack spacing={10} direction="row">
+              <Checkbox
+                {...register('confirmed', { validate: atLeastOneChecked })}
+              >
+                Confirmed
+              </Checkbox>
+              <Checkbox
+                {...register('on_waitlist', { validate: atLeastOneChecked })}
+              >
+                Waitlist
+              </Checkbox>
+              <Checkbox
+                {...register('canceled', { validate: atLeastOneChecked })}
+              >
+                Cancelled
+              </Checkbox>
+            </Stack>
+          </form>
+          {Object.keys(errors).length == 3 && (
+            <Alert status="error">
+              <AlertIcon />
+              <AlertDescription>
+                Please select at least one checkbox
+              </AlertDescription>
+            </Alert>
+          )}
+        </ModalBody>
+
+        <ModalFooter>
+          <Button colorScheme="teal" mr={3} onClick={onClose}>
+            Close
+          </Button>
+          <Button type="submit" variant="solid" form="sendemail">
+            Send Email
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default SendEmailModal;

server/src/controllers/Events/resolver.ts

@@ -273,17 +273,60 @@ ${venue.postal_code} <br>
   }
 
   @Mutation(() => Boolean)
-  async sendEventInvite(@Arg('id', () => Int) id: number) {
+  async sendEventInvite(
+    @Arg('id', () => Int) id: number,
+    @Arg('emailGroups', () => [String], {
+      nullable: true,
+      defaultValue: ['interested'],
+    })
+    emailGroups: Array<'confirmed' | 'on_waitlist' | 'canceled' | 'interested'>,
+  ) {
     const event = await Event.findOne(id, {
-      relations: ['venue', 'chapter', 'chapter.users', 'chapter.users.user'],
+      relations: [
+        'venue',
+        'chapter',
+        'chapter.users',
+        'chapter.users.user',
+        'rsvps',
+        'rsvps.user',
+      ],
     });
 
     if (!event) throw new Error("Can't find event");
 
     // TODO: the default should probably be to bcc everyone.
-    const addresses = event.chapter.users
-      .filter((role) => role.interested)
-      .map(({ user }) => user.email);
+    const addresses: string[] = [];
+    if (emailGroups.includes('interested')) {
+      const interestedUsers: string[] = event.chapter.users
+        .filter((role) => role.interested)
+        .map(({ user }) => user.email);
+
+      addresses.push(...interestedUsers);
+    }
+    if (emailGroups.includes('on_waitlist')) {
+      const waitlistUsers: string[] = event.rsvps
+        .filter((rsvp) => rsvp.on_waitlist && rsvp.interested)
+        .map(({ user }) => user.email);
+      addresses.push(...waitlistUsers);
+    }
+    if (emailGroups.includes('confirmed')) {
+      const confirmedUsers: string[] = event.rsvps
+        .filter(
+          (rsvp) => !rsvp.on_waitlist && !rsvp.canceled && rsvp.interested,
+        )
+        .map(({ user }) => user.email);
+      addresses.push(...confirmedUsers);
+    }
+    if (emailGroups.includes('canceled')) {
+      const confirmedUsers: string[] = event.rsvps
+        .filter((rsvp) => rsvp.canceled && rsvp.interested)
+        .map(({ user }) => user.email);
+      addresses.push(...confirmedUsers);
+    }
+
+    if (!addresses.length) {
+      return true;
+    }
     const subject = `Invitation to ${event.name}.`;
 
     const chapterURL = `${process.env.CLIENT_LOCATION}/chapters/${event.chapter.id}`;