fix: issue #523

Author: yoution

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,73 @@
+/**
+ * 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/scheduler";
+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.SCHEDULED ||
+              data.status === INTERVIEW_STATUS.RESCHEDULED
+            ) {
+              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/scheduler.js

@@ -0,0 +1,96 @@
+/* global process */
+
+/**
+ * Scheduler Service
+ */
+import { axiosInstance as axiosWrapper } from "./requestInterceptor";
+import axios from "axios";
+import jwt from "jsonwebtoken";
+import config from "../../config";
+
+/**
+ * Initializes the Scheduler
+ * @param {Object} profile the logged in user and candidate profile
+ */
+export function initializeScheduler(profile) {
+  return axiosWrapper.post(
+    `${config.INTERVIEW_SCHEDULER_URL}/authorize`,
+    profile
+  );
+}
+
+/**
+ * Gets the scheduling page url
+ * @param {Object} page The scheduling page
+ * @param {Object} profile The customer and candidate details
+ * @returns Promise
+ */
+export function scheduleInterview(page, profile) {
+  return axiosWrapper.post(`${config.INTERVIEW_SCHEDULER_URL}/interview`, {
+    schedulingPage: page,
+    ...profile,
+  });
+}
+
+/**
+ * Returns the interview page url for the given interview
+ * @param {String} interviewId The interview id
+ * @returns Promise
+ */
+export function getInterview(interviewId) {
+  return axiosWrapper.get(`${config.API.V5}/getInterview/${interviewId}`);
+}
+
+/**
+ * Updates a scheduling page
+ * @param {Number} pageId The scheduling page id
+ * @param {Object} page The scheduling page
+ * @param {String} editToken The auth token
+ * @returns Promise
+ */
+export function editSchedulingPage(pageId, page, editToken) {
+  return axios.put(`${config.NYLAS_API_URL}/manage/pages/${pageId}`, page, {
+    headers: {
+      Authorization: `Bearer ${editToken}`,
+    },
+  });
+}
+
+/**
+ * Redirects to Nylas Hosted Auth
+ */
+export function redirectToNylasHostedAuth(
+  pageId,
+  pageEditToken,
+  candidateId,
+  path
+) {
+  const clientId = process.env.NYLAS_CLIENT_ID;
+  const redirectUri = `${config.INTERVIEW_SCHEDULER_URL}/oauth/callback`;
+  const responseType = "code";
+  const scopes = "calendar";
+  const state = jwt.sign(
+    {
+      pageId,
+      candidateId,
+      pageEditToken,
+      path,
+    },
+    "secret"
+  );
+  window.location.href = `https://api.nylas.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=${responseType}&scopes=${scopes}&state=${state}`;
+}
+
+/**
+ * Fetch the scheduling page details
+ * @param {Number} pageId The scheduling page id
+ * @param {String} editToken The auth token
+ * @returns Promise
+ */
+export function fetchLatestSchedule(pageId, editToken) {
+  return axios.get(`${config.NYLAS_API_URL}/manage/pages/${pageId}`, {
+    headers: {
+      Authorization: `Bearer ${editToken}`,
+    },
+  });
+}