feature/IO-2681-Share-To-Teams-Button - checkpoint

client/src/components/share-to-teams/share-to-teams-button.jsx

@@ -0,0 +1,135 @@
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import { Button } from "antd";
+import { useLocation } from "react-router-dom";
+import { SiMicrosoftteams } from "react-icons/si";
+import { useTranslation } from "react-i18next";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.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.
+ * @param {Object} [props.additionalProps] - Additional props to pass to the rendered component.
+ * @returns {React.ReactElement} A button or text link for sharing to Microsoft Teams.
+ */
+const ShareToTeamsButton = ({
+  bodyshop,
+  messageTextOverride,
+  urlOverride,
+  pageTitleOverride,
+  noIcon = false,
+  noIconStyle = {},
+  buttonStyle = {},
+  buttonIconStyle = {},
+  linkText,
+  ...additionalProps
+}) => {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  const {
+    treatments: { Share_To_Teams }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Share_To_Teams"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
+  const currentUrl = useMemo(
+    () =>
+      urlOverride ||
+      encodeURIComponent(`${window.location.origin}${location.pathname}${location.search}${location.hash}`),
+    [urlOverride, location]
+  );
+
+  const pageTitle = useMemo(
+    () =>
+      pageTitleOverride ||
+      encodeURIComponent(typeof document !== "undefined" ? document.title : t("general.actions.sharetoteams")),
+    [pageTitleOverride, t]
+  );
+
+  const messageText = useMemo(
+    () => messageTextOverride || encodeURIComponent(t("general.actions.sharetoteams")),
+    [messageTextOverride, t]
+  );
+
+  // 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 = () => {
+    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);
+  };
+
+  // if (Share_To_Teams?.treatment !== "on") {
+  //   return null;
+  // }
+
+  if (noIcon) {
+    return (
+      <div style={{ cursor: "pointer", ...noIconStyle }} onClick={handleShare} {...additionalProps}>
+        {!linkText ? t("general.actions.sharetoteams") : linkText}
+      </div>
+    );
+  }
+
+  return (
+    <Button
+      style={{
+        backgroundColor: "#6264A7",
+        borderColor: "#6264A7",
+        color: "#FFFFFF",
+        ...buttonStyle
+      }}
+      icon={<SiMicrosoftteams style={{ color: "#FFFFFF", ...buttonIconStyle }} />}
+      onClick={handleShare}
+      title={linkText === null ? t("general.actions.sharetoteams") : linkText}
+      {...additionalProps}
+    />
+  );
+};
+
+ShareToTeamsButton.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]),
+  additionalProps: PropTypes.object
+};
+
+export default connect(mapStateToProps)(ShareToTeamsButton);