Role Intake Cool down Fix's

src/constants/index.js

@@ -258,6 +258,12 @@ export const ACTION_TYPE = {
   ADD_SEARCHED_ROLE: "ADD_SEARCHED_ROLE",
   ADD_ROLE_SEARCH_ID: "ADD_ROLE_SEARCH_ID",
   DELETE_SEARCHED_ROLE: "DELETE_SEARCHED_ROLE",
+
+  /*
+   * matching role
+   */
+  ADD_MATCHING_ROLE: "ADD_MATCHING_ROLE",
+  DELETE_MATCHING_ROLE: "DELETE_MATCHING_ROLE",
 };
 
 /**

src/routes/CreateNewTeam/actions/index.js

@@ -27,6 +27,15 @@ const deleteRole = (id) => ({
   payload: id,
 });
 
+const addMatchingRole = (matchingRole) => ({
+  type: ACTION_TYPE.ADD_MATCHING_ROLE,
+  payload: matchingRole,
+});
+
+const deleteMatchingRole = () => ({
+  type: ACTION_TYPE.DELETE_MATCHING_ROLE,
+});
+
 export const clearSearchedRoles = () => (dispatch, getState) => {
   dispatch(clearRoles());
   updateLocalStorage(getState().searchedRoles);
@@ -46,3 +55,13 @@ export const deleteSearchedRole = (id) => (dispatch, getState) => {
   dispatch(deleteRole(id));
   updateLocalStorage(getState().searchedRoles);
 };
+
+export const saveMatchingRole = (matchingRole) => (dispatch, getState) => {
+  dispatch(addMatchingRole(matchingRole));
+  updateLocalStorage(getState().searchedRoles);
+};
+
+export const clearMatchingRole = () => (dispatch, getState) => {
+  dispatch(deleteMatchingRole());
+  updateLocalStorage(getState().searchedRoles);
+};

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

@@ -8,11 +8,16 @@
 import React, { useState } from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import { useDispatch } from "react-redux";
+import { deleteSearchedRole } from "../../actions";
 import "./styles.module.scss";
+import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
 
 function AddedRolesAccordion({ addedRoles }) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const dispatch = useDispatch();
+
   return addedRoles.length ? (
     <div styleName="accordion">
       <button onClick={() => setIsOpen(!isOpen)} styleName="button">
@@ -27,8 +32,13 @@ function AddedRolesAccordion({ addedRoles }) {
       </button>
       {isOpen && (
         <div styleName="panel">
-          {addedRoles.map(({ name }) => (
-            <div styleName="role-name">{name}</div>
+          {addedRoles.map(({ name, searchId: id }) => (
+            <div key={id} styleName="role-name">
+              {name}
+              <button onClick={() => dispatch(deleteSearchedRole(id))}>
+                <IconCrossLight height="14px" width="14px" />
+              </button>
+            </div>
           ))}
         </div>
       )}

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

@@ -55,11 +55,12 @@
 .panel {
   padding: 12px 18px 14px 10px;
   .role-name {
-    height: 40px;
+    position: relative;
     width: 100%;
     background-color: #F4F4F4;
     border-radius: 6px;
     padding: 10px;
+    padding-right: 30px;
     @include font-barlow;
     font-size: 16px;
     line-height: 20px;
@@ -68,5 +69,19 @@
     &:not(:first-child) {
       margin-top: 5px;
     }
+
+    >button {
+      outline: none;
+      border: none;
+      background: none;
+      position: absolute;
+      top: 12px;
+      right: 4px;
+      &:hover {
+        g {
+          stroke: red;
+        }
+      }
+    }
   }
 }

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

@@ -35,6 +35,7 @@ function BaseCreateModal({
   loadingMessage,
   maxWidth = "680px",
   darkHeader,
+  disableFocusTrap,
   children,
 }) {
   return (
@@ -51,8 +52,9 @@ function BaseCreateModal({
         modalContainer: containerStyle,
         closeButton: closeButtonStyle,
       }}
+      focusTrapped={!disableFocusTrap}
     >
-      <div styleName="modal-body">
+      <div styleName="modal-body" tabIndex="-1">
         {isLoading ? (
           <div styleName={cn("modal-header", { "dark-header": darkHeader })}>
             <CenteredSpinner />
@@ -86,6 +88,7 @@ BaseCreateModal.propTypes = {
   loadingMessage: PT.string,
   maxWidth: PT.string,
   darkHeader: PT.bool,
+  disableFocusTrap: PT.bool,
   children: PT.node,
 };
 

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

@@ -2,6 +2,7 @@
 
 .completeness {
   @include rounded-card;
+  overflow: hidden;
   padding: 12px;
   position: relative;
   width: 250px;
@@ -25,12 +26,19 @@
 
 .list {
   margin-bottom: 55px;
+  & + button[disabled] {
+    background-color: #E9E9E9;
+    color: #FFF;
+    opacity: 1;
+    filter: none;
+  }
 }
 
 .list-item {
   margin-bottom: 14px;
   font-size: 14px;
   line-height: 16px;
+  font-weight: 400;
 
   &:before {
     content: "";
@@ -45,14 +53,14 @@
   }
 
   &.active {
-    font-weight: 700;
+    font-weight: 500;
     &:before {
       background-color: #fff;
     }
   }
 
   &.done {
-    font-weight: 700;
+    font-weight: 400;
     color: rgba(255, 255, 255, 0.6);
     &:before {
       content: "✓";

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

@@ -0,0 +1,51 @@
+/**
+ * InputContainer
+ *
+ * A container component for the different
+ * input pages. Contains logic and supporting
+ * components for selecting for roles.
+ */
+import React from "react";
+import PT from "prop-types";
+import AddedRolesAccordion from "../AddedRolesAccordion";
+import Completeness from "../Completeness";
+import "./styles.module.scss";
+
+function InputContainer({
+  stages,
+  isCompletenessDisabled,
+  toRender,
+  search,
+  onClick,
+  completenessStyle,
+  addedRoles,
+}) {
+  return (
+    <div styleName="page">
+      {toRender(search)}
+      <div styleName="right-side">
+        <AddedRolesAccordion addedRoles={addedRoles} />
+        <Completeness
+          isDisabled={isCompletenessDisabled}
+          onClick={onClick ? onClick: search}
+          extraStyleName={completenessStyle}
+          buttonLabel="Search"
+          stages={stages}
+          percentage="26"
+        />
+      </div>
+    </div>
+  );
+}
+
+InputContainer.propTypes = {
+  stages: PT.array,
+  isCompletenessDisabled: PT.bool,
+  search: PT.func,
+  onClick: PT.func,
+  toRender: PT.func,
+  completenessStyle: PT.string,
+  addedRoles: PT.array,
+};
+
+export default InputContainer;

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

@@ -0,0 +1,14 @@
+.page {
+  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;
+    }
+  }
+}

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

@@ -36,7 +36,7 @@ function ItemList({
   return (
     <div styleName="item-list">
       <PageHeader
-        title={title}
+        title={<div styleName="title">{title}</div>}
         backTo="/taas/createnewteam"
         aside={
           <>

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

@@ -9,6 +9,9 @@
   height: 80vh;
   overflow-y: auto;
 
+  .title {
+    font-weight: 500;
+  }
   > header {
     padding: 16px 24px;
   }
@@ -67,4 +70,4 @@ input:not([type="checkbox"]).filter-input {
   justify-content: flex-start;
   flex-wrap: wrap;
   margin-right: 24px;
-}
+}

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

@@ -2,16 +2,42 @@
  * No Matching Profiles Result Card
  * Card that appears when there are no matching profiles after searching.
  */
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Link } from "@reach/router";
 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 Curve from "../../../../assets/images/curve.svg";
 import Button from "components/Button";
 import { formatMoney } from "utils/format";
 
 function NoMatchingProfilesResultCard({ role }) {
+  const { addedRoles } = useSelector((state) => state.searchedRoles);
+
+  const alreadyAdded = useMemo(() => {
+    if (
+      addedRoles.find(
+        (addedRole) => addedRole.searchId === role.roleSearchRequestId
+      )
+    ) {
+      return true;
+    }
+    return false;
+  }, [addedRoles, role]);
+
+  const dispatch = useDispatch();
+
+  const addRole = useCallback(() => {
+    const searchId = role.roleSearchRequestId;
+    let name = "Custom Role";
+    if (role.jobTitle && role.jobTitle.length) {
+      name = role.jobTitle;
+    }
+    dispatch(addSearchedRole({ searchId, name }));
+  }, [dispatch, role]);
+
   return (
     <div styleName="result-card">
       <div styleName="heading">
@@ -21,6 +47,11 @@ function NoMatchingProfilesResultCard({ role }) {
         <IconEarthX styleName="transparent-icon" />
       </div>
       <div styleName="content">
+        <h4 styleName="job-title">
+          {role.jobTitle && role.jobTitle.length
+            ? role.jobTitle
+            : "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.
@@ -38,11 +69,20 @@ function NoMatchingProfilesResultCard({ role }) {
             <p>/Week</p>
           </div>
         )}
-        <Link to="/taas/createnewteam">
-          <Button type="secondary" styleName="button">
-            Modify Search Criteria
+        <div styleName="button-group">
+          <Link to="/taas/createnewteam">
+            <Button styleName="left" type="secondary">
+              Modify Search Criteria
+            </Button>
+          </Link>
+          <Button
+            onClick={addRole}
+            disabled={!role.roleSearchRequestId || alreadyAdded}
+            type="primary"
+          >
+            {alreadyAdded ? "Added" : "Add Custom Role"}
           </Button>
-        </Link>
+        </div>
       </div>
     </div>
   );