feat(exports)!: export multiple campaigns

libs/gql-schema/schema.ts

@@ -215,6 +215,11 @@ const rootSchema = `
     vanOptions: ExportForVanInput
   }
 
+    input MultipleCampaignExportInput {
+    campaignIds: [String!]!
+    spokeOptions: ExportForSpokeInput!
+  }
+
   input QuestionResponseSyncConfigInput {
     id: String!
   }
@@ -287,6 +292,7 @@ const rootSchema = `
     copyCampaign(id: String!): Campaign
     copyCampaigns(sourceCampaignId: String!, quantity: Int!, targetOrgId: String): [Campaign!]!
     exportCampaign(options: CampaignExportInput!): JobRequest
+    exportCampaigns(options: MultipleCampaignExportInput!): [JobRequest]
     createCannedResponse(cannedResponse:CannedResponseInput!): CannedResponse
     createOrganization(name: String!, userId: String!, inviteId: String!): Organization
     editOrganization(id: String! input: EditOrganizationInput!): Organization!

libs/spoke-codegen/src/graphql/campaign-stats.graphql

@@ -63,8 +63,22 @@ mutation ExportCampaign($options: CampaignExportInput!) {
   }
 }
 
-mutation CopyCampaigns($templateId: String!, $quantity: Int!, $targetOrgId: String) {
-  copyCampaigns(sourceCampaignId: $templateId, quantity: $quantity, targetOrgId: $targetOrgId) {
+mutation ExportCampaigns($options: MultipleCampaignExportInput!) {
+  exportCampaigns(options: $options) {
+    id
+  }
+}
+
+mutation CopyCampaigns(
+  $templateId: String!
+  $quantity: Int!
+  $targetOrgId: String
+) {
+  copyCampaigns(
+    sourceCampaignId: $templateId
+    quantity: $quantity
+    targetOrgId: $targetOrgId
+  ) {
     id
   }
 }
@@ -82,7 +96,6 @@ query GetCampaignSyncConfigs($campaignId: String!) {
   }
 }
 
-
 query GetSyncTargets($campaignId: String!) {
   campaign(id: $campaignId) {
     id

src/components/ExportCampaignDataSnackbar.tsx

@@ -0,0 +1,30 @@
+import Snackbar from "@material-ui/core/Snackbar";
+import Alert from "@material-ui/lab/Alert";
+import React from "react";
+
+interface Props {
+  open: boolean;
+  errorMessage: string | null;
+  onClose: () => void;
+}
+
+const ExportCampaignDataSnackbar: React.FC<Props> = ({
+  open,
+  errorMessage,
+  onClose
+}) => {
+  return errorMessage ? (
+    <Snackbar open={open} autoHideDuration={5000} onClose={onClose}>
+      <Alert severity="error">{errorMessage}</Alert>
+    </Snackbar>
+  ) : (
+    <Snackbar
+      open={open}
+      message="Exports started - we'll e-mail you when they're done"
+      autoHideDuration={5000}
+      onClose={onClose}
+    />
+  );
+};
+
+export default ExportCampaignDataSnackbar;

src/components/ExportMultipleCampaignDataDialog.tsx

@@ -0,0 +1,140 @@
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Divider from "@material-ui/core/Divider";
+import Typography from "@material-ui/core/Typography";
+import { useExportCampaignsMutation } from "@spoke/spoke-codegen";
+import React, { useState } from "react";
+
+import { CampaignExportModalContent } from "../containers/AdminCampaignStats/components/CampaignExportModal";
+
+export type CampaignDetailsForExport = {
+  id: string;
+  title: string;
+};
+interface Props {
+  campaignDetailsForExport: CampaignDetailsForExport[];
+  open: boolean;
+  onClose: () => void;
+  onError: (errorMessage: string) => void;
+  onComplete(): void;
+}
+
+const ExportMultipleCampaignDataDialog: React.FC<Props> = ({
+  campaignDetailsForExport,
+  open,
+  onClose,
+  onError,
+  onComplete
+}) => {
+  const [exportCampaign, setExportCampaign] = useState<boolean>(true);
+  const [exportMessages, setExportMessages] = useState<boolean>(true);
+  const [exportOptOut, setExportOptOut] = useState<boolean>(false);
+  const [exportFiltered, setExportFiltered] = useState<boolean>(false);
+
+  const [exportCampaignsMutation] = useExportCampaignsMutation();
+
+  const handleChange = (
+    setStateFunction: React.Dispatch<React.SetStateAction<boolean>>
+  ) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStateFunction(event.target.checked);
+  };
+
+  const handleExportClick = async () => {
+    const campaignIds = campaignDetailsForExport.map(
+      (campaign: CampaignDetailsForExport) => campaign.id
+    );
+    const result = await exportCampaignsMutation({
+      variables: {
+        options: {
+          campaignIds,
+          spokeOptions: {
+            campaign: exportCampaign,
+            messages: exportMessages,
+            optOuts: exportOptOut,
+            filteredContacts: exportFiltered
+          }
+        }
+      }
+    });
+    if (result.errors) {
+      const message = result.errors.map((e) => e.message).join(", ");
+      return onError(message);
+    }
+    onComplete();
+  };
+
+  return (
+    <Dialog
+      onClose={onClose}
+      aria-labelledby="export-multiple-campaign-data"
+      open={open}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle id="export-multiple-campaign-data">
+        <Typography variant="h6" style={{ margin: "4px", cursor: "pointer" }}>
+          Export Campaigns
+        </Typography>
+      </DialogTitle>
+      <CampaignExportModalContent
+        exportCampaign={exportCampaign}
+        exportMessages={exportMessages}
+        exportOptOut={exportOptOut}
+        exportFiltered={exportFiltered}
+        handleChange={handleChange}
+        setExportCampaign={setExportCampaign}
+        setExportMessages={setExportMessages}
+        setExportOptOut={setExportOptOut}
+        setExportFiltered={setExportFiltered}
+      />
+      <Divider variant="middle" />
+      <DialogContent>
+        <DialogContentText>
+          <Typography variant="subtitle1" style={{ margin: "4px" }}>
+            Selected campaigns:
+          </Typography>
+          {campaignDetailsForExport.map(
+            (campaign: CampaignDetailsForExport) => {
+              return (
+                <div
+                  key={campaign.id}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    margin: "4px"
+                  }}
+                >
+                  <Typography variant="body1" style={{ margin: "4px" }}>
+                    {campaign.title}
+                  </Typography>
+                  <Typography
+                    variant="body1"
+                    style={{ marginLeft: "4px", color: "#666666" }}
+                  >
+                    ID: {campaign.id}
+                  </Typography>
+                </div>
+              );
+            }
+          )}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          color="primary"
+          disabled={campaignDetailsForExport.length < 1}
+          onClick={handleExportClick}
+        >
+          Export data
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ExportMultipleCampaignDataDialog;