Merge pull request #528 from mahidulalvi-bonic/feature/interview-update

Integrated calendar connection functionality with Nylas & TAAS APIs.

Author: maxceem

README.md

@@ -136,10 +136,16 @@ Some config files are using domain `local.topcoder-dev.com`. You can change it t
    nvm use # or make sure to use Node 10
    npm i   # to install dependencies
 
-    # set environment variables:
+   # set environment variables:
 
    export STRIPE_PUBLIC_KEY=""
 
+   # get the below client id from Nylas app settings in Nylas account
+   export NYLAS_CLIENT_ID=""
+
+   # configure the below JWT secret by matching with the one set in TAAS APIS
+   export NYLAS_CONNECT_CALENDAR_JWT_SECRET=""
+
    npm run dev
 
    # this host TaaS App as http://localhost:8501/taas-app/topcoder-micro-frontends-teams.js

package-lock.json

@@ -70,10 +70,12 @@
     "final-form": "^4.20.1",
     "final-form-arrays": "^3.0.2",
     "immutability-helper": "^3.1.1",
+    "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
     "prop-types": "^15.7.2",
+    "query-string": "^7.0.1",
     "react": "^16.12.0",
     "react-avatar": "^3.9.7",
     "react-datepicker": "^3.8.0",

package.json

@@ -4,9 +4,10 @@ import PT from "prop-types";
 import { BUTTON_SIZE, BUTTON_TYPE } from "constants";
 import GoogleLogo from "../../../../../assets/images/icon-google.svg";
 import MicrosoftLogo from "../../../../../assets/images/icon-microsoft.svg";
-import { deleteCalendar } from "../../../../../services/interviews";
-import React, { useState } from "react";
+import { connectCalendar, deleteCalendar } from "../../../../../services/interviews";
+import React, { useEffect, useState } from "react";
 import { toastr } from "react-redux-toastr";
+import { useLocation } from "@reach/router";
 import Spinner from "components/CenteredSpinner";
 import "./styles.module.scss";
 
@@ -22,6 +23,7 @@ const ConnectCalendar = ({
   userProfile,
   onGoingBack,
   onCalendarRemoved,
+  candidate,
 }) => {
   const [showLoader, setLoader] = useState();
 
@@ -42,6 +44,13 @@ const ConnectCalendar = ({
       });
   };
 
+  const handleConnectCalendar = () => {
+    // construct the appRedirectUrl with current window url and added query params
+    const appRedirectUrl = `${window.location.href}?interviewWithCandidate=${candidate.id}`;
+
+    return connectCalendar(userProfile.id, appRedirectUrl)
+  };
+
   return (
     <div styleName="connect-calendar">
       {!isConnected && (
@@ -72,16 +81,26 @@ const ConnectCalendar = ({
           <div styleName="switch-calendar">Switch to a New calendar</div>
         </>
       )}
-      <div styleName="button-wrapper">
-        <Button size={BUTTON_SIZE.SMALL} styleName={cn("button", "google-btn")}>
-          <GoogleLogo styleName="icons-wrapper" />
-          Sign in with google
-        </Button>
-        <Button size={BUTTON_SIZE.SMALL}>
-          <MicrosoftLogo styleName="icons-wrapper" />
-          Sign in with microsoft
-        </Button>
-      </div>
+      {showLoader && <Spinner stype="Oval" width="20" height="20" />}
+      {!showLoader && <>  
+        <div styleName="button-wrapper">
+          <Button
+            size={BUTTON_SIZE.SMALL}
+            styleName={cn("button", "google-btn")}
+            onClick={() => handleConnectCalendar()}
+          >
+            <GoogleLogo styleName="icons-wrapper" />
+            Sign in with google
+          </Button>
+          <Button
+            size={BUTTON_SIZE.SMALL}
+            onClick={() => handleConnectCalendar()}
+          >
+            <MicrosoftLogo styleName="icons-wrapper" />
+            Sign in with microsoft
+          </Button>
+        </div>
+      </>}
 
       <div styleName="description">
         Our calendar integration only checks the duration and free/busy status
@@ -118,6 +137,7 @@ ConnectCalendar.propTypes = {
   }),
   onCalendarRemoved: PT.func,
   onGoingBack: PT.func,
+  candidate: PT.object,
 };
 
 export default ConnectCalendar;

src/routes/PositionDetails/components/InterviewPopup/ConnectCalendar/index.jsx

@@ -38,6 +38,7 @@
   font-size: 14px;
   line-height: 24px;
   color: #2a2a2a;
+  margin-top: 16px;
 }
 
 // Section shown when email is connected

src/routes/PositionDetails/components/InterviewPopup/ConnectCalendar/styles.module.scss

@@ -164,7 +164,12 @@ const InterviewPopup = ({
         return <ScheduleInterview onClick={onChangeStage} />;
       case POPUP_STAGES.CONNECT_CALENDAR:
         return (
-          <ConnectCalendar isConnected={false} onGoingBack={onGoingBack} />
+          <ConnectCalendar
+            userProfile={v5UserProfile}
+            isConnected={false}
+            onGoingBack={onGoingBack}
+            candidate={candidate}
+          />
         );
       case POPUP_STAGES.MANAGE_CALENDAR:
         const calendar = getCalendar(userSettings);
@@ -175,6 +180,7 @@ const InterviewPopup = ({
             calendar={calendar}
             onGoingBack={onGoingBack}
             onCalendarRemoved={onCalendarRemoved}
+            candidate={candidate}
           />
         );
       case POPUP_STAGES.MANAGE_AVAILABILITY: