add quick answers

backend/src/controllers/QuickAnswerController.ts

@@ -0,0 +1,117 @@
+import * as Yup from "yup";
+import { Request, Response } from "express";
+import { getIO } from "../libs/socket";
+
+import ListQuickAnswerService from "../services/QuickAnswerService/ListQuickAnswerService";
+import CreateQuickAnswerService from "../services/QuickAnswerService/CreateQuickAnswerService";
+import ShowQuickAnswerService from "../services/QuickAnswerService/ShowQuickAnswerService";
+import UpdateQuickAnswerService from "../services/QuickAnswerService/UpdateQuickAnswerService";
+import DeleteQuickAnswerService from "../services/QuickAnswerService/DeleteQuickAnswerService";
+
+import AppError from "../errors/AppError";
+
+type IndexQuery = {
+  searchParam: string;
+  pageNumber: string;
+};
+
+interface QuickAnswerData {
+  shortcut: string;
+  message: string;
+}
+
+export const index = async (req: Request, res: Response): Promise<Response> => {
+  const { searchParam, pageNumber } = req.query as IndexQuery;
+
+  const { quickAnswers, count, hasMore } = await ListQuickAnswerService({
+    searchParam,
+    pageNumber
+  });
+
+  return res.json({ quickAnswers, count, hasMore });
+};
+
+export const store = async (req: Request, res: Response): Promise<Response> => {
+  const newQuickAnswer: QuickAnswerData = req.body;
+
+  const QuickAnswerSchema = Yup.object().shape({
+    shortcut: Yup.string().required(),
+    message: Yup.string().required()
+  });
+
+  try {
+    await QuickAnswerSchema.validate(newQuickAnswer);
+  } catch (err) {
+    throw new AppError(err.message);
+  }
+
+  const quickAnswer = await CreateQuickAnswerService({
+    ...newQuickAnswer
+  });
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "create",
+    quickAnswer
+  });
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const show = async (req: Request, res: Response): Promise<Response> => {
+  const { quickAnswerId } = req.params;
+
+  const quickAnswer = await ShowQuickAnswerService(quickAnswerId);
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const update = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const quickAnswerData: QuickAnswerData = req.body;
+
+  const schema = Yup.object().shape({
+    shortcut: Yup.string(),
+    message: Yup.string()
+  });
+
+  try {
+    await schema.validate(quickAnswerData);
+  } catch (err) {
+    throw new AppError(err.message);
+  }
+
+  const { quickAnswerId } = req.params;
+
+  const quickAnswer = await UpdateQuickAnswerService({
+    quickAnswerData,
+    quickAnswerId
+  });
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "update",
+    quickAnswer
+  });
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const remove = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { quickAnswerId } = req.params;
+
+  await DeleteQuickAnswerService(quickAnswerId);
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "delete",
+    quickAnswerId
+  });
+
+  return res.status(200).json({ message: "Quick Answer deleted" });
+};

backend/src/database/index.ts

@@ -9,6 +9,7 @@ import Message from "../models/Message";
 import Queue from "../models/Queue";
 import WhatsappQueue from "../models/WhatsappQueue";
 import UserQueue from "../models/UserQueue";
+import QuickAnswer from "../models/QuickAnswer";
 
 // eslint-disable-next-line
 const dbConfig = require("../config/database");
@@ -26,7 +27,8 @@ const models = [
   Setting,
   Queue,
   WhatsappQueue,
-  UserQueue
+  UserQueue,
+  QuickAnswer
 ];
 
 sequelize.addModels(models);

backend/src/database/migrations/20210818102605-create-quickAnswers.ts

@@ -0,0 +1,34 @@
+import { QueryInterface, DataTypes } from "sequelize";
+
+module.exports = {
+  up: (queryInterface: QueryInterface) => {
+    return queryInterface.createTable("quickAnswers", {
+      id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+      },
+      shortcut: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      },
+      message: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      },
+      createdAt: {
+        type: DataTypes.DATE,
+        allowNull: false
+      },
+      updatedAt: {
+        type: DataTypes.DATE,
+        allowNull: false
+      }
+    });
+  },
+
+  down: (queryInterface: QueryInterface) => {
+    return queryInterface.dropTable("quickAnswers");
+  }
+};

backend/src/models/QuickAnswer.ts

@@ -0,0 +1,32 @@
+import {
+  Table,
+  Column,
+  DataType,
+  CreatedAt,
+  UpdatedAt,
+  Model,
+  PrimaryKey,
+  AutoIncrement
+} from "sequelize-typescript";
+
+@Table
+class QuickAnswer extends Model<QuickAnswer> {
+  @PrimaryKey
+  @AutoIncrement
+  @Column
+  id: number;
+
+  @Column(DataType.TEXT)
+  shortcut: string;
+
+  @Column(DataType.TEXT)
+  message: string;
+
+  @CreatedAt
+  createdAt: Date;
+
+  @UpdatedAt
+  updatedAt: Date;
+}
+
+export default QuickAnswer;

backend/src/routes/index.ts

@@ -9,6 +9,7 @@ import whatsappRoutes from "./whatsappRoutes";
 import messageRoutes from "./messageRoutes";
 import whatsappSessionRoutes from "./whatsappSessionRoutes";
 import queueRoutes from "./queueRoutes";
+import quickAnswerRoutes from "./quickAnswerRoutes";
 
 const routes = Router();
 
@@ -22,5 +23,6 @@ routes.use(messageRoutes);
 routes.use(messageRoutes);
 routes.use(whatsappSessionRoutes);
 routes.use(queueRoutes);
+routes.use(quickAnswerRoutes);
 
 export default routes;

backend/src/routes/quickAnswerRoutes.ts

@@ -0,0 +1,30 @@
+import express from "express";
+import isAuth from "../middleware/isAuth";
+
+import * as QuickAnswerController from "../controllers/QuickAnswerController";
+
+const quickAnswerRoutes = express.Router();
+
+quickAnswerRoutes.get("/quickAnswers", isAuth, QuickAnswerController.index);
+
+quickAnswerRoutes.get(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.show
+);
+
+quickAnswerRoutes.post("/quickAnswers", isAuth, QuickAnswerController.store);
+
+quickAnswerRoutes.put(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.update
+);
+
+quickAnswerRoutes.delete(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.remove
+);
+
+export default quickAnswerRoutes;

backend/src/services/QuickAnswerService/CreateQuickAnswerService.ts

@@ -0,0 +1,26 @@
+import AppError from "../../errors/AppError";
+import QuickAnswer from "../../models/QuickAnswer";
+
+interface Request {
+  shortcut: string;
+  message: string;
+}
+
+const CreateQuickAnswerService = async ({
+  shortcut,
+  message
+}: Request): Promise<QuickAnswer> => {
+  const nameExists = await QuickAnswer.findOne({
+    where: { shortcut }
+  });
+
+  if (nameExists) {
+    throw new AppError("ERR__SHORTCUT_DUPLICATED");
+  }
+
+  const quickAnswer = await QuickAnswer.create({ shortcut, message });
+
+  return quickAnswer;
+};
+
+export default CreateQuickAnswerService;

backend/src/services/QuickAnswerService/DeleteQuickAnswerService.ts

@@ -0,0 +1,16 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+const DeleteQuickAnswerService = async (id: string): Promise<void> => {
+  const quickAnswer = await QuickAnswer.findOne({
+    where: { id }
+  });
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWER_FOUND", 404);
+  }
+
+  await quickAnswer.destroy();
+};
+
+export default DeleteQuickAnswerService;

backend/src/services/QuickAnswerService/ListQuickAnswerService.ts

@@ -0,0 +1,45 @@
+import { Sequelize } from "sequelize";
+import QuickAnswer from "../../models/QuickAnswer";
+
+interface Request {
+  searchParam?: string;
+  pageNumber?: string;
+}
+
+interface Response {
+  quickAnswers: QuickAnswer[];
+  count: number;
+  hasMore: boolean;
+}
+
+const ListQuickAnswerService = async ({
+  searchParam = "",
+  pageNumber = "1"
+}: Request): Promise<Response> => {
+  const whereCondition = {
+    message: Sequelize.where(
+      Sequelize.fn("LOWER", Sequelize.col("message")),
+      "LIKE",
+      `%${searchParam.toLowerCase().trim()}%`
+    )
+  };
+  const limit = 20;
+  const offset = limit * (+pageNumber - 1);
+
+  const { count, rows: quickAnswers } = await QuickAnswer.findAndCountAll({
+    where: whereCondition,
+    limit,
+    offset,
+    order: [["message", "ASC"]]
+  });
+
+  const hasMore = count > offset + quickAnswers.length;
+
+  return {
+    quickAnswers,
+    count,
+    hasMore
+  };
+};
+
+export default ListQuickAnswerService;

backend/src/services/QuickAnswerService/ShowQuickAnswerService.ts

@@ -0,0 +1,14 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+const ShowQuickAnswerService = async (id: string): Promise<QuickAnswer> => {
+  const quickAnswer = await QuickAnswer.findByPk(id);
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWERS_FOUND", 404);
+  }
+
+  return quickAnswer;
+};
+
+export default ShowQuickAnswerService;

backend/src/services/QuickAnswerService/UpdateQuickAnswerService.ts

@@ -0,0 +1,40 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+interface QuickAnswerData {
+  shortcut?: string;
+  message?: string;
+}
+
+interface Request {
+  quickAnswerData: QuickAnswerData;
+  quickAnswerId: string;
+}
+
+const UpdateQuickAnswerService = async ({
+  quickAnswerData,
+  quickAnswerId
+}: Request): Promise<QuickAnswer> => {
+  const { shortcut, message } = quickAnswerData;
+
+  const quickAnswer = await QuickAnswer.findOne({
+    where: { id: quickAnswerId },
+    attributes: ["id", "shortcut", "message"]
+  });
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWERS_FOUND", 404);
+  }
+  await quickAnswer.update({
+    shortcut,
+    message
+  });
+
+  await quickAnswer.reload({
+    attributes: ["id", "shortcut", "message"]
+  });
+
+  return quickAnswer;
+};
+
+export default UpdateQuickAnswerService;

frontend/src/components/MessageInput/index.js

@@ -20,6 +20,7 @@ import MicIcon from "@material-ui/icons/Mic";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
 import HighlightOffIcon from "@material-ui/icons/HighlightOff";
 import { FormControlLabel, Switch } from "@material-ui/core";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 
 import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
@@ -31,7 +32,7 @@ import toastError from "../../errors/toastError";
 
 const Mp3Recorder = new MicRecorder({ bitRate: 128 });
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainWrapper: {
     background: "#eee",
     display: "flex",
@@ -161,6 +162,30 @@ const useStyles = makeStyles(theme => ({
     color: "#6bcbef",
     fontWeight: 500,
   },
+  messageQuickAnswersWrapper: {
+    margin: 0,
+    position: "absolute",
+    bottom: "50px",
+    background: "#ffffff",
+    padding: "2px",
+    border: "1px solid #CCC",
+    left: 0,
+    width: "100%",
+    "& li": {
+      listStyle: "none",
+      "& a": {
+        display: "block",
+        padding: "8px",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        maxHeight: "32px",
+        "&:hover": {
+          background: "#F1F1F1",
+          cursor: "pointer",
+        },
+      },
+    },
+  },
 }));
 
 const MessageInput = ({ ticketStatus }) => {
@@ -172,10 +197,11 @@ const MessageInput = ({ ticketStatus }) => {
   const [showEmoji, setShowEmoji] = useState(false);
   const [loading, setLoading] = useState(false);
   const [recording, setRecording] = useState(false);
+  const [quickAnswers, setQuickAnswer] = useState([]);
+  const [typeBar, setTypeBar] = useState(false);
   const inputRef = useRef();
-	const { setReplyingMessage, replyingMessage } = useContext(
+  const { setReplyingMessage, replyingMessage } =
-		ReplyMessageContext
+    useContext(ReplyMessageContext);
-	);
   const { user } = useContext(AuthContext);
 
   const [signMessage, setSignMessage] = useLocalStorage("signOption", true);
@@ -194,16 +220,22 @@ const MessageInput = ({ ticketStatus }) => {
     };
   }, [ticketId, setReplyingMessage]);
 
-	const handleChangeInput = e => {
+  const handleChangeInput = (e) => {
     setInputMessage(e.target.value);
+    handleLoadQuickAnswer(e.target.value);
   };
 
-	const handleAddEmoji = e => {
+  const handleQuickAnswersClick = (value) => {
+    setInputMessage(value);
+    setTypeBar(false);
+  };
+
+  const handleAddEmoji = (e) => {
     let emoji = e.native;
-		setInputMessage(prevState => prevState + emoji);
+    setInputMessage((prevState) => prevState + emoji);
   };
 
-	const handleChangeMedias = e => {
+  const handleChangeMedias = (e) => {
     if (!e.target.files) {
       return;
     }
@@ -212,19 +244,19 @@ const MessageInput = ({ ticketStatus }) => {
     setMedias(selectedMedias);
   };
 
-	const handleInputPaste = e => {
+  const handleInputPaste = (e) => {
     if (e.clipboardData.files[0]) {
       setMedias([e.clipboardData.files[0]]);
     }
   };
 
-	const handleUploadMedia = async e => {
+  const handleUploadMedia = async (e) => {
     setLoading(true);
     e.preventDefault();
 
     const formData = new FormData();
     formData.append("fromMe", true);
-		medias.forEach(media => {
+    medias.forEach((media) => {
       formData.append("medias", media);
       formData.append("body", media.name);
     });
@@ -277,6 +309,26 @@ const MessageInput = ({ ticketStatus }) => {
     }
   };
 
+  const handleLoadQuickAnswer = async (value) => {
+    if (value && value.indexOf("/") === 0) {
+      try {
+        const { data } = await api.get("/quickAnswers/", {
+          params: { searchParam: inputMessage.substring(1) },
+        });
+        setQuickAnswer(data.quickAnswers);
+        if (data.quickAnswers.length > 0) {
+          setTypeBar(true);
+        } else {
+          setTypeBar(false);
+        }
+      } catch (err) {
+        setTypeBar(false);
+      }
+    } else {
+      setTypeBar(false);
+    }
+  };
+
   const handleUploadAudio = async () => {
     setLoading(true);
     try {
@@ -311,7 +363,7 @@ const MessageInput = ({ ticketStatus }) => {
     }
   };
 
-	const renderReplyingMessage = message => {
+  const renderReplyingMessage = (message) => {
     return (
       <div className={classes.replyginMsgWrapper}>
         <div className={classes.replyginMsgContainer}>
@@ -347,7 +399,7 @@ const MessageInput = ({ ticketStatus }) => {
         <IconButton
           aria-label="cancel-upload"
           component="span"
-					onClick={e => setMedias([])}
+          onClick={(e) => setMedias([])}
         >
           <CancelIcon className={classes.sendMessageIcons} />
         </IconButton>
@@ -381,18 +433,20 @@ const MessageInput = ({ ticketStatus }) => {
             aria-label="emojiPicker"
             component="span"
             disabled={loading || recording || ticketStatus !== "open"}
-						onClick={e => setShowEmoji(prevState => !prevState)}
+            onClick={(e) => setShowEmoji((prevState) => !prevState)}
           >
             <MoodIcon className={classes.sendMessageIcons} />
           </IconButton>
           {showEmoji ? (
             <div className={classes.emojiBox}>
+              <ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
                 <Picker
                   perLine={16}
                   showPreview={false}
                   showSkinTones={false}
                   onSelect={handleAddEmoji}
                 />
+              </ClickAwayListener>
             </div>
           ) : null}
 
@@ -421,7 +475,7 @@ const MessageInput = ({ ticketStatus }) => {
               <Switch
                 size="small"
                 checked={signMessage}
-								onChange={e => {
+                onChange={(e) => {
                   setSignMessage(e.target.checked);
                 }}
                 name="showAllTickets"
@@ -431,7 +485,7 @@ const MessageInput = ({ ticketStatus }) => {
           />
           <div className={classes.messageInputWrapper}>
             <InputBase
-							inputRef={input => {
+              inputRef={(input) => {
                 input && input.focus();
                 input && (inputRef.current = input);
               }}
@@ -446,16 +500,35 @@ const MessageInput = ({ ticketStatus }) => {
               value={inputMessage}
               onChange={handleChangeInput}
               disabled={recording || loading || ticketStatus !== "open"}
-							onPaste={e => {
+              onPaste={(e) => {
                 ticketStatus === "open" && handleInputPaste(e);
               }}
-							onKeyPress={e => {
+              onKeyPress={(e) => {
                 if (loading || e.shiftKey) return;
                 else if (e.key === "Enter") {
                   handleSendMessage();
                 }
               }}
             />
+            {typeBar ? (
+              <ul className={classes.messageQuickAnswersWrapper}>
+                {quickAnswers.map((value, index) => {
+                  return (
+                    <li
+                      className={classes.messageQuickAnswersWrapperItem}
+                      key={index}
+                    >
+                      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                      <a onClick={() => handleQuickAnswersClick(value.message)}>
+                        {`${value.shortcut} - ${value.message}`}
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <div></div>
+            )}
           </div>
           {inputMessage ? (
             <IconButton

frontend/src/components/QuickAnswersModal/index.js

@@ -0,0 +1,222 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+import { toast } from "react-toastify";
+
+import {
+  makeStyles,
+  Button,
+  TextField,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  CircularProgress,
+} from "@material-ui/core";
+import { green } from "@material-ui/core/colors";
+import { i18n } from "../../translate/i18n";
+
+import api from "../../services/api";
+import toastError from "../../errors/toastError";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexWrap: "wrap",
+  },
+  textField: {
+    marginRight: theme.spacing(1),
+    width: "100%",
+  },
+
+  btnWrapper: {
+    position: "relative",
+  },
+
+  buttonProgress: {
+    color: green[500],
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    marginTop: -12,
+    marginLeft: -12,
+  },
+  textQuickAnswerContainer: {
+    width: "100%",
+  },
+}));
+
+const QuickAnswerSchema = Yup.object().shape({
+  shortcut: Yup.string()
+    .min(2, "Too Short!")
+    .max(15, "Too Long!")
+    .required("Required"),
+  message: Yup.string()
+    .min(8, "Too Short!")
+    .max(30000, "Too Long!")
+    .required("Required"),
+});
+
+const QuickAnswersModal = ({
+  open,
+  onClose,
+  quickAnswerId,
+  initialValues,
+  onSave,
+}) => {
+  const classes = useStyles();
+  const isMounted = useRef(true);
+
+  const initialState = {
+    shortcut: "",
+    message: "",
+  };
+
+  const [quickAnswer, setQuickAnswer] = useState(initialState);
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const fetchQuickAnswer = async () => {
+      if (initialValues) {
+        setQuickAnswer((prevState) => {
+          return { ...prevState, ...initialValues };
+        });
+      }
+
+      if (!quickAnswerId) return;
+
+      try {
+        const { data } = await api.get(`/quickAnswers/${quickAnswerId}`);
+        if (isMounted.current) {
+          setQuickAnswer(data);
+        }
+      } catch (err) {
+        toastError(err);
+      }
+    };
+
+    fetchQuickAnswer();
+  }, [quickAnswerId, open, initialValues]);
+
+  const handleClose = () => {
+    onClose();
+    setQuickAnswer(initialState);
+  };
+
+  const handleSaveQuickAnswer = async (values) => {
+    try {
+      if (quickAnswerId) {
+        await api.put(`/quickAnswers/${quickAnswerId}`, values);
+        handleClose();
+      } else {
+        const { data } = await api.post("/quickAnswers", values);
+        if (onSave) {
+          onSave(data);
+        }
+        handleClose();
+      }
+      toast.success(i18n.t("quickAnswersModal.success"));
+    } catch (err) {
+      toastError(err);
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        maxWidth="sm"
+        fullWidth
+        scroll="paper"
+      >
+        <DialogTitle id="form-dialog-title">
+          {quickAnswerId
+            ? `${i18n.t("quickAnswersModal.title.edit")}`
+            : `${i18n.t("quickAnswersModal.title.add")}`}
+        </DialogTitle>
+        <Formik
+          initialValues={quickAnswer}
+          enableReinitialize={true}
+          validationSchema={QuickAnswerSchema}
+          onSubmit={(values, actions) => {
+            setTimeout(() => {
+              handleSaveQuickAnswer(values);
+              actions.setSubmitting(false);
+            }, 400);
+          }}
+        >
+          {({ values, errors, touched, isSubmitting }) => (
+            <Form>
+              <DialogContent dividers>
+                <div className={classes.textQuickAnswerContainer}>
+                  <Field
+                    as={TextField}
+                    label={i18n.t("quickAnswersModal.form.shortcut")}
+                    name="shortcut"
+                    autoFocus
+                    error={touched.shortcut && Boolean(errors.shortcut)}
+                    helperText={touched.shortcut && errors.shortcut}
+                    variant="outlined"
+                    margin="dense"
+                    className={classes.textField}
+                    fullWidth
+                  />
+                </div>
+                <div className={classes.textQuickAnswerContainer}>
+                  <Field
+                    as={TextField}
+                    label={i18n.t("quickAnswersModal.form.message")}
+                    name="message"
+                    error={touched.message && Boolean(errors.message)}
+                    helperText={touched.message && errors.message}
+                    variant="outlined"
+                    margin="dense"
+                    className={classes.textField}
+                    multiline
+                    rows={5}
+                    fullWidth
+                  />
+                </div>
+              </DialogContent>
+              <DialogActions>
+                <Button
+                  onClick={handleClose}
+                  color="secondary"
+                  disabled={isSubmitting}
+                  variant="outlined"
+                >
+                  {i18n.t("quickAnswersModal.buttons.cancel")}
+                </Button>
+                <Button
+                  type="submit"
+                  color="primary"
+                  disabled={isSubmitting}
+                  variant="contained"
+                  className={classes.btnWrapper}
+                >
+                  {quickAnswerId
+                    ? `${i18n.t("quickAnswersModal.buttons.okEdit")}`
+                    : `${i18n.t("quickAnswersModal.buttons.okAdd")}`}
+                  {isSubmitting && (
+                    <CircularProgress
+                      size={24}
+                      className={classes.buttonProgress}
+                    />
+                  )}
+                </Button>
+              </DialogActions>
+            </Form>
+          )}
+        </Formik>
+      </Dialog>
+    </div>
+  );
+};
+
+export default QuickAnswersModal;

frontend/src/layout/MainListItems.js

@@ -14,6 +14,7 @@ import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
 import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
 import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
 import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
+import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
 
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
@@ -49,7 +50,7 @@ const MainListItems = () => {
   useEffect(() => {
     const delayDebounceFn = setTimeout(() => {
       if (whatsApps.length > 0) {
-				const offlineWhats = whatsApps.filter(whats => {
+        const offlineWhats = whatsApps.filter((whats) => {
           return (
             whats.status === "qrcode" ||
             whats.status === "PAIRING" ||
@@ -95,6 +96,11 @@ const MainListItems = () => {
         primary={i18n.t("mainDrawer.listItems.contacts")}
         icon={<ContactPhoneOutlinedIcon />}
       />
+      <ListItemLink
+        to="/quickAnswers"
+        primary={i18n.t("mainDrawer.listItems.quickAnswers")}
+        icon={<QuestionAnswerOutlinedIcon />}
+      />
       <Can
         role={user.profile}
         perform="drawer-admin-items:view"

frontend/src/pages/QuickAnswers/index.js

@@ -0,0 +1,288 @@
+import React, { useState, useEffect, useReducer } from "react";
+import openSocket from "socket.io-client";
+
+import {
+  Button,
+  IconButton,
+  makeStyles,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  InputAdornment,
+  TextField,
+} from "@material-ui/core";
+import { Edit, DeleteOutline } from "@material-ui/icons";
+import SearchIcon from "@material-ui/icons/Search";
+
+import MainContainer from "../../components/MainContainer";
+import MainHeader from "../../components/MainHeader";
+import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
+import Title from "../../components/Title";
+
+import api from "../../services/api";
+import { i18n } from "../../translate/i18n";
+import TableRowSkeleton from "../../components/TableRowSkeleton";
+import QuickAnswersModal from "../../components/QuickAnswersModal";
+import ConfirmationModal from "../../components/ConfirmationModal";
+import { toast } from "react-toastify";
+import toastError from "../../errors/toastError";
+
+const reducer = (state, action) => {
+  if (action.type === "LOAD_QUICK_ANSWERS") {
+    const quickAnswers = action.payload;
+    const newQuickAnswers = [];
+
+    quickAnswers.forEach((quickAnswer) => {
+      const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswer.id);
+      if (quickAnswerIndex !== -1) {
+        state[quickAnswerIndex] = quickAnswer;
+      } else {
+        newQuickAnswers.push(quickAnswer);
+      }
+    });
+
+    return [...state, ...newQuickAnswers];
+  }
+
+  if (action.type === "UPDATE_QUICK_ANSWERS") {
+    const quickAnswer = action.payload;
+    const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswer.id);
+
+    if (quickAnswerIndex !== -1) {
+      state[quickAnswerIndex] = quickAnswer;
+      return [...state];
+    } else {
+      return [quickAnswer, ...state];
+    }
+  }
+
+  if (action.type === "DELETE_QUICK_ANSWERS") {
+    const quickAnswerId = action.payload;
+
+    const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswerId);
+    if (quickAnswerIndex !== -1) {
+      state.splice(quickAnswerIndex, 1);
+    }
+    return [...state];
+  }
+
+  if (action.type === "RESET") {
+    return [];
+  }
+};
+
+const useStyles = makeStyles((theme) => ({
+  mainPaper: {
+    flex: 1,
+    padding: theme.spacing(1),
+    overflowY: "scroll",
+    ...theme.scrollbarStyles,
+  },
+}));
+
+const QuickAnswers = () => {
+  const classes = useStyles();
+
+  const [loading, setLoading] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [searchParam, setSearchParam] = useState("");
+  const [quickAnswers, dispatch] = useReducer(reducer, []);
+  const [selectedQuickAnswers, setSelectedQuickAnswers] = useState(null);
+  const [quickAnswersModalOpen, setQuickAnswersModalOpen] = useState(false);
+  const [deletingQuickAnswers, setDeletingQuickAnswers] = useState(null);
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+    setPageNumber(1);
+  }, [searchParam]);
+
+  useEffect(() => {
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      const fetchQuickAnswers = async () => {
+        try {
+          const { data } = await api.get("/quickAnswers/", {
+            params: { searchParam, pageNumber },
+          });
+          dispatch({ type: "LOAD_QUICK_ANSWERS", payload: data.quickAnswers });
+          setHasMore(data.hasMore);
+          setLoading(false);
+        } catch (err) {
+          toastError(err);
+        }
+      };
+      fetchQuickAnswers();
+    }, 500);
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchParam, pageNumber]);
+
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+    socket.on("quickAnswer", (data) => {
+      if (data.action === "update" || data.action === "create") {
+        dispatch({ type: "UPDATE_QUICK_ANSWERS", payload: data.quickAnswer });
+      }
+
+      if (data.action === "delete") {
+        dispatch({
+          type: "DELETE_QUICK_ANSWERS",
+          payload: +data.quickAnswerId,
+        });
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  const handleSearch = (event) => {
+    setSearchParam(event.target.value.toLowerCase());
+  };
+
+  const handleOpenQuickAnswersModal = () => {
+    setSelectedQuickAnswers(null);
+    setQuickAnswersModalOpen(true);
+  };
+
+  const handleCloseQuickAnswersModal = () => {
+    setSelectedQuickAnswers(null);
+    setQuickAnswersModalOpen(false);
+  };
+
+  const handleEditQuickAnswers = (quickAnswer) => {
+    setSelectedQuickAnswers(quickAnswer);
+    setQuickAnswersModalOpen(true);
+  };
+
+  const handleDeleteQuickAnswers = async (quickAnswerId) => {
+    try {
+      await api.delete(`/quickAnswers/${quickAnswerId}`);
+      toast.success(i18n.t("quickAnswers.toasts.deleted"));
+    } catch (err) {
+      toastError(err);
+    }
+    setDeletingQuickAnswers(null);
+    setSearchParam("");
+    setPageNumber(1);
+  };
+
+  const loadMore = () => {
+    setPageNumber((prevState) => prevState + 1);
+  };
+
+  const handleScroll = (e) => {
+    if (!hasMore || loading) return;
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollHeight - (scrollTop + 100) < clientHeight) {
+      loadMore();
+    }
+  };
+
+  return (
+    <MainContainer>
+      <ConfirmationModal
+        title={
+          deletingQuickAnswers &&
+          `${i18n.t("quickAnswers.confirmationModal.deleteTitle")} ${
+            deletingQuickAnswers.shortcut
+          }?`
+        }
+        open={confirmModalOpen}
+        onClose={setConfirmModalOpen}
+        onConfirm={() => handleDeleteQuickAnswers(deletingQuickAnswers.id)}
+      >
+        {i18n.t("quickAnswers.confirmationModal.deleteMessage")}
+      </ConfirmationModal>
+      <QuickAnswersModal
+        open={quickAnswersModalOpen}
+        onClose={handleCloseQuickAnswersModal}
+        aria-labelledby="form-dialog-title"
+        quickAnswerId={selectedQuickAnswers && selectedQuickAnswers.id}
+      ></QuickAnswersModal>
+      <MainHeader>
+        <Title>{i18n.t("quickAnswers.title")}</Title>
+        <MainHeaderButtonsWrapper>
+          <TextField
+            placeholder={i18n.t("quickAnswers.searchPlaceholder")}
+            type="search"
+            value={searchParam}
+            onChange={handleSearch}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon style={{ color: "gray" }} />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleOpenQuickAnswersModal}
+          >
+            {i18n.t("quickAnswers.buttons.add")}
+          </Button>
+        </MainHeaderButtonsWrapper>
+      </MainHeader>
+      <Paper
+        className={classes.mainPaper}
+        variant="outlined"
+        onScroll={handleScroll}
+      >
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.shortcut")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.message")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.actions")}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <>
+              {quickAnswers.map((quickAnswer) => (
+                <TableRow key={quickAnswer.id}>
+                  <TableCell align="center">{quickAnswer.shortcut}</TableCell>
+                  <TableCell align="center">{quickAnswer.message}</TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleEditQuickAnswers(quickAnswer)}
+                    >
+                      <Edit />
+                    </IconButton>
+
+                    <IconButton
+                      size="small"
+                      onClick={(e) => {
+                        setConfirmModalOpen(true);
+                        setDeletingQuickAnswers(quickAnswer);
+                      }}
+                    >
+                      <DeleteOutline />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {loading && <TableRowSkeleton columns={3} />}
+            </>
+          </TableBody>
+        </Table>
+      </Paper>
+    </MainContainer>
+  );
+};
+
+export default QuickAnswers;

frontend/src/routes/index.js

@@ -11,6 +11,7 @@ import Connections from "../pages/Connections/";
 import Settings from "../pages/Settings/";
 import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
+import QuickAnswers from "../pages/QuickAnswers/";
 import Queues from "../pages/Queues/";
 import { AuthProvider } from "../context/Auth/AuthContext";
 import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
@@ -40,6 +41,12 @@ const Routes = () => {
               />
               <Route exact path="/contacts" component={Contacts} isPrivate />
               <Route exact path="/users" component={Users} isPrivate />
+              <Route
+                exact
+                path="/quickAnswers"
+                component={QuickAnswers}
+                isPrivate
+              />
               <Route exact path="/Settings" component={Settings} isPrivate />
               <Route exact path="/Queues" component={Queues} isPrivate />
             </LoggedInLayout>

frontend/src/translate/languages/en.js

@@ -153,6 +153,22 @@ const messages = {
         },
         success: "Contact saved successfully.",
       },
+      quickAnswersModal: {
+        title: {
+          add: "Add Quick Reply",
+          edit: "Edit Quick Answer",
+        },
+        form: {
+          shortcut: "Shortcut",
+          message: "Quick Reply",
+        },
+        buttons: {
+          okAdd: "Add",
+          okEdit: "Save",
+          cancel: "Cancel",
+        },
+        success: "Quick Reply saved successfully.",
+      },
       queueModal: {
         title: {
           add: "Add queue",
@@ -250,6 +266,7 @@ const messages = {
           connections: "Connections",
           tickets: "Tickets",
           contacts: "Contacts",
+          quickAnswers: "Quick Answers",
           queues: "Queues",
           administration: "Administration",
           users: "Users",
@@ -285,6 +302,25 @@ const messages = {
       queueSelect: {
         inputLabel: "Queues",
       },
+      quickAnswers: {
+        title: "Quick Answers",
+        table: {
+          shortcut: "Shortcut",
+          message: "Quick Reply",
+          actions: "Actions",
+        },
+        buttons: {
+          add: "Add Quick Reply",
+        },
+        toasts: {
+          deleted: "Quick Reply deleted successfully.",
+        },
+        searchPlaceholder: "Search...",
+        confirmationModal: {
+          deleteTitle: "Are you sure you want to delete this Quick Reply: ",
+          deleteMessage: "This action cannot be undone.",
+        },
+      },
       users: {
         title: "Users",
         table: {

frontend/src/translate/languages/es.js

@@ -156,6 +156,22 @@ const messages = {
         },
         success: "Contacto guardado satisfactoriamente.",
       },
+      quickAnswersModal: {
+        title: {
+          add: "Agregar respuesta rápida",
+          edit: "Editar respuesta rápida",
+        },
+        form: {
+          shortcut: "Atajo",
+          message: "Respuesta rápida",
+        },
+        buttons: {
+          okAdd: "Agregar",
+          okEdit: "Guardar",
+          cancel: "Cancelar",
+        },
+        success: "Respuesta rápida guardada correctamente.",
+      },
       queueModal: {
         title: {
           add: "Agregar cola",
@@ -254,6 +270,7 @@ const messages = {
           connections: "Conexiones",
           tickets: "Tickets",
           contacts: "Contactos",
+          quickAnswers: "Respuestas rápidas",
           queues: "Linhas",
           administration: "Administración",
           users: "Usuarios",
@@ -289,6 +306,26 @@ const messages = {
       queueSelect: {
         inputLabel: "Linhas",
       },
+      quickAnswers: {
+        title: "Respuestas rápidas",
+        table: {
+          shortcut: "Atajo",
+          message: "Respuesta rápida",
+          actions: "Acciones",
+        },
+        buttons: {
+          add: "Agregar respuesta rápida",
+        },
+        toasts: {
+          deleted: "Respuesta rápida eliminada correctamente",
+        },
+        searchPlaceholder: "Buscar ...",
+        confirmationModal: {
+          deleteTitle:
+            "¿Está seguro de que desea eliminar esta respuesta rápida?",
+          deleteMessage: "Esta acción no se puede deshacer.",
+        },
+      },
       users: {
         title: "Usuarios",
         table: {

frontend/src/translate/languages/pt.js

@@ -154,6 +154,22 @@ const messages = {
         },
         success: "Contato salvo com sucesso.",
       },
+      quickAnswersModal: {
+        title: {
+          add: "Adicionar Resposta Rápida",
+          edit: "Editar Resposta Rápida",
+        },
+        form: {
+          shortcut: "Atalho",
+          message: "Resposta Rápida",
+        },
+        buttons: {
+          okAdd: "Adicionar",
+          okEdit: "Salvar",
+          cancel: "Cancelar",
+        },
+        success: "Resposta Rápida salva com sucesso.",
+      },
       queueModal: {
         title: {
           add: "Adicionar fila",
@@ -252,6 +268,7 @@ const messages = {
           connections: "Conexões",
           tickets: "Tickets",
           contacts: "Contatos",
+          quickAnswers: "Respostas Rápidas",
           queues: "Filas",
           administration: "Administração",
           users: "Usuários",
@@ -287,6 +304,26 @@ const messages = {
       queueSelect: {
         inputLabel: "Filas",
       },
+      quickAnswers: {
+        title: "Respostas Rápidas",
+        table: {
+          shortcut: "Atalho",
+          message: "Resposta Rápida",
+          actions: "Ações",
+        },
+        buttons: {
+          add: "Adicionar Resposta Rápida",
+        },
+        toasts: {
+          deleted: "Resposta Rápida excluída com sucesso.",
+        },
+        searchPlaceholder: "Pesquisar...",
+        confirmationModal: {
+          deleteTitle:
+            "Você tem certeza que quer excluir esta Resposta Rápida: ",
+          deleteMessage: "Esta ação não pode ser revertida.",
+        },
+      },
       users: {
         title: "Usuários",
         table: {