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}`;