fix: issue #504

Author: yoution

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

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import cn from "classnames";
 import { useDispatch, useSelector } from "react-redux";
 import {
   CardNumberElement,
@@ -15,6 +16,9 @@ import Typography from "@material-ui/core/Typography";
 import Box from "@material-ui/core/Box";
 
 import { postTeamPayment, postTeamRequest } from "services/teams";
+import Button from "components/Button";
+import Checkbox from "components/Checkbox";
+import Spinner from "components/CenteredSpinner";
 import { clearSearchedRoles } from "../../../actions";
 import StripeElement from "../StripeElement";
 import FormField from "../FormField";
@@ -53,6 +57,7 @@ const PaymentForm = ({ calculatedAmount }) => {
   const [dropdownValue, setDropdownValue] = useState("");
   const [processing, setProcessing] = useState(false);
   const [showPaymentResultPopup, setShowPaymentResultPopup] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
   const [requestLoading, setRequestLoading] = useState(false);
   const [errors, setErrors] = useState({
     card: true,
@@ -162,6 +167,22 @@ const PaymentForm = ({ calculatedAmount }) => {
     }
   };
 
+  const handlePostTeam = async (e) => {
+      setProcessing(true);
+      postTeamRequest(teamObject)
+        .then((res) => {
+            const projectId = _.get(res, "data.projectId");
+            dispatch(clearSearchedRoles());
+            navigate(`/taas/myteams/${projectId}`);
+        })
+        .catch((err) => {
+          toastr.error("Error Requesting Team", err.message);
+        })
+        .finally(() => {
+          setProcessing(false);
+        });
+    };
+
   const formIsValid = (fieldValues = formValues) => {
     // check card valid
     const cardValid =
@@ -179,6 +200,51 @@ const PaymentForm = ({ calculatedAmount }) => {
   };
 
   const classes = useStyles();
+  if (!calculatedAmount) {
+    return (
+      <div styleName="commitment-container">
+        <div styleName="commitment-title">
+          Our commitment to you
+        </div>
+        <div styleName="commitment-content">
+          We will do everything we can to find the talent you need within the Topcoder Community.
+        </div>
+        <div styleName="commitment-title">
+          Your commitment to us
+        </div>
+        <div styleName="commitment-content">
+          You will only post genuine job opportunities, and will be responsive and communicative with the candidates provided. You recognize the freelancers in the Topcoder Community are real people making big decisions based on your engagement with them.
+        </div>
+        <div>
+        <Checkbox
+          label="I agree to the above commitments."
+          checked={isChecked}
+          onClick={()=> setIsChecked(!isChecked)}
+        />
+        </div>
+        <Button 
+          size="medium"
+          disabled={!isChecked || processing}
+          styleName={cn({ processing })}
+          size="medium"
+          type="primary"
+          onClick={handlePostTeam}
+        >
+          {processing ? (
+            <>
+              <div styleName="spinner">
+                <Spinner stype="Oval" width="16" height="16" />
+              </div>
+              Confirm 
+            </>
+          ) : 
+          <>Confirm</>
+          }
+        </Button>
+      </div>
+    )
+  }
+
   return (
     <>
       <form onSubmit={handleFormSubmit}>

src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/styles.module.scss

@@ -1,3 +1,5 @@
+@import "styles/include";
+
 .button {
   background: #137d60;
   border-radius: 20px;
@@ -19,3 +21,52 @@
   display: flex;
   width: "100%";
 }
+
+.commitment-container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px;
+
+  label {
+    margin-top: 20px;
+  }
+
+
+  button[disabled] {
+    background-color: #e9e9e9;
+    color: #fff;
+    opacity: 1;
+    filter: none;
+  }
+  button {
+    margin-top: 10px;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    &.processing {
+      pointer-events: none;
+    }
+    .spinner {
+      margin-top: 3px;
+      margin-right: 5px;
+    }
+  }
+}
+.commitment-title {
+  @include font-barlow;
+
+  font-weight: 600;
+  color: #2A2A2A;
+  font-size: 16px;
+  line-height: 20px;
+  text-transform: uppercase;
+}
+
+.commitment-content {
+  @include font-roboto;
+
+  color: #2A2A2A;
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 10px;
+}

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

@@ -134,26 +134,28 @@ const CreateTassPayment = () => {
                   ))}
                 </div>
               </div>
-              <p styleName="heading terms-title">Deposit & Refund Terms</p>
-              <ul styleName="terms">
-                <li>This is a refundable deposit payment.</li>
-                <li>
-                  Topcoder will find you qualified candidates within 2 weeks, or
-                  your money back.
-                </li>
-                <li>
-                  If we find you talent that meets your needs, this deposit will
-                  be credited towards your payment.
-                </li>
-                <li>
-                  If we are only able to partially fill your talent order, we
-                  will refund any portion we cannot fulfill.
-                </li>
-                <li>
-                  Future payments can be processed on this credit card or you
-                  can arrange invoicing.
-                </li>
-              </ul>
+              {calculatedAmount ? <>
+                <p styleName="heading terms-title">Deposit & Refund Terms</p>
+                <ul styleName="terms">
+                  <li>This is a refundable deposit payment.</li>
+                  <li>
+                    Topcoder will find you qualified candidates within 2 weeks, or
+                    your money back.
+                  </li>
+                  <li>
+                    If we find you talent that meets your needs, this deposit will
+                    be credited towards your payment.
+                  </li>
+                  <li>
+                    If we are only able to partially fill your talent order, we
+                    will refund any portion we cannot fulfill.
+                  </li>
+                  <li>
+                    Future payments can be processed on this credit card or you
+                    can arrange invoicing.
+                  </li>
+                </ul>
+            </>: null}
             </div>
             <div styleName="payment">
               <p styleName="amount">${calculatedAmount}</p>