feat: allow users to add auto reply triggers

libs/gql-schema/interaction-step.ts

@@ -25,5 +25,20 @@ export const schema = `
     createdAt: Date
     interactionSteps: [InteractionStepInput]
   }
+
+  type InteractionStepWithChildren {
+    id: ID!
+    question: Question
+    questionText: String
+    scriptOptions: [String]!
+    answerOption: String
+    parentInteractionId: String
+    autoReplyTokens: [String]
+    isDeleted: Boolean
+    answerActions: String
+    questionResponse(campaignContactId: String): QuestionResponse
+    createdAt: Date!
+    interactionSteps: [InteractionStep]
+  }
 `;
 export default schema;

src/components/forms/GSAutoReplyTokensField.tsx

@@ -0,0 +1,99 @@
+import uniqBy from "lodash/uniqBy";
+import type { KeyboardEventHandler } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import CreatableSelect from "react-select/creatable";
+
+import { optOutTriggers } from "../../lib/opt-out-triggers";
+import type { GSFormFieldProps } from "./GSFormField";
+
+interface GSAutoReplyTokensFieldProps extends GSFormFieldProps {
+  selectedOptions?: Option[];
+  disabled: boolean;
+  onChange: (...args: any[]) => any;
+}
+
+interface Option {
+  readonly label: string;
+  readonly value: string;
+}
+
+const createOption = (label: string) => ({
+  label,
+  value: label
+});
+
+const GSAutoReplyTokensField: React.FC<GSAutoReplyTokensFieldProps> = ({
+  disabled,
+  onChange,
+  value: selectedOptions
+}) => {
+  const initialOptionValue = selectedOptions.map((token: string) =>
+    createOption(token)
+  );
+  const [optionValue, setOptionValue] = useState<readonly Option[]>(
+    initialOptionValue
+  );
+
+  const [inputValue, setInputValue] = useState("");
+  const onChangeValue = optionValue.map((option) => option.value);
+  const initialRender = useRef(true);
+
+  useEffect(() => {
+    if (initialRender.current) initialRender.current = false;
+    else onChange(onChangeValue);
+  }, [optionValue]);
+
+  const handleInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const handleChange = (newValue: Option[]) => {
+    setOptionValue(newValue);
+  };
+
+  const handleKeyDown: KeyboardEventHandler = (event) => {
+    if (!inputValue) return;
+
+    const lowerInputValue = inputValue.toLowerCase().trim();
+    if (optOutTriggers.includes(lowerInputValue)) {
+      setInputValue("");
+      return;
+    }
+    switch (event.key) {
+      /* eslint-disable no-case-declarations */
+      case ",":
+      case "Enter":
+      case "Tab":
+        const newValue = [...optionValue, createOption(lowerInputValue)];
+        const uniqValue = uniqBy(newValue, "value");
+
+        setInputValue("");
+        setOptionValue(uniqValue);
+        event.preventDefault();
+      /* eslint-enable no-case-declarations */
+      // no default
+    }
+  };
+
+  return (
+    <div>
+      <br />
+      Auto Replies
+      <CreatableSelect
+        components={{ DropdownIndicator: null }}
+        inputValue={inputValue}
+        isClearable
+        isMulti
+        menuIsOpen={false}
+        onChange={handleChange}
+        onInputChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder="Words or phrases that Spoke should automatically respond to using this script, separated by commas"
+        value={optionValue}
+        isDisabled={disabled}
+      />
+    </div>
+  );
+};
+
+export default GSAutoReplyTokensField;

src/components/forms/SpokeFormField.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import BaseForm from "react-formal";
 
+import GSAutoReplyTokensField from "./GSAutoReplyTokensField";
 import GSDateField from "./GSDateField";
 import GSPasswordField from "./GSPasswordField";
 import GSScriptField from "./GSScriptField";
@@ -51,6 +52,8 @@ const SpokeFormField = React.forwardRef<unknown, Props>(function Component(
             Input = GSSelectField;
           } else if (type === "password") {
             Input = GSPasswordField;
+          } else if (type === "autoreplytokens") {
+            Input = GSAutoReplyTokensField;
           } else {
             Input = type || GSTextField;
           }

src/containers/AdminCampaignEdit/sections/CampaignInteractionStepsForm/components/InteractionStepCard.tsx

@@ -11,15 +11,14 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import ExpandLess from "@material-ui/icons/ExpandLess";
 import ExpandMore from "@material-ui/icons/ExpandMore";
 import HelpIconOutline from "@material-ui/icons/HelpOutline";
-import type { CampaignVariable } from "@spoke/spoke-codegen";
+import type {
+  CampaignVariable,
+  InteractionStepWithChildren
+} from "@spoke/spoke-codegen";
 import isNil from "lodash/isNil";
 import React, { useCallback, useState } from "react";
 import * as yup from "yup";
 
-import type {
-  InteractionStep,
-  InteractionStepWithChildren
-} from "../../../../../api/interaction-step";
 import { supportsClipboard } from "../../../../../client/lib";
 import GSForm from "../../../../../components/forms/GSForm";
 import SpokeFormField from "../../../../../components/forms/SpokeFormField";
@@ -47,7 +46,8 @@ const interactionStepSchema = yup.object({
   scriptOptions: yup.array(yup.string()),
   questionText: yup.string(),
   answerOption: yup.string(),
-  answerActions: yup.string()
+  answerActions: yup.string(),
+  autoReplyTokens: yup.array(yup.string())
 });
 
 type BlockHandlerFactory = (stepId: string) => () => Promise<void> | void;
@@ -62,7 +62,7 @@ interface Props {
   title?: string;
   disabled?: boolean;
   onFormChange(e: any): void;
-  onCopyBlock(interactionStep: InteractionStep): void;
+  onCopyBlock(interactionStep: InteractionStepWithChildren): void;
   onRequestRootPaste(): void;
   deleteStepFactory: BlockHandlerFactory;
   addStepFactory: BlockHandlerFactory;
@@ -111,7 +111,7 @@ export const InteractionStepCard: React.FC<Props> = (props) => {
   const stepCanHaveChildren = isRootStep || answerOption;
   const isAbleToAddResponse =
     stepHasQuestion && stepHasScript && stepCanHaveChildren;
-  const childStepsLength = childSteps?.length;
+  const childStepsLength = childSteps?.length ?? 0;
 
   const clipboardEnabled = supportsClipboard();
 
@@ -251,6 +251,13 @@ export const InteractionStepCard: React.FC<Props> = (props) => {
               multiLine
               disabled={disabled}
             />
+            {window.ENABLE_AUTO_REPLIES && parentInteractionId && (
+              <SpokeFormField
+                name="autoReplyTokens"
+                type="autoreplytokens"
+                disabled={disabled}
+              />
+            )}
             <SpokeFormField
               {...dataTest("questionText")}
               name="questionText"
@@ -288,26 +295,32 @@ export const InteractionStepCard: React.FC<Props> = (props) => {
         )}
         {expanded &&
           (childSteps ?? [])
-            .filter((is) => !is.isDeleted)
-            .map((childStep) => (
-              <InteractionStepCard
-                key={childStep.id}
-                title={`Question: ${questionText}`}
-                interactionStep={childStep}
-                customFields={customFields}
-                campaignVariables={campaignVariables}
-                integrationSourced={integrationSourced}
-                availableActions={availableActions}
-                hasBlockCopied={hasBlockCopied}
-                disabled={disabled}
-                onFormChange={onFormChange}
-                onCopyBlock={onCopyBlock}
-                onRequestRootPaste={onRequestRootPaste}
-                addStepFactory={addStepFactory}
-                deleteStepFactory={deleteStepFactory}
-                pasteBlockFactory={pasteBlockFactory}
-              />
-            ))}
+            .filter((is) => !is?.isDeleted)
+            .map((childStep) => {
+              if (childStep) {
+                const { __typename, ...childStepWithoutTypename } = childStep;
+                return (
+                  <InteractionStepCard
+                    key={childStep?.id}
+                    title={`Question: ${questionText}`}
+                    interactionStep={childStepWithoutTypename}
+                    customFields={customFields}
+                    campaignVariables={campaignVariables}
+                    integrationSourced={integrationSourced}
+                    availableActions={availableActions}
+                    hasBlockCopied={hasBlockCopied}
+                    disabled={disabled}
+                    onFormChange={onFormChange}
+                    onCopyBlock={onCopyBlock}
+                    onRequestRootPaste={onRequestRootPaste}
+                    addStepFactory={addStepFactory}
+                    deleteStepFactory={deleteStepFactory}
+                    pasteBlockFactory={pasteBlockFactory}
+                  />
+                );
+              }
+              return null;
+            })}
       </div>
     </div>
   );