Fixing Stripe Key, fixing teamObject and Updating logic for rates selection.

Author: Arpitkumar Chaudhari

config/dev.js

@@ -13,6 +13,4 @@ module.exports = {
     V5: "https://api.topcoder-dev.com/v5", //"http://localhost:3030/api/v5"
     V3: "https://api.topcoder-dev.com/v3",
   },
-
-  STRIPE_PUBLIC_KEY: "",
 };

config/prod.js

@@ -13,6 +13,4 @@ module.exports = {
     V5: "https://api.topcoder.com/v5",
     V3: "https://api.topcoder.com/v3",
   },
-
-  STRIPE_PUBLIC_KEY: "",
 };

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

@@ -115,29 +115,32 @@ function SubmitContainer({
 
     setTeamDetailsOpen(false);
     setTeamObject(teamObject);
-    requestTeam();
+    requestTeam(teamObject);
   };
 
-  const requestTeam = useCallback(() => {
-    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);
-        });
-    }
-  }, [dispatch, teamObject]);
+  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);
+          });
+      }
+    },
+    [dispatch, teamObject]
+  );
 
   return (
     <div styleName="page">

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

@@ -5,7 +5,6 @@ import { loadStripe } from "@stripe/stripe-js";
 import { ThemeProvider } from "@material-ui/styles";
 import { toastr } from "react-redux-toastr";
 
-import config from "../../../../../config";
 import PaymentForm from "./PaymentForm";
 import PageHeader from "components/PageHeader";
 import { calculateAmount } from "services/teams";
@@ -14,7 +13,7 @@ import theme from "./theme";
 import FallbackIcon from "../../../../assets/images/icon-role-fallback.svg";
 import "./styles.module.scss";
 
-const stripePromise = loadStripe(config.STRIPE_PUBLIC_KEY);
+const stripePromise = loadStripe(process.env.STRIPE_PUBLIC_KEY);
 
 const CreateTassPayment = () => {
   const [calculatedAmount, setCalculatedAmount] = useState(0);
@@ -37,9 +36,11 @@ const CreateTassPayment = () => {
       } = role;
       let rate;
 
-      if (hoursPerWeek === "30") rate = rates.rate30Global;
-      else if (hoursPerWeek === "20") rate = rates.rate20Global;
-      else if (hoursPerWeek === "40") rate = rates.global;
+      if (hoursPerWeek) {
+        if (hoursPerWeek === "30") rate = rates.rate30Global;
+        else if (hoursPerWeek === "20") rate = rates.rate20Global;
+        else if (hoursPerWeek === "40") rate = rates.global;
+      } else rate = rates.global;
 
       temp.push({
         imageUrl,