From 36236d80188ed7455bd5df0686f727459d7ec2b1 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Sat, 23 Oct 2021 20:17:02 +0800
Subject: [PATCH] fix: issue #504
---
.../CreateTaasPayment/PaymentRule/index.jsx | 83 +++++++++++++++++++
.../PaymentRule/styles.module.scss | 64 ++++++++++++++
.../pages/CreateTaasPayment/index.jsx | 56 ++++++++-----
.../CreateTaasPayment/styles.module.scss | 4 +
4 files changed, 185 insertions(+), 22 deletions(-)
create mode 100644 src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentRule/index.jsx
create mode 100644 src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentRule/styles.module.scss
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentRule/index.jsx b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentRule/index.jsx
new file mode 100644
index 0000000..1156d21
--- /dev/null
+++ b/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;
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentRule/styles.module.scss b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentRule/styles.module.scss
new file mode 100644
index 0000000..bd21f64
--- /dev/null
+++ b/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;
+}
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx b/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx
index d14ff38..0605abb 100644
--- a/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx
+++ b/src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx
@@ -1,5 +1,6 @@
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";
@@ -7,6 +8,7 @@ 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>
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss b/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss
index 14ee489..26a76d1 100644
--- a/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss
+++ b/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;