Added modal on submit job. Added nav to add another role. Updated behaviour of submit job click.

Author: mbaghel

src/assets/images/icon-single-man-add.svg

@@ -15,6 +15,7 @@ import ReduxToastr from "react-redux-toastr";
 import store from "./store";
 import "./styles/main.vendor.scss";
 import styles from "./styles/main.module.scss";
+import SelectRole from "./routes/SelectRole";
 
 export default function Root() {
   return (
@@ -33,6 +34,7 @@ export default function Root() {
           <TeamAccess path="/taas/myteams/:teamId/access" />
           <CreateNewTeam path="/taas/myteams/createnewteam" />
           <InputSkills path="/taas/myteams/createnewteam/:projectId/skills" />
+          <SelectRole path="/taas/myteams/createnewteam/:projectId/role" />
         </Router>
 
         {/* Global config for Toastr popups */}

src/root.component.jsx

@@ -0,0 +1,75 @@
+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",
+};
+
+function AddAnotherModal({ open, onClose, submitDone, addAnother }) {
+  return (
+    <Modal
+      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" disabled={!submitDone}>
+          Continue
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+AddAnotherModal.propTypes = {
+  open: PT.bool,
+  onClose: PT.func,
+  submitDone: PT.bool,
+  addAnother: PT.func,
+};
+
+export default AddAnotherModal;

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

@@ -0,0 +1,48 @@
+@import "styles/include";
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+  :first-child {
+    margin-right: 8px;
+  }
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 80px;
+
+  svg {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+  }
+
+  h5 {
+    @include font-barlow-condensed;
+    font-size: 34px;
+    color: #1e94a3;
+    text-transform: uppercase;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  p {
+    @include font-roboto;
+    font-size: 16px;
+    color: #555555;
+    line-height: 26px;
+  }
+}
+
+.cross {
+  g {
+    stroke: #000;
+  }
+}

src/routes/InputSkills/components/AddAnotherModal/styles.module.scss

@@ -1,33 +1,52 @@
 import React, { useCallback, useEffect, useState } from "react";
+import { useData } from "hooks/useData";
+import { navigate } from "@reach/router";
+import { toastr } from "react-redux-toastr";
 import SkillsList from "./components/SkillsList";
 import Completeness from "./components/Completeness";
 import "./styles.module.scss";
-import { useData } from "hooks/useData";
 import { getSkills } from "services/skills";
 import LoadingIndicator from "components/LoadingIndicator";
 import SearchCard from "./components/SearchCard";
 import ResultCard from "./components/ResultCard";
 import { createJob } from "services/jobs";
-import { navigate } from "@reach/router";
+import AddAnotherModal from "./components/AddAnotherModal";
 
 function InputSkills({ projectId }) {
   const [selectedSkills, setSelectedSkills] = useState([]);
   const [searchState, setSearchState] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [submitDone, setSubmitDone] = useState(false);
+
   const [skills, loadingError] = useData(getSkills);
 
   let searchTimer;
 
   const submitJob = () => {
+    setSubmitDone(false);
+    setModalOpen(true);
     createJob({
       projectId,
       title: `job-${Date()}`,
       skills: selectedSkills,
       numPositions: 1,
-    }).then(() => {
-      navigate("/taas/myteams/createnewteam");
-    });
+    })
+      .then(() => {
+        toastr.success("Job Submitted");
+      })
+      .catch((err) => {
+        console.error(err);
+        toastr.warning("Error Submitting Job");
+      })
+      .finally(() => {
+        setSubmitDone(true);
+      });
   };
 
+  const addAnother = useCallback(() => {
+    navigate(`/taas/myteams/createnewteam/${projectId}/role`);
+  }, [projectId]);
+
   const toggleSkill = useCallback(
     (id) => {
       if (selectedSkills.includes(id)) {
@@ -79,6 +98,12 @@ function InputSkills({ projectId }) {
         stage={3}
         onClick={submitJob}
       />
+      <AddAnotherModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        submitDone={submitDone}
+        addAnother={addAnother}
+      />
     </div>
   );
 }

src/routes/InputSkills/index.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function SelectRole() {
+  return <h2>Select A Role</h2>;
+}
+
+export default SelectRole;