fix: issue #504

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

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import cn from "classnames";
+import { useDispatch, useSelector } from "react-redux";
+import { navigate } from "@reach/router";
+import _ from "lodash";
+import { toastr } from "react-redux-toastr";
+import { postTeamRequest } from "services/teams";
+import Button from "components/Button";
+import Checkbox from "components/Checkbox";
+import Spinner from "components/CenteredSpinner";
+import { clearSearchedRoles } from "../../../actions";
+
+import "./styles.module.scss";
+
+const PaymentRule = ({ calculatedAmount }) => {
+  const [processing, setProcessing] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
+  const [clicked, setClicked] = useState(true);
+  const [projectId, setProjectId] = useState(null);
+  const dispatch = useDispatch();
+  const { teamObject } = useSelector((state) => state.searchedRoles);
+
+  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);
+      });
+  };
+
+  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>
+  );
+};
+
+export default PaymentRule;

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

@@ -0,0 +1,64 @@
+@import "styles/include";
+
+.commitment-container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px 20px;;
+
+  label {
+    margin-top: 10px;
+    font-size: 12px;
+    line-height: 15px;
+    span:last-child {
+      width: 15px;
+      height: 15px;
+      &:after {
+        left: 5px;
+        top: 2px ;
+        width: 4px ;
+        height: 9px ;
+        border-width: 0 2px 2px 0;
+      }
+    }
+  }
+
+
+  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;
+
+  margin-bottom: 2px;
+  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

@@ -1,12 +1,14 @@
 import React, { useState, useEffect, useCallback } from "react";
 import _ from "lodash";
+import cn from "classnames";
 import { useSelector } from "react-redux";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { ThemeProvider } from "@material-ui/styles";
 import { toastr } from "react-redux-toastr";
 
 import PaymentForm from "./PaymentForm";
+import PaymentRule from "./PaymentRule";
 import PageHeader from "components/PageHeader";
 import { calculateAmount } from "services/teams";
 import Progress from "../../components/Progress";
@@ -134,34 +136,44 @@ 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">
+            <div
+              styleName={cn("payment", { "show-rule": calculatedAmount === 0 })}
+            >
               <p styleName="amount">${calculatedAmount}</p>
               <p styleName="deposit">Total Deposit</p>
               <hr />
               <Elements stripe={stripePromise}>
                 <ThemeProvider theme={theme}>
-                  <PaymentForm calculatedAmount={calculatedAmount} />
+                  {calculatedAmount ? (
+                    <PaymentForm calculatedAmount={calculatedAmount} />
+                  ) : (
+                    <PaymentRule calculatedAmount={calculatedAmount} />
+                  )}
                 </ThemeProvider>
               </Elements>
             </div>

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

@@ -138,6 +138,10 @@
       min-height: 570px;
       margin-left: 15px;
 
+      &.show-rule {
+        min-height: auto;
+      }
+
       hr {
         background-color: #aaaaaa;
         height: 1px;