feat: polish release - 2

src/components/Checkbox/index.jsx

@@ -1,19 +1,27 @@
 import React from "react";
 import PT from "prop-types";
+import cn from "classnames";
 import "./styles.module.scss";
 
-function Checkbox({ label, checked, onClick }) {
+function Checkbox({ label, disabled, checkmarkFloat, checked, onClick }) {
   return (
-    <label styleName="container">
+    <label styleName={cn("container", { ["disabled"]: disabled })}>
       {label}
-      <input type="checkbox" checked={checked} onClick={onClick} />
-      <span styleName="checkmark"></span>
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onClick={onClick}
+      />
+      <span styleName={`checkmark float-${checkmarkFloat || "left"}`}></span>
     </label>
   );
 }
 
 Checkbox.propTypes = {
   label: PT.string,
+  checkmarkFloat: PT.oneOf(["right", "left"]),
+  disabled: PT.bool,
   checked: PT.bool,
   onClick: PT.func,
 };

src/components/Checkbox/styles.module.scss

@@ -14,6 +14,10 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  &.disabled {
+    pointer-events: none;
+    color: #a89e9e;
+  }
 }
 
 /* Hide the browser's default checkbox */
@@ -29,12 +33,17 @@
 .checkmark {
   position: absolute;
   top: 0;
-  left: 0;
   height: 20px;
   width: 20px;
   background-color: #fff;
   border: 1px solid #AAA;
   border-radius: 3px;
+  &.float-left {
+    left: 0;
+  }
+  &.float-right {
+    right: 0;
+  }
 }
 
 /* On mouse-over, add a grey background color */
@@ -48,6 +57,11 @@
   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
 }
 
+/* When the checkbox is disabled, grey out the background */
+.container input:disabled ~ .checkmark {
+  background-color: #cccccc;
+}
+
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";

src/components/CustomerScroll/index.jsx

@@ -5,7 +5,7 @@ function CustomerScroll() {
   return (
     <div>
       <h6 styleName="title">Trusted By</h6>
-      <div styleName="scrolling-logos" />
+      <div styleName="customer-logos" />
     </div>
   );
 }

src/components/CustomerScroll/styles.module.scss

@@ -10,45 +10,15 @@
   margin-bottom: 30px;
 }
 
-@keyframes scroll {
-  from {background-position: 0 0;}
-  to {background-position: -7701px 0;}
-}
-
-.scrolling-logos {
+.customer-logos {
   background-image: url("../../assets/images/customer-logos.svg");
-  background-size: cover;
-  height: 60px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 56px;
   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;
-  }
 }
 
 @media only screen and (max-height: 859px) {
-  .scrolling-logos {
-    height: 30px;
-  }
   .title {
     font-size: 16px;
     margin-bottom: 15px;

src/constants/index.js

@@ -185,6 +185,15 @@ export const CANDIDATES_SORT_OPTIONS = [
   { label: "Handle", value: CANDIDATES_SORT_BY.HANDLE },
 ];
 
+/**
+ * "Full or Part Time" select options
+ */
+export const FULL_OR_PART_TIME_OPTIONS = [
+  { label: "Full Time - 40hr/wk", value: "40" },
+  { label: "Part Time - 30hr/wk", value: "30" },
+  { label: "Part Time - 20hr/wk", value: "20" },
+];
+
 /**
  * All action types
  */
@@ -271,6 +280,11 @@ export const ACTION_TYPE = {
   ADD_MATCHING_ROLE: "ADD_MATCHING_ROLE",
   DELETE_MATCHING_ROLE: "DELETE_MATCHING_ROLE",
   EDIT_MATCHING_ROLE: "EDIT_MATCHING_ROLE",
+
+  /*
+   * global loading state
+   */
+  SET_IS_LOADING: "SET_IS_LOADING",
 };
 
 /**
@@ -378,3 +392,8 @@ export const CUSTOM_ROLE_NAMES = ["custom", "niche"];
  * Minimal Resource Booking duration (weeks)
  */
 export const MIN_DURATION = 4;
+
+/**
+ * Maximum allowed numbers of selecter skills for search.
+ */
+export const MAX_SELECTED_SKILLS = 3;

src/hoc/withAuthentication/index.js

@@ -13,7 +13,11 @@
  */
 import React, { useEffect } from "react";
 import _ from "lodash";
-import { getAuthUserTokens, login } from "@topcoder/micro-frontends-navbar-app";
+import {
+  getAuthUserTokens,
+  login,
+  businessLogin,
+} from "@topcoder/micro-frontends-navbar-app";
 import LoadingIndicator from "../../components/LoadingIndicator";
 import {
   authUserSuccess,
@@ -22,11 +26,12 @@ import {
   authLoadV5UserProfile,
   authClearTeamMembers,
 } from "./actions";
+import { setIsLoading } from "../../routes/CreateNewTeam/actions";
 import { decodeToken } from "tc-auth-lib";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "@reach/router";
 
-export default function withAuthentication(Component) {
+export default function withAuthentication(Component, businessAuth = false) {
   const AuthenticatedComponent = (props) => {
     const dispatch = useDispatch();
     const {
@@ -49,6 +54,7 @@ export default function withAuthentication(Component) {
       let isUnmount = false;
 
       if (!isLoggedIn) {
+        dispatch(setIsLoading(true));
         getAuthUserTokens()
           .then(({ tokenV3 }) => {
             if (!!tokenV3) {
@@ -59,7 +65,7 @@ export default function withAuthentication(Component) {
                 )
               );
             } else if (!isUnmount) {
-              login();
+              businessAuth ? businessLogin() : login();
             }
           })
           .catch((error) => dispatch(authUserError(error)));
@@ -81,6 +87,7 @@ export default function withAuthentication(Component) {
         params.teamId &&
         (!teamId || params.teamId !== teamId)
       ) {
+        dispatch(setIsLoading(true));
         dispatch(authLoadTeamMembers(params.teamId));
 
         // if we are going to some page without `teamId` then we have to clear team members
@@ -96,6 +103,7 @@ export default function withAuthentication(Component) {
     useEffect(() => {
       // is user is logged-in, but V5 user profile is not loaded yet, then load it
       if (isLoggedIn && !v5UserProfileLoading && !v5UserProfile) {
+        dispatch(setIsLoading(true));
         dispatch(authLoadV5UserProfile());
       }
     }, [dispatch, isLoggedIn, v5UserProfileLoading, v5UserProfile]);
@@ -129,3 +137,7 @@ export default function withAuthentication(Component) {
 
   return AuthenticatedComponent;
 }
+
+export function withBusinessAuthentication(Component) {
+  return withAuthentication(Component, true);
+}

src/routes/CreateNewTeam/actions/index.js

@@ -75,3 +75,8 @@ export const clearMatchingRole = () => (dispatch, getState) => {
   dispatch(deleteMatchingRole());
   updateLocalStorage(getState().searchedRoles);
 };
+
+export const setIsLoading = (isLoading) => ({
+  type: ACTION_TYPE.SET_IS_LOADING,
+  payload: isLoading,
+});

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

@@ -13,13 +13,14 @@ import InformationTooltip from "components/InformationTooltip";
 import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
 import "./styles.module.scss";
 import NumberInput from "components/NumberInput";
+import Select from "components/Select";
 import {
   validator,
   validateExists,
   validateMin,
   composeValidators,
 } from "./utils/validator";
-import { MIN_DURATION } from "constants";
+import { MIN_DURATION, FULL_OR_PART_TIME_OPTIONS } from "constants";
 
 const Error = ({ name }) => {
   const {
@@ -33,7 +34,7 @@ function EditRoleForm({ onChange, role }) {
   const onRoleChange = (state) => {
     if (state.hasValidationErrors) {
       onChange(false);
-    }else {
+    } else {
       onChange(true, state.values);
     }
   };
@@ -61,11 +62,15 @@ function EditRoleForm({ onChange, role }) {
                 <th># of resources</th>
                 <th>Duration (weeks)</th>
                 <th>Start month</th>
+                <th>Full or Part Time</th>
               </tr>
               <tr styleName="role-row">
                 <td>
                   <Field
-                    validate={composeValidators(validateExists, validateMin(1, 'Should be 1 or greater'))}
+                    validate={composeValidators(
+                      validateExists,
+                      validateMin(1, "Should be 1 or greater")
+                    )}
                     name="numberOfResources"
                     initialValue={role.numberOfResources}
                   >
@@ -88,7 +93,13 @@ function EditRoleForm({ onChange, role }) {
                 </td>
                 <td>
                   <Field
-                    validate={composeValidators(validateExists, validateMin(MIN_DURATION, `Talent as a Service engagements have a ${MIN_DURATION} week minimum commitment.`))}
+                    validate={composeValidators(
+                      validateExists,
+                      validateMin(
+                        MIN_DURATION,
+                        `Talent as a Service engagements have a ${MIN_DURATION} week minimum commitment.`
+                      )
+                    )}
                     name="durationWeeks"
                     initialValue={role.durationWeeks}
                   >
@@ -143,6 +154,22 @@ function EditRoleForm({ onChange, role }) {
                     </div>
                   )}
                 </td>
+                <td>
+                  <Field name="hoursPerWeek" initialValue={"40"}>
+                    {(props) => (
+                      <Select
+                        name={props.input.name}
+                        value={props.input.value}
+                        onChange={(v) => {
+                          props.input.onChange(v);
+                          onRoleChange(getState());
+                        }}
+                        options={FULL_OR_PART_TIME_OPTIONS}
+                        styleName="select"
+                      />
+                    )}
+                  </Field>
+                </td>
               </tr>
             </table>
           </div>

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

@@ -41,7 +41,14 @@
         margin-right: auto;
       }
 
-      padding: 18px 18px 18px 0;
+      .select {
+        border-radius: 4px;
+        width: 160px;
+        height: 34px;
+        font-size: 14px;
+      }
+
+      padding: 18px 9px;
       width: 30%;
       vertical-align: top;
       @include font-barlow;

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

@@ -27,7 +27,7 @@ function InputContainer({
         <AddedRolesAccordion addedRoles={addedRoles} />
         <Progress
           isDisabled={isProgressDisabled}
-          onClick={onClick ? onClick: search}
+          onClick={onClick ? onClick : search}
           extraStyleName={progressStyle}
           buttonLabel="Search"
           stages={stages}

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

@@ -39,6 +39,7 @@
   font-size: 14px;
   line-height: 16px;
   font-weight: 400;
+  color: rgba(255, 255, 255, 0.6);
 
   &:before {
     content: "";
@@ -50,23 +51,26 @@
     margin-right: 10px;
     display: block;
     float: left;
+    visibility: hidden;
   }
 
   &.active {
     font-weight: 500;
+    color: #fff;
     &:before {
+      visibility: visible;
       background-color: #fff;
     }
   }
 
   &.done {
     font-weight: 400;
-    color: rgba(255, 255, 255, 0.6);
     &:before {
       content: "✓";
       font-size: 9px;
       line-height: 14px;
-      padding-left: 2px;
+      padding-left: 4px;
+      visibility: visible;
     }
   }
 }