feat(interview-scheduler): add cap on round & Selected tab features

src/components/BaseModal/index.jsx

@@ -21,6 +21,7 @@ const modalStyle = {
   maxWidth: "640px",
   width: "100%",
   margin: 0,
+  "overflow-x": "hidden",
 };
 
 const containerStyle = {

src/constants/index.js

@@ -111,6 +111,7 @@ export const CANDIDATE_STATUS = {
 export const CANDIDATE_STATUS_FILTER_KEY = {
   TO_REVIEW: "TO_REVIEW",
   INTERESTED: "INTERESTED",
+  SELECTED: "SELECTED",
   NOT_INTERESTED: "NOT_INTERESTED",
 };
 
@@ -128,7 +129,13 @@ export const CANDIDATE_STATUS_FILTERS = [
     key: CANDIDATE_STATUS_FILTER_KEY.INTERESTED,
     buttonText: "Interviews",
     title: "Interviews",
-    statuses: [CANDIDATE_STATUS.SELECTED, CANDIDATE_STATUS.INTERVIEW],
+    statuses: [CANDIDATE_STATUS.INTERVIEW],
+  },
+  {
+    key: CANDIDATE_STATUS_FILTER_KEY.SELECTED,
+    buttonText: "Selected",
+    title: "Selected",
+    statuses: [CANDIDATE_STATUS.SELECTED],
   },
   {
     key: CANDIDATE_STATUS_FILTER_KEY.NOT_INTERESTED,
@@ -320,3 +327,5 @@ export const DISABLED_DESCRIPTION_MESSAGE =
  */
 export const INTERVIEW_POPUP_MEDIA_URL =
   "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
+
+export const MAX_ALLOWED_INTERVIEWS = 3;

src/routes/PositionDetails/components/InterviewDetailsPopup/index.jsx

@@ -16,7 +16,7 @@ import User from "components/User";
 import BaseModal from "components/BaseModal";
 import FormField from "components/FormField";
 import Button from "components/Button";
-import { FORM_FIELD_TYPE } from "constants";
+import { FORM_FIELD_TYPE, MAX_ALLOWED_INTERVIEWS } from "constants";
 import "./styles.module.scss";
 import RadioFieldGroup from "components/RadioFieldGroup";
 
@@ -76,6 +76,23 @@ function InterviewDetailsPopup({ open, onClose, candidate, openNext }) {
     [dispatch, candidate]
   );
 
+  // show the warning if exceeds MAX_ALLOWED_INTERVIEW
+  if (
+    candidate &&
+    candidate.interviews &&
+    candidate.interviews.length >= MAX_ALLOWED_INTERVIEWS
+  ) {
+    return (
+      <BaseModal open={open} onClose={onClose} title="Schedule an Interview">
+        <p styleName="exceeds-max-number-txt">
+          You've reached the cap of {MAX_ALLOWED_INTERVIEWS} interviews with
+          this candidate. Now please make your decision to Select and Decline
+          them.
+        </p>
+      </BaseModal>
+    );
+  }
+
   return isLoading ? null : (
     <Form
       initialValues={{
@@ -136,6 +153,10 @@ function InterviewDetailsPopup({ open, onClose, candidate, openNext }) {
                     hideFullName
                   />
                 )}
+                <p styleName="max-warning-txt">
+                  You may have as many as {MAX_ALLOWED_INTERVIEWS} interviews
+                  with each candidate for the job.
+                </p>
               </div>
               <RadioFieldGroup
                 name="time"

src/routes/PositionDetails/components/InterviewDetailsPopup/styles.module.scss

@@ -1,11 +1,24 @@
 @import "styles/include";
 
+.exceeds-max-number-txt {
+  padding: 15px;
+  letter-spacing: 0.5px;
+}
+
 .user {
   font-size: 14px;
   color: #0D61BF;
+  max-width: 37%;
+  .max-warning-txt {
+    padding-top: 5px;
+    padding-left: 5px;
+    font-size: 11px;
+    color: gray;
+  }
 }
 
 .top {
+  width: 100%;
   padding-bottom: 25px;
   border-bottom: 1px solid #E9E9E9;
   display: flex;