[$175] Integrate Connect Calendar feature

[maxceem]

Recently we've implemented Connect Calendar feature in API in this challenge https://www.topcoder.com/challenges/af9a1041-7a78-484d-87d3-5aec9e87b578?tab=details

Now we would like to integrate it with UI.

To work on this task you would have to run locally TaaS API and TaaS App as per this guide.

General Logic

• User clicks a link to connect calendar
• Redirected to Google/Microsoft/Nylas
• From there it redirected to TaaS API to save connected calendar details
• And from TaaS API it is redirected back to TaaS APP
• When redirected to TaaS App from link we have to know what interview popup to open and if calendar connection was successful or failed.

Task

• Build link as described in this challenge https://www.topcoder.com/challenges/af9a1041-7a78-484d-87d3-5aec9e87b578?tab=details
  • As redirectTo set URL to the current page + add ?interviewWithCandidate={jobCandidateId}, example https://platform.topcoder-dev.com/taas/myteams/18907/positions/a14d4946-418c-4329-998e-918603348fe2/candidates/interviews?interviewWithCandidate=8b0346e8-76bd-4c8c-b378-d27d3ce24262
• When calendar is connected and redirected back to TaaS APP there could be 2 situations:
  • calendar connected successfully:
    • in this case it would redirect to the page with the next params ?interviewWithCandidate={jobCandidateId}&calendarConnected=true
    • show interview scheduling modal as if we click button "schedule interview" https://monosnap.com/file/jzsr7LVUjWxz5lv2Yb7pKppXKG3wiR
    • show green toast which say that "Calendar was successfully connected."
    • remove part ?interviewWithCandidate={jobCandidateId}&calendarConnected=true from URL
  • calendar connection failed:
    • in this case it would redirect to the page with the next params ?interviewWithCandidate={jobCandidateId}&calendarConnected=false&error={errorReason}
    • show red toast which say that "Failed to connect calendar: {errorReason}"
    • remove part ?interviewWithCandidate={jobCandidateId}&calendarConnected=false&error={errorReason} from URL

Verification

Provide demo video(s) showing both cases: calendar connected successfully or failed.

[deblasis]

Hi @maxceem! I am happy to work on this if you agree

[maxceem]

Sure, assigned you @deblasis.

[deblasis]

Hi @maxceem since you didn't specify otherwise, I was expecting to find the new design changes with the Nylas schedule interview "wizard" (as per your screenshot) merged to dev already.

Just to make sure that I fully understand the scope of the changes can you please point out the source branches for taas-apis and taas-app ?

Cheers

[maxceem]

hi @deblasis

In both repositories we have to use branch feature/interview-update as mentioned in this guide https://github.com/topcoder-platform/taas-app/wiki/Run-TaaS-App-with-TaaS-API-locally-to-test-Interview-Scheduling-using-Nylas

[yoution]

@maxceem please assign to me

[yoution]

@maxceem please ask others to finish this one, I don't have time to finish it

[maxceem]

@yoution if we extend time till tomorrow end of the day, would it help you?

[yoution]

@maxceem , sorry, I am not familiar with Google/Microsoft, to configure these two apps will waste me a lot of time, I hope others can help you

[maxceem]

got it @yoution, no problem

The payment for this issue has been raised to $175.

@deblasis, @mahidulalvi-bonic if you would like to work on this issue and can complete it by Tuesday 26 October 9am GMT+3, just let me know in comment and you may start working on it.

[ghost]

@maxceem , I can work on it.

[maxceem]

Sure, assigned to you @mahidulalvi-bonic

[ghost]

Thanks.

[ghost]

Hi @maxceem , the requirement 1 says, "As redirectTo set URL to the current page + add ?interviewWithCandidate={jobCandidateId}, example https://platform.topcoder-dev.com/taas/myteams/18907/positions/a14d4946-418c-4329-998e-918603348fe2/candidates/interviews?interviewWithCandidate=8b0346e8-76bd-4c8c-b378-d27d3ce24262"

Here, the example url has '...candidates/interviews' but when I run the app the url is '.../candidates/to-review'. Should I use the one in the app?

[maxceem]

@mahidulalvi-bonic yeah, it has to be the one in the app.

In App we could schedule interview from at least 2 pages:

• https://platform.topcoder-dev.com/taas/myteams/16786/positions/c1f3e159-729e-4eae-a9db-4f445a37e968/candidates/to-review
• https://platform.topcoder-dev.com/taas/myteams/16786/positions/c1f3e159-729e-4eae-a9db-4f445a37e968/candidates/interviews

So whatever the current URL is we have to add ?interviewWithCandidate=8b0346e8-76bd-4c8c-b378-d27d3ce24262 with Job Candidate id which we choose, so redirectTo might become:

• https://platform.topcoder-dev.com/taas/myteams/16786/positions/c1f3e159-729e-4eae-a9db-4f445a37e968/candidates/to-review?interviewWithCandidate=8b0346e8-76bd-4c8c-b378-d27d3ce24262 or
• https://platform.topcoder-dev.com/taas/myteams/16786/positions/c1f3e159-729e-4eae-a9db-4f445a37e968/candidates/interviews?interviewWithCandidate=8b0346e8-76bd-4c8c-b378-d27d3ce24262

Depend on what is the current URL.

[ghost]

@maxceem , should the JWT token in the 'state' param have any expiry? If so, how long should it be?

And in case, jwt is not verified due to expiry/invalid secret, how should it work? Should it show an error from API in blank page like: {"message":"Could not verify JWT token."}, or should it try to look into jwt without verifying, and use the redirectTo to redirect back? This may require additional sanitising.

[ghost]

Hi @maxceem , I sent another demo video in your email.

[maxceem]

Hi @mahidulalvi-bonic no need to make it expired or verification. Basically for now we are only using it to compress the data we pass, because state has very limit length, and using JWT we can compress a big object.

[maxceem]

Thank you @mahidulalvi-bonic all works good. Payment is processed https://www.topcoder.com/challenges/502cfdda-859b-42de-b772-d6022be7cff3

[ghost]

No problem, thanks.

[sdgun]

@mahidulalvi-bonic @maxceem Seeing the below error when trying to connect the calender

Error
Sorry, an error occurred :(

Status 500:

An internal error occurred. If this issue persists, please contact support and copy/paste this request_uid: "A29E1630:6E28_0A4D0942:01BB_617F6B7B_35ABE:2568".

https://user-images.githubusercontent.com/4592712/139621417-cf97c8c1-413b-4005-8b50-0d1b1f739314.mp4

[sandhiyakavi]

@maxceem While trying the same above scenario, I am getting a different error "{"message":"Could not verify JWT token."}" at the api level.

Note: But the Google account connected successfully when I tried to schedule interview again by Connecting to the Google account

[maxceem]

Thank you @sdgun @sandhiyakavi

We would try to debug it. If you happen to have such issues again, could you please, copy/paste the URL from the browser which you had when error happens. It might help debugging it.

[sandhiyakavi]

@maxceem tried again, Getting TokenExpiredError with url https://api.topcoder-dev.com/v5/taas-teams/user-meeting-settings/callback?state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI3MWM1ZTZhOC01MWQ5LTRmYjUtOTFjZS1kOTc0NjQyNTMxYWYiLCJyZWRpcmVjdFRvIjoiaHR0cHM6Ly9wbGF0Zm9ybS50b3Bjb2Rlci1kZXYuY29tL3RhYXMvbXl0ZWFtcy8xODk2Mi9wb3NpdGlvbnMvYTY4MTUyNTUtNWQ4MC00NGIwLTkzMmItODM4OWU4Njc1NjBiL2NhbmRpZGF0ZXMvdG8tcmV2aWV3P2ludGVydmlld1dpdGhDYW5kaWRhdGU9YjZjMTMwNjMtM2ZiYy00OWY0LTgzMTYtMWVkZGQ5NDVlOTYwIiwiaWF0IjoxNjM1NzYwODc2LCJleHAiOjE2MzU3NjA5MzZ9.wnk1WShZ9GaWGu_gPLRg9qLJ61UhRxb0_hsLALsKHtI&code=wVs8SPRgvEk7nGXX6DkE7o1Ck2Z7dr

[maxceem]

@sdgun regarding your issue during connecting calendar. I see that you are using email taasintake3@gmail.com. I wonder if you ever used the same email with + sign like taasintake3+something@gmail.com?

I've noticed that if we use with Nylas email with + then if we try to connect calendar with the same email with + or without + it got broken.

So we always have to use real different emails we cannot use the same email with + because it points to the same Google account and lead to such issues.

cc @sandhiyakavi just in case

[maxceem]

@sandhiyakavi could you, please, try testing it one more time. Your issue has to be resolved now.

[sdgun]

@maxceem So far I only had this issue with taasintake3 which I have used with a + to create another user. I will check with some more users tommorrow.

[sandhiyakavi]

@maxceem Verified. I am not getting TokenExpiredError now.

[sdgun]

@maxceem Tried with a fresh user today and I am seeing these errors, also we don't get the interview booked email anymore

https://user-images.githubusercontent.com/4592712/139788948-e7bbfc78-df1b-4fb0-8a51-01005a559d03.mp4

[maxceem]

@sdgun does this error happen if you select calendar permissions from the first time without going back?

[sdgun]

@maxceem Yes

[sdgun]

@maxceem Don't see any of the errors seen in the above comment video anymore, but the first time a new user connecting calender, always got the below error and it didn't connect the calender. But it worked second time.

Error: Could not find any writable calender

https://user-images.githubusercontent.com/4592712/140027082-6dcbe21f-9719-4a40-a32e-60ee31056629.mp4

[ghost]

Hi @maxceem, just saw this, I encountered this issue when creating new users in Exchange and it used to go away after some time but usually happened just after creating Exchange account.

[maxceem]

@mahidulalvi-bonic I did some debugging and it looks likes a Nylas issue. At the moment when it redirects us to API the calendar is not yet returned by Nylas API. But if we try to get it after some time it’s there. I’ve reported it to Nylas support and waiting for response.

[sdgun]

Thank you @sdgun @sandhiyakavi

We would try to debug it. If you happen to have such issues again, could you please, copy/paste the URL from the browser which you had when error happens. It might help debugging it.

@maxceem I got this sporadically again, here is the url:

https://api.nylas.com/oauth/callback?state=7zfb3l5qmnreyoft6kb55j76i&code=4/0AX4XfWiRH2Mn7Iqvhr69FYBwAxubQZTa-Ry4LL1xmAuvUGcFJmFsS4bPaJMQye-0oD-6zA&scope=email%20profile%20https://www.googleapis.com/auth/calendar%20openid%20https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/userinfo.email&authuser=4&prompt=consent

https://user-images.githubusercontent.com/4592712/140510573-7a77a306-1f3e-4f12-b25c-4a85c7f738f4.mp4

[maxceem]

Thank you for the demo video @sdgun. By any chance did you ever use the same email with + sign? like taasintake11+somthing@gmail.com.

[sdgun]

@maxceem As far as I remember I haven't used it

[sdgun]

@maxceem We still have https://github.com/topcoder-platform/taas-app/issues/519#issuecomment-958729774, I guess this has not been addressed yet

[maxceem]

@maxceem We still have #519 (comment), I guess this has not been addressed yet

Yeah, it still has to be fixed. I created a separate issue to track it https://github.com/topcoder-platform/taas-app/issues/580.

Is this the only one thing which left not working here?

[sdgun]

@maxceem We are waiting for connect Microsoft calender testing, if it is handled in a separate ticket that's all the issues for this

[maxceem]

@sdgun got it. I've created a separate issue for Microsoft calendar for easier tracking, so it's clear what has to be done https://github.com/topcoder-platform/taas-app/issues/581

[sdgun]

Removing the milestone since this feature was disabled in the current production release https://github.com/topcoder-platform/taas-app/issues/598