added results page and submission

Author: mbaghel

src/assets/images/icon-earth-check.svg

@@ -0,0 +1,46 @@
+import React from "react";
+import "./styles.module.scss";
+import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
+import Button from "components/Button";
+
+function ResultCard() {
+  return (
+    <div styleName="result-card">
+      <div styleName="heading">
+        <IconEarthCheck />
+        <h3>We have matching profiles</h3>
+        <p>
+          We have qualified candidates who match 80% or more of your job
+          requirements.
+        </p>
+      </div>
+      <div styleName="card-body">
+        <div styleName="button-group">
+          <Button type="segment-selected" size="small">
+            Overview
+          </Button>
+          <Button type="segment" size="small">
+            Rate Details
+          </Button>
+        </div>
+        <div styleName="content">
+          <div>
+            <h4>80%</h4>
+            <p>Matching rate</p>
+          </div>
+          <div>
+            <h4>300+</h4>
+            <p>Members matched</p>
+          </div>
+        </div>
+        <div>
+          <p>60% of members are available 20 hours / week (part time)</p>
+          <p>20% of members are available 30 hours / week (part time)</p>
+          <p>10% of members are available 40 hours / week (full time)</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ResultCard;

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

@@ -0,0 +1,77 @@
+@import "styles/include";
+
+.result-card {
+  @include rounded-card;
+  max-width: 746px;
+  width: 50vw;
+  margin-right: 30px;
+  height: 80vh;
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 30px 0 30px 0;
+  margin-bottom: 30px;
+  color: #fff;
+  background-image: linear-gradient(225deg, #0ab88a 0%, #137d60 100%);
+
+  svg {
+    margin-bottom: 8px;
+    g {
+      stroke: #fff;
+    }
+  }
+
+  h3 {
+    @include font-barlow-condensed;
+    text-transform: uppercase;
+    font-size: 34px;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 14px;
+  }
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  h4 {
+    @include font-barlow-condensed;
+    font-size: 48px;
+    margin-bottom: 14px;
+  }
+
+  p {
+    font-size: 14px;
+  }
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 55vh;
+}

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

@@ -6,14 +6,27 @@ 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";
 
-function InputSkills() {
+function InputSkills({ projectId }) {
   const [selectedSkills, setSelectedSkills] = useState([]);
   const [searchState, setSearchState] = useState("done");
   const [skills, loadingError] = useData(getSkills);
 
   let searchTimer;
 
+  const submitJob = () => {
+    createJob({
+      projectId,
+      title: "placeholder",
+      skills: selectedSkills,
+    }).then(() => {
+      navigate("/taas/myteams/createnewteam");
+    });
+  };
+
   const toggleSkill = useCallback(
     (id) => {
       if (selectedSkills.includes(id)) {
@@ -58,7 +71,14 @@ function InputSkills() {
       <Completeness isDisabled buttonLabel="Submit Request" stage={2} />
     </div>
   ) : (
-    <div>Done!</div>
+    <div styleName="page">
+      <ResultCard />
+      <Completeness
+        buttonLabel="Submit Request"
+        stage={3}
+        onClick={submitJob}
+      />
+    </div>
   );
 }