Added messaging presets BOD-107

client/src/components/chat-conversation-title/chat-conversation-title.component.jsx

@@ -2,6 +2,7 @@ import { Space } from "antd";
 import React from "react";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
+import ChatPresetsComponent from "../chat-presets/chat-presets.component";
 
 export default function ChatConversationTitle({ conversation }) {
   return (
@@ -17,13 +18,14 @@ export default function ChatConversationTitle({ conversation }) {
           )}
         </span>
       </Space>
-      <div className='imex-flex-row imex-flex-row__margin'>
+      <div className="imex-flex-row imex-flex-row__margin">
         <ChatConversationTitleTags
           jobConversations={
             (conversation && conversation.job_conversations) || []
           }
         />
         <ChatTagRoContainer conversation={conversation || []} />
+        <ChatPresetsComponent />
       </div>
     </div>
   );

client/src/components/chat-presets/chat-presets.component.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setMessage } from "../../redux/messaging/messaging.actions";
+import { Dropdown, Button, Menu } from "antd";
+import { useTranslation } from "react-i18next";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { DownOutlined } from "@ant-design/icons";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  setMessage: (message) => dispatch(setMessage(message)),
+});
+
+export function ChatPresetsComponent({ bodyshop, setMessage }) {
+  const { t } = useTranslation();
+
+  const menu = (
+    <Menu>
+      {bodyshop.md_messaging_presets.map((i, idx) => (
+        <Menu.Item onClick={() => setMessage(i.text)} key={idx}>
+          {i.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <div>
+      <Dropdown trigger={["click"]} overlay={menu}>
+        <a
+          className="ant-dropdown-link"
+          href="javascript:void(0);"
+          onClick={(e) => e.preventDefault()}
+        >
+          {t("messaging.labels.presets")} <DownOutlined />
+        </a>
+      </Dropdown>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ChatPresetsComponent);

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -1,21 +1,29 @@
 import { LoadingOutlined } from "@ant-design/icons";
 import { Input, Spin } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { sendMessage } from "../../redux/messaging/messaging.actions";
-import { selectIsSending } from "../../redux/messaging/messaging.selectors";
+import {
+  sendMessage,
+  setMessage,
+} from "../../redux/messaging/messaging.actions";
+import {
+  selectIsSending,
+  selectMessage,
+} from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   isSending: selectIsSending,
+  message: selectMessage,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   sendMessage: (message) => dispatch(sendMessage(message)),
+  setMessage: (message) => dispatch(setMessage(message)),
 });
 
 function ChatSendMessageComponent({
@@ -23,13 +31,11 @@ function ChatSendMessageComponent({
   bodyshop,
   sendMessage,
   isSending,
+  message,
+  setMessage,
 }) {
-  const [message, setMessage] = useState("");
   const inputArea = useRef(null);
   useEffect(() => {
-    if (isSending === false) {
-      setMessage("");
-    }
     inputArea.current.focus();
   }, [isSending, setMessage]);
 

client/src/components/shop-info/shop-info.component.jsx

@@ -8,6 +8,7 @@ import {
   Radio,
   Select,
 } from "antd";
+import { DeleteFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
@@ -188,6 +189,68 @@ export default function ShopInfoComponent({ form }) {
             }}
           </Form.Item>
 
+          <Form.List name={["md_messaging_presets"]}>
+            {(fields, { add, remove }) => {
+              return (
+                <div>
+                  {fields.map((field, index) => (
+                    <Form.Item
+                      key={field.key}
+                      style={{ padding: 0, margin: 2 }}
+                    >
+                      <div style={{ display: "flex" }}>
+                        <Form.Item
+                          style={{ padding: 0, margin: 2 }}
+                          label={t("bodyshop.fields.messaginglabel")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true,
+                              message: t("general.validation.required"),
+                            },
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          style={{ padding: 0, margin: 2 }}
+                          label={t("bodyshop.fields.messagingtext")}
+                          key={`${index}text`}
+                          name={[field.name, "text"]}
+                          rules={[
+                            {
+                              required: true,
+                              message: t("general.validation.required"),
+                            },
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                      </div>
+                    </Form.Item>
+                  ))}
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() => {
+                        add();
+                      }}
+                      style={{ width: "100%" }}
+                    >
+                      {t("general.actions.add")}
+                    </Button>
+                  </Form.Item>
+                </div>
+              );
+            }}
+          </Form.List>
+
           <Form.Item
             name={["md_referral_sources"]}
             label={t("bodyshop.fields.md_referral_sources")}

client/src/components/shop-info/shop-info.container.jsx

@@ -13,25 +13,24 @@ export default function ShopInfoContainer() {
   const { t } = useTranslation();
   const [updateBodyshop] = useMutation(UPDATE_SHOP);
   const { loading, error, data, refetch } = useQuery(QUERY_BODYSHOP, {
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
   });
 
-  const handleFinish = values => {
+  const handleFinish = (values) => {
     console.log("values", values);
     logImEXEvent("shop_update");
 
     updateBodyshop({
-      variables: { id: data.bodyshops[0].id, shop: values }
+      variables: { id: data.bodyshops[0].id, shop: values },
     })
-      .then(r => {
+      .then((r) => {
         notification["success"]({ message: t("bodyshop.successes.save") });
-        refetch().then(_ => form.resetFields());
+        refetch().then((_) => form.resetFields());
       })
-      .catch(error => {
-        notification["error"](
-          { message: t("bodyshop.errors.saving") },
-          { message: error }
-        );
+      .catch((error) => {
+        notification["error"]({
+          message: t("bodyshop.errors.saving", { message: error }),
+        });
       });
   };