Added manual conversation creation BOD-379

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

@@ -0,0 +1,49 @@
+import { PlusCircleFilled } from "@ant-design/icons";
+import { Button, Form, Popover } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { openChatByPhone } from "../../redux/messaging/messaging.actions";
+import PhoneFormItem from "../form-items-formatted/phone-form-item.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = (dispatch) => ({
+  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
+});
+
+export function ChatNewConversation({ openChatByPhone }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const handleFinish = (values) => {
+    console.log("values :>> ", values);
+    openChatByPhone({ phone_num: values.phoneNumber });
+    form.resetFields();
+  };
+
+  const popContent = (
+    <div>
+      <Form form={form} onFinish={handleFinish}>
+        <Form.Item label={t("messaging.labels.phonenumber")} name="phoneNumber">
+          <PhoneFormItem />
+        </Form.Item>
+        <Button type="primary" htmlType="submit">
+          {t("messaging.actions.new")}
+        </Button>
+      </Form>
+    </div>
+  );
+
+  return (
+    <Popover trigger="click" content={popContent}>
+      <PlusCircleFilled style={{ margin: "1rem" }} />
+    </Popover>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ChatNewConversation);