Roles Intake - Post-release functional tweaks in UI

src/routes/CreateNewTeam/actions/index.js

@@ -32,7 +32,7 @@ const addMatchingRole = (matchingRole) => ({
   payload: matchingRole,
 });
 
-const deleteMatchingRole = (matchingRole) => ({
+const deleteMatchingRole = () => ({
   type: ACTION_TYPE.DELETE_MATCHING_ROLE,
 });
 
@@ -61,7 +61,7 @@ export const saveMatchingRole = (matchingRole) => (dispatch, getState) => {
   updateLocalStorage(getState().searchedRoles);
 };
 
-export const clearMatchingRole = (matchingRole) => (dispatch, getState) => {
+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/InputContainer/index.jsx

@@ -5,14 +5,10 @@
  * input pages. Contains logic and supporting
  * components for selecting for roles.
  */
-import React, { useCallback } from "react";
+import React from "react";
 import PT from "prop-types";
 import AddedRolesAccordion from "../AddedRolesAccordion";
 import Completeness from "../Completeness";
-import SearchCard from "../SearchCard";
-import ResultCard from "../ResultCard";
-import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
-import { isCustomRole } from "utils/helpers";
 import "./styles.module.scss";
 
 function InputContainer({
@@ -33,7 +29,7 @@ function InputContainer({
           isDisabled={isCompletenessDisabled}
           onClick={onClick ? onClick: search}
           extraStyleName={completenessStyle}
-          buttonLabel={"Search"}
+          buttonLabel="Search"
           stages={stages}
           percentage="26"
         />

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>
   );

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

@@ -13,7 +13,7 @@
   justify-content: flex-start;
   align-items: center;
   padding: 30px 0 60px 0;
-  margin-bottom: 30px;
+  margin-bottom: 14px;
   color: #fff;
   background-image: linear-gradient(225deg, #555555 0%, #2A2A2A 100%);
   position: relative;
@@ -41,6 +41,17 @@
   flex-direction: column;
   align-items: center;
   padding-bottom: 61px;
+  .job-title {
+    @include font-barlow;
+    font-size: 22px;
+    margin-bottom: 18px;
+    font-weight: 600;
+    text-align: center;
+    text-transform: uppercase;
+    // position text over bottom of header image
+    position: relative;
+    z-index: 100;
+    }
   p.info-txt {
     @include font-roboto;
     font-size: 14px;
@@ -82,8 +93,15 @@
     }
   }
 
-  .button {
+  .button-group {
     margin-top: 62px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .left {
+      margin-right: 30px;
+    }
   }
 }
 

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

@@ -4,7 +4,12 @@ import React, { useCallback, useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchRoles } from "services/teams";
 import { isCustomRole, setCurrentStage } from "utils/helpers";
-import { clearMatchingRole, saveMatchingRole, addRoleSearchId, addSearchedRole } from "../../actions";
+import {
+  clearMatchingRole,
+  saveMatchingRole,
+  addRoleSearchId,
+  addSearchedRole,
+} from "../../actions";
 import InputContainer from "../InputContainer";
 import SearchContainer from "../SearchContainer";
 import SubmitContainer from "../SubmitContainer";
@@ -14,19 +19,19 @@ function SearchAndSubmit(props) {
 
   const [searchState, setSearchState] = useState(null);
 
-  const { matchingRole } = useSelector(
-    (state) => state.searchedRoles
-  );
+  const { matchingRole } = useSelector((state) => state.searchedRoles);
 
-  useEffect(()=> {
-    const isFromInputPage  = searchObject.role || searchObject.skills && searchObject.skills.length
-       || searchObject.jobDescription
+  useEffect(() => {
+    const isFromInputPage =
+      searchObject.role ||
+      (searchObject.skills && searchObject.skills.length) ||
+      searchObject.jobDescription;
     // refresh in search page directly
     if (matchingRole && !isFromInputPage) {
       setCurrentStage(2, stages, setStages);
       setSearchState("done");
     }
-  }, [])
+  }, []);
 
   const dispatch = useDispatch();
 
@@ -52,8 +57,6 @@ function SearchAndSubmit(props) {
         } else if (searchId) {
           dispatch(addRoleSearchId(searchId));
         }
-        // setMatchingRole(res.data);
-
         dispatch(saveMatchingRole(res.data));
       })
       .catch((err) => {
@@ -78,8 +81,6 @@ function SearchAndSubmit(props) {
       <SearchContainer
         path="search"
         addedRoles={addedRoles}
-        previousSearchId={previousSearchId}
-        search={search}
         searchState={searchState}
         matchingRole={matchingRole}
         {...props}

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

@@ -5,32 +5,36 @@
  * search pages. Contains logic and supporting
  * components for searching for roles.
  */
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import PT from "prop-types";
 import AddedRolesAccordion from "../AddedRolesAccordion";
 import Completeness from "../Completeness";
 import SearchCard from "../SearchCard";
 import ResultCard from "../ResultCard";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 import { isCustomRole } from "utils/helpers";
+import AddAnotherModal from "../AddAnotherModal";
 import "./styles.module.scss";
 
 function SearchContainer({
   stages,
-  isCompletenessDisabled,
-  toRender,
-  onClick,
-  search,
   completenessStyle,
   navigate,
   addedRoles,
   searchState,
   matchingRole,
 }) {
+  const [addAnotherOpen, setAddAnotherOpen] = useState(false);
+
   const onSubmit = useCallback(() => {
+    setAddAnotherOpen(false);
     navigate("../result");
   }, [navigate]);
 
+  const addAnother = useCallback(() => {
+    navigate("/taas/createnewteam");
+  }, [navigate]);
+
   const renderLeftSide = () => {
     if (searchState === "searching") return <SearchCard />;
     if (!isCustomRole(matchingRole)) return <ResultCard role={matchingRole} />;
@@ -53,23 +57,26 @@ function SearchContainer({
             searchState === "searching" ||
             (searchState === "done" && (!addedRoles || !addedRoles.length))
           }
-          onClick={searchState ? onSubmit : onClick ? onClick : search}
+          onClick={() => setAddAnotherOpen(true)}
           extraStyleName={completenessStyle}
-          buttonLabel={searchState ? "Submit Request" : "Search"}
+          buttonLabel="Submit Request"
           stages={stages}
           percentage={getPercentage()}
         />
       </div>
+      <AddAnotherModal
+        open={addAnotherOpen}
+        onClose={() => setAddAnotherOpen(false)}
+        submitDone={true}
+        onContinueClick={onSubmit}
+        addAnother={addAnother}
+      />
     </div>
   );
 }
 
 SearchContainer.propTypes = {
   stages: PT.array,
-  isCompletenessDisabled: PT.bool,
-  onClick: PT.func,
-  search: PT.func,
-  toRender: PT.func,
   completenessStyle: PT.string,
   navigate: PT.func,
   addedRoles: PT.array,