90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
|
|
import { Input, Spin } from "antd";
|
|
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,
|
|
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({
|
|
conversation,
|
|
bodyshop,
|
|
sendMessage,
|
|
isSending,
|
|
message,
|
|
setMessage,
|
|
}) {
|
|
const inputArea = useRef(null);
|
|
useEffect(() => {
|
|
inputArea.current.focus();
|
|
}, [isSending, setMessage]);
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const handleEnter = () => {
|
|
logImEXEvent("messaging_send_message");
|
|
sendMessage({
|
|
to: conversation.phone_num,
|
|
body: message,
|
|
messagingServiceSid: bodyshop.messagingservicesid,
|
|
conversationid: conversation.id,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="imex-flex-row">
|
|
<Input.TextArea
|
|
className="imex-flex-row__margin imex-flex-row__grow"
|
|
allowClear
|
|
autoFocus
|
|
ref={inputArea}
|
|
autoSize={{ minRows: 1, maxRows: 4 }}
|
|
value={message}
|
|
disabled={isSending}
|
|
placeholder={t("messaging.labels.typeamessage")}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onPressEnter={(event) => {
|
|
event.preventDefault();
|
|
if (!!!event.shiftKey) handleEnter();
|
|
}}
|
|
/>
|
|
<SendOutlined className="imex-flex-row__margin" onClick={handleEnter} />
|
|
<Spin
|
|
style={{ display: `${isSending ? "" : "none"}` }}
|
|
indicator={
|
|
<LoadingOutlined
|
|
style={{
|
|
fontSize: 24,
|
|
}}
|
|
spin
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(ChatSendMessageComponent);
|