New styled Month Picker component.

NoMatchingProfiles card uses custom role returned from server.
Removed matching rate constant.
Cleanup and documentation.

Author: mbaghel

src/assets/images/icon-thick-calendar.svg

@@ -26,24 +26,24 @@ function InformationTooltip({ text, iconSize = "16px" }) {
         name: "offset",
         options: {
           // use offset to move the tooltip slightly up
-          offset: [0, 10],
+          offset: [0, 12],
         },
       },
       {
         name: "arrow",
         // padding should be equal to border-radius of the tooltip
-        options: { element: arrowElement, padding: 8 },
+        options: { element: arrowElement, padding: 5 },
       },
     ],
   });
 
   const showTooltip = useCallback(() => {
     setIsTooltipShown(true);
-  }, [setIsTooltipShown]);
+  }, []);
 
   const hideTooltip = useCallback(() => {
     setIsTooltipShown(false);
-  }, [setIsTooltipShown]);
+  }, []);
 
   const iconStyle = {
     width: iconSize,

src/components/InformationTooltip/index.jsx

@@ -0,0 +1,44 @@
+/**
+ * Month Picker
+ * An styled input component for selecting date by month.
+ * Compatible with react-final-form
+ */
+import React from "react";
+import PT from "prop-types";
+import DatePicker from "react-datepicker";
+import "./styles.module.scss";
+
+function getCurrMonthYear() {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  return new Date(`${year}-${month + 1}`);
+}
+
+function MonthPicker({ name, value, onChange, onBlur }) {
+  return (
+    <div styleName="month-picker">
+      <DatePicker
+        name={name}
+        selected={value}
+        onChange={onChange}
+        dateFormat="MMM, yyyy"
+        showMonthYearPicker
+        showPopperArrow={false}
+        onBlur={onBlur}
+        popperPlacement="top-end"
+        showFourColumnMonthYearPicker
+        minDate={getCurrMonthYear()}
+      />
+    </div>
+  );
+}
+
+MonthPicker.propTypes = {
+  name: PT.string,
+  value: PT.any,
+  onChange: PT.func,
+  onBlur: PT.func,
+};
+
+export default MonthPicker;

src/components/MonthPicker/index.jsx

@@ -0,0 +1,60 @@
+@import "styles/include";
+
+.month-picker {
+  input {
+    width: 118px;
+    background-image: url("../../assets/images/icon-thick-calendar.svg");
+    background-repeat: no-repeat;
+    background-position: 95px 7px;
+  }
+
+  :global {
+    .react-datepicker__header {
+      @include font-barlow;
+      font-size: 20px;
+      color: #2a2a2a;
+      font-weight: 600;
+      padding-top: 14px;
+      padding-bottom: 14px;
+      background-color: transparent;
+      border-bottom: 1px solid #d4d4d4;
+      margin: 0 16px;
+    }
+
+    .react-datepicker__month-text {
+      @include font-roboto;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 40px;
+      width: 40px;
+      height: 40px;
+      margin: 8px;
+      border-radius: 100%;
+    }
+    .react-datepicker__month--selected {
+      border-radius: 100%;
+      background-color: #0AB88A;
+    }
+
+    .react-datepicker__navigation {
+      top: 18px;
+      border: 2px solid transparent;
+      height: 12px;
+      width: 12px;
+    }
+    .react-datepicker__navigation--next, .react-datepicker__navigation--previous {
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: #137D60;
+      border-top-color: #137D60;
+    }
+    .react-datepicker__navigation--next {
+      right: 24px;
+      transform: rotate(135deg);
+    }
+    .react-datepicker__navigation--previous {
+      left: 24px;
+      transform: rotate(-45deg);
+    }
+  }
+}

src/components/MonthPicker/styles.module.scss

@@ -356,11 +356,6 @@ export const INTERVIEW_POPUP_MEDIA_URL =
 
 export const MAX_ALLOWED_INTERVIEWS = 3;
 
-/**
- * Matching rate to show in CreateNewTeam ResultCard
- */
-export const MATCHING_RATE = "80";
-
 /**
  * Custom role names to remove from RoleList component
  */

src/constants/index.js

@@ -4,12 +4,14 @@
  */
 import React from "react";
 import { Link } from "@reach/router";
+import PT from "prop-types";
 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() {
+function NoMatchingProfilesResultCard({ role }) {
   return (
     <div styleName="result-card">
       <div styleName="heading">
@@ -23,11 +25,13 @@ function NoMatchingProfilesResultCard() {
           We will be looking internally for members matching your requirements
           and be back at them in about 2 weeks.
         </p>
-        <div styleName="niche-rate-box">
-          <p>Niche Rate</p>
-          <p styleName="cost">$1,200</p>
-          <p>/Week</p>
-        </div>
+        {role && (
+          <div styleName="niche-rate-box">
+            <p>{role.name} Rate</p>
+            <p styleName="cost">{formatMoney(role.rates[0].global)}</p>
+            <p>/Week</p>
+          </div>
+        )}
         <Link to="/taas/myteams/createnewteam">
           <Button type="secondary" styleName="button">
             Modify Search Criteria
@@ -38,4 +42,8 @@ function NoMatchingProfilesResultCard() {
   );
 }
 
+NoMatchingProfilesResultCard.propTypes = {
+  role: PT.object,
+};
+
 export default NoMatchingProfilesResultCard;

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

@@ -15,9 +15,8 @@ import SearchCard from "../SearchCard";
 import ResultCard from "../ResultCard";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 import { searchRoles } from "services/teams";
-import { setCurrentStage } from "utils/helpers";
+import { isCustomRole, setCurrentStage } from "utils/helpers";
 import { addRoleSearchId, addSearchedRole } from "../../actions";
-import { CUSTOM_ROLE_NAMES } from "constants";
 import "./styles.module.scss";
 
 function SearchContainer({
@@ -52,12 +51,12 @@ function SearchContainer({
       .then((res) => {
         const name = _.get(res, "data.name");
         const searchId = _.get(res, "data.roleSearchRequestId");
-        if (name && !CUSTOM_ROLE_NAMES.includes(name.toLowerCase())) {
-          setMatchingRole(res.data);
+        if (name && !isCustomRole({ name })) {
           dispatch(addSearchedRole({ searchId, name }));
         } else if (searchId) {
           dispatch(addRoleSearchId(searchId));
         }
+        setMatchingRole(res.data);
       })
       .catch((err) => {
         console.error(err);
@@ -71,8 +70,8 @@ function SearchContainer({
   const renderLeftSide = () => {
     if (!searchState) return toRender;
     if (searchState === "searching") return <SearchCard />;
-    if (matchingRole) return <ResultCard role={matchingRole} />;
-    return <NoMatchingProfilesResultCard />;
+    if (!isCustomRole(matchingRole)) return <ResultCard role={matchingRole} />;
+    return <NoMatchingProfilesResultCard role={matchingRole} />;
   };
 
   const getPercentage = useCallback(() => {

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

@@ -82,6 +82,10 @@ function SubmitContainer({
         key === "startMonth" ? val : parseInt(val, 10)
       );
 
+      if (position.startMonth === null) {
+        delete position.startMonth;
+      }
+
       position.roleSearchRequestId = key;
       position.roleName = addedRoles.find((role) => role.searchId === key).name;
 

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

@@ -8,7 +8,6 @@ import React from "react";
 import { Link } from "@reach/router";
 import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
 import Curve from "../../../../assets/images/curve.svg";
-import { MATCHING_RATE } from "constants";
 import "./styles.module.scss";
 import Button from "components/Button";
 
@@ -18,10 +17,7 @@ function SuccessCard() {
       <div styleName="heading">
         <IconEarthCheck />
         <h3>We have matching profiles</h3>
-        <p>
-          We have qualified candidates who match {MATCHING_RATE}% or more of
-          your job requirements.
-        </p>
+        <p>We have qualified candidates who match your job requirements.</p>
         <Curve styleName="curve" />
         <IconEarthCheck styleName="transparent-icon" />
       </div>

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

@@ -11,9 +11,9 @@ import BaseCreateModal from "../BaseCreateModal";
 import { FORM_FIELD_TYPE } from "constants/";
 import { formatPlural } from "utils/format";
 import Button from "components/Button";
-import "./styles.module.scss";
-import DatePicker from "react-datepicker";
+import MonthPicker from "components/MonthPicker";
 import InformationTooltip from "components/InformationTooltip";
+import "./styles.module.scss";
 
 const Error = ({ name }) => {
   const {
@@ -201,13 +201,10 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                             initialValue={Date.now()}
                           >
                             {(props) => (
-                              <DatePicker
+                              <MonthPicker
                                 name={props.input.name}
-                                selected={props.input.value}
+                                value={props.input.value}
                                 onChange={props.input.onChange}
-                                dateFormat="MMM, yyyy"
-                                showMonthYearPicker
-                                showPopperArrow={false}
                                 onBlur={props.input.onBlur}
                               />
                             )}

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

@@ -51,9 +51,8 @@
         font-size: 14px;
         line-height: 22px;
         height: 34px;
-        width: 98px;
-        &[type="month"] {
-          width: 170px;
+        &[type="number"] {
+          width: 98px;
         }
       }
     }
@@ -78,4 +77,10 @@
   textarea {
     height: 95px;
   }
+}
+
+@media only screen and (max-width: 550px) {
+  .modal-body {
+    overflow-x: scroll;
+  }
 }

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

@@ -8,14 +8,14 @@ import React, { useCallback, useState } from "react";
 import { useData } from "hooks/useData";
 import RolesList from "./components/RolesList";
 import { getRoles } from "services/roles";
-import { CUSTOM_ROLE_NAMES } from "constants";
 import LoadingIndicator from "components/LoadingIndicator";
 import RoleDetailsModal from "../../components/RoleDetailsModal";
 import SearchAndSubmit from "../../components/SearchAndSubmit";
+import { isCustomRole } from "utils/helpers";
 
 // Remove custom roles from role list
 const removeCustomRoles = (roles) =>
-  roles.filter(({ name }) => !CUSTOM_ROLE_NAMES.includes(name.toLowerCase()));
+  roles.filter((role) => !isCustomRole(role));
 
 function SelectRole() {
   const [stages, setStages] = useState([

src/routes/CreateNewTeam/pages/SelectRole/index.jsx

@@ -5,6 +5,7 @@
  * If there are multiple methods which could be grouped into a separate file by their meaning they should be extracted from here to not make this file too big.
  */
 import _ from "lodash";
+import { CUSTOM_ROLE_NAMES } from "constants/";
 
 /**
  * Delay code for some milliseconds using promise.
@@ -62,3 +63,11 @@ export const setCurrentStage = (currentStepIdx, stages, setStagesCallback) => {
       .map((s) => ({ ...s, completed: false, isCurrent: false })),
   ]);
 };
+
+/**
+ * Checks if role is custom/niche
+ * @param {Object} role role to check
+ * @returns {boolean} whether the role is custom/niche
+ */
+export const isCustomRole = (role) =>
+  !role.name || CUSTOM_ROLE_NAMES.includes(role.name.toLowerCase());