Unable to create scheduler configuration using NylasSchedulerEditor UI Component

Hello, I have been trying to use Scheduler V3. More specifically using Scheduler UI component. Here is the documentation which I’m following: Getting started with Nylas Scheduler | Nylas Docs

My code looks like this:

import React from "react";
import { NylasScheduling, NylasSchedulerEditor } from "@nylas/react";

function CreateSchedule() {
  return (
    <NylasSchedulerEditor
      nylasSessionsConfig={{
        clientId: "5b...", // Replace with your Nylas client ID
        //   redirectUri: `${window.location.origin}/scheduler-editor`,
        domain: "https://api.eu.nylas.com", // or 'https://api.eu.nylas.com' for EU data center
        hosted: true,
        accessType: "offline",
      }}
      defaultSchedulerConfigStoreState={{
        selectedConfiguration: {
          requires_session_auth: false, // Set to 'false' to create a public configuration
        },
      }}
    />
  );
}
export default CreateSchedule;

When I open the component in browser, I can see as shown in the image. But when I click on View all providers I receive this error:

{
  "request_id": "b702522f-0c84-42ff-a75e-58ffa381df6c",
  "error": {
    "type": "not_found_error",
    "message": "Unrecognized request URL (GET: /connect/auth). Please see https://developer.nylas.com/docs/api/v3/ecc/ or we can help at https://support.nylas.com/."
  }
}

My goal is to create a schedule using my virtual nylas account using the Scheduler UI components, Please guide on how can do this. I want to have something similar to what is developed in this nylas video: https://www.youtube.com/watch?v=d4Avpuupv-c&t=525

@krutd33 thanks for reaching out, let me take a look and circle back shortly!

Hey @krutd33 , you found a typo in our docs! Thank you! Could you please try with https://api.eu.nylas.com/v3 (note the /v3 appended) as the domain URL in the nylasSessionConfig prop?

Hey @antoine @ram appending v3 stopped throwing the error.
I have 2 follow up question.

  1. In nylasSessionsConfig we have redirectUri what should be the code for the path mentioned in the redirectUri
  2. Where is the option to create schedule for the virtual account? In the UI I can’t find option of nylas virtual account.

Attaching the screenshots below.

Hi @krutd33 for item 1, re:redirectUri have you had a chance to look at the Scheduler Quickstart Guides, in those we are using ${window.location.origin}/scheduler-editor where schedule-editor is a separate page created.

Building on what Ram mentioned here:

  1. Have you double-checked your hosted-auth settings in the dashboard? Does your account give access to localhost:3000 like the Quick-Start Guide shows?
  2. Virtual calendars are not yet added to the Nylas dashboard (as you discovered), but we’re anticipating the addition later in the quarter!
    Best
    Antoine

Followed the Quickstart and I have found the code for scheduler-editor
So now I have been able to sign in using my gmail and redirected to the scheduler-editor path.

But in scheduler-editor path I’m facing CORS error. Pasting some screenshots

In the below screenshot please observe that Availability & Booking Options didn’t appear, the way it is present in quickstart guide. In the Calendar booking field, calendar is still loading, I can’t move forward.

The code looks like:

import { NylasSchedulerEditor, NylasScheduling } from "@nylas/react";

function ScheduleEditor() {

  return (
    <div>
      <NylasSchedulerEditor
        schedulerPreviewLink={`${window.location.origin}/?config_id={config.id}`}
        nylasSessionsConfig={{
          clientId: "589.........", // Replace with your Nylas client ID from the previous
          redirectUri: `${window.location.origin}/scheduler-editor`,
          domain: "https://api.eu.nylas.com/v3", // or 'https://api.eu.nylas.com/v3' for EU data center
          hosted: true,
          accessType: "offline",
        }}
        defaultSchedulerConfigState={{
          selectedConfiguration: {
            requires_session_auth: false, // Creates a public configuration which doesn't require a session
            scheduler: {
              // The callback URLs to be set in email notifications
              rescheduling_url: `${window.location.origin}/reschedule/<BOOKING_REFERENCE>`, // The URL of the email notification includes the booking reference
              cancellation_url: `${window.location.origin}/cancel/<BOOKING_REFERENCE>`,
            },
          },
        }}
      />
    </div>
  );
}
export default ScheduleEditor;

PS: I’m not sure on how I will receive the <BOOKING_REFERENCE> & config.id values.

Hi @krutd33 - let me circle back after checking with the team re: booking reference, I am seeing this message:

Error creating configuration: URL must contain :booking_ref token

I’m not sure why you are receiving CORs errors, I don’t see any using the Quickstart Guide (I am just using the corresponding GitHub code sample)

@krutd33 does the following updates to App.jsx work:

rescheduling_url: `${window.location.origin}/reschedule/:booking_ref`, // The URL of the email notification includes the booking reference
cancellation_url: `${window.location.origin}/cancel/:booking_ref`,

Hi Ram, above proposed changes worked.

Now, in the repo as well the quickstart documentation I couldn’t the code for the /reschedule/:booking_ref & /cancel/:booking_ref

Where can I find it? Or can you help me with the code for the rescheduling and cancelling for the Nylas React UI react component?

Hi @krutd33 - we do not have the code available for the corresponding reschedule / cancel user paths in the Quickstart Guides at the moment. Will let you know if this changes.

@krutd33 the getting started with v3 Scheduler has a section for reschedule/cancellation, so these need to be added to separate react routes.

Thanks @ram that helped.

Another question, is there a way to fetch the list of all the bookings along with the booking id for a particular time range? maybe some api?

Have you taken a our Event APIs for retrieving events?

Thanks @ram I got confused with Bookings API to fetch all the events.

I am facing one issue when I’m trying to book an appointment using Scheduler UI component. Please help me to resolve this error.

API: https://api.eu.nylas.com/v3/scheduling/bookings?configuration_id=e5de7......................

Error response:

{
    "request_id": "f1d584fd-e5ad-4098-95ff-8f9e3b4c0fd7",
    "error": {
        "type": "invalid_request_error",
        "message": "json: cannot unmarshal object into Go struct field CreateBookingRequest.additional_fields of type []scheduling.BookingAdditionalField"
    }
}

Hi @krutd33 thanks for sharing the error message, this is helpful - let me look into this and circle back when I have updates.

@krutd33 can you share what version of the npm package you’re using?

@ram version of @nylas/react is 1.1.0-canary.17