feat: add canned responses to message review

libs/spoke-codegen/src/graphql/canned-responses.graphql

@@ -0,0 +1,14 @@
+fragment CannedResponseInfo on CannedResponse {
+  id
+  title
+  text
+}
+
+query GetCampaignCannedResponses($campaignId: String!) {
+  campaign(id: $campaignId) {
+    id
+    cannedResponses {
+      ...CannedResponseInfo
+    }
+  }
+}

src/api/campaign.ts

@@ -220,7 +220,7 @@ export const schema = `
     hasUnsentInitialMessages: Boolean
     hasUnhandledMessages: Boolean
     customFields: [String]
-    cannedResponses(userId: String): [CannedResponse]
+    cannedResponses(userId: String): [CannedResponse!]!
     stats: CampaignStats,
     pendingJobs(jobTypes: [String]): [JobRequest]!
     datawarehouseAvailable: Boolean

src/api/canned-response.ts

@@ -23,9 +23,9 @@ export const schema = `
   }
 
   type CannedResponse {
-    id: ID
-    title: String
-    text: String
+    id: ID!
+    title: String!
+    text: String!
     isUserCreated: Boolean
   }
 `;

src/components/CannedResponseMenu/index.tsx

@@ -0,0 +1,62 @@
+import ListItemText from "@material-ui/core/ListItemText";
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import { useGetCampaignCannedResponsesQuery } from "@spoke/spoke-codegen";
+import React from "react";
+
+interface CannedResponseMenuProps {
+  anchorEl?: Element;
+  campaignId?: string;
+  onSelectCannedResponse?: (script: string) => Promise<void> | void;
+  onRequestClose?: () => Promise<void> | void;
+}
+
+const CannedResponseMenu: React.FC<CannedResponseMenuProps> = (props) => {
+  const { campaignId, anchorEl } = props;
+  const { data, loading, error } = useGetCampaignCannedResponsesQuery({
+    variables: { campaignId: campaignId! },
+    skip: campaignId === undefined
+  });
+
+  const handleOnClickFactory = (script: string) => () =>
+    props.onSelectCannedResponse?.(script);
+
+  const cannedResponses = data?.campaign?.cannedResponses ?? [];
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      keepMounted
+      open={Boolean(anchorEl)}
+      onClose={props?.onRequestClose}
+    >
+      {loading && (
+        <MenuItem disabled>
+          <ListItemText primary="Loading..." />
+        </MenuItem>
+      )}
+      {error && (
+        <MenuItem disabled>
+          <ListItemText primary={`Error: ${error.message}`} />
+        </MenuItem>
+      )}
+      {cannedResponses.length === 0 && (
+        <MenuItem disabled>
+          <ListItemText primary="No canned responses for this campaign" />
+        </MenuItem>
+      )}
+      {cannedResponses.map((response) => {
+        return (
+          <MenuItem
+            key={response.id}
+            onClick={handleOnClickFactory(response.text)}
+          >
+            <ListItemText primary={response.title} secondary={response.text} />
+          </MenuItem>
+        );
+      })}
+    </Menu>
+  );
+};
+
+export default CannedResponseMenu;

src/components/IncomingMessageList/MessageColumn/MessageResponse.tsx

@@ -18,12 +18,10 @@ import SpokeFormField from "../../forms/SpokeFormField";
 import MessageLengthInfo from "../../MessageLengthInfo";
 import SendButton from "../../SendButton";
 
-interface MessageFormValue {
-  messageText: string;
-}
-
 interface InnerProps {
   conversation: Conversation;
+  value?: string;
+  onChange?: (value: string) => Promise<void> | void;
   messagesChanged(messages: Message[]): Promise<void> | void;
 }
 
@@ -39,14 +37,12 @@ interface HocProps {
 interface Props extends InnerProps, HocProps {}
 
 interface State {
-  messageText: string;
   isSending: boolean;
   sendError: string;
 }
 
 class MessageResponse extends Component<Props, State> {
   state: State = {
-    messageText: "",
     isSending: false,
     sendError: ""
   };
@@ -65,7 +61,7 @@ class MessageResponse extends Component<Props, State> {
   };
 
   handleMessageFormChange = ({ messageText }: MessageFormValue) =>
-    this.setState({ messageText });
+    this.props.onChange?.(messageText);
 
   handleMessageFormSubmit = async ({ messageText }: MessageFormValue) => {
     const { contact } = this.props.conversation;
@@ -82,7 +78,7 @@ class MessageResponse extends Component<Props, State> {
       );
       const { messages } = response.data.sendMessage;
       this.props.messagesChanged(messages);
-      this.setState({ messageText: "" });
+      this.props.onChange?.("");
     } catch (e) {
       this.setState({ sendError: e.message });
     } finally {
@@ -106,8 +102,8 @@ class MessageResponse extends Component<Props, State> {
         .max(window.MAX_MESSAGE_LENGTH)
     });
 
-    const { messageText, isSending } = this.state;
-    const isSendDisabled = isSending || messageText.trim() === "";
+    const { isSending } = this.state;
+    const isSendDisabled = isSending || this.props.value?.trim() === "";
 
     const errorActions = [
       <FlatButton
@@ -125,7 +121,7 @@ class MessageResponse extends Component<Props, State> {
             this.messageForm = ref;
           }}
           schema={messageSchema}
-          value={{ messageText: this.state.messageText }}
+          value={{ messageText: this.props.value ?? "" }}
           onSubmit={this.handleMessageFormSubmit}
           onChange={this.handleMessageFormChange}
         >
@@ -140,7 +136,7 @@ class MessageResponse extends Component<Props, State> {
                 rowsMax={6}
                 style={{ flexGrow: "1" }}
               />
-              <MessageLengthInfo messageText={messageText} />
+              <MessageLengthInfo messageText={this.props.value} />
             </div>
             <SendButton
               threeClickEnabled={false}

src/components/IncomingMessageList/MessageColumn/index.tsx

@@ -1,9 +1,12 @@
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
 import {
   ConversationInfoFragment,
   ConversationMessageFragment
 } from "@spoke/spoke-codegen";
 import isNil from "lodash/isNil";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import CannedResponseMenu from "src/components/CannedResponseMenu";
 
 import MessageList from "./MessageList";
 import MessageOptOut from "./MessageOptOut";
@@ -17,6 +20,8 @@ const styles: Record<string, React.CSSProperties> = {
   }
 };
 
+type ClickButtonHandler = React.MouseEventHandler<HTMLButtonElement>;
+
 interface Props {
   organizationId: string;
   conversation: ConversationInfoFragment;
@@ -26,6 +31,8 @@ const MessageColumn: React.FC<Props> = (props) => {
   const { organizationId, conversation } = props;
   const { contact } = conversation;
 
+  const [messageText, setMessageText] = useState("");
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
   const [isOptedOut, setIsOptedOut] = useState(
     !isNil(conversation.contact.optOut?.cell)
   );
@@ -36,22 +43,62 @@ const MessageColumn: React.FC<Props> = (props) => {
     setMessages(conversation.contact.messages);
   }, [setMessages]);
 
+  const handleOpenCannedResponse: ClickButtonHandler = useCallback(
+    (event) => {
+      setAnchorEl(event.currentTarget);
+    },
+    [setAnchorEl]
+  );
+
+  const handleScriptSelected = useCallback(
+    (script: string) => {
+      setAnchorEl(null);
+      setMessageText(script);
+    },
+    [setAnchorEl]
+  );
+
+  const handleRequestClose = useCallback(() => setAnchorEl(null), [
+    setAnchorEl
+  ]);
+
   return (
-    <div style={styles.container}>
-      <h4>Messages</h4>
-      <MessageList messages={messages} organizationId={organizationId} />
-      {!isOptedOut && (
-        <MessageResponse
-          conversation={conversation}
-          messagesChanged={setMessages}
-        />
-      )}
-      <MessageOptOut
-        contact={contact}
-        isOptedOut={isOptedOut}
-        optOutChanged={setIsOptedOut}
+    <>
+      <div style={styles.container}>
+        <h4>Messages</h4>
+        <MessageList messages={messages} organizationId={organizationId} />
+        {!isOptedOut && (
+          <MessageResponse
+            value={messageText}
+            conversation={conversation}
+            messagesChanged={setMessages}
+            onChange={setMessageText}
+          />
+        )}
+        <Grid container spacing={2} justify="flex-end">
+          <Grid item>
+            <MessageOptOut
+              contact={contact}
+              isOptedOut={isOptedOut}
+              optOutChanged={setIsOptedOut}
+            />
+          </Grid>
+          {!isOptedOut && (
+            <Grid item>
+              <Button variant="contained" onClick={handleOpenCannedResponse}>
+                Canned Responses
+              </Button>
+            </Grid>
+          )}
+        </Grid>
+      </div>
+      <CannedResponseMenu
+        campaignId={conversation.campaign.id ?? undefined}
+        anchorEl={anchorEl ?? undefined}
+        onSelectCannedResponse={handleScriptSelected}
+        onRequestClose={handleRequestClose}
       />
-    </div>
+    </>
   );
 };