[$60] Allowing to go back after confirming a time for an interview

[sdgun]

Steps Click 'Select Interview Time' link from an email Select a date and submit click back button

User can select another date and submit but it doesn't send out any email on the second or third time and also the name and email fields are empty when going back

Is there any point in letting them to go back to the initial page on this screen?

[maxceem]

This is a built-in functionality of the Nylas. I'll ask them if we can disable this functionality somehow.

[maxceem]

When Job Candidate schedules or reschedule interview they can click the Back button and choose another time.

We don't want user to be able to select another time, once they already selected one. Nylas doesn't allow to hide the back button. But what we can do is show our own custom confirmation page after time was selected.

To do so, when we create Nylas page in TaaS in API we have to define a URL that would be loaded as custom thank you page (see Nylas API https://developer.nylas.com/docs/api/scheduler#post/manage/pages, thank_you_redirect parameter).

TaaS App using BFF (backend for frontend)

TaaS APP (this repo) branch dev

• We have to create an endpoint that would return such a custom HTML page. TaaS API usually returns JSON without HTML and CSS, so it's not the best place. So we could use server which is built-in inside the TaaS APP, see https://github.com/topcoder-platform/taas-app/blob/3cbcdc5a79bd66de433b722a4da378d44e12792c/server.js. We would add an endpoint to this server inside TaaS App to return a custom thank you page.

• Create an endpoint that would return a custom thank you page: GET https://platform.topcoder-dev.com/taas/misc/interview-thank-you-page. Locally it would be https://localhost:8501/taas-app/misc/interview-thank-you-page.

• This endpoint should return a page that would shown inside an iframe, once Job Candidate selects time https://monosnap.com/file/BbZsC9B28o88PlvkKyI3vi9uBSL9Ht

• This page should look the same as Nylas page button without "back" button and without "checkmark":

• Note, that when the thank you page URL is triggered Nylas passes details about the scheduled interview inside the URL query params:

  query: {
    "account_id": "6tgk8uqu1diju33p72tzuigkt",
    "additional_values": "{\"name\":\"Maksym1 Dev\"}",
    "calendar_id": "7m0vnugpvwdb2ajoswssp4d2i",
    "edit_hash": "",
    "email": "",
    "end_time": "1637587800",
    "event_id": "9cu495ltlthh59ystot2gk52h",
    "location": "Location TBD",
    "name": "Maksym1 Dev",
    "page_slug": "tc-taas-interview-e897b547-fb8f-43b5-9d5d-73fb3418d171",
    "prefilled_readonly": "true",
    "start_time": "1637586000",
    "tz": "Europe/London"
  }

• Update TaaS API so when Nylas page is created we set thank_you_redirect so it points this URL: ${TAAS_APP_BASE_URL}/misc/interview-thank-you-page. Branch in TaaS API feature/interview-update-part-2

  

• For verification purposes, please share the screenshot of the thank you page as it shown inside iframe after time was confirmed.

[maxceem]

Half of the task above has been done. API has been updated, and now when Job Candidate select time to schedule or reschedule interview it shows custom thank you page:

What is left to do:

• Update the design of this custom page so it look the same as Nylas page button without "back" button and without "checkmark":

  • Note, that all the details for this page comes in the URL query params.
• To work on this locally:
  • Setup TaaS App local as per guide https://github.com/topcoder-platform/taas-app#how-to-run-locally-for-development
  • But instead of npm run dev run npm run build and then run npx nodemon server.js - this would run TaaS App using built-in server, which would serve this new thank you page on http://localhost:8501/taas-app/misc/interview-thank-you-page
  • Then for testing you may just hardcode this URL inside the iframe URL (temporary) http://localhost:8511/taas-app/misc/interview-thank-you-page%3Faccount_id=6tgk8uqu1diju33p72tzuigkt&additional_values=%7B%22name%22%3A%22Maksym1%20Dev%22%7D&calendar_id=7m0vnugpvwdb2ajoswssp4d2i&edit_hash=EA0-0ENRbQ0obfkviY8XyQ&email=maxceem.dev%40gmail.com&end_time=1637713800&event_id=6qmy6lprcm7rygex30nzzr774&location=Location%20TBD&name=Maksym1%20Dev&page_slug=tc-taas-interview-4c7877e0-bbb5-44ec-904f-1eb8f42ac0e5&prefilled_readonly=true&start_time=1637712000&tz=Europe%2FLondon and work on the page design.
• Update code inside https://github.com/topcoder-platform/taas-app/blob/dev/src/server/misc/routes/interview-thank-you-page.js

[maxceem]

@yoution this is also open for pick up.

The initial task was https://github.com/topcoder-platform/taas-app/issues/562#issuecomment-974637623. But I've made all server-side changes, so now we only need to implement UI as described here https://github.com/topcoder-platform/taas-app/issues/562#issuecomment-976435253.

So no need to local setup TaaS API, only TaaS App.

[yoution]

@maxceem please assign to me

[yoution]

@maxceem we should use vanilla js, and write code in one file?

[maxceem]

Yes @yoution it's better to use vanilla js in this file.

[maxceem]

@yoution actually, I think we don't need js in this file. It just has to render HTML with CSS.

[yoution]

@maxceem this value is from url query?

[maxceem]

hmm @yoution, let me see where we can get it. We don't have it in query.

[yoution]

@maxceem please ignore, I find it

[maxceem]

@yoution not, that's different. Maksym Dev is name of user who was invited for the interview, but not the title.

I found one way to get it using 1 ajax request:

• Get https://schedule.nylas.com/{page_slug} for example https://schedule.nylas.com/tc-taas-interview-4c7877e0-bbb5-44ec-904f-1eb8f42ac0e5
• And inside the source code of this page we can find name https://monosnap.com/file/raq9QuHHLVfLETimhXvrNDAXGYpr7D

Would it work? I think we can use fetch method call this URL.

[maxceem]

@sdgun this is ready for testing/

[sdgun]

Verified in Dev.

[maxceem]

Challenge https://www.topcoder.com/challenges/d3eb505b-a0d7-436f-8395-f9d7db2a7cd6 has been created for this ticket.

This is an automated message for maxceem via Topcoder X

[maxceem]

Challenge https://www.topcoder.com/challenges/d3eb505b-a0d7-436f-8395-f9d7db2a7cd6 has been assigned to yoution.

This is an automated message for maxceem via Topcoder X

[maxceem]

Payment task has been updated: https://www.topcoder.com/challenges/d3eb505b-a0d7-436f-8395-f9d7db2a7cd6 Payments Complete Winner: yoution Copilot: maxceem Challenge d3eb505b-a0d7-436f-8395-f9d7db2a7cd6 has been paid and closed.

This is an automated message for maxceem via Topcoder X