Role & Skills Intake - Job Description Module

Author: yoution

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

@@ -8,8 +8,8 @@ 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 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";
 

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

@@ -10,11 +10,15 @@ import cn from "classnames";
 import PT from "prop-types";
 import CompleteProgress from "../CompleteProgress";
 import "./styles.module.scss";
-import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
+import IconListQuill from "../../assets/images/icon-list-quill.svg";
 
-function Completeness({ isDisabled, onClick, buttonLabel, stage }) {
+function Completeness({ title, backgroundIcon, isDisabled, backgroundImage, onClick, buttonLabel, stage }) {
   return (
-    <div styleName="completeness">
+    <div styleName="completeness"
+      style={{
+        backgroundImage,
+      }}
+    >
       <CompleteProgress
         percentDone={stage === 1 ? 26 : stage === 2 ? 52 : 98}
       />
@@ -26,7 +30,7 @@ function Completeness({ isDisabled, onClick, buttonLabel, stage }) {
             { done: stage > 1 }
           )}
         >
-          Input Skills
+          Input {title}
         </li>
         <li
           styleName={cn(
@@ -49,7 +53,7 @@ function Completeness({ isDisabled, onClick, buttonLabel, stage }) {
       >
         {buttonLabel}
       </Button>
-      <IconListQuill styleName="transparent-icon" />
+      {backgroundIcon}
     </div>
   );
 }
@@ -59,6 +63,9 @@ Completeness.propTypes = {
   onClick: PT.func,
   buttonLabel: PT.string,
   stage: PT.number,
+  title: PT.string,
+  backgroundImage: PT.string,
+  backgroundIcon: PT.string
 };
 
 export default Completeness;

src/routes/InputSkills/components/CompleteProgress/index.jsx renamed to src/components/CompleteProgress/index.jsx

@@ -4,9 +4,17 @@
   @include rounded-card;
   padding: 12px;
   position: relative;
-  background-image: linear-gradient(221.5deg, #2c95d7 0%, #9d41c9 100%);
   width: 250px;
   color: #fff;
+
+  > svg {
+    position: absolute;
+    right: -50px;
+    top: 85px;
+    opacity: 10%;
+    width: 144px;
+    height: 144px;
+  }
 }
 
 .list {
@@ -47,12 +55,3 @@
     }
   }
 }
-
-.transparent-icon {
-  position: absolute;
-  right: -50px;
-  top: 85px;
-  opacity: 10%;
-  width: 144px;
-  height: 144px;
-}

src/routes/InputSkills/components/CompleteProgress/styles.module.scss renamed to src/components/CompleteProgress/styles.module.scss

@@ -6,11 +6,11 @@
  */
 import React, { useState } from "react";
 import "./styles.module.scss";
-import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
-import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg";
-import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
-import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-chat.svg";
-import Curve from "../../../../assets/images/curve.svg";
+import IconEarthCheck from "../../assets/images/icon-earth-check.svg";
+import IconMultipleUsers from "../../assets/images/icon-multiple-users.svg";
+import IconMultipleActionsCheck from "../../assets/images/icon-multiple-actions-check-2.svg";
+import IconTeamMeetingChat from "../../assets/images/icon-team-meeting-chat.svg";
+import Curve from "../../assets/images/curve.svg";
 import Button from "components/Button";
 
 function ResultCard() {

src/routes/InputSkills/components/Completeness/index.jsx renamed to src/components/Completeness/index.jsx

@@ -5,10 +5,10 @@
  */
 import React, { useEffect, useState } from "react";
 import "./styles.module.scss";
-import IconEarthSearch from "../../../../assets/images/icon-earth-search.svg";
-import WorldMapDotted from "../../../../assets/images/world-map-dotted.svg";
-import WorldMapSearch1 from "../../../../assets/images/world-map-search1.svg";
-import WorldMapSearch2 from "../../../../assets/images/world-map-search2.svg";
+import IconEarthSearch from "../../assets/images/icon-earth-search.svg";
+import WorldMapDotted from "../../assets/images/world-map-dotted.svg";
+import WorldMapSearch1 from "../../assets/images/world-map-search1.svg";
+import WorldMapSearch2 from "../../assets/images/world-map-search2.svg";
 
 function SearchCard() {
   const [searchState, setSearchState] = useState(null);

src/routes/InputSkills/components/Completeness/styles.module.scss renamed to src/components/Completeness/styles.module.scss

@@ -11,6 +11,7 @@ import JobForm from "./routes/JobForm";
 import TeamAccess from "./routes/TeamAccess";
 import CreateNewTeam from "./routes/CreateNewTeam";
 import InputSkills from "./routes/InputSkills";
+import InputJobDescription from "./routes/InputJobDescription";
 import ReduxToastr from "react-redux-toastr";
 import store from "./store";
 import "./styles/main.vendor.scss";
@@ -33,6 +34,7 @@ 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/:projectId/skills" />
           <SelectRole path="/taas/myteams/createnewteam/:projectId/role" />
         </Router>

src/routes/InputSkills/components/ResultCard/index.jsx renamed to src/components/ResultCard/index.jsx

@@ -30,6 +30,10 @@ function CreateNewTeam() {
       });
   };
 
+  const goToJobDescription = ()=> {
+        navigate(`/taas/myteams/createnewteam/jd`);
+  }
+
   return (
     <Page title="Create New Team">
       <PageHeader title="Create New Team" />
@@ -55,7 +59,7 @@ function CreateNewTeam() {
         description="You would like to use a description to explain what you need."
         icon={<IconOfficeFileText />}
         backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)"
-        isDisabled
+        onClick={goToJobDescription}
       />
     </Page>
   );

src/routes/InputSkills/components/ResultCard/styles.module.scss renamed to src/components/ResultCard/styles.module.scss

@@ -0,0 +1,80 @@
+/**
+ * Temporary Popup for skill list
+ * show skill list
+ */
+import React from "react";
+import _ from "lodash";
+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 Popup({ open, skills, onClose, isLoading, onContinueClick }) {
+  return (
+    <Modal
+      open={open}
+      center
+      onClose={onClose}
+      closeIcon={
+        <IconCrossLight height="18px" width="18px" styleName="cross" />
+      }
+      styles={{
+        modal: modalStyle,
+        modalContainer: containerStyle,
+      }}
+    >
+      <div styleName="modal-body">
+        {isLoading ? (
+          <>
+            <CenteredSpinner />
+            <h5>loading skills</h5>
+          </>
+        ) : (
+          <>
+            <IconSingleManAdd />
+            <h5>skills</h5>
+            {_.map(skills, (s) => {
+              return <div>{s.tag}</div>;
+            })}
+          </>
+        )}
+      </div>
+      <div styleName="button-group">
+        <Button
+          type="primary"
+          size="medium"
+          disabled={isLoading}
+          onClick={onContinueClick}
+        >
+          Continue
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+Popup.propTypes = {
+  open: PT.bool,
+  onClose: PT.func,
+  isLoading: PT.bool,
+  onContinueClick: PT.func,
+  skills: PT.arrayOf(PT.shape()),
+};
+
+export default Popup;

src/routes/InputSkills/components/SearchCard/index.jsx renamed to src/components/SearchCard/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;
+  }
+}