diff --git a/src/routes/CreateNewTeam/hooks/useLoadSkills.js b/src/routes/CreateNewTeam/hooks/useLoadSkills.js
new file mode 100644
index 00000000..86b0f695
--- /dev/null
+++ b/src/routes/CreateNewTeam/hooks/useLoadSkills.js
@@ -0,0 +1,36 @@
+/**
+ * useLoadSkills hook
+ */
+import { useEffect, useState } from "react";
+import { flatten, partition } from "lodash";
+import { useData } from "hooks/useData";
+import { getSkills } from "services/skills";
+import { getRoles } from "services/roles";
+
+/**
+ * Hook which loads all skills and roles, then partitions skills based
+ * on whether any role requires the given skill.
+ *
+ * @returns [skills, error] tuple with `skills` array and `error` object
+ */
+export const useLoadSkills = () => {
+ const [skills, skillsError] = useData(getSkills);
+ const [roles, rolesError] = useData(getRoles);
+ const [partedSkills, setPartedSkills] = useState();
+
+ useEffect(() => {
+ if (skills && roles) {
+ const requiredSkills = new Set();
+ roles.forEach((role) => {
+ role.listOfSkills.forEach((skill) => {
+ requiredSkills.add(skill);
+ });
+ });
+ setPartedSkills(() =>
+ flatten(partition(skills, (skill) => requiredSkills.has(skill.name)))
+ );
+ }
+ }, [skills, roles]);
+
+ return [partedSkills, skillsError || rolesError];
+};
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx
index c34c7b1c..17c17188 100644
--- a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx
+++ b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx
@@ -142,6 +142,7 @@ const PaymentForm = ({ calculatedAmount }) => {
} else if (payload.paymentIntent.status === "succeeded") {
toastr.success("Payment is successful");
// setRequestLoading(true);
+ teamObject.positions = _.map(teamObject.positions, p=> _.omit(p, 'isCustomRole'))
postTeamRequest(teamObject)
.then((res) => {
setProjectId(_.get(res, "data.projectId"));
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 00000000..bf4268e0
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentRule/index.jsx
@@ -0,0 +1,84 @@
+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 = () => {
+ 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);
+ teamObject.positions = _.map(teamObject.positions, p=> _.omit(p, 'isCustomRole'))
+ 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 (
+
+
Our commitment to you
+
+ We will do everything we can to find the talent you need within the
+ Topcoder Community.
+
+
Your commitment to us
+
+ 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.
+
+
+ setIsChecked(!isChecked)}
+ />
+
+
+ {processing ? (
+ <>
+
+
+ Confirm
+
+ ) : (
+ <>Confirm
+ )}
+
+
+ );
+};
+
+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 00000000..bd21f64d
--- /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 bca64103..4f4e7d26 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,11 +8,13 @@ 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";
import theme from "./theme";
import FallbackIcon from "../../../../assets/images/icon-role-fallback.svg";
+import TrustedLogos from "../../../../assets/images/trusted-logos.svg";
import "./styles.module.scss";
const stripePromise = loadStripe(process.env.STRIPE_PUBLIC_KEY);
@@ -54,11 +57,14 @@ const CreateTassPayment = () => {
imageUrl,
name,
rate,
+ isCustomRole: role.isCustomRole,
numberOfResources,
durationWeeks,
availability,
});
- amount.push({ rate, numberOfResources });
+ if (!role.isCustomRole) {
+ amount.push({ rate, numberOfResources });
+ }
});
setValue(temp);
@@ -109,15 +115,20 @@ const CreateTassPayment = () => {
{data.name}
-
- {data.numberOfResources} x ${data.rate}/ Week
-
+ {!data.isCustomRole && (
+
+ {data.numberOfResources} x ${data.rate}/ Week
+
+ )}
{data.durationWeeks} Week Duration
{data.availability}
- ${data.numberOfResources * data.rate}
+ $
+ {data.isCustomRole
+ ? "0"
+ : data.numberOfResources * data.rate}