Merge pull request #129 from mbaghel/dev

fix: issue #124

Author: maxceem

config/dev.js

@@ -9,11 +9,6 @@ module.exports = {
    */
   CONNECT_WEBSITE_URL: "https://connect.topcoder-dev.com",
 
-  /**
-   * Email to request extension
-   */
-  EMAIL_REQUEST_EXTENSION: "customersuccess@topcoder-dev.com",
-
   API: {
     V5: "https://api.topcoder-dev.com/v5",
     V3: "https://api.topcoder-dev.com/v3",

config/prod.js

@@ -9,11 +9,6 @@ module.exports = {
    */
   CONNECT_WEBSITE_URL: "https://connect.topcoder.com",
 
-  /**
-   * Email to request extension
-   */
-  EMAIL_REQUEST_EXTENSION: "customersuccess@topcoder.com",
-
   API: {
     V5: "https://api.topcoder.com/v5",
     V3: "https://api.topcoder.com/v3",

src/components/EmailPopup/actions/index.js

@@ -0,0 +1,21 @@
+/**
+ * Report popup actions
+ */
+import { ACTION_TYPE } from "constants";
+
+/**
+ * Action to create an email popup and open it
+ * @param {Object} popupOptions Options to customize popup appearance and behaviour
+ * @param {Object} data Data to send to server with email text
+ */
+export const openEmailPopup = (popupOptions, data) => ({
+  type: ACTION_TYPE.OPEN_EMAIL_POPUP,
+  payload: { popupOptions, data },
+});
+
+/**
+ * Action to close an email popup
+ */
+export const closeEmailPopup = () => ({
+  type: ACTION_TYPE.CLOSE_EMAIL_POPUP,
+});

src/components/EmailPopup/hooks/useEmailPopup.js

@@ -0,0 +1,20 @@
+/**
+ * Use email popup hook
+ */
+
+import { useDispatch } from "react-redux";
+import { openEmailPopup } from "../actions";
+
+/**
+ * Hook to allow email popup to be opened by any other component
+ * (as long as it is mounted somewhere in the tree)
+ *
+ * @returns func A wrapper around the open report dispatch
+ */
+export const useEmailPopup = () => {
+  const dispatch = useDispatch();
+
+  return (popupOptions, data) => {
+    dispatch(openEmailPopup(popupOptions, data));
+  };
+};

src/components/ReportPopup/index.jsx renamed to src/components/EmailPopup/index.jsx

@@ -1,45 +1,51 @@
 /**
- * A report popup used to report issues with teams or team members
+ * An email popup used to format and send emails for reporting issues
+ * and requesting extensions
  */
 
 import React, { useCallback, useState } from "react";
+import _ from "lodash";
 import { useSelector, useDispatch } from "react-redux";
 import { toastr } from "react-redux-toastr";
-import { closeReport } from "./actions";
+import { closeEmailPopup } from "./actions";
 import BaseModal from "components/BaseModal";
 import TextArea from "components/TextArea";
 import Button from "../Button";
-import { postReport } from "services/teams";
+import { postEmail } from "services/teams";
 import CenteredSpinner from "components/CenteredSpinner";
 
-function ReportPopup() {
-  const { isOpen, teamName, teamId, memberHandle } = useSelector(
-    (state) => state.reportPopup
+function EmailPopup() {
+  const { isOpen, popupOptions, data } = useSelector(
+    (state) => state.emailPopup
   );
 
   const dispatch = useDispatch();
   const [textVal, setTextVal] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
-  const submitReport = () => {
+  const submitEmail = () => {
     setIsLoading(true);
 
-    postReport(teamName, teamId, textVal, memberHandle)
+    const postData = _.merge({}, data);
+
+    _.set(postData, popupOptions.textDataField, textVal);
+
+    postEmail(postData)
       .then(() => {
         setIsLoading(false);
         closeModal();
-        toastr.success("Report submitted successfully");
+        toastr.success(popupOptions.successTitle);
       })
       .catch((err) => {
         setIsLoading(false);
 
-        toastr.error("Report failed", err.message);
+        toastr.error(popupOptions.errorTitle, err.message);
       });
   };
 
   const button = (
     <Button
-      onClick={() => submitReport()}
+      onClick={submitEmail}
       size="medium"
       isSubmit
       disabled={textVal.trim().length < 1 || isLoading}
@@ -49,17 +55,15 @@ function ReportPopup() {
   );
 
   const closeModal = useCallback(() => {
-    dispatch(closeReport());
+    dispatch(closeEmailPopup());
     setTextVal("");
   }, [dispatch]);
 
   return (
     <BaseModal
       open={isOpen}
       onClose={closeModal}
-      title={`Issue Report - ${teamName}${
-        memberHandle ? " - " + memberHandle : ""
-      }`}
+      title={popupOptions.title}
       button={button}
       disabled={isLoading}
     >
@@ -69,11 +73,11 @@ function ReportPopup() {
         <TextArea
           value={textVal}
           onChange={setTextVal}
-          placeholder="Describe your issue"
+          placeholder={popupOptions.textPlaceholder}
         />
       )}
     </BaseModal>
   );
 }
 
-export default ReportPopup;
+export default EmailPopup;

src/components/ReportPopup/reducers/index.js renamed to src/components/EmailPopup/reducers/index.js

@@ -1,26 +1,29 @@
 /**
- * Reducer for Report popup
+ * Reducer for Email popup
  */
 
 import { ACTION_TYPE } from "constants";
 
 const initialState = {
-  teamName: undefined,
-  teamId: undefined,
-  memberHandle: undefined,
   isOpen: false,
+  popupOptions: {
+    title: "",
+    textPlaceholder: "",
+    textDataField: "",
+  },
+  data: null,
 };
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
-    case ACTION_TYPE.OPEN_REPORT:
+    case ACTION_TYPE.OPEN_EMAIL_POPUP:
       return {
         ...state,
         ...action.payload,
         isOpen: true,
       };
 
-    case ACTION_TYPE.CLOSE_REPORT:
+    case ACTION_TYPE.CLOSE_EMAIL_POPUP:
       return {
         ...state,
         isOpen: false,

src/components/ReportPopup/actions/index.js

@@ -183,10 +183,10 @@ export const ACTION_TYPE = {
   AUTH_CLEAR_TEAM_MEMBERS: "AUTH_CLEAR_TEAM_MEMBERS",
 
   /*
-    Report Popup
+    Email Popup
    */
-  OPEN_REPORT: "OPEN_REPORT",
-  CLOSE_REPORT: "CLOSE_REPORT",
+  OPEN_EMAIL_POPUP: "OPEN_EMAIL_POPUP",
+  CLOSE_EMAIL_POPUP: "CLOSE_EMAIL_POPUP",
 
   /*
     Team (project) Members

src/components/ReportPopup/hooks/useReportPopup.js

@@ -5,14 +5,14 @@ import { combineReducers } from "redux";
 import { reducer as toastrReducer } from "react-redux-toastr";
 import positionDetailsReducer from "../routes/PositionDetails/reducers";
 import teamMembersReducer from "../routes/TeamAccess/reducers";
-import reportPopupReducer from "../components/ReportPopup/reducers";
+import emailPopupReducer from "../components/EmailPopup/reducers";
 import authUserReducer from "../hoc/withAuthentication/reducers";
 
 const rootReducer = combineReducers({
   toastr: toastrReducer,
   positionDetails: positionDetailsReducer,
   teamMembers: teamMembersReducer,
-  reportPopup: reportPopupReducer,
+  emailPopup: emailPopupReducer,
   authUser: authUserReducer,
 });
 

src/constants/index.js

@@ -19,19 +19,22 @@ import { TEAM_MEMBERS_PER_PAGE } from "constants";
 import {
   formatDateRange,
   formatMoney,
-  formatRequestExtensionUrl,
+  formatReportData,
+  formatReportPopup,
+  formatExtensionData,
+  formatExtensionPopup,
 } from "utils/format";
 import Input from "components/Input";
 import { skillShape } from "components/SkillsList";
-import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
+import { useEmailPopup } from "components/EmailPopup/hooks/useEmailPopup";
 import { hasPermission } from "utils/permissions";
 import { PERMISSIONS } from "constants/permissions";
 
 const TeamMembers = ({ team }) => {
   const { resources, jobs } = team;
   const [filter, setFilter] = useState("");
 
-  const showReportPopup = useReportPopup();
+  const showEmailPopup = useEmailPopup();
 
   const filteredMembers = useMemo(
     () =>
@@ -158,24 +161,38 @@ const TeamMembers = ({ team }) => {
                               `/taas/myteams/${team.id}/rb/${member.id}/edit`
                             );
                           },
-                          hidden: !hasPermission(PERMISSIONS.UPDATE_RESOURCE_BOOKING),
+                          hidden: !hasPermission(
+                            PERMISSIONS.UPDATE_RESOURCE_BOOKING
+                          ),
                         },
                         {
                           separator: true,
-                          hidden: !hasPermission(PERMISSIONS.UPDATE_RESOURCE_BOOKING),
+                          hidden: !hasPermission(
+                            PERMISSIONS.UPDATE_RESOURCE_BOOKING
+                          ),
                         },
                         {
                           label: "Report an Issue",
                           action: () => {
-                            showReportPopup(team.name, team.id, member.handle);
+                            showEmailPopup(
+                              formatReportPopup(team.name, member.handle),
+                              formatReportData(
+                                team.name,
+                                team.id,
+                                member.handle
+                              )
+                            );
                           },
                         },
                         {
                           label: "Request an Extension",
                           action: () => {
-                            window.open(
-                              formatRequestExtensionUrl(
-                                `Request extension for ${member.handle} on ${team.name}`
+                            showEmailPopup(
+                              formatExtensionPopup(team.name, member.handle),
+                              formatExtensionData(
+                                team.name,
+                                team.id,
+                                member.handle
                               )
                             );
                           },

src/reducers/index.js

@@ -10,17 +10,19 @@ import {
   formatConnectProjectUrl,
   formatMoney,
   formatRemainingTimeForTeam,
+  formatReportPopup,
+  formatReportData,
 } from "utils/format";
 import IconClock from "../../../../assets/images/icon-clock.svg";
 import IconMoney from "../../../../assets/images/icon-money.svg";
 // import IconRating from "../../../../assets/images/icon-rating.svg";
 import Button from "components/Button";
-import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
+import { useEmailPopup } from "components/EmailPopup/hooks/useEmailPopup";
 // import Rating from "components/Rating";
 import "./styles.module.scss";
 
 const TeamSummary = ({ team }) => {
-  const showReportPopup = useReportPopup();
+  const showReportPopup = useEmailPopup();
 
   return (
     <div styleName="team-summary">
@@ -61,7 +63,10 @@ const TeamSummary = ({ team }) => {
           type="warning"
           size="medium"
           onClick={() => {
-            showReportPopup(team.name, team.id);
+            showReportPopup(
+              formatReportPopup(team.name),
+              formatReportData(team.name, team.id)
+            );
           }}
           target="_blank"
         >

src/routes/MyTeamsDetails/components/TeamMembers/index.jsx

@@ -15,7 +15,7 @@ import TeamSummary from "./components/TeamSummary";
 import TeamMembers from "./components/TeamMembers";
 import TeamPositions from "./components/TeamPositions";
 import withAuthentication from "../../hoc/withAuthentication";
-import ReportPopup from "components/ReportPopup";
+import EmailPopup from "components/EmailPopup";
 
 const MyTeamsDetails = ({ teamId }) => {
   const [team, loadingError] = useData(getTeamById, teamId);
@@ -36,7 +36,7 @@ const MyTeamsDetails = ({ teamId }) => {
           />
         </>
       )}
-      <ReportPopup />
+      <EmailPopup />
     </Page>
   );
 };

src/routes/MyTeamsDetails/components/TeamSummary/index.jsx

@@ -16,13 +16,15 @@ import {
   formatMoney,
   formatRemainingTimeForTeam,
   formatConnectProjectUrl,
+  formatReportPopup,
+  formatReportData,
 } from "utils/format";
 import AvatarGroup from "components/AvatarGroup";
 import ThreeDotsMenu from "components/ThreeDotsMenu";
-import { useReportPopup } from "components/ReportPopup/hooks/useReportPopup";
+import { useEmailPopup } from "components/EmailPopup/hooks/useEmailPopup";
 
 const TeamCard = ({ team }) => {
-  const showReportPopup = useReportPopup();
+  const showReportPopup = useEmailPopup();
 
   return (
     <div styleName="team-card">
@@ -50,7 +52,10 @@ const TeamCard = ({ team }) => {
             {
               label: "Report an Issue",
               action: () => {
-                showReportPopup(team.name, team.id);
+                showReportPopup(
+                  formatReportPopup(team.name),
+                  formatReportData(team.name, team.id)
+                );
               },
             },
           ]}

src/routes/MyTeamsDetails/index.jsx

@@ -18,7 +18,7 @@ import { useDebounce } from "react-use";
 import { TEAMS_PER_PAGE } from "constants";
 import "./styles.module.scss";
 import { INPUT_DEBOUNCE_DELAY } from "constants/";
-import ReportPopup from "components/ReportPopup";
+import EmailPopup from "components/EmailPopup";
 
 const MyTeamsList = () => {
   let [myTeams, setMyTeams] = useState(null);
@@ -96,7 +96,7 @@ const MyTeamsList = () => {
           )}
         </>
       )}
-      <ReportPopup />
+      <EmailPopup />
     </Page>
   );
 };

src/routes/MyTeamsList/components/TeamCard/index.jsx

@@ -119,29 +119,14 @@ export const getMemberSuggestions = (fragment) => {
 };
 
 /**
- * Post an issue report
+ * Post an email
  *
- * @param {string} teamName team name
- * @param {string|number} teamId team id
- * @param {string} memberHandle member handle
+ * @param {Object} data Body object containing template name and email data
  */
-export const postReport = (teamName, teamId, reportText, memberHandle) => {
+export const postEmail = (data) => {
   const url = `${config.API.V5}/taas-teams/email`;
-  const bodyObj = {
-    template: "team-issue-report",
-    data: {
-      projectName: teamName,
-      projectId: teamId,
-      reportText,
-    },
-  };
-
-  if (memberHandle) {
-    (bodyObj.template = "member-issue-report"),
-      (bodyObj.data.userHandle = memberHandle);
-  }
 
-  return axios.post(url, bodyObj);
+  return axios.post(url, data);
 };
 
 /**

src/routes/MyTeamsList/index.jsx

@@ -124,16 +124,90 @@ export const formatFullName = (firstName, lastName) => {
 };
 
 /**
- * Format Request an Extension URL (mailto:)
+ * Formats popup options for reports
+ * @param {string} teamName Team name
+ * @param {string} memberHandle Member Handle
  *
- * @param {string} subject email subject
+ * @returns {Object} Popup Options
+ */
+export const formatReportPopup = (teamName, memberHandle) => {
+  return {
+    title: `Issue Report - ${teamName}${
+      !!memberHandle ? " - " + memberHandle : ""
+    }`,
+    textPlaceholder: "Describe your issue",
+    textDataField: "data.reportText",
+    successTitle: "Report submitted successfully",
+    errorTitle: "Report failed",
+  };
+};
+
+/**
+ * Formats popup options for extension requests
+ * @param {string} teamName Team name
+ * @param {string} memberHandle Member Handle
+ *
+ * @returns {Object} Popup Options
+ */
+export const formatExtensionPopup = (teamName, memberHandle) => {
+  return {
+    title: `Extension Request - ${teamName}${
+      memberHandle ? " - " + memberHandle : ""
+    }`,
+    textPlaceholder: "Add any comments...",
+    textDataField: "data.text",
+    successTitle: "Extension request submitted successfully",
+    errorTitle: "Extension request failed",
+  };
+};
+
+/**
+ * Formats data for sending email reports
+ * @param {string} teamName Team name
+ * @param {string|number} teamId Team ID
+ * @param {string} memberHandle Member handle
+ *
+ * @returns {Object} Data object for report
+ */
+export const formatReportData = (teamName, teamId, memberHandle) => {
+  const data = {
+    template: "team-issue-report",
+    data: {
+      projectName: teamName,
+      projectId: teamId,
+    },
+  };
+
+  if (!!memberHandle) {
+    _.set(data, "template", "member-issue-report");
+    _.set(data, "data.userHandle", memberHandle);
+  }
+
+  return data;
+};
+
+/**
+ * Formats data for sending email extension requests
+ * @param {string} teamName Team name
+ * @param {string|number} teamId Team ID
+ * @param {string} memberHandle Member handle
  *
- * @returns {string} request an extension URL
+ * @returns {Object} Data object for extension request
  */
-export const formatRequestExtensionUrl = (subject) => {
-  return `mailto:${EMAIL_REQUEST_EXTENSION}?subject=${encodeURIComponent(
-    subject
-  )}`;
+export const formatExtensionData = (teamName, teamId, memberHandle) => {
+  const data = {
+    template: "extension-request",
+    data: {
+      projectName: teamName,
+      projectId: teamId,
+    },
+  };
+
+  if (!!memberHandle) {
+    _.set(data, "data.userHandle", memberHandle);
+  }
+
+  return data;
 };
 
 /**