Merge pull request #505 from yoution/feature/taas-intake-1.3

fix: taas-intake #504,#408,#497

Author: nikolay83

src/assets/images/icon-earth-x.svg

@@ -391,7 +391,7 @@ export const MAX_ALLOWED_INTERVIEWS = 3;
 /**
  * Custom role names to remove from RoleList component
  */
-export const CUSTOM_ROLE_NAMES = ["custom", "niche"];
+export const CUSTOM_ROLE_NAMES = ["custom", "niche", "custom role"];
 
 /**
  * Minimal Resource Booking duration (weeks)

src/assets/images/icon-person.svg

@@ -8,12 +8,12 @@ import PT from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 import { addSearchedRole } from "../../actions";
 import "./styles.module.scss";
-import IconEarthX from "../../../../assets/images/icon-earth-x.svg";
+import IconPerson from "../../../../assets/images/icon-person.svg";
 import Curve from "../../../../assets/images/curve.svg";
 import Button from "components/Button";
 import { formatMoney } from "utils/format";
 
-function NoMatchingProfilesResultCard({ role }) {
+function NoMatchingProfilesResultCard({ role, onSubmit }) {
   const { addedRoles } = useSelector((state) => state.searchedRoles);
 
   const alreadyAdded = useMemo(() => {
@@ -43,54 +43,35 @@ function NoMatchingProfilesResultCard({ role }) {
         imageUrl: role.imageUrl,
       })
     );
+    onSubmit()
   }, [dispatch, role]);
 
   return (
     <div styleName="result-card">
       <div styleName="heading">
-        <IconEarthX />
-        <h3>Dang. No matching talent (yet)</h3>
+        <IconPerson />
+        <h3>locating available custom talent</h3>
         <Curve styleName="curve" />
-        <IconEarthX styleName="transparent-icon" />
       </div>
       <div styleName="content">
         <h4 styleName="job-title">
-          {role.jobTitle && role.jobTitle.length
-            ? role.jobTitle
-            : "What happens next"}
+          What happens next
         </h4>
         <p styleName="info-txt">
-          We did not find a perfect match to your requirements, but we'd like to
-          dig a little deeper into our community. We’ll start right away, and
-          this may take up to two weeks. You can modify your criteria, or
-          continue this search. If you choose to continue, we will reach out
-          soon with next steps.
+          We routinely place great people with the skills you’ve asked for. Right now, we don’t have anyone available. However, our database is dynamic and updated often. Please continue below so we can finalize your talent request and alert you when a great candidate becomes available. 
         </p>
-        {role.rates && role.name ? (
-          <div styleName="niche-rate-box">
-            <p>Estimate for this role</p>
-            <p styleName="cost">{formatMoney(role.rates[0].global)}</p>
-            <p>/Week</p>
-          </div>
-        ) : (
-          <div styleName="niche-rate-box">
-            <p>Estimate for this role</p>
-            <p styleName="cost">$1,200</p>
-            <p>/Week</p>
-          </div>
-        )}
         <div styleName="button-group">
           <Link to="/taas/createnewteam">
             <Button styleName="left" type="secondary">
-              Modify Search Criteria
+              Modify Search
             </Button>
           </Link>
           <Button
             onClick={addRole}
-            disabled={!role.roleSearchRequestId || alreadyAdded}
+            disabled={!role.roleSearchRequestId}
             type="primary"
           >
-            {alreadyAdded ? "Added" : "Continue this search"}
+            Request talent
           </Button>
         </div>
       </div>
@@ -100,6 +81,7 @@ function NoMatchingProfilesResultCard({ role }) {
 
 NoMatchingProfilesResultCard.propTypes = {
   role: PT.object,
+  onSubmit: PT.func,
 };
 
 export default NoMatchingProfilesResultCard;

src/constants/index.js

@@ -15,7 +15,7 @@
   padding: 30px 0 60px 0;
   margin-bottom: 14px;
   color: #fff;
-  background-image: linear-gradient(225deg, #555555 0%, #2a2a2a 100%);
+  background-image: linear-gradient(90deg, #F45500 0%, #FF940F 100%);
   position: relative;
   text-align: center;
   border-radius: 8px 8px 0 0;
@@ -59,38 +59,6 @@
     width: 80%;
     text-align: center;
   }
-  .niche-rate-box {
-    margin-top: 32px;
-    background-color: #fbfbfb;
-    padding: 30px;
-    border: 1px solid #f4f4f4;
-    border-radius: 6px;
-    width: 196px;
-    p:first-child {
-      @include font-barlow;
-      margin-top: 4px;
-      font-size: 16px;
-      line-height: 20px;
-      font-weight: 600;
-      text-align: center;
-      text-transform: uppercase;
-    }
-    p:last-child {
-      @include font-roboto;
-      color: #555555;
-      font-size: 14px;
-      line-height: 22px;
-      text-align: center;
-    }
-    .cost {
-      @include font-barlow-condensed;
-      margin-top: 8px;
-      font-size: 48px;
-      line-height: 50px;
-      font-weight: 500;
-      text-align: center;
-    }
-  }
 
   .button-group {
     margin-top: 62px;
@@ -110,12 +78,3 @@
   bottom: -70px;
   width: 100%;
 }
-
-.transparent-icon {
-  position: absolute;
-  top: -40px;
-  right: 10px;
-  opacity: 12%;
-  height: 142px;
-  width: 142px;
-}

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

@@ -245,10 +245,8 @@ function ResultCard({
               </div>
             </div>
             <div styleName="timeline-info">
-              <IconTeamMeetingChat />
               <div>
-                <p>Interviews can start within</p>
-                <h6>{timeToInterview}h</h6>
+                (NEED TO DEVELOP TEXT W/ ANNIKA)
               </div>
             </div>
           </div>

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

@@ -77,7 +77,7 @@ function SearchContainer({
           currentRole={currentRole}
         />
       );
-    return <NoMatchingProfilesResultCard role={matchingRole} />;
+    return <NoMatchingProfilesResultCard role={matchingRole} onSubmit={onSubmit}/>;
   };
 
   const progressBarPercentage = useMemo(

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

@@ -176,7 +176,7 @@ function SubmitContainer({
           currentRole={currentRole}
         />
       ) : (
-        <NoMatchingProfilesResultCard role={matchingRole} />
+        <NoMatchingProfilesResultCard role={matchingRole} onSubmit={()=> setAddAnotherOpen(true)}/>
       )}
       <div styleName="right-side">
         <AddedRolesAccordion addedRoles={addedRoles} />

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

@@ -5,6 +5,7 @@ import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { ThemeProvider } from "@material-ui/styles";
 import { toastr } from "react-redux-toastr";
+import { isCustomRole } from "utils/helpers";
 
 import PaymentForm from "./PaymentForm";
 import PageHeader from "components/PageHeader";
@@ -58,7 +59,9 @@ const CreateTassPayment = () => {
         durationWeeks,
         availability,
       });
-      amount.push({ rate, numberOfResources });
+      if (!isCustomRole(role)) {
+        amount.push({ rate, numberOfResources });
+      }
     });
     setValue(temp);
 
@@ -109,15 +112,15 @@ const CreateTassPayment = () => {
                         <div>
                           <p styleName="title">{data.name}</p>
                           <ul styleName="details">
-                            <li>
+                            {!isCustomRole(data) && <li>
                               {data.numberOfResources} x ${data.rate}/ Week
-                            </li>
+                            </li>}
                             <li>{data.durationWeeks} Week Duration</li>
                             <li>{data.availability}</li>
                           </ul>
                         </div>
                         <p styleName="amount">
-                          ${data.numberOfResources * data.rate}
+                          ${isCustomRole(data) ? '0' : data.numberOfResources * data.rate}
                         </p>
                       </div>
                       <hr styleName="divider" />