fix: issue #523

src/constants/index.js

@@ -48,6 +48,19 @@ export const POSITION_STATUS = {
   CANCELLED: "cancelled",
 };
 
+/**
+ * Interview related constants
+ */
+export const INTERVIEW_STATUS = {
+  SCHEDULING: "Scheduling",
+  SCHEDULED: "Scheduled",
+  REQUESTEDFORRESCHEDULE: "Requested for reschedule",
+  RESCHEDULED: "Rescheduled",
+  COMPLETED: "Completed",
+  CANCELLED: "Cancelled",
+  EXPIRED: "Expired",
+};
+
 /**
  * Mapping between position status "server value" and human readable value
  */

src/root.component.jsx

@@ -19,6 +19,7 @@ import InputSkills from "./routes/CreateNewTeam/pages/InputSkills";
 import InputJobDescription from "./routes/CreateNewTeam/pages/InputJobDescription";
 import SelectRole from "./routes/CreateNewTeam/pages/SelectRole";
 import CreateTaasPayment from "./routes/CreateNewTeam/pages/CreateTaasPayment";
+import SchedulingPage from "./routes/SchedulingPage";
 import ReduxToastr from "react-redux-toastr";
 import store from "./store";
 import "./styles/main.vendor.scss";
@@ -50,6 +51,7 @@ export default function Root() {
             <InputSkills path="skills/*" />
             <SelectRole path="role/*" />
           </CreateNewTeam>
+          <SchedulingPage path="/taas/interview/:interviewId" />
         </Router>
 
         {/* Global config for Toastr popups */}

src/routes/SchedulingPage/index.jsx

@@ -0,0 +1,70 @@
+/**
+ * Scheduling Page
+ *
+ * Allows users to set up bookings for an interview in Nylas
+ */
+import React, { useEffect, useState } from "react";
+import { getAuthUserProfile } from "@topcoder/micro-frontends-navbar-app";
+import _ from "lodash";
+import Page from "components/Page";
+import LoadingIndicator from "components/LoadingIndicator";
+import PageHeader from "components/PageHeader";
+import { getInterview } from "services/interviews";
+import { INTERVIEW_STATUS } from "constants";
+import withAuthentication from "../../hoc/withAuthentication";
+
+const SchedulingPage = ({ interviewId }) => {
+  const [schedulingPageUrl, setSchedulingPageUrl] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  // if there are some candidates to review, then show "To Review" tab by default
+  useEffect(() => {
+    getAuthUserProfile()
+      .then((res) => {
+        return {
+          firstName: res.firstName,
+          lastName: res.lastName,
+          email: res.email,
+        };
+      })
+      .then((profile) => {
+        getInterview(interviewId)
+          .then(({ data }) => {
+            if (data.status === INTERVIEW_STATUS.SCHEDULING) {
+              setSchedulingPageUrl(
+                `https://schedule.nylas.com/${data.nylasPageSlug}?email=${
+                  profile.email
+                }&name=${encodeURI(
+                  profile.firstName + " " + profile.lastName
+                )}&prefilled_readonly=true`
+              );
+            } else {
+              setErrorMessage("No interviews scheduled");
+            }
+          })
+          .catch((err) => {
+            setErrorMessage(err);
+          });
+      });
+  }, [interviewId]);
+
+  return (
+    <Page title="Schedule Interview">
+      {!schedulingPageUrl ? (
+        <LoadingIndicator error={errorMessage} />
+      ) : (
+        <>
+          <PageHeader title="Schedule Interview" />
+          <iframe
+            title="Nylas Scheduling Page"
+            src={schedulingPageUrl}
+            width="1020"
+            height="900"
+          />
+        </>
+      )}
+    </Page>
+  );
+};
+
+export default withAuthentication(SchedulingPage);

src/services/interviews.js

@@ -17,3 +17,12 @@ export const confirmInterview = (candidateJobId, data) => {
     data
   );
 };
+
+/**
+ * Returns the interview page url for the given interview
+ * @param {String} interviewId The interview id
+ * @returns Promise
+ */
+export const getInterview = (interviewId) => {
+  return axios.get(`${config.API.V5}/getInterview/${interviewId}`);
+};