Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit a9d6d5f

Browse files
maxceemmaxceem
authored
Merge pull request #522 from yoution/issue-504
fix: issue #504
2 parents 11e7d96 + 36236d8 commit a9d6d5f

File tree

4 files changed

+185
-22
lines changed

4 files changed

+185
-22
lines changed

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

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useState } from "react";
2+
import cn from "classnames";
3+
import { useDispatch, useSelector } from "react-redux";
4+
import { navigate } from "@reach/router";
5+
import _ from "lodash";
6+
import { toastr } from "react-redux-toastr";
7+
import { postTeamRequest } from "services/teams";
8+
import Button from "components/Button";
9+
import Checkbox from "components/Checkbox";
10+
import Spinner from "components/CenteredSpinner";
11+
import { clearSearchedRoles } from "../../../actions";
12+
13+
import "./styles.module.scss";
14+
15+
const PaymentRule = ({ calculatedAmount }) => {
16+
const [processing, setProcessing] = useState(false);
17+
const [isChecked, setIsChecked] = useState(false);
18+
const [clicked, setClicked] = useState(true);
19+
const [projectId, setProjectId] = useState(null);
20+
const dispatch = useDispatch();
21+
const { teamObject } = useSelector((state) => state.searchedRoles);
22+
23+
const handlePostTeam = async (e) => {
24+
setProcessing(true);
25+
postTeamRequest(teamObject)
26+
.then((res) => {
27+
const projectId = _.get(res, "data.projectId");
28+
dispatch(clearSearchedRoles());
29+
navigate(`/taas/myteams/${projectId}`);
30+
})
31+
.catch((err) => {
32+
toastr.error("Error Requesting Team", err.message);
33+
})
34+
.finally(() => {
35+
setProcessing(false);
36+
});
37+
};
38+
39+
return (
40+
<div styleName="commitment-container">
41+
<div styleName="commitment-title">Our commitment to you</div>
42+
<div styleName="commitment-content">
43+
We will do everything we can to find the talent you need within the
44+
Topcoder Community.
45+
</div>
46+
<div styleName="commitment-title">Your commitment to us</div>
47+
<div styleName="commitment-content">
48+
You will only post genuine job opportunities, and will be responsive and
49+
communicative with the candidates provided. You recognize the
50+
freelancers in the Topcoder Community are real people making big
51+
decisions based on your engagement with them.
52+
</div>
53+
<div>
54+
<Checkbox
55+
label="I agree to the above commitments."
56+
checked={isChecked}
57+
onClick={() => setIsChecked(!isChecked)}
58+
/>
59+
</div>
60+
<Button
61+
size="medium"
62+
disabled={!isChecked || processing}
63+
styleName={cn({ processing })}
64+
size="medium"
65+
type="primary"
66+
onClick={handlePostTeam}
67+
>
68+
{processing ? (
69+
<>
70+
<div styleName="spinner">
71+
<Spinner stype="Oval" width="16" height="16" />
72+
</div>
73+
Confirm
74+
</>
75+
) : (
76+
<>Confirm</>
77+
)}
78+
</Button>
79+
</div>
80+
);
81+
};
82+
83+
export default PaymentRule;

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import "styles/include";
2+
3+
.commitment-container {
4+
display: flex;
5+
flex-direction: column;
6+
margin: 0 10px 20px;;
7+
8+
label {
9+
margin-top: 10px;
10+
font-size: 12px;
11+
line-height: 15px;
12+
span:last-child {
13+
width: 15px;
14+
height: 15px;
15+
&:after {
16+
left: 5px;
17+
top: 2px ;
18+
width: 4px ;
19+
height: 9px ;
20+
border-width: 0 2px 2px 0;
21+
}
22+
}
23+
}
24+
25+
26+
button[disabled] {
27+
background-color: #e9e9e9;
28+
color: #fff;
29+
opacity: 1;
30+
filter: none;
31+
}
32+
button {
33+
margin-top: 10px;
34+
display: flex;
35+
width: 100%;
36+
justify-content: center;
37+
&.processing {
38+
pointer-events: none;
39+
}
40+
.spinner {
41+
margin-top: 3px;
42+
margin-right: 5px;
43+
}
44+
}
45+
}
46+
.commitment-title {
47+
@include font-barlow;
48+
49+
margin-bottom: 2px;
50+
font-weight: 600;
51+
color: #2A2A2A;
52+
font-size: 16px;
53+
line-height: 20px;
54+
text-transform: uppercase;
55+
}
56+
57+
.commitment-content {
58+
@include font-roboto;
59+
60+
color: #2A2A2A;
61+
font-size: 14px;
62+
line-height: 22px;
63+
margin-bottom: 10px;
64+
}

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

+34-22
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { useState, useEffect, useCallback } from "react";
22
import _ from "lodash";
3+
import cn from "classnames";
34
import { useSelector } from "react-redux";
45
import { Elements } from "@stripe/react-stripe-js";
56
import { loadStripe } from "@stripe/stripe-js";
67
import { ThemeProvider } from "@material-ui/styles";
78
import { toastr } from "react-redux-toastr";
89

910
import PaymentForm from "./PaymentForm";
11+
import PaymentRule from "./PaymentRule";
1012
import PageHeader from "components/PageHeader";
1113
import { calculateAmount } from "services/teams";
1214
import Progress from "../../components/Progress";
@@ -134,34 +136,44 @@ const CreateTassPayment = () => {
134136
))}
135137
</div>
136138
</div>
137-
<p styleName="heading terms-title">Deposit & Refund Terms</p>
138-
<ul styleName="terms">
139-
<li>This is a refundable deposit payment.</li>
140-
<li>
141-
Topcoder will find you qualified candidates within 2 weeks, or
142-
your money back.
143-
</li>
144-
<li>
145-
If we find you talent that meets your needs, this deposit will
146-
be credited towards your payment.
147-
</li>
148-
<li>
149-
If we are only able to partially fill your talent order, we
150-
will refund any portion we cannot fulfill.
151-
</li>
152-
<li>
153-
Future payments can be processed on this credit card or you
154-
can arrange invoicing.
155-
</li>
156-
</ul>
139+
{calculatedAmount ? (
140+
<>
141+
<p styleName="heading terms-title">Deposit & Refund Terms</p>
142+
<ul styleName="terms">
143+
<li>This is a refundable deposit payment.</li>
144+
<li>
145+
Topcoder will find you qualified candidates within 2
146+
weeks, or your money back.
147+
</li>
148+
<li>
149+
If we find you talent that meets your needs, this deposit
150+
will be credited towards your payment.
151+
</li>
152+
<li>
153+
If we are only able to partially fill your talent order,
154+
we will refund any portion we cannot fulfill.
155+
</li>
156+
<li>
157+
Future payments can be processed on this credit card or
158+
you can arrange invoicing.
159+
</li>
160+
</ul>
161+
</>
162+
) : null}
157163
</div>
158-
<div styleName="payment">
164+
<div
165+
styleName={cn("payment", { "show-rule": calculatedAmount === 0 })}
166+
>
159167
<p styleName="amount">${calculatedAmount}</p>
160168
<p styleName="deposit">Total Deposit</p>
161169
<hr />
162170
<Elements stripe={stripePromise}>
163171
<ThemeProvider theme={theme}>
164-
<PaymentForm calculatedAmount={calculatedAmount} />
172+
{calculatedAmount ? (
173+
<PaymentForm calculatedAmount={calculatedAmount} />
174+
) : (
175+
<PaymentRule calculatedAmount={calculatedAmount} />
176+
)}
165177
</ThemeProvider>
166178
</Elements>
167179
</div>

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

+4
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,10 @@
138138
min-height: 570px;
139139
margin-left: 15px;
140140

141+
&.show-rule {
142+
min-height: auto;
143+
}
144+
141145
hr {
142146
background-color: #aaaaaa;
143147
height: 1px;

0 commit comments

Comments
 (0)