Feature/frontend submit

src/components/Checkbox/index.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import PT from "prop-types";
+import "./styles.module.scss";
+
+function Checkbox({ label, checked, onClick }) {
+  return (
+    <label styleName="container">
+      {label}
+      <input type="checkbox" checked={checked} onClick={onClick} />
+      <span styleName="checkmark"></span>
+    </label>
+  );
+}
+
+Checkbox.propTypes = {
+  label: PT.string,
+  checked: PT.bool,
+  onClick: PT.func,
+};
+
+export default Checkbox;

src/components/Checkbox/styles.module.scss

@@ -0,0 +1,75 @@
+@import "styles/include";
+
+/* The container */
+.container {
+  @include font-roboto;
+  color: #2a2a2a;
+  font-size: 14px;
+  line-height: 20px;
+  display: block;
+  position: relative;
+  padding-left: 30px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #fff;
+  border: 1px solid #AAA;
+  border-radius: 3px;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+  background-color: #eee;
+}
+
+/* When the checkbox is checked, add a green background */
+.container input:checked ~ .checkmark {
+  background-color: #0AB88A;
+  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+  left: 6px;
+  top: 3px;
+  width: 6px;
+  height: 11px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
+}

src/constants/index.js

@@ -250,6 +250,14 @@ export const ACTION_TYPE = {
   ADD_MEMBERS_ERROR: "ADD_MEMBERS_ERROR",
   RESET_MEMBERS_STATE: "RESET_MEMBERS_STATE",
   CLEAR_MEMBERS_SUGGESTIONS: "CLEAR_MEMBERS_SUGGESTIONS",
+
+  /*
+    Searched Roles
+  */
+  CLEAR_SEARCHED_ROLES: "CLEAR_SEARCHED_ROLES",
+  ADD_SEARCHED_ROLE: "ADD_SEARCHED_ROLE",
+  ADD_ROLE_SEARCH_ID: "ADD_ROLE_SEARCH_ID",
+  REPLACE_SEARCHED_ROLES: "REPLACE_SEARCHED_ROLES",
 };
 
 /**

src/reducers/index.js

@@ -7,13 +7,15 @@ import positionDetailsReducer from "../routes/PositionDetails/reducers";
 import teamMembersReducer from "../routes/TeamAccess/reducers";
 import emailPopupReducer from "../components/EmailPopup/reducers";
 import authUserReducer from "../hoc/withAuthentication/reducers";
+import searchedRolesReducer from "../routes/CreateNewTeam/reducers";
 
 const rootReducer = combineReducers({
   toastr: toastrReducer,
   positionDetails: positionDetailsReducer,
   teamMembers: teamMembersReducer,
   emailPopup: emailPopupReducer,
   authUser: authUserReducer,
+  searchedRoles: searchedRolesReducer,
 });
 
 export default rootReducer;

src/root.component.jsx

@@ -34,9 +34,9 @@ export default function Root() {
           <ResourceBookingForm path="/taas/myteams/:teamId/rb/:resourceBookingId/edit" />
           <PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
           <TeamAccess path="/taas/myteams/:teamId/access" />
-          <InputJobDescription path="/taas/myteams/createnewteam/jd" />
-          <InputSkills path="/taas/myteams/createnewteam/skills" />
-          <SelectRole path="/taas/myteams/createnewteam/role" />
+          <InputJobDescription path="/taas/myteams/createnewteam/jd/*" />
+          <InputSkills path="/taas/myteams/createnewteam/skills/*" />
+          <SelectRole path="/taas/myteams/createnewteam/role/*" />
         </Router>
 
         {/* Global config for Toastr popups */}

src/routes/CreateNewTeam/actions/index.js

@@ -0,0 +1,20 @@
+import { ACTION_TYPE } from "constants";
+
+export const clearSearchedRoles = () => ({
+  type: ACTION_TYPE.CLEAR_SEARCHED_ROLES,
+});
+
+export const addSearchedRole = (searchedRole) => ({
+  type: ACTION_TYPE.ADD_SEARCHED_ROLE,
+  payload: searchedRole,
+});
+
+export const addRoleSearchId = (id) => ({
+  type: ACTION_TYPE.ADD_ROLE_SEARCH_ID,
+  payload: id,
+});
+
+export const replaceSearchedRoles = (roles) => ({
+  type: ACTION_TYPE.REPLACE_SEARCHED_ROLES,
+  payload: { roles, lastRoleId: roles[roles.length - 1].searchId },
+});

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

@@ -6,25 +6,9 @@
  */
 import React from "react";
 import PT from "prop-types";
-import Modal from "react-responsive-modal";
 import Button from "components/Button";
-import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
 import IconSingleManAdd from "../../../../assets/images/icon-single-man-add.svg";
-import "./styles.module.scss";
-import CenteredSpinner from "components/CenteredSpinner";
-
-const modalStyle = {
-  borderRadius: "8px",
-  padding: "32px 32px 22px 32px",
-  maxWidth: "460px",
-  width: "100%",
-  margin: 0,
-  "overflow-x": "hidden",
-};
-
-const containerStyle = {
-  padding: "10px",
-};
+import BaseCreateModal from "../BaseCreateModal";
 
 function AddAnotherModal({
   open,
@@ -33,52 +17,38 @@ function AddAnotherModal({
   submitDone,
   addAnother,
 }) {
+  const buttons = (
+    <>
+      <Button
+        type="secondary"
+        size="medium"
+        disabled={!submitDone}
+        onClick={addAnother}
+      >
+        Add Another Position
+      </Button>
+      <Button
+        type="primary"
+        size="medium"
+        onClick={onContinueClick}
+        disabled={!submitDone}
+      >
+        Continue
+      </Button>
+    </>
+  );
+
   return (
-    <Modal
+    <BaseCreateModal
       open={open}
-      center
       onClose={onClose}
-      closeIcon={
-        <IconCrossLight height="18px" width="18px" styleName="cross" />
-      }
-      styles={{
-        modal: modalStyle,
-        modalContainer: containerStyle,
-      }}
-    >
-      <div styleName="modal-body">
-        {!submitDone ? (
-          <>
-            <CenteredSpinner />
-            <h5>Submitting Request...</h5>
-          </>
-        ) : (
-          <>
-            <IconSingleManAdd />
-            <h5>Add Another Position</h5>
-            <p>You can add another position to your request if you want to.</p>
-          </>
-        )}
-      </div>
-      <div styleName="button-group">
-        <Button
-          type="secondary"
-          size="medium"
-          disabled={!submitDone}
-          onClick={addAnother}
-        >
-          Add Another Position
-        </Button>
-        <Button
-          type="primary"
-          size="medium"
-          onClick={onContinueClick}
-          disabled={!submitDone}
-        >
-          Continue
-        </Button>
-      </div>
-    </Modal>
+      headerIcon={<IconSingleManAdd />}
+      title="Add Another Position"
+      subtitle="You can add another position to your request if you want to."
+      buttons={buttons}
+      isLoading={!submitDone}
+      maxWidth="480px"
+    />
   );
 }
 

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

@@ -61,7 +61,7 @@ function BaseCreateModal({
         ) : (
           <>
             <div styleName={cn("modal-header", { "dark-header": darkHeader })}>
-              <div styleName="header-icon">{headerIcon}</div>
+              {headerIcon && <div styleName="header-icon">{headerIcon}</div>}
               <h5>{title}</h5>
               {subtitle && <p>{subtitle}</p>}
             </div>