85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
import { Button } from "antd";
|
|
import parsePhoneNumber from "libphonenumber-js";
|
|
import { useCallback, useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { openChatByPhone } from "../../redux/messaging/messaging.actions";
|
|
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";
|
|
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
searchingForConversation
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
openChatByPhone: (payload) => dispatch(openChatByPhone(payload))
|
|
});
|
|
|
|
export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type, jobid, openChatByPhone }) {
|
|
const { t } = useTranslation();
|
|
const { socket } = useSocket();
|
|
const notification = useNotification();
|
|
|
|
if (!phone) return null;
|
|
|
|
const messagingEnabled = Boolean(bodyshop?.messagingservicesid);
|
|
|
|
const parsed = useMemo(() => {
|
|
if (!messagingEnabled) return null;
|
|
try {
|
|
return parsePhoneNumber(phone, "CA") || null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}, [messagingEnabled, phone]);
|
|
|
|
const isValid = Boolean(parsed?.isValid?.() && parsed.isValid());
|
|
const clickable = messagingEnabled && !searchingForConversation && isValid;
|
|
|
|
const onClick = useCallback(
|
|
(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (!messagingEnabled) return;
|
|
if (searchingForConversation) return;
|
|
|
|
if (!isValid) {
|
|
notification.error({ title: t("messaging.error.invalidphone") });
|
|
return;
|
|
}
|
|
|
|
openChatByPhone({
|
|
phone_num: parsed.formatInternational(),
|
|
jobid,
|
|
socket
|
|
});
|
|
},
|
|
[messagingEnabled, searchingForConversation, isValid, parsed, jobid, socket, openChatByPhone, notification, t]
|
|
);
|
|
|
|
const content = <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
|
|
|
|
// If not clickable, render plain formatted text (no link styling)
|
|
if (!clickable) return content;
|
|
|
|
// Clickable: render as a link-styled button (best for a “command”)
|
|
return (
|
|
<Button
|
|
type="link"
|
|
onClick={onClick}
|
|
className="chat-open-button-link"
|
|
aria-label={t("messaging.actions.openchat") || "Open chat"}
|
|
>
|
|
{content}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ChatOpenButton);
|