Merge pull request #286 from cagdas001/feature/role-intake

feat(create-new-team): role intake module

Author: nikolay83

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

@@ -10,12 +10,12 @@ import JobDetails from "./routes/JobDetails";
 import JobForm from "./routes/JobForm";
 import TeamAccess from "./routes/TeamAccess";
 import CreateNewTeam from "./routes/CreateNewTeam";
-import InputSkills from "./routes/InputSkills";
+import InputSkills from "./routes/CreateNewTeam/pages/InputSkills";
+import SelectRole from "./routes/CreateNewTeam/pages/SelectRole";
 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 (

src/assets/images/icon-role-fallback.svg

@@ -26,7 +26,13 @@ const containerStyle = {
   padding: "10px",
 };
 
-function AddAnotherModal({ open, onClose, submitDone, addAnother }) {
+function AddAnotherModal({
+  open,
+  onClose,
+  onContinueClick,
+  submitDone,
+  addAnother,
+}) {
   return (
     <Modal
       open={open}
@@ -63,7 +69,12 @@ function AddAnotherModal({ open, onClose, submitDone, addAnother }) {
         >
           Add Another Position
         </Button>
-        <Button type="primary" size="medium" disabled={!submitDone}>
+        <Button
+          type="primary"
+          size="medium"
+          onClick={onContinueClick}
+          disabled={!submitDone}
+        >
           Continue
         </Button>
       </div>

src/assets/images/icon-search.svg

@@ -0,0 +1,58 @@
+/**
+ * CircularProgressBar component.
+ * Displays a circular progress bar.
+ * Size and strokeWidth are customizable.
+ * Allows appending children inside bar.
+ */
+import React, { useEffect, useState, useRef } from "react";
+import PT from "prop-types";
+
+const CircularProgressBar = ({ size, progress, children, strokeWidth }) => {
+  const [offset, setOffset] = useState(0);
+  const circleRef = useRef(null);
+  const center = size / 2;
+  const radius = size / 2 - strokeWidth / 2;
+  const circumference = 2 * Math.PI * radius;
+  useEffect(() => {
+    const progressOffset = ((100 - progress) / 100) * circumference;
+    setOffset(progressOffset);
+    circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
+  }, [setOffset, progress, circumference, offset]);
+  return (
+    <>
+      <svg width={size} height={size}>
+        <circle
+          stroke="lightgray"
+          fill="transparent"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+        <circle
+          ref={circleRef}
+          stroke="#219174"
+          fill="transparent"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+        />
+        <foreignObject x="35" y="50" width={size * 0.6} height={size * 0.6}>
+          {children ? children : `${progress}%`}
+        </foreignObject>
+      </svg>
+    </>
+  );
+};
+
+CircularProgressBar.propTypes = {
+  size: PT.number.isRequired,
+  progress: PT.number.isRequired,
+  children: PT.node,
+  strokeWidth: PT.number.isRequired,
+};
+
+export default CircularProgressBar;

src/root.component.jsx

@@ -0,0 +1,65 @@
+/**
+ * Completeness Sidebar
+ * Shows level of completeness through skill
+ * input process and contains a button for
+ * searching for users or submitting the job.
+ */
+import Button from "components/Button";
+import React from "react";
+import cn from "classnames";
+import PT from "prop-types";
+import CompleteProgress from "../CompleteProgress";
+import "./styles.module.scss";
+import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
+import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
+
+function Completeness({
+  extraStyleName,
+  isDisabled,
+  onClick,
+  buttonLabel,
+  stages,
+  percentage,
+}) {
+  return (
+    <div styleName={cn("completeness", extraStyleName)}>
+      <CompleteProgress percentDone={percentage} />
+      <ul styleName="list">
+        {stages.map((stage) => (
+          <li
+            styleName={cn("list-item", {
+              active: stage.isCurrent,
+              done: stage.completed,
+            })}
+          >
+            {stage.name}
+          </li>
+        ))}
+      </ul>
+      <Button
+        size="medium"
+        type="secondary"
+        disabled={isDisabled}
+        onClick={onClick}
+      >
+        {buttonLabel}
+      </Button>
+      {extraStyleName === "input-skills" ? (
+        <IconListQuill styleName="transparent-icon" />
+      ) : (
+        <IconMultipleActionsCheck styleName="transparent-icon" />
+      )}
+    </div>
+  );
+}
+
+Completeness.propTypes = {
+  extraStyleName: PT.string,
+  isDisabled: PT.bool,
+  onClick: PT.func,
+  buttonLabel: PT.string,
+  currentStageIdx: PT.number,
+  stages: PT.arrayOf(PT.string),
+};
+
+export default Completeness;

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

@@ -4,9 +4,19 @@
   @include rounded-card;
   padding: 12px;
   position: relative;
-  background-image: linear-gradient(221.5deg, #2c95d7 0%, #9d41c9 100%);
   width: 250px;
   color: #fff;
+  button {
+    border: none;
+  }
+}
+
+.input-skills {
+  background-image: linear-gradient(221.5deg, #2c95d7 0%, #9d41c9 100%);
+}
+
+.role-selection {
+  background-image: linear-gradient(45deg, #8B41B0 0%, #EF476F 100%);
 }
 
 .list {
@@ -43,7 +53,7 @@
       content: "✓";
       font-size: 9px;
       line-height: 14px;
-      padding-left: 2px;
+      padding-left: 3px;
     }
   }
 }

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

@@ -16,6 +16,9 @@
   align-items: center;
   position: relative;
   z-index: 10;
+  button {
+    border: none;
+  }
 }
 
 .title {

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

@@ -0,0 +1,43 @@
+/**
+ * No Matching Profiles Result Card
+ * Card that appears when there are no matching profiles after searching.
+ */
+import React from "react";
+import { navigate } from "@reach/router";
+import "./styles.module.scss";
+import IconEarthX from "../../../../assets/images/icon-earth-x.svg";
+import Curve from "../../../../assets/images/curve.svg";
+import Button from "components/Button";
+
+function NoMatchingProfilesResultCard() {
+  return (
+    <div styleName="result-card">
+      <div styleName="heading">
+        <IconEarthX />
+        <h3>No Matching Profiles</h3>
+        <Curve styleName="curve" />
+        <IconEarthX styleName="transparent-icon" />
+      </div>
+      <div styleName="content">
+        <p styleName="info-txt">
+          We will be looking internally for members matching your requirements
+          and be back at them in about 2 weeks.
+        </p>
+        <div styleName="niche-rate-box">
+          <p>Niche Rate</p>
+          <p styleName="cost">$1,200</p>
+          <p>/Week</p>
+        </div>
+        <Button
+          onClick={() => navigate("/taas/myteams/createnewteam")}
+          type="secondary"
+          styleName="button"
+        >
+          Modify Search Criteria
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default NoMatchingProfilesResultCard;