+
+
+
+
+ );
+};
+
+export default CreateTassPayment;
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss b/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss
new file mode 100644
index 00000000..02102838
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/CreateTaasPayment/styles.module.scss
@@ -0,0 +1,169 @@
+@import "styles/include";
+
+.taas-payment {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-start;
+ margin: 42px 35px;
+ .right-side {
+ display: flex;
+ flex-direction: column;
+ & > div:not(:first-child) {
+ margin-top: 16px;
+ }
+ }
+ input {
+ border: none !important;
+ box-shadow: none !important;
+ transition: none !important;
+ }
+
+ .main-container {
+ @include rounded-card;
+ max-width: 746px;
+ width: 50vw;
+ margin-right: 30px;
+ background: #ffffff;
+ min-height: 730px;
+ display: flex;
+ justify-content: center;
+
+ .page-title {
+ font-weight: 500;
+ }
+
+ .content-container {
+ display: flex;
+ }
+
+ .roles-container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .summary {
+ margin-right: 15px;
+
+ .scroll {
+ max-height: 300px;
+ overflow-y: auto;
+ }
+
+ .role-container {
+ width: 358px;
+ margin-top: 14px;
+
+ .roles {
+ display: flex;
+ justify-content: space-between;
+ margin-right: 15px;
+ }
+
+ .image {
+ background-color: #ffffff;
+ border: 1px solid #d4d4d4;
+ border-radius: 5px;
+ width: 30px;
+ height: 30px;
+ }
+
+ .title {
+ @include font-roboto;
+ font-size: 14px;
+ line-height: 17px;
+ text-align: left;
+ font-weight: 500;
+ margin-left: 10px;
+ }
+
+ .details {
+ display: flex;
+ flex-direction: column;
+ @include font-roboto;
+ color: #555555;
+ font-size: 11px;
+ line-height: 15px;
+ text-align: left;
+ margin-left: 10px;
+ }
+
+ .amount {
+ @include font-roboto;
+ font-size: 14px;
+ line-height: 17px;
+ text-align: right;
+ font-weight: 500;
+ margin-left: 10px;
+ margin-left: auto;
+ }
+
+ .divider {
+ background-color: #e9e9e9;
+ width: 358px;
+ height: 1px;
+ margin-top: 14px;
+ }
+ }
+ }
+
+ .heading {
+ @include font-barlow;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 20px;
+ text-transform: uppercase;
+ }
+
+ .terms-title {
+ margin-top: 30px;
+ }
+
+ .terms {
+ list-style-type: disc;
+ padding: 15px 0px 0px 25px;
+ color: #2a2a2a;
+ @include font-roboto;
+ font-size: 12px;
+ line-height: 18px;
+ width: 358px;
+ text-align: left;
+ }
+
+ .payment {
+ background-color: #ffffff;
+ border: 2px solid #d4d4d4;
+ border-radius: 8px;
+ width: 298px;
+ min-height: 570px;
+ margin-left: 15px;
+
+ hr {
+ background-color: #aaaaaa;
+ height: 1px;
+ margin: 20px 10px;
+ }
+
+ .amount {
+ color: #1e94a3;
+ @include font-barlow-condensed;
+ font-size: 48px;
+ line-height: 50px;
+ text-align: center;
+ margin-top: 20px;
+ }
+
+ .deposit {
+ color: #7f7f7f;
+ @include font-roboto;
+ font-size: 12px;
+ letter-spacing: 1px;
+ line-height: 16px;
+ text-align: center;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-top: 6px;
+ }
+ }
+ }
+}
diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/theme.js b/src/routes/CreateNewTeam/pages/CreateTaasPayment/theme.js
new file mode 100644
index 00000000..d11d8cb4
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/CreateTaasPayment/theme.js
@@ -0,0 +1,17 @@
+import { createTheme } from "@material-ui/core/styles";
+
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: "#229174",
+ },
+ error: {
+ main: "#EF476F",
+ },
+ background: {
+ default: "#ffffff",
+ },
+ },
+});
+
+export default theme;
diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx
index 53244633..307a4a97 100644
--- a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx
+++ b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx
@@ -18,6 +18,7 @@ function InputJobDescription() {
{ name: "Input Job Description", isCurrent: true },
{ name: "Search Member" },
{ name: "Overview of the Results" },
+ { name: "Refundable Deposite Payment" },
]);
const [jdString, setJdString] = useState("");
const [jobTitle, setJobTitle] = useState("");
diff --git a/src/routes/CreateNewTeam/pages/InputSkills/index.jsx b/src/routes/CreateNewTeam/pages/InputSkills/index.jsx
index 516c057b..20ff6ede 100644
--- a/src/routes/CreateNewTeam/pages/InputSkills/index.jsx
+++ b/src/routes/CreateNewTeam/pages/InputSkills/index.jsx
@@ -21,6 +21,7 @@ function InputSkills() {
{ name: "Input Skills", isCurrent: true },
{ name: "Search Member" },
{ name: "Overview of the Results" },
+ { name: "Refundable Deposite Payment" },
]);
const [selectedSkills, setSelectedSkills] = useState([]);
const [popupSelectedSkills, setPopupSelectedSkills] = useState([]);
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
index 88dcc6ff..54911650 100644
--- a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
+++ b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx
@@ -25,6 +25,7 @@ function SelectRole() {
{ name: "Select a Role", isCurrent: true },
{ name: "Search Member" },
{ name: "Overview of the Results" },
+ { name: "Refundable Deposite Payment" },
]);
const [selectedRoleId, setSelectedRoleId] = useState(null);
const [roleDetailsModalOpen, setRoleDetailsModalOpen] = useState(false);
diff --git a/src/routes/CreateNewTeam/reducers/index.js b/src/routes/CreateNewTeam/reducers/index.js
index 3e14ceac..5212d05f 100644
--- a/src/routes/CreateNewTeam/reducers/index.js
+++ b/src/routes/CreateNewTeam/reducers/index.js
@@ -1,6 +1,7 @@
/**
* Reducer for CreateNewTeam flow
*/
+import _ from "lodash";
import { ACTION_TYPE } from "constants";
const loadState = () => {
@@ -9,6 +10,7 @@ const loadState = () => {
addedRoles: [],
matchingRole: undefined,
isLoading: false,
+ teamObject: undefined,
};
try {
const state = localStorage.getItem("rolesState");
@@ -40,6 +42,12 @@ const reducer = (state = initialState, action) => {
addedRoles: [],
};
+ case ACTION_TYPE.ADD_TEAM_OBJECT:
+ return {
+ ...state,
+ teamObject: action.payload,
+ };
+
case ACTION_TYPE.ADD_MATCHING_ROLE:
return {
...state,
diff --git a/src/services/teams.js b/src/services/teams.js
index b8b4200c..8bb646e7 100644
--- a/src/services/teams.js
+++ b/src/services/teams.js
@@ -237,3 +237,22 @@ export const postTeamRequest = (teamObject) => {
const url = `${config.API.V5}/taas-teams/submitTeamRequest`;
return axios.post(url, teamObject);
};
+
+/**
+ *
+ * @param {Object} amountObject object containing details for calculating total amount
+ * @returns {Promise
+
+
+ Confirm your request
}
+ backTo="/taas/createnewteam/role/result"
+ />
+
+
+
+
+
+
+ summary
+
+ {addedRoles.map((role) => (
+
+
+
+
+ ))}
+
+ 
+
+
+
+ {role.name}
+-
+
- + {role.numberOfResources} x ${dummyRates.global}/ + Week + +
- {role.durationWeeks} Week Duration +
- + {role.hoursPerWeek + ? "Part-Time Availability" + : "Full-Time Availability"} + +
+ ${role.numberOfResources * dummyRates.global} +
++
Deposit & Refund Terms
+-
+
- This is a refundable deposit payment. +
- + Topcoder will find you qualified candidates within 2 weeks, or + your money back. + +
- + If we find you talent that meets your needs, this deposit will + be credited towards your payment. + +
- + If we are only able to partially fill your talent order, we + will refund any portion we cannot fulfill. + +
- + Future payments can be processed on this credit card or you + can arrange invoicing. + +
+
+
+
+
+
+
+ ${calculatedAmount}
+Total Deposit
++