add button to copy emails from view ticketing page (#115)

Author: devksingh4

src/ui/pages/tickets/ViewTickets.page.tsx

@@ -45,6 +45,12 @@ const getTicketStatus = (
   return { status: 'unfulfilled', color: 'orange' };
 };
 
+enum TicketsCopyMode {
+  ALL,
+  FULFILLED,
+  UNFULFILLED,
+}
+
 const ViewTicketsPage: React.FC = () => {
   const { eventId } = useParams();
   const [allTickets, setAllTickets] = useState<TicketEntry[]>([]);
@@ -57,6 +63,38 @@ const ViewTicketsPage: React.FC = () => {
   const [pageSize, setPageSize] = useState<string>('10');
   const pageSizeOptions = ['10', '25', '50', '100'];
 
+  const copyEmails = (mode: TicketsCopyMode) => {
+    try {
+      let emailsToCopy: string[] = [];
+      let copyModeHumanString = '';
+      switch (mode) {
+        case TicketsCopyMode.ALL:
+          emailsToCopy = allTickets.map((x) => x.purchaserData.email);
+          copyModeHumanString = 'All';
+          break;
+        case TicketsCopyMode.FULFILLED:
+          emailsToCopy = allTickets.filter((x) => x.fulfilled).map((x) => x.purchaserData.email);
+          copyModeHumanString = 'Fulfilled';
+          break;
+        case TicketsCopyMode.UNFULFILLED:
+          emailsToCopy = allTickets.filter((x) => !x.fulfilled).map((x) => x.purchaserData.email);
+          copyModeHumanString = 'Unfulfilled';
+          break;
+      }
+      emailsToCopy = [...new Set(emailsToCopy)];
+      navigator.clipboard.writeText(emailsToCopy.join(';'));
+      notifications.show({
+        message: `${copyModeHumanString} emails copied!`,
+      });
+    } catch (e) {
+      notifications.show({
+        title: 'Failed to copy emails',
+        message: 'Please try again or contact support.',
+        color: 'red',
+      });
+    }
+  };
+
   async function checkInUser(ticket: TicketEntry) {
     try {
       const response = await api.post(`/api/v1/tickets/checkIn`, {
@@ -119,8 +157,30 @@ const ViewTicketsPage: React.FC = () => {
   return (
     <AuthGuard resourceDef={{ service: 'core', validRoles: [AppRoles.TICKETS_MANAGER] }}>
       <Title order={2}>View Tickets/Merch Sales</Title>
+      <Group mt="md" mb="md">
+        <Button
+          onClick={() => {
+            copyEmails(TicketsCopyMode.ALL);
+          }}
+        >
+          Copy All Emails
+        </Button>
+        <Button
+          onClick={() => {
+            copyEmails(TicketsCopyMode.FULFILLED);
+          }}
+        >
+          Copy Fulfilled Emails
+        </Button>
+        <Button
+          onClick={() => {
+            copyEmails(TicketsCopyMode.UNFULFILLED);
+          }}
+        >
+          Copy Unfulfilled Emails
+        </Button>
+      </Group>
       <div>
-        <br />
         <Title order={4}>{pluralize('item', totalQuantitySold, true)} sold</Title>
         <Table>
           <Table.Thead>