Files
bodyshop/client/src/components/chat-open-button/chat-open-button.component.jsx

56 lines
1.9 KiB
JavaScript

import parsePhoneNumber from "libphonenumber-js";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { openChatByPhone } from "../../redux/messaging/messaging.actions";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
searchingForConversation: searchingForConversation
});
const mapDispatchToProps = (dispatch) => ({
openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
});
export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type, jobid, openChatByPhone }) {
const { t } = useTranslation();
const { socket } = useSocket();
const notification = useNotification();
if (!phone) return <></>;
if (!bodyshop.messagingservicesid) {
return <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
}
return (
<a
href="# "
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (searchingForConversation) return; // Prevent finding the same thing twice.
const p = parsePhoneNumber(phone, "CA");
if (p && p.isValid()) {
openChatByPhone({ phone_num: p.formatInternational(), jobid, socket });
} else {
notification["error"]({ message: t("messaging.error.invalidphone") });
}
}}
>
<PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>
</a>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ChatOpenButton);