Refactored Report Popup to more general EmailPopup

Replaced email logic for extension request with Email Popup

Author: mbaghel

config/dev.js

@@ -9,11 +9,6 @@ module.exports = {
    */
   CONNECT_WEBSITE_URL: "https://connect.topcoder-dev.com",
 
-  /**
-   * Email to request extension
-   */
-  EMAIL_REQUEST_EXTENSION: "[email protected]",
-
   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: "[email protected]",
-
   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,49 @@
 /**
- * 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)
+    _.set(data, popupOptions.textDataField, textVal);
+
+    postEmail(data)
       .then(() => {
         setIsLoading(false);
         closeModal();
-        toastr.success("Report submitted successfully");
+        toastr.success("Email submitted successfully");
       })
       .catch((err) => {
         setIsLoading(false);
 
-        toastr.error("Report failed", err.message);
+        toastr.error("Email failed to send", err.message);
       });
   };
 
   const button = (
     <Button
-      onClick={() => submitReport()}
+      onClick={() => submitEmail()}
       size="medium"
       isSubmit
       disabled={textVal.trim().length < 1 || isLoading}
@@ -49,17 +53,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 +71,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>
   );
 };