Merge pull request #379 from mbaghel/roles-milestone18

Roles milestone18 - Med and Low complexity

Author: nikolay83

package-lock.json

@@ -87,7 +87,8 @@
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.3.0",
-    "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4"
+    "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
+    "uuid": "^8.3.2"
   },
   "browserslist": [
     "last 1 version",

package.json

@@ -0,0 +1,13 @@
+import React from "react";
+import "./styles.module.scss";
+
+function CustomerScroll() {
+  return (
+    <div>
+      <h6 styleName="title">Trusted By</h6>
+      <div styleName="scrolling-logos" />
+    </div>
+  );
+}
+
+export default CustomerScroll;

src/assets/images/customer-logos.svg

@@ -0,0 +1,45 @@
+@import "styles/include";
+
+.title {
+  @include font-barlow;
+  font-weight: 600;
+  font-size: 22px;
+  color: #7f7f7f;
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: 30px;
+}
+
+@keyframes scroll {
+  from {background-position: 0 0;}
+  to {background-position: -7701px 0;}
+}
+
+.scrolling-logos {
+  background-image: url("../../assets/images/customer-logos.svg");
+  height: 60px;
+  width: 100%;
+  animation: scroll 300s linear infinite;
+  position: relative;
+
+  &:before {
+    background: linear-gradient(to right, #F4F5F6 0%, rgba(255, 255, 255, 0) 100%);
+    content: '';
+    height: 60px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 60px;
+    z-index: 2;
+  }
+  &:after {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #F4F5F6 100%);
+    content: '';
+    height: 60px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 60px;
+    z-index: 2;
+  }
+}

src/components/CustomerScroll/index.jsx

@@ -10,6 +10,7 @@ import JobDetails from "./routes/JobDetails";
 import JobForm from "./routes/JobForm";
 import TeamAccess from "./routes/TeamAccess";
 import CreateNewTeam from "./routes/CreateNewTeam";
+import CreateTeamLanding from "./routes/CreateNewTeam/pages/CreateTeamLanding";
 import InputSkills from "./routes/CreateNewTeam/pages/InputSkills";
 import InputJobDescription from "./routes/CreateNewTeam/pages/InputJobDescription";
 import SelectRole from "./routes/CreateNewTeam/pages/SelectRole";
@@ -25,7 +26,6 @@ export default function Root() {
         <Router>
           <Redirect from="/taas" to="/taas/myteams" exact />
           <MyTeamsList path="/taas/myteams" />
-          <CreateNewTeam path="/taas/createnewteam" />
           <MyTeamsDetails path="/taas/myteams/:teamId" />
           <JobDetails path="/taas/myteams/:teamId/positions/:jobId" />
           <JobForm path="/taas/myteams/:teamId/positions/:jobId/edit" />
@@ -34,9 +34,12 @@ export default function Root() {
           <ResourceBookingForm path="/taas/myteams/:teamId/rb/:resourceBookingId/edit" />
           <PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
           <TeamAccess path="/taas/myteams/:teamId/access" />
-          <InputJobDescription path="/taas/createnewteam/jd/*" />
-          <InputSkills path="/taas/createnewteam/skills/*" />
-          <SelectRole path="/taas/createnewteam/role/*" />
+          <CreateNewTeam path="/taas/createnewteam">
+            <CreateTeamLanding path="/" />
+            <InputJobDescription path="jd/*" />
+            <InputSkills path="skills/*" />
+            <SelectRole path="role/*" />
+          </CreateNewTeam>
         </Router>
 
         {/* Global config for Toastr popups */}

src/components/CustomerScroll/styles.module.scss

@@ -6,7 +6,7 @@
   width: 100%;
   margin-right: 20px;
   position: relative;
-  height: 80vh;
+  height: 70vh;
   overflow-y: auto;
 
   .title {

src/root.component.jsx

@@ -42,7 +42,7 @@ function NoMatchingProfilesResultCard({ role }) {
     <div styleName="result-card">
       <div styleName="heading">
         <IconEarthX />
-        <h3>No Matching Profiles</h3>
+        <h3>Additional Evaluation Needed</h3>
         <Curve styleName="curve" />
         <IconEarthX styleName="transparent-icon" />
       </div>
@@ -53,8 +53,11 @@ function NoMatchingProfilesResultCard({ role }) {
             : "Custom Role"}
         </h4>
         <p styleName="info-txt">
-          We will be looking internally for members matching your requirements
-          and be back at them in about 2 weeks.
+          We did not get a perfect match to your requirements on the first pass,
+          but we are confident they are out there. We'd like to dig a little
+          deeper into our community to find someone who can fit your needs. This
+          may take up to two weeks. Please continue to submit your request, and
+          a Topcoder representative will reach out to you soon with next steps.
         </p>
         {role.rates && role.name ? (
           <div styleName="niche-rate-box">

src/routes/CreateNewTeam/components/ItemList/styles.module.scss

@@ -56,7 +56,7 @@
     @include font-roboto;
     font-size: 14px;
     line-height: 22px;
-    width: 357px;
+    width: 80%;
     text-align: center;
   }
   .niche-rate-box {

src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx

@@ -267,20 +267,7 @@ function ResultCard({ role }) {
               <p>Members matched</p>
             </div>
           </div>
-          <div styleName="footer">
-            <p>
-              <span>60%</span> of members are available 20 hours / week (part
-              time)
-            </p>
-            <p>
-              <span>20%</span> of members are available 30 hours / week (part
-              time)
-            </p>
-            <p>
-              <span>10%</span> of members are available 40 hours / week (full
-              time)
-            </p>
-          </div>
+          <div styleName="footer" />
         </div>
       )}
     </div>

src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/styles.module.scss

@@ -81,7 +81,7 @@ function SearchContainer({
           }
           onClick={() => setAddAnotherOpen(true)}
           extraStyleName={completenessStyle}
-          buttonLabel="Submit Request"
+          buttonLabel="Continue"
           stages={stages}
           percentage={getPercentage()}
         />

src/routes/CreateNewTeam/components/ResultCard/index.jsx

@@ -23,7 +23,7 @@ import TeamDetailsModal from "../TeamDetailsModal";
 import ConfirmationModal from "../ConfirmationModal";
 import withAuthentication from "../../../../hoc/withAuthentication";
 import "./styles.module.scss";
-import { isCustomRole, setCurrentStage } from "utils/helpers";
+import { isCustomRole, isUuid, setCurrentStage } from "utils/helpers";
 import { clearSearchedRoles } from "../../actions";
 import { postTeamRequest } from "services/teams";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
@@ -65,11 +65,15 @@ function SubmitContainer({
   };
 
   const assembleTeam = (formData) => {
-    const teamObject = _.pick(formData, ["teamName", "teamDescription"]);
+    const teamObject = _.pick(formData, [
+      "teamName",
+      "teamDescription",
+      "refCode",
+    ]);
 
     const positions = [];
     for (let key of Object.keys(formData)) {
-      if (key === "teamName" || key === "teamDescription") {
+      if (!isUuid(key)) {
         continue;
       }
       const position = _.mapValues(formData[key], (val, key) =>
@@ -119,7 +123,7 @@ function SubmitContainer({
         <Completeness
           onClick={() => setAddAnotherOpen(true)}
           extraStyleName={completenessStyle}
-          buttonLabel="Submit Request"
+          buttonLabel="Continue"
           stages={stages}
           percentage="98"
         />