105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
import PropTypes from "prop-types";
|
|
import { Button } from "antd";
|
|
import { useLocation } from "react-router-dom";
|
|
import { PiMicrosoftTeamsLogo } from "react-icons/pi";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors.js";
|
|
import { logImEXEvent } from "../../firebase/firebase.utils.js";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop
|
|
});
|
|
|
|
/**
|
|
* ShareToTeamsButton component for sharing content to Microsoft Teams via an HTTP link.
|
|
*
|
|
* This component creates a button or link that opens the Microsoft Teams share dialog with
|
|
* the provided URL, title, and message text through query parameters. The popup window is centered on the screen.
|
|
*
|
|
* @param {Object} props - The component's props.
|
|
* @param {string} [props.messageTextOverride] - Custom message text for sharing.
|
|
* @param {string} [props.urlOverride] - Custom URL to share instead of the current page's URL.
|
|
* @param {string} [props.pageTitleOverride] - Custom title for the shared page.
|
|
* @param {boolean} [props.noIcon=false] - If true, renders as a simple text link instead of a button with an icon.
|
|
* @param {Object} [props.noIconStyle={}] - Style object for the text link when noIcon is true.
|
|
* @param {Object} [props.buttonStyle={}] - Style object for the Ant Design button.
|
|
* @param {Object} [props.buttonIconStyle={}] - Style object for the icon within the button.
|
|
* @param {string} [props.linkText] - Text to display on the button or link.
|
|
* @returns {React.ReactElement} A button or text link for sharing to Microsoft Teams.
|
|
*/
|
|
const ShareToTeamsComponent = ({
|
|
bodyshop,
|
|
messageTextOverride,
|
|
urlOverride,
|
|
pageTitleOverride,
|
|
noIcon = false,
|
|
noIconStyle = {},
|
|
buttonStyle = {},
|
|
buttonIconStyle = {},
|
|
linkText
|
|
}) => {
|
|
const location = useLocation();
|
|
const { t } = useTranslation();
|
|
const currentUrl =
|
|
urlOverride ||
|
|
encodeURIComponent(`${window.location.origin}${location.pathname}${location.search}${location.hash}`);
|
|
const pageTitle =
|
|
pageTitleOverride ||
|
|
encodeURIComponent(typeof document !== "undefined" ? document.title : t("general.actions.sharetoteams"));
|
|
const messageText = messageTextOverride || encodeURIComponent(t("general.actions.sharetoteams"));
|
|
// Construct the Teams share URL with parameters
|
|
const teamsShareUrl = `https://teams.microsoft.com/share?href=${currentUrl}&preText=${messageText}&title=${pageTitle}`;
|
|
// Function to open the centered share link in a new window/tab
|
|
const handleShare = () => {
|
|
logImEXEvent("share_to_teams", {});
|
|
const screenWidth = window.screen.width;
|
|
const screenHeight = window.screen.height;
|
|
const windowWidth = 600;
|
|
const windowHeight = 400;
|
|
const left = screenWidth / 2 - windowWidth / 2;
|
|
const top = screenHeight / 2 - windowHeight / 2;
|
|
const windowFeatures = `width=${windowWidth},height=${windowHeight},left=${left},top=${top}`;
|
|
// noinspection JSIgnoredPromiseFromCall
|
|
window.open(teamsShareUrl, "_blank", windowFeatures);
|
|
};
|
|
// Feature is disabled
|
|
if (!bodyshop?.md_functionality_toggles?.teams) {
|
|
return null;
|
|
}
|
|
if (noIcon) {
|
|
return (
|
|
<div style={{ cursor: "pointer", ...noIconStyle }} onClick={handleShare}>
|
|
{!linkText ? t("general.actions.sharetoteams") : linkText}
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<Button
|
|
style={{
|
|
backgroundColor: "var(--teams-button-bg)",
|
|
borderColor: "var(--teams-button-border)",
|
|
color: "var(--teams-button-text)",
|
|
...buttonStyle
|
|
}}
|
|
icon={<PiMicrosoftTeamsLogo style={{ color: "var(--teams-button-text)", ...buttonIconStyle }} />}
|
|
onClick={handleShare}
|
|
title={linkText === null ? t("general.actions.sharetoteams") : linkText}
|
|
/>
|
|
);
|
|
};
|
|
|
|
ShareToTeamsComponent.propTypes = {
|
|
messageTextOverride: PropTypes.string,
|
|
urlOverride: PropTypes.string,
|
|
pageTitleOverride: PropTypes.string,
|
|
noIcon: PropTypes.bool,
|
|
noIconStyle: PropTypes.object,
|
|
buttonStyle: PropTypes.object,
|
|
buttonIconStyle: PropTypes.object,
|
|
linkText: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
|
|
};
|
|
|
|
export default connect(mapStateToProps)(ShareToTeamsComponent);
|