From 1d104aa6e64079e0eee5f26d133b8f5cefb015c6 Mon Sep 17 00:00:00 2001
From: Michael Baghel <michael.baghel@gmail.com>
Date: Fri, 26 Feb 2021 12:56:19 +0400
Subject: [PATCH 1/2] Refactored Report Popup  to more general EmailPopup
 Replaced email logic for extension request with Email Popup

---
 config/dev.js                                 |  5 --
 config/prod.js                                |  5 --
 src/components/EmailPopup/actions/index.js    | 21 +++++
 .../EmailPopup/hooks/useEmailPopup.js         | 20 +++++
 .../{ReportPopup => EmailPopup}/index.jsx     | 36 ++++----
 .../reducers/index.js                         | 15 ++--
 src/components/ReportPopup/actions/index.js   | 22 -----
 .../ReportPopup/hooks/useReportPopup.js       | 20 -----
 src/constants/index.js                        |  6 +-
 src/reducers/index.js                         |  4 +-
 .../components/TeamMembers/index.jsx          | 35 ++++++--
 .../components/TeamSummary/index.jsx          | 11 ++-
 src/routes/MyTeamsDetails/index.jsx           |  4 +-
 .../MyTeamsList/components/TeamCard/index.jsx | 11 ++-
 src/routes/MyTeamsList/index.jsx              |  4 +-
 src/services/teams.js                         | 23 +----
 src/utils/format.js                           | 84 +++++++++++++++++--
 17 files changed, 201 insertions(+), 125 deletions(-)
 create mode 100644 src/components/EmailPopup/actions/index.js
 create mode 100644 src/components/EmailPopup/hooks/useEmailPopup.js
 rename src/components/{ReportPopup => EmailPopup}/index.jsx (62%)
 rename src/components/{ReportPopup => EmailPopup}/reducers/index.js (65%)
 delete mode 100644 src/components/ReportPopup/actions/index.js
 delete mode 100644 src/components/ReportPopup/hooks/useReportPopup.js

diff --git a/config/dev.js b/config/dev.js
index 54870756..2cba0084 100644
--- a/config/dev.js
+++ b/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",
diff --git a/config/prod.js b/config/prod.js
index e2069074..21cdc373 100644
--- a/config/prod.js
+++ b/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",
diff --git a/src/components/EmailPopup/actions/index.js b/src/components/EmailPopup/actions/index.js
new file mode 100644
index 00000000..5c5ba629
--- /dev/null
+++ b/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,
+});
diff --git a/src/components/EmailPopup/hooks/useEmailPopup.js b/src/components/EmailPopup/hooks/useEmailPopup.js
new file mode 100644
index 00000000..4f80a7f4
--- /dev/null
+++ b/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));
+  };
+};
diff --git a/src/components/ReportPopup/index.jsx b/src/components/EmailPopup/index.jsx
similarity index 62%
rename from src/components/ReportPopup/index.jsx
rename to src/components/EmailPopup/index.jsx
index c897bebc..492f8660 100644
--- a/src/components/ReportPopup/index.jsx
+++ b/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,7 +53,7 @@ function ReportPopup() {
   );
 
   const closeModal = useCallback(() => {
-    dispatch(closeReport());
+    dispatch(closeEmailPopup());
     setTextVal("");
   }, [dispatch]);
 
@@ -57,9 +61,7 @@ function ReportPopup() {
     <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;
diff --git a/src/components/ReportPopup/reducers/index.js b/src/components/EmailPopup/reducers/index.js
similarity index 65%
rename from src/components/ReportPopup/reducers/index.js
rename to src/components/EmailPopup/reducers/index.js
index 91eba6f1..ca9b33cf 100644
--- a/src/components/ReportPopup/reducers/index.js
+++ b/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,
diff --git a/src/components/ReportPopup/actions/index.js b/src/components/ReportPopup/actions/index.js
deleted file mode 100644
index 0e85b216..00000000
--- a/src/components/ReportPopup/actions/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Report popup actions
- */
-import { ACTION_TYPE } from "constants";
-
-/**
- * Action to populate the report info and open a report popup
- * @param {string} teamName Team name
- * @param {string|number} teamId Tead ID
- * @param {string} memberHandle Member handle
- */
-export const openReport = (teamName, teamId, memberHandle) => ({
-  type: ACTION_TYPE.OPEN_REPORT,
-  payload: { teamName, teamId, memberHandle },
-});
-
-/**
- * Action to close a report popup
- */
-export const closeReport = () => ({
-  type: ACTION_TYPE.CLOSE_REPORT,
-});
diff --git a/src/components/ReportPopup/hooks/useReportPopup.js b/src/components/ReportPopup/hooks/useReportPopup.js
deleted file mode 100644
index 9a1c376e..00000000
--- a/src/components/ReportPopup/hooks/useReportPopup.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Use report popup hook
- */
-
-import { useDispatch } from "react-redux";
-import { openReport } from "../actions";
-
-/**
- * Hook to allow report 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 useReportPopup = () => {
-  const dispatch = useDispatch();
-
-  return (teamName, teamId, memberHandle) => {
-    dispatch(openReport(teamName, teamId, memberHandle));
-  };
-};
diff --git a/src/constants/index.js b/src/constants/index.js
index 359d223c..ad6177d5 100644
--- a/src/constants/index.js
+++ b/src/constants/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
diff --git a/src/reducers/index.js b/src/reducers/index.js
index eedfe333..14f1b87c 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.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,
 });
 
diff --git a/src/routes/MyTeamsDetails/components/TeamMembers/index.jsx b/src/routes/MyTeamsDetails/components/TeamMembers/index.jsx
index d1a8eacc..834ebbb5 100644
--- a/src/routes/MyTeamsDetails/components/TeamMembers/index.jsx
+++ b/src/routes/MyTeamsDetails/components/TeamMembers/index.jsx
@@ -19,11 +19,14 @@ 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";
 
@@ -31,7 +34,7 @@ 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
                               )
                             );
                           },
diff --git a/src/routes/MyTeamsDetails/components/TeamSummary/index.jsx b/src/routes/MyTeamsDetails/components/TeamSummary/index.jsx
index 9689a509..00ba6216 100644
--- a/src/routes/MyTeamsDetails/components/TeamSummary/index.jsx
+++ b/src/routes/MyTeamsDetails/components/TeamSummary/index.jsx
@@ -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"
         >
diff --git a/src/routes/MyTeamsDetails/index.jsx b/src/routes/MyTeamsDetails/index.jsx
index f8ed5286..d1438b40 100644
--- a/src/routes/MyTeamsDetails/index.jsx
+++ b/src/routes/MyTeamsDetails/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>
   );
 };
diff --git a/src/routes/MyTeamsList/components/TeamCard/index.jsx b/src/routes/MyTeamsList/components/TeamCard/index.jsx
index afc4e374..4bb9dade 100644
--- a/src/routes/MyTeamsList/components/TeamCard/index.jsx
+++ b/src/routes/MyTeamsList/components/TeamCard/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)
+                );
               },
             },
           ]}
diff --git a/src/routes/MyTeamsList/index.jsx b/src/routes/MyTeamsList/index.jsx
index 85da5b6f..e7fe2466 100644
--- a/src/routes/MyTeamsList/index.jsx
+++ b/src/routes/MyTeamsList/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>
   );
 };
diff --git a/src/services/teams.js b/src/services/teams.js
index ff23834e..659ebce2 100644
--- a/src/services/teams.js
+++ b/src/services/teams.js
@@ -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);
 };
 
 /**
diff --git a/src/utils/format.js b/src/utils/format.js
index da1d551b..408d19d5 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -124,16 +124,86 @@ 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",
+  };
+};
+
+/**
+ * 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",
+  };
+};
+
+/**
+ * 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;
 };
 
 /**

From 04643b658537dd0b417ea77aabecd1d67be653fc Mon Sep 17 00:00:00 2001
From: Michael Baghel <michael.baghel@gmail.com>
Date: Fri, 26 Feb 2021 17:31:54 +0400
Subject: [PATCH 2/2] Avoid mutating redux state, set success and error titles
 in popup options, coding style fixes

---
 src/components/EmailPopup/index.jsx | 12 +++++++-----
 src/utils/format.js                 |  8 ++++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/EmailPopup/index.jsx b/src/components/EmailPopup/index.jsx
index 492f8660..b530225c 100644
--- a/src/components/EmailPopup/index.jsx
+++ b/src/components/EmailPopup/index.jsx
@@ -26,24 +26,26 @@ function EmailPopup() {
   const submitEmail = () => {
     setIsLoading(true);
 
-    _.set(data, popupOptions.textDataField, textVal);
+    const postData = _.merge({}, data);
 
-    postEmail(data)
+    _.set(postData, popupOptions.textDataField, textVal);
+
+    postEmail(postData)
       .then(() => {
         setIsLoading(false);
         closeModal();
-        toastr.success("Email submitted successfully");
+        toastr.success(popupOptions.successTitle);
       })
       .catch((err) => {
         setIsLoading(false);
 
-        toastr.error("Email failed to send", err.message);
+        toastr.error(popupOptions.errorTitle, err.message);
       });
   };
 
   const button = (
     <Button
-      onClick={() => submitEmail()}
+      onClick={submitEmail}
       size="medium"
       isSubmit
       disabled={textVal.trim().length < 1 || isLoading}
diff --git a/src/utils/format.js b/src/utils/format.js
index 408d19d5..0e1801b7 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -137,6 +137,8 @@ export const formatReportPopup = (teamName, memberHandle) => {
     }`,
     textPlaceholder: "Describe your issue",
     textDataField: "data.reportText",
+    successTitle: "Report submitted successfully",
+    errorTitle: "Report failed",
   };
 };
 
@@ -154,6 +156,8 @@ export const formatExtensionPopup = (teamName, memberHandle) => {
     }`,
     textPlaceholder: "Add any comments...",
     textDataField: "data.text",
+    successTitle: "Extension request submitted successfully",
+    errorTitle: "Extension request failed",
   };
 };
 
@@ -175,8 +179,8 @@ export const formatReportData = (teamName, teamId, memberHandle) => {
   };
 
   if (!!memberHandle) {
-    _.set(data, "template", "member-issue-report"),
-      _.set(data, "data.userHandle", memberHandle);
+    _.set(data, "template", "member-issue-report");
+    _.set(data, "data.userHandle", memberHandle);
   }
 
   return data;