Fixing #445

src/routes/CreateNewTeam/components/ConfirmationModal/index.jsx

@@ -10,7 +10,13 @@ import Button from "components/Button";
 import "./styles.module.scss";
 import Checkbox from "components/Checkbox";
 
-function ConfirmationModal({ open, onClose, onSubmit, isLoading }) {
+function ConfirmationModal({
+  open,
+  onClose,
+  onSubmit,
+  isLoading,
+  loadingMessage,
+}) {
   const [agreed, setAgreed] = useState(false);
 
   const toggleAgreed = () => {
@@ -35,7 +41,7 @@ function ConfirmationModal({ open, onClose, onSubmit, isLoading }) {
       title="Confirmation"
       buttons={confirmButton}
       isLoading={isLoading}
-      loadingMessage="Creating A New Team"
+      loadingMessage={loadingMessage}
     >
       <div styleName="agreement">
         <h5>Our Commitment to You</h5>

src/routes/CreateNewTeam/components/SubmitContainer/index.jsx

@@ -12,7 +12,7 @@ import React, {
   useState,
 } from "react";
 import PT from "prop-types";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import _ from "lodash";
 import { toastr } from "react-redux-toastr";
 import { navigate } from "@reach/router";
@@ -30,7 +30,7 @@ import {
   clearSearchedRoles,
   editRoleAction,
 } from "../../actions";
-import { postTeamRequest } from "services/teams";
+import { postTeamRequest, isExternalMemberRequest } from "services/teams";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 
 function SubmitContainer({
@@ -48,8 +48,10 @@ function SubmitContainer({
   const [teamObject, setTeamObject] = useState(null);
   const [requestLoading, setRequestLoading] = useState(false);
   const [buttonClickable, setButtonClickable] = useState(true);
+  const [msg, setMsg] = useState(false);
 
   const dispatch = useDispatch();
+  const { userId } = useSelector((state) => state.authUser);
 
   const currentRole = useMemo(() => {
     return _.find(addedRoles, { searchId: previousSearchId });
@@ -133,23 +135,33 @@ function SubmitContainer({
   const requestTeam = useCallback(
     (teamObject) => {
       setRequestLoading(true);
-      if (matchingRole.isExternalMember) {
-        dispatch(addTeamObjects(teamObject));
-        navigate("/taas/myteams/createnewteam/create-taas-payment");
-      } else {
-        postTeamRequest(teamObject)
-          .then(() => {
-            setTimeout(() => {
-              dispatch(clearSearchedRoles());
-              // Backend api create project has sync issue, so delay 2 seconds
-              navigate("/taas/myteams");
-            }, 2000);
-          })
-          .catch((err) => {
-            setRequestLoading(false);
-            toastr.error("Error Requesting Team", err.message);
-          });
-      }
+      isExternalMemberRequest({
+        memberId: userId,
+      })
+        .then((res) => {
+          if (res.data) {
+            dispatch(addTeamObjects(teamObject));
+            navigate("/taas/myteams/createnewteam/create-taas-payment");
+          } else {
+            setMsg(true);
+            postTeamRequest(teamObject)
+              .then(() => {
+                setTimeout(() => {
+                  dispatch(clearSearchedRoles());
+                  // Backend api create project has sync issue, so delay 2 seconds
+                  navigate("/taas/myteams");
+                }, 2000);
+              })
+              .catch((err) => {
+                setRequestLoading(false);
+                toastr.error("Error Requesting Team", err.message);
+              });
+          }
+        })
+        .catch((err) => {
+          setRequestLoading(false);
+          toastr.error("Error validating Member", err.message);
+        });
     },
     [dispatch, teamObject]
   );
@@ -193,6 +205,11 @@ function SubmitContainer({
           addedRoles={addedRoles}
         />
       )}
+      <ConfirmationModal
+        open={requestLoading}
+        isLoading={requestLoading}
+        loadingMessage={msg ? "Creating A New Team" : ""}
+      />
       {/* <ConfirmationModal
         open={!!teamObject}
         onClose={() => setTeamObject(null)}

src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx

@@ -239,7 +239,8 @@ const PaymentForm = ({ calculatedAmount }) => {
           {processing ? "Payment Processing" : `Pay $${calculatedAmount}`}
         </button>
       </form>
-      <ConfirmationModal open={requestLoading} isLoading={requestLoading} />
+
+      <ConfirmationModal open={requestLoading} isLoading={requestLoading}  loadingMessage="Creating A New Team"/>
       <PaymentResultPopup
         open={showPaymentResultPopup}
         onContinueClick={goToTassProject}

src/routes/CreateNewTeam/pages/CreateTaasPayment/StripeElement/index.jsx

@@ -5,11 +5,11 @@ import StripeInput from "./StripeInput";
 
 function StripeElement({ onErrorChange, element, icon, width, name }) {
   const [errorMessage, setErrorMessage] = React.useState(null);
-  function handleElementChange({empty, complete, error, elementType }) {
+  function handleElementChange({ empty, complete, error, elementType }) {
     if (!complete || error || empty) {
-      onErrorChange(name, true)
-    }else {
-      onErrorChange(name, false)
+      onErrorChange(name, true);
+    } else {
+      onErrorChange(name, false);
     }
     if (error) {
       if (elementType === "cardNumber") {

src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx

@@ -35,7 +35,7 @@ const CreateTassPayment = () => {
         durationWeeks = 4,
         hoursPerWeek = "40",
       } = role;
-      
+
       let rate;
       let availability;
 

src/services/roles.js

@@ -9,9 +9,11 @@ import config from "../../config";
  * Returns a list of roles.
  */
 export function getRoles() {
-  return axios.get(`${config.API.V5}/taas-roles`).then((response)=>{
-    response.data =  _.filter(response.data, role => _.find(role.rates, r => r.global))
-    return response
+  return axios.get(`${config.API.V5}/taas-roles`).then((response) => {
+    response.data = _.filter(response.data, (role) =>
+      _.find(role.rates, (r) => r.global)
+    );
+    return response;
   });
 }
 

src/services/teams.js

@@ -247,6 +247,7 @@ export const calculateAmount = (amountObject) => {
   const url = `${config.API.V5}/taas-teams/calculateAmount`;
   return axios.post(url, amountObject);
 };
+
 /**
  *
  * @param {Object} paymentObject object containing total amount
@@ -256,3 +257,13 @@ export const postTeamPayment = (paymentObject) => {
   const url = `${config.API.V5}/taas-teams/createPayment`;
   return axios.post(url, paymentObject);
 };
+
+/**
+ *
+ * @param {int} memberIdObject object containing memberId
+ * @returns {Promise<object>} object containing whether member is external or internal
+ */
+export const isExternalMemberRequest = (memberId) => {
+  const url = `${config.API.V5}/taas-teams/isExternalMember`;
+  return axios.post(url, memberId);
+};